mirror of
https://github.com/crater-invoice/crater.git
synced 2025-10-27 11:41:09 -04:00
fix : overlap page in view and index pages
This commit is contained in:
@ -302,8 +302,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 +313,11 @@
|
||||
leading-tight
|
||||
cursor-pointer
|
||||
"
|
||||
>
|
||||
{{ customer.name }}
|
||||
</label>
|
||||
|
||||
<label
|
||||
/>
|
||||
<BaseText
|
||||
v-if="customer.contact_name"
|
||||
:text="customer.contact_name"
|
||||
:length="30"
|
||||
class="
|
||||
m-0
|
||||
text-sm
|
||||
@ -324,9 +325,7 @@
|
||||
text-gray-400
|
||||
cursor-pointer
|
||||
"
|
||||
>
|
||||
{{ customer.contact_name }}
|
||||
</label>
|
||||
/>
|
||||
</div>
|
||||
</li>
|
||||
<div
|
||||
|
||||
31
resources/scripts/components/base/BaseText.vue
Normal file
31
resources/scripts/components/base/BaseText.vue
Normal file
@ -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>
|
||||
@ -151,12 +151,21 @@
|
||||
<template #cell-name="{ row }">
|
||||
<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"
|
||||
>
|
||||
{{ row.data.name }}
|
||||
<span class="text-xs text-gray-400">
|
||||
{{ row.data.contact_name ? row.data.contact_name : '' }}</span
|
||||
>
|
||||
</BaseText>
|
||||
<BaseText
|
||||
:text="row.data.contact_name ? row.data.contact_name : ''"
|
||||
:length="30"
|
||||
tag="span"
|
||||
class="text-xs text-gray-400"
|
||||
/>
|
||||
</router-link>
|
||||
</template>
|
||||
|
||||
|
||||
@ -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>
|
||||
<div
|
||||
/>
|
||||
|
||||
<BaseText
|
||||
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
|
||||
|
||||
@ -197,9 +197,10 @@
|
||||
</template>
|
||||
|
||||
<template #cell-name="{ row }">
|
||||
<div>
|
||||
{{ row.data.customer.name }}
|
||||
</div>
|
||||
<BaseText
|
||||
:text="row.data.customer.name"
|
||||
:length="30"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #cell-status="{ row }">
|
||||
|
||||
@ -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,10 +194,8 @@
|
||||
capitalize
|
||||
truncate
|
||||
"
|
||||
>
|
||||
{{ estimate.customer.name }}
|
||||
</div>
|
||||
|
||||
/>
|
||||
|
||||
<div
|
||||
class="
|
||||
mt-1
|
||||
|
||||
@ -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 }">
|
||||
|
||||
@ -179,7 +179,10 @@
|
||||
</template>
|
||||
|
||||
<template #cell-name="{ row }">
|
||||
{{ row.data.customer.name }}
|
||||
<BaseText
|
||||
:text="row.data.customer.name"
|
||||
:length="30"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<!-- Invoice Number -->
|
||||
|
||||
@ -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="
|
||||
|
||||
@ -161,9 +161,11 @@
|
||||
</template>
|
||||
|
||||
<template #cell-name="{ row }">
|
||||
<span>
|
||||
{{ row.data.customer.name }}
|
||||
</span>
|
||||
<BaseText
|
||||
:text="row.data.customer.name"
|
||||
:length="30"
|
||||
tag="span"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #cell-payment_mode="{ row }">
|
||||
|
||||
@ -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="
|
||||
|
||||
@ -196,17 +196,22 @@
|
||||
<template #cell-customer="{ row }">
|
||||
<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"
|
||||
>
|
||||
{{ row.data.customer.name }}
|
||||
|
||||
<span class="text-xs text-gray-400">
|
||||
{{
|
||||
row.data.customer.contact_name
|
||||
? row.data.customer.contact_name
|
||||
: ''
|
||||
}}
|
||||
</span>
|
||||
</BaseText>
|
||||
|
||||
<BaseText
|
||||
:text="row.data.customer.contact_name ? row.data.customer.contact_name: ''"
|
||||
:length="30"
|
||||
tag="span"
|
||||
class="text-xs text-gray-400"
|
||||
/>
|
||||
</router-link>
|
||||
</template>
|
||||
|
||||
|
||||
@ -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,10 +252,8 @@ onSearched = debounce(onSearched, 500)
|
||||
capitalize
|
||||
truncate
|
||||
"
|
||||
>
|
||||
{{ invoice.customer.name }}
|
||||
</div>
|
||||
|
||||
/>
|
||||
|
||||
<div
|
||||
class="
|
||||
mt-1
|
||||
|
||||
Reference in New Issue
Block a user