Small changes and fixes, highlight days on the calendar

src/views/MainView.vue

@@ -1,20 +1,22 @@
-<template>
+<template class="has-navbar-fixed-top">
   <NavBar/>
 
   <div v-if="isLoading">
     <LoadingComponent/>
   </div>
   <div v-else>
-    <div v-if="shownComponent == 'mainForm'">
+    <OrdersSelector class="box is-shadowless" v-if="shownComponent == 'orderSelector'"
+    />
+    <div v-else>
       <MainForm
         v-if="order == undefined || order.MZN_Bufor==1"
       />
       <ConfirmedForm v-else-if="order.MZN_Bufor==0"/>
     </div>
-    <OrdersSelector class="box is-shadowless" v-else-if="shownComponent == 'orderSelector'"
-    />
+
   </div>
-  <ConfirmationModal v-show="showConfirmationModal" @close="showConfirmationModal = false" @confirm="closeConfirmationModal" :order-uuid="uuid"></ConfirmationModal>
+  <ConfirmationModal v-show="showConfirmationModal" @close="showConfirmationModal = false"></ConfirmationModal>
+  <CancelationModal v-show="showCancellationModal" @close="showCancellationModal = false"></CancelationModal>
 <!--  <button class="button" @click="test">test</button>-->
 </template>
 
@@ -37,32 +39,16 @@ const contractor = storeToRefs(contractorsStore).contractor;
 const categories = storeToRefs(categoriesStore).categories;
 const { uuid, order } = storeToRefs(ordersStore);
 const { username } = storeToRefs(userStore);
-const { showConfirmationModal, isLoading, shownComponent } = storeToRefs(siteControlStore);
+const { showConfirmationModal, showCancellationModal, isLoading, shownComponent } = storeToRefs(siteControlStore);
 
 
 async function  fetchData() {
   await categoriesStore.fetchCategories();
   await contractorsStore.fetchContractors();
-  const usernameString = localStorage.getItem("username");
-  if(usernameString != null) {
-    username.value = usernameString;
-  }
+  siteControlStore.newOrder(false);
+
   isLoading.value = false;
 }
-
-function test() {
-  console.log(getActivePinia());
-}
-
-function closeConfirmationModal() {
-  showConfirmationModal.value = false;
-  if (uuid.value != undefined) {
-    isLoading.value = true;
-    ordersStore.loadOrder(uuid.value, true, contractor, contractors, categories);
-  }
-}
-
-console.log(localStorage.getItem('piniaState'));
 siteControlStore.checkTheme();
 fetchData();
 </script>

src/views/SummedOrdersView.vue

@@ -18,6 +18,7 @@ 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);
@@ -62,46 +63,48 @@ categoriesStore.sumProductsFromOrders(orders.value);
       </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>
+        <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: 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>
+      <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">
@@ -118,9 +121,10 @@ categoriesStore.sumProductsFromOrders(orders.value);
                 </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>
+            </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>
@@ -147,4 +151,11 @@ categoriesStore.sumProductsFromOrders(orders.value);
   overflow-x: scroll;
   display: block;
 }
+
+@media print {
+  .dashedBorder{
+    border-style: dotted;
+    border-color: lightgray;
+  }
+}
 </style>