Whole site refactor. Added pinia stores and authentication capability.

src/components/OrdersSelector.vue

@@ -1,26 +1,26 @@
 <script setup lang="ts">
 import VueDatePicker from '@vuepic/vue-datepicker';
-import { onRenderTriggered, ref, watch } from 'vue'
-import type { Order } from '@/main'
+import { ref, watch } from 'vue'
+import { useOrdersStore } from '@/stores/orders.store'
+import { storeToRefs } from 'pinia'
+import { useSiteControlStore } from '@/stores/siteControl.store'
 
+const ordersStore = useOrdersStore();
+const siteControlStore = useSiteControlStore();
 const searchOrderDate = ref<Date>();
-const isOutOfBufor = ref<boolean>(false);
+const isOutOfBuffer = ref<boolean>(false);
 const isInBufor = ref<boolean>(false);
-const orders = defineModel<Array<Order>>('orders');
-
-const emit = defineEmits<{
-  order: [order: Order]
-}>()
+const { orders } = storeToRefs(ordersStore);
 
 watch(isInBufor, (val) => {
-  if(val && val == isOutOfBufor.value) {
-    isOutOfBufor.value = false;
+  if(val && val == isOutOfBuffer.value) {
+    isOutOfBuffer.value = false;
   }
 },{
   immediate: true
 });
 
-watch(isOutOfBufor, (val) => {
+watch(isOutOfBuffer, (val) => {
   if(val && val == isInBufor.value) {
     isInBufor.value = false;
   }
@@ -28,30 +28,16 @@ watch(isOutOfBufor, (val) => {
   immediate: true
 });
 
-function viewOrder(event: Event | undefined) {
-  let tempOrder = orders.value?.find(order => (order.MZN_UUID == event?.target?.name));
-  if (tempOrder == undefined) return;
-  emit('order', tempOrder);
-}
-
-async function fetchOrdersInBuffer() {
-  const response = await fetch('https://zamowienia.mleczarnia-kuzma.pl/api/zamowienia/bufor');
-  let ordersTemp : Array<Order> = await response.json();
-  orders.value = ordersTemp;
-}
-
-async function fetchOrdersOutOfBuffer() {
-  const response = await fetch('https://zamowienia.mleczarnia-kuzma.pl/api/zamowienia');
-  let ordersTemp : Array<Order> = await response.json();
-  orders.value = ordersTemp;
+function viewOrder(uuid : string) {
+  siteControlStore.viewOrder(uuid);
 }
 
 async function fetchOrders(event : Event) {
   event.preventDefault();
   if(isInBufor.value) {
-    fetchOrdersInBuffer();
-  } else if (isOutOfBufor.value) {
-    fetchOrdersOutOfBuffer();
+    orders.value = await ordersStore.fetchOrdersInBuffer();
+  } else if (isOutOfBuffer.value) {
+    orders.value = await ordersStore.fetchOrdersOutOfBuffer();
   }
 }
 
@@ -75,7 +61,7 @@ async function fetchOrders(event : Event) {
           <label class="label is-small">Zamówienie potwierdzone?</label>
           <div class="control">
             <label class="checkbox mr-5">
-              <input type="checkbox" v-model="isOutOfBufor"/>
+              <input type="checkbox" v-model="isOutOfBuffer"/>
               Tak
             </label>
             <label class="checkbox">
@@ -133,7 +119,7 @@ async function fetchOrders(event : Event) {
                      value="Nie"
                      readonly/>
             </div>
-            <button class="button is-primary is-small is-expanded" @click="viewOrder" :name="order.MZN_UUID">Podgląd</button>
+            <button class="button is-primary is-small is-expanded" @click="viewOrder(order.MZN_UUID)" :name="order.MZN_UUID">Podgląd</button>
           </div>
         </div>
       </div>