Data Type section on flow view

#CTCTOWALTZ-2911
finos#6813

waltz-data/src/main/java/org/finos/waltz/data/datatype_decorator/DataTypeDecoratorDao.java

@@ -39,6 +39,7 @@ public abstract List<DataTypeDecorator> findByEntityIdSelector(Select<Record1<Lo
                                                                    Optional<EntityKind> entityKind);
 
     public abstract List<DataTypeDecorator> findByAppIdSelector(Select<Record1<Long>> appIdSelector);
+    public abstract List<DataTypeDecorator> findByFlowIdSelector(Select<Record1<Long>> flowIdSelector);
 
     public abstract List<DataTypeDecorator> findByDataTypeIdSelector(Select<Record1<Long>> dataTypeIdSelector);
 

waltz-data/src/main/java/org/finos/waltz/data/datatype_decorator/LogicalFlowDecoratorDao.java

@@ -180,6 +180,12 @@ public List<DataTypeDecorator> findByFlowIds(Collection<Long> flowIds) {
         return findByCondition(condition);
     }
 
+    public List<DataTypeDecorator> findByFlowIdSelector(Select<Record1<Long>> flowIdSelector) {
+
+        Condition condition = LOGICAL_FLOW_DECORATOR.LOGICAL_FLOW_ID.in(flowIdSelector);
+
+        return findByCondition(condition);
+    }
 
     public List<DataTypeDecorator> findAll() {
         return dsl

waltz-data/src/main/java/org/finos/waltz/data/datatype_decorator/PhysicalSpecDecoratorDao.java

@@ -134,6 +134,11 @@ public List<DataTypeDecorator> findByAppIdSelector(Select<Record1<Long>> appIdSe
         throw new UnsupportedOperationException("method not supported for " + PHYSICAL_SPECIFICATION.prettyName());
     }
 
+    @Override
+    public List<DataTypeDecorator> findByFlowIdSelector(Select<Record1<Long>> flowIdSelector) {
+        return null;
+    }
+
 
     @Override
     public List<DataTypeDecorator> findByDataTypeIdSelector(Select<Record1<Long>> dataTypeIdSelector) {

waltz-ng/client/common/svelte/DataTypeTreeNode.svelte

@@ -73,6 +73,7 @@
                                  node={childNode}
                                  {selectionFilter}
                                  {nonConcreteSelectable}
+                                 {expanded}
                                  childNodes={childNode.children}/>
                 {:else}
                     <Icon size="lg"

waltz-ng/client/common/svelte/DataTypeTreeSelector.svelte

@@ -8,8 +8,9 @@
     export let multiSelect = false;
     export let nonConcreteSelectable = true;
     export let selectionFilter = () => true;
+    export let expanded = true;
 
-    const root = {name: "Root"};
+    const root = {name: "Root", isExpanded: true};
 
 
     function calcDisplayHierarchy(nodes, query) {
@@ -25,7 +26,6 @@
     }
 
     let dataTypesCall = dataTypeStore.findAll();
-    let expanded = true;
     let qry = "";
     let searchNodes = [];
     let dataTypes = [];
@@ -38,14 +38,14 @@
 
 <SearchInput bind:value={qry}/>
 
-<div class="waltz-scroll-region-250">
+<div class="waltz-scroll-region-350">
     <DataTypeTreeNode {multiSelect}
                       {selectionFilter}
                       {nonConcreteSelectable}
                       isRoot={true}
                       node={root}
                       childNodes={displayedHierarchy}
-                      expanded={expanded}
+                      {expanded}
                       on:select/>
 </div>
 

waltz-ng/client/common/svelte/DataTypeTreeView.svelte

@@ -0,0 +1,52 @@
+<script>
+    import {dataTypeStore} from "../../svelte-stores/data-type-store";
+    import {buildHierarchies, doSearch, prepareSearchNodes, reduceToSelectedNodesOnly} from "../hierarchy-utils";
+    import DataTypeTreeNode from "./DataTypeTreeNode.svelte";
+    import SearchInput from "./SearchInput.svelte";
+    import _ from "lodash";
+
+    export let selectionFilter = () => true;
+    export let dataTypeIds = [];
+    export let expanded = true;
+
+    const root = {name: "Root", isExpanded: true};
+
+    let dataTypesCall = dataTypeStore.findAll();
+
+    let qry = "";
+    let searchNodes = [];
+    let dataTypes = [];
+
+    function calcDisplayHierarchy(nodes, query) {
+        const searchResult = _.map(
+            doSearch(query, nodes),
+            d => Object.assign(
+                {},
+                d,
+                {isExpanded: !_.isEmpty(query)}
+            ));
+
+        return buildHierarchies(searchResult, false);
+    }
+
+    $: dataTypes = $dataTypesCall.data;
+
+    $: requiredNodes = reduceToSelectedNodesOnly(dataTypes, dataTypeIds);
+    $: searchNodes = prepareSearchNodes(requiredNodes);
+
+    $: displayedHierarchy = calcDisplayHierarchy(searchNodes, qry);
+
+</script>
+
+<SearchInput bind:value={qry}/>
+
+<div style="padding-top: 1em">
+    <DataTypeTreeNode {selectionFilter}
+                      isRoot={true}
+                      node={root}
+                      childNodes={displayedHierarchy}
+                      {expanded}
+                      nonConcreteSelectable={false}
+                      on:select/>
+</div>
+

waltz-ng/client/data-types/components/data-type-decorator-section/DataTypeDecoratorSection.svelte

@@ -0,0 +1,51 @@
+<script>
+
+    import Icon from "../../../common/svelte/Icon.svelte";
+    import DataTypeOverviewPanel from "./DataTypeOverviewPanel.svelte";
+    import DataTypeDetailPanel from "./DataTypeDetailPanel.svelte";
+
+    const Modes = {
+        EDIT: "EDIT",
+        VIEW: "VIEW"
+    };
+
+    const Tabs = {
+        DATA_TYPES: "DATA_TYPES",
+        DETAIL: "DETAIL"
+    }
+
+    let selectedTab = Tabs.DATA_TYPES;
+
+    export let primaryEntityRef;
+
+</script>
+
+
+<div class="waltz-tabs" style="padding-top: 1em">
+    <!-- TAB HEADERS -->
+    <input type="radio"
+           bind:group={selectedTab}
+           value="{Tabs.DATA_TYPES}"
+           id="{Tabs.DATA_TYPES}">
+    <label class="wt-label"
+           for="{Tabs.DATA_TYPES}">
+        <span>Data Types</span>
+    </label>
+
+    <input type="radio"
+           bind:group={selectedTab}
+           value="{Tabs.DETAIL}"
+           id="{Tabs.DETAIL}">
+    <label class="wt-label"
+           for="{Tabs.DETAIL}">
+        <span>Detail</span>
+    </label>
+
+    <div class="wt-tab wt-active">
+        {#if selectedTab === Tabs.DATA_TYPES}
+            <DataTypeOverviewPanel primaryEntityReference={primaryEntityRef}/>
+        {:else if selectedTab === Tabs.DETAIL}
+            <DataTypeDetailPanel primaryEntityReference={primaryEntityRef}/>
+        {/if}
+    </div>
+</div>

waltz-ng/client/data-types/components/data-type-decorator-section/DataTypeDetailPanel.svelte

@@ -0,0 +1,7 @@
+<script>
+
+</script>
+
+
+<h4>Detail</h4>
+

waltz-ng/client/data-types/components/data-type-decorator-section/DataTypeOverviewPanel.svelte

@@ -0,0 +1,138 @@
+<script>
+
+    import DataTypeTreeSelector from "../../../common/svelte/DataTypeTreeSelector.svelte";
+    import {dataTypeDecoratorStore} from "../../../svelte-stores/data-type-decorator-store";
+    import {mkSelectionOptions} from "../../../common/selector-utils";
+    import _ from "lodash";
+    import DataTypeTreeView from "../../../common/svelte/DataTypeTreeView.svelte";
+    import Icon from "../../../common/svelte/Icon.svelte";
+    import {displayError} from "../../../common/error-utils";
+    import toasts from "../../../svelte-stores/toast-store";
+
+
+    export let primaryEntityReference;
+
+    const Modes = {
+        VIEW: "VIEW",
+        EDIT: "EDIT"
+    }
+
+    const root = {name: "Root"};
+
+    let activeMode = Modes.VIEW;
+    let selectionOptions;
+    let relatedDataTypesCall;
+    let selectedDataType;
+
+    let workingDataTypes = [];
+    let  addedDataTypeIds = [];
+    let removedDataTypeIds = [];
+
+    $: {
+        if (primaryEntityReference) {
+            selectionOptions = mkSelectionOptions(primaryEntityReference);
+            relatedDataTypesCall = dataTypeDecoratorStore.findBySelector(primaryEntityReference.kind, selectionOptions);
+        }
+    }
+
+    $: dataTypeDecorators = $relatedDataTypesCall?.data || [];
+    $: dataTypes = _.map(dataTypeDecorators, d => d.dataTypeId)
+
+    $: descoratorsByDataTypeId = _.keyBy(dataTypeDecorators, d => d.dataTypeId);
+
+    $:  selectionFilter = (d) => !_.includes(workingDataTypes, d.id);
+
+    function onSelect(evt) {
+        selectedDataType = evt.detail;
+    }
+
+    function cancelEdit() {
+        workingDataTypes = dataTypes;
+        activeMode = Modes.VIEW;
+    }
+
+    function edit() {
+        workingDataTypes = dataTypes;
+        activeMode = Modes.EDIT;
+    }
+
+    function toggleDataType(evt) {
+        const dataType = evt.detail;
+        if (_.includes(workingDataTypes, dataType.id)) {
+            workingDataTypes = _.without(workingDataTypes, dataType.id);
+        } else {
+            workingDataTypes = _.concat(workingDataTypes, dataType.id);
+        }
+    }
+
+    function save() {
+
+        const cmd = {
+            entityReference: primaryEntityReference,
+            addedDataTypeIds,
+            removedDataTypeIds,
+        }
+
+        dataTypeDecoratorStore.save(primaryEntityReference, cmd)
+            .then(() => {
+                toasts.success("Successfully saved data types");
+                relatedDataTypesCall = dataTypeDecoratorStore.findBySelector(primaryEntityReference.kind, selectionOptions, true);
+                activeMode = Modes.VIEW;
+            })
+            .catch(e => displayError("Could not save data type changes", e));
+    }
+
+    $: addedDataTypeIds = _.without(workingDataTypes, ...dataTypes);
+    $: removedDataTypeIds = _.without(dataTypes, ...workingDataTypes);
+
+
+</script>
+
+
+<h4>Overview</h4>
+
+<div class="row">
+    {#if activeMode === Modes.VIEW}
+        <div class="col-sm-6">
+            <DataTypeTreeView dataTypeIds={dataTypes}
+                              on:select={onSelect}
+                              expanded={true}/>
+            <div style="padding-top: 1em">
+                <button class="btn btn-skinny"
+                        on:click={edit}>
+                    <Icon name="pencil"/>Edit
+                </button>
+            </div>
+        </div>
+        <div class="col-sm-6">
+
+            <div class="waltz-sub-section">
+                {#if selectedDataType}
+                    <h4>{selectedDataType.name}</h4>
+                    <div class="help-block">
+                        {selectedDataType.description}
+                    </div>
+                {/if}
+            </div>
+        </div>
+    {:else if activeMode === Modes.EDIT}
+        <div class="col-sm-12">
+            <DataTypeTreeSelector multiSelect={true}
+                                  expanded={true}
+                                  nonConcreteSelectable={false}
+                                  selectionFilter={selectionFilter}
+                                  on:select={toggleDataType}/>
+            <div style="padding-top: 1em">
+                <button class="btn btn-skinny"
+                        on:click={save}>
+                    <Icon name="floppy-o"/>Save
+                </button>
+                |
+                <button class="btn btn-skinny"
+                        on:click={cancelEdit}>
+                    <Icon name="ban"/>Cancel
+                </button>
+            </div>
+        </div>
+    {/if}
+</div>

waltz-ng/client/data-types/components/data-type-decorator-section/data-type-decorator-section.js

@@ -0,0 +1,55 @@
+/*
+ * Waltz - Enterprise Architecture
+ * Copyright (C) 2016, 2017, 2018, 2019 Waltz open source project
+ * See README.md for more information
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific
+ *
+ */
+
+import {initialiseData} from "../../../common/index";
+
+import DataTypeDecoratorSection from "./DataTypeDecoratorSection.svelte";
+
+const bindings = {
+    parentEntityRef: "<",
+};
+
+
+const initialState = {
+    DataTypeDecoratorSection
+};
+
+
+function controller() {
+    const vm = initialiseData(this, initialState);
+}
+
+
+controller.$inject= [];
+
+
+const component = {
+    controller,
+    bindings,
+    template: `<waltz-svelte-component component="$ctrl.DataTypeDecoratorSection" primary-entity-ref="$ctrl.parentEntityRef"></waltz-svelte-component>`,
+    controllerAs: "$ctrl",
+    bindToController: true,
+};
+
+
+export default {
+    component,
+    id: "waltzDataTypeDecoratorSection"
+};
+
+