Demo updates

public/demo/data/treetablenodes.json

@@ -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"
                             }

src/router/index.js

@@ -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: '/',

src/views/pages/auth/Login.vue

@@ -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>
 

src/views/uikit/List.vue

@@ -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>

src/views/uikit/Menu.vue

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

src/views/uikit/Table.vue

@@ -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>
+                                <InputIcon class="pi pi-search" />
-                                    <i class="pi pi-search" />
+                                <InputText v-model="filters1['global'].value" placeholder="Keyword Search" style="width: 100%" />
-                                </InputIcon>
-                                <InputText v-model="filters1['global'].value" placeholder="Keyword Search" />
                             </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" />
+                            <div class="flex align-items-center gap-2">
-                            <span style="margin-left: 0.5em; vertical-align: middle" class="image-text">{{ data.country.name }}</span>
+                                <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" />
+                            <div class="flex align-items-center gap-2">
-                            <span style="margin-left: 0.5em; vertical-align: middle" class="image-text">{{ data.representative.name }}</span>
+                                <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="name" header="Name" style="min-width: 200px" frozen></Column>
-                    <Column field="id" header="Id" :style="{ width: '100px' }" :frozen="idFrozen"></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" />
+                            <div class="flex align-items-center gap-2">
-                            <span style="margin-left: 0.5em; vertical-align: middle" class="image-text">{{ data.country.name }}</span>
+                                <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="date" header="Date" style="min-width: 200px"></Column>
-                    <Column field="company" header="Company" :style="{ width: '200px' }"></Column>
+                    <Column field="company" header="Company" style="min-width: 200px"></Column>
-                    <Column field="status" header="Status" :style="{ width: '200px' }">
+                    <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="activity" header="Activity" style="min-width: 200px"></Column>
-                    <Column field="representative.name" header="Representative" :style="{ width: '200px' }">
+                    <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" />
+                            <div class="flex align-items-center gap-2">
-                            <span style="margin-left: 0.5em; vertical-align: middle" class="image-text">{{ data.representative.name }}</span>
+                                <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">
+                        <template #body="{ data }">
-                            <img src="/demo/images/flag/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" />
+                            <div class="flex align-items-center gap-2">
-                            <span class="image-text ml-2">{{ slotProps.data.country.name }}</span>
+                                <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" />
+                        <div class="flex align-items-center gap-2">
-                        <span class="image-text font-bold ml-2">{{ slotProps.data.representative.name }}</span>
+                            <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>