Publish current project state

frontend/app/javascript/dashboard/components-next/Contacts/Pages/ContactDetails.vue

@@ -1,9 +1,10 @@
 <script setup>
-import { computed, ref, onMounted } from 'vue';
+import { computed, ref, onMounted, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useStore, useMapGetter } from 'dashboard/composables/store';
 import { useAlert } from 'dashboard/composables';
 import { dynamicTime } from 'shared/helpers/timeHelper';
+import { ROLE_ADMINISTRATOR } from 'dashboard/constants/permissions.js';
 
 import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
@@ -47,6 +48,14 @@ onMounted(() => {
   Object.assign(contactData.value, getInitialContactData());
 });
 
+watch(
+  () => props.selectedContact,
+  contact => {
+    contactData.value = contact ? { ...contact } : {};
+  },
+  { deep: true }
+);
+
 const createdAt = computed(() => {
   return contactData.value?.createdAt
     ? dynamicTime(contactData.value.createdAt)
@@ -63,6 +72,21 @@ const avatarSrc = computed(() => {
   return avatarUrl.value ? avatarUrl.value : contactData.value?.thumbnail;
 });
 
+const shangwutongNameOperations = computed(() =>
+  (
+    contactData.value?.contactInboxes ||
+    contactData.value?.contact_inboxes ||
+    []
+  )
+    .map(contactInbox => ({
+      contactInbox,
+      operation:
+        contactInbox.shangwutongContactNameOperation ||
+        contactInbox.shangwutong_contact_name_operation,
+    }))
+    .filter(({ operation }) => operation)
+);
+
 const handleFormUpdate = updatedData => {
   Object.assign(contactData.value, updatedData);
 };
@@ -136,6 +160,29 @@ const handleAvatarDelete = async () => {
           {{ selectedContact?.name }}
         </h3>
         <div class="flex flex-col gap-1.5">
+          <span
+            v-for="item in shangwutongNameOperations"
+            :key="
+              item.operation.contactInboxId ||
+              item.operation.contact_inbox_id ||
+              item.contactInbox.id
+            "
+            class="text-xs text-n-slate-10"
+          >
+            {{
+              item.contactInbox.inbox?.name ||
+              item.contactInbox.inboxName ||
+              item.contactInbox.sourceId ||
+              item.contactInbox.source_id
+            }}:
+            {{ item.operation.status }}
+            <span
+              v-if="item.operation.errorMessage || item.operation.error_message"
+            >
+              —
+              {{ item.operation.errorMessage || item.operation.error_message }}
+            </span>
+          </span>
           <span
             v-if="selectedContact?.identifier"
             class="inline-flex items-center gap-1 text-sm text-n-slate-11"
@@ -175,7 +222,7 @@ const handleAvatarDelete = async () => {
         @click="updateContact"
       />
     </div>
-    <Policy :permissions="['administrator']">
+    <Policy :permissions="[ROLE_ADMINISTRATOR]">
       <div
         class="flex flex-col items-start w-full gap-4 pt-6 border-t border-n-strong"
       >