Added message modification (UI) need backend to be called

src/views/messages/Message.vue

@@ -1,32 +1,31 @@
 <template>
-  <div class="flex flex-column py-2 ">
-    <div class="flex flex-row full ">
-      <div  class="w-full">
+  <div class="flex flex-column py-2">
+    <div class="flex flex-row full">
+      <div class="w-full">
         <div class="flex justify-between items-center">
           <div>
             <div>
-              <div class=" content-center flex flex-row">
+              <div class="content-center flex flex-row">
                 <img
                     :src="message.createdByPortraitUrl ?? '/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png'"
                     alt="Profile Image"
                     class="rounded-full"
                     width="32px"
-                    height="32px">
+                    height="32px"
+                />
                 <span class="font-semibold font-sans mr-2 capitalize ml-2">
-              {{ message.createdByName }}
-            </span>
+                  {{ message.createdByName }}
+                </span>
 
                 <v-tooltip :text="new Date(message.createdAt).toLocaleString()">
                   <template v-slot:activator="{ props }">
-                <span v-bind="props" class="text-sm-caption text-gray-700 mt-1">
-                  {{ time_ago(message.createdAt) }}
-                </span>
+                    <span v-bind="props" class="text-sm-caption text-gray-700 mt-1">
+                      {{ time_ago(message.createdAt) }}
+                    </span>
                   </template>
-                </v-tooltip>                              
+                </v-tooltip>
               </div>
             </div>
-
-
           </div>
           <v-menu class="ml-auto">
             <template v-slot:activator="{ props }">
@@ -49,8 +48,27 @@
         </div>
 
         <div class="font-sans message-content">
-          <p class=" pb-2"> {{ message.value }}</p>
+          <p class="pb-2" v-if="!isEditMessage"> {{ message.value }}</p>
 
+          <div v-if="isEditMessage" class="flex flex-row">
+            <v-textarea
+                variant="outlined"
+                v-model="editMessageValue"
+                rows="1"
+                auto-grow
+                class="flex-1 mt-3"
+                @keyup.enter="acceptechanges"
+            ></v-textarea>
+
+            <div class="flex flex-col px-2 space-y-1">
+              <v-btn variant="plain" @click="acceptechanges">
+                <v-icon>mdi-check</v-icon>
+              </v-btn>
+              <v-btn variant="plain" @click="cancel">
+                <v-icon class="rounded-full">mdi-cancel</v-icon>
+              </v-btn>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -58,9 +76,12 @@
 </template>
 
 <script setup>
+import { ref, watch, onMounted, onBeforeUnmount } from "vue";
+import { time_ago } from "@/internal_time_ago.js";
 
-import {time_ago} from "@/internal_time_ago.js";
-
+const isEditMessage = ref(false);
+const editMessageValue = ref("");
+const originalMessageValue = ref("");
 
 const props = defineProps({
   message: {
@@ -69,23 +90,56 @@ const props = defineProps({
   }
 });
 
-
 function editMessage(message) {
-  // Logic for editing the message
-  console.log('Edit message', message);
+  isEditMessage.value = true;
+  originalMessageValue.value = message.value;
+  editMessageValue.value = message.value;
+}
+
+function acceptechanges() {
+  props.message.value = editMessageValue.value;
+  isEditMessage.value = false;
+}
+
+function cancel() {
+  editMessageValue.value = originalMessageValue.value;
+  isEditMessage.value = false;
 }
 
 function deleteMessage(message) {
-  // Logic for deleting the message
   console.log('Delete message', message);
 }
 
 function reportMessage(message) {
-  // Logic for reporting the message
   console.log('Report message', message);
 }
+
+function handleKeydown(event) {
+  if (event.key === "Escape") {
+    cancel();
+  }
+}
+
+watch(isEditMessage, (newValue) => {
+  if (newValue) {
+    window.addEventListener('keydown', handleKeydown);
+  } else {
+    window.removeEventListener('keydown', handleKeydown);
+  }
+});
+
+onMounted(() => {
+  if (isEditMessage.value) {
+    window.addEventListener('keydown', handleKeydown);
+  }
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('keydown', handleKeydown);
+});
 </script>
 
+
 <style scoped>
 .content-center {
   display: flex;