Add thread deletion

app.vue

@@ -36,7 +36,7 @@ function newThread() {
 
       <div class="layout-content-wrapper">
         <div class="layout-content-main">
-          <ThreadEditor :threadId="threadId" @threadSaved="refreshThreadList" />
+          <ThreadEditor :threadId="threadId" @threadSaved="refreshThreadList" @threadDeleted="refreshThreadList"/>
         </div>
       </div>
     </div>

components/ThreadEditor.vue

@@ -12,14 +12,14 @@ const props = defineProps<{
   threadId: number | null
 }>()
 
-const emit = defineEmits(['thread-saved'])
+const emit = defineEmits(['thread-saved', 'thread-deleted'])
 
 const { data: thread, pending } = await useAsyncData(
   'thread',
   async () => {
     let thread: Thread
     if (props.threadId) {
-      const threadData = await $fetch(`/api/threads/${props.threadId}`, {})
+      const threadData:any = await $fetch(`/api/threads/${props.threadId}`)
       thread = {
         id: threadData.id,
         messages: threadData.latest.data.messages.map((message: any) => {
@@ -79,9 +79,11 @@ async function doSaveThread(thread: Thread): Promise<number> {
   }
   const response: any = await $fetch(url, { method: 'post', body: { messages: thread.messages } })
   emit('thread-saved')
+  updateKey.value = generateUniqueKey('message-list')
   return response.id as number
 }
 
+
 async function saveThread(): Promise<void> {
   if (thread.value && thread.value.messages) {
     thread.value.id = await doSaveThread(thread.value)
@@ -98,6 +100,22 @@ async function publishThread(): Promise<void> {
   }
 }
 
+async function deleteThread(): Promise<void> {
+  if (thread.value && thread.value.id) {
+    const url = `/api/threads/${thread.value.id}`
+    await $fetch(url, { method: 'delete' })
+    emit('thread-deleted')
+    toast.add({ severity: 'success', summary: 'Thread deleted', detail: `Removed thread ${thread.value.id} and its messages`, life: 3000 });
+  }
+  thread.value = {
+    messages: [{
+      text: '',
+      attachments: []
+    }]
+  }
+  updateKey.value = generateUniqueKey('message-list')
+}
+
 </script>
 
 <template>
@@ -114,11 +132,14 @@ async function publishThread(): Promise<void> {
           <div class="publish">
             <Button label="Publish" icon="pi pi-send" severity="success" size="small" @click="publishThread" />
           </div>
+          <div class="delete">
+            <Button label="Delete" icon="pi pi-trash" severity="danger" size="small" @click="deleteThread" />
+          </div>
         </div>
       </div>
 
-      <div class="messages">
-        <template v-for="(message, index) in thread.messages" :key="updateKey">
+      <div class="messages" :key="updateKey">
+        <template v-for="(message, index) in thread.messages" >
           <div class="message-wrapper">
             <MessageEditor :index="index" :message="message" @addMessageBelow="addMessageBelow(index + 1)"
               @removeMessage="removeMessage(index)" />

docker-compose.yml

@@ -1,15 +1,6 @@
 version: "3"
 
 services:
-  threadr-app:
-    build:
-      context: .
-    ports:
-      - "3000:3000"
-    env_file:
-      - .env
-    depends_on:
-      - minio
 
   minio:
     image: minio/minio

prisma/migrations/20230906200241_init/migration.sql

@@ -19,4 +19,4 @@ CREATE TABLE "Version" (
 );
 
 -- AddForeignKey
-ALTER TABLE "Version" ADD CONSTRAINT "Version_threadId_fkey" FOREIGN KEY ("threadId") REFERENCES "Thread"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+ALTER TABLE "Version" ADD CONSTRAINT "Version_threadId_fkey" FOREIGN KEY ("threadId") REFERENCES "Thread"("id") ON DELETE CASCADE ON UPDATE CASCADE;

prisma/schema.prisma

@@ -22,6 +22,6 @@ model Version {
   id          Int          @id @default(autoincrement())
   createdAt   DateTime     @default(now())
   data        Json
-  thread      Thread       @relation(fields: [threadId], references: [id])
+  thread      Thread       @relation(fields: [threadId], references: [id], onDelete: Cascade)
   threadId    Int
 }

server/api/threads/[id].delete.ts

@@ -0,0 +1,15 @@
+import { prisma } from '../../../prisma/db'
+
+export default defineEventHandler(async (event: any) => {
+    const threadId = parseInt(event.context.params.id) as number
+
+    console.log(`DELETE /api/threads/${threadId}`)
+
+    await prisma.thread.delete({
+        where: {
+            id: threadId,
+        },
+    })
+
+    return {}
+})

server/api/threads/[id]/get.ts → server/api/threads/[id].get.ts

@@ -1,7 +1,7 @@
-import { prisma } from '../../../../prisma/db'
+import { prisma } from '../../../prisma/db'
 
 export default defineEventHandler(async (event: any) => {
-    const threadId = parseInt(getRouterParam(event, 'id') || '')
+    const threadId = parseInt(event.context.params.id) as number
 
     console.log(`GET /api/threads/${threadId}`)
 
@@ -18,6 +18,6 @@ export default defineEventHandler(async (event: any) => {
         const [latest] = thread.versions.slice(-1)
         result.latest = latest
     }
-    //    console.log(result)
+    console.log(result)
     return result;
 })

server/api/threads/[id]/post.ts → server/api/threads/[id].post.ts

@@ -1,4 +1,4 @@
-import { prisma } from '../../../../prisma/db'
+import { prisma } from '../../../prisma/db'
 
 type UpdateThreadRequest = {
     published: boolean
@@ -14,8 +14,8 @@ type UpdateThreadRequest = {
 }
 
 export default defineEventHandler(async (event: any) => {
-    const threadId = parseInt(getRouterParam(event, 'id') || '')
-
+    const threadId = parseInt(event.context.params.id) as number
+    
     console.log(`POST /api/threads/${threadId}`)
 
     const threadData: UpdateThreadRequest = await readBody(event)

server/api/threads/[id]/publication.post.ts

@@ -1,7 +1,9 @@
+import { prisma } from '../../../../prisma/db'
+
 export default defineEventHandler(async (event: any) => {
-    const threadId = parseInt(getRouterParam(event, 'id') || '')
+    const id = parseInt(event.context.params.id) as number
 
-    console.log(`POST /api/threads/${threadId}/publication`)
+    console.log(`POST /api/threads/${id}/publication`)
 
     return 'ok'
 })

utils/utils.ts

@@ -1,4 +1,7 @@
 export function generateUniqueKey(prefix: string, suffix?: string | number) {
-    return `${prefix}_${Date.now()}_${suffix}`
-  }
-
+  return `${prefix}_${Date.now()}_${generateRandomString()}`
+}
+
+export function generateRandomString() {
+  return Math.random().toString(36).slice(2, 7);
+}