Form validation, navbar improvements, logout functionality, order cancelling

src/components/ConfirmedForm.vue

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

src/components/MainForm.vue

@@ -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 }">
+                  <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" readonly>
+                    <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>

src/components/NavBar.vue

@@ -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">
+      <a class="navbar-item is-overflow-hidden" style="max-width: calc(100vw - 50px); white-space: nowrap; overflow: hidden">
-        <h3 class="title is-3">Mleczarnia</h3>
+        <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">
+            <button class="button is-light" @click="routeLogin" >
-              Log in
+              Wyloguj
-            </button>
-            <button class="button is-light is-static" @click="routeLogin" v-if="username != undefined">
-              {{ username }}
             </button>
           </div>
         </div>

src/components/OrdersSelector.vue

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

src/main.ts

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

src/stores/siteControl.store.ts

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

src/stores/user.store.ts

@@ -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};
 })

src/views/LoginView.vue

@@ -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('/');
   }