improve(ui): add product tag

story2Dev · Jan 15, 2024 · c1ffb1b · c1ffb1b
2 parents 5a02f18 + 536022c
commit c1ffb1b
Show file tree

Hide file tree

Showing 3 changed files with 124 additions and 14 deletions.
diff --git a/composables/use-term-objects.ts b/composables/use-term-objects.ts
@@ -1,4 +1,4 @@
-import { INSERT_TERM_OBJECTS } from '~/gql/mutate';
+import { DELETE_TERM_OBJECT, INSERT_TERM_OBJECTS } from '~/gql/mutate';
 import type { TermObject, TermObjectInput } from '~/types';
 
 export const useTermObjects = () => {
@@ -18,15 +18,38 @@ export const useTermObjects = () => {
       }
 
       return {
-        termObjects: data?.insertTermObjects as TermObject[],
+        termObjects: data?.insertTermObjects.returning as TermObject[],
         errors,
       };
     } catch (error) {
       throw new Error(`[useTermObjects]: insert error: ${error}`);
     }
   }
 
+  async function remove(id: string) {
+    try {
+      const { data, errors } = await client.mutate({
+        mutation: DELETE_TERM_OBJECT,
+        variables: {
+          id,
+        },
+      });
+
+      if (errors) {
+        throw new Error(`[useTermObjects]: remove errors: ${errors}`);
+      }
+
+      return {
+        termObject: data?.deleteTermObject as TermObject,
+        errors,
+      };
+    } catch (error) {
+      throw new Error(`[useTermObjects]: remove error: ${error}`);
+    }
+  }
+
   return {
     insert,
+    remove,
   };
 };
diff --git a/gql/mutate/term-mutate.ts b/gql/mutate/term-mutate.ts
@@ -45,6 +45,9 @@ export const INSERT_TERM_OBJECTS = gql`
         id
         objectId: object_id
         termId: term_id
+        term {
+          name
+        }
       }
     }
   }
@@ -56,6 +59,19 @@ export const INSERT_TERM_OBJECT = gql`
       id
       objectId: object_id
       termId: term_id
+      term {
+        name
+      }
+    }
+  }
+`;
+
+export const DELETE_TERM_OBJECT = gql`
+  mutation deleteTermObject($id: uuid!) {
+    deleteTermObject: delete_term_objects_by_pk(id: $id) {
+      id
+      objectId: object_id
+      termId: term_id
     }
   }
 `;
diff --git a/pages/products/[id]/index.vue b/pages/products/[id]/index.vue
@@ -59,26 +59,62 @@
       </n-descriptions-item>
     </n-descriptions>
 
-    <n-space>
-      <n-tag
-        v-for="(item, index) in frm?.tags"
-        :key="index"
-        closable
-        @close="handleRemoveTag(item)"
-      >
-        {{ item.term?.name }}
-      </n-tag>
-      <n-dynamic-tags />
-    </n-space>
+    <div class="mt-4">
+      <h3>{{ $t('tag') }}</h3>
+      <n-space>
+        <n-tag
+          v-for="(item, index) in frm?.tags"
+          :key="index"
+          closable
+          @close="handleRemoveTag(item)"
+        >
+          {{ item.term?.name }}
+        </n-tag>
+        <!-- <n-dynamic-tags /> -->
+      </n-space>
+
+      <n-button class="mt-2" @click="isAddTag = true">
+        <Icon name="system-uicons:plus" />
+      </n-button>
+    </div>
+
+    <n-modal v-model:show="isAddTag">
+      <n-card class="max-w-md" :title="$t('add_tag')">
+        <TermInput
+          v-model:value="tagIds"
+          :group-id="TermGroupID.tag"
+          type="checkbox"
+        />
+
+        <template #footer>
+          <div class="flex gap-2">
+            <n-button @click="isAddTag = false">
+              {{ $t('close') }}
+            </n-button>
+            <n-button
+              type="primary"
+              :disabled="!tagIds.length"
+              @click="handleAddTag"
+            >
+              {{ $t('add') }}
+            </n-button>
+          </div>
+        </template>
+      </n-card>
+    </n-modal>
   </div>
 </template>
 
 <script setup lang="ts">
+import { TermGroupID } from '~/constants';
 import type { TermObject } from '~/types';
 
 const { frm, fetchProduct } = useProduct();
+const { remove: removeTag, insert: insertTags } = useTermObjects();
 
 const { id } = useRoute().params;
+const isAddTag = ref(false);
+const tagIds = ref<string[]>([]);
 
 const { errors, product } = await fetchProduct(`${id}`);
 if (!errors) {
@@ -92,6 +128,41 @@ if (!errors) {
 }
 
 function handleRemoveTag(item: TermObject) {
-  console.log(item);
+  const { tags = [] } = frm.value;
+  removeTag(item.id);
+  const items = tags.filter((tag) => tag.id !== item.id) as TermObject[];
+  frm.value.tags = items;
+}
+
+async function handleAddTag() {
+  try {
+    // remove duplicate
+    const { tags = [] } = frm.value;
+    const inputId = [];
+    for (const tagId of tagIds.value) {
+      const hasId = tags.some((tag) => tag.termId === tagId);
+      if (!hasId) {
+        inputId.push({
+          termId: tagId,
+          objectId: id as string,
+        });
+      }
+    }
+
+    if (!inputId.length) {
+      isAddTag.value = false;
+      return;
+    }
+
+    const { errors, termObjects } = await insertTags(inputId);
+    if (termObjects.length) {
+      const { tags = [] } = frm.value;
+      frm.value.tags = [...tags, ...termObjects];
+    }
+    isAddTag.value = false;
+  } catch (error) {
+    isAddTag.value = false;
+    throw new Error(`[handleAddTag] ${error}`);
+  }
 }
 </script>