fix: Clicking on contact attributes doesn't do anything if contact at…

…tributes list is empty (#9257) * fix: Clicking on contact attributes doesn't do anything if contact attributes list is empty * Update app/javascript/dashboard/i18n/locale/en/conversation.json Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com> * Update app/javascript/dashboard/i18n/locale/en/contact.json Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com> --------- Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
chatwoot · Apr 18, 2024 · ca2fa5f · ca2fa5f
1 parent 888d3cb
commit ca2fa5f
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 3 deletions.
diff --git a/app/javascript/dashboard/i18n/locale/en/contact.json b/app/javascript/dashboard/i18n/locale/en/contact.json
@@ -48,7 +48,8 @@
     "SIDEBAR_SECTIONS": {
       "CUSTOM_ATTRIBUTES": "Custom Attributes",
       "CONTACT_LABELS": "Contact Labels",
-      "PREVIOUS_CONVERSATIONS": "Previous Conversations"
+      "PREVIOUS_CONVERSATIONS": "Previous Conversations",
+      "NO_RECORDS_FOUND": "No attributes found"
     }
   },
   "EDIT_CONTACT": {

diff --git a/app/javascript/dashboard/i18n/locale/en/conversation.json b/app/javascript/dashboard/i18n/locale/en/conversation.json
@@ -280,6 +280,7 @@
   },
   "CONVERSATION_CUSTOM_ATTRIBUTES": {
     "ADD_BUTTON_TEXT": "Create attribute",
+    "NO_RECORDS_FOUND": "No attributes found",
     "UPDATE": {
       "SUCCESS": "Attribute updated successfully",
       "ERROR": "Unable to update attribute. Please try again later"

diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="w-1/4 bg-white dark:bg-slate-900 border-slate-50 dark:border-slate-800/50 h-full text-sm overflow-y-auto relative"
+    class="relative w-1/4 h-full overflow-y-auto text-sm bg-white dark:bg-slate-900 border-slate-50 dark:border-slate-800/50"
     :class="showAvatar ? 'border-l border-solid ' : 'border-r border-solid'"
   >
     <contact-info
@@ -40,6 +40,9 @@
                 attribute-class="conversation--attribute"
                 attribute-from="contact_panel"
                 :custom-attributes="contact.custom_attributes"
+                :empty-state-message="
+                  $t('CONTACT_PANEL.SIDEBAR_SECTIONS.NO_RECORDS_FOUND')
+                "
                 class="even"
               />
             </accordion-item>

diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 border-slate-50 dark:border-slate-800/50 border-l rtl:border-l-0 rtl:border-r contact--panel overflow-y-auto"
+    class="overflow-y-auto bg-white border-l dark:bg-slate-900 text-slate-900 dark:text-slate-300 border-slate-50 dark:border-slate-800/50 rtl:border-l-0 rtl:border-r contact--panel"
   >
     <contact-info
       :contact="contact"
@@ -89,6 +89,9 @@
                 class="even"
                 attribute-from="conversation_contact_panel"
                 :contact-id="contact.id"
+                :empty-state-message="
+                  $t('CONVERSATION_CUSTOM_ATTRIBUTES.NO_RECORDS_FOUND')
+                "
               />
             </accordion-item>
           </div>

diff --git a/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue b/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue
@@ -17,6 +17,12 @@
       @delete="onDelete"
       @copy="onCopy"
     />
+    <p
+      v-if="!displayedAttributes.length && emptyStateMessage"
+      class="p-3 text-center"
+    >
+      {{ emptyStateMessage }}
+    </p>
     <!-- Show more and show less buttons show it if the filteredAttributes length is greater than 5 -->
     <div v-if="filteredAttributes.length > 5" class="flex px-2 py-2">
       <woot-button
@@ -59,6 +65,10 @@ export default {
       type: String,
       required: true,
     },
+    emptyStateMessage: {
+      type: String,
+      default: '',
+    },
   },
   data() {
     return {