Support bulk deleting of model data

Author: netervati

components/modal/createModelData.vue

@@ -90,7 +90,7 @@
 <template>
   <ModalBase :id="id" @close="handleClose" size="lg">
     <form @submit="onSubmit">
-      <h3 class="text-lg font-bold">Generate Model Data</h3>
+      <h3 class="text-lg font-bold">Insert Model Data</h3>
       <div class="flex">
         <section class="form-control mt-2 w-full">
           <label class="mb-2 text-lg">No. of data:</label>

components/model/table.vue

@@ -1,13 +1,30 @@
 <script lang="ts" setup>
+  import { PlusIcon, TrashIcon } from '@heroicons/vue/24/outline';
   import useModelData from '~~/stores/useModelData';
   import ModalCreateModelData from '~~/components/modal/createModelData.vue';
+  import ModalConfirm from '~~/components/modal/confirm.vue';
 
   defineProps<{
     schema: { name: string; type: string }[];
   }>();
 
   const modelData = useModelData();
+  const select = useSelect();
+
   const createModelDataModal = useModal(ModalCreateModelData, { id: 'create-model-data' });
+
+  const deleteModelDataModal = useModal(ModalConfirm, {
+    id: 'confirm-delete-model-data',
+    onConfirm: async (closeModal: () => void) => {
+      const ids = Array.from(select.list.value).join(',');
+
+      await modelData.bulkDelete(ids);
+
+      closeModal();
+
+      select.clear();
+    },
+  });
 </script>
 
 <template>
@@ -17,13 +34,34 @@
         <thead>
           <tr>
             <th>
-              <Button
-                :disabled="modelData.isLoading"
-                size="sm"
-                @click="createModelDataModal.open()"
-              >
-                Generate
-              </Button>
+              <input
+                :checked="select.ticked(modelData.list)"
+                class="checkbox"
+                type="checkbox"
+                @click="select.tick(modelData.list)"
+              />
+            </th>
+            <th>
+              <div class="flex gap-x-2">
+                <Button
+                  v-if="!select.isEmpty.value"
+                  :disabled="modelData.isLoading"
+                  color="error"
+                  size="sm"
+                  @click="deleteModelDataModal.open()"
+                >
+                  <TrashIcon class="w-4 h-4" />
+                </Button>
+                <Button
+                  v-if="select.isEmpty.value"
+                  :disabled="modelData.isLoading"
+                  color="success"
+                  size="sm"
+                  @click="createModelDataModal.open()"
+                >
+                  <PlusIcon class="w-4 h-4" />
+                </Button>
+              </div>
             </th>
             <th
               v-for="sch in schema"
@@ -36,7 +74,14 @@
         <tbody>
           <TableLoader v-if="modelData.isLoading" :colspan="4" />
           <tr v-for="md in modelData.list" v-else :key="md.id">
-            <td />
+            <td colspan="2">
+              <input
+                :checked="select.ticked(md.id)"
+                class="checkbox"
+                type="checkbox"
+                @click="select.tick(md.id)"
+              />
+            </td>
             <td
               v-for="sch in schema"
               class="font-normal normal-case text-base"
@@ -49,6 +94,10 @@
     </div>
     <ClientOnly>
       <component :is="createModelDataModal.component" />
+      <component
+        :is="deleteModelDataModal.component"
+        content="Are you sure you want to delete the selected model data?"
+      />
     </ClientOnly>
   </div>
 </template>

composables/useSelect.ts

@@ -8,6 +8,11 @@ type SelectProps = {
   tick: (target: string | { id: string }[]) => void;
 };
 
+type ObjectWithId = {
+  id: string;
+  [key: string]: any;
+};
+
 /**
  * A simple composable for storing list of resource data ID.
  */
@@ -19,7 +24,7 @@ export function useSelect(): SelectProps {
     list.value.clear();
   };
 
-  const ticked = (target: string | { id: string }[]) => {
+  const ticked = (target: string | ObjectWithId[]) => {
     if (Array.isArray(target)) {
       if (target.length === 0) {
         return false;
@@ -31,7 +36,7 @@ export function useSelect(): SelectProps {
     return list.value.has(target);
   };
 
-  const tick = (target: string | { id: string }[]) => {
+  const tick = (target: string | ObjectWithId[]) => {
     if (Array.isArray(target)) {
       if (list.value.size !== target.length) {
         clear();

server/routes/models/[id]/model-data.delete.ts

@@ -0,0 +1,22 @@
+import ModelDataServices from '~~/server/services/modelDataServices';
+import extractAppKey from '~~/server/lib/extractAppKey';
+
+type QueryParams = {
+  ids: string;
+  apiKey: string;
+};
+
+export default defineEventHandler(async (event) => {
+  const query = getQuery(event) as QueryParams;
+
+  await extractAppKey(event, query.apiKey);
+
+  const ids = query.ids.split(',');
+
+  const deleted = await new ModelDataServices(event).bulkDelete({
+    ids,
+    modelId: event.context.params?.id ?? '',
+  });
+
+  return deleted;
+});

server/services/modelDataServices.ts

@@ -16,6 +16,21 @@ export default class ModelDataService extends SupabaseService {
     );
   }
 
+  async bulkDelete(params: { ids: string[]; modelId: string }) {
+    return await Promise.all(
+      params.ids.map((id) => {
+        return this.client
+          .from('model_data')
+          .update({
+            deleted_at: new Date().toISOString(),
+          })
+          .eq('id', id)
+          .eq('model_id', params.modelId)
+          .select('*');
+      })
+    );
+  }
+
   async count(modelId: string) {
     const modelData = await this.client
       .from('model_data')

stores/useModelData.ts

@@ -43,11 +43,25 @@ export default defineStore('model-data', () => {
     if (modelId.value) {
       refresh();
     }
-  })
+  });
 
   const list = computed(() => data.value || []);
   const isDisabled = computed(() => list.value.length === 50 || pending.value);
 
+  const bulkDelete = async (ids: string): Promise<void> => {
+    await $fetch(`/models/${modelId.value}/model-data`, {
+      method: 'DELETE',
+      query: { ids, apiKey },
+      async onResponse({ response }) {
+        if (response.status === 200) {
+          toast.success('Deleted the model data!');
+
+          await refresh();
+        }
+      },
+    });
+  };
+
   const create = async (body: CreateProps, options: Options): Promise<void> => {
     await $fetch(`/models/${modelId.value}/model-data`, {
       method: 'POST',
@@ -78,6 +92,7 @@ export default defineStore('model-data', () => {
     list,
 
     /** METHODS */
+    bulkDelete,
     create,
   };
 });