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

4
src/components/ConfirmedForm.vue
View File

@@ -4,6 +4,7 @@ import { useOrdersStore } from '@/stores/orders.store'
import { storeToRefs } from 'pinia'
import { useCategoriesStore } from '@/stores/categories.store'
import { useContractorsStore } from '@/stores/contractors.store'
import { axiosInstance } from '@/main'
const ordersStore = useOrdersStore();
const categoriesStore = useCategoriesStore();
@@ -17,6 +18,7 @@ const { contractor } = storeToRefs(contractorsStore);
function cancelOrder(event: Event) {
event.preventDefault();
axiosInstance.delete('/zamowienie/' + uuid.value);
}
</script>
@@ -61,7 +63,7 @@ function cancelOrder(event: Event) {
hide-input-icon/>
</div>
</div>
<button class="button is-primary" @click="cancelOrder">Anuluj zamówienie</button>
<button class="button is-danger" @click="cancelOrder">Anuluj zamówienie</button>
</div>
</div>
<div v-for="category in categories" :key="category.Kod">

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>

19
src/components/NavBar.vue
View File

@@ -7,6 +7,7 @@ import { useContractorsStore } from '@/stores/contractors.store'
import { useCategoriesStore } from '@/stores/categories.store'
import { storeToRefs } from 'pinia'
import { useUserStore } from '@/stores/user.store'
import { axiosInstance } from '@/main'
const activator = ref(false);
@@ -39,6 +40,7 @@ function clickOrders() {
}
function routeLogin() {
axiosInstance.post('/logout');
router.push("/login");
}
@@ -59,17 +61,17 @@ function newOrder() {
<template>
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item">
<h3 class="title is-3">Mleczarnia</h3>
<a class="navbar-item is-overflow-hidden" style="max-width: calc(100vw - 50px); white-space: nowrap; overflow: hidden">
<h3 class="title is-4">Mleczarnia</h3>
<h4 v-if="username != undefined" class="subtitle is-4">&nbsp;{{'- ' + username}}</h4>
</a>
<button @click="makeBurger" class="button navbar-burger" data-target="navMenu" v-bind:class="{ 'is-active': activator }">
<button @click="makeBurger" class="button navbar-burger is-pulled-right" data-target="navMenu" v-bind:class="{ 'is-active': activator }">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</button>
</div>
<div class="navbar-menu" id="navMenu" v-bind:class="{ 'is-active': activator }">
<div class="navbar-start">
<a class="navbar-item" @click="clickForm">
@@ -85,13 +87,10 @@ function newOrder() {
<div class="navbar-item">
<div class="buttons">
<button class="button is-info" @click="newOrder">
Nowe Zamówienie
Nowe Zamówienie
</button>
<button class="button is-light" @click="routeLogin" v-if="username == undefined">
Log in
</button>
<button class="button is-light is-static" @click="routeLogin" v-if="username != undefined">
{{ username }}
<button class="button is-light" @click="routeLogin" >
Wyloguj
</button>
</div>
</div>

2
src/components/OrdersSelector.vue
View File

@@ -81,7 +81,7 @@ async function fetchOrders(event : Event) {
<div class="columns is-multiline">
<div class="column is-4" v-for="order in orders" :key="order.MZN_UUID">
<div class="box">
<h1 class="mb-3 is-size-7"><b>{{ order.MZN_UUID }}</b></h1>
<!-- <h1 class="mb-3 is-size-7"><b>{{ order.MZN_UUID }}</b></h1>-->
<label class="label is-small">Klient</label>
<div class="field is-small mb-3">
<input class="input is-small is-static"

2
src/main.ts
View File

@@ -81,7 +81,7 @@ export interface Product {
Twr_TwrId: number,
Options: Array<string>,
ChosenOption: string,
Quantity: number
Quantity: string
}
export interface Contractor {

1
src/stores/siteControl.store.ts
View File

@@ -12,6 +12,7 @@ export const useSiteControlStore = defineStore('siteControl', () => {
const isDarkTheme = ref<boolean>(false);
const isLoading = ref<boolean>(true);
function switchToFrom() {
if(!isForm.value) {
isForm.value = true;

3
src/stores/user.store.ts
View File

@@ -4,6 +4,7 @@ import { ref } from 'vue'
export const useUserStore = defineStore('user', () => {
const username = ref<string>();
const logoutButtonText = ref<string>();
return {username};
return {username, logoutButtonText};
})

5
src/views/LoginView.vue
View File

@@ -23,12 +23,13 @@ async function onSubmit(values : any, { setErrors } : any) {
console.log(error.response);
if(error.response.status == 401) {
setErrors({ apiError: "unauthorized" })
return;
}
});
if(body != undefined && body.status == 200) {
const userStore = useUserStore();
localStorage.setItem("username", username);
localStorage.setItem("username", body.data.displayName);
storeToRefs(userStore).username = body.data.displayName;
storeToRefs(userStore).logoutButtonText = body.data.displayName;
await router.push('/');
}