mleczarnia-kuzma-zamowienia-ui/src/views/SummedOrdersView.vue

<script setup lang="ts">
import { useOrdersStore } from '@/stores/orders.store'
import { storeToRefs } from 'pinia'
import { useRoute } from 'vue-router'
import NavBar from '@/components/NavBar.vue'
import VueDatePicker from '@vuepic/vue-datepicker'
import { useSiteControlStore } from '@/stores/siteControl.store'
import { ref } from 'vue'
import { useCategoriesStore } from '@/stores/categories.store'

const ordersStore = useOrdersStore();
const siteControlStore = useSiteControlStore();
const categoriesStore = useCategoriesStore();

const { orders } = storeToRefs(ordersStore);
const { categories } = storeToRefs(categoriesStore);
const { isDarkTheme } = storeToRefs(siteControlStore);
const searchDate = ref<Date>(new Date(Date.now()));
const confirmedOrders = ref<boolean>();
const isSummed = ref<boolean>(true);
const printMe = ref();


orders.value = await ordersStore.fetchOrdersByDay(searchDate.value, null);
await categoriesStore.fetchCategories();

const route = useRoute();
console.log(route);

async function fetchOrders() {
  console.log((confirmedOrders.value) ? true : null);
  orders.value = await ordersStore.fetchOrdersByDateStartAndEnd(searchDate.value != undefined ? searchDate.value : new Date(Date.now()),
    searchDate.value != undefined ? searchDate.value : new Date(Date.now()),
    (confirmedOrders.value) ? true : null);
  await categoriesStore.sumProductsFromOrders(orders.value);
}

categoriesStore.sumProductsFromOrders(orders.value);
</script>

<template>
  <NavBar/>
  <div class="columns box is-shadowless">
    <div class="column">
      <div class="box">
        <h1 class="title is-4 mb-3">Opcje</h1>
        <label class="label is-small">Data dostawy</label>
        <VueDatePicker v-model="searchDate"
                       :enable-time-picker="false"
                       :clearable="true"
                       input-class-name="input is-small calendar-background"
                       menu-class-name="calendar-background"
                       v-bind:dark = "isDarkTheme" />

        <div class="control mt-3">
          <label class="checkbox mr-5">
            <input type="checkbox" v-model="confirmedOrders"/>
            Tylko potwierdzone zamówienia?
          </label>
        </div>

        <button class="button mt-3" @click="fetchOrders">Potwierdź</button>
      </div>
      <div class="box mt-3">
        <button class="button is-fullwidth mb-3" @click="isSummed=false">Rozdzielone zamówienia</button>
        <button class="button is-fullwidth mb-3" @click="isSummed=true">Zsumowane zamówienia</button>
        <button class="button is-fullwidth" v-print="'#printMe'">Drukuj</button>
      </div>
    </div>
    <div class="column is-four-fifths ">
      <div class="is-flex is-justify-content-center is-flex-direction-row box printMe" style="width: 100%; height: 100%; align-content: center">
        <div id="printMe">
          <table class="table blackBorder tableOverflow" v-if="orders != undefined && orders.length != 0 && !isSummed" >
            <thead>
            <tr class="has-background-grey-light">
              <th>Nazwa produktu</th>
              <th>Ilość</th>
              <th>Jednostka miary</th>
              <th>Cena jednostkowa</th>
              <th>Cena całkowita</th>
            </tr>
            </thead>
            <tbody v-for="order in orders" :key="order.MZN_UUID">
            <tr class="has-background-grey-lighter dashedBorder">
              <td colspan="5">
                {{ order.MZN_PodNazwa1 + order.MZN_PodNazwa2 + order.MZN_PodNazwa3 + order.MZN_DataDos.toString()}}
              </td>
            </tr>
            <tr v-for="product in order.MZamElem" :key="product.MZE_MZEID">
              <td>{{ product.MZE_TwrNazwa }}</td>
              <td>{{ Number(product.MZE_TwrIlosc).toFixed(2) }}</td>
              <td>{{ product.MZE_TwrJm }}</td>
              <td>{{ Number(product.MZE_TwrCena).toFixed(2) }} &nbsp;PLN</td>
              <td>{{ (Number(product.MZE_TwrCena) * Number(product.MZE_TwrIlosc)).toFixed(2) }}&nbsp;PLN</td>
            </tr>
            </tbody>
          </table>
          <table class="table blackBorder tableOverflow" v-else-if="orders != undefined && orders.length != 0 && isSummed">
            <thead>
            <tr class="has-background-grey-light">
              <th>Nazwa produktu</th>
              <th>Ilość</th>
              <th>Jednostka miary</th>
              <th>Cena zsumowana</th>
            </tr>
            </thead>
            <tbody>
            <template v-for="category in categories" :key="category.Kod">
              <template v-for="product in category.Towary" :key="product.Twr_Kod">
                <tr v-if="product.SummedQuantity > 0">
                  <td>{{ product.Twr_Nazwa }}</td>
                  <td>{{ product.SummedQuantity.toFixed(2) }}</td>
                  <td>{{ product.Twr_JM }}</td>
                  <td>{{ product.SummedPrice.toFixed(2) }}&nbsp;PLN</td>
                </tr>
                <tr v-if="product.SummedQuantityZ > 0">
                  <td>{{ product.Twr_Nazwa }}</td>
                  <td>{{ product.SummedQuantityZ.toFixed(2) }}</td>
                  <td>{{ product.Twr_JM }}</td>
                  <td>{{ product.SummedPriceZ.toFixed(2) }}&nbsp;PLN</td>
                </tr>
              </template>
            </template>
            </tbody>
          </table>
          <p v-else class="title is-1 has-text-centered" style="height: min-content; align-self: center;">Brak zamówień</p>
        </div>
      </div>
    </div>
  </div>

</template>

<style scoped>
@media screen and (min-width: 500px) {
  .box {
    --bulma-box-padding: 1.5rem;
  }
}
@media screen and (max-width: 500px) {
  .box {
    --bulma-box-padding: 0.75rem;
  }
}

.blackBorder {
  --bulma-table-cell-border-color : black;
}

.tableOverflow {
  overflow-x: scroll;
  display: block;
}

@media print {
  .dashedBorder{
    border-style: dotted;
    border-color: lightgray;
  }
}
</style>