Support deletion of model

Author: netervati

components/model/grid.vue

@@ -2,6 +2,7 @@
   import { Cog6ToothIcon } from '@heroicons/vue/24/outline';
   import { NormalizedModel } from '~~/types/models';
   import useModel from '~~/stores/useModel';
+  import ModalConfirm from '~~/components/modal/confirm.vue';
 
   const model = useModel();
 
@@ -16,13 +17,26 @@
   const handleSelectModel = (md: NormalizedModel) => {
     model.setTarget(md);
   };
+
+  const deleteModelModal = useModal(ModalConfirm, {
+    id: 'confirm-delete-model',
+    onConfirm: async (closeModal) => {
+      const deleteId = model.target?.id;
+
+      await model.delete(deleteId);
+
+      closeModal();
+
+      model.unsetTarget();
+    },
+  });
 </script>
 
 <template>
   <section class="flex gap-x-2 w-full">
     <slot />
     <Dropdown
-      :disabled="!model.target"
+      :disabled="model.isLoading || !model.target"
       avatar
       class="rounded-lg"
       color="ghost"
@@ -33,7 +47,9 @@
       </template>
       <template #options>
         <DropdownOption>Edit</DropdownOption>
-        <DropdownOption>Delete</DropdownOption>
+        <DropdownOption @click="deleteModelModal.open()">
+          Delete
+        </DropdownOption>
       </template>
     </Dropdown>
     <article
@@ -55,6 +71,12 @@
         {{ md.name }}
       </a>
     </div>
+    <ClientOnly>
+      <component
+        :is="deleteModelModal.component"
+        content="Are you sure you want to delete this model?"
+      />
+    </ClientOnly>
   </section>
   <div v-if="model.target">
     <ModelTable

server/routes/models/[id].delete.ts

@@ -0,0 +1,19 @@
+import { ModelServices } from '~~/server/services';
+import extractAppKey from '~~/server/lib/extractAppKey';
+
+type QueryParams = {
+  apiKey: string;
+};
+
+export default defineEventHandler(async (event) => {
+  const query = getQuery(event) as QueryParams;
+  const { appId } = await extractAppKey(event, query.apiKey);
+  const modelId = event.context.params?.id ?? '';
+
+  const model = await new ModelServices(event).delete({
+    id: modelId,
+    appId,
+  });
+
+  return model;
+});

server/services/modelServices.ts

@@ -22,6 +22,24 @@ export default class ModelServices extends SupabaseService {
     return models.data[0];
   }
 
+  async delete(params: { id: string; appId: string }) {
+    const model = await this.client
+      .from('models')
+      .update({
+        deleted_at: new Date().toISOString(),
+      })
+      .eq('id', params.id)
+      .eq('app_id', params.appId)
+      .eq('user_id', this.user.id)
+      .select('*');
+
+    if (model.error !== null) {
+      throw ErrorResponse.supabase(model.error);
+    }
+
+    return model.data[0];
+  }
+
   async find(id: string) {
     const models = await this.client
       .from('models')

stores/useModel.ts

@@ -58,6 +58,20 @@ export default defineStore('models', () => {
     });
   };
 
+  const del = async (id: string): Promise<void> => {
+    await $fetch(`/models/${id}`, {
+      method: 'DELETE',
+      query: { apiKey },
+      async onResponse({ response }) {
+        if (response.status === 200) {
+          toast.success('Deleted the model!');
+
+          await refresh();
+        }
+      },
+    });
+  };
+
   return {
     /** PROPERTIES */
     isDisabled,
@@ -68,6 +82,7 @@ export default defineStore('models', () => {
 
     /** METHODS */
     create,
+    delete: del,
     setTarget,
     unsetTarget,
   };