Table summary of orders

src/views/LoginView.vue

@@ -12,15 +12,12 @@ const schema = Yup.object().shape({
 });
 
 async function onSubmit(values : any, { setErrors } : any) {
-  const { username, password, errors } = values;
-
-  console.log(username + ' ' + password);
+  const { username, password } = values;
 
   const body = await axiosInstance.post('/login', {
     username: username,
     password: password
   }).catch ((error) => {
-    console.log(error.response);
     if(error.response.status == 401) {
       setErrors({ apiError: "unauthorized" })
     }
@@ -77,7 +74,3 @@ async function onSubmit(values : any, { setErrors } : any) {
 
   </div>
 </template>
-
-<style scoped>
-
-</style>

src/views/MainView.vue

@@ -4,23 +4,24 @@
   <div v-if="isLoading">
     <LoadingComponent/>
   </div>
-  <div v-else>
-    <div v-if="isForm">
+  <div>
+    <div v-if="shownComponent == 'mainForm'">
       <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="isOrders"
+    <OrdersSelector class="box is-shadowless" v-else-if="shownComponent == 'orderSelector'"
     />
   </div>
   <ConfirmationModal v-show="showConfirmationModal" @close="showConfirmationModal = false" @confirm="closeConfirmationModal" :order-uuid="uuid"></ConfirmationModal>
+  <button class="button" @click="test">test</button>
 </template>
 
 <script setup lang="ts">
 import '@/assets/base.css'
 import { useContractorsStore } from '@/stores/contractors.store'
-import { storeToRefs } from 'pinia'
+import { getActivePinia, storeToRefs } from 'pinia'
 import { useCategoriesStore } from '@/stores/categories.store'
 import { useOrdersStore } from '@/stores/orders.store'
 import { useSiteControlStore } from '@/stores/siteControl.store'
@@ -36,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 } = storeToRefs(siteControlStore);
+const { isForm, isOrders, showConfirmationModal, isLoading, shownComponent } = storeToRefs(siteControlStore);
 
 
 async function  fetchData() {
@@ -49,6 +50,10 @@ async function  fetchData() {
   isLoading.value = false;
 }
 
+function test() {
+  console.log(getActivePinia());
+}
+
 function closeConfirmationModal() {
   showConfirmationModal.value = false;
   if (uuid.value != undefined) {
@@ -57,6 +62,7 @@ function closeConfirmationModal() {
   }
 }
 
+console.log(localStorage.getItem('piniaState'));
 siteControlStore.checkTheme();
 fetchData();
 </script>

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>

src/views/index.ts

@@ -1,2 +1,3 @@
 export { default as LoginView } from "./LoginView.vue";
 export { default as MainView } from "./MainView.vue";
+export { default as SummedOrdersView } from "./SummedOrdersView.vue"