From 592a537379a6e0120b38807c36fdbd5c2056c35c Mon Sep 17 00:00:00 2001
From: mchev <martin.chevignard@gmail.com>
Date: Wed, 5 Jun 2024 14:36:32 +0200
Subject: [PATCH] Replace fixed text length with css line-clamp (#96)

---
 .../scripts/admin/views/customers/Index.vue   |  2 --
 .../partials/CustomerViewSidebar.vue          |  2 --
 .../scripts/admin/views/estimates/Index.vue   |  2 +-
 .../scripts/admin/views/estimates/View.vue    |  1 -
 .../scripts/admin/views/expenses/Index.vue    |  1 -
 .../scripts/admin/views/invoices/Index.vue    |  2 +-
 .../scripts/admin/views/invoices/View.vue     |  1 -
 resources/scripts/admin/views/items/Index.vue |  2 +-
 .../views/modules/partials/ModuleCard.vue     |  1 -
 .../scripts/admin/views/payments/Index.vue    |  2 +-
 .../scripts/admin/views/payments/View.vue     |  1 -
 .../admin/views/recurring-invoices/Index.vue  |  2 --
 .../partials/RecurringInvoiceViewSidebar.vue  |  1 -
 .../base/BaseCustomerSelectPopup.vue          |  3 ---
 .../scripts/components/base/BaseText.vue      | 22 ++++++++++++-------
 15 files changed, 18 insertions(+), 27 deletions(-)

diff --git a/resources/scripts/admin/views/customers/Index.vue b/resources/scripts/admin/views/customers/Index.vue
index 3244656c..3fa8046f 100644
--- a/resources/scripts/admin/views/customers/Index.vue
+++ b/resources/scripts/admin/views/customers/Index.vue
@@ -152,13 +152,11 @@
           <router-link :to="{ path: `customers/${row.data.id}/view` }">
             <BaseText
               :text="row.data.name"
-              :length="30"
               tag="span"
               class="font-medium text-primary-500 flex flex-col"
             />
             <BaseText
               :text="row.data.contact_name ? row.data.contact_name : ''"
-              :length="30"
               tag="span"
               class="text-xs text-gray-400"
             />
diff --git a/resources/scripts/admin/views/customers/partials/CustomerViewSidebar.vue b/resources/scripts/admin/views/customers/partials/CustomerViewSidebar.vue
index e76e5d5a..9d4af790 100644
--- a/resources/scripts/admin/views/customers/partials/CustomerViewSidebar.vue
+++ b/resources/scripts/admin/views/customers/partials/CustomerViewSidebar.vue
@@ -133,7 +133,6 @@
           <div>
             <BaseText
               :text="customer.name"
-              :length="30"
               class="
                 pr-2
                 text-sm
@@ -149,7 +148,6 @@
             <BaseText
               v-if="customer.contact_name"
               :text="customer.contact_name"
-              :length="30"
               class="
                 mt-1
                 text-xs
diff --git a/resources/scripts/admin/views/estimates/Index.vue b/resources/scripts/admin/views/estimates/Index.vue
index 7ab9ca83..1ebe7dc0 100644
--- a/resources/scripts/admin/views/estimates/Index.vue
+++ b/resources/scripts/admin/views/estimates/Index.vue
@@ -211,7 +211,7 @@
         </template>
 
         <template #cell-name="{ row }">
-          <BaseText :text="row.data.customer.name" :length="30" />
+          <BaseText :text="row.data.customer.name" />
         </template>
 
         <template #cell-status="{ row }">
diff --git a/resources/scripts/admin/views/estimates/View.vue b/resources/scripts/admin/views/estimates/View.vue
index 74def49d..b252092a 100644
--- a/resources/scripts/admin/views/estimates/View.vue
+++ b/resources/scripts/admin/views/estimates/View.vue
@@ -180,7 +180,6 @@
             <div class="flex-2">
               <BaseText
                 :text="estimate.customer.name"
-                :length="30"
                 class="
                   pr-2
                   mb-2
diff --git a/resources/scripts/admin/views/expenses/Index.vue b/resources/scripts/admin/views/expenses/Index.vue
index 8bd61972..1a166052 100644
--- a/resources/scripts/admin/views/expenses/Index.vue
+++ b/resources/scripts/admin/views/expenses/Index.vue
@@ -191,7 +191,6 @@
         <template #cell-user_name="{ row }">
           <BaseText
             :text="row.data.customer ? row.data.customer.name : '-'"
-            :length="30"
           />
         </template>
 
diff --git a/resources/scripts/admin/views/invoices/Index.vue b/resources/scripts/admin/views/invoices/Index.vue
index dfa8d9de..5995abe2 100644
--- a/resources/scripts/admin/views/invoices/Index.vue
+++ b/resources/scripts/admin/views/invoices/Index.vue
@@ -196,7 +196,7 @@
         </template>
 
         <template #cell-name="{ row }">
-          <BaseText :text="row.data.customer.name" :length="30" />
+          <BaseText :text="row.data.customer.name" />
         </template>
 
         <!-- Invoice Number  -->
diff --git a/resources/scripts/admin/views/invoices/View.vue b/resources/scripts/admin/views/invoices/View.vue
index 891e3d6f..2e1656a2 100644
--- a/resources/scripts/admin/views/invoices/View.vue
+++ b/resources/scripts/admin/views/invoices/View.vue
@@ -423,7 +423,6 @@ onSearched = debounce(onSearched, 500)
             <div class="flex-2">
               <BaseText
                 :text="invoice.customer.name"
-                :length="30"
                 class="
                   pr-2
                   mb-2
diff --git a/resources/scripts/admin/views/items/Index.vue b/resources/scripts/admin/views/items/Index.vue
index 5c120e5b..f6ca9090 100644
--- a/resources/scripts/admin/views/items/Index.vue
+++ b/resources/scripts/admin/views/items/Index.vue
@@ -155,7 +155,7 @@
             :to="{ path: `items/${row.data.id}/edit` }"
             class="font-medium text-primary-500"
           >
-            {{ row.data.name }}
+            <BaseText :text="row.data.name" />
           </router-link>
         </template>
 
diff --git a/resources/scripts/admin/views/modules/partials/ModuleCard.vue b/resources/scripts/admin/views/modules/partials/ModuleCard.vue
index 8e670dc6..14f838db 100644
--- a/resources/scripts/admin/views/modules/partials/ModuleCard.vue
+++ b/resources/scripts/admin/views/modules/partials/ModuleCard.vue
@@ -86,7 +86,6 @@
       <base-text
         :text="data.short_description"
         class="pt-4 text-gray-500 h-16 line-clamp-2"
-        :length="110"
       >
       </base-text>
       <div
diff --git a/resources/scripts/admin/views/payments/Index.vue b/resources/scripts/admin/views/payments/Index.vue
index 9c62f2ce..e28712fd 100644
--- a/resources/scripts/admin/views/payments/Index.vue
+++ b/resources/scripts/admin/views/payments/Index.vue
@@ -165,7 +165,7 @@
         </template>
 
         <template #cell-name="{ row }">
-          <BaseText :text="row.data.customer.name" :length="30" tag="span" />
+          <BaseText :text="row.data.customer.name" tag="span" />
         </template>
 
         <template #cell-payment_mode="{ row }">
diff --git a/resources/scripts/admin/views/payments/View.vue b/resources/scripts/admin/views/payments/View.vue
index 0b08827e..b33e2193 100644
--- a/resources/scripts/admin/views/payments/View.vue
+++ b/resources/scripts/admin/views/payments/View.vue
@@ -158,7 +158,6 @@
             <div class="flex-2">
               <BaseText
                 :text="payment?.customer?.name"
-                :length="30"
                 class="
                   pr-2
                   mb-2
diff --git a/resources/scripts/admin/views/recurring-invoices/Index.vue b/resources/scripts/admin/views/recurring-invoices/Index.vue
index 0e8420f9..371fd58a 100644
--- a/resources/scripts/admin/views/recurring-invoices/Index.vue
+++ b/resources/scripts/admin/views/recurring-invoices/Index.vue
@@ -201,7 +201,6 @@
           <router-link :to="{ path: `recurring-invoices/${row.data.id}/view` }">
             <BaseText
               :text="row.data.customer.name"
-              :length="30"
               tag="span"
               class="font-medium text-primary-500 flex flex-col"
             />
@@ -212,7 +211,6 @@
                   ? row.data.customer.contact_name
                   : ''
               "
-              :length="30"
               tag="span"
               class="text-xs text-gray-400"
             />
diff --git a/resources/scripts/admin/views/recurring-invoices/partials/RecurringInvoiceViewSidebar.vue b/resources/scripts/admin/views/recurring-invoices/partials/RecurringInvoiceViewSidebar.vue
index 8e37b5f1..3fb0e9f6 100644
--- a/resources/scripts/admin/views/recurring-invoices/partials/RecurringInvoiceViewSidebar.vue
+++ b/resources/scripts/admin/views/recurring-invoices/partials/RecurringInvoiceViewSidebar.vue
@@ -262,7 +262,6 @@ onSearched = debounce(onSearched, 500)
           <div class="flex-2">
             <BaseText
               :text="invoice.customer.name"
-              :length="30"
               class="
                 pr-2
                 mb-2
diff --git a/resources/scripts/components/base/BaseCustomerSelectPopup.vue b/resources/scripts/components/base/BaseCustomerSelectPopup.vue
index 2c16d7c3..d9885363 100644
--- a/resources/scripts/components/base/BaseCustomerSelectPopup.vue
+++ b/resources/scripts/components/base/BaseCustomerSelectPopup.vue
@@ -26,7 +26,6 @@
       <div class="flex relative justify-between mb-2">
         <BaseText
           :text="selectedCustomer.name"
-          :length="30"
           class="flex-1 text-base font-medium text-left text-gray-900"
         />
         <div class="flex">
@@ -308,7 +307,6 @@
                     <BaseText
                       v-if="customer.name"
                       :text="customer.name"
-                      :length="30"
                       class="
                         m-0
                         text-base
@@ -320,7 +318,6 @@
                     <BaseText
                       v-if="customer.contact_name"
                       :text="customer.contact_name"
-                      :length="30"
                       class="
                         m-0
                         text-sm
diff --git a/resources/scripts/components/base/BaseText.vue b/resources/scripts/components/base/BaseText.vue
index 72b71298..118641d6 100644
--- a/resources/scripts/components/base/BaseText.vue
+++ b/resources/scripts/components/base/BaseText.vue
@@ -1,9 +1,10 @@
 <template>
-  <BaseCustomTag :tag="tag" :title="text">
-    {{ displayText }}
-  </BaseCustomTag>
+  <div class="whitespace-normal">
+    <BaseCustomTag :tag="tag" :title="text" class="line-clamp-1">
+      {{ displayText }}
+    </BaseCustomTag>
+  </div>
 </template>
-
 <script setup>
 import { computed } from "vue"
 
@@ -20,12 +21,17 @@ const props = defineProps({
 
   length: {
     type: Number,
-    default: 0,
+    default: null,
   }
 })
 
-const displayText = computed(() => {
+const { text, length } = props;
+
+const displayText = computed(() => {
+  if (length) {
+    return text.length <= length ? text : `${text.substring(0, length)}...`;
+  }
+  return text;
+});
 
-  return props.text.length < props.length ?  props.text : `${props.text.substring(0 , props.length)}...`
-})
 </script>