Added loading placeholders and couple functionalities

src/components/ConfirmationModal.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const emit = defineEmits(['close']);
+const emit = defineEmits(['close', 'confirm']);
 
 const props = defineProps(
   {
@@ -8,7 +8,7 @@ const props = defineProps(
 );
 
 function confirmOrder() {
-  emit('close');
+  emit('confirm');
   fetch('https://zamowienia.mleczarnia-kuzma.pl/api/zamowienie/' + props.orderUuid, {
     method: 'PUT'
   });

src/components/ConfirmedForm.vue

@@ -12,10 +12,13 @@ const props = defineProps({
   deliveryDate: Date
 })
 
+function cancelOrder(event: Event) {
+  event.preventDefault();
+}
 </script>
 
 <template>
-  <form class="box" @submit="createJSON" style="min-height: 93.5vh">
+  <form class="box" style="min-height: 93.5vh">
     <div class="mb-3">
       <div class="box">
         <h1 class="is-large mb-3"><b>ZAMÓWIENIE</b></h1>
@@ -55,6 +58,7 @@ const props = defineProps({
               hide-input-icon/>
           </div>
         </div>
+        <button class="button is-primary" @click="cancelOrder">Anuluj zamówienie</button>
       </div>
     </div>
     <div v-for="category in categories" :key="category.Kod">

src/components/LoadingComponent.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div class="box">
+    <div class="box is-skeleton m-3" style="height: 40vh"></div>
+    <div class="box is-skeleton mb-3 mx-3" style="height: 20vh"></div>
+    <div class="box is-skeleton mb-3 mx-3" style="height: 20vh"></div>
+  </div>
+
+</template>
+
+<style scoped>
+
+</style>

src/components/OrdersSelector.vue

@@ -1,19 +1,12 @@
 <script setup lang="ts">
 import VueDatePicker from '@vuepic/vue-datepicker';
-import {ref, watch} from 'vue'
-import type { Category, Contractor, Order } from '@/main'
+import { onRenderTriggered, ref, watch } from 'vue'
+import type { Order } from '@/main'
 
 const searchOrderDate = ref<Date>();
 const isOutOfBufor = ref<boolean>(false);
 const isInBufor = ref<boolean>(false);
 const orders = defineModel<Array<Order>>('orders');
-const uuid = defineModel<string>('uuid');
-const contractor = defineModel<Contractor>('contractor');
-const contractors = defineModel<Array<Contractor>>('contractors');
-const deliveryDate = defineModel<Date>('deliveryDate');
-const categories = defineModel<Array<Category>>('categories');
-const order = defineModel<Order>('order');
-
 
 const emit = defineEmits<{
   order: [order: Order]
@@ -36,12 +29,32 @@ watch(isOutOfBufor, (val) => {
 });
 
 function viewOrder(event: Event | undefined) {
-  console.log(event?.target?.name);
   let tempOrder = orders.value?.find(order => (order.MZN_UUID == event?.target?.name));
   if (tempOrder == undefined) return;
-  console.log(tempOrder);
   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;
+}
+
+async function fetchOrders(event : Event) {
+  event.preventDefault();
+  if(isInBufor.value) {
+    fetchOrdersInBuffer();
+  } else if (isOutOfBufor.value) {
+    fetchOrdersOutOfBuffer();
+  }
+}
+
 </script>
 
 <template>
@@ -71,7 +84,7 @@ function viewOrder(event: Event | undefined) {
             </label>
           </div>
         </div>
-        <button class="button is-primary is-small is-expanded" @click="createJSON">Pobierz zamówienia</button>
+        <button class="button is-primary is-small is-expanded" @click="fetchOrders">Pobierz zamówienia</button>
       </div>
     </form>
     <div class="box">