bartosz/mleczarnia-kuzma-zamowienia-ui
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Table summary of orders

Browse Source
This commit is contained in:
Patryk Binkowski
2024-07-12 17:11:52 +02:00
parent 200242252c
commit bbec759b08
16 changed files with 414 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

154
src/components/MainForm.vue
View File

@@ -1,12 +1,13 @@
<script setup lang="ts">
import VueDatePicker from '@vuepic/vue-datepicker';
import { axiosInstance, type Category, type Contractor, type OrderProduct } from '@/main'
import { axiosInstance, type Contractor, type OrderProduct } from '@/main'
import { useCategoriesStore } from '@/stores/categories.store'
import { useContractorsStore } from '@/stores/contractors.store'
import { useOrdersStore } from '@/stores/orders.store'
import { storeToRefs } from 'pinia'
import { useSiteControlStore } from '@/stores/siteControl.store'
import { ref } from 'vue'
import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
const categoriesStore = useCategoriesStore();
const contractorsStore = useContractorsStore();
@@ -17,26 +18,60 @@ const { contractor, contractors } = storeToRefs(contractorsStore);
const { deliveryDate, uuid } = storeToRefs(ordersStore);
const { categories } = storeToRefs(categoriesStore);
const { showConfirmationModal, isDarkTheme } = storeToRefs(siteControlStore);
const contractorSearch = ref<string>();
const filteredContractors = ref<Array<Contractor>>();
const showContractorsDropdown = ref<boolean>(false);
const contractorInput = ref(null);
const showErrorNotification = ref<boolean>(false);
const errorNotificationMessage = ref<string>();
const route = useRoute();
watch(contractor, (contractor) => {
if(contractor == undefined) {
contractorSearch.value = '';
} else {
contractorSearch.value = contractor.Knt_NipE + ', ' + contractor.Knt_Nazwa1 + contractor.Knt_Nazwa2 + contractor.Knt_Nazwa3;
}
}, { immediate: true });
function createJSON(event: Event) {
event.preventDefault();
console.log(route);
const json = {
MZN_UUID: uuid.value,
MZN_DataZam: new Date(Date.now()).toISOString(),
MZN_DataZam: new Date(Date.now()).toISOString().split('T')[0],
MZN_DataDos: deliveryDate.value != undefined ? deliveryDate.value.toISOString() : null,
MZN_PodID: contractor.value,
MZN_PodID: contractor.value?.Knt_KntId,
MZamElem: new Array<OrderProduct>
};
if(categories.value == undefined) return;
if(categories.value == undefined) {
showErrorNotification.value=true;
errorNotificationMessage.value = "Produkty nie zostały pobrane z bazy danych.";
return;
}
if(contractor.value == undefined) {
showErrorNotification.value=true;
errorNotificationMessage.value = "Klient nie został wybrany.";
return;
}
if(deliveryDate.value == undefined) {
showErrorNotification.value=true;
errorNotificationMessage.value = "Data dostawy nie została wybrana.";
return;
}
for (let category of categories.value) {
for (let product of category.Towary) {
if(product.Quantity != null && product.Quantity != '') {
if(isNaN(Number(product.Quantity)) || isNaN(Number(product.Twr_CenaZ)) || isNaN(Number(product.Twr_Cena))) {
showErrorNotification.value=true;
return;
errorNotificationMessage.value = "W zamówieniu znajdują się niepoprawne wartości.";
return;
}
const productObject : OrderProduct = {
MZE_TwrId: product.Twr_TwrId,
@@ -54,10 +89,12 @@ function createJSON(event: Event) {
}
if(json.MZamElem.length == 0) {
showErrorNotification.value=true;
errorNotificationMessage.value = "Zamówienie jest puste.";
return;
}
showErrorNotification.value=false;
console.log(json);
console.log(JSON.stringify(json));
axiosInstance.post('/zamowienie', JSON.stringify(json)).then( response => {
uuid.value = response.data.MZN_UUID;
});
@@ -65,12 +102,64 @@ function createJSON(event: Event) {
function setConfirmationModal(event : Event) {
event.preventDefault();
if(uuid.value == undefined) {
showErrorNotification.value=true;
errorNotificationMessage.value = "Zamówienie nie zostało jeszcze zapisane w bazie danych.";
return;
}
showConfirmationModal.value = true;
}
function cancelOrder(event: Event) {
event.preventDefault();
axiosInstance.delete('/zamowienie/' + uuid.value);
siteControlStore.newOrder();
}
function filterContractors() {
if (contractorSearch.value == "") {
contractor.value = undefined;
filteredContractors.value = contractors.value;
return;
}
filteredContractors.value = contractors.value.filter(
contractor =>
(contractor.Knt_NipE + contractor.Knt_Nazwa1 + contractor.Knt_Nazwa2 + contractor.Knt_Nazwa3).toLowerCase().includes(contractorSearch.value as string)
);
}
function toggleContractorsDropdown() {
if(!showContractorsDropdown.value) {
showContractorsDropdown.value = true;
if(contractorSearch.value == undefined || contractorSearch.value == '') {
filteredContractors.value = contractors.value;
}
}
}
function handleClickOutsideDropdown(event : Event) {
if(contractorInput.value != null && !contractorInput.value.contains(event.target)){
showContractorsDropdown.value = false;
}
}
function selectContractorFromDropdown(selectedContractor : Contractor) {
console.log(selectedContractor);
contractor.value = selectedContractor;
showContractorsDropdown.value = false;
}
onMounted(function (){
document.addEventListener('click', handleClickOutsideDropdown);
});
onBeforeUnmount( function () {
document.removeEventListener('click', handleClickOutsideDropdown);
})
</script>
<template>
<form class="box" @submit="createJSON">
<form class="box" @submit.prevent="createJSON">
<div class="mb-3">
<div class="box">
<div class="mb-3">
@@ -78,12 +167,29 @@ function setConfirmationModal(event : Event) {
<h1 class="subtitle is-5" v-if="uuid != undefined" ><b>{{ uuid }}</b></h1>
</div>
<div class="field mb-5">
<label class="label is-small">NIP</label>
<label class="label is-small">Klient</label>
<div class="field">
<div class="select is-small is-expanded" style="width: 100%">
<select v-model="contractor" class="is-expanded" style="width: 100%" required>
<option class="is-expanded" v-for="contractor in contractors" :key="contractor.Knt_KntId" :value="contractor">{{ contractor.Knt_NipE + ', ' + contractor.Knt_Miasto + ', ' + contractor.Knt_Nazwa1 + ' ' + contractor.Knt_Nazwa2 + ' ' + contractor.Knt_Nazwa3 }}</option>
</select>
<div ref="contractorInput" class="dropdown maxwidth"
v-bind:class="{'is-active': showContractorsDropdown == true}">
<div class="dropdown-trigger maxwidth" @click="toggleContractorsDropdown">
<div class="field maxwidth" @onclick.prevent="toggleContractorsDropdown">
<p class="control is-expanded has-icons-right is-small maxwidth" @onclick.prevent="toggleContractorsDropdown">
<input class="input is-small is-expanded maxwidth" type="search"
v-model="contractorSearch" @input="filterContractors" />
<span class="icon is-small is-right"><i class="fas fa-search"></i></span>
</p>
</div>
</div>
<div class="dropdown-menu is-clipped has-background-info-on-scheme-invert" id="dropdown-menu" role="menu" style="max-width: calc(100vw - 3rem); box-shadow: 0px 0px 6px -1px rgba(165, 165, 165, 0.8); border-radius: 10px 10px 10px 10px; overflow-x:auto">
<div class="dropdown-content" style="max-height: 50vh; overflow-x: auto">
<a v-if="filteredContractors != undefined && filteredContractors.length == 0" class="dropdown-item is-clipped">Brak wyników</a>
<a v-for="dropdownContractor in filteredContractors" v-bind:key="dropdownContractor.Knt_KntId"
class="dropdown-item is-clipped" @click = "selectContractorFromDropdown(dropdownContractor)"
v-bind:class = "{'has-background-info' : dropdownContractor == contractor}">
{{dropdownContractor.Knt_NipE + ', ' + dropdownContractor.Knt_Nazwa1 + dropdownContractor.Knt_Nazwa2 + dropdownContractor.Knt_Nazwa3}}
</a>
</div>
</div>
</div>
</div>
</div>
@@ -101,9 +207,10 @@ function setConfirmationModal(event : Event) {
</div>
<button class="button is-info mt-5">Zapisz</button>
<button class="button is-success mt-5 ml-3" @click="setConfirmationModal">Potwierdź</button>
<div v-if="showErrorNotification==true" class="notification is-danger is-light mt-5">
<button class="button is-danger mt-5 ml-3" @click="cancelOrder" v-bind:disabled="uuid == undefined">Anuluj</button>
<div v-if="showErrorNotification==true" class="notification is-danger is-bold mt-5">
<button class="delete" @click.prevent="showErrorNotification = false"></button>
W formularzu znajdują się pola, które nie są liczbami, lub wszystkie pola są puste.
{{ errorNotificationMessage }}
</div>
</div>
</div>
@@ -120,7 +227,7 @@ function setConfirmationModal(event : Event) {
type="text"
placeholder="Kwota"
v-model="product.Twr_Cena"
v-bind:class="{ 'is-danger has-background-danger-90': product.Twr_Cena != undefined && isNaN(Number(product.Twr_Cena)),'is-success has-background-success-85': product.Quantity != undefined && product.Quantity as unknown as string != '' && !isNaN(Number(product.Quantity))}"
v-bind:class="{ 'is-danger has-background-danger-soft': product.Twr_Cena != undefined && isNaN(Number(product.Twr_Cena)),'is-success has-background-success-soft': product.Quantity != undefined && product.Quantity as unknown as string != '' && !isNaN(Number(product.Quantity))}"
/>
</div>
</div>
@@ -131,7 +238,7 @@ function setConfirmationModal(event : Event) {
type="text"
placeholder="Kwota"
v-model="product.Twr_CenaZ"
v-bind:class="{ 'is-danger has-background-danger-90': product.Twr_CenaZ != undefined && isNaN(Number(product.Twr_CenaZ)), 'is-success has-background-success-90': product.Quantity != undefined && product.Quantity as unknown as string != '' && !isNaN(Number(product.Quantity))
v-bind:class="{ 'is-danger has-background-danger-soft': product.Twr_CenaZ != undefined && isNaN(Number(product.Twr_CenaZ)), 'is-success has-background-success-soft': product.Quantity != undefined && product.Quantity as unknown as string != '' && !isNaN(Number(product.Quantity))
}"
/>
</div>
@@ -139,14 +246,14 @@ function setConfirmationModal(event : Event) {
<div class="column">
<div class="field has-addons">
<p class="control">
<span class="select is-small" v-bind:class="{ 'is-danger has-background-danger-90': product.Quantity != undefined && isNaN(Number(product.Quantity)),'is-success has-background-success-90': product.Quantity != undefined && product.Quantity as unknown as string != '' && !isNaN(Number(product.Quantity))}">
<select v-model="product.ChosenOption" v-bind:class="{ 'is-danger has-background-danger-90': product.Quantity != undefined && isNaN(Number(product.Quantity)),'is-success has-background-success-90': product.Quantity != undefined && product.Quantity as unknown as string != '' && !isNaN(Number(product.Quantity))}">
<span class="select is-small" v-bind:class="{ 'is-danger': product.Quantity != undefined && isNaN(Number(product.Quantity)),'is-success': product.Quantity != undefined && product.Quantity as unknown as string != '' && !isNaN(Number(product.Quantity))}">
<select v-model="product.ChosenOption" v-bind:class="{ 'is-danger has-background-danger-soft': product.Quantity != undefined && isNaN(Number(product.Quantity)),'is-success has-background-success-soft': product.Quantity != undefined && product.Quantity as unknown as string != '' && !isNaN(Number(product.Quantity))}">
<option v-for="option in product.Options" :key="option">{{ option }}</option>
</select>
</span>
</p>
<p class="control is-expanded">
<input class="input is-small" type="text" placeholder="Ilość" v-model="product.Quantity" v-bind:class="{ 'is-danger has-background-danger-90': product.Quantity != undefined && isNaN(Number(product.Quantity)),'is-success has-background-success-90': product.Quantity != undefined && product.Quantity as unknown as string != '' && !isNaN(Number(product.Quantity))}">
<input class="input is-small" type="text" placeholder="Ilość" v-model="product.Quantity" v-bind:class="{ 'is-danger has-background-danger-soft': product.Quantity != undefined && isNaN(Number(product.Quantity)),'is-success has-background-success-soft': product.Quantity != undefined && product.Quantity as unknown as string != '' && !isNaN(Number(product.Quantity))}">
</p>
</div>
</div>
@@ -174,7 +281,8 @@ function setConfirmationModal(event : Event) {
--dp-menu-border-color: var(--bulma-border);
--dp-border-color-hover: var(--bulma-border);
--dp-border-color-focus: var(--bulma-border);
--dp-primary-color: var(--bulma-info-00);
--dp-primary-color: var(--bulma-info);
--dp-primary-text-color: #000;
}
}
@@ -188,4 +296,8 @@ function setConfirmationModal(event : Event) {
--dp-primary-text-color: #000;
}
}
.maxwidth {
width: 100%;
}
</style>