From 152e3f7270b30a6ffe17f919e36b2d865e32afc7 Mon Sep 17 00:00:00 2001
From: Ahmed Raed <ahmedraed101@yahoo.com>
Date: Fri, 10 Oct 2025 11:00:47 +0300
Subject: [PATCH] feat(messages): add update and delete functionality for
 messages

- Implement DELETE and PUT API endpoints for message operations
- Add update and delete buttons to MessagesPanel component
- Enable message text editing with update functionality
---
 app/components/MessagesPanel.vue    | 66 ++++++++++++++++++++---------
 nuxt.config.ts                      | 10 ++++-
 server/api/messages/index.delete.ts | 11 +++++
 server/api/messages/index.put.ts    | 11 +++++
 4 files changed, 77 insertions(+), 21 deletions(-)
 create mode 100644 server/api/messages/index.delete.ts
 create mode 100644 server/api/messages/index.put.ts

diff --git a/app/components/MessagesPanel.vue b/app/components/MessagesPanel.vue
index 37e3e63..f9114bb 100644
--- a/app/components/MessagesPanel.vue
+++ b/app/components/MessagesPanel.vue
@@ -1,34 +1,62 @@
 <script setup lang="ts">
-const { data: messages, refresh } = await useFetch('/api/messages')
-const newMessage = ref('')
+const { data: messages, refresh } = await useFetch("/api/messages");
+const newMessage = ref("");
+// const updateMessage = ref('')
 
-async function sendMessage (){
-  if (!newMessage.value.trim()) return
-  await $fetch('/api/messages', {
-    method: 'POST',
+async function sendMessage() {
+  if (!newMessage.value.trim()) return;
+  await $fetch("/api/messages", {
+    method: "POST",
     body: {
-      text: newMessage.value
-    }
-  })
-  newMessage.value = ''
-  await refresh()
+      text: newMessage.value,
+    },
+  });
+  newMessage.value = "";
+  await refresh();
+}
+
+async function deleteMessage(messageID: number | undefined) {
+  await $fetch("/api/messages", {
+    method: "DELETE",
+    body: {
+      messageID,
+    },
+  });
+  await refresh();
+}
+
+async function updateMessage(
+  messageID: number | undefined,
+  text: string | undefined
+) {
+  await $fetch("/api/messages", {
+    method: "PUT",
+    body: {
+      messageID,
+      text,
+    },
+  });
+  await refresh();
 }
 </script>
 
 <template>
   <div>
     <h3>Messages</h3>
+
     <form @submit.prevent="sendMessage">
-      <input v-model="newMessage" placeholder="Type a message">
-      <button type="submit">
-        Send
-      </button>
+      <input v-model="newMessage" placeholder="Type a message" />
+      <button type="submit">Send</button>
     </form>
+
     <p v-for="message of messages" :key="message.id">
-      {{ message.text }} - {{ new Date(message.created_at).toLocaleString('fr-FR') }}
-    </p>
-    <p v-if="!messages?.length">
-      No messages yet
+      <input type="text" v-model="message.text" />
+      <button @click="updateMessage(message.id, message.text)">update</button><button>
+        <i @click="deleteMessage(message.id)">delete</i>
+      </button>
+      -
+      {{ new Date(message.created_at || 0).toLocaleString("en") }}
     </p>
+    <p v-if="!messages?.length">No messages yet</p>
   </div>
 </template>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index fd28c81..75ca64f 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -23,5 +23,11 @@ export default defineNuxtConfig({
     }
   },
   // Development
-  devtools: { enabled: true },
-})
+  devtools: {
+    enabled: true,
+
+    timeline: {
+      enabled: true,
+    },
+  },
+})
\ No newline at end of file
diff --git a/server/api/messages/index.delete.ts b/server/api/messages/index.delete.ts
new file mode 100644
index 0000000..e9119db
--- /dev/null
+++ b/server/api/messages/index.delete.ts
@@ -0,0 +1,11 @@
+export default eventHandler(async (event) => {
+  const { messageID } = await readBody(event)
+  const db = hubDatabase()
+
+  await db
+    .prepare('DELETE FROM messages WHERE id = ?1')
+    .bind(messageID)
+    .run()
+
+  return {}
+})
diff --git a/server/api/messages/index.put.ts b/server/api/messages/index.put.ts
new file mode 100644
index 0000000..12a8c64
--- /dev/null
+++ b/server/api/messages/index.put.ts
@@ -0,0 +1,11 @@
+export default eventHandler(async (event) => {
+  const { messageID, text }: { messageID: number, text: string } = await readBody(event)
+  const db = hubDatabase()
+
+  await db
+    .prepare('UPDATE messages SET text = ?1 WHERE id = ?2')
+    .bind(text, messageID)
+    .run()
+
+  return {}
+})