Edit and delete messages. Removed option for report

src/views/messages/Message.vue

@@ -27,7 +27,7 @@
               </div>
             </div>
           </div>
-          <v-menu class="ml-auto">
+          <v-menu class="ml-auto" v-if="messageAuthorIsCurrentUser">
             <template v-slot:activator="{ props }">
               <v-btn variant="plain" icon v-bind="props">
                 <v-icon>mdi-dots-vertical</v-icon>
@@ -37,12 +37,9 @@
               <v-list-item @click="editMessage(message)">
                 <v-list-item-title>{{ $t('message.edit') }}</v-list-item-title>
               </v-list-item>
-              <v-list-item @click="deleteMessage(message)">
+              <v-list-item @click="deleteMessage()">
                 <v-list-item-title>{{ $t('message.delete') }}</v-list-item-title>
               </v-list-item>
-              <v-list-item @click="reportMessage(message)">
-                <v-list-item-title>{{ $t('message.report') }}</v-list-item-title>
-              </v-list-item>
             </v-list>
           </v-menu>
         </div>
@@ -57,11 +54,11 @@
                 rows="1"
                 auto-grow
                 class="flex-1 mt-3"
-                @keyup.enter="acceptechanges"
+                @keyup.enter="acceptChanges"
             ></v-textarea>
 
             <div class="flex flex-col px-2 space-y-1">
-              <v-btn variant="plain" @click="acceptechanges">
+              <v-btn variant="plain" @click="acceptChanges">
                 <v-icon>mdi-check</v-icon>
               </v-btn>
               <v-btn variant="plain" @click="cancel">
@@ -73,15 +70,24 @@
       </div>
     </div>
   </div>
+  <must-be-logged v-model="loginModal" message="Vous devez être connecté pour supprimer ou modifier un commentaire."></must-be-logged>
 </template>
 
 <script setup>
-import { ref, watch, onMounted, onBeforeUnmount } from "vue";
+import {ref, watch, onMounted, onBeforeUnmount, computed} from "vue";
 import { time_ago } from "@/internal_time_ago.js";
+import MustBeLogged from "@/views/MustBeLogged.vue";
+import {useAuthStore} from "@/stores/authStore.js";
+import {useClient} from "@/plugins/api.js";
 
 const isEditMessage = ref(false);
 const editMessageValue = ref("");
 const originalMessageValue = ref("");
+const loginModal = ref(false);
+const authStore = useAuthStore();
+const client = useClient();
+const messageAuthorId = computed(() => props.message.createdBy)
+const messageAuthorIsCurrentUser = computed(() => authStore.isAuthenticated && authStore.userId === messageAuthorId.value)
 
 const props = defineProps({
   message: {
@@ -90,15 +96,32 @@ const props = defineProps({
   }
 });
 
+const emits = defineEmits(['message-deleted']);
+
 function editMessage(message) {
   isEditMessage.value = true;
   originalMessageValue.value = message.value;
   editMessageValue.value = message.value;
 }
 
-function acceptechanges() {
+const acceptChanges = async() => {
   props.message.value = editMessageValue.value;
   isEditMessage.value = false;
+
+  console.log('Update message', props.message.value);
+  if (!authStore.isAuthenticated) {
+    loginModal.value = true;
+  } else {
+    try {
+      await client.post(`/api/messages/update`, {
+        "id": props.message.id,
+        "subjectId": props.message.subjectId,
+        "message": props.message.value
+      })
+    } catch (error) {
+      console.error(`post api/message/update : ${error}`)
+    }
+  }
 }
 
 function cancel() {
@@ -106,12 +129,20 @@ function cancel() {
   isEditMessage.value = false;
 }
 
-function deleteMessage(message) {
-  console.log('Delete message', message);
-}
-
-function reportMessage(message) {
-  console.log('Report message', message);
+const deleteMessage = async () => {
+  console.log('Delete message', props.message);
+  if (!authStore.isAuthenticated) {
+    loginModal.value = true;
+  } else {
+    try {
+      await client.delete(`/api/messages/${props.message.id}`)
+      emits('message-deleted', {
+        "id": props.message.id
+      })
+    } catch (error) {
+      console.error(`delete api/message : ${error}`)
+    }
+  }
 }
 
 function handleKeydown(event) {

src/views/messages/MessageList.vue

@@ -7,6 +7,7 @@
   >
     <template v-for="message in messages" :key="message">
       <message :message="message"
+               @message-deleted="(messageId) => handleDeleteMessage(messageId)"
                class="border-b"
       ></message>
     </template>
@@ -87,4 +88,8 @@ async function fetchMessages({done, page_size = 10}) {
     done('error');
   }
 }
+
+function handleDeleteMessage(message){
+  messages.value = messages.value.filter(item => item.id !== message.id);
+}
 </script>