Refactor, improving responsivness

src/components/ConfirmedForm.vue

@@ -23,11 +23,11 @@ function cancelOrder(event: Event) {
 </script>
 
 <template>
-  <form class="box" style="min-height: 93.5vh">
+  <form class="box is-shadowless">
     <div class="mb-3">
       <div class="box">
-        <h1 class="is-large mb-3"><b>ZAMÓWIENIE</b></h1>
-        <h1 class="is-large mb-3" v-if="uuid != null" ><b>{{ uuid }}</b></h1>
+        <h1 class="title mb-3 is-6"><b>ZAMÓWIENIE</b></h1>
+        <h1 class="subtitle is-6 mb-3" v-if="uuid != null" ><b>{{ uuid }}</b></h1>
         <div class="field mb-3" v-if="contractor != undefined">
           <label class="label is-small">Klient</label>
           <div class="field is-small mb-3">
@@ -68,9 +68,9 @@ function cancelOrder(event: Event) {
     </div>
     <div v-for="category in categories" :key="category.Kod">
       <div class="box mb-3" v-if="category.isVisible">
-        <h1 class="is-large mb-3"><b>{{ category.Kod }}</b></h1>
+        <h1 class="title mb-3 is-6"><b>{{ category.Kod }}</b></h1>
         <div class="field" v-for="(product) in category.Towary" :key="product.Twr_Nazwa">
-          <div v-if="product.Quantity > 0" class="mb-3">
+          <div v-if="Number(product.Quantity) > 0" class="mb-3">
             <label class="label is-small">{{ product.Twr_Nazwa }}</label>
             <div class="columns is-mobile">
               <div class="column">
@@ -108,7 +108,7 @@ function cancelOrder(event: Event) {
                     class="input is-small is-static"
                     type="text"
                     placeholder="Kwota"
-                    :value="(Number(product.Twr_Cena) * product.Quantity).toFixed(2) + ' PLN'"
+                    :value="(Number(product.Twr_Cena) * Number(product.Quantity)).toFixed(2) + ' PLN'"
                     readonly
                   />
                 </div>
@@ -119,7 +119,7 @@ function cancelOrder(event: Event) {
                     class="input is-small is-static"
                     type="text"
                     placeholder="Kwota"
-                    :value="(Number(product.Twr_CenaZ) * product.Quantity).toFixed(2) + ' PLN'"
+                    :value="(Number(product.Twr_CenaZ) * Number(product.Quantity)).toFixed(2) + ' PLN'"
                     readonly
                   />
                 </div>

src/components/MainForm.vue

@@ -15,7 +15,7 @@ const ordersStore = useOrdersStore();
 const siteControlStore = useSiteControlStore();
 
 const { contractor, contractors } = storeToRefs(contractorsStore);
-const { deliveryDate, uuid } = storeToRefs(ordersStore);
+const { deliveryDate, uuid, additionalNotes } = storeToRefs(ordersStore);
 const { categories } = storeToRefs(categoriesStore);
 const { showConfirmationModal, showCancellationModal, isDarkTheme } = storeToRefs(siteControlStore);
 
@@ -170,8 +170,8 @@ onBeforeUnmount( function () {
 </script>
 
 <template>
-  <form class="box" @submit.prevent="createJSON">
-    <div class="mb-3">
+  <form class="box is-shadowless" @submit.prevent="createJSON">
+    <div>
       <div class="box">
         <div class="mb-3">
           <h1 class="title is-5"><b>ZAMÓWIENIE</b></h1>
@@ -213,14 +213,16 @@ onBeforeUnmount( function () {
                            :clearable="true"
                            input-class-name="input is-small calendar-background"
                            menu-class-name="calendar-background"
-                           v-bind:dark = "isDarkTheme"/>
+                           v-bind:dark = "!!window?.matchMedia?.('(prefers-color-scheme:dark)')?.matches"
+            />
           </div>
         </div>
         <div class="field mt-5">
           <label class="label is-small">Uwagi do zamówienia</label>
           <textarea
+            v-model="additionalNotes"
             class="textarea"
-            placeholder="Jeszcze nie połączone z bazą danych"
+            placeholder="Uwagi do zamówienia"
             rows="5"
           ></textarea>
         </div>

src/components/NavBar.vue

@@ -70,12 +70,11 @@ function routeLogin() {
         <a class="navbar-item" @click="clickForm">
           Formularz
         </a>
-
         <a class="navbar-item" @click="clickOrders">
           Zamówienia
         </a>
         <a class="navbar-item" @click="clickTable">
-          Tabela
+          Zestawienie
         </a>
       </div>
       <div class="navbar-end">

src/components/OrdersSelector.vue

@@ -4,15 +4,21 @@ import { computed, ref, watch } from 'vue'
 import { useOrdersStore } from '@/stores/orders.store'
 import { storeToRefs } from 'pinia'
 import { useSiteControlStore } from '@/stores/siteControl.store'
+import type { Order } from '@/main'
 
 const ordersStore = useOrdersStore();
 const siteControlStore = useSiteControlStore();
-const searchOrderDate = ref<Array<Date>>();
+const searchOrderDate = ref<Array<Date>>([]);
 const isOutOfBuffer = ref<boolean>(false);
 const isInBufor = ref<boolean>(false);
 const { orders, dates } = storeToRefs(ordersStore);
 const areOrdersLoading = ref<boolean>(false);
-const { isDarkTheme } = storeToRefs(siteControlStore);
+const { isDarkTheme, isLoading } = storeToRefs(siteControlStore);
+
+const date = new Date(Date.now());
+const startDate = new Date(date.getFullYear(), date.getMonth(), (date.getDate() - 2));
+const endDate = new Date(date.getFullYear()+1, date.getMonth(), date.getDay());
+searchOrderDate.value?.push(startDate, endDate);
 
 watch(isInBufor, (val) => {
   if(val && val == isOutOfBuffer.value) {
@@ -36,12 +42,29 @@ const buffer = computed(()=>{
     } else return !!isInBufor.value;
   });
 
-function viewOrder(uuid : string) {
-  siteControlStore.viewOrder(uuid);
+const datesWithOrders = computed( ()=>{
+  const datesWithOrders = new Map<Date, Array<Order>>();
+  if (dates.value == undefined || orders.value == undefined) {
+    return datesWithOrders;
+  }
+  for (const date of dates.value) {
+    datesWithOrders.set(date, []);
+    for (const order of orders.value) {
+      if (order.MZN_DataDos == date.toString()) {
+        datesWithOrders.get(date)?.push(order);
+      }
+    }
+  }
+  return datesWithOrders;
+})
+
+function viewOrder(order : Order) {
+  order.loading = true;
+  siteControlStore.viewOrder(order.MZN_UUID);
 }
 
 async function fetchOrders(event : Event) {
-  event.preventDefault();
+  event?.preventDefault();
   areOrdersLoading.value = true;
   console.log(searchOrderDate.value);
 
@@ -54,6 +77,7 @@ async function fetchOrders(event : Event) {
   areOrdersLoading.value = false;
 }
 
+fetchOrders(null);
 </script>
 
 <template>
@@ -70,7 +94,6 @@ async function fetchOrders(event : Event) {
                            :highlight="dates"
                            input-class-name="input is-small calendar-background"
                            menu-class-name="calendar-background"
-                           v-bind:dark = "isDarkTheme"
                             range/>
           </div>
         </div>
@@ -92,63 +115,61 @@ async function fetchOrders(event : Event) {
     </form>
     <div class="box">
       <h1 class="mb-3 title is-5"><b>ZAMÓWIENIA</b></h1>
-      <div v-for="date in dates" :key="date">
-        <h1 class="mb-3 subtitle is-6">{{ date }}</h1>
-        <div class="columns is-multiline">
-          <template v-for="order in orders" :key="order.MZN_UUID">
-            <div class="column is-4 mb-3" v-if="order.MZN_DataDos == date">
-              <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 v-for="date in datesWithOrders.keys()" :key="String(date)">
+        <div v-if="datesWithOrders.get(date)?.length != 0">
+          <h1 class="mb-3 subtitle is-6" :class="{'is-skeleton' : areOrdersLoading}">{{ date }}</h1>
+          <div class="columns is-multiline">
+            <template v-for="order in datesWithOrders.get(date)" :key="order.MZN_UUID">
+              <div class="column is-4 mb-3" v-if="order.MZN_DataDos == date.toString()">
+                <div class="box"
+                     :class="{'confirmed' : order.MZN_Bufor == 0 && order.MZN_Anulowane != 1,
+                      'cancelled' : order.MZN_Anulowane == 1,
+                      'is-skeleton' : areOrdersLoading}">
+                  <label class="label is-small" :class="{'is-invisible': areOrdersLoading}">Klient</label>
+                  <div class="field is-small mb-3" :class="{'is-invisible': areOrdersLoading}">
+                    <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" :class="{'is-invisible': areOrdersLoading}">
+                      <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" :class="{'is-invisible': areOrdersLoading}">Zamówienie potwierdzone?</label>
+                      <div class="field is-small" :class="{'is-invisible': areOrdersLoading}" v-if="order.MZN_Bufor==0">
+                        <input class="input is-small is-static"
+                               type="text"
+                               value="Tak"
+                               readonly/>
+                      </div>
+                      <div class="field is-small" :class="{'is-invisible': areOrdersLoading}" v-else>
+                        <input class="input is-small is-static"
+                               type="text"
+                               value="Nie"
+                               readonly/>
+                      </div>
                     </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>
+                  <label class="label is-small mb-5" :class="{'is-invisible': areOrdersLoading}">Produkty</label>
+                  <div class="field columns is-multiline is-mobile">
+                    <template v-for="product in order.MZamElem" :key="product.MZE_TwrKod">
+                      <div class="column is-6 py-0">{{ product.MZE_TwrKod }}</div>
+                      <div class="column is-6 py-0">{{Number(product.MZE_TwrIlosc).toFixed(2) + " " + product.MZE_TwrJm}}</div>
+                    </template>
                   </div>
+                  <button class="button is-info is-small is-expanded" :class="{'is-invisible': areOrdersLoading, 'is-loading': order.loading}" @click="viewOrder(order)">Podgląd</button>
                 </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>
-                <label class="label is-small mb-5">Produkty</label>
-                <div class="field columns is-multiline is-mobile">
-                  <template v-for="product in order.MZamElem" :key="product.MZE_TwrKod">
-                    <div class="column is-6 py-0">{{ product.MZE_TwrKod }}</div>
-                    <div class="column is-6 py-0">{{Number(product.MZE_TwrIlosc).toFixed(2) + " " + product.MZE_TwrJm}}</div>
-                  </template>
-                </div>
-                <button class="button is-info is-small is-expanded" @click="viewOrder(order.MZN_UUID)" :name="order.MZN_UUID">Podgląd</button>
               </div>
-            </div>
-          </template>
+            </template>
+          </div>
         </div>
       </div>
     </div>

src/components/SummaryComponent.vue

@@ -0,0 +1,166 @@
+<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 { onMounted, ref } from 'vue'
+  import { useCategoriesStore } from '@/stores/categories.store'
+
+  const ordersStore = useOrdersStore();
+  const siteControlStore = useSiteControlStore();
+  const categoriesStore = useCategoriesStore();
+
+  const { orders, dates } = 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();
+  const isLoading = ref<boolean>(true);
+
+  async function fetchOrders() {
+    isLoading.value=true;
+    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);
+    isLoading.value=false;
+  }
+
+  onMounted(async () => {
+    orders.value = await ordersStore.fetchOrdersByDay(searchDate.value, null);
+    await categoriesStore.sumProductsFromOrders(orders.value);
+    isLoading.value=false;
+  });
+</script>
+
+<template>
+  <div class="columns box is-shadowless" style="margin: 0.5rem 0 0; padding: 0; min-height: 100%">
+    <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"
+                       :highlight = "dates"
+        />
+
+        <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" style="width: 100%; height: 100%; align-content: space-evenly;">
+        <div class="is-flex is-justify-content-center is-flex-direction-row" id="printMe" style="">
+          <div v-if="isLoading == true" class="title is-1 has-text-centered element is-loading" style="height: 25%; align-self: center;"></div>
+          <table class="table blackBorder tableOverflow" v-else-if="orders != undefined && orders.length != 0 && !isSummed">
+            <thead style="width: 100%">
+            <tr class="has-background-grey-light">
+              <th>Indeks</th>
+              <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="6">
+                {{ order.MZN_PodNazwa1 + order.MZN_PodNazwa2 + order.MZN_PodNazwa3 }}
+              </td>
+            </tr>
+            <tr v-for="product in order.MZamElem" :key="product.MZE_MZEID">
+              <td>{{product.MZE_TwrKod}}</td>
+              <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>Indeks</th>
+              <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_Kod}}</td>
+                  <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_Kod}}</td>
+                  <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>