✨ Messages update & deletion

src/components/chat/MessageDeletion.vue

@@ -0,0 +1,52 @@
+<template>
+  <v-card title="Delete a message" class="min-h-[540px]" :loading="loading">
+    <template #text>
+      You are deleting a message
+      <b>#{{ channels.related?.messages?.delete_to?.id }}</b> <br />
+      This message will gone and never appear again. But the replies won't affected. Are you confirm?
+    </template>
+    <template #actions>
+      <div class="w-full flex justify-end">
+        <v-btn color="grey-darken-3" @click="channels.show.messages.delete = false">Not really</v-btn>
+        <v-btn color="error" :disabled="loading" @click="deleteMessage">Yes</v-btn>
+      </div>
+    </template>
+  </v-card>
+
+  <v-snackbar v-model="success" :timeout="3000">The realm has been deleted.</v-snackbar>
+
+  <!-- @vue-ignore -->
+  <v-snackbar v-model="error" :timeout="5000">Something went wrong... {{ error }}</v-snackbar>
+</template>
+
+<script setup lang="ts">
+import { request } from "@/scripts/request"
+import { getAtk } from "@/stores/userinfo"
+import { useChannels } from "@/stores/channels"
+import { ref } from "vue"
+
+const channels = useChannels()
+
+const error = ref<string | null>(null)
+const success = ref(false)
+const loading = ref(false)
+
+async function deleteMessage() {
+  const target = channels.related.messages.delete_to
+  const url = `/api/channels/${target.channel.alias}/messages/${target.id}`
+
+  loading.value = true
+  const res = await request("messaging", url, {
+    method: "DELETE",
+    headers: { Authorization: `Bearer ${await getAtk()}` }
+  })
+  if (res.status !== 200) {
+    error.value = await res.text()
+  } else {
+    success.value = true
+    channels.show.messages.delete = false
+    channels.related.messages.delete_to = null
+  }
+  loading.value = false
+}
+</script>