Summed table of products, small improvements

src/views/MainView.vue

@@ -4,7 +4,7 @@
   <div v-if="isLoading">
     <LoadingComponent/>
   </div>
-  <div>
+  <div v-else>
     <div v-if="shownComponent == 'mainForm'">
       <MainForm
         v-if="order == undefined || order.MZN_Bufor==1"
@@ -15,7 +15,7 @@
     />
   </div>
   <ConfirmationModal v-show="showConfirmationModal" @close="showConfirmationModal = false" @confirm="closeConfirmationModal" :order-uuid="uuid"></ConfirmationModal>
-  <button class="button" @click="test">test</button>
+<!--  <button class="button" @click="test">test</button>-->
 </template>
 
 <script setup lang="ts">
@@ -37,7 +37,7 @@ const contractor = storeToRefs(contractorsStore).contractor;
 const categories = storeToRefs(categoriesStore).categories;
 const { uuid, order } = storeToRefs(ordersStore);
 const { username } = storeToRefs(userStore);
-const { isForm, isOrders, showConfirmationModal, isLoading, shownComponent } = storeToRefs(siteControlStore);
+const { showConfirmationModal, isLoading, shownComponent } = storeToRefs(siteControlStore);
 
 
 async function  fetchData() {

src/views/SummedOrdersView.vue

@@ -6,17 +6,22 @@ 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>();
+const searchDate = ref<Date>(new Date(Date.now()));
 const confirmedOrders = ref<boolean>();
+const isSummed = ref<boolean>(true);
 
 
-orders.value = await ordersStore.fetchOrdersByDay(new Date(Date.now()), null);
+orders.value = await ordersStore.fetchOrdersByDay(searchDate.value, null);
+await categoriesStore.fetchCategories();
 
 const route = useRoute();
 console.log(route);
@@ -26,65 +31,120 @@ async function fetchOrders() {
   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 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="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 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" @click="isSummed=true">Zsumowane zamówienia</button>
       </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 class="column is-four-fifths ">
+      <div class="is-flex is-justify-content-center is-flex-direction-row box" style="width: 100%; height: 100%; align-content: center">
+        <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">
+            <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>
 
 </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;
+}
 </style>