From 9f1d6f08e34869cbead4165c282283b76b3dccf4 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Mon, 4 Mar 2024 19:06:15 +0300
Subject: [PATCH] Implement new features

---
 src/layout/AppLayout.vue       |  1 +
 src/views/pages/Crud.vue       | 58 +++++++++++++++++++---------------
 src/views/uikit/File.vue       |  1 -
 src/views/uikit/FloatLabel.vue | 36 ++++++++++-----------
 src/views/uikit/Input.vue      |  6 ++--
 src/views/uikit/Messages.vue   | 23 ++++++--------
 src/views/uikit/Overlay.vue    |  1 -
 7 files changed, 64 insertions(+), 62 deletions(-)

diff --git a/src/layout/AppLayout.vue b/src/layout/AppLayout.vue
index dd06324..6dc0c9c 100644
--- a/src/layout/AppLayout.vue
+++ b/src/layout/AppLayout.vue
@@ -72,6 +72,7 @@ const isOutsideClicked = (event) => {
         <app-config></app-config>
         <div class="layout-mask"></div>
     </div>
+    <Toast />
 </template>
 
 <style lang="scss" scoped></style>
diff --git a/src/views/pages/Crud.vue b/src/views/pages/Crud.vue
index 8e332b9..51dfbf6 100644
--- a/src/views/pages/Crud.vue
+++ b/src/views/pages/Crud.vue
@@ -23,6 +23,19 @@ const statuses = ref([
 
 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';
+    }
+};
+
 onBeforeMount(() => {
     initFilters();
 });
@@ -66,7 +79,6 @@ const saveProduct = () => {
 
 const editProduct = (editProduct) => {
     product.value = { ...editProduct };
-    console.log(product);
     productDialog.value = true;
 };
 
@@ -127,18 +139,17 @@ const initFilters = () => {
     <div class="grid">
         <div class="col-12">
             <div class="card">
-                <Toast />
                 <Toolbar class="mb-4">
                     <template v-slot:start>
                         <div class="my-2">
-                            <Button label="New" icon="pi pi-plus" class="p-button-success mr-2" @click="openNew" />
-                            <Button label="Delete" icon="pi pi-trash" class="p-button-danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
+                            <Button label="New" icon="pi pi-plus" class="mr-2" severity="success" @click="openNew" />
+                            <Button label="Delete" icon="pi pi-trash" severity="danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
                         </div>
                     </template>
 
                     <template v-slot:end>
                         <FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="Import" class="mr-2 inline-block" />
-                        <Button label="Export" icon="pi pi-upload" class="p-button-help" @click="exportCSV($event)" />
+                        <Button label="Export" icon="pi pi-upload" severity="help" @click="exportCSV($event)" />
                     </template>
                 </Toolbar>
 
@@ -153,16 +164,13 @@ const initFilters = () => {
                     paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
                     :rowsPerPageOptions="[5, 10, 25]"
                     currentPageReportTemplate="Showing {first} to {last} of {totalRecords} products"
-                    responsiveLayout="scroll"
                 >
                     <template #header>
                         <div class="flex flex-column md:flex-row md:justify-content-between md:align-items-center">
                             <h5 class="m-0">Manage Products</h5>
-                            <IconField iconPosition="left">
-                                <InputIcon>
-                                    <i class="pi pi-search" />
-                                </InputIcon>
-                                <InputText v-model="filters['global'].value" placeholder="Search..." />
+                            <IconField iconPosition="left" class="block mt-2 md:mt-0">
+                                <InputIcon class="pi pi-search" />
+                                <InputText class="w-full sm:w-auto" v-model="filters['global'].value" placeholder="Search..." />
                             </IconField>
                         </div>
                     </template>
@@ -183,7 +191,7 @@ const initFilters = () => {
                     <Column header="Image" headerStyle="width:14%; min-width:10rem;">
                         <template #body="slotProps">
                             <span class="p-column-title">Image</span>
-                            <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" headerStyle="width:14%; min-width:8rem;">
@@ -207,22 +215,22 @@ const initFilters = () => {
                     <Column field="inventoryStatus" header="Status" :sortable="true" headerStyle="width:14%; min-width:10rem;">
                         <template #body="slotProps">
                             <span class="p-column-title">Status</span>
-                            <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>
                     <Column headerStyle="min-width:10rem;">
                         <template #body="slotProps">
-                            <Button icon="pi pi-pencil" rounded severity="success" class="mr-2" @click="editProduct(slotProps.data)" />
-                            <Button icon="pi pi-trash" rounded severity="warning" class="mt-2" @click="confirmDeleteProduct(slotProps.data)" />
+                            <Button icon="pi pi-pencil" class="mr-2" severity="success" rounded @click="editProduct(slotProps.data)" />
+                            <Button icon="pi pi-trash" class="mt-2" severity="warning" rounded @click="confirmDeleteProduct(slotProps.data)" />
                         </template>
                     </Column>
                 </DataTable>
 
                 <Dialog v-model:visible="productDialog" :style="{ width: '450px' }" header="Product Details" :modal="true" class="p-fluid">
-                    <img :src="'demo/images/product/' + product.image" :alt="product.image" v-if="product.image" width="150" class="mt-0 mx-auto mb-5 block shadow-2" />
+                    <img :src="'/demo/images/product/' + product.image" :alt="product.image" v-if="product.image" width="150" class="mt-0 mx-auto mb-5 block shadow-2" />
                     <div class="field">
                         <label for="name">Name</label>
-                        <InputText id="name" v-model.trim="product.name" required="true" autofocus :class="{ 'p-invalid': submitted && !product.name }" />
+                        <InputText id="name" v-model.trim="product.name" required="true" autofocus :invalid="submitted && !product.name" />
                         <small class="p-invalid" v-if="submitted && !product.name">Name is required.</small>
                     </div>
                     <div class="field">
@@ -272,7 +280,7 @@ 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" :class="{ 'p-invalid': submitted && !product.price }" :required="true" />
+                            <InputNumber id="price" v-model="product.price" mode="currency" currency="USD" locale="en-US" :invalid="submitted && !product.price" :required="true" />
                             <small class="p-invalid" v-if="submitted && !product.price">Price is required.</small>
                         </div>
                         <div class="field col">
@@ -281,8 +289,8 @@ const initFilters = () => {
                         </div>
                     </div>
                     <template #footer>
-                        <Button label="Cancel" icon="pi pi-times" class="p-button-text" @click="hideDialog" />
-                        <Button label="Save" icon="pi pi-check" class="p-button-text" @click="saveProduct" />
+                        <Button label="Cancel" icon="pi pi-times" text="" @click="hideDialog" />
+                        <Button label="Save" icon="pi pi-check" text="" @click="saveProduct" />
                     </template>
                 </Dialog>
 
@@ -295,8 +303,8 @@ const initFilters = () => {
                         >
                     </div>
                     <template #footer>
-                        <Button label="No" icon="pi pi-times" class="p-button-text" @click="deleteProductDialog = false" />
-                        <Button label="Yes" icon="pi pi-check" class="p-button-text" @click="deleteProduct" />
+                        <Button label="No" icon="pi pi-times" text @click="deleteProductDialog = false" />
+                        <Button label="Yes" icon="pi pi-check" text @click="deleteProduct" />
                     </template>
                 </Dialog>
 
@@ -306,13 +314,11 @@ const initFilters = () => {
                         <span v-if="product">Are you sure you want to delete the selected products?</span>
                     </div>
                     <template #footer>
-                        <Button label="No" icon="pi pi-times" class="p-button-text" @click="deleteProductsDialog = false" />
-                        <Button label="Yes" icon="pi pi-check" class="p-button-text" @click="deleteSelectedProducts" />
+                        <Button label="No" icon="pi pi-times" text @click="deleteProductsDialog = false" />
+                        <Button label="Yes" icon="pi pi-check" text @click="deleteSelectedProducts" />
                     </template>
                 </Dialog>
             </div>
         </div>
     </div>
 </template>
-
-<style scoped lang="scss"></style>
diff --git a/src/views/uikit/File.vue b/src/views/uikit/File.vue
index 9b6710c..0a6d1e1 100644
--- a/src/views/uikit/File.vue
+++ b/src/views/uikit/File.vue
@@ -19,6 +19,5 @@ const onUpload = () => {
                 <FileUpload mode="basic" name="demo[]" accept="image/*" :maxFileSize="1000000" @uploader="onUpload" customUpload />
             </div>
         </div>
-        <Toast />
     </div>
 </template>
diff --git a/src/views/uikit/FloatLabel.vue b/src/views/uikit/FloatLabel.vue
index a4cfef5..144c183 100644
--- a/src/views/uikit/FloatLabel.vue
+++ b/src/views/uikit/FloatLabel.vue
@@ -46,40 +46,40 @@ const searchCountry = (event) => {
         <h5>Float Label</h5>
         <div class="grid p-fluid mt-3">
             <div class="field col-12 md:col-4">
-                <span class="p-float-label">
+                <FloatLabel>
                     <InputText type="text" id="inputtext" v-model="value1" />
                     <label for="inputtext">InputText</label>
-                </span>
+                </FloatLabel>
             </div>
             <div class="field col-12 md:col-4">
-                <span class="p-float-label">
+                <FloatLabel>
                     <AutoComplete id="autocomplete" v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name"></AutoComplete>
                     <label for="autocomplete">AutoComplete</label>
-                </span>
+                </FloatLabel>
             </div>
             <div class="field col-12 md:col-4">
-                <span class="p-float-label">
+                <FloatLabel>
                     <Calendar inputId="calendar" v-model="value3"></Calendar>
                     <label for="calendar">Calendar</label>
-                </span>
+                </FloatLabel>
             </div>
             <div class="field col-12 md:col-4">
-                <span class="p-float-label">
+                <FloatLabel>
                     <Chips inputId="chips" v-model="value4"></Chips>
                     <label for="chips">Chips</label>
-                </span>
+                </FloatLabel>
             </div>
             <div class="field col-12 md:col-4">
-                <span class="p-float-label">
+                <FloatLabel>
                     <InputMask id="inputmask" mask="99/99/9999" v-model="value5"></InputMask>
                     <label for="inputmask">InputMask</label>
-                </span>
+                </FloatLabel>
             </div>
             <div class="field col-12 md:col-4">
-                <span class="p-float-label">
+                <FloatLabel>
                     <InputNumber id="inputnumber" v-model="value6"></InputNumber>
                     <label for="inputnumber">InputNumber</label>
-                </span>
+                </FloatLabel>
             </div>
             <div class="field col-12 md:col-4">
                 <InputGroup>
@@ -93,22 +93,22 @@ const searchCountry = (event) => {
                 </InputGroup>
             </div>
             <div class="field col-12 md:col-4">
-                <span class="p-float-label">
+                <FloatLabel>
                     <Dropdown id="dropdown" :options="cities" v-model="value8" optionLabel="name"></Dropdown>
                     <label for="dropdown">Dropdown</label>
-                </span>
+                </FloatLabel>
             </div>
             <div class="field col-12 md:col-4">
-                <span class="p-float-label">
+                <FloatLabel>
                     <MultiSelect id="multiselect" :options="cities" v-model="value9" optionLabel="name" :filter="false"></MultiSelect>
                     <label for="multiselect">MultiSelect</label>
-                </span>
+                </FloatLabel>
             </div>
             <div class="field col-12 md:col-4">
-                <span class="p-float-label">
+                <FloatLabel>
                     <Textarea inputId="textarea" rows="3" cols="30" v-model="value10"></Textarea>
                     <label for="textarea">Textarea</label>
-                </span>
+                </FloatLabel>
             </div>
         </div>
     </div>
diff --git a/src/views/uikit/Input.vue b/src/views/uikit/Input.vue
index 56eae3c..30b0cdb 100644
--- a/src/views/uikit/Input.vue
+++ b/src/views/uikit/Input.vue
@@ -88,7 +88,7 @@ const searchCountry = (event) => {
                         <InputText type="text" placeholder="Disabled" :disabled="true"></InputText>
                     </div>
                     <div class="col-12 mb-2 lg:col-4 lg:mb-0">
-                        <InputText type="text" placeholder="Invalid" class="p-invalid" />
+                        <InputText type="text" placeholder="Invalid" invalid />
                     </div>
                 </div>
 
@@ -109,10 +109,10 @@ const searchCountry = (event) => {
                 </div>
 
                 <h5>Float Label</h5>
-                <span class="p-float-label">
+                <FloatLabel>
                     <InputText id="username" type="text" v-model="floatValue" />
                     <label for="username">Username</label>
-                </span>
+                </FloatLabel>
 
                 <h5>Textarea</h5>
                 <Textarea placeholder="Your Message" :autoResize="true" rows="3" cols="30" />
diff --git a/src/views/uikit/Messages.vue b/src/views/uikit/Messages.vue
index 9ad7b93..c30fe3f 100644
--- a/src/views/uikit/Messages.vue
+++ b/src/views/uikit/Messages.vue
@@ -42,23 +42,20 @@ const showError = () => {
         <div class="col-12 lg:col-6">
             <div class="card">
                 <h5>Toast</h5>
-
-                <Toast />
-                <Button @click="showSuccess()" label="Success" class="p-button-success mr-2" />
-                <Button @click="showInfo()" label="Info" class="p-button-info mr-2" />
-                <Button @click="showWarn()" label="Warn" class="p-button-warning mr-2" />
-                <Button @click="showError()" label="Error" class="p-button-danger mr-2" />
+                <Button @click="showSuccess()" label="Success" class="mr-2" severity="success" />
+                <Button @click="showInfo()" label="Info" class="mr-2" severity="info" />
+                <Button @click="showWarn()" label="Warn" class="mr-2" severity="warning" />
+                <Button @click="showError()" label="Error" class="mr-2" severity="danger" />
             </div>
         </div>
 
         <div class="col-12 lg:col-6">
             <div class="card">
                 <h5>Messages</h5>
-
-                <Button label="Success" @click="addMessage('success')" class="p-button-success mr-2" />
-                <Button label="Info" @click="addMessage('info')" class="p-button-info mr-2" />
-                <Button label="Warn" @click="addMessage('warn')" class="p-button-warning mr-2" />
-                <Button label="Error" @click="addMessage('error')" class="p-button-danger mr-2" />
+                <Button label="Success" @click="addMessage('success')" class="mr-2" severity="success" />
+                <Button label="Info" @click="addMessage('info')" class="mr-2" severity="info" />
+                <Button label="Warn" @click="addMessage('warn')" class="mr-2" severity="warning" />
+                <Button label="Error" @click="addMessage('error')" class="mr-2" severity="danger" />
 
                 <transition-group name="p-message" tag="div">
                     <Message v-for="msg of message" :severity="msg.severity" :key="msg.content">{{ msg.content }}</Message>
@@ -72,14 +69,14 @@ const showError = () => {
                 <div class="field grid">
                     <label for="username1" class="col-fixed w-9rem">Username</label>
                     <div class="col">
-                        <InputText id="username1" v-model="username" :required="true" class="p-invalid mr-2"></InputText>
+                        <InputText id="username1" v-model="username" :required="true" invalid class="mr-2"></InputText>
                         <InlineMessage>Username is required</InlineMessage>
                     </div>
                 </div>
                 <div class="field grid">
                     <label for="email" class="col-fixed w-9rem">Email</label>
                     <div class="col">
-                        <InputText id="email" v-model="email" :required="true" class="p-invalid mr-2"></InputText>
+                        <InputText id="email" v-model="email" :required="true" invalid class="mr-2"></InputText>
                         <InlineMessage />
                     </div>
                 </div>
diff --git a/src/views/uikit/Overlay.vue b/src/views/uikit/Overlay.vue
index c0b20b7..ec715ba 100644
--- a/src/views/uikit/Overlay.vue
+++ b/src/views/uikit/Overlay.vue
@@ -179,7 +179,6 @@ const confirm = (event) => {
             <div class="card">
                 <h5>ConfirmPopup</h5>
                 <ConfirmPopup></ConfirmPopup>
-                <Toast />
                 <Button ref="popup" @click="confirm($event)" icon="pi pi-check" label="Confirm" class="mr-2"></Button>
             </div>
         </div>