fix: placeholder in dropdown component

metalmon · Oct 29, 2024 · 79a9545 · 79a9545
1 parent 80cbae2
commit 79a9545
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 85 deletions.
diff --git 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
@@ -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
@@ -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="