From 79a9545319310908e4b0c37776a839aff5e33a5c Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 28 Oct 2024 22:33:41 +0530
Subject: [PATCH] fix: placeholder in dropdown component

---
 frontend/src/components/DropdownItem.vue  | 11 +---
 frontend/src/components/SectionFields.vue |  7 +-
 frontend/src/pages/Contact.vue            | 78 +----------------------
 3 files changed, 11 insertions(+), 85 deletions(-)

diff --git a/frontend/src/components/DropdownItem.vue b/frontend/src/components/DropdownItem.vue
index 91d841ea..f292d902 100644
--- a/frontend/src/components/DropdownItem.vue
+++ b/frontend/src/components/DropdownItem.vue
@@ -2,7 +2,7 @@
   <div
     class="group flex w-full items-center justify-between rounded bg-transparent p-1 pl-2 text-base text-gray-800 transition-colors hover:bg-gray-200 active:bg-gray-300"
   >
-    <div class="flex items-center justify-between gap-7">
+    <div class="flex flex-1 items-center justify-between gap-7">
       <div v-show="!editMode">{{ option.value }}</div>
       <TextInput
         ref="inputRef"
@@ -60,13 +60,8 @@
         </Tooltip>
       </div>
     </div>
-    <div>
-      <FeatherIcon
-        v-if="option.selected"
-        name="check"
-        class="text-primary-500 h-4 w-6"
-        size="sm"
-      />
+    <div v-if="option.selected">
+      <FeatherIcon name="check" class="text-primary-500 h-4 w-6" size="sm" />
     </div>
   </div>
 </template>
diff --git a/frontend/src/components/SectionFields.vue b/frontend/src/components/SectionFields.vue
index 6ff12585..d8a26f5a 100644
--- a/frontend/src/components/SectionFields.vue
+++ b/frontend/src/components/SectionFields.vue
@@ -35,7 +35,12 @@
                 :label="data[field.name]"
                 class="dropdown-button flex w-full items-center justify-between rounded border border-gray-100 bg-gray-100 px-2 py-1.5 text-base text-gray-800 placeholder-gray-500 transition-colors hover:border-gray-200 hover:bg-gray-200 focus:border-gray-500 focus:bg-white focus:shadow-sm focus:outline-none focus:ring-0 focus-visible:ring-2 focus-visible:ring-gray-400"
               >
-                <div class="truncate">{{ data[field.name] }}</div>
+                <div v-if="data[field.name]" class="truncate">
+                  {{ data[field.name] }}
+                </div>
+                <div v-else class="text-base leading-5 text-gray-500">
+                  {{ field.placeholder }}
+                </div>
                 <template #suffix>
                   <FeatherIcon
                     :name="open ? 'chevron-up' : 'chevron-down'"
diff --git a/frontend/src/pages/Contact.vue b/frontend/src/pages/Contact.vue
index 7ff0aa50..31c4c8e4 100644
--- a/frontend/src/pages/Contact.vue
+++ b/frontend/src/pages/Contact.vue
@@ -84,86 +84,12 @@
                     />
                     <span class="">{{ contact.data.company_name }}</span>
                   </div>
-                  <!-- <div
-                class="flex flex-col flex-wrap gap-3 text-base text-gray-700 sm:flex-row sm:items-center sm:gap-2"
-              >
-                <div
-                  v-if="contact.data.email_id"
-                  class="flex items-center gap-1.5"
-                >
-                  <Email2Icon class="h-4 w-4" />
-                  <span class="">{{ contact.data.email_id }}</span>
-                </div>
-                <span
-                  v-if="contact.data.email_id"
-                  class="hidden text-3xl leading-[0] text-gray-600 sm:flex"
-                >
-                  &middot;
-                </span>
-                <component
-                  :is="callEnabled ? Tooltip : 'div'"
-                  :text="__('Make Call')"
-                  v-if="contact.data.actual_mobile_no"
-                >
-                  <div
-                    class="flex items-center gap-1.5"
-                    :class="callEnabled ? 'cursor-pointer' : ''"
-                    @click="
-                      callEnabled && makeCall(contact.data.actual_mobile_no)
-                    "
-                  >
-                    <PhoneIcon class="h-4 w-4" />
-                    <span class="">{{ contact.data.actual_mobile_no }}</span>
-                  </div>
-                </component>
-                <span
-                  v-if="contact.data.actual_mobile_no"
-                  class="hidden text-3xl leading-[0] text-gray-600 sm:flex"
-                >
-                  &middot;
-                </span>
-                <div
-                  v-if="contact.data.company_name"
-                  class="flex items-center gap-1.5"
-                >
-                  <Avatar
-                    size="xs"
-                    :label="contact.data.company_name"
-                    :image="
-                      getOrganization(contact.data.company_name)
-                        ?.organization_logo
-                    "
-                  />
-                  <span class="">{{ contact.data.company_name }}</span>
-                </div>
-                <span
-                  v-if="contact.data.company_name"
-                  class="hidden text-3xl leading-[0] text-gray-600 sm:flex"
-                >
-                  &middot;
-                </span>
-                <Button
-                  v-if="
-                    contact.data.email_id ||
-                    contact.data.mobile_no ||
-                    contact.data.company_name
-                  "
-                  variant="ghost"
-                  :label="__('More')"
-                  class="w-fit cursor-pointer hover:text-gray-900 sm:-ml-1"
-                  @click="
-                    () => {
-                      detailMode = true
-                      showContactModal = true
-                    }
-                  "
-                />
-              </div> -->
                   <ErrorMessage :message="__(error)" />
                 </div>
               </div>
-              <div v-if="contact.data.actual_mobile_no" class="flex gap-1.5">
+              <div class="flex gap-1.5">
                 <Button
+                  v-if="contact.data.actual_mobile_no"
                   :label="__('Make Call')"
                   size="sm"
                   @click="