Publish current project state

frontend/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactNotes.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { reactive, computed } from 'vue';
+import { reactive, computed, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useStore, useMapGetter } from 'dashboard/composables/store';
 import { useRoute } from 'vue-router';
@@ -16,13 +16,18 @@ const route = useRoute();
 
 const state = reactive({
   message: '',
+  editMessage: '',
+  editingNoteId: null,
 });
+let editorGeneration = 0;
 
 const currentUser = useMapGetter('getCurrentUser');
 const notesByContact = useMapGetter('contactNotes/getAllNotesByContactId');
 const uiFlags = useMapGetter('contactNotes/getUIFlags');
 const isFetchingNotes = computed(() => uiFlags.value.isFetching);
 const isCreatingNote = computed(() => uiFlags.value.isCreating);
+const isUpdatingNote = computed(() => uiFlags.value.isUpdating);
+const isDeletingNote = computed(() => uiFlags.value.isDeleting);
 const notes = computed(() => notesByContact.value(route.params.contactId));
 
 const getWrittenBy = note => {
@@ -32,26 +37,80 @@ const getWrittenBy = note => {
     : note?.user?.name || 'Bot';
 };
 
-const onAdd = content => {
-  if (!content) return;
-  const { contactId } = route.params;
-  store.dispatch('contactNotes/create', { content, contactId });
-  state.message = '';
+const onAdd = async content => {
+  if (!content || isCreatingNote.value) return;
+  const targetContactId = route.params.contactId;
+  const generation = editorGeneration;
+  await store.dispatch('contactNotes/create', {
+    content,
+    contactId: targetContactId,
+  });
+  if (
+    generation === editorGeneration &&
+    route.params.contactId === targetContactId &&
+    state.message === content
+  ) {
+    state.message = '';
+  }
+};
+
+const onEdit = note => {
+  if (!note?.id || isUpdatingNote.value) return;
+  editorGeneration += 1;
+  state.editingNoteId = note.id;
+  state.editMessage = note.content || '';
+};
+
+const closeEdit = () => {
+  editorGeneration += 1;
+  state.editingNoteId = null;
+  state.editMessage = '';
+};
+
+const onUpdate = async () => {
+  if (!state.editingNoteId || !state.editMessage || isUpdatingNote.value)
+    return;
+  const targetContactId = route.params.contactId;
+  const targetNoteId = state.editingNoteId;
+  const content = state.editMessage;
+  const generation = editorGeneration;
+  await store.dispatch('contactNotes/update', {
+    noteId: targetNoteId,
+    contactId: targetContactId,
+    content,
+  });
+  if (
+    generation === editorGeneration &&
+    route.params.contactId === targetContactId &&
+    state.editingNoteId === targetNoteId &&
+    state.editMessage === content
+  ) {
+    closeEdit();
+  }
 };
 
 const onDelete = noteId => {
-  if (!noteId) return;
+  if (!noteId || isDeletingNote.value) return;
   const { contactId } = route.params;
   store.dispatch('contactNotes/delete', { noteId, contactId });
 };
 
 const keyboardEvents = {
   '$mod+Enter': {
-    action: () => onAdd(state.message),
+    action: () => (state.editingNoteId ? onUpdate() : onAdd(state.message)),
     allowOnFocusedInput: true,
   },
 };
 useKeyboardEvents(keyboardEvents);
+
+watch(
+  () => route.params.contactId,
+  () => {
+    editorGeneration += 1;
+    state.message = '';
+    closeEdit();
+  }
+);
 </script>
 
 <template>
@@ -60,6 +119,8 @@ useKeyboardEvents(keyboardEvents);
       v-model="state.message"
       :placeholder="t('CONTACTS_LAYOUT.SIDEBAR.NOTES.PLACEHOLDER')"
       focus-on-mount
+      :max-length="0"
+      :show-character-count="false"
       class="[&>div]:!border-transparent [&>div]:px-4 [&>div]:py-4 px-6"
     >
       <template #actions>
@@ -91,11 +152,43 @@ useKeyboardEvents(keyboardEvents);
         :note="note"
         :written-by="getWrittenBy(note)"
         allow-delete
+        allow-edit
         @delete="onDelete"
+        @edit="onEdit"
       />
     </div>
     <p v-else class="px-6 py-6 text-sm leading-6 text-center text-n-slate-11">
       {{ t('CONTACTS_LAYOUT.SIDEBAR.NOTES.EMPTY_STATE') }}
     </p>
+    <woot-modal
+      :show="Boolean(state.editingNoteId)"
+      :on-close="closeEdit"
+      :close-on-backdrop-click="false"
+      class="!items-start [&>div]:!top-12 [&>div]:sticky"
+    >
+      <div class="flex w-full flex-col gap-6 px-6 py-6">
+        <h3 class="text-lg font-semibold text-n-slate-12">
+          {{ t('CONTACTS_LAYOUT.SIDEBAR.NOTES.EDIT_NOTE') }}
+        </h3>
+        <Editor
+          v-model="state.editMessage"
+          focus-on-mount
+          :placeholder="t('CONTACTS_LAYOUT.SIDEBAR.NOTES.PLACEHOLDER')"
+          :max-length="0"
+          :show-character-count="false"
+          class="[&>div]:!border-transparent [&>div]:px-4 [&>div]:py-4"
+        />
+        <div class="flex items-center justify-end gap-3">
+          <Button
+            solid
+            blue
+            :label="t('CONTACTS_LAYOUT.SIDEBAR.NOTES.SAVE')"
+            :is-loading="isUpdatingNote"
+            :disabled="!state.editMessage || isUpdatingNote"
+            @click="onUpdate"
+          />
+        </div>
+      </div>
+    </woot-modal>
   </div>
 </template>

frontend/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/components/ContactNoteItem.vue

@@ -20,13 +20,17 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  allowEdit: {
+    type: Boolean,
+    default: false,
+  },
   collapsible: {
     type: Boolean,
     default: false,
   },
 });
 
-const emit = defineEmits(['delete']);
+const emit = defineEmits(['delete', 'edit']);
 const noteContentRef = useTemplateRef('noteContentRef');
 const needsCollapse = ref(false);
 const [isExpanded, toggleExpanded] = useToggle();
@@ -37,6 +41,10 @@ const handleDelete = () => {
   emit('delete', props.note.id);
 };
 
+const handleEdit = () => {
+  emit('edit', props.note);
+};
+
 onMounted(() => {
   if (props.collapsible) {
     // Check if content height exceeds approximately 4 lines
@@ -71,15 +79,28 @@ onMounted(() => {
           </span>
         </div>
       </div>
-      <Button
-        v-if="allowDelete"
-        variant="faded"
-        color="ruby"
-        size="xs"
-        icon="i-lucide-trash"
-        class="opacity-0 group-hover/note:opacity-100"
-        @click="handleDelete"
-      />
+      <div
+        class="flex items-center gap-1 opacity-0 group-hover/note:opacity-100"
+      >
+        <Button
+          v-if="allowEdit"
+          variant="faded"
+          color="blue"
+          size="xs"
+          icon="i-lucide-pencil"
+          :aria-label="t('CONTACTS_LAYOUT.SIDEBAR.NOTES.EDIT_NOTE')"
+          @click="handleEdit"
+        />
+        <Button
+          v-if="allowDelete"
+          variant="faded"
+          color="ruby"
+          size="xs"
+          icon="i-lucide-trash"
+          :aria-label="t('CONTACTS_LAYOUT.SIDEBAR.NOTES.DELETE_NOTE')"
+          @click="handleDelete"
+        />
+      </div>
     </div>
     <p
       ref="noteContentRef"