Refactor

public/demo/images/product/product-placeholder.svg

@@ -1,10 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="300px" height="200px" viewBox="0 0 300 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>Artboard</title>
-    <g id="Artboard" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <rect id="Rectangle" fill="#F8F9FA" x="0" y="0" width="300" height="200"></rect>
-        <g id="image" transform="translate(110.000000, 70.000000)" fill="#BABABC" fill-rule="nonzero">
-            <path d="M75,0 L5,0 C2.23857625,0 0,2.23857625 0,5 L0,55 C0,57.7614237 2.23857625,60 5,60 L75,60 C77.7614237,60 80,57.7614237 80,55 L80,5 C80,2.23857625 77.7614237,0 75,0 Z M20,10 C25.5228475,10 30,14.4771525 30,20 C30,25.5228475 25.5228475,30 20,30 C14.4771525,30 10,25.5228475 10,20 C10,14.4771525 14.4771525,10 20,10 Z M70,40 L70,50 L10,50 L10,40 L18.55,35.7 C19.4648753,35.2524957 20.5351247,35.2524957 21.45,35.7 L30,40 L53.65,21.1 C54.4866298,20.4991452 55.6133702,20.4991452 56.45,21.1 L70,30 L70,40 Z" id="Shape"></path>
-        </g>
-    </g>
-</svg>

src/layout/AppLayout.vue

@@ -26,7 +26,8 @@ const containerClass = computed(() => {
         'layout-mobile-active': layoutState.staticMenuMobileActive
     };
 });
-const bindOutsideClickListener = () => {
+
+function bindOutsideClickListener() {
     if (!outsideClickListener.value) {
         outsideClickListener.value = (event) => {
             if (isOutsideClicked(event)) {
@@ -35,19 +36,21 @@ const bindOutsideClickListener = () => {
         };
         document.addEventListener('click', outsideClickListener.value);
     }
-};
+}
-const unbindOutsideClickListener = () => {
+
+function unbindOutsideClickListener() {
     if (outsideClickListener.value) {
         document.removeEventListener('click', outsideClickListener);
         outsideClickListener.value = null;
     }
-};
+}
-const isOutsideClicked = (event) => {
+
+function isOutsideClicked(event) {
     const sidebarEl = document.querySelector('.layout-sidebar');
     const topbarEl = document.querySelector('.layout-menu-button');
 
     return !(sidebarEl.isSameNode(event.target) || sidebarEl.contains(event.target) || topbarEl.isSameNode(event.target) || topbarEl.contains(event.target));
-};
+}
 </script>
 
 <template>

src/layout/AppMenuItem.vue

@@ -43,7 +43,8 @@ watch(
         isActiveMenu.value = newVal === itemKey.value || newVal.startsWith(itemKey.value + '-');
     }
 );
-const itemClick = (event, item) => {
+
+function itemClick(event, item) {
     if (item.disabled) {
         event.preventDefault();
         return;
@@ -60,11 +61,11 @@ const itemClick = (event, item) => {
     const foundItemKey = item.items ? (isActiveMenu.value ? props.parentItemKey : itemKey) : itemKey.value;
 
     setActiveMenuItem(foundItemKey);
-};
+}
 
-const checkActiveRoute = (item) => {
+function checkActiveRoute(item) {
     return route.path === item.to;
-};
+}
 </script>
 
 <template>

src/views/Dashboard.vue

@@ -169,7 +169,7 @@ watch([getPrimary, getSurface, isDarkTheme], () => {
                 <DataTable :value="products" :rows="5" :paginator="true" responsiveLayout="scroll">
                     <Column style="width: 15%" header="Image">
                         <template #body="slotProps">
-                            <img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" width="50" class="shadow" />
+                            <img :src="`https://primefaces.org/cdn/primevue/images/product/${slotProps.data.image}`" :alt="slotProps.data.image" width="50" class="shadow" />
                         </template>
                     </Column>
                     <Column field="name" header="Name" :sortable="true" style="width: 35%"></Column>

src/views/pages/Crud.vue

@@ -26,20 +26,23 @@ const statuses = ref([
     { label: 'OUTOFSTOCK', value: 'outofstock' }
 ]);
 
-const formatCurrency = (value) => {
+function formatCurrency(value) {
     if (value) return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
     return;
-};
+}
-const openNew = () => {
+
+function openNew() {
     product.value = {};
     submitted.value = false;
     productDialog.value = true;
-};
+}
-const hideDialog = () => {
+
+function hideDialog() {
     productDialog.value = false;
     submitted.value = false;
-};
+}
-const saveProduct = () => {
+
+function saveProduct() {
     submitted.value = true;
 
     if (product?.value.name?.trim()) {
@@ -59,22 +62,26 @@ const saveProduct = () => {
         productDialog.value = false;
         product.value = {};
     }
-};
+}
-const editProduct = (prod) => {
+
+function editProduct(prod) {
     product.value = { ...prod };
     productDialog.value = true;
-};
+}
-const confirmDeleteProduct = (prod) => {
+
+function confirmDeleteProduct(prod) {
     product.value = prod;
     deleteProductDialog.value = true;
-};
+}
-const deleteProduct = () => {
+
+function deleteProduct() {
     products.value = products.value.filter((val) => val.id !== product.value.id);
     deleteProductDialog.value = false;
     product.value = {};
     toast.add({ severity: 'success', summary: 'Successful', detail: 'Product Deleted', life: 3000 });
-};
+}
-const findIndexById = (id) => {
+
+function findIndexById(id) {
     let index = -1;
     for (let i = 0; i < products.value.length; i++) {
         if (products.value[i].id === id) {
@@ -84,29 +91,33 @@ const findIndexById = (id) => {
     }
 
     return index;
-};
+}
-const createId = () => {
+
+function createId() {
     let id = '';
     var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
     for (var i = 0; i < 5; i++) {
         id += chars.charAt(Math.floor(Math.random() * chars.length));
     }
     return id;
-};
+}
-const exportCSV = () => {
+
+function exportCSV() {
     dt.value.exportCSV();
-};
+}
-const confirmDeleteSelected = () => {
+
+function confirmDeleteSelected() {
     deleteProductsDialog.value = true;
-};
+}
-const deleteSelectedProducts = () => {
+
+function deleteSelectedProducts() {
     products.value = products.value.filter((val) => !selectedProducts.value.includes(val));
     deleteProductsDialog.value = false;
     selectedProducts.value = null;
     toast.add({ severity: 'success', summary: 'Successful', detail: 'Products Deleted', life: 3000 });
-};
+}
 
-const getStatusLabel = (status) => {
+function getStatusLabel(status) {
     switch (status) {
         case 'INSTOCK':
             return 'success';
@@ -120,7 +131,7 @@ const getStatusLabel = (status) => {
         default:
             return null;
     }
-};
+}
 </script>
 
 <template>

src/views/pages/Landing.vue

@@ -1,10 +1,10 @@
 <script setup>
-const smoothScroll = (id) => {
+function smoothScroll(id) {
     document.body.click();
     document.querySelector(id).scrollIntoView({
         behavior: 'smooth'
     });
-};
+}
 </script>
 
 <template>

src/views/uikit/ButtonDoc.vue

@@ -21,10 +21,10 @@ const items = ref([
 
 const loading = ref([false, false, false]);
 
-const load = (index) => {
+function load(index) {
     loading.value[index] = true;
     setTimeout(() => (loading.value[index] = false), 1000);
-};
+}
 </script>
 
 <template>

src/views/uikit/ChartDoc.vue

@@ -18,7 +18,7 @@ onMounted(() => {
     setColorOptions();
 });
 
-const setColorOptions = () => {
+function setColorOptions() {
     const documentStyle = getComputedStyle(document.documentElement);
     const textColor = documentStyle.getPropertyValue('--text-color');
     const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
@@ -216,7 +216,7 @@ const setColorOptions = () => {
             }
         }
     };
-};
+}
 
 watch(
     [getPrimary, getSurface, isDarkTheme],

src/views/uikit/FileDoc.vue

@@ -5,13 +5,13 @@ import { ref } from 'vue';
 const toast = useToast();
 const fileupload = ref();
 
-const upload = () => {
+function upload() {
     fileupload.value.upload();
-};
+}
 
-const onUpload = () => {
+function onUpload() {
     toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
-};
+}
 </script>
 
 <template>

src/views/uikit/InputDoc.vue

@@ -58,7 +58,7 @@ onMounted(() => {
     NodeService.getTreeNodes().then((data) => (treeSelectNodes.value = data));
 });
 
-const searchCountry = (event) => {
+function searchCountry(event) {
     setTimeout(() => {
         if (!event.query.trim().length) {
             autoFilteredValue.value = [...autoValue.value];
@@ -68,7 +68,7 @@ const searchCountry = (event) => {
             });
         }
     }, 250);
-};
+}
 </script>
 
 <template>

src/views/uikit/ListDoc.vue

@@ -16,7 +16,7 @@ onMounted(() => {
     });
 });
 
-const getSeverity = (product) => {
+function getSeverity(product) {
     switch (product.inventoryStatus) {
         case 'INSTOCK':
             return 'success';
@@ -30,7 +30,7 @@ const getSeverity = (product) => {
         default:
             return null;
     }
-};
+}
 </script>
 
 <template>

src/views/uikit/MediaDoc.vue

@@ -46,7 +46,7 @@ onMounted(() => {
     PhotoService.getImages().then((data) => (images.value = data));
 });
 
-const getSeverity = (status) => {
+function getSeverity(status) {
     switch (status) {
         case 'INSTOCK':
             return 'success';
@@ -60,7 +60,7 @@ const getSeverity = (status) => {
         default:
             return null;
     }
-};
+}
 </script>
 
 <template>

src/views/uikit/MenuDoc.vue

@@ -412,13 +412,13 @@ const panelMenuitems = ref([
     }
 ]);
 
-const toggleMenu = (event) => {
+function toggleMenu(event) {
     menu.value.toggle(event);
-};
+}
 
-const onContextRightClick = (event) => {
+function onContextRightClick(event) {
     contextMenu.value.show(event);
-};
+}
 </script>
 
 <template>

src/views/uikit/MessagesDoc.vue

@@ -7,21 +7,21 @@ const message = ref([]);
 const username = ref(null);
 const email = ref(null);
 
-const showSuccess = () => {
+function showSuccess() {
     toast.add({ severity: 'success', summary: 'Success Message', detail: 'Message Detail', life: 3000 });
-};
+}
 
-const showInfo = () => {
+function showInfo() {
     toast.add({ severity: 'info', summary: 'Info Message', detail: 'Message Detail', life: 3000 });
-};
+}
 
-const showWarn = () => {
+function showWarn() {
     toast.add({ severity: 'warn', summary: 'Warn Message', detail: 'Message Detail', life: 3000 });
-};
+}
 
-const showError = () => {
+function showError() {
     toast.add({ severity: 'error', summary: 'Error Message', detail: 'Message Detail', life: 3000 });
-};
+}
 </script>
 
 <template>

src/views/uikit/MiscDoc.vue

@@ -4,7 +4,7 @@ import { onBeforeUnmount, onMounted, ref } from 'vue';
 const value = ref(0);
 let interval = null;
 
-const startProgress = () => {
+function startProgress() {
     interval = setInterval(() => {
         let newValue = value.value + Math.floor(Math.random() * 10) + 1;
         if (newValue >= 100) {
@@ -12,11 +12,12 @@ const startProgress = () => {
         }
         value.value = newValue;
     }, 2000);
-};
+}
-const endProgress = () => {
+
+function endProgress() {
     clearInterval(interval);
     interval = null;
-};
+}
 
 onMounted(() => {
     startProgress();

src/views/uikit/OverlayDoc.vue

@@ -24,36 +24,32 @@ onMounted(() => {
     ProductService.getProductsSmall().then((data) => (products.value = data));
 });
 
-const open = () => {
+function open() {
     display.value = true;
-};
+}
 
-const close = () => {
+function close() {
     display.value = false;
-};
+}
 
-const openConfirmation = () => {
+function openConfirmation() {
     displayConfirmation.value = true;
-};
+}
 
-const closeConfirmation = () => {
+function closeConfirmation() {
     displayConfirmation.value = false;
-};
+}
 
-const toggle = (event) => {
+function toggleDataTable(event) {
-    op.value.toggle(event);
-};
-
-const toggleDataTable = (event) => {
     op2.value.toggle(event);
-};
+}
 
-const onProductSelect = (event) => {
+function onProductSelect(event) {
     op.value.hide();
     toast.add({ severity: 'info', summary: 'Product Selected', detail: event.data.name, life: 3000 });
-};
+}
 
-const confirm = (event) => {
+function confirm(event) {
     confirmPopup.require({
         target: event.target,
         message: 'Are you sure you want to proceed?',
@@ -73,7 +69,7 @@ const confirm = (event) => {
             toast.add({ severity: 'info', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
         }
     });
-};
+}
 </script>
 
 <template>

src/views/uikit/PanelsDoc.vue

@@ -26,9 +26,9 @@ const cardMenu = ref([
 ]);
 const menuRef = ref(null);
 
-const toggle = () => {
+function toggle() {
     menuRef.value.toggle(event);
-};
+}
 </script>
 
 <template>