Whole site refactor. Added pinia stores and authentication capability.

src/components/MainForm.vue

@@ -1,19 +1,23 @@
 <script setup lang="ts">
 import VueDatePicker from '@vuepic/vue-datepicker';
-import type { Category, Contractor, OrderProduct } from '@/main';
+import { axiosInstance, type Category, 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'
 
-const props = defineProps(['isDarkTheme']);
-
-const uuid = defineModel<string>('orderUuid');
-const contractors = defineModel<Array<Contractor>>('contractors');
-const contractor = defineModel<Contractor>('contractor');
-const deliveryDate = defineModel<Date>('deliveryDate');
-const categories = defineModel<Array<Category>>('categories');
-const showModal = defineModel<boolean>('showModal');
+const categoriesStore = useCategoriesStore();
+const contractorsStore = useContractorsStore();
+const ordersStore = useOrdersStore();
+const siteControlStore = useSiteControlStore();
 
+const { contractor, contractors } = storeToRefs(contractorsStore);
+const { deliveryDate, uuid } = storeToRefs(ordersStore);
+const { categories } = storeToRefs(categoriesStore);
+const { showConfirmationModal, isDarkTheme } = storeToRefs(siteControlStore);
 
 function createJSON(event: Event) {
-  console.log(contractor.value);
   event.preventDefault();
   const json = {
     MZN_UUID: uuid.value,
@@ -42,16 +46,15 @@ function createJSON(event: Event) {
       }
     }
   }
-  fetch('https://zamowienia.mleczarnia-kuzma.pl/api/zamowienie', {
-    method: 'POST',
-    headers: {
-      'Accept': 'application/json',
-      'Content-Type': 'application/json'
-    },
-    body: JSON.stringify(json)
-  })
-    .then(response => response.json())
-    .then(response => uuid.value = response.MZN_UUID);
+
+  axiosInstance.post('/zamowienie', JSON.stringify(json)).then( response => {
+    uuid.value = response.data.MZN_UUID;
+  });
+}
+
+function setConfirmationModal(event : Event) {
+  event.preventDefault();
+  showConfirmationModal.value = true;
 }
 </script>
 
@@ -59,8 +62,10 @@ function createJSON(event: Event) {
   <form class="box" @submit="createJSON">
     <div class="mb-3">
       <div class="box">
-        <h1 class="is-large mb-3"><b>ZAMÓWIENIE</b></h1>
-        <h1 class="is-large mb-3" v-if="uuid != null" ><b>{{ uuid }}</b></h1>
+        <div class="mb-3">
+          <h1 class="title is-5"><b>ZAMÓWIENIE</b></h1>
+          <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>
           <div class="field">
@@ -83,13 +88,13 @@ function createJSON(event: Event) {
                            v-bind:dark = "isDarkTheme"/>
           </div>
         </div>
-        <button class="button is-primary mt-5">Submit</button>
-        <button class="button is-primary mt-5 ml-3" @click="showModal = true">Potwierdź</button>
+        <button class="button is-info mt-5">Submit</button>
+        <button class="button is-info mt-5 ml-3" @click="setConfirmationModal">Potwierdź</button>
       </div>
     </div>
     <div v-for="category in categories" :key="category.Kod">
       <div class="box mb-3" >
-        <h1 class="is-large mb-3"><b>{{ category.Kod }}</b></h1>
+        <h1 class="title is-5 mb-3 mb-3"><b>{{ category.Kod }}</b></h1>
         <div class="field" v-for="(product, index) in category.Towary" :key="product.Twr_Nazwa">
           <label class="label is-small">{{ product.Twr_Nazwa }}</label>
           <div class="columns is-mobile">
@@ -134,10 +139,10 @@ function createJSON(event: Event) {
     </div>
     <div class="columns mt-1 is-variable is-mobile">
       <div class = "column is-6">
-        <button class="button is-primary is-fullwidth is-large">Submit</button>
+        <button class="button is-info is-fullwidth is-large">Submit</button>
       </div>
       <div class = "is-large column is-6 ml-3">
-        <button class="button is-primary is-fullwidth is-large" @click="parseOrderJSON">Potwierdź</button>
+        <button class="button is-info is-fullwidth is-large" @click="showConfirmationModal = true">Potwierdź</button>
       </div>
     </div>
   </form>
@@ -151,6 +156,7 @@ function createJSON(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);
   }
 }
 
@@ -160,6 +166,8 @@ function createJSON(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);
+    --dp-primary-text-color: #000;
   }
 }
 </style>