Moving report grid to svelte

- Allow creation of report grid - Component to update columns in report grid #CTCTOWALTZ-2376 finos#5682
ljubon · Dec 7, 2021 · d149d44 · d149d44
1 parent 8e807a8
commit d149d44
Show file tree

Hide file tree

Showing 31 changed files with 441 additions and 191 deletions.
diff --git a/waltz-data/src/main/java/org/finos/waltz/data/report_grid/ReportGridDao.java b/waltz-data/src/main/java/org/finos/waltz/data/report_grid/ReportGridDao.java
@@ -19,6 +19,7 @@
 package org.finos.waltz.data.report_grid;
 
 
+import org.finos.waltz.common.DateTimeUtilities;
 import org.finos.waltz.common.SetUtilities;
 import org.finos.waltz.data.InlineSelectFieldFactory;
 import org.finos.waltz.model.EntityKind;
@@ -145,6 +146,19 @@ public int updateColumnDefinitions(long gridId, List<ReportGridColumnDefinition>
     }
 
 
+    public long create(ReportGridCreateCommand createCommand, String username) {
+        ReportGridRecord record = dsl.newRecord(rg);
+        record.setName(createCommand.name());
+        record.setExternalId(createCommand.externalId());
+        record.setDescription(createCommand.description());
+        record.setLastUpdatedAt(DateTimeUtilities.nowUtcTimestamp());
+        record.setLastUpdatedBy(username);
+        record.setProvenance("waltz");
+
+        int insert = record.insert();
+
+        return record.getId();
+    }
 
     // --- Helpers ---
 

diff --git a/waltz-model/src/main/java/org/finos/waltz/model/report_grid/ReportGridCreateCommand.java b/waltz-model/src/main/java/org/finos/waltz/model/report_grid/ReportGridCreateCommand.java
@@ -0,0 +1,21 @@
+package org.finos.waltz.model.report_grid;
+
+import com.fasterxml.jackson.databind.annotation.JsonDeserialize;
+import com.fasterxml.jackson.databind.annotation.JsonSerialize;
+import org.finos.waltz.model.Nullable;
+import org.finos.waltz.model.command.Command;
+import org.immutables.value.Value;
+
+import java.util.List;
+
+@Value.Immutable
+@JsonSerialize(as = ImmutableReportGridCreateCommand.class)
+@JsonDeserialize(as = ImmutableReportGridCreateCommand.class)
+public abstract class ReportGridCreateCommand implements Command {
+
+    public abstract String name();
+    public abstract String externalId();
+
+    @Nullable
+    public abstract String description();
+}
diff --git a/...lient/playpen/1/MeasurableTreeNode.svelte → ...t/common/svelte/MeasurableTreeNode.svelte b/...lient/playpen/1/MeasurableTreeNode.svelte → ...t/common/svelte/MeasurableTreeNode.svelte
@@ -1,7 +1,6 @@
 <script>
 
-    import Icon from "../../common/svelte/Icon.svelte";
-    import {createEventDispatcher} from "svelte";
+    import Icon from "./Icon.svelte";
     import _ from "lodash";
 
     export let tree;
@@ -10,8 +9,6 @@
     export let onSelect = () => console.log("selecting")
     export let onDeselect = () => console.log("deselecting")
 
-    let dispatch = createEventDispatcher();
-
     function toggleExpanded() {
         expanded = !expanded;
     }
@@ -28,13 +25,13 @@
     {/if}
     {#if tree.isSelected}
         <button class="btn btn-skinny"
-                on:click|stopPropagation={() => console.log({tree}) || onDeselect(tree)}>
+                on:click|stopPropagation={() => onDeselect(tree)}>
             <Icon name="check-square-o"/>
             {tree.name}
         </button>
     {:else}
         <button class="btn btn-skinny"
-                on:click|stopPropagation={() => console.log({tree}) || onSelect(tree)}>
+                on:click|stopPropagation={() => onSelect(tree)}>
             <Icon name="square-o"/>
             {tree.name}
         </button>

diff --git a/...t/playpen/1/MeasurableTreeSelector.svelte → ...mmon/svelte/MeasurableTreeSelector.svelte b/...t/playpen/1/MeasurableTreeSelector.svelte → ...mmon/svelte/MeasurableTreeSelector.svelte
@@ -2,10 +2,9 @@
 
     import MeasurableTreeNode from "./MeasurableTreeNode.svelte";
     import _ from "lodash";
-    import {buildHierarchies, doSearch, prepareSearchNodes} from "../../common/hierarchy-utils";
-    import {createEventDispatcher} from "svelte";
-    import {sameRef} from "../../common/entity-utils";
-    import SearchInput from "../../common/svelte/SearchInput.svelte";
+    import {buildHierarchies, doSearch, prepareSearchNodes} from "../hierarchy-utils";
+    import {sameRef} from "../entity-utils";
+    import SearchInput from "./SearchInput.svelte";
 
     export let measurables;
     export let depth = 0;
@@ -17,8 +16,6 @@
     let qry = "";
     let searchNodes = [];
 
-    let dispatch = createEventDispatcher();
-
     function calcDisplayHierarchy(nodes, query, selected) {
 
         const searchResult = _.map(

diff --git a/waltz-ng/client/playpen/1/playpen1.js b/waltz-ng/client/playpen/1/playpen1.js
@@ -19,10 +19,10 @@
 
 import template from "./playpen1.html";
 import {initialiseData} from "../../common";
-import InvolvementPicker from "./InvolvementPicker.svelte";
-import EntityPicker from "./EntityPicker.svelte";
-import EntitySelector from "./EntitySelector.svelte";
-import TestPage from "./TestPage.svelte";
+import InvolvementPicker from "../../report-grid/components/svelte/pickers/InvolvementPicker.svelte";
+import EntityPicker from "../../report-grid/components/svelte/pickers/EntityPicker.svelte";
+import EntitySelector from "../../report-grid/components/svelte/column-definition-edit-panel/EntitySelector.svelte";
+import TestPage from "../../report-grid/components/svelte/column-definition-edit-panel/ColumnDefinitionEditPanel.svelte";
 import {mkSelectionOptions} from "../../common/selector-utils";
 import {CORE_API} from "../../common/services/core-api-utils";
 import _ from "lodash";
@@ -50,7 +50,7 @@ function controller($q,
 
         serviceBroker.loadViewData(
             CORE_API.ReportGridStore.getViewById,
-            [3, mkSelectionOptions(vm.orgEntityRef)])
+            [2, mkSelectionOptions(vm.orgEntityRef)])
             .then(d => {
                 const report = d.data;
                 vm.columnDefs = _.orderBy(report.definition.columnDefinitions, d => d.position) || []

diff --git a/waltz-ng/client/report-grid/components/grid-view-section/report-grid-view-section.html b/waltz-ng/client/report-grid/components/grid-view-section/report-grid-view-section.html
@@ -1,46 +1,8 @@
 <div>
-
-    <div ng-if="$ctrl.selectedGrid">
-        <h4>
-            <span ng-bind="$ctrl.selectedGrid.name"></span>
-            <span class="small">
-                <a class="clickable"
-                   ng-click="$ctrl.showPicker = !$ctrl.showPicker"
-                   ng-bind="$ctrl.showPicker ? 'View current report' : 'Change report'">
-                </a>
-            </span>
-        </h4>
-        <waltz-markdown text="$ctrl.selectedGrid.description"></waltz-markdown>
-    </div>
-
-    <!-- PICKER -->
-    <div class="row"
-         ng-if="$ctrl.showPicker"
-         style="margin-bottom: 1em">
-        <div class="col-md-6">
-            <waltz-sub-section name="Report picker">
-                <content>
-                    <div class="waltz-sub-section-content">
-                        <waltz-report-grid-picker on-grid-select="$ctrl.onGridSelect">
-                        </waltz-report-grid-picker>
-                    </div>
-                    <div class="waltz-sub-section-controls"
-                         ng-if="$ctrl.selectedGrid">
-                        <a ng-click="$ctrl.showPicker = false"
-                           class="clickable">
-                            Close
-                        </a>
-                     </div>
-                </content>
-            </waltz-sub-section>
-        </div>
-    </div>
-
     <!-- GRID & FILTERS -->
     <div ng-if="$ctrl.selectedGrid"
          style="padding-top: 0.5em;">
-        <waltz-report-grid-view-panel parent-entity-ref="$ctrl.parentEntityRef"
-                                      grid-id="$ctrl.selectedGrid.id">
+        <waltz-report-grid-view-panel parent-entity-ref="$ctrl.parentEntityRef">
         </waltz-report-grid-view-panel>
     </div>
 </div>

diff --git a/waltz-ng/client/report-grid/components/grid-view-section/report-grid-view-section.js b/waltz-ng/client/report-grid/components/grid-view-section/report-grid-view-section.js
@@ -2,18 +2,20 @@ import template from "./report-grid-view-section.html";
 import {initialiseData} from "../../../common";
 import {CORE_API} from "../../../common/services/core-api-utils";
 import * as _ from "lodash";
+import ReportGridPicker from "../svelte/ReportGridPicker.svelte";
 
 const bindings = {
     parentEntityRef: "<"
 };
 
 const initData = {
-    showPicker: false
+    showPicker: false,
+    ReportGridPicker
 };
 
 const localStorageKey = "waltz-report-grid-view-section-last-id";
 
-function controller(serviceBroker, localStorageService) {
+function controller($scope, serviceBroker, localStorageService) {
 
     const vm = initialiseData(this, initData);
 
@@ -24,7 +26,7 @@ function controller(serviceBroker, localStorageService) {
             vm.showPicker = true;
         } else {
             serviceBroker
-                .loadViewData(CORE_API.ReportGridStore.findAll)
+                .loadViewData(CORE_API.ReportGridStore.findAll, [], { force: true })
                 .then(r => {
                     vm.selectedGrid = _.find(r.data, d => d.id === lastUsedGridId);
                     if (!vm.selectedGrid){
@@ -35,13 +37,18 @@ function controller(serviceBroker, localStorageService) {
     };
 
     vm.onGridSelect = (grid) => {
-        localStorageService.set(localStorageKey, grid.id);
-        vm.selectedGrid = grid;
-        vm.showPicker = false;
+        $scope.$applyAsync(() => {
+            console.log({grid})
+            localStorageService.set(localStorageKey, grid.id);
+            vm.selectedGrid = grid;
+            console.log({selectedGrid})
+            vm.showPicker = false;
+        });
     };
 }
 
 controller.$inject = [
+    "$scope",
     "ServiceBroker",
     "localStorageService"
 ];

diff --git a/waltz-ng/client/report-grid/components/report-grid-picker/report-grid-picker.html b/waltz-ng/client/report-grid/components/report-grid-picker/report-grid-picker.html
diff --git a/waltz-ng/client/report-grid/components/report-grid-picker/report-grid-picker.js b/waltz-ng/client/report-grid/components/report-grid-picker/report-grid-picker.js
diff --git a/waltz-ng/client/report-grid/components/report-grid-view-panel/report-grid-view-panel.html b/waltz-ng/client/report-grid/components/report-grid-view-panel/report-grid-view-panel.html
@@ -18,6 +18,12 @@
 
     <div ng-if="!$ctrl.loading">
         <!-- SUMMARIES -->
+
+        <waltz-svelte-component component="$ctrl.ReportGridControlPanel"
+                                selected-grid="$ctrl.selectedGrid"
+                                on-grid-select="$ctrl.onGridSelect">
+        </waltz-svelte-component>
+
         <div ng-include="'wrgvp-filters'"
              style="margin-bottom: 0.7em">
             <!-- summaries go here -->
@@ -150,7 +156,6 @@ <h5 class="waltz-visibility-parent">
                 </div>
             </div>
 
-
         </content>
     </waltz-sub-section>
 </script>