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

Form validation, navbar improvements, logout functionality, order cancelling

Browse Source
This commit is contained in:
Patryk Binkowski
2024-07-03 09:36:40 +02:00
parent 673eb10b7b
commit 200242252c
8 changed files with 43 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/MainForm.vue
View File

@@ -6,6 +6,7 @@ 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'
const categoriesStore = useCategoriesStore();
const contractorsStore = useContractorsStore();
@@ -16,6 +17,7 @@ const { contractor, contractors } = storeToRefs(contractorsStore);
const { deliveryDate, uuid } = storeToRefs(ordersStore);
const { categories } = storeToRefs(categoriesStore);
const { showConfirmationModal, isDarkTheme } = storeToRefs(siteControlStore);
const showErrorNotification = ref<boolean>(false);
function createJSON(event: Event) {
event.preventDefault();
@@ -31,12 +33,16 @@ function createJSON(event: Event) {
for (let category of categories.value) {
for (let product of category.Towary) {
if(product.Quantity != null) {
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;
}
const productObject : OrderProduct = {
MZE_TwrId: product.Twr_TwrId,
MZE_TwrJm: product.ChosenOption,
MZE_TwrCena: product.ChosenOption == product.Twr_JMZ ? product.Twr_CenaZ : product.Twr_Cena,
MZE_TwrIlosc: product.Quantity.toString(),
MZE_TwrIlosc: product.Quantity,
MZE_TwrNazwa: product.Twr_Nazwa,
MZE_MZNID: undefined,
MZE_MZEID: undefined,
@@ -46,6 +52,11 @@ function createJSON(event: Event) {
}
}
}
if(json.MZamElem.length == 0) {
showErrorNotification.value=true;
return;
}
showErrorNotification.value=false;
axiosInstance.post('/zamowienie', JSON.stringify(json)).then( response => {
uuid.value = response.data.MZN_UUID;
@@ -90,6 +101,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="delete" @click.prevent="showErrorNotification = false"></button>
W formularzu znajdują się pola, które nie są liczbami, lub wszystkie pola są puste.
</div>
</div>
</div>
<div v-for="category in categories" :key="category.Kod">
@@ -105,7 +120,7 @@ function setConfirmationModal(event : Event) {
type="text"
placeholder="Kwota"
v-model="product.Twr_Cena"
v-bind:class="{ 'is-success has-background-light': product.Quantity != undefined && product.Quantity as unknown as string != '' }"
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))}"
/>
</div>
</div>
@@ -116,21 +131,22 @@ function setConfirmationModal(event : Event) {
type="text"
placeholder="Kwota"
v-model="product.Twr_CenaZ"
v-bind:class="{ 'is-success has-background-light': product.Quantity != undefined && product.Quantity as unknown as string != '' }"
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))
}"
/>
</div>
</div>
<div class="column">
<div class="field has-addons">
<p class="control">
<span class="select is-small" v-bind:class="{ 'is-success has-background-light': product.Quantity != undefined }">
<select v-model="product.ChosenOption" readonly>
<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))}">
<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-success': product.Quantity != undefined }">
<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))}">
</p>
</div>
</div>