feat(companies): add notes and history to company details (#14401)

2026-05-11 23:15:25 +05:30
parent f6be0d80ef
commit 086aa36ffe
16 changed files with 440 additions and 31 deletions
@@ -56,9 +56,14 @@ const closeMobileSidebar = () => {

    <div
      v-if="slots.sidebar"
-      class="hidden lg:block overflow-y-auto justify-end min-w-52 w-full py-6 max-w-md border-l border-n-weak bg-n-solid-2"
+      class="hidden lg:flex flex-col min-w-52 w-full max-w-md border-l border-n-weak bg-n-solid-2"
    >
-      <slot name="sidebar" />
+      <div class="shrink-0">
+        <slot name="sidebarHeader" />
+      </div>
+      <div class="flex-1 overflow-y-auto pb-6 pt-3">
+        <slot name="sidebar" />
+      </div>
    </div>

    <div
@@ -105,9 +110,14 @@ const closeMobileSidebar = () => {
        <div
          v-if="isSidebarOpen"
          id="details-sidebar-content"
-          class="order-2 w-[85%] sm:w-[50%] bg-n-solid-2 ltr:border-l rtl:border-r border-n-weak overflow-y-auto py-6 shadow-lg"
+          class="order-2 w-[85%] sm:w-[50%] flex flex-col bg-n-solid-2 ltr:border-l rtl:border-r border-n-weak shadow-lg"
        >
-          <slot name="sidebar" />
+          <div class="shrink-0">
+            <slot name="sidebarHeader" />
+          </div>
+          <div class="flex-1 overflow-y-auto pb-6 pt-3">
+            <slot name="sidebar" />
+          </div>
        </div>
      </Transition>
    </div>
@@ -169,7 +169,7 @@ const handleContactSelect = contactId => {
 </script>

 <template>
-  <div class="flex flex-col gap-6 px-6 pb-8 pt-1">
+  <div class="flex flex-col gap-6 px-6 pb-8">
    <div v-if="!selectedContact" class="flex flex-col gap-4">
      <div class="flex flex-col gap-2">
        <label class="text-base text-n-slate-12">
@@ -288,7 +288,7 @@ const handleContactSelect = contactId => {

      <div
        v-else-if="!hasContacts"
-        class="py-8 text-sm text-center rounded-xl border border-dashed border-n-weak text-n-slate-11"
+        class="py-8 px-4 text-sm text-center rounded-xl border border-dashed border-n-strong text-n-slate-11"
      >
        {{ t('COMPANIES.DETAIL.CONTACTS.EMPTY') }}
      </div>
@@ -346,7 +346,7 @@ const handleContactSelect = contactId => {
        :current-page="currentPage"
        :total-items="totalContacts"
        :items-per-page="15"
-        class="!px-0 before:hidden"
+        class="!px-0 before:hidden bg-transparent"
        @update:current-page="emit('update:currentPage', $event)"
      />
    </div>
@@ -0,0 +1,67 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useMapGetter } from 'dashboard/composables/store';
+
+import ConversationCard from 'dashboard/components-next/Conversation/ConversationCard/ConversationCard.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+
+defineProps({
+  conversations: {
+    type: Array,
+    default: () => [],
+  },
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const { t } = useI18n();
+const contactsById = useMapGetter('contacts/getContactById');
+const stateInbox = useMapGetter('inboxes/getInboxById');
+const accountLabels = useMapGetter('labels/getLabels');
+
+const accountLabelsValue = computed(() => accountLabels.value);
+const conversationContact = conversation => {
+  const sender = conversation.meta?.sender || {};
+  const contact = contactsById.value(sender.id);
+  return contact.id ? contact : sender;
+};
+const conversationInbox = conversation =>
+  stateInbox.value(conversation.inboxId) || {
+    name: '',
+    channelType: conversation.meta?.channel,
+  };
+</script>
+
+<template>
+  <div
+    v-if="isLoading"
+    class="flex items-center justify-center py-10 text-n-slate-11"
+  >
+    <Spinner />
+  </div>
+
+  <div
+    v-else-if="conversations.length > 0"
+    class="px-6 divide-y divide-n-strong [&>*:hover]:!border-y-transparent [&>*:hover+*]:!border-t-transparent"
+  >
+    <ConversationCard
+      v-for="conversation in conversations"
+      :key="conversation.id"
+      :conversation="conversation"
+      :contact="conversationContact(conversation)"
+      :state-inbox="conversationInbox(conversation)"
+      :account-labels="accountLabelsValue"
+      class="rounded-none hover:rounded-xl hover:bg-n-alpha-1 dark:hover:bg-n-alpha-3"
+    />
+  </div>
+
+  <p
+    v-else
+    class="py-8 px-4 mx-6 text-sm text-center rounded-xl border border-dashed border-n-strong text-n-slate-11"
+  >
+    {{ t('COMPANIES.DETAIL.HISTORY.EMPTY') }}
+  </p>
+</template>
@@ -0,0 +1,114 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+import { useMapGetter } from 'dashboard/composables/store';
+import { dynamicTime } from 'shared/helpers/timeHelper';
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
+
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+
+const props = defineProps({
+  notes: {
+    type: Array,
+    default: () => [],
+  },
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const route = useRoute();
+const router = useRouter();
+const { t } = useI18n();
+const { formatMessage } = useMessageFormatter();
+const currentUser = useMapGetter('getCurrentUser');
+
+const hasNotes = computed(() => props.notes.length > 0);
+
+const contactName = contact =>
+  contact?.name || t('COMPANIES.DETAIL.CONTACTS.UNNAMED_CONTACT');
+
+const getWrittenBy = note => {
+  const isCurrentUser = note?.user?.id === currentUser.value.id;
+  return isCurrentUser
+    ? t('CONTACTS_LAYOUT.SIDEBAR.NOTES.YOU')
+    : note?.user?.name || 'Bot';
+};
+
+const openContact = contactId => {
+  router.push({
+    name: 'contacts_edit',
+    params: {
+      accountId: route.params.accountId,
+      contactId,
+    },
+  });
+};
+</script>
+
+<template>
+  <div v-if="hasNotes" class="flex flex-col px-6">
+    <div class="flex flex-col divide-y divide-n-strong">
+      <div
+        v-for="note in notes"
+        :key="note.id"
+        class="flex flex-col gap-2 py-4 group/note"
+      >
+        <div class="flex items-center gap-1.5 min-w-0">
+          <Avatar
+            :name="contactName(note.contact)"
+            :src="note.contact?.thumbnail"
+            :size="16"
+            rounded-full
+            hide-offline-status
+          />
+          <div
+            class="flex items-center justify-between min-w-0 gap-1 w-full text-sm text-n-slate-11"
+          >
+            <button
+              type="button"
+              class="min-w-0 font-medium truncate text-start text-n-slate-12 hover:text-n-blue-11 p-0"
+              @click="openContact(note.contact.id)"
+            >
+              {{ contactName(note.contact) }}
+            </button>
+            <div class="min-w-0 truncate">
+              <span
+                class="inline-flex items-center gap-1 text-sm text-n-slate-10"
+              >
+                <span class="font-medium text-n-slate-11">
+                  {{ getWrittenBy(note) }}
+                </span>
+                {{ t('CONTACTS_LAYOUT.SIDEBAR.NOTES.WROTE') }}
+                <span class="font-medium text-n-slate-11">
+                  {{ dynamicTime(note.createdAt) }}
+                </span>
+              </span>
+            </div>
+          </div>
+        </div>
+        <p
+          v-dompurify-html="formatMessage(note.content || '')"
+          class="mb-0 prose-sm prose-p:text-sm prose-p:leading-relaxed prose-p:mb-1 prose-p:mt-0 prose-ul:mb-1 prose-ul:mt-0 text-n-slate-12"
+        />
+      </div>
+    </div>
+  </div>
+
+  <div
+    v-else-if="isLoading"
+    class="flex items-center justify-center py-10 text-n-slate-11"
+  >
+    <Spinner />
+  </div>
+
+  <p
+    v-else
+    class="py-8 mx-6 px-4 text-sm text-center rounded-xl border border-dashed border-n-strong text-n-slate-11"
+  >
+    {{ t('COMPANIES.DETAIL.NOTES.EMPTY') }}
+  </p>
+</template>