Added loading placeholders and couple functionalities

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