feat: Contact attributes

2024-11-11 21:07:12 +05:30
parent d6cc5422d0
commit 0fe6d404b9
12 changed files with 750 additions and 11 deletions
@@ -0,0 +1,130 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useMapGetter } from 'dashboard/composables/store';
+
+import ContactCustomAttributeItem from 'dashboard/components-next/Contacts/ContactsSidebar/ContactCustomAttributeItem.vue';
+
+const props = defineProps({
+  selectedContact: {
+    type: Object,
+    default: null,
+  },
+});
+
+const { t } = useI18n();
+
+const searchQuery = ref('');
+
+const attributes = useMapGetter('attributes/getAttributesByModelType');
+
+const contactAttributes = computed(() => attributes.value('contact_attribute'));
+
+// Convert attribute key value from snake_case to camelCase
+const toCamelCase = str =>
+  str.toLowerCase().replace(/_([a-z])/g, (_, letter) => letter.toUpperCase());
+
+const usedAttributes = computed(() => {
+  if (!contactAttributes.value || !props.selectedContact?.customAttributes) {
+    return [];
+  }
+  return contactAttributes.value
+    .filter(attribute => {
+      const camelKey = toCamelCase(attribute.attributeKey);
+      return props.selectedContact.customAttributes[camelKey] !== undefined;
+    })
+    .map(attribute => ({
+      ...attribute,
+      value:
+        props.selectedContact.customAttributes[
+          toCamelCase(attribute.attributeKey)
+        ] ?? '',
+    }));
+});
+
+const unusedAttributes = computed(() => {
+  if (!contactAttributes.value || !props.selectedContact?.customAttributes) {
+    return [];
+  }
+
+  return contactAttributes.value
+    .filter(attribute => {
+      const camelKey = toCamelCase(attribute.attributeKey);
+      const attributeValue = props.selectedContact.customAttributes[camelKey];
+
+      // For checkbox type, consider both true/false as valid values
+      if (attribute.attributeDisplayType === 'checkbox') {
+        return typeof attributeValue !== 'boolean';
+      }
+
+      // For other types, check if value doesn't exist or is null/undefined
+      return attributeValue === undefined || attributeValue === null;
+    })
+    .map(attribute => ({
+      ...attribute,
+      value:
+        props.selectedContact.customAttributes[
+          toCamelCase(attribute.attributeKey)
+        ] ?? '',
+    }));
+});
+
+const filteredUnusedAttributes = computed(() => {
+  return unusedAttributes.value?.filter(attribute =>
+    attribute.attributeDisplayName
+      .toLowerCase()
+      .includes(searchQuery.value.toLowerCase())
+  );
+});
+
+const unusedAttributesCount = computed(() => unusedAttributes.value?.length);
+</script>
+
+<template>
+  <div class="flex flex-col gap-6 px-6 py-6">
+    <div class="flex flex-col gap-2">
+      <ContactCustomAttributeItem
+        v-for="attribute in usedAttributes"
+        :key="attribute.id"
+        is-editing-view
+        :attribute="attribute"
+      />
+    </div>
+    <div class="flex items-center gap-3">
+      <div class="flex-1 h-[1px] bg-n-slate-5" />
+      <span class="text-sm font-medium text-n-slate-10">{{
+        t('CONTACTS_LAYOUT.SIDEBAR.ATTRIBUTES.UNUSED_ATTRIBUTES', {
+          count: unusedAttributesCount,
+        })
+      }}</span>
+      <div class="flex-1 h-[1px] bg-n-slate-5" />
+    </div>
+    <div class="relative">
+      <span class="absolute i-lucide-search size-3.5 top-2 left-3" />
+      <input
+        v-model="searchQuery"
+        type="search"
+        :placeholder="
+          t('CONTACTS_LAYOUT.SIDEBAR.ATTRIBUTES.SEARCH_PLACEHOLDER')
+        "
+        class="w-full h-8 py-2 pl-10 pr-2 text-sm border-none rounded-xl bg-n-solid-1 text-n-slate-12"
+      />
+    </div>
+    <div v-if="filteredUnusedAttributes.length === 0">
+      <p class="text-sm text-n-slate-11">
+        {{
+          unusedAttributesCount === 0
+            ? t('CONTACTS_LAYOUT.SIDEBAR.ATTRIBUTES.EMPTY_STATE')
+            : t('CONTACTS_LAYOUT.SIDEBAR.ATTRIBUTES.NO_ATTRIBUTES')
+        }}
+      </p>
+    </div>
+    <div class="flex flex-col gap-2">
+      <ContactCustomAttributeItem
+        v-for="attribute in filteredUnusedAttributes"
+        :key="attribute.id"
+        :attribute="attribute"
+      />
+    </div>
+  </div>
+</template>