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

Implement new features

Browse Source
This commit is contained in:
tugcekucukoglu
2024-03-04 19:06:15 +03:00
parent 4c1770dd8c
commit 9f1d6f08e3
7 changed files with 64 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/layout/AppLayout.vue
View File

@@ -72,6 +72,7 @@ const isOutsideClicked = (event) => {
<app-config></app-config>
<div class="layout-mask"></div>
</div>
<Toast />
</template>
<style lang="scss" scoped></style>

58
src/views/pages/Crud.vue
View File

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

1
src/views/uikit/File.vue
View File

@@ -19,6 +19,5 @@ const onUpload = () => {
<FileUpload mode="basic" name="demo[]" accept="image/*" :maxFileSize="1000000" @uploader="onUpload" customUpload />
</div>
</div>
<Toast />
</div>
</template>

36
src/views/uikit/FloatLabel.vue
View File

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

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

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

23
src/views/uikit/Messages.vue
View File

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

1
src/views/uikit/Overlay.vue
View File

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