Crud fixed

src/assets/demo/styles/documentation.scss

@@ -1,14 +1,16 @@
 pre[class*='language-'] {
+    background-color: var(--surface-ground) !important;
+    border-radius: var(--border-radius);
+
     &:before,
     &:after {
         display: none !important;
     }
 
     code {
-        border-left: 6px solid var(--surface-border) !important;
+        border-left: 0px solid var(--surface-border) !important;
         box-shadow: none !important;
         background: var(--surface-ground) !important;
-        margin: 1em 0;
         color: var(--text-color);
         font-size: 14px;
     }
@@ -40,7 +42,7 @@ pre[class*='language-'] {
 }
 
 i:not([class~='pi']) {
-    background-color: transparent;
+    /* background-color: transparent; */
     color: #2196f3;
     font-family: Monaco, courier, monospace;
     font-style: normal;

src/layout/AppConfig.vue

@@ -55,13 +55,16 @@ const applyScale = () => {
 
         <template v-if="true">
             <h5>Menu Type</h5>
-            <div class="field-radiobutton">
+            <div class="flex">
-                <RadioButton name="menuMode" value="static" v-model="layoutConfig.menuMode.value" inputId="mode1"></RadioButton>
+                <div class="field-radiobutton flex-1">
-                <label for="mode1">Static</label>
+                    <RadioButton name="menuMode" value="static" v-model="layoutConfig.menuMode.value" inputId="mode1"></RadioButton>
-            </div>
+                    <label for="mode1">Static</label>
-            <div class="field-radiobutton">
+                </div>
-                <RadioButton name="menuMode" value="overlay" v-model="layoutConfig.menuMode.value" inputId="mode2"></RadioButton>
+
-                <label for="mode2">Overlay</label>
+                <div class="field-radiobutton flex-1">
+                    <RadioButton name="menuMode" value="overlay" v-model="layoutConfig.menuMode.value" inputId="mode2"></RadioButton>
+                    <label for="mode2">Overlay</label>
+                </div>
             </div>
         </template>
 

src/layout/AppTopbar.vue

@@ -1,11 +1,13 @@
 <script setup>
 import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
 import { useLayoutService } from '@/layout/composables/layoutService';
+import { useRouter } from 'vue-router';
 
 const { layoutConfig, onMenuToggle } = useLayoutService();
 
 const outsideClickListener = ref(null);
 const topbarMenuActive = ref(false);
+const router = useRouter();
 
 onMounted(() => {
     bindOutsideClickListener();
@@ -21,7 +23,10 @@ const logoUrl = () => {
 const onTopBarMenuButton = () => {
     topbarMenuActive.value = !topbarMenuActive.value;
 };
-
+const onSettingsClick = () => {
+    topbarMenuActive.value = false;
+    router.push('/documentation');
+};
 const topbarMenuClasses = computed(() => {
     return {
         'layout-topbar-menu-mobile-active': topbarMenuActive.value
@@ -70,18 +75,18 @@ const isOutsideClicked = (event) => {
         </button>
 
         <div class="layout-topbar-menu" :class="topbarMenuClasses">
-            <button class="p-link layout-topbar-button">
+            <button @click="onTopBarMenuButton()" class="p-link layout-topbar-button">
                 <i class="pi pi-calendar"></i>
                 <span>Calendar</span>
             </button>
-            <button class="p-link layout-topbar-button">
+            <button @click="onTopBarMenuButton()" class="p-link layout-topbar-button">
                 <i class="pi pi-user"></i>
                 <span>Profile</span>
             </button>
-            <router-link to="/documentation" class="p-link layout-topbar-button">
+            <button @click="onSettingsClick()" class="p-link layout-topbar-button">
                 <i class="pi pi-cog"></i>
                 <span>Settings</span>
-            </router-link>
+            </button>
         </div>
     </div>
 </template>

src/views/pages/Crud.vue

@@ -46,17 +46,17 @@ const hideDialog = () => {
 
 const saveProduct = () => {
     submitted.value = true;
-    if (product.value.name.trim()) {
+    if (product.value.name && product.value.name.trim() && product.value.price) {
         if (product.value.id) {
             product.value.inventoryStatus = product.value.inventoryStatus.value ? product.value.inventoryStatus.value : product.value.inventoryStatus;
-            product.value[findIndexById(product.value.id)] = product.value;
+            products.value[findIndexById(product.value.id)] = product.value;
             toast.add({ severity: 'success', summary: 'Successful', detail: 'Product Updated', life: 3000 });
         } else {
             product.value.id = createId();
             product.value.code = createId();
             product.value.image = 'product-placeholder.svg';
             product.value.inventoryStatus = product.value.inventoryStatus ? product.value.inventoryStatus.value : 'INSTOCK';
-            products.value.push(product);
+            products.value.push(product.value);
             toast.add({ severity: 'success', summary: 'Successful', detail: 'Product Created', life: 3000 });
         }
         productDialog.value = false;
@@ -193,7 +193,7 @@ const initFilters = () => {
                     <Column field="category" header="Category" :sortable="true" headerStyle="width:14%; min-width:10rem;">
                         <template #body="slotProps">
                             <span class="p-column-title">Category</span>
-                            {{ formatCurrency(slotProps.data.category) }}
+                            {{ slotProps.data.category }}
                         </template>
                     </Column>
                     <Column field="rating" header="Reviews" :sortable="true" headerStyle="width:14%; min-width:10rem;">
@@ -270,7 +270,8 @@ const initFilters = () => {
                     <div class="formgrid grid">
                         <div class="field col">
                             <label for="price">Price</label>
-                            <InputNumber id="price" v-model="product.price" mode="currency" currency="USD" locale="en-US" />
+                            <InputNumber id="price" v-model="product.price" mode="currency" currency="USD" locale="en-US" :class="{ 'p-invalid': submitted && !product.price }" :required="true" />
+                            <small class="p-invalid" v-if="submitted && !product.price">Price is required.</small>
                         </div>
                         <div class="field col">
                             <label for="quantity">Quantity</label>