primevue-mirror/components/landing/ThemeSection.vue

159 lines
8.0 KiB
Vue
Raw Normal View History

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>