2022-09-06 13:53:29 +00:00
< template >
< section class = "landing-themes py-8" >
< div class = "section-header" > Themes < / div >
2023-10-18 09:07:08 +00:00
< p class = "section-detail" > Crafted on a design - agnostic infrastructure , choose from a vast amount of themes such as Material , Bootstrap , Tailwind , PrimeOne or develop your own . < / p >
2023-10-18 10:15:34 +00:00
< div class = "flex flex-wrap justify-content-center px-5" >
2024-01-18 03:51:37 +00:00
< button type = "button" : class = "['font-medium linkbox mr-3 mt-4', { active: theme && theme.startsWith('aura') }]" @ click = "changeTheme('aura', 'green')" > PrimeOne < / button >
2022-09-14 14:26:41 +00:00
< button type = "button" : class = "['font-medium linkbox mr-3 mt-4', { active: theme && theme.startsWith('md') }]" @ click = "changeTheme('md', 'indigo')" > Material < / button >
< button type = "button" : class = "['font-medium linkbox mr-3 mt-4', { active: theme && theme.startsWith('bootstrap4') }]" @ click = "changeTheme('bootstrap4', 'blue')" > Bootstrap < / button >
2022-09-06 13:53:29 +00:00
< / div >
2024-01-23 22:58:13 +00:00
< div class = "themes-main flex mt-7 justify-content-center px-5 lg:px-8" >
2022-09-06 13:53:29 +00:00
< div class = "box overflow-hidden z-1 p-5 table-container" >
2022-09-14 14:26:41 +00:00
< DataTable
2022-12-08 12:26:57 +00:00
v - model : selection = "selectedCustomers"
v - model : filters = "filters"
2022-09-14 14:26:41 +00:00
: value = "customers"
: paginator = "true"
: rows = "5"
dataKey = "id"
: rowHover = "true"
filterDisplay = "menu"
: loading = "loading"
2022-09-06 13:53:29 +00:00
paginatorTemplate = "FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
currentPageReportTemplate = "Showing {first} to {last} of {totalRecords} entries"
2022-09-14 14:26:41 +00:00
: globalFilterFields = "['name', 'country.name', 'representative.name', 'status']"
>
2022-09-06 13:53:29 +00:00
< template # header >
< div class = "flex flex-column sm:flex-row sm:justify-content-between sm:align-items-center" >
< h5 class = "m-0" > Customers < / h5 >
< span class = "p-input-icon-left mt-3 sm:mt-0 w-full sm:w-auto" >
< i class = "pi pi-search" / >
< InputText v -model = " filters [ ' global ' ] .value " placeholder = "Search" class = "w-full" / >
< / span >
< / div >
< / template >
2022-09-14 14:26:41 +00:00
< template # empty > No customers found . < / template >
< template # loading > Loading customers data . Please wait . < / template >
2022-09-06 13:53:29 +00:00
< Column selectionMode = "multiple" style = "width: 3rem" > < / Column >
< Column field = "name" header = "Name" sortable style = "min-width: 14rem" >
2022-09-14 14:26:41 +00:00
< template # body = "{ data }" >
{ { data . name } }
2022-09-06 13:53:29 +00:00
< / template >
< / Column >
< Column field = "country.name" header = "Country" sortable style = "min-width: 14rem" >
2022-09-14 14:26:41 +00:00
< template # body = "{ data }" >
2023-02-28 08:29:30 +00:00
< img alt = "flag" src = "https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" : class = "`mr-2 flag flag-${data.country.code}`" style = "width: 24px" / >
< span > { { data . country . name } } < / span >
2022-09-06 13:53:29 +00:00
< / template >
< / Column >
< Column header = "Agent" sortable sortField = "representative.name" style = "min-width: 14rem" >
2022-09-14 14:26:41 +00:00
< template # body = "{ data }" >
2023-03-08 08:35:24 +00:00
< div class = "flex align-items-center gap-2" >
< img :alt ="data.representative.name" : src = "'https://primefaces.org/cdn/primevue/images/avatar/' + data.representative.image" width = "32" / >
< span > { { data . representative . name } } < / span >
< / div >
2022-09-06 13:53:29 +00:00
< / template >
< / Column >
< Column field = "date" header = "Date" sortable dataType = "date" style = "min-width: 8rem" >
2022-09-14 14:26:41 +00:00
< template # body = "{ data }" >
{ { formatDate ( data . date ) } }
2022-09-06 13:53:29 +00:00
< / template >
< / Column >
< Column field = "balance" header = "Balance" sortable dataType = "numeric" style = "min-width: 8rem" >
2022-09-14 14:26:41 +00:00
< template # body = "{ data }" >
{ { formatCurrency ( data . balance ) } }
2022-09-06 13:53:29 +00:00
< / template >
< / Column >
< Column field = "status" header = "Status" sortable style = "min-width: 10rem" >
2022-09-14 14:26:41 +00:00
< template # body = "{ data }" >
2023-02-28 08:29:30 +00:00
< Tag :value ="data.status" :severity ="getSeverity(data.status)" class = "text-sm font-bold" / >
2022-09-06 13:53:29 +00:00
< / template >
< / Column >
< Column field = "activity" header = "Activity" sortable style = "min-width: 6rem" >
2022-09-14 14:26:41 +00:00
< template # body = "{ data }" >
2022-09-06 13:53:29 +00:00
< ProgressBar :value ="data.activity" :showValue ="false" style = "height: 7px" / >
< / template >
< / Column >
< Column headerStyle = "min-width: 4rem; text-align: center" bodyStyle = "text-align: center; overflow: visible" >
< template # body >
2023-03-03 12:15:20 +00:00
< Button type = "button" icon = "pi pi-cog" text > < / Button >
2022-09-06 13:53:29 +00:00
< / template >
< / Column >
< / DataTable >
< / div >
< / div >
< / section >
< / template >
< script >
2023-02-28 08:29:30 +00:00
import { CustomerService } from '@/service/CustomerService' ;
2022-09-14 14:26:41 +00:00
import { FilterMatchMode , FilterOperator } from 'primevue/api' ;
2022-09-06 13:53:29 +00:00
export default {
emits : [ 'table-theme-change' ] ,
props : {
theme : null
} ,
data ( ) {
return {
customers : null ,
selectedCustomers : null ,
filters : {
2022-09-14 14:26:41 +00:00
global : { value : null , matchMode : FilterMatchMode . CONTAINS } ,
name : { operator : FilterOperator . AND , constraints : [ { value : null , matchMode : FilterMatchMode . STARTS _WITH } ] } ,
'country.name' : { operator : FilterOperator . AND , constraints : [ { value : null , matchMode : FilterMatchMode . STARTS _WITH } ] } ,
representative : { value : null , matchMode : FilterMatchMode . IN } ,
date : { operator : FilterOperator . AND , constraints : [ { value : null , matchMode : FilterMatchMode . DATE _IS } ] } ,
balance : { operator : FilterOperator . AND , constraints : [ { value : null , matchMode : FilterMatchMode . EQUALS } ] } ,
status : { operator : FilterOperator . OR , constraints : [ { value : null , matchMode : FilterMatchMode . EQUALS } ] } ,
activity : { value : null , matchMode : FilterMatchMode . BETWEEN } ,
verified : { value : null , matchMode : FilterMatchMode . EQUALS }
2022-09-06 13:53:29 +00:00
} ,
loading : true
2022-09-14 14:26:41 +00:00
} ;
2022-09-06 13:53:29 +00:00
} ,
mounted ( ) {
2023-02-28 08:29:30 +00:00
CustomerService . getCustomersLarge ( ) . then ( ( data ) => {
2022-09-06 13:53:29 +00:00
this . customers = data ;
2022-09-14 14:26:41 +00:00
this . customers . forEach ( ( customer ) => ( customer . date = new Date ( customer . date ) ) ) ;
2022-09-06 13:53:29 +00:00
this . loading = false ;
} ) ;
} ,
methods : {
changeTheme ( name , color ) {
let newTheme = name + '-' + ( this . $appState . darkTheme ? 'dark' : 'light' ) + '-' + color ;
2022-12-08 12:26:57 +00:00
2022-09-06 13:53:29 +00:00
this . $emit ( 'table-theme-change' , newTheme ) ;
} ,
formatDate ( value ) {
return value . toLocaleDateString ( 'en-US' , {
day : '2-digit' ,
month : '2-digit' ,
2022-09-14 14:26:41 +00:00
year : 'numeric'
2022-09-06 13:53:29 +00:00
} ) ;
} ,
formatCurrency ( value ) {
2022-09-14 14:26:41 +00:00
return value . toLocaleString ( 'en-US' , { style : 'currency' , currency : 'USD' } ) ;
2023-02-28 08:29:30 +00:00
} ,
getSeverity ( status ) {
switch ( status ) {
case 'unqualified' :
return 'danger' ;
case 'qualified' :
return 'success' ;
case 'new' :
return 'info' ;
case 'negotiation' :
return 'warning' ;
case 'renewal' :
return null ;
}
2022-09-06 13:53:29 +00:00
}
}
2022-09-14 14:26:41 +00:00
} ;
< / script >