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

<script setup lang="ts">
import VueDatePicker from '@vuepic/vue-datepicker';
import { computed, ref, watch } from 'vue'
import { useOrdersStore } from '@/stores/orders.store'
import { storeToRefs } from 'pinia'
import { useSiteControlStore } from '@/stores/siteControl.store'

const ordersStore = useOrdersStore();
const siteControlStore = useSiteControlStore();
const searchOrderDate = ref<Array<Date>>();
const isOutOfBuffer = ref<boolean>(false);
const isInBufor = ref<boolean>(false);
const { orders } = storeToRefs(ordersStore);
const areOrdersLoading = ref<boolean>(false);
const { isDarkTheme } = storeToRefs(siteControlStore);

watch(isInBufor, (val) => {
  if(val && val == isOutOfBuffer.value) {
    isOutOfBuffer.value = false;
  }
},{
  immediate: true
});

watch(isOutOfBuffer, (val) => {
  if(val && val == isInBufor.value) {
    isInBufor.value = false;
  }
}, {
  immediate: true
});

const buffer = computed(()=>{
    if (!isInBufor.value && !isOutOfBuffer.value) {
      return null;
    } else return !!isInBufor.value;
  });

function viewOrder(uuid : string) {
  siteControlStore.viewOrder(uuid);
}

async function fetchOrders(event : Event) {
  event.preventDefault();
  areOrdersLoading.value = true;
  console.log(searchOrderDate.value);

  if(searchOrderDate.value == undefined) {
    orders.value = await ordersStore.fetchOrdersByBuffer(buffer.value);
  }
  if(searchOrderDate.value != undefined) {
    orders.value = await ordersStore.fetchOrdersByDateStartAndEnd(searchOrderDate.value[0], searchOrderDate.value[1], buffer.value);
  }
  areOrdersLoading.value = false;
}

</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 calendar-background"
                           menu-class-name="calendar-background"
                           v-bind:dark = "isDarkTheme"
                            range/>
          </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="isOutOfBuffer"/>
              Tak
            </label>
            <label class="checkbox">
              <input type="checkbox" v-model="isInBufor"/>
              Nie
            </label>
          </div>
        </div>
        <button class="button is-info is-small is-expanded" @click="fetchOrders"  :class="{ 'is-loading': areOrdersLoading }">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" :class="{'confirmed' : order.MZN_Bufor == 0 && order.MZN_Anulowane != 1, 'cancelled' : order.MZN_Anulowane == 1}">
            <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-info is-small is-expanded" @click="viewOrder(order.MZN_UUID)" :name="order.MZN_UUID">Podgląd</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style>
@media (prefers-color-scheme: dark){
  .calendar-background {
    --dp-background-color: rgb(20, 22, 26);
    --dp-border-color: var(--bulma-border);
    --dp-menu-border-color: var(--bulma-border);
    --dp-border-color-hover: var(--bulma-border);
    --dp-border-color-focus: var(--bulma-border);
    --dp-primary-color: var(--bulma-info);
    --dp-primary-text-color: #000;
  }
}

@media (prefers-color-scheme: light){
  .calendar-background {
    --dp-border-color: var(--bulma-border);
    --dp-menu-border-color: var(--bulma-border);
    --dp-border-color-hover: var(--bulma-border);
    --dp-border-color-focus: var(--bulma-border);
    --dp-primary-color: var(--bulma-info);
    --dp-primary-text-color: #000;
  }
}

.cancelled {
  --bulma-box-background-color: var(--bulma-danger-soft)
}
.confirmed {
  --bulma-box-background-color: var(--bulma-success-soft)
}
</style>