feat: COntact sidebar

2024-11-05 21:34:05 +05:30
parent 759ce1229d
commit fa8a7db612
8 changed files with 307 additions and 75 deletions
@@ -0,0 +1,121 @@
+<script setup>
+import { reactive, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useStore, useMapGetter } from 'dashboard/composables/store';
+import { useRoute } from 'vue-router';
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
+import { dynamicTime } from 'shared/helpers/timeHelper';
+
+import Editor from 'dashboard/components-next/Editor/Editor.vue';
+import Thumbnail from 'dashboard/components-next/thumbnail/Thumbnail.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+import Button from 'dashboard/components-next/Button/Button.vue';
+
+const { t } = useI18n();
+const store = useStore();
+const route = useRoute();
+
+const { formatMessage } = useMessageFormatter();
+
+const state = reactive({
+  message: '',
+});
+
+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 notes = computed(() => notesByContact.value(route.params.contactId));
+
+const getWrittenBy = note => {
+  const isCurrentUser = note?.user?.id === currentUser.value.id;
+  return isCurrentUser
+    ? t('CONTACTS_LAYOUT.SIDEBAR.NOTES.YOU')
+    : note.user.name;
+};
+
+const onAdd = content => {
+  if (!content) return;
+  const { contactId } = route.params;
+  store.dispatch('contactNotes/create', { content, contactId });
+  state.message = '';
+};
+
+const onDelete = noteId => {
+  if (!noteId) return;
+  const { contactId } = route.params;
+  store.dispatch('contactNotes/delete', { noteId, contactId });
+};
+</script>
+
+<template>
+  <div class="flex flex-col gap-6 py-6">
+    <Editor
+      v-model="state.message"
+      :placeholder="t('CONTACTS_LAYOUT.SIDEBAR.NOTES.PLACEHOLDER')"
+      class="[&>div]:!border-transparent [&>div]:px-4 [&>div]:py-4 px-6"
+    >
+      <template #actions>
+        <div class="flex items-center gap-3">
+          <Button
+            variant="link"
+            color="blue"
+            size="sm"
+            :label="t('CONTACTS_LAYOUT.SIDEBAR.NOTES.SAVE')"
+            class="hover:no-underline"
+            :is-loading="isCreatingNote"
+            :disabled="!state.message || isCreatingNote"
+            @click="onAdd(state.message)"
+          />
+        </div>
+      </template>
+    </Editor>
+    <div
+      v-if="isFetchingNotes"
+      class="flex items-center justify-center py-10 text-n-slate-11"
+    >
+      <Spinner />
+    </div>
+    <div v-else>
+      <div
+        v-for="note in notes"
+        :key="note.id"
+        class="flex flex-col gap-2 px-6 py-2 border-b border-n-strong group/note"
+      >
+        <div class="flex items-center justify-between">
+          <div class="flex items-center gap-1.5 py-2.5">
+            <Thumbnail
+              :author="note.user || { name: note.user.name }"
+              :name="note.user.name"
+              :src="note.user.thumbnail"
+            />
+            <span
+              class="inline-flex items-center gap-1 text-sm text-n-slate-11"
+            >
+              <span class="text-sm font-medium text-n-slate-11">
+                {{ getWrittenBy(note) }}
+              </span>
+              {{ $t('CONTACTS_LAYOUT.SIDEBAR.NOTES.WROTE') }}
+              <span class="text-sm font-medium text-n-slate-11">
+                {{ dynamicTime(note.createdAt) }}
+              </span>
+            </span>
+          </div>
+          <Button
+            variant="faded"
+            color="ruby"
+            size="xs"
+            icon="i-lucide-trash"
+            class="opacity-0 group-hover/note:opacity-100"
+            @click="onDelete(note.id)"
+          />
+        </div>
+        <p
+          v-dompurify-html="formatMessage(note.content || '')"
+          class="mb-0 prose-sm prose-p:mb-1 prose-p:mt-0 prose-ul:mb-1 prose-ul:mt-0 text-n-slate-12"
+        />
+      </div>
+    </div>
+  </div>
+</template>