update editor

src/components/EditorWindow.vue

@@ -4,7 +4,7 @@ import { ref, onMounted } from 'vue'
 import HeaderBlock from './HeaderBlock.vue';
 import { Network, type Data } from 'vis-network'
 import { getGraph, updateNode } from './client';
-import type { Graph, GraphEdge, GraphNode } from './models';
+import type { Graph, GraphApplication, GraphEdge, GraphNode } from './models';
 
 const network = ref<HTMLElement>()
 
@@ -123,6 +123,14 @@ onMounted(async () => {
   selectNode(graph.value.nodes[0])
 })
 
+function addApplicationToSelectedNode() {
+  selectedNode.value.applications.push({ name: "" })
+}
+
+function removeApplicationToSelectedNode(name: string) {
+  selectedNode.value.applications = selectedNode.value.applications.filter(function (it: GraphApplication): boolean { return it.name != name })
+}
+
 function selectNode(node: GraphNode) {
   console.log("Select node:", node)
   updatedNodeID.value = node.code
@@ -161,6 +169,30 @@ async function updateSelectedNode() {
   selectNode(nodes[0])
 }
 
+async function deleteSelectedNode() {
+  console.log("Delete node:", selectedNode.value)
+  selectedNode.value.code = ""
+  await updateNode(updatedNodeID.value, selectedNode.value)
+  await loadGraph()
+}
+
+async function addSelectedNode() {
+  console.log("Add node:", selectedNode.value)
+  selectedNode.value.code = updatedNodeID.value
+  await updateNode("", selectedNode.value)
+  await loadGraph()
+
+  const nodes = graph.value.nodes.filter(function (it: GraphNode) {
+    return it.code == selectedNode.value.code
+  })
+  selectNode(nodes[0])
+}
+
+async function clearSelectedNode() {
+  console.log("Clear node")
+  selectNode(emptyNode)
+}
+
 function nodeHeader(node: GraphNode): string {
   return "[" + node.code + "] - " + node.name
 }
@@ -188,6 +220,7 @@ function nodeHeader(node: GraphNode): string {
         </label>
       </div>
     </div>
+
     <hr class="hr">
 
     <div class="scroll-y">
@@ -214,8 +247,12 @@ function nodeHeader(node: GraphNode): string {
       <textarea class="node-text-edit-field" rows="25" v-model="selectedNode.text"></textarea>
     </div>
     <div>
-      <h3>Приложения: {{ selectedNode.applications.length }}</h3>
+      <h3>Приложения: {{ selectedNode.applications.length }}
+        <button class="editor-button application-add-button" v-on:click="addApplicationToSelectedNode()">+</button>
+      </h3>
       <div v-bind:key="index" v-for="(application, index) in selectedNode.applications">
+        <button class="editor-button application-remove-button"
+          v-on:click="removeApplicationToSelectedNode(application.name)">-</button>
         <textarea class="node-text-edit-field" rows="5" v-model="application.name"></textarea>
       </div>
     </div>
@@ -228,7 +265,19 @@ function nodeHeader(node: GraphNode): string {
       </div>
     </div>
     <div>
-      <button class="node-edit-save-button" v-on:click="updateSelectedNode()">Сохранить</button>
+      <hr class="hr">
+      <div>
+        <button class="editor-button" v-on:click="updateSelectedNode()">Обновить</button>
+      </div>
+      <hr class="hr">
+      <div>
+        <button class="editor-button" v-on:click="clearSelectedNode()">Очистить</button>
+        <button class="editor-button" v-on:click="addSelectedNode()">Добавить</button>
+      </div>
+      <hr class="hr">
+      <div>
+        <button class="editor-button" v-on:click="deleteSelectedNode()">Удалить</button>
+      </div>
     </div>
   </div>
 </template>
@@ -280,15 +329,15 @@ function nodeHeader(node: GraphNode): string {
   width: 100%;
 }
 
-.node-edit-save-button {
+.editor-button {
   padding: 3px 7px;
-  margin: 5px;
+  margin: 5px 5px 5px 0;
   background-color: #ffffff;
   border-radius: 7px;
   border: 1px solid #373737;
 }
 
-.node-edit-save-button:hover {
+.editor-button:hover {
   background-color: #dddddd;
   cursor: pointer;
 }
@@ -324,6 +373,20 @@ function nodeHeader(node: GraphNode): string {
   width: 220px;
 }
 
+.application-add-button {
+  display: inline;
+  margin-left: 5px;
+  width: 23px;
+  height: 23px;
+}
+
+.application-remove-button {
+  position: absolute;
+  left: -25px;
+  width: 23px;
+  height: 23px;
+}
+
 
 .checkbox-green {
   display: inline-block;