Table summary of orders

src/views/SummedOrdersView.vue

@@ -0,0 +1,90 @@
+<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'
+
+const ordersStore = useOrdersStore();
+const siteControlStore = useSiteControlStore();
+
+const { orders } = storeToRefs(ordersStore);
+const { isDarkTheme } = storeToRefs(siteControlStore);
+const searchDate = ref<Date>();
+const confirmedOrders = ref<boolean>();
+
+
+orders.value = await ordersStore.fetchOrdersByDay(new Date(Date.now()), null);
+
+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);
+}
+
+</script>
+
+<template>
+  <NavBar/>
+  <div class="columns box is-shadowless">
+    <div class="column box mr-3">
+      <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="column is-four-fifths is-flex is-align-content-center box is-justify-content-center">
+      <table class="table blackBorder">
+        <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">
+          <th colspan="5">
+            {{ order.MZN_PodNazwa1 + order.MZN_PodNazwa2 + order.MZN_PodNazwa3 + order.MZN_DataDos.toString()}}
+          </th>
+        </tr>
+        <tr v-for="product in order.MZamElem" :key="product.MZE_MZEID">
+          <th>{{ product.MZE_TwrNazwa }}</th>
+          <th>{{ Number(product.MZE_TwrIlosc).toFixed(2) }}</th>
+          <th>{{ product.MZE_TwrJm }}</th>
+          <th>{{ Number(product.MZE_TwrCena).toFixed(2) }}</th>
+          <th>{{ (Number(product.MZE_TwrCena) * Number(product.MZE_TwrIlosc)).toFixed(2) }}</th>
+        </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+
+</template>
+
+<style scoped>
+.blackBorder {
+  --bulma-table-cell-border-color : black;
+}
+</style>