Merge pull request #7166 from deutschebank/db-contrib/waltz-7155-diag…

…rams

Db contrib/waltz 7155 diagrams

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

@@ -125,6 +125,14 @@
  path: ctx => `server/${ctx.id}`,
  title: "Server View"
  },
+ "main.system.static-diagrams": {
+ path: () => `system/static-diagrams`,
+ title: "Static Diagrams"
+ },
+ "main.system.static-diagram": {
+ path: () => `system/static-diagrams/${ctx.id}`,
+ title: ""
+ },
  "main.survey.instance.view": {
  path: ctx => `survey/instance/${ctx.id}/response/view`,
  title: "Survey View"

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

@@ -10,6 +10,13 @@ export function mkSvgDiagramStore() {
  [],
  {force});
 
+ const getById = (diagramId, force) => remote
+ .fetchAppList(
+ "GET",
+ `api/svg-diagram/${diagramId}`,
+ [],
+ {force});
+
  const save = (diagram) => remote
  .execute(
  "POST",
@@ -23,6 +30,7 @@ export function mkSvgDiagramStore() {
 
  return {
  findAll,
+ getById,
  save,
  remove
  };

waltz-ng/client/system/routes.js

@@ -27,6 +27,8 @@ import RecalculateView from "./recalculate-view";
 import ActorsView from "./actors-view";
 import EntityNamedNoteTypesView from "./entity-named-node-types-view";
 import StaticPanelsView from "./static-panels-view";
+import StaticDiagramsView from "./static-diagrams-view";
+import StaticDiagramView from "./static-diagram-view";
 import AssessmentDefinitionsView from "./assessment-defintions-view";
 import RatingSchemesView from "./rating-schemes-view";
 import EudaListView from "./euda-list-view";
@@ -102,6 +104,15 @@ const staticPanelsState = {
  views: {"content@": StaticPanelsView}
 };
 
+const staticDiagramsState = {
+ url: "/static-diagrams",
+ views: {"content@": StaticDiagramsView}
+}
+
+const staticDiagramState = {
+ url: "/static-diagrams/{id:int}",
+ views: {"content@": StaticDiagramView}
+}
 
 const assessmentDefintionsState = {
  url: "/assessment-definitions",
@@ -214,6 +225,8 @@ function setupRoutes($stateProvider) {
  .state("main.system.recalculate", recalculateState)
  .state("main.system.relationship-kinds", relationshipKindsState)
  .state("main.system.settings", settingsState)
+ .state("main.system.static-diagrams", staticDiagramsState)
+ .state("main.system.static-diagram", staticDiagramState)
  .state("main.system.static-panels", staticPanelsState)
  .state("main.system.version-info", versionInfoState);
 }

waltz-ng/client/system/static-diagram-view.html

@@ -0,0 +1,21 @@
+<!--
+ ~ 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
+ ~
+ -->
+
+<waltz-svelte-component component="$ctrl.StaticDiagram" diagram-id="$ctrl.diagramId">
+
+</waltz-svelte-component>

waltz-ng/client/system/static-diagram-view.js

@@ -0,0 +1,42 @@
+/*
+ * 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 template from './static-diagram-view.html';
+
+import StaticDiagram from "./svelte/static-diagrams/StaticDiagram.svelte"
+import {initialiseData} from '../common';
+
+const initialState = {
+ StaticDiagram
+};
+
+function controller($stateParams) {
+ const vm = initialiseData(this, initialState);
+
+ vm.diagramId = $stateParams.id;
+}
+
+controller.$inject = ["$stateParams"];
+
+const page = {
+ controller,
+ template,
+ controllerAs: '$ctrl'
+};
+
+
+export default page;

waltz-ng/client/system/static-diagrams-view.html

@@ -0,0 +1,19 @@
+<!--
+ ~ 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
+ ~
+ -->
+
+<waltz-svelte-component component="$ctrl.StaticDiagramsAdminView"></waltz-svelte-component>

waltz-ng/client/system/static-diagrams-view.js

@@ -0,0 +1,39 @@
+/*
+ * 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 template from './static-diagrams-view.html';
+
+import StaticDiagramsAdminView from "./svelte/static-diagrams/StaticDiagramsAdminView.svelte"
+import {initialiseData} from '../common';
+
+
+const initialState = {
+ StaticDiagramsAdminView
+};
+
+
+function controller() {
+ initialiseData(this, initialState);
+}
+
+const page = {
+ controller,
+ template,
+ controllerAs: '$ctrl'
+};
+
+export default page;

waltz-ng/client/system/svelte/static-diagrams/StaticDiagram.svelte

@@ -0,0 +1,196 @@
+<script>
+ import _ from "lodash";
+ import PageHeader from "../../../common/svelte/PageHeader.svelte";
+ import ViewLink from "../../../common/svelte/ViewLink.svelte";
+ import {svgDiagramStore} from "../../../svelte-stores/svg-diagram-store";
+ import toasts from "../../../svelte-stores/toast-store";
+ import { displayError } from "../../../common/error-utils";
+ import pageInfo from "../../../svelte-stores/page-navigation-store";
+ 
+
+ export let diagramId;
+ let blankDiagram = {name: "", group: "", priority: 1, keyProperty: "none", svg: "<h1>Change me. You can use HTML or SVG code</h1>"};
+ let diagram = blankDiagram;
+ let diagramLoadCall = null;
+ let invalid = true;
+
+ function goToAdminView() {
+ $pageInfo = {
+ state: "main.system.static-diagrams"
+ };
+ }
+
+ function doSave(diagram) {
+ return svgDiagramStore
+ .save(diagram)
+ .then(() => {
+ goToAdminView();
+ svgDiagramStore.findAll(true);
+ if (isEdit){
+ toasts.success(`${diagram.group}: ${diagram.name} has been updated successfully`)
+ } else {
+ toasts.success(`${diagram.group}: ${diagram.name} has been created successfully`)
+ }})
+ .catch(e => {
+ displayError("Could not save diagram", e)
+ }); 
+ }
+
+ $: isNew = diagramId && diagramId === -1;
+
+ $: isEdit = diagramId && diagramId >= 0;
+
+ $: { 
+ if (isEdit){
+ diagramLoadCall = svgDiagramStore.getById(diagramId)
+ }
+ };
+
+ $: diagram = $diagramLoadCall?.data || blankDiagram;
+
+ $: {
+ const badTextFields = _.some(
+ [diagram.group, diagram.name], 
+ v => _.isEmpty(v));
+
+ invalid = badTextFields || diagram.priority <= 0;
+ };
+
+</script>
+
+
+<PageHeader icon="picture-o"
+ name="Static Diagram">
+ <div slot="breadcrumbs">
+ <ol class="waltz-breadcrumbs">
+ <li><ViewLink state="main">Home</ViewLink></li>
+ <li><ViewLink state="main.system.list">System Admin</ViewLink></li>
+ <li><ViewLink state="main.system.static-diagrams">Static Diagrams</ViewLink></li>
+ <li>{diagram ? diagram.name : ""}</li>
+ </ol>
+ </div>
+</PageHeader>
+
+<div class="waltz-page-summary waltz-page-summary-attach">
+ <div class="row">
+ <div class="col-md-12">
+
+ {#if diagram}
+ <form autocomplete="off">
+ <div class="row">
+ <div class="col-md-6">
+ <div class="form-group">
+ <label for="group">
+ Group
+ <small class="text-muted">(required)</small>
+ </label>
+ <br/>
+ <input class="form-control" 
+ id="group"
+ required="required"
+ placeholder="Group e.g., NAVAID.MEASURABLE.33"
+ bind:value={diagram.group}>
+ <div class="help-block">
+ Group determines what screen the diagram will appear. Some example naming conventions include
+ <ul>
+ <li>DATA_TYPE to appear on the Data screen</li>
+ <li>ORG_TREE to appear on the People screen</li>
+ <li>ORG_UNIT to appear on the Org Units screen</li>
+ <li>NAVAID.MEASURABLE.id to appear on one of the measurable screens, where id denotes the category (which can be found in the url of the category)</li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ <div class="col-md-6">
+ <div class="form-group">
+ <label for="desc">
+ Description
+ </label>
+ <br/>
+ <input class="form-control"
+ id="desc" 
+ placeholder="Description"
+ bind:value={diagram.description}>
+ <div class="help-block">Description of this diagram</div>
+ </div>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-md-6">
+ <div class="form-group">
+ <label for="name">
+ Name
+ <small class="text-muted">(required)</small>
+ </label>
+ <br/>
+ <input class="form-control" 
+ id="name" 
+ required="required"
+ placeholder="Name"
+ bind:value={diagram.name}>
+ <div class="help-block">Short name that describes this diagram</div>
+ </div>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-md-6">
+ <div class="form-group">
+ <label for="priority">
+ Priority
+ <small class="text-muted">(required)</small>
+ </label>
+ <br/>
+ <input class="form-control" 
+ type="number" 
+ id="priority"
+ required="required"
+ bind:value={diagram.priority}>
+ <div class="help-block">If multiple diagrams belong to the same group, priority will be used to order them (ascending, where 1 is the highest priority)</div>
+ </div>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-md-12">
+ <div class="form-group">
+ <label for="svg">
+ Diagram Content
+ <small class="text-muted">(required)</small>
+ </label>
+ <br/>
+ <textarea class="form-control" 
+ id="svg" 
+ rows="10" 
+ bind:value={diagram.svg}></textarea>
+ <div class="help-block">HTML or SVG code, any paths will be resolved against the context root of this waltz installation, e.g., /waltz</div>
+ </div>
+ </div>
+ </div>
+ <button type="submit" 
+ class="btn btn-success"
+ disabled={invalid}
+ on:click|preventDefault={() => doSave(diagram)}>
+ {isNew? "Create" : "Update"}
+ </button>
+
+ <button type="submit" 
+ class="btn btn-link" 
+ on:click|preventDefault={() => goToAdminView()}>
+ Cancel
+ </button>
+ </form>
+ {:else}
+ <h1>not found</h1>
+ {/if}
+ </div>
+ </div>
+</div> 
+
+<style>
+ input:invalid {
+ border: 2px solid red;
+ }
+
+ textarea:invalid {
+ border: 2px solid red;
+ }
+</style>