Gava/agenciapsilmno
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Demo updates

Browse Source
This commit is contained in:
tugcekucukoglu
2024-03-11 17:20:10 +03:00
parent 9f1d6f08e3
commit 184b795add
6 changed files with 94 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
public/demo/data/treetablenodes.json
View File

@@ -12,7 +12,7 @@
{
"key": "0-0",
"data":{
"name":"React",
"name":"Vue",
"size":"25kb",
"type":"Folder"
},
@@ -20,7 +20,7 @@
{
"key": "0-0-0",
"data":{
"name":"react.app",
"name":"vue.app",
"size":"10kb",
"type":"Application"
}

4
src/router/index.js
View File

@@ -1,8 +1,8 @@
import { createRouter, createWebHashHistory } from 'vue-router';
import { createRouter, createWebHistory } from 'vue-router';
import AppLayout from '@/layout/AppLayout.vue';
const router = createRouter({
history: createWebHashHistory(),
history: createWebHistory(),
routes: [
{
path: '/',

2
src/views/pages/auth/Login.vue
View File

@@ -9,7 +9,7 @@ const password = ref('');
const checked = ref(false);
const logoUrl = computed(() => {
return `layout/images/${layoutConfig.darkTheme.value ? 'logo-white' : 'logo-dark'}.svg`;
return `/layout/images/${layoutConfig.darkTheme.value ? 'logo-white' : 'logo-dark'}.svg`;
});
</script>

2
src/views/uikit/List.vue
View File

@@ -130,7 +130,7 @@ const getSeverity = (product) => {
<div class="p-4 border-1 surface-border surface-card border-round flex flex-column">
<div class="surface-50 flex justify-content-center border-round p-3">
<div class="relative mx-auto">
<img class="border-round w-full" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" style="max-width: 300px"/>
<img class="border-round w-full" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" style="max-width: 300px" />
<Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag>
</div>
</div>

6
src/views/uikit/Menu.vue
View File

@@ -446,10 +446,10 @@ const onContextRightClick = (event) => {
<h5>Menubar</h5>
<Menubar :model="nestedMenuitems">
<template #end>
<span class="p-input-icon-left">
<i class="pi pi-search" />
<IconField iconPosition="left">
<InputIcon class="pi pi-search" />
<InputText type="text" placeholder="Search" />
</span>
</IconField>
</template>
</Menubar>
</div>

130
src/views/uikit/Table.vue
View File

@@ -30,6 +30,37 @@ const representatives = ref([
const customerService = new CustomerService();
const productService = new ProductService();
const getBadgeSeverity = (inventoryStatus) => {
switch (inventoryStatus.toLowerCase()) {
case 'instock':
return 'success';
case 'lowstock':
return 'warning';
case 'outofstock':
return 'danger';
default:
return 'info';
}
};
const getSeverity = (status) => {
switch (status) {
case 'unqualified':
return 'danger';
case 'qualified':
return 'success';
case 'new':
return 'info';
case 'negotiation':
return 'warning';
case 'renewal':
return null;
}
};
onBeforeMount(() => {
productService.getProductsWithOrdersSmall().then((data) => (products.value = data));
customerService.getCustomersLarge().then((data) => {
@@ -53,7 +84,7 @@ const initFilters1 = () => {
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: [0, 50], matchMode: FilterMatchMode.BETWEEN },
activity: { value: [0, 100], matchMode: FilterMatchMode.BETWEEN },
verified: { value: null, matchMode: FilterMatchMode.EQUALS }
};
};
@@ -62,7 +93,7 @@ const clearFilter1 = () => {
initFilters1();
};
const expandAll = () => {
expandedRows.value = products.value.filter((p) => p.id);
expandedRows.value = products.value.reduce((acc, p) => (acc[p.id] = true) && acc, {});
};
const collapseAll = () => {
expandedRows.value = null;
@@ -100,7 +131,6 @@ const calculateCustomerTotal = (name) => {
<DataTable
:value="customer1"
:paginator="true"
class="p-datatable-gridlines"
:rows="10"
dataKey="id"
:rowHover="true"
@@ -108,17 +138,15 @@ const calculateCustomerTotal = (name) => {
filterDisplay="menu"
:loading="loading1"
:filters="filters1"
responsiveLayout="scroll"
:globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']"
showGridlines
>
<template #header>
<div class="flex justify-content-between flex-column sm:flex-row">
<Button type="button" icon="pi pi-filter-slash" label="Clear" class="p-button-outlined" @click="clearFilter1()" />
<Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter1()" />
<IconField iconPosition="left">
<InputIcon>
<i class="pi pi-search" />
</InputIcon>
<InputText v-model="filters1['global'].value" placeholder="Keyword Search" />
<InputIcon class="pi pi-search" />
<InputText v-model="filters1['global'].value" placeholder="Keyword Search" style="width: 100%" />
</IconField>
</div>
</template>
@@ -134,30 +162,34 @@ const calculateCustomerTotal = (name) => {
</Column>
<Column header="Country" filterField="country.name" style="min-width: 12rem">
<template #body="{ data }">
<img src="/demo/images/flag/flag_placeholder.png" :alt="data.country.name" :class="'flag flag-' + data.country.code" width="30" />
<span style="margin-left: 0.5em; vertical-align: middle" class="image-text">{{ data.country.name }}</span>
<div class="flex align-items-center gap-2">
<img alt="flag" src="/demo/images/flag/flag_placeholder.png" :class="`flag flag-${data.country.code}`" style="width: 24px" />
<span>{{ data.country.name }}</span>
</div>
</template>
<template #filter="{ filterModel }">
<InputText type="text" v-model="filterModel.value" class="p-column-filter" placeholder="Search by country" />
</template>
<template #filterclear="{ filterCallback }">
<Button type="button" icon="pi pi-times" @click="filterCallback()" class="p-button-secondary"></Button>
<Button type="button" icon="pi pi-times" @click="filterCallback()" severity="secondary"></Button>
</template>
<template #filterapply="{ filterCallback }">
<Button type="button" icon="pi pi-check" @click="filterCallback()" class="p-button-success"></Button>
<Button type="button" icon="pi pi-check" @click="filterCallback()" severity="success"></Button>
</template>
</Column>
<Column header="Agent" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
<template #body="{ data }">
<img :alt="data.representative.name" :src="'demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
<span style="margin-left: 0.5em; vertical-align: middle" class="image-text">{{ data.representative.name }}</span>
<div class="flex align-items-center gap-2">
<img :alt="data.representative.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${data.representative.image}`" style="width: 32px" />
<span>{{ data.representative.name }}</span>
</div>
</template>
<template #filter="{ filterModel }">
<div class="mb-3 text-bold">Agent Picker</div>
<MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
<template #option="slotProps">
<div class="p-multiselect-representative-option">
<img :alt="slotProps.option.name" :src="'demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
<img :alt="slotProps.option.name" :src="'/demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
<span style="margin-left: 0.5em; vertical-align: middle" class="image-text">{{ slotProps.option.name }}</span>
</div>
</template>
@@ -182,16 +214,16 @@ const calculateCustomerTotal = (name) => {
</Column>
<Column field="status" header="Status" :filterMenuStyle="{ width: '14rem' }" style="min-width: 12rem">
<template #body="{ data }">
<span :class="'customer-badge status-' + data.status">{{ data.status }}</span>
<Tag :severity="getSeverity(data.status)">{{ data.status.toUpperCase() }}</Tag>
</template>
<template #filter="{ filterModel }">
<Dropdown v-model="filterModel.value" :options="statuses" placeholder="Any" class="p-column-filter" :showClear="true">
<template #value="slotProps">
<span :class="'customer-badge status-' + slotProps.value" v-if="slotProps.value">{{ slotProps.value }}</span>
<Tag :severity="getSeverity(slotProps.value)" v-if="slotProps.value">{{ slotProps.value }} </Tag>
<span v-else>{{ slotProps.placeholder }}</span>
</template>
<template #option="slotProps">
<span :class="'customer-badge status-' + slotProps.option">{{ slotProps.option }}</span>
<Tag :severity="getSeverity(slotProps.option)">{{ slotProps.option.toUpperCase() }}</Tag>
</template>
</Dropdown>
</template>
@@ -226,29 +258,33 @@ const calculateCustomerTotal = (name) => {
<ToggleButton v-model="idFrozen" onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Unfreeze Id" offLabel="Freeze Id" style="width: 10rem" />
<DataTable :value="customer2" :scrollable="true" scrollHeight="400px" :loading="loading2" scrollDirection="both" class="mt-3">
<Column field="name" header="Name" :style="{ width: '150px' }" frozen></Column>
<Column field="id" header="Id" :style="{ width: '100px' }" :frozen="idFrozen"></Column>
<Column field="name" header="Name" style="min-width: 200px" frozen></Column>
<Column field="id" header="Id" style="min-width: 100px" :frozen="idFrozen"></Column>
<Column field="country.name" header="Country" :style="{ width: '200px' }">
<template #body="{ data }">
<img src="/demo/images/flag/flag_placeholder.png" :class="'flag flag-' + data.country.code" width="30" />
<span style="margin-left: 0.5em; vertical-align: middle" class="image-text">{{ data.country.name }}</span>
<div class="flex align-items-center gap-2">
<img alt="flag" src="/demo/images/flag/flag_placeholder.png" :class="`flag flag-${data.country.code}`" style="width: 24px" />
<span>{{ data.country.name }}</span>
</div>
</template>
</Column>
<Column field="date" header="Date" :style="{ width: '200px' }"></Column>
<Column field="company" header="Company" :style="{ width: '200px' }"></Column>
<Column field="status" header="Status" :style="{ width: '200px' }">
<Column field="date" header="Date" style="min-width: 200px"></Column>
<Column field="company" header="Company" style="min-width: 200px"></Column>
<Column field="status" header="Status" style="min-width: 200px">
<template #body="{ data }">
<span :class="'customer-badge status-' + data.status">{{ data.status }}</span>
<Tag :severity="getSeverity(data.status)">{{ data.status.toUpperCase() }}</Tag>
</template>
</Column>
<Column field="activity" header="Activity" :style="{ width: '200px' }"></Column>
<Column field="representative.name" header="Representative" :style="{ width: '200px' }">
<Column field="activity" header="Activity" style="min-width: 200px"></Column>
<Column field="representative.name" header="Representative" style="min-width: 200px">
<template #body="{ data }">
<img :alt="data.representative.name" :src="'demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
<span style="margin-left: 0.5em; vertical-align: middle" class="image-text">{{ data.representative.name }}</span>
<div class="flex align-items-center gap-2">
<img :alt="data.representative.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${data.representative.image}`" style="width: 32px" />
<span>{{ data.representative.name }}</span>
</div>
</template>
</Column>
<Column field="balance" header="Balance" :style="{ width: '150px' }" frozen alignFrozen="right">
<Column field="balance" header="Balance" style="min-width: 200px" frozen alignFrozen="right">
<template #body="{ data }">
<span class="text-bold">{{ formatCurrency(data.balance) }}</span>
</template>
@@ -260,14 +296,14 @@ const calculateCustomerTotal = (name) => {
<div class="col-12">
<div class="card">
<h5>Row Expand</h5>
<DataTable :value="products" v-model:expandedRows="expandedRows" dataKey="id" responsiveLayout="scroll">
<DataTable :value="products" v-model:expandedRows="expandedRows" dataKey="id" tableStyle="min-width: 60rem">
<template #header>
<div>
<Button icon="pi pi-plus" label="Expand All" @click="expandAll" class="mr-2 mb-2" />
<Button icon="pi pi-minus" label="Collapse All" @click="collapseAll" class="mb-2" />
</div>
</template>
<Column :expander="true" headerStyle="min-width: 3rem" />
<Column :expander="true" headerStyle="width: 3rem" />
<Column field="name" header="Name" :sortable="true">
<template #body="slotProps">
{{ slotProps.data.name }}
@@ -275,7 +311,7 @@ const calculateCustomerTotal = (name) => {
</Column>
<Column header="Image">
<template #body="slotProps">
<img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="shadow-2" width="100" />
<img :src="'/demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="shadow-2" width="100" />
</template>
</Column>
<Column field="price" header="Price" :sortable="true">
@@ -295,13 +331,13 @@ const calculateCustomerTotal = (name) => {
</Column>
<Column field="inventoryStatus" header="Status" :sortable="true">
<template #body="slotProps">
<span :class="'product-badge status-' + (slotProps.data.inventoryStatus ? slotProps.data.inventoryStatus.toLowerCase() : '')">{{ slotProps.data.inventoryStatus }}</span>
<Tag :severity="getBadgeSeverity(slotProps.data.inventoryStatus)">{{ slotProps.data.inventoryStatus }}</Tag>
</template>
</Column>
<template #expansion="slotProps">
<div class="p-3">
<h5>Orders for {{ slotProps.data.name }}</h5>
<DataTable :value="slotProps.data.orders" responsiveLayout="scroll">
<DataTable :value="slotProps.data.orders">
<Column field="id" header="Id" :sortable="true">
<template #body="slotProps">
{{ slotProps.data.id }}
@@ -346,21 +382,25 @@ const calculateCustomerTotal = (name) => {
<Column field="representative.name" header="Representative"></Column>
<Column field="name" header="Name" style="min-width: 200px"></Column>
<Column field="country" header="Country" style="min-width: 200px">
<template #body="slotProps">
<img src="/demo/images/flag/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" />
<span class="image-text ml-2">{{ slotProps.data.country.name }}</span>
<template #body="{ data }">
<div class="flex align-items-center gap-2">
<img alt="flag" src="/demo/images/flag/flag_placeholder.png" :class="`flag flag-${data.country.code}`" style="width: 24px" />
<span>{{ data.country.name }}</span>
</div>
</template>
</Column>
<Column field="company" header="Company" style="min-width: 200px"></Column>
<Column field="status" header="Status" style="min-width: 200px">
<template #body="slotProps">
<span :class="'customer-badge status-' + slotProps.data.status">{{ slotProps.data.status }}</span>
<Tag :severity="getSeverity(slotProps.data.status)">{{ slotProps.data.status.toUpperCase() }}</Tag>
</template>
</Column>
<Column field="date" header="Date" style="min-width: 200px"></Column>
<template #groupheader="slotProps">
<img :alt="slotProps.data.representative.name" :src="'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
<span class="image-text font-bold ml-2">{{ slotProps.data.representative.name }}</span>
<div class="flex align-items-center gap-2">
<img :alt="slotProps.data.representative.name" :src="'/demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
<span>{{ slotProps.data.representative.name }}</span>
</div>
</template>
<template #groupfooter="slotProps">
<td style="text-align: right" class="text-bold pr-6">Total Customers: {{ calculateCustomerTotal(slotProps.data.representative.name) }}</td>
@@ -372,11 +412,11 @@ const calculateCustomerTotal = (name) => {
</template>
<style scoped lang="scss">
::v-deep(.p-datatable-frozen-tbody) {
:deep(.p-datatable-frozen-tbody) {
font-weight: bold;
}
::v-deep(.p-datatable-scrollable .p-frozen-column) {
:deep(.p-datatable-scrollable .p-frozen-column) {
font-weight: bold;
}
</style>