mleczarnia-kuzma-zamowienia-ui/src/components/ConfirmedForm.vue

<script setup lang="ts">
import VueDatePicker from '@vuepic/vue-datepicker'
import { useOrdersStore } from '@/stores/orders.store'
import { storeToRefs } from 'pinia'
import { useCategoriesStore } from '@/stores/categories.store'
import { useContractorsStore } from '@/stores/contractors.store'
import { axiosInstance } from '@/main'

const ordersStore = useOrdersStore();
const categoriesStore = useCategoriesStore();
const contractorsStore = useContractorsStore();

const { order, uuid} = storeToRefs(ordersStore);

const { categories } = storeToRefs(categoriesStore);

const { contractor } = storeToRefs(contractorsStore);

function cancelOrder(event: Event) {
  event.preventDefault();
  axiosInstance.delete('/zamowienie/' + uuid.value);
}
</script>

<template>
  <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>
        <h1 class="is-large mb-3" v-if="uuid != null" ><b>{{ uuid }}</b></h1>
        <div class="field mb-3" v-if="contractor != undefined">
          <label class="label is-small">Klient</label>
          <div class="field is-small mb-3">
            <input class="input is-small is-static"
                   type="text"
                   :value="contractor.Knt_Nazwa1 + contractor.Knt_Nazwa2 + contractor.Knt_Nazwa3"
                   readonly/>
          </div>
        </div>
        <div class="field mb-3" v-if="order != undefined">
          <label class="label is-small">Data dostawy</label>
          <div class="field is-small">
            <VueDatePicker
              v-model="order.MZN_DataDos"
              :enable-time-picker="false"
              :clearable="true"
              input-class-name="input is-small calendar-background is-static"
              menu-class-name="calendar-background"
              readonly
              hide-input-icon/>
          </div>
        </div>
        <div class="field mb-3" v-if="order != undefined">
          <label class="label is-small">Data zamówienia</label>
          <div class="field is-small">
            <VueDatePicker
              v-model="order.MZN_DataZam"
              :enable-time-picker="false"
              :clearable="true"
              input-class-name="input is-small calendar-background is-static"
              menu-class-name="calendar-background"
              readonly
              hide-input-icon/>
          </div>
        </div>
        <button class="button is-danger" @click="cancelOrder">Anuluj zamówienie</button>
      </div>
    </div>
    <div v-for="category in categories" :key="category.Kod">
      <div class="box mb-3" v-if="category.isVisible">
        <h1 class="is-large mb-3"><b>{{ category.Kod }}</b></h1>
        <div class="field" v-for="(product) in category.Towary" :key="product.Twr_Nazwa">
          <div v-if="product.Quantity > 0" class="mb-3">
            <label class="label is-small">{{ product.Twr_Nazwa }}</label>
            <div class="columns is-mobile">
              <div class="column">
                <div class="field">
                  <p class="control is-expanded">
                    <input class="input is-small is-static" type="text" placeholder="Ilość" :value="product.Quantity + ' ' + product.ChosenOption" readonly>
                  </p>
                </div>
              </div>
              <div class="column" v-if="product.ChosenOption == product.Twr_JM">
                <div class="field">
                  <input
                    class="input is-small is-static"
                    type="text"
                    placeholder="Kwota"
                    :value="product.Twr_Cena + ' PLN'"
                    readonly
                  />
                </div>
              </div>
              <div class="column" v-else-if="product.ChosenOption == product.Twr_JMZ">
                <div class="field">
                  <input
                    class="input is-small is-static"
                    type="text"
                    placeholder="Kwota"
                    :value="product.Twr_CenaZ + ' PLN'"
                    readonly
                  />
                </div>
              </div>
              <div class="column" v-if="product.ChosenOption == product.Twr_JM">
                <div class="field">
                  <input
                    class="input is-small is-static"
                    type="text"
                    placeholder="Kwota"
                    :value="(Number(product.Twr_Cena) * product.Quantity).toFixed(2) + ' PLN'"
                    readonly
                  />
                </div>
              </div>
              <div class="column" v-else-if="product.ChosenOption == product.Twr_JMZ">
                <div class="field">
                  <input
                    class="input is-small is-static"
                    type="text"
                    placeholder="Kwota"
                    :value="(Number(product.Twr_CenaZ) * product.Quantity).toFixed(2) + ' PLN'"
                    readonly
                  />
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
  </form>
</template>

<style scoped>

</style>