Divided the app into components and rewrote JS to TS.

src/components/MainForm.vue

@@ -0,0 +1,149 @@
+<script setup lang="ts">
+import VueDatePicker from '@vuepic/vue-datepicker';
+import type { Category, Contractor, OrderProduct } from '@/main';
+
+const props = defineProps(['isDarkTheme']);
+
+const uuid = defineModel<string>('orderUuid');
+const contractors = defineModel<Array<Contractor>>('contractors');
+const contractor = defineModel<number>('contractor');
+const deliveryDate = defineModel<Date>('deliveryDate');
+const categories = defineModel<Array<Category>>('categories');
+const showModal = defineModel<boolean>('showModal');
+
+
+function createJSON(event: Event) {
+  console.log(contractor.value);
+  event.preventDefault();
+  const json = {
+    MZN_UUID: uuid.value,
+    MZN_DataZam: new Date(Date.now()).toISOString(),
+    MZN_DataDos: deliveryDate.value != undefined ? deliveryDate.value.toISOString() : null,
+    MZN_PodID: contractor.value,
+    MZamElem: new Array<OrderProduct>
+  };
+
+  if(categories.value == undefined) return;
+
+  for (let category of categories.value) {
+    for (let product of category.Towary) {
+      if(product.Quantity != null) {
+        const productObject : OrderProduct = {
+          MZE_TwrId: product.Twr_TwrId,
+          MZE_TwrJm: product.ChosenOption,
+          MZE_TwrCena: product.ChosenOption == product.Twr_JMZ ? product.Twr_CenaZ : product.Twr_Cena,
+          MZE_TwrIlosc: product.Quantity.toString(),
+          MZE_TwrNazwa: product.Twr_Nazwa,
+          MZE_MZNID: undefined,
+          MZE_MZEID: undefined,
+          MZE_TwrStawka: undefined
+        };
+        json.MZamElem.push(productObject);
+      }
+    }
+  }
+  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);
+}
+</script>
+
+<template>
+  <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="field mb-5">
+          <label class="label is-small">NIP</label>
+          <div class="field">
+            <div class="select is-small is-expanded" style="width: 100%">
+              <select v-model="contractor" class="is-expanded" style="width: 100%" required>
+                <option class="is-expanded" v-for="contractor in contractors" :key="contractor.Knt_KntId" :value=contractor.Knt_KntId>{{ contractor.Knt_NipE + ', ' + contractor.Knt_Miasto + ', ' + contractor.Knt_Nazwa1 + ' ' + contractor.Knt_Nazwa2 + ' ' + contractor.Knt_Nazwa3 }}</option>
+              </select>
+            </div>
+          </div>
+        </div>
+        <div class="field">
+          <label class="label is-small">Data dostawy</label>
+          <div class="field is-small">
+            <VueDatePicker class ="bulma-is-small is-static"
+                           v-model="deliveryDate"
+                           :enable-time-picker="false"
+                           :clearable="true"
+                           input-class-name="input is-small"
+                           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>
+      </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>
+        <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">
+            <div class="column" v-if="product.ChosenOption == product.Twr_JM">
+              <div class="field">
+                <input
+                  class="input is-small"
+                  type="text"
+                  placeholder="Kwota"
+                  v-model="product.Twr_Cena"
+                />
+              </div>
+            </div>
+            <div class="column" v-else-if="product.ChosenOption == product.Twr_JMZ">
+              <div class="field">
+                <input
+                  class="input is-small"
+                  type="text"
+                  placeholder="Kwota"
+                  v-model="product.Twr_CenaZ"
+                />
+              </div>
+            </div>
+            <div class="column">
+              <div class="field has-addons">
+                <p class="control">
+                  <span class="select is-small">
+                    <select v-model="product.ChosenOption" readonly>
+                      <option v-for="option in product.Options" :key="option">{{ option }}</option>
+                    </select>
+                  </span>
+                </p>
+                <p class="control is-expanded">
+                  <input class="input is-small" type="text" placeholder="Ilość" v-model="product.Quantity">
+                </p>
+              </div>
+            </div>
+          </div>
+          <div v-if="!(index == category.Towary.length - 1)"></div>
+        </div>
+      </div>
+    </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>
+      </div>
+      <div class = "is-large column is-6 ml-3">
+        <button class="button is-primary is-fullwidth is-large" @click="parseOrderJSON">Potwierdź</button>
+      </div>
+    </div>
+  </form>
+</template>
+
+<style scoped>
+.dp__theme_dark {
+  --dp-background-color: rgb(20, 22, 26);
+}
+</style>