Added message modification (UI) need backend to be called

src/views/messages/Message.vue

@@ -11,7 +11,8 @@
                     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>
@@ -25,8 +26,6 @@
                 </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";
 
+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;