Nav aid (svg diagram) admin screens

#CTCTOWALTZ-2868
finos#6730

waltz-data/src/main/java/org/finos/waltz/data/svg/SvgDiagramDao.java

@@ -18,20 +18,21 @@
 
 package org.finos.waltz.data.svg;
 
-import org.finos.waltz.schema.tables.records.SvgDiagramRecord;
 import org.finos.waltz.common.FunctionUtilities;
 import org.finos.waltz.model.svg.ImmutableSvgDiagram;
 import org.finos.waltz.model.svg.SvgDiagram;
+import org.finos.waltz.schema.tables.records.SvgDiagramRecord;
 import org.jooq.DSLContext;
 import org.jooq.Record;
 import org.jooq.RecordMapper;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Repository;
 
 import java.util.List;
+import java.util.Set;
 
-import static org.finos.waltz.schema.tables.SvgDiagram.SVG_DIAGRAM;
 import static org.finos.waltz.common.StringUtilities.mkSafe;
+import static org.finos.waltz.schema.tables.SvgDiagram.SVG_DIAGRAM;
 
 @Repository
 public class SvgDiagramDao {
@@ -78,4 +79,42 @@ public List<SvgDiagram> findByGroups(String[] groups) {
                 .fetch(svgMapper));
     }
 
+
+    public Set<SvgDiagram> findAll() {
+        return dsl
+                .select(SVG_DIAGRAM.fields())
+                .from(SVG_DIAGRAM)
+                .fetchSet(svgMapper);
+    }
+
+
+    public Boolean remove(long id) {
+        return dsl
+                .deleteFrom(SVG_DIAGRAM)
+                .where(SVG_DIAGRAM.ID.eq(id))
+                .execute() == 1;
+    }
+
+
+    public Boolean save(SvgDiagram diagram) {
+
+        SvgDiagramRecord record = dsl.newRecord(SVG_DIAGRAM);
+        record.setName(diagram.name());
+        record.setGroup(diagram.group());
+        record.setDescription(diagram.description());
+        record.setSvg(diagram.svg());
+        record.setKeyProperty(diagram.keyProperty());
+        record.setProduct(diagram.product());
+        record.setPriority(diagram.priority());
+        record.setDisplayHeightPercent(diagram.displayHeightPercent());
+        record.setDisplayWidthPercent(diagram.displayWidthPercent());
+
+        diagram.id().ifPresent(id -> {
+            record.setId(id);
+            record.changed(SVG_DIAGRAM.ID, false);
+        });
+
+        int store = record.store();
+        return store == 1;
+    }
 }

waltz-ng/client/svelte-stores/svg-diagram-store.js

@@ -0,0 +1,32 @@
+import {remote} from "./remote";
+
+
+export function mkSvgDiagramStore() {
+
+    const findAll = (force) => remote
+        .fetchAppList(
+            "GET",
+            "api/svg-diagram",
+            [],
+            {force});
+
+    const save = (diagram) => remote
+        .execute(
+            "POST",
+            "api/svg-diagram/save",
+            diagram);
+
+    const remove = (diagramId) => remote
+        .execute(
+            "DELETE",
+            `api/svg-diagram/${diagramId}`);
+
+    return {
+        findAll,
+        save,
+        remove
+    };
+}
+
+
+export const svgDiagramStore = mkSvgDiagramStore();

waltz-ng/client/system/nav-aids-view.js

@@ -0,0 +1,40 @@
+/*
+ * 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";
+import NavAidsAdminView from "./svelte/nav-aids/NavAidsAdminView.svelte";
+
+
+const initialState = {
+    NavAidsAdminView
+};
+
+
+function controller() {
+    const vm = initialiseData(this, initialState);
+}
+
+
+controller.$inject = [];
+
+
+export default {
+    template: `<waltz-svelte-component component="$ctrl.NavAidsAdminView"></waltz-svelte-component>`,
+    controller,
+    controllerAs: "$ctrl",
+    bindToController: true,
+};

waltz-ng/client/system/routes.js

@@ -37,6 +37,7 @@ import NavAidBuilderView from "./nav-aid-builder-view";
 import VersionInfoView from "./version-info-view";
 import MeasurableCategoriesView from "./measurable-categories-view";
 import DiagramBuilderView from "./diagram-builder-view";
+import NavAidAdminView from "./nav-aids-view";
 
 
 const baseState = {
@@ -139,6 +140,11 @@ const navAidBuilderState = {
     views: {"content@": NavAidBuilderView}
 };
 
+const navAidAdminState = {
+    url: "/nav-aids",
+    views: {"content@": NavAidAdminView}
+};
+
 const versionInfoState = {
     url: "/version-info",
     views: {"content@": VersionInfoView}
@@ -162,6 +168,7 @@ function setupRoutes($stateProvider) {
         .state("main.system.euda-list", eudaListState)
         .state("main.system.hierarchies", hierarchiesState)
         .state("main.system.measurable-categories", measurableCategoriesState)
+        .state("main.system.nav-aids", navAidAdminState)
         .state("main.system.nav-aid-builder", navAidBuilderState)
         .state("main.system.orphans", orphansState)
         .state("main.system.rating-schemes", ratingSchemesState)

waltz-ng/client/system/svelte/nav-aids/NavAidEditView.svelte

@@ -0,0 +1,159 @@
+<script>
+
+    import {createEventDispatcher, onMount} from "svelte";
+
+    export let diagram;
+
+    let working = {
+        id: null,
+        name:  null,
+        group:  null,
+        description: null,
+        svg:  null,
+        priority:  null,
+        keyProperty: null,
+        product: null,
+        displayHeightPercent: null,
+        displayWidthPercent: null
+    }
+
+    const dispatch = createEventDispatcher();
+
+    onMount(() => {
+        working = Object.assign({}, working, diagram)
+    })
+
+    function cancel() {
+        dispatch("cancel");
+    }
+
+    function onSave() {
+        dispatch("save", working);
+    }
+
+</script>
+
+<div>
+    <div class="row">
+        <div class="col-md-12">
+            <form autocomplete="off"
+                  on:submit|preventDefault={onSave}>
+
+                <div class="form-group">
+                    <label for="name">Name<span style="color: red" title="This field is mandatory">*</span></label>
+                    <input type="text"
+                           class="form-control"
+                           id="name"
+                           bind:value={working.name}
+                           placeholder="Name"
+                           required>
+                </div>
+                <div class="form-group">
+                    <label for="group">Group<span style="color: red" title="This field is mandatory">*</span></label>
+                    <input type="text"
+                           class="form-control"
+                           id="group"
+                           bind:value={working.group}
+                           placeholder="Group"
+                           required>
+                    <div class="help-block">
+                        This is used to indicate where to display the diagram. If diagrams share a group they will appear in tabs.
+                    </div>
+                </div>
+                <div class="form-group">
+                    <label for="description">Description</label>
+                    <textarea class="form-control"
+                              id="description"
+                              bind:value={working.description}
+                              placeholder="Description"
+                              rows="3"/>
+                    <div class="help-block">
+                        Description of the diagram. Markdown is supported.
+                    </div>
+                </div>
+                <div class="form-group">
+                    <label for="priority">Priority<span style="color: red" title="This field is mandatory">*</span></label>
+                    <input class="form-control"
+                           type="number"
+                           id="priority"
+                           style="width: 20%"
+                           required="required"
+                           placeholder="Priority for this diagram in when ordered within a group"
+                           bind:value={working.priority}>
+                    <div class="help-block">
+                        Priority, used for ordering diagrams.
+                        Lower numbers go first, name is used as a tie breaker.
+                    </div>
+                </div>
+                <div class="form-group">
+                    <label for="keyProperty">Key Property<span style="color: red" title="This field is mandatory">*</span></label>
+                    <input type="text"
+                           class="form-control"
+                           id="keyProperty"
+                           bind:value={working.keyProperty}
+                           placeholder="Key Property"
+                           required>
+                    <div class="help-block">
+                        This is used to indicate the attribute which holds data for this diagram (to render links).
+                    </div>
+                </div>
+                <div class="form-group">
+                    <label for="group">Product<span style="color: red" title="This field is mandatory">*</span></label>
+                    <input type="text"
+                           class="form-control"
+                           id="product"
+                           bind:value={working.product}
+                           placeholder="none"
+                           required>
+                    <div class="help-block">
+                        The product used to produce the diagram.
+                    </div>
+                </div>
+
+                <div class="form-group">
+                    <label for="displayWidthPercent">Display Width Percent</label>
+                    <input class="form-control"
+                           type="number"
+                           id="displayWidthPercent"
+                           style="width: 20%"
+                           bind:value={working.displayWidthPercent}>
+                    <div class="help-block">
+                        Used to size the diagram
+                    </div>
+                </div>
+
+                <div class="form-group">
+                    <label for="displayHeightPercent">Display Height Percent</label>
+                    <input class="form-control"
+                           type="number"
+                           id="displayHeightPercent"
+                           style="width: 20%"
+                           bind:value={working.displayHeightPercent}>
+                    <div class="help-block">
+                        Used to size the diagram
+                    </div>
+                </div>
+
+
+                <div class="form-group">
+                    <label for="diagram">Diagram<span style="color: red" title="This field is mandatory">*</span></label>
+                    <textarea class="form-control"
+                              id="diagram"
+                              bind:value={working.svg}
+                              rows="6"
+                              required/>
+                </div>
+
+
+                <button type="submit"
+                        class="btn btn-primary">
+                    Save
+                </button>
+                <button class="btn btn-default"
+                        on:click|preventDefault={cancel}>
+                    Cancel
+                </button>
+            </form>
+        </div>
+    </div>
+</div>

waltz-ng/client/system/svelte/nav-aids/NavAidRemovalConfirmation.svelte

@@ -0,0 +1,35 @@
+<script>
+
+    import {createEventDispatcher} from "svelte";
+
+    export let diagram;
+
+    const dispatch = createEventDispatcher();
+
+    function remove() {
+        dispatch("remove", diagram);
+    }
+
+    function cancel() {
+        dispatch("cancel");
+    }
+
+</script>
+
+
+<h4>Are you sure you want to remove diagram: {diagram.name}?</h4>
+<div class="help-block">This will remove it from all views for all users.
+    If you wish to retain the diagram but hide from view you should update the group information to a reference that is not used on a page.
+    e.g. '<i>GROUP_NAME</i>.OLD'
+</div>
+
+<div>
+    <button class="btn btn-danger"
+            on:click={remove}>
+        Remove
+    </button>
+    <button class="btn btn-default"
+            on:click={cancel}>
+        Cancel
+    </button>
+</div>