ui: refactor node lifecycle

homeland-live · Oct 31, 2023 · a85da1c · a85da1c
1 parent bdf7843
commit a85da1c
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 20 deletions.
diff --git a/ui/src/components/MainHeader.vue b/ui/src/components/MainHeader.vue
@@ -15,14 +15,15 @@
             <router-link to="/about" class="nav-link">About</router-link>
           </CNavItem>
         </CNavbarNav>
-        <NodeListMenu @toast="onToast" />
+        <NodeListMenu @toast="onToast" @select="nodeStore.setActiveNode" />
       </CCollapse>
     </CContainer>
   </CNavbar>
 </template>
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
+import { mapStores } from 'pinia';
 import {
   CNavbar,
   CContainer,
@@ -33,6 +34,7 @@ import {
   CNavItem,
 } from '@coreui/vue';
 import NodeListMenu from '@/components/NodeListMenu.vue';
+import { useNodeStore } from '@/stores/node';
 import type { Toast } from '@/types/coreui';
 
 export default defineComponent({
@@ -53,10 +55,18 @@ export default defineComponent({
       visible: ref<boolean>(false),
     };
   },
+  computed: {
+    ...mapStores(
+      useNodeStore, // sets this.nodeStore
+    ),
+  },
   methods: {
     onToast(toast: Toast) {
       this.$emit('toast', toast);
     },
   },
+  mounted() {
+    this.nodeStore.init();
+  },
 });
 </script>
diff --git a/ui/src/components/NodeListMenu.vue b/ui/src/components/NodeListMenu.vue
@@ -5,20 +5,20 @@
     </CDropdownToggle>
     <CDropdownMenu>
       <CListGroup>
+        <button class="dropdown-item list-group-item list-group-item-action" type="button" @click="showUpsertModal">
+          <i class="bi bi-plus-lg pe-1" />
+          Add node
+        </button>
         <button
           v-for="n in nodeStore.nodes"
           :key="n.id"
           class="dropdown-item list-group-item list-group-item-action"
           :class="{ active: nodeStore.activeNode?.id === n.id }"
           type="button"
-          @click="nodeStore.setActiveNode(n)">
+          @click="onSelect(n)">
           <p class="mb-1">{{ n.name }}</p>
           <small class="text-muted d-flex flex-row-reverse">{{ n.ipv4 }}</small>
         </button>
-        <button class="dropdown-item list-group-item list-group-item-action" type="button" @click="showUpsertModal">
-          <i class="bi bi-plus-lg pe-1" />
-          Add node
-        </button>
       </CListGroup>
     </CDropdownMenu>
   </CDropdown>
@@ -27,6 +27,7 @@
       v-if="isUpsertModalVisible"
       :node="{}"
       @toast="onToast"
+      @upsert="onSelect"
       @close="hideUpsertModal" />
   </teleport>
 </template>
@@ -46,7 +47,7 @@ import { useNodeStore } from '@/stores/node';
 
 export default defineComponent({
   name: 'NodeListMenu',
-  emits: ['toast'],
+  emits: ['toast', 'select'],
   components: {
     CDropdown,
     CDropdownToggle,
@@ -71,6 +72,9 @@ export default defineComponent({
     hideUpsertModal() {
       this.isUpsertModalVisible = false;
     },
+    onSelect(node: Node) {
+      this.$emit('select', node);
+    },
     onToast(toast: Toast) {
       this.$emit('toast', toast);
     },

diff --git a/ui/src/components/NodeUpsertModal.vue b/ui/src/components/NodeUpsertModal.vue
@@ -52,7 +52,7 @@ import { useNodeStore } from '@/stores/node';
 
 export default defineComponent({
   name: 'NodeUpsertModal',
-  emits: ['close', 'toast'],
+  emits: ['upsert', 'toast', 'close'],
   components: { BaseModal },
   props: {
     node: { type: Object as PropType<Partial<Node>>, required: true },
@@ -81,20 +81,22 @@ export default defineComponent({
       (this.$refs.modal as typeof BaseModal).close();
     },
     upsert() {
-      const fn = this.isCreating ? this.nodeStore.createNode : this.nodeStore.updateNode;
-      fn({ ...this.model }).then((err) => {
-        if (!err) {
+      this.nodeStore.upsertNode({ ...this.model }).then((data) => {
+        if (!data.error) {
+          if (data.node) {
+            this.$emit('upsert', data.node);
+          }
           this.close();
           return;
         }
-        if (err.items) {
-          err.items.forEach((item) => {
+        if (data.error.items) {
+          data.error.items.forEach((item) => {
             this.errors[item.subject] = item.msg;
           });
         }
         this.$emit('toast', {
-          title: `Error ${err.code}`,
-          body: err.msg,
+          title: `Error ${data.error.code}`,
+          body: data.error.msg,
           icon: 'bell',
           iconColor: 'danger',
         });

diff --git a/ui/src/stores/node.ts b/ui/src/stores/node.ts
@@ -65,16 +65,15 @@ export const useNodeStore = defineStore({
       this.activeNode = undefined;
       ls.writeS('activeId', '');
     },
-    createNode(payload: Record<string, unknown>): Promise<Err | undefined> {
+    createNode(payload: Record<string, unknown>): Promise<{node?: Node, error?: Err}> {
       return createNode(payload).then((data) => {
         if (data.node) {
           this.nodes.push(data.node);
-          this.setActiveNode(data.node);
         }
-        return data.error;
+        return data;
       });
     },
-    updateNode(payload: Record<string, unknown>): Promise<Err | undefined> {
+    updateNode(payload: Record<string, unknown>): Promise<{node?: Node, error?: Err}> {
       return updateNode(payload).then((data) => {
         if (data.node) {
           const n = this.nodes.find((item) => item.id === data.node?.id);
@@ -84,9 +83,13 @@ export const useNodeStore = defineStore({
             n.updatedAt = data.node.updatedAt;
           }
         }
-        return data.error;
+        return data;
       });
     },
+    upsertNode(payload: Record<string, unknown>): Promise<{node?: Node, error?: Err}> {
+      const fn = !payload.id ? this.createNode : this.updateNode;
+      return fn(payload);
+    },
     deleteNode(id: string): Promise<Err | undefined> {
       return deleteNode(id).then((data) => {
         if (!data.error) {