From 93c015fcb766320be4b5a3625cecfcfee1222fb2 Mon Sep 17 00:00:00 2001
From: patrykb <patryk.binkowski21@gmail.com>
Date: Tue, 18 Jun 2024 15:27:10 +0200
Subject: [PATCH] Added loading placeholders and couple functionalities

---
 src/App.vue                          | 148 +++++++++++++++++----------
 src/components/ConfirmationModal.vue |   4 +-
 src/components/ConfirmedForm.vue     |   6 +-
 src/components/LoadingComponent.vue  |  16 +++
 src/components/OrdersSelector.vue    |  37 ++++---
 src/main.ts                          |   4 +-
 6 files changed, 143 insertions(+), 72 deletions(-)
 create mode 100644 src/components/LoadingComponent.vue

diff --git a/src/App.vue b/src/App.vue
index 2e8ac78..fc0e661 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,44 +1,42 @@
 <template>
   <NavBar @form="switchToFrom" @order="switchToOrders"/>
 
-  <div v-if="isForm">
-    <MainForm
-      v-if="order == undefined || order.MZN_Bufor==1"
-      :is-dark-theme="isDarkTheme"
-      v-model:order-uuid="uuid"
-      v-model:contractors="contractors"
-      v-model:categories="categories"
-      v-model:contractor="contractor"
-      v-model:delivery-date="deliveryDate"
-      v-model:show-modal="showModal"
-    />
-    <ConfirmedForm v-else-if="order.MZN_Bufor==0"
-      :order-date="orderDate"
-      :uuid = "uuid"
-      :delivery-date="deliveryDate"
-      v-model:contractor="contractor"
-      v-model:categories="categories"
-      v-model:order="order">
-    </ConfirmedForm>
+  <div v-if="isLoading">
+    <LoadingComponent/>
   </div>
-  <OrdersSelector class="box is-shadowless" v-else-if="isOrders"
-                  v-model:uuid="uuid"
-                  v-model:orders="orders"
-                  v-model:contractor="contractor"
-                  v-model:delivery-date="deliveryDate"
-                  v-model:categories="categories"
-                  v-model:contractors="contractors"
-                  v-model:order="order"
-                  @order="viewOrder"
-  />
-
-  <ConfirmationModal v-show="showModal" @close="showModal = false" :order-uuid="uuid"></ConfirmationModal>
+  <div v-else>
+    <div v-if="isForm">
+      <MainForm
+        v-if="order == undefined || order.MZN_Bufor==1"
+        :is-dark-theme="isDarkTheme"
+        v-model:order-uuid="uuid"
+        v-model:contractors="contractors"
+        v-model:categories="categories"
+        v-model:contractor="contractor"
+        v-model:delivery-date="deliveryDate"
+        v-model:show-modal="showModal"
+      />
+      <ConfirmedForm v-else-if="order.MZN_Bufor==0"
+                     :order-date="orderDate"
+                     :uuid = "uuid"
+                     :delivery-date="deliveryDate"
+                     v-model:contractor="contractor"
+                     v-model:categories="categories"
+                     v-model:order="order">
+      </ConfirmedForm>
+    </div>
+    <OrdersSelector class="box is-shadowless" v-else-if="isOrders"
+                    v-model:orders="orders"
+                    @order="viewOrder"
+    />
+  </div>
+  <ConfirmationModal v-show="showModal" @close="showModal = false" @confirm="closeModal" :order-uuid="uuid"></ConfirmationModal>
 </template>
 
 <script setup lang="ts">
 import './assets/style.scss'
 import type { Category, Contractor, Order } from '@/main'
-import { ref, watch } from 'vue'
+import { ref } from 'vue'
 
 const contractors = ref<Array<Contractor>>();
 const contractor = ref<Contractor>();
@@ -52,17 +50,19 @@ const isForm = ref<boolean>(true);
 const isOrders = ref<boolean>(false);
 const showModal = ref<boolean>(false);
 const isDarkTheme = ref<boolean>(false);
+const isLoading = ref<boolean>(true);
 
-async function  fetchData() {
-  const response1 = await fetch('https://zamowienia.mleczarnia-kuzma.pl/api/kontrahenci');
-  contractors.value = await response1.json();
-  console.log(contractors.value);
-  const response2 = await fetch('https://zamowienia.mleczarnia-kuzma.pl/api/towary');
-  categories.value = await response2.json();
-  console.log(categories.value);
+async function fetchContractors() {
+  const response = await fetch('https://zamowienia.mleczarnia-kuzma.pl/api/kontrahenci');
+  contractors.value = await response.json();
+}
+
+async function fetchCategories() {
+  const response = await fetch('https://zamowienia.mleczarnia-kuzma.pl/api/towary');
+  categories.value = await response.json();
   if(categories.value != undefined) {
-    for (let kategoria of categories.value) {
-      for (let product of kategoria.Towary) {
+    for (let category of categories.value) {
+      for (let product of category.Towary) {
         product.Options = new Array(product.Twr_JM);
         product.ChosenOption = product.Twr_JM;
         if (product.Twr_JMZ != null) {
@@ -71,14 +71,26 @@ async function  fetchData() {
       }
     }
   }
+}
 
-  const response3 = await fetch('https://zamowienia.mleczarnia-kuzma.pl/api/zamowienia/bufor');
-  let ordersTemp : Array<Order> = await response3.json();
+async function fetchOrdersInBuffer() {
+  const response = await fetch('https://zamowienia.mleczarnia-kuzma.pl/api/zamowienia/bufor');
+  let ordersTemp : Array<Order> = await response.json();
   orders.value.push(...ordersTemp);
-  const response4 = await fetch('https://zamowienia.mleczarnia-kuzma.pl/api/zamowienia');
-  ordersTemp = await response4.json();
+}
+
+async function fetchOrdersOutOfBuffer() {
+  const response = await fetch('https://zamowienia.mleczarnia-kuzma.pl/api/zamowienia');
+  let ordersTemp : Array<Order> = await response.json();
   orders.value.push(...ordersTemp);
-  console.log(orders.value);
+}
+
+async function  fetchData() {
+  await fetchContractors();
+  await fetchCategories();
+  await fetchOrdersInBuffer();
+  await fetchOrdersOutOfBuffer();
+  isLoading.value = false;
 }
 
 function switchToFrom() {
@@ -88,41 +100,65 @@ function switchToFrom() {
   }
 }
 
-function switchToOrders() {
+async function switchToOrders() {
   if(!isOrders.value) {
+    isLoading.value = true;
     isForm.value = false;
     isOrders.value = true;
+    orders.value = new Array<Order>();
+    await fetchOrdersInBuffer();
+    await fetchOrdersOutOfBuffer();
+    isLoading.value = false;
   }
 }
 
-function activateModal(event : Event) {
-  event.preventDefault();
-  showModal.value = true;
-}
-
 function checkTheme() {
   isDarkTheme.value = !!window?.matchMedia?.('(prefers-color-scheme:dark)')?.matches;
 }
 
-async function viewOrder(event : Event) {
+function viewOrder(event : Event) {
   console.log('parent');
   isForm.value=true;
   isOrders.value=false;
   window.scrollTo(0, 0);
   console.log(event.MZN_UUID);
   if (categories.value == undefined) return;
+  isLoading.value = true;
+  loadOrder(event.MZN_UUID, false);
+}
 
-  const response = await fetch('https://zamowienia.mleczarnia-kuzma.pl/api/zamowienie/' + event.MZN_UUID);
+function closeModal() {
+  showModal.value = false;
+  if (uuid.value != undefined) {
+    isLoading.value = true;
+    loadOrder(uuid.value, true);
+  }
+}
+
+async function loadOrder(uuid: string, confirmed: boolean) {
+  const response = await fetch('https://zamowienia.mleczarnia-kuzma.pl/api/zamowienie/' + uuid);
   let tempOrder = await response.json();
 
+  if(confirmed) {
+    tempOrder.MZN_Bufor = 0;
+  }
+
   contractor.value = contractors.value?.find((contractor) => contractor.Knt_KntId == tempOrder.MZN_PodID);
   deliveryDate.value = new Date(tempOrder.MZN_DataDos);
   orderDate.value = new Date(tempOrder.MZN_DataZam);
   order.value = tempOrder;
+
+  if(categories.value == undefined) {
+    isLoading.value = false;
+    return;
+  }
+
+  console.log(order.value);
+
   for(let orderProduct of tempOrder.MZamElem){
     for(let category of categories.value) {
       let product = category.Towary.find(product => (product.Twr_TwrId == orderProduct.MZE_TwrId));
-      if(product != undefined) {
+      if(product != undefined && orderProduct.MZE_TwrCena != null) {
         product.Twr_Cena = orderProduct.MZE_TwrCena.slice(0, -2);
         product.Quantity = orderProduct.MZE_TwrIlosc.slice(0, -2);
         category.isVisible = true;
@@ -130,7 +166,7 @@ async function viewOrder(event : Event) {
       }
     }
   }
-  window.scrollTo(0, 0);
+  isLoading.value = false;
 }
 
 fetchData();
diff --git a/src/components/ConfirmationModal.vue b/src/components/ConfirmationModal.vue
index c1fb0d3..7a2a37e 100644
--- a/src/components/ConfirmationModal.vue
+++ b/src/components/ConfirmationModal.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const emit = defineEmits(['close']);
+const emit = defineEmits(['close', 'confirm']);
 
 const props = defineProps(
   {
@@ -8,7 +8,7 @@ const props = defineProps(
 );
 
 function confirmOrder() {
-  emit('close');
+  emit('confirm');
   fetch('https://zamowienia.mleczarnia-kuzma.pl/api/zamowienie/' + props.orderUuid, {
     method: 'PUT'
   });
diff --git a/src/components/ConfirmedForm.vue b/src/components/ConfirmedForm.vue
index 431712b..a08e970 100644
--- a/src/components/ConfirmedForm.vue
+++ b/src/components/ConfirmedForm.vue
@@ -12,10 +12,13 @@ const props = defineProps({
   deliveryDate: Date
 })
 
+function cancelOrder(event: Event) {
+  event.preventDefault();
+}
 </script>
 
 <template>
-  <form class="box" @submit="createJSON" style="min-height: 93.5vh">
+  <form class="box" style="min-height: 93.5vh">
     <div class="mb-3">
       <div class="box">
         <h1 class="is-large mb-3"><b>ZAMÓWIENIE</b></h1>
@@ -55,6 +58,7 @@ const props = defineProps({
               hide-input-icon/>
           </div>
         </div>
+        <button class="button is-primary" @click="cancelOrder">Anuluj zamówienie</button>
       </div>
     </div>
     <div v-for="category in categories" :key="category.Kod">
diff --git a/src/components/LoadingComponent.vue b/src/components/LoadingComponent.vue
new file mode 100644
index 0000000..24c7cc5
--- /dev/null
+++ b/src/components/LoadingComponent.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div class="box">
+    <div class="box is-skeleton m-3" style="height: 40vh"></div>
+    <div class="box is-skeleton mb-3 mx-3" style="height: 20vh"></div>
+    <div class="box is-skeleton mb-3 mx-3" style="height: 20vh"></div>
+  </div>
+
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/OrdersSelector.vue b/src/components/OrdersSelector.vue
index 5d25d00..af523c6 100644
--- a/src/components/OrdersSelector.vue
+++ b/src/components/OrdersSelector.vue
@@ -1,19 +1,12 @@
 <script setup lang="ts">
 import VueDatePicker from '@vuepic/vue-datepicker';
-import {ref, watch} from 'vue'
-import type { Category, Contractor, Order } from '@/main'
+import { onRenderTriggered, ref, watch } from 'vue'
+import type { Order } from '@/main'
 
 const searchOrderDate = ref<Date>();
 const isOutOfBufor = ref<boolean>(false);
 const isInBufor = ref<boolean>(false);
 const orders = defineModel<Array<Order>>('orders');
-const uuid = defineModel<string>('uuid');
-const contractor = defineModel<Contractor>('contractor');
-const contractors = defineModel<Array<Contractor>>('contractors');
-const deliveryDate = defineModel<Date>('deliveryDate');
-const categories = defineModel<Array<Category>>('categories');
-const order = defineModel<Order>('order');
-
 
 const emit = defineEmits<{
   order: [order: Order]
@@ -36,12 +29,32 @@ watch(isOutOfBufor, (val) => {
 });
 
 function viewOrder(event: Event | undefined) {
-  console.log(event?.target?.name);
   let tempOrder = orders.value?.find(order => (order.MZN_UUID == event?.target?.name));
   if (tempOrder == undefined) return;
-  console.log(tempOrder);
   emit('order', tempOrder);
 }
+
+async function fetchOrdersInBuffer() {
+  const response = await fetch('https://zamowienia.mleczarnia-kuzma.pl/api/zamowienia/bufor');
+  let ordersTemp : Array<Order> = await response.json();
+  orders.value = ordersTemp;
+}
+
+async function fetchOrdersOutOfBuffer() {
+  const response = await fetch('https://zamowienia.mleczarnia-kuzma.pl/api/zamowienia');
+  let ordersTemp : Array<Order> = await response.json();
+  orders.value = ordersTemp;
+}
+
+async function fetchOrders(event : Event) {
+  event.preventDefault();
+  if(isInBufor.value) {
+    fetchOrdersInBuffer();
+  } else if (isOutOfBufor.value) {
+    fetchOrdersOutOfBuffer();
+  }
+}
+
 </script>
 
 <template>
@@ -71,7 +84,7 @@ function viewOrder(event: Event | undefined) {
             </label>
           </div>
         </div>
-        <button class="button is-primary is-small is-expanded" @click="createJSON">Pobierz zamówienia</button>
+        <button class="button is-primary is-small is-expanded" @click="fetchOrders">Pobierz zamówienia</button>
       </div>
     </form>
     <div class="box">
diff --git a/src/main.ts b/src/main.ts
index 0914c17..73dfc2b 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -7,6 +7,7 @@ import NavBar from '@/components/NavBar.vue';
 import MainForm from '@/components/MainForm.vue';
 import OrdersSelector from '@/components/OrdersSelector.vue'
 import ConfirmedForm from '@/components/ConfirmedForm.vue'
+import LoadingComponent from '@/components/LoadingComponent.vue'
 
 const app = createApp(App)
 app.component('VueDatePicker', VueDatePicker);
@@ -14,7 +15,8 @@ app.component('ConfirmationModal', ConfirmationModal);
 app.component('NavBar', NavBar);
 app.component('MainForm', MainForm);
 app.component('OrdersSelector', OrdersSelector);
-app.component('ConfirmedForm', ConfirmedForm)
+app.component('ConfirmedForm', ConfirmedForm);
+app.component('LoadingComponent', LoadingComponent);
 app.mount('#app');
 
 export interface Category {