fix(04): tree view

src/components/04_product-service/FormServiceWork.vue

@@ -7,7 +7,7 @@ import WorkManagementComponent from './WorkManagementComponent.vue';
 import AddButton from '../button/AddButton.vue';
 import { ServiceCreate, WorkItems } from 'stores/product-service/types';
 import TreeView from '../shared/TreeView.vue';
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
 
 const { t } = useI18n();
 
@@ -37,16 +37,33 @@ defineEmits<{
 const nodes = ref([
   {
     title: props.service?.name,
-    subtitle: props.service?.code,
+    subtitle: props.service?.code || ' ',
     selected: false,
-    children: workItems.value.map((v) => ({
-      title: v.name,
-      subtitle: ' ',
-      children: v.product.map((x) => ({
-        title: x.name,
-        subtitle: x.code,
-      })),
-    })),
+    opened: true,
+    children: (function () {
+      const noNameObjects = workItems.value
+        .filter((v) => !v.name)
+        .flatMap((v) =>
+          v.product.map((x) => ({
+            title: x.name,
+            subtitle: x.code || ' ',
+            icon: 'mdi-shopping-outline',
+            bg: 'hsla(var(--teal-10-hsl)/0.1)',
+            fg: 'var(--teal-10)',
+          })),
+        );
+      const withNameObjects = workItems.value
+        .filter((v) => v.name)
+        .flatMap((v) => ({
+          title: v.name,
+          subtitle: ' ',
+          children: v.product.map((x) => ({
+            title: x.name,
+            subtitle: x.code || ' ',
+          })),
+        }));
+      return noNameObjects.concat(withNameObjects);
+    })(),
   },
 ]);
 
@@ -72,6 +89,45 @@ function confirmDelete(items: unknown[], index: number) {
     cancel: () => {},
   });
 }
+
+watch(
+  () => workItems,
+  () => {
+    nodes.value = [
+      {
+        title: props.service?.name,
+        subtitle: props.service?.code || ' ',
+        selected: false,
+        opened: true,
+        children: (function () {
+          const noNameObjects = workItems.value
+            .filter((v) => !v.name)
+            .flatMap((v) =>
+              v.product.map((x) => ({
+                title: x.name,
+                subtitle: x.code || ' ',
+                icon: 'mdi-shopping-outline',
+                bg: 'hsla(var(--teal-10-hsl)/0.1)',
+                fg: 'var(--teal-10)',
+              })),
+            );
+          const withNameObjects = workItems.value
+            .filter((v) => v.name)
+            .flatMap((v) => ({
+              title: v.name,
+              subtitle: ' ',
+              children: v.product.map((x) => ({
+                title: x.name,
+                subtitle: x.code || ' ',
+              })),
+            }));
+          return noNameObjects.concat(withNameObjects);
+        })(),
+      },
+    ];
+  },
+  { deep: true },
+);
 </script>
 
 <template>