components tag order added
This commit is contained in:
Bahadır Sofuoğlu
@@ -1,3 +1,128 @@
|
||||
<script setup>
|
||||
import { FilterMatchMode } from 'primevue/api';
|
||||
import { ref, onMounted, onBeforeMount } from 'vue';
|
||||
import ProductService from '@/layout/service/ProductService';
|
||||
import { useToast } from 'primevue/usetoast';
|
||||
|
||||
const toast = useToast();
|
||||
|
||||
const products = ref(null);
|
||||
const productDialog = ref(false);
|
||||
const deleteProductDialog = ref(false);
|
||||
const deleteProductsDialog = ref(false);
|
||||
const product = ref({});
|
||||
const selectedProducts = ref(null);
|
||||
const dt = ref(null);
|
||||
const filters = ref({});
|
||||
const submitted = ref(false);
|
||||
const statuses = ref([
|
||||
{ label: 'INSTOCK', value: 'instock' },
|
||||
{ label: 'LOWSTOCK', value: 'lowstock' },
|
||||
{ label: 'OUTOFSTOCK', value: 'outofstock' }
|
||||
]);
|
||||
|
||||
const productService = new ProductService();
|
||||
|
||||
onBeforeMount(() => {
|
||||
initFilters();
|
||||
});
|
||||
onMounted(() => {
|
||||
productService.getProducts().then((data) => (products.value = data));
|
||||
});
|
||||
const formatCurrency = (value) => {
|
||||
return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
|
||||
};
|
||||
|
||||
const openNew = () => {
|
||||
product.value = {};
|
||||
submitted.value = false;
|
||||
productDialog.value = true;
|
||||
};
|
||||
|
||||
const hideDialog = () => {
|
||||
productDialog.value = false;
|
||||
submitted.value = false;
|
||||
};
|
||||
|
||||
const saveProduct = () => {
|
||||
submitted.value = true;
|
||||
if (product.value.name.trim()) {
|
||||
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;
|
||||
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);
|
||||
toast.add({ severity: 'success', summary: 'Successful', detail: 'Product Created', life: 3000 });
|
||||
}
|
||||
productDialog.value = false;
|
||||
product.value = {};
|
||||
}
|
||||
};
|
||||
|
||||
const editProduct = (editProduct) => {
|
||||
product.value = { ...editProduct };
|
||||
console.log(product);
|
||||
productDialog.value = true;
|
||||
};
|
||||
|
||||
const confirmDeleteProduct = (editProduct) => {
|
||||
product.value = editProduct;
|
||||
deleteProductDialog.value = true;
|
||||
};
|
||||
|
||||
const 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) => {
|
||||
let index = -1;
|
||||
for (let i = 0; i < products.value.length; i++) {
|
||||
if (products.value[i].id === id) {
|
||||
index = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
return index;
|
||||
};
|
||||
|
||||
const createId = () => {
|
||||
let id = '';
|
||||
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
|
||||
for (let i = 0; i < 5; i++) {
|
||||
id += chars.charAt(Math.floor(Math.random() * chars.length));
|
||||
}
|
||||
return id;
|
||||
};
|
||||
|
||||
const exportCSV = () => {
|
||||
dt.value.exportCSV();
|
||||
};
|
||||
|
||||
const confirmDeleteSelected = () => {
|
||||
deleteProductsDialog.value = true;
|
||||
};
|
||||
const 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 initFilters = () => {
|
||||
filters.value = {
|
||||
global: { value: null, matchMode: FilterMatchMode.CONTAINS }
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
@@ -187,131 +312,6 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { FilterMatchMode } from 'primevue/api';
|
||||
import { ref, onMounted, onBeforeMount } from 'vue';
|
||||
import ProductService from '@/layout/service/ProductService';
|
||||
import { useToast } from 'primevue/usetoast';
|
||||
|
||||
const toast = useToast();
|
||||
|
||||
const products = ref(null);
|
||||
const productDialog = ref(false);
|
||||
const deleteProductDialog = ref(false);
|
||||
const deleteProductsDialog = ref(false);
|
||||
const product = ref({});
|
||||
const selectedProducts = ref(null);
|
||||
const dt = ref(null);
|
||||
const filters = ref({});
|
||||
const submitted = ref(false);
|
||||
const statuses = ref([
|
||||
{ label: 'INSTOCK', value: 'instock' },
|
||||
{ label: 'LOWSTOCK', value: 'lowstock' },
|
||||
{ label: 'OUTOFSTOCK', value: 'outofstock' }
|
||||
]);
|
||||
|
||||
const productService = new ProductService();
|
||||
|
||||
onBeforeMount(() => {
|
||||
initFilters();
|
||||
});
|
||||
onMounted(() => {
|
||||
productService.getProducts().then((data) => (products.value = data));
|
||||
});
|
||||
const formatCurrency = (value) => {
|
||||
return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
|
||||
};
|
||||
|
||||
const openNew = () => {
|
||||
product.value = {};
|
||||
submitted.value = false;
|
||||
productDialog.value = true;
|
||||
};
|
||||
|
||||
const hideDialog = () => {
|
||||
productDialog.value = false;
|
||||
submitted.value = false;
|
||||
};
|
||||
|
||||
const saveProduct = () => {
|
||||
submitted.value = true;
|
||||
if (product.value.name.trim()) {
|
||||
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;
|
||||
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);
|
||||
toast.add({ severity: 'success', summary: 'Successful', detail: 'Product Created', life: 3000 });
|
||||
}
|
||||
productDialog.value = false;
|
||||
product.value = {};
|
||||
}
|
||||
};
|
||||
|
||||
const editProduct = (editProduct) => {
|
||||
product.value = { ...editProduct };
|
||||
console.log(product);
|
||||
productDialog.value = true;
|
||||
};
|
||||
|
||||
const confirmDeleteProduct = (editProduct) => {
|
||||
product.value = editProduct;
|
||||
deleteProductDialog.value = true;
|
||||
};
|
||||
|
||||
const 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) => {
|
||||
let index = -1;
|
||||
for (let i = 0; i < products.value.length; i++) {
|
||||
if (products.value[i].id === id) {
|
||||
index = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
return index;
|
||||
};
|
||||
|
||||
const createId = () => {
|
||||
let id = '';
|
||||
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
|
||||
for (let i = 0; i < 5; i++) {
|
||||
id += chars.charAt(Math.floor(Math.random() * chars.length));
|
||||
}
|
||||
return id;
|
||||
};
|
||||
|
||||
const exportCSV = () => {
|
||||
dt.value.exportCSV();
|
||||
};
|
||||
|
||||
const confirmDeleteSelected = () => {
|
||||
deleteProductsDialog.value = true;
|
||||
};
|
||||
const 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 initFilters = () => {
|
||||
filters.value = {
|
||||
global: { value: null, matchMode: FilterMatchMode.CONTAINS }
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '@/assets/demo/styles/badges.scss';
|
||||
</style>
|
||||
|
||||
@@ -1,3 +1,19 @@
|
||||
<script setup>
|
||||
import { useLayoutService } from '@/layout/composables/layoutService';
|
||||
|
||||
const { isDarkTheme } = useLayoutService();
|
||||
|
||||
const smoothScroll = (id) => {
|
||||
document.querySelector(id).scrollIntoView({
|
||||
behavior: 'smooth'
|
||||
});
|
||||
};
|
||||
|
||||
const logoUrl = () => {
|
||||
return new URL(`/src/assets/layout/images/${isDarkTheme.value ? 'logo-white' : 'logo-dark'}.svg`, import.meta.url).href;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="surface-0 overflow-hidden">
|
||||
<div class="py-4 px-4 mx-0 md:mx-6 lg:mx-8 lg:px-8 flex align-items-center justify-content-between relative lg:static">
|
||||
@@ -361,22 +377,6 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useLayoutService } from '@/layout/composables/layoutService';
|
||||
|
||||
const { isDarkTheme } = useLayoutService();
|
||||
|
||||
const smoothScroll = (id) => {
|
||||
document.querySelector(id).scrollIntoView({
|
||||
behavior: 'smooth'
|
||||
});
|
||||
};
|
||||
|
||||
const logoUrl = () => {
|
||||
return new URL(`/src/assets/layout/images/${isDarkTheme.value ? 'logo-white' : 'logo-dark'}.svg`, import.meta.url).href;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#hero {
|
||||
background: linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), radial-gradient(77.36% 256.97% at 77.36% 57.52%, #eeefaf 0%, #c3e3fa 100%);
|
||||
|
||||
@@ -1,3 +1,37 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const customEvents = ref([
|
||||
{
|
||||
status: 'Ordered',
|
||||
date: '15/10/2020 10:30',
|
||||
icon: 'pi pi-shopping-cart',
|
||||
color: '#9C27B0',
|
||||
image: 'game-controller.jpg'
|
||||
},
|
||||
{
|
||||
status: 'Processing',
|
||||
date: '15/10/2020 14:00',
|
||||
icon: 'pi pi-cog',
|
||||
color: '#673AB7'
|
||||
},
|
||||
{
|
||||
status: 'Shipped',
|
||||
date: '15/10/2020 16:15',
|
||||
icon: 'pi pi-envelope',
|
||||
color: '#FF9800'
|
||||
},
|
||||
{
|
||||
status: 'Delivered',
|
||||
date: '16/10/2020 10:00',
|
||||
icon: 'pi pi-check',
|
||||
color: '#607D8B'
|
||||
}
|
||||
]);
|
||||
|
||||
const horizontalEvents = ref(['2020', '2021', '2022', '2023']);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="grid">
|
||||
<div class="col-6">
|
||||
@@ -98,40 +132,6 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const customEvents = ref([
|
||||
{
|
||||
status: 'Ordered',
|
||||
date: '15/10/2020 10:30',
|
||||
icon: 'pi pi-shopping-cart',
|
||||
color: '#9C27B0',
|
||||
image: 'game-controller.jpg'
|
||||
},
|
||||
{
|
||||
status: 'Processing',
|
||||
date: '15/10/2020 14:00',
|
||||
icon: 'pi pi-cog',
|
||||
color: '#673AB7'
|
||||
},
|
||||
{
|
||||
status: 'Shipped',
|
||||
date: '15/10/2020 16:15',
|
||||
icon: 'pi pi-envelope',
|
||||
color: '#FF9800'
|
||||
},
|
||||
{
|
||||
status: 'Delivered',
|
||||
date: '16/10/2020 10:00',
|
||||
icon: 'pi pi-check',
|
||||
color: '#607D8B'
|
||||
}
|
||||
]);
|
||||
|
||||
const horizontalEvents = ref(['2020', '2021', '2022', '2023']);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@media screen and (max-width: 960px) {
|
||||
::v-deep(.customized-timeline) {
|
||||
|
||||
@@ -1,3 +1,18 @@
|
||||
<script setup>
|
||||
import { useLayoutService } from '@/layout/composables/layoutService';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const { isDarkTheme } = useLayoutService();
|
||||
|
||||
const email = ref('');
|
||||
const password = ref('');
|
||||
const checked = ref(false);
|
||||
|
||||
const logoUrl = () => {
|
||||
return new URL(`/src/assets/layout/images/${isDarkTheme.value ? 'logo-white' : 'logo-dark'}.svg`, import.meta.url).href;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="surface-0 flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden">
|
||||
<div class="grid justify-content-center p-2 lg:p-0" style="min-width: 80%">
|
||||
@@ -34,21 +49,6 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useLayoutService } from '@/layout/composables/layoutService';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const { isDarkTheme } = useLayoutService();
|
||||
|
||||
const email = ref('');
|
||||
const password = ref('');
|
||||
const checked = ref(false);
|
||||
|
||||
const logoUrl = () => {
|
||||
return new URL(`/src/assets/layout/images/${isDarkTheme.value ? 'logo-white' : 'logo-dark'}.svg`, import.meta.url).href;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.pi-eye {
|
||||
transform: scale(1.6);
|
||||
|
||||
Reference in New Issue
Block a user