From eeac03235b7c619c3adecf4079f8c738e0c5cf8a Mon Sep 17 00:00:00 2001
From: patrykb <patryk.binkowski21@gmail.com>
Date: Mon, 9 Sep 2024 13:27:25 +0200
Subject: [PATCH] Nowe pole Trasa

---
 src/components/ConfirmationModal.vue |   8 +-
 src/components/ConfirmedForm.vue     |  13 +++
 src/components/MainForm.vue          | 114 ++++++++++++++++++++++-----
 src/main.ts                          |   6 ++
 src/stores/orders.store.ts           |   5 +-
 src/stores/routes.store.ts           |  17 ++++
 src/stores/siteControl.store.ts      |   8 +-
 src/views/MainView.vue               |   3 +
 8 files changed, 149 insertions(+), 25 deletions(-)
 create mode 100644 src/stores/routes.store.ts

diff --git a/src/components/ConfirmationModal.vue b/src/components/ConfirmationModal.vue
index 0c65d95..45756ed 100644
--- a/src/components/ConfirmationModal.vue
+++ b/src/components/ConfirmationModal.vue
@@ -5,23 +5,27 @@ import { axiosInstance } from '@/main'
 import { useSiteControlStore } from '@/stores/siteControl.store'
 import { useContractorsStore } from '@/stores/contractors.store'
 import { useCategoriesStore } from '@/stores/categories.store'
+import { useRoute } from 'vue-router'
+import { useRoutesStore } from '@/stores/routes.store'
 
 const ordersStore = useOrdersStore();
 const siteControlStore = useSiteControlStore();
 const contractorStore = useContractorsStore();
 const categoriesStore = useCategoriesStore();
+const routeStore = useRoutesStore();
 
 const { contractor, contractors } = storeToRefs(contractorStore);
 const { categories } = storeToRefs(categoriesStore);
 const { uuid } = storeToRefs(ordersStore);
 const { showConfirmationModal, isLoading} = storeToRefs(siteControlStore);
+const { route, routes } = storeToRefs(routeStore);
 
 async function confirmOrder() {
   await axiosInstance.put('/zamowienie/' + uuid.value);
   showConfirmationModal.value = false;
-  if (uuid.value != undefined) {
+  if (uuid.value != undefined && route.value != undefined) {
     isLoading.value = true;
-    await ordersStore.loadOrder(uuid.value, true, contractor, contractors, categories);
+    await ordersStore.loadOrder(uuid.value, true, contractor, contractors, categories, route, routes);
     isLoading.value = false;
   }
 }
diff --git a/src/components/ConfirmedForm.vue b/src/components/ConfirmedForm.vue
index 29f312a..4101a5d 100644
--- a/src/components/ConfirmedForm.vue
+++ b/src/components/ConfirmedForm.vue
@@ -5,10 +5,12 @@ import { storeToRefs } from 'pinia'
 import { useCategoriesStore } from '@/stores/categories.store'
 import { useContractorsStore } from '@/stores/contractors.store'
 import { axiosInstance } from '@/main'
+import { useRoutesStore } from '@/stores/routes.store'
 
 const ordersStore = useOrdersStore();
 const categoriesStore = useCategoriesStore();
 const contractorsStore = useContractorsStore();
+const routeStore = useRoutesStore();
 
 const { order, uuid} = storeToRefs(ordersStore);
 
@@ -16,6 +18,8 @@ const { categories } = storeToRefs(categoriesStore);
 
 const { contractor } = storeToRefs(contractorsStore);
 
+const { route } = storeToRefs(routeStore);
+
 function cancelOrder(event: Event) {
   event.preventDefault();
   axiosInstance.delete('/zamowienie/' + uuid.value);
@@ -63,6 +67,15 @@ function cancelOrder(event: Event) {
               hide-input-icon/>
           </div>
         </div>
+        <div class="field mb-3" v-if="route != undefined">
+          <label class="label is-small">Trasa</label>
+          <div class="field is-small mb-3">
+            <input class="input is-small is-static"
+                   type="text"
+                   :value="route.MZT_Nazwa1"
+                   readonly/>
+          </div>
+        </div>
         <button class="button is-danger" @click="cancelOrder">Anuluj zamówienie</button>
       </div>
     </div>
diff --git a/src/components/MainForm.vue b/src/components/MainForm.vue
index c62b062..0f1c374 100644
--- a/src/components/MainForm.vue
+++ b/src/components/MainForm.vue
@@ -1,34 +1,40 @@
 <script setup lang="ts">
 import VueDatePicker from '@vuepic/vue-datepicker';
-import { axiosInstance, type Contractor, type OrderProduct } from '@/main'
+import { axiosInstance, type Contractor, type OrderProduct, type Route } from '@/main'
 import { useCategoriesStore } from '@/stores/categories.store'
 import { useContractorsStore } from '@/stores/contractors.store'
 import { useOrdersStore } from '@/stores/orders.store'
 import { storeToRefs } from 'pinia'
 import { useSiteControlStore } from '@/stores/siteControl.store'
 import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+import { useRoutesStore } from '@/stores/routes.store'
 
 const categoriesStore = useCategoriesStore();
 const contractorsStore = useContractorsStore();
 const ordersStore = useOrdersStore();
 const siteControlStore = useSiteControlStore();
+const routesStore = useRoutesStore();
 
 const { contractor, contractors } = storeToRefs(contractorsStore);
 const { deliveryDate, uuid, additionalNotes } = storeToRefs(ordersStore);
 const { categories } = storeToRefs(categoriesStore);
 const { showConfirmationModal, showCancellationModal, isDarkTheme } = storeToRefs(siteControlStore);
+const { route, routes } = storeToRefs(routesStore);
 
 const contractorSearch = ref<string>();
 const filteredContractors = ref<Array<Contractor>>();
 const showContractorsDropdown = ref<boolean>(false);
 const contractorInput = ref(null);
 
+const routeSearch = ref<string>();
+const filteredRoutes = ref<Array<Route>>();
+const showRoutesDropdown = ref<boolean>(false);
+const routeInput = 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) => {
   if(contractor == undefined) {
@@ -38,9 +44,16 @@ watch(contractor, (contractor) => {
   }
 }, { immediate: true });
 
+watch(route, (route) => {
+  if(route == undefined) {
+    routeSearch.value = '';
+  } else {
+    routeSearch.value = route.MZT_Nazwa1;
+  }
+}, { immediate: true });
+
 function createJSON(event: Event) {
   event.preventDefault();
-  console.log(route);
   console.log(deliveryDate.value);
   if(typeof deliveryDate.value != typeof Date) {
     deliveryDate.value = new Date(deliveryDate.value as unknown as string);
@@ -50,6 +63,7 @@ function createJSON(event: Event) {
     MZN_DataZam: new Date(Date.now()).toISOString(),
     MZN_DataDos: deliveryDate.value != undefined ? deliveryDate.value.toISOString().split('T')[0] : null,
     MZN_PodID: contractor.value?.Knt_KntId,
+    MZN_MZTID: route.value?.MZT_MZTID,
     MZamElem: new Array<OrderProduct>
   };
 
@@ -148,36 +162,67 @@ function toggleContractorsDropdown() {
   }
 }
 
-function handleClickOutsideDropdown(event : Event) {
-  if(contractorInput.value != null && !contractorInput.value.contains(event.target)){
-    showContractorsDropdown.value = false;
-  }
-}
-
 function selectContractorFromDropdown(selectedContractor : Contractor) {
   console.log(selectedContractor);
   contractor.value = selectedContractor;
   showContractorsDropdown.value = false;
 }
 
+function filterRoutes() {
+  if (routeSearch.value == "") {
+    route.value = undefined;
+    filteredRoutes.value = routes.value;
+    return;
+  }
+  if(routes.value != undefined) {
+    filteredRoutes.value = routes.value.filter(
+      route =>
+        route.MZT_Nazwa1.toLowerCase().includes(routeSearch.value?.toLowerCase() as string)
+    );
+  }
+}
+
+function toggleRoutesDropdown() {
+  if(!showRoutesDropdown.value) {
+    showRoutesDropdown.value = true;
+    if(routeSearch.value == undefined || routeSearch.value == '') {
+      filteredRoutes.value = routes.value;
+    }
+  }
+}
+
+function selectRouteFromDropdown(selectedRoute : Route) {
+  route.value = selectedRoute;
+  showRoutesDropdown.value = false;
+}
+
+function handleClickOutsideDropdown(event : Event) {
+  if(contractorInput.value != null && !contractorInput.value.contains(event.target)){
+    showContractorsDropdown.value = false;
+  }
+  if(routeInput.value != null && !routeInput.value.contains(event.target)){
+    showRoutesDropdown.value = false;
+  }
+}
+
 onMounted(function (){
   document.addEventListener('click', handleClickOutsideDropdown);
 });
 
 onBeforeUnmount( function () {
   document.removeEventListener('click', handleClickOutsideDropdown);
-})
+});
 </script>
 
 <template>
   <form class="box is-shadowless" @submit.prevent="createJSON">
     <div>
-      <div class="box">
+      <div class="box mb-5">
         <div class="mb-3">
           <h1 class="title is-5"><b>ZAMÓWIENIE</b></h1>
           <h1 class="subtitle is-5" v-if="uuid != undefined" ><b>{{ uuid }}</b></h1>
         </div>
-        <div class="field mb-5">
+        <div class="field mb-3">
           <label class="label is-small">Klient</label>
           <div class="field">
             <div ref="contractorInput" class="dropdown maxwidth"
@@ -204,7 +249,7 @@ onBeforeUnmount( function () {
             </div>
           </div>
         </div>
-        <div class="field">
+        <div class="field mb-3">
           <label class="label is-small">Data dostawy</label>
           <div class="field is-small">
             <VueDatePicker class ="bulma-is-small"
@@ -217,7 +262,36 @@ onBeforeUnmount( function () {
             />
           </div>
         </div>
-        <div class="field mt-5">
+        <div class="field mb-3">
+          <label class="label is-small">Trasa</label>
+          <div class="field">
+            <div ref="routeInput" class="dropdown maxwidth"
+                 v-bind:class="{'is-active': showRoutesDropdown == true}">
+              <div class="dropdown-trigger maxwidth" @click="toggleRoutesDropdown">
+                <div class="field maxwidth">
+                  <p class="control is-expanded has-icons-right is-small maxwidth">
+                    <input class="input is-small is-expanded maxwidth" type="search"
+                           v-model="routeSearch" @input="filterRoutes" />
+                    <span class="icon is-small is-right"><i class="fas fa-search"></i></span>
+                  </p>
+                </div>
+              </div>
+              <div class="dropdown-menu is-clipped has-background-info-on-scheme-invert" id="dropdown-menu" role="menu" style="max-width: calc(100vw - 3rem); box-shadow: 0px 0px 6px -1px rgba(165, 165, 165, 0.8); border-radius: 10px 10px 10px 10px; overflow-x:auto">
+                <div class="dropdown-content" style="max-height: 50vh; overflow-x: auto">
+                  <a v-if="filteredRoutes != undefined && filteredRoutes.length == 0" class="dropdown-item is-clipped">Brak wyników</a>
+                  <a class="dropdown-item is-clipped" @click = "selectRouteFromDropdown(dropdownRoute)"
+                     v-bind:class = "{'has-background-info' : route == null}">Brak</a>
+                  <a v-for="dropdownRoute in filteredRoutes" v-bind:key="dropdownRoute.MZT_MZTID"
+                     class="dropdown-item is-clipped" @click = "selectRouteFromDropdown(dropdownRoute)"
+                     v-bind:class = "{'has-background-info' : dropdownRoute == route}">
+                    {{dropdownRoute.MZT_Nazwa1}}
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="field">
           <label class="label is-small">Uwagi do zamówienia</label>
           <textarea
             v-model="additionalNotes"
@@ -226,14 +300,14 @@ onBeforeUnmount( function () {
             rows="5"
           ></textarea>
         </div>
-        <button class="button is-info mt-5">Zapisz</button>
-        <button class="button is-success mt-5 ml-3" @click="setConfirmationModal" v-bind:disabled="uuid == undefined">Potwierdź</button>
-        <button class="button is-danger mt-5 ml-3" @click="cancelOrder" v-bind:disabled="uuid == undefined">Anuluj</button>
-        <div v-if="showErrorNotification" class="notification is-danger is-bold mt-5">
+        <button class="button is-info mt-3">Zapisz</button>
+        <button class="button is-success mt-3 ml-3" @click="setConfirmationModal" v-bind:disabled="uuid == undefined">Potwierdź</button>
+        <button class="button is-danger mt-3 ml-3" @click="cancelOrder" v-bind:disabled="uuid == undefined">Anuluj</button>
+        <div v-if="showErrorNotification" class="notification is-danger is-bold mt-3">
           <button  class="delete" @click.prevent="showErrorNotification = false"></button>
           {{ errorNotificationMessage }}
         </div>
-        <div v-if="showSuccessNotification" class="notification is-success is-bold mt-5">
+        <div v-if="showSuccessNotification" class="notification is-success is-bold mt-3">
           <button  class="delete" @click.prevent="showSuccessNotification = false"></button>
           {{ successNotificationMessage }}
         </div>
diff --git a/src/main.ts b/src/main.ts
index 9f26861..8c348bb 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -149,6 +149,7 @@ export interface Order {
   MZN_TypDokumentu: number,
   MZN_UUID: string,
   MZN_Uwagi: string,
+  MZN_MZTID: number,
   MZamElem: Array<OrderProduct>
 }
 
@@ -164,3 +165,8 @@ export interface OrderProduct {
   MZE_TwrStawka: string | undefined,
 }
 
+export interface Route {
+  MZT_MZTID: number,
+  MZT_Nazwa1: string
+}
+
diff --git a/src/stores/orders.store.ts b/src/stores/orders.store.ts
index c42dffe..a62e99a 100644
--- a/src/stores/orders.store.ts
+++ b/src/stores/orders.store.ts
@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia'
-import type { Category, Contractor, Order } from '@/main'
+import type { Category, Contractor, Order, Route } from '@/main'
 import { type Ref, ref } from 'vue'
 import { axiosInstance } from '@/main'
 
@@ -70,7 +70,7 @@ export const useOrdersStore = defineStore('orders', () => {
     return datesTemp;
   }
 
-  async function loadOrder(uuidString: string, confirmed: boolean, contractor: Ref<Contractor|undefined>, contractors: Ref<Array<Contractor>>, categories: Ref<Array<Category>>) {
+  async function loadOrder(uuidString: string, confirmed: boolean, contractor: Ref<Contractor|undefined>, contractors: Ref<Array<Contractor>>, categories: Ref<Array<Category>>, route: Ref<Route|undefined>, routes: Ref<Array<Route>|undefined>) {
     const response = await axiosInstance.get('/zamowienie/' + uuidString);
     const tempOrder = response.data;
     console.log(tempOrder);
@@ -80,6 +80,7 @@ export const useOrdersStore = defineStore('orders', () => {
     }
 
     contractor.value = <Contractor>contractors.value?.find((contractor) => contractor.Knt_KntId == tempOrder.MZN_PodID);
+    route.value = <Route>routes.value?.find((route) => route.MZT_MZTID == tempOrder.MZN_MZTID);
     deliveryDate.value = new Date(tempOrder.MZN_DataDos);
     orderDate.value = new Date(tempOrder.MZN_DataZam);
     uuid.value = uuidString;
diff --git a/src/stores/routes.store.ts b/src/stores/routes.store.ts
new file mode 100644
index 0000000..125c05e
--- /dev/null
+++ b/src/stores/routes.store.ts
@@ -0,0 +1,17 @@
+import { defineStore } from 'pinia'
+import type { Route } from '@/main'
+import { ref } from 'vue'
+import { axiosInstance } from '@/main'
+
+export const useRoutesStore = defineStore('routes', () => {
+  const routes = ref<Array<Route>>();
+  const route = ref<Route>();
+
+  async function fetchRoutes() {
+    const response = await axiosInstance.get('/trasy', {withCredentials: true});
+    routes.value = [];
+    routes.value.push(...response.data);
+  }
+
+  return {routes, route, fetchRoutes};
+});
\ No newline at end of file
diff --git a/src/stores/siteControl.store.ts b/src/stores/siteControl.store.ts
index 915711f..343494a 100644
--- a/src/stores/siteControl.store.ts
+++ b/src/stores/siteControl.store.ts
@@ -5,6 +5,7 @@ import type { Order } from '@/main'
 import { useContractorsStore } from '@/stores/contractors.store'
 import { useCategoriesStore } from '@/stores/categories.store'
 import { router } from '@/router/router'
+import { useRoutesStore } from '@/stores/routes.store'
 
 export const useSiteControlStore = defineStore('siteControl', () => {
   const shownComponent = ref<string>("mainForm");
@@ -46,12 +47,14 @@ export const useSiteControlStore = defineStore('siteControl', () => {
     const orderStore = useOrdersStore();
     const contractorsStore = useContractorsStore();
     const categoriesStore = useCategoriesStore();
+    const routeStore = useRoutesStore();
     shownComponent.value = "mainForm";
     isLoading.value = true;
     await categoriesStore.fetchCategories();
     const { contractor, contractors } = storeToRefs(contractorsStore);
     const { categories } = storeToRefs(categoriesStore);
-    await orderStore.loadOrder(uuid, false, contractor, contractors, categories);
+    const { route, routes } = storeToRefs( routeStore );
+    await orderStore.loadOrder(uuid, false, contractor, contractors, categories, route, routes);
     isLoading.value=false;
     await router.push("/");
   }
@@ -60,13 +63,16 @@ export const useSiteControlStore = defineStore('siteControl', () => {
     const ordersStore = useOrdersStore();
     const contractorsStore = useContractorsStore();
     const categoriesStore = useCategoriesStore();
+    const routeStore = useRoutesStore();
     const { order, uuid, deliveryDate, orderDate } = storeToRefs(ordersStore);
     const { contractor } = storeToRefs(contractorsStore);
+    const { route } = storeToRefs(routeStore);
     contractor.value = undefined;
     order.value = undefined;
     uuid.value = undefined;
     deliveryDate.value = undefined;
     orderDate.value = undefined;
+    route.value = undefined;
     await categoriesStore.fetchCategories();
     if (redirect) {
       await router.push("/");
diff --git a/src/views/MainView.vue b/src/views/MainView.vue
index 26b10ca..6160ba4 100644
--- a/src/views/MainView.vue
+++ b/src/views/MainView.vue
@@ -23,12 +23,14 @@ import { useCategoriesStore } from '@/stores/categories.store'
 import { useOrdersStore } from '@/stores/orders.store'
 import { useSiteControlStore } from '@/stores/siteControl.store'
 import { useUserStore } from '@/stores/user.store'
+import { useRoutesStore } from '@/stores/routes.store'
 
 const contractorsStore = useContractorsStore();
 const categoriesStore = useCategoriesStore();
 const ordersStore = useOrdersStore();
 const siteControlStore = useSiteControlStore();
 const userStore = useUserStore();
+const routesStore = useRoutesStore();
 const contractors = storeToRefs(contractorsStore).contractors;
 const contractor = storeToRefs(contractorsStore).contractor;
 const categories = storeToRefs(categoriesStore).categories;
@@ -40,6 +42,7 @@ const { showConfirmationModal, showCancellationModal, isLoading, shownComponent
 async function  fetchData() {
   //await categoriesStore.fetchCategories();
   await contractorsStore.fetchContractors();
+  await routesStore.fetchRoutes();
   //siteControlStore.newOrder(false);
   isLoading.value = false;
 }