Merge branch 'overlap-page' into 'master'

fix : overlap page in view and index pages

See merge request mohit.panjvani/crater-web!1299

resources/scripts/components/base/BaseCustomerSelectPopup.vue

@@ -23,9 +23,11 @@
       @click.stop
     >
       <div class="flex relative justify-between mb-2">
-        <label class="flex-1 text-base font-medium text-left text-gray-900">
+        <BaseText
-          {{ selectedCustomer.name }}
+          :text="selectedCustomer.name"
-        </label>
+          :length="30"
+          class="flex-1 text-base font-medium text-left text-gray-900"
+        />
         <div class="flex">
           <a
             class="
@@ -302,8 +304,10 @@
                   </span>
 
                   <div class="flex flex-col justify-center text-left">
-                    <label
+                    <BaseText
                       v-if="customer.name"
+                      :text="customer.name"
+                      :length="30"
                       class="
                         m-0
                         text-base
@@ -311,12 +315,11 @@
                         leading-tight
                         cursor-pointer
                       "
-                    >
+                    />
-                      {{ customer.name }}
+                    <BaseText
-                    </label>
-
-                    <label
                       v-if="customer.contact_name"
+                      :text="customer.contact_name"
+                      :length="30"
                       class="
                         m-0
                         text-sm
@@ -324,9 +327,7 @@
                         text-gray-400
                         cursor-pointer
                       "
-                    >
+                    />
-                      {{ customer.contact_name }}
-                    </label>
                   </div>
                 </li>
                 <div

resources/scripts/components/base/BaseText.vue

@@ -0,0 +1,31 @@
+<template>
+  <BaseCustomTag :tag="tag" :title="text">
+    {{ displayText }}
+  </BaseCustomTag>
+</template>
+
+<script setup>
+import { computed } from "vue"
+
+const props = defineProps({
+  tag: {
+    type: String,
+    default: 'div',
+  },
+
+  text: {
+    type: String,
+    default: '',
+  },
+
+  length: {
+    type: Number,
+    default: 0,
+  }
+})
+
+const displayText = computed(() => {
+
+  return props.text.length < props.length ?  props.text : `${props.text.substring(0 , props.length)}...`
+})
+</script>

resources/scripts/views/customers/Index.vue

@@ -149,14 +149,19 @@
         </template>
 
         <template #cell-name="{ row }">
-          <router-link
+          <router-link :to="{ path: `customers/${row.data.id}/view` }">
-            :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"
-          >
+            />
-            {{ row.data.name }}
+            <BaseText
-            <span class="text-xs text-gray-400">
+              :text="row.data.contact_name ? row.data.contact_name : ''"
-              {{ row.data.contact_name ? row.data.contact_name : '' }}</span
+              :length="30"
-            >
+              tag="span"
+              class="text-xs text-gray-400"
+            />
           </router-link>
         </template>
 

resources/scripts/views/customers/partials/CustomerViewSidebar.vue

@@ -131,7 +131,9 @@
           style="border-top: 1px solid rgba(185, 193, 209, 0.41)"
         >
           <div>
-            <div
+            <BaseText
+              :text="customer.name"
+              :length="30"
               class="
                 pr-2
                 text-sm
@@ -142,11 +144,12 @@
                 capitalize
                 truncate
               "
-            >
+            />
-              {{ customer.name }}
+            
-            </div>
+            <BaseText
-            <div
               v-if="customer.contact_name"
+              :text="customer.contact_name"
+              :length="30"
               class="
                 mt-1
                 text-xs
@@ -155,9 +158,7 @@
                 leading-5
                 text-gray-600
               "
-            >
+            />
-              {{ customer.contact_name }}
-            </div>
           </div>
           <div class="flex-1 font-bold text-right whitespace-nowrap">
             <BaseFormatMoney

resources/scripts/views/estimates/Index.vue

@@ -197,9 +197,7 @@
         </template>
 
         <template #cell-name="{ row }">
-          <div>
+          <BaseText :text="row.data.customer.name" :length="30" />
-            {{ row.data.customer.name }}
-          </div>
         </template>
 
         <template #cell-status="{ row }">

resources/scripts/views/estimates/View.vue

@@ -180,7 +180,9 @@
             style="border-bottom: 1px solid rgba(185, 193, 209, 0.41)"
           >
             <div class="flex-2">
-              <div
+              <BaseText
+                :text="estimate.customer.name"
+                :length="30"
                 class="
                   pr-2
                   mb-2
@@ -192,9 +194,7 @@
                   capitalize
                   truncate
                 "
-              >
+              />
-                {{ estimate.customer.name }}
-              </div>
               
               <div
                 class="

resources/scripts/views/expenses/Index.vue

@@ -186,7 +186,10 @@
         </template>
 
         <template #cell-user_name="{ row }">
-          {{ row.data.customer ? row.data.customer.name : '-' }}
+          <BaseText
+            :text="row.data.customer ? row.data.customer.name : '-'"
+            :length="30"
+          />
         </template>
 
         <template #cell-notes="{ row }">

resources/scripts/views/invoices/Index.vue

@@ -179,7 +179,10 @@
         </template>
 
         <template #cell-name="{ row }">
-          {{ row.data.customer.name }}
+         <BaseText
+            :text="row.data.customer.name"
+            :length="30"
+          />
         </template>
 
         <!-- Invoice Number  -->

resources/scripts/views/invoices/View.vue

@@ -381,7 +381,9 @@ onSearched = debounce(onSearched, 500)
             style="border-bottom: 1px solid rgba(185, 193, 209, 0.41)"
           >
             <div class="flex-2">
-              <div
+              <BaseText
+                :text="invoice.customer.name"
+                :length="30"
                 class="
                   pr-2
                   mb-2
@@ -393,9 +395,7 @@ onSearched = debounce(onSearched, 500)
                   capitalize
                   truncate
                 "
-              >
+              />
-                {{ invoice.customer.name }}
-              </div>
 
               <div
                 class="

resources/scripts/views/payments/Index.vue

@@ -161,9 +161,11 @@
         </template>
 
         <template #cell-name="{ row }">
-          <span>
+          <BaseText
-            {{ row.data.customer.name }}
+            :text="row.data.customer.name"
-          </span>
+            :length="30"
+            tag="span"
+          />
         </template>
 
         <template #cell-payment_mode="{ row }">

resources/scripts/views/payments/View.vue

@@ -162,7 +162,9 @@
             style="border-bottom: 1px solid rgba(185, 193, 209, 0.41)"
           >
             <div class="flex-2">
-              <div
+              <BaseText
+                :text="payment?.customer?.name "
+                :length="30"
                 class="
                   pr-2
                   mb-2
@@ -174,9 +176,7 @@
                   capitalize
                   truncate
                 "
-              >
+              />
-                {{ payment?.customer?.name }}
-              </div>
 
               <div
                 class="

resources/scripts/views/recurring-invoices/Index.vue

@@ -198,19 +198,24 @@
 
         <!-- Customer  -->
         <template #cell-customer="{ row }">
-          <router-link
+          <router-link :to="{ path: `recurring-invoices/${row.data.id}/view` }">
-            :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"
-          >
+            />
-            {{ row.data.customer.name }}
 
-            <span class="text-xs text-gray-400">
+            <BaseText
-              {{
+              :text="
                 row.data.customer.contact_name
                   ? row.data.customer.contact_name
                   : ''
-              }}
+              "
-            </span>
+              :length="30"
+              tag="span"
+              class="text-xs text-gray-400"
+            />
           </router-link>
         </template>
 

resources/scripts/views/recurring-invoices/partials/RecurringInvoiceViewSidebar.vue

@@ -238,7 +238,9 @@ onSearched = debounce(onSearched, 500)
           style="border-bottom: 1px solid rgba(185, 193, 209, 0.41)"
         >
           <div class="flex-2">
-            <div
+            <BaseText
+              :text="invoice.customer.name"
+              :length="30"
               class="
                 pr-2
                 mb-2
@@ -250,9 +252,7 @@ onSearched = debounce(onSearched, 500)
                 capitalize
                 truncate
               "
-            >
+            />
-              {{ invoice.customer.name }}
-            </div>
             
             <div
               class="