update edit node

src/components/EditorWindow.vue

@@ -13,30 +13,34 @@ const graph = ref<Graph>({
   edges: []
 })
 
-const emptyNode = {
+const emptyNode: GraphNode = {
-  id: -1,
+  code: "",
-  label: "",
   name: "",
   text: "",
   applications: [],
+  id: "",
+  label: "",
   links: [],
 }
 
+const updatedNodeID = ref("")
 const selectedNode = ref<GraphNode>({
-  id: -1,
+  code: "",
-  label: "",
   name: "",
   text: "",
   applications: [],
+  id: "",
+  label: "",
   links: [],
 })
 
 const focusedNode = ref<GraphNode>({
-  id: -1,
+  code: "",
-  label: "",
   name: "",
   text: "",
   applications: [],
+  id: "",
+  label: "",
   links: [],
 })
 
@@ -58,6 +62,11 @@ async function loadGraph() {
       edge.color = '#cccccc'
     }
   })
+  graph.value.nodes = graph.value.nodes.map(function (it: GraphNode) {
+    it.id = it.code
+    it.label = it.name
+    return it
+  })
   displayEdges.value = graph.value.edges.length
   data = {
     nodes: graph.value.nodes,
@@ -99,8 +108,12 @@ onMounted(async () => {
   }
   net = new Network(network.value, data, options)
   net.on("click", function (params) {
+    console.log("click graph:", params)
     if (params.nodes.length > 0) {
-      selectNode(graph.value.nodes[params.nodes[0]])
+      const clickNode = graph.value.nodes.find(function (it: GraphNode): boolean { return it.code == params.nodes[0] })
+      if (clickNode !== undefined) {
+        selectNode(clickNode)
+      }
     } else if (params.edges.length > 0) {
       console.log("Clicked edge:", params.edges[0]);
     }
@@ -111,44 +124,45 @@ onMounted(async () => {
 })
 
 function selectNode(node: GraphNode) {
-  console.log("Select node:", node.id)
+  console.log("Select node:", node)
+  updatedNodeID.value = node.code
   selectedNode.value = node
   const links = graph.value.edges.filter(function (it: GraphEdge) {
-    return it.from == node.id
+    return it.from == node.code
   }).map(function (it: GraphEdge): GraphNode {
     const id = it.to
-    const linkNode = graph.value.nodes.filter(function (it: GraphNode) { return it.id == id })
+    const linkNode = graph.value.nodes.filter(function (it: GraphNode) { return it.code == id })
     return linkNode[0]
   })
 
   selectedNode.value.links = links
-  net.selectNodes([selectedNode.value.id])
+  net.selectNodes([selectedNode.value.code])
 }
 
 function focusNode(node: GraphNode) {
-  console.log("Focus node:", node.id)
+  console.log("Focus node:", node.code)
   focusedNode.value = node
 }
 
 function copyLink(node: GraphNode) {
-  console.log("Focus node:", node.id)
+  console.log("Focus node:", node.code)
-  navigator.clipboard.writeText("([" + node.label + "])")
+  navigator.clipboard.writeText("([" + node.code + "])")
   focusedNode.value = emptyNode
 }
 
 async function updateSelectedNode() {
   console.log("Update node:", selectedNode.value)
-  await updateNode(selectedNode.value)
+  await updateNode(updatedNodeID.value, selectedNode.value)
   await loadGraph()
 
   const nodes = graph.value.nodes.filter(function (it: GraphNode) {
-    return it.id == selectedNode.value.id
+    return it.code == selectedNode.value.code
   })
   selectNode(nodes[0])
 }
 
 function nodeHeader(node: GraphNode): string {
-  return "[" + node.label + "] - " + node.name
+  return "[" + node.code + "] - " + node.name
 }
 </script>
 
@@ -177,12 +191,12 @@ function nodeHeader(node: GraphNode): string {
     <hr class="hr">
 
     <div class="scroll-y">
-      <div v-bind:key="node.id" v-for="node in graph.nodes">
+      <div v-bind:key="node.code" v-for="node in graph.nodes">
         <span v-on:mouseenter="focusNode(node)" v-on:mouseleave="focusNode(emptyNode)">
-          <span :class="[node.id == selectedNode.id ? 'selected-node' : '']" class="node-select-button"
+          <span :class="[node.code == selectedNode.code ? 'selected-node' : '']" class="node-select-button"
             v-on:click="selectNode(node)">{{ nodeHeader(node) }}</span>
           <span v-if="node.applications.length > 0"> ({{ node.applications.length }})</span>
-          <span v-if="node.id == focusedNode.id" class="copy-node-link" v-on:click="copyLink(node)">
+          <span v-if="node.code == focusedNode.code" class="copy-node-link" v-on:click="copyLink(node)">
             Ссылка
           </span>
         </span>
@@ -193,7 +207,8 @@ function nodeHeader(node: GraphNode): string {
   <div class="edit-node-container">
     <h2>Редактирование точки</h2>
     <div>
-      {{ nodeHeader(selectedNode) }}
+      <input v-model="updatedNodeID" type="text" class="node-code-edit-field" maxlength="3"/> - <input
+        v-model="selectedNode.name" type="text" class="node-name-edit-field"/>
     </div>
     <div>
       <textarea class="node-text-edit-field" rows="25" v-model="selectedNode.text"></textarea>
@@ -206,7 +221,7 @@ function nodeHeader(node: GraphNode): string {
     </div>
     <div>
       <h3>Ссылки: {{ selectedNode.links.length }}</h3>
-      <div v-bind:key="node.id" v-for="node in selectedNode.links">
+      <div v-bind:key="node.code" v-for="node in selectedNode.links">
         <div class="node-select-button" v-on:click="selectNode(node)">
           - {{ nodeHeader(node) }}
         </div>
@@ -301,6 +316,13 @@ function nodeHeader(node: GraphNode): string {
   display: none;
 }
 
+.node-code-edit-field {
+  width: 50px;
+}
+
+.node-name-edit-field {
+  width: 220px;
+}
 
 
 .checkbox-green {

src/components/client.ts

@@ -112,11 +112,11 @@ export const getGraph = async () => {
   }
 }
 
-export const updateNode = async (node: GraphNode) => {
+export const updateNode = async (code: string, node: GraphNode) => {
   try {
     const response = await fetch(getApiUrl('/graph/nodes'), {
       method: 'PUT',
-      body: JSON.stringify({ node: node }),
+      body: JSON.stringify({ code: code, node: node }),
     })
     if (!response.ok) {
       throw new Error(`http error status: ${response.status}`)

src/components/models.ts

@@ -28,17 +28,20 @@ export type Graph = {
 }
 
 export type GraphNode = {
-  id: number
+  code: string
-  label: string
   name: string
   text: string
   applications: Array<GraphApplication>
+
+  // fields for graph
+  id: string
+  label: string
   links: Array<GraphNode>
 }
 
 export type GraphEdge = {
-  from: number
+  from: string
-  to: number
+  to: string
   arrows: string
   type: string
   color: string