Summed table of products, small improvements

src/components/MainForm.vue

@@ -25,7 +25,9 @@ const showContractorsDropdown = ref<boolean>(false);
 const contractorInput = ref(null);
 
 const showErrorNotification = ref<boolean>(false);
+const showSuccessNotification = ref<boolean>(false);
 const errorNotificationMessage = ref<string>();
+const successNotificationMessage = ref<string>();
 const route = useRoute();
 
 watch(contractor, (contractor) => {
@@ -41,8 +43,8 @@ function createJSON(event: Event) {
   console.log(route);
   const json = {
     MZN_UUID: uuid.value,
-    MZN_DataZam: new Date(Date.now()).toISOString().split('T')[0],
+    MZN_DataZam: new Date(Date.now()).toISOString(),
-    MZN_DataDos: deliveryDate.value != undefined ? deliveryDate.value.toISOString() : null,
+    MZN_DataDos: deliveryDate.value != undefined ? deliveryDate.value.toISOString().split('T')[0] : null,
     MZN_PodID: contractor.value?.Knt_KntId,
     MZamElem: new Array<OrderProduct>
   };
@@ -73,6 +75,8 @@ function createJSON(event: Event) {
           errorNotificationMessage.value = "W zamówieniu znajdują się niepoprawne wartości.";
           return;
         }
+        product.Twr_Cena = product.Twr_Cena == "" || product.Twr_Cena == null ? product.BasePrice : product.Twr_Cena;
+        product.Twr_CenaZ = product.Twr_CenaZ == "" || product.Twr_CenaZ == null ? product.BasePriceZ : product.Twr_CenaZ;
         const productObject : OrderProduct = {
           MZE_TwrId: product.Twr_TwrId,
           MZE_TwrJm: product.ChosenOption,
@@ -97,6 +101,8 @@ function createJSON(event: Event) {
   console.log(JSON.stringify(json));
   axiosInstance.post('/zamowienie', JSON.stringify(json)).then( response => {
     uuid.value = response.data.MZN_UUID;
+    showSuccessNotification.value = true;
+    successNotificationMessage.value = "Zamówienie zostało zapisane do bazy danych."
   });
 }
 
@@ -172,8 +178,8 @@ onBeforeUnmount( function () {
             <div ref="contractorInput" class="dropdown maxwidth"
                  v-bind:class="{'is-active': showContractorsDropdown == true}">
               <div class="dropdown-trigger maxwidth" @click="toggleContractorsDropdown">
-                <div class="field maxwidth" @onclick.prevent="toggleContractorsDropdown">
+                <div class="field maxwidth">
-                  <p class="control is-expanded has-icons-right is-small maxwidth" @onclick.prevent="toggleContractorsDropdown">
+                  <p class="control is-expanded has-icons-right is-small maxwidth">
                     <input class="input is-small is-expanded maxwidth" type="search"
                            v-model="contractorSearch" @input="filterContractors" />
                     <span class="icon is-small is-right"><i class="fas fa-search"></i></span>
@@ -205,13 +211,25 @@ onBeforeUnmount( function () {
                            v-bind:dark = "isDarkTheme"/>
           </div>
         </div>
+        <div class="field mt-5">
+          <label class="label is-small">Uwagi do zamówienia</label>
+          <textarea
+            class="textarea"
+            placeholder="Jeszcze nie połączone z bazą danych"
+            rows="5"
+          ></textarea>
+        </div>
         <button class="button is-info mt-5">Zapisz</button>
         <button class="button is-success mt-5 ml-3" @click="setConfirmationModal">Potwierdź</button>
         <button class="button is-danger mt-5 ml-3" @click="cancelOrder" v-bind:disabled="uuid == undefined">Anuluj</button>
-        <div v-if="showErrorNotification==true" class="notification is-danger is-bold mt-5">
+        <div v-if="showErrorNotification" class="notification is-danger is-bold mt-5">
           <button  class="delete" @click.prevent="showErrorNotification = false"></button>
           {{ errorNotificationMessage }}
         </div>
+        <div v-if="showSuccessNotification" class="notification is-success is-bold mt-5">
+          <button  class="delete" @click.prevent="showSuccessNotification = false"></button>
+          {{ successNotificationMessage }}
+        </div>
       </div>
     </div>
     <div v-for="category in categories" :key="category.Kod">

src/main.ts

@@ -89,7 +89,13 @@ export interface Product {
   Twr_TwrId: number,
   Options: Array<string>,
   ChosenOption: string,
-  Quantity: string
+  Quantity: string,
+  BasePrice: string,
+  BasePriceZ: string,
+  SummedQuantity: number,
+  SummedQuantityZ: number,
+  SummedPrice: number,
+  SummedPriceZ: number
 }
 
 export interface Contractor {

src/stores/categories.store.ts

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia'
-import type { Category } from '@/main'
+import type { Category, Order, Product } from '@/main'
 import { ref } from 'vue'
 import { axiosInstance } from '@/main'
 
@@ -15,6 +15,12 @@ export const useCategoriesStore = defineStore('categories', () => {
         for (const product of category.Towary) {
           product.Options = new Array(product.Twr_JM);
           product.ChosenOption = product.Twr_JM;
+          product.BasePrice = product.Twr_Cena;
+          product.BasePriceZ = product.Twr_CenaZ;
+          product.SummedQuantity = 0;
+          product.SummedQuantityZ = 0;
+          product.SummedPrice = 0;
+          product.SummedPriceZ = 0;
           if (product.Twr_JMZ != null) {
             product.Options.push(product.Twr_JMZ);
           }
@@ -23,5 +29,36 @@ export const useCategoriesStore = defineStore('categories', () => {
     }
   }
 
-  return {categories, fetchCategories}
+  async function sumProductsFromOrders(orders : Array<Order>) {
+    const productsMap = new Map<string, Product>();
+
+    await fetchCategories();
+
+    if(categories.value != undefined) {
+      for (const category of categories.value) {
+        for (const product of category.Towary) {
+          productsMap.set(product.Twr_TwrId.toString(), product);
+        }
+      }
+    }
+
+    if(orders != undefined) {
+      for (const order of orders) {
+        for (const product of order.MZamElem) {
+          const mapProduct = productsMap.get(String(product.MZE_TwrId));
+          if(product.MZE_TwrJm == mapProduct?.Twr_JM) {
+            mapProduct.SummedQuantity += Number(product.MZE_TwrIlosc);
+            mapProduct.SummedPrice += (Number(product.MZE_TwrCena) * Number(product.MZE_TwrIlosc));
+          }
+          if (product.MZE_TwrJm == mapProduct?.Twr_JMZ) {
+            mapProduct.SummedQuantityZ += Number(product.MZE_TwrIlosc);
+            mapProduct.SummedPriceZ += (Number(product.MZE_TwrCena) * Number(product.MZE_TwrIlosc));
+          }
+        }
+      }
+    }
+    console.log(categories.value);
+  }
+
+  return {categories, fetchCategories, sumProductsFromOrders}
 })

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">
+    <div class="column">
-      <h1 class="title is-4 mb-3">Opcje</h1>
+      <div class="box">
-      <label class="label is-small">Data dostawy</label>
+        <h1 class="title is-4 mb-3">Opcje</h1>
-      <VueDatePicker v-model="searchDate"
+        <label class="label is-small">Data dostawy</label>
-                     :enable-time-picker="false"
+        <VueDatePicker v-model="searchDate"
-                     :clearable="true"
+                       :enable-time-picker="false"
-                     input-class-name="input is-small calendar-background"
+                       :clearable="true"
-                     menu-class-name="calendar-background"
+                       input-class-name="input is-small calendar-background"
-                     v-bind:dark = "isDarkTheme" />
+                       menu-class-name="calendar-background"
+                       v-bind:dark = "isDarkTheme" />
 
-      <div class="control mt-3">
+        <div class="control mt-3">
-        <label class="checkbox mr-5">
+          <label class="checkbox mr-5">
-          <input type="checkbox" v-model="confirmedOrders"/>
+            <input type="checkbox" v-model="confirmedOrders"/>
-          Tylko potwierdzone zamówienia?
+            Tylko potwierdzone zamówienia?
-        </label>
+          </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">
+    <div class="column is-four-fifths ">
-      <table class="table blackBorder">
+      <div class="is-flex is-justify-content-center is-flex-direction-row box" style="width: 100%; height: 100%; align-content: center">
-        <thead>
+        <table class="table blackBorder tableOverflow" v-if="orders != undefined && orders.length != 0 && !isSummed">
-        <tr class="has-background-grey-light">
+          <thead>
-          <th>Nazwa produktu</th>
+          <tr class="has-background-grey-light">
-          <th>Ilość</th>
+            <th>Nazwa produktu</th>
-          <th>Jednostka miary</th>
+            <th>Ilość</th>
-          <th>Cena jednostkowa</th>
+            <th>Jednostka miary</th>
-          <th>Cena całkowita</th>
+            <th>Cena jednostkowa</th>
-        </tr>
+            <th>Cena całkowita</th>
-        </thead>
+          </tr>
-        <tbody v-for="order in orders" :key="order.MZN_UUID">
+          </thead>
-        <tr class="has-background-grey-lighter">
+          <tbody v-for="order in orders" :key="order.MZN_UUID">
-          <th colspan="5">
+          <tr class="has-background-grey-lighter">
-            {{ order.MZN_PodNazwa1 + order.MZN_PodNazwa2 + order.MZN_PodNazwa3 + order.MZN_DataDos.toString()}}
+            <td colspan="5">
-          </th>
+              {{ order.MZN_PodNazwa1 + order.MZN_PodNazwa2 + order.MZN_PodNazwa3 + order.MZN_DataDos.toString()}}
-        </tr>
+            </td>
-        <tr v-for="product in order.MZamElem" :key="product.MZE_MZEID">
+          </tr>
-          <th>{{ product.MZE_TwrNazwa }}</th>
+          <tr v-for="product in order.MZamElem" :key="product.MZE_MZEID">
-          <th>{{ Number(product.MZE_TwrIlosc).toFixed(2) }}</th>
+            <td>{{ product.MZE_TwrNazwa }}</td>
-          <th>{{ product.MZE_TwrJm }}</th>
+            <td>{{ Number(product.MZE_TwrIlosc).toFixed(2) }}</td>
-          <th>{{ Number(product.MZE_TwrCena).toFixed(2) }}</th>
+            <td>{{ product.MZE_TwrJm }}</td>
-          <th>{{ (Number(product.MZE_TwrCena) * Number(product.MZE_TwrIlosc)).toFixed(2) }}</th>
+            <td>{{ Number(product.MZE_TwrCena).toFixed(2) }} &nbsp;PLN</td>
-        </tr>
+            <td>{{ (Number(product.MZE_TwrCena) * Number(product.MZE_TwrIlosc)).toFixed(2) }}&nbsp;PLN</td>
-        </tbody>
+          </tr>
-      </table>
+          </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>