Divided the app into components and rewrote JS to TS.

src/components/OrdersSelector.vue

@@ -0,0 +1,149 @@
+<script setup lang="ts">
+import VueDatePicker from '@vuepic/vue-datepicker';
+import {ref, watch} from 'vue'
+import type { Category, 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<number>('contractor');
+const deliveryDate = defineModel<Date>('deliveryDate');
+const categories = defineModel<Array<Category>>('categories');
+
+const emit = defineEmits(['order']);
+
+watch(isInBufor, (val) => {
+  if(val && val == isOutOfBufor.value) {
+    isOutOfBufor.value = false;
+  }
+},{
+  immediate: true
+});
+
+watch(isOutOfBufor, (val) => {
+  if(val && val == isInBufor.value) {
+    isInBufor.value = false;
+  }
+}, {
+  immediate: true
+});
+
+async function viewOrder(event: Event | undefined) {
+  console.log(event?.target?.name);
+  let tempOrder = orders.value?.find(order => (order.MZN_UUID == event?.target?.name));
+  console.log(tempOrder);
+  if (tempOrder == undefined) return;
+  if (categories.value == undefined) return;
+
+  const response = await fetch('https://zamowienia.mleczarnia-kuzma.pl/api/zamowienie/' + tempOrder.MZN_UUID);
+  let order = await response.json();
+
+  uuid.value = "test";
+  contractor.value = order.MZN_PodID;
+  deliveryDate.value = new Date(order.MZN_DataDos);
+  console.log(order);
+  for(let orderProduct of order.MZamElem){
+    for(let category of categories.value) {
+      let product = category.Towary.find(product => (product.Twr_TwrId == orderProduct.MZE_TwrId));
+      if(product != null) {
+        console.log('ten towar ' + product);
+        product.Twr_Cena = orderProduct.MZE_TwrCena.slice(0, -2);
+        product.Quantity = orderProduct.MZE_TwrIlosc.slice(0, -2);
+        break;
+      }
+    }
+  }
+  emit('order');
+  window.scrollTo(0, 0);
+}
+</script>
+
+<template>
+  <div class="box is-shadowless">
+    <form class="mb-3">
+      <div class="box">
+        <h1 class="is-large mb-3"><b>FILTR ZAMÓWIEŃ</b></h1>
+        <div class="field mb-5">
+          <label class="label is-small">Data zamówienia</label>
+          <div class="field is-small">
+            <VueDatePicker v-model="searchOrderDate"
+                           :enable-time-picker="false"
+                           :clearable="true"
+                           input-class-name="input is-small"/>
+          </div>
+        </div>
+        <div class="field mb-5">
+          <label class="label is-small">Zamówienie potwierdzone?</label>
+          <div class="control">
+            <label class="checkbox mr-5">
+              <input type="checkbox" v-model="isOutOfBufor"/>
+              Tak
+            </label>
+            <label class="checkbox">
+              <input type="checkbox" v-model="isInBufor"/>
+              Nie
+            </label>
+          </div>
+        </div>
+        <button class="button is-primary is-small is-expanded" @click="createJSON">Pobierz zamówienia</button>
+      </div>
+    </form>
+    <div class="box">
+      <h1 class="is-large mb-3"><b>ZAMÓWIENIA</b></h1>
+      <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>
+            <label class="label is-small">Klient</label>
+            <div class="field is-small mb-3">
+              <input class="input is-small is-static"
+                     type="text"
+                     :value="order.MZN_PodNazwa1 + order.MZN_PodNazwa2 + order.MZN_PodNazwa3"
+                     readonly/>
+            </div>
+            <div class="columns is-mobile field is-small mb-0">
+              <div class="column is-6">
+                <label class="label is-small">Data dostawy</label>
+                <div class="field is-small">
+                  <input class="input is-small is-static"
+                         type="text"
+                         v-model="order.MZN_DataDos"
+                         readonly/>
+                </div>
+              </div>
+              <div class="column is-6">
+                <label class="label is-small">Data zamówienia</label>
+                <div class="field is-small">
+                  <input class="input is-small is-static"
+                         type="text"
+                         v-model="order.MZN_DataZam.split('T')[0]"
+                         readonly/>
+                </div>
+              </div>
+            </div>
+            <label class="label is-small">Zamówienie potwierdzone?</label>
+            <div class="field is-small mb-3" v-if="order.MZN_Bufor==0">
+              <input class="input is-small is-static"
+                     type="text"
+                     value="Tak"
+                     readonly/>
+            </div>
+            <div class="field is-small mb-3" v-else>
+              <input class="input is-small is-static"
+                     type="text"
+                     value="Nie"
+                     readonly/>
+            </div>
+            <button class="button is-primary is-small is-expanded" @click="viewOrder" :name="order.MZN_UUID">Podgląd</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>