Created ConfirmedForm.vue

2024-06-14 17:37:47 +02:00
parent a289c8dd0f
commit 2fecc061e2
5 changed files with 221 additions and 50 deletions
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,28 +1,38 @@
 <template>
  <NavBar @form="switchToFrom" @order="switchToOrders"/>

-  <MainForm v-if="isForm"
-            :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"
-  />
-
-
+  <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:uuid="uuid"
                  v-model:orders="orders"
                  v-model:contractor="contractor"
                  v-model:delivery-date="deliveryDate"
                  v-model:categories="categories"
-                  @order="isForm=true; isOrders=false"
+                  v-model:contractors="contractors"
+                  v-model:order="order"
+                  @order="viewOrder"
  />
+
  <ConfirmationModal v-show="showModal" @close="showModal = false" :order-uuid="uuid"></ConfirmationModal>
-  <button class="button" @click="console.log(categories); console.log(contractor); console.log(deliveryDate)">test</button>
-  <button class="button" @click="activateModal">test</button>
 </template>

 <script setup lang="ts">
@@ -31,11 +41,12 @@ import type { Category, Contractor, Order } from '@/main'
 import { ref, watch } from 'vue'

 const contractors = ref<Array<Contractor>>();
-const contractor = ref<number>();
+const contractor = ref<Contractor>();
 const categories = ref<Array<Category>>();
 const orders = ref<Array<Order>>(new Array<Order>());
 const order = ref<Order>();
 const deliveryDate = ref<Date>();
+const orderDate = ref<Date>();
 const uuid = ref<string>();
 const isForm = ref<boolean>(true);
 const isOrders = ref<boolean>(false);
@@ -93,6 +104,35 @@ function checkTheme() {
  isDarkTheme.value = !!window?.matchMedia?.('(prefers-color-scheme:dark)')?.matches;
 }

+async 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;
+
+  const response = await fetch('https://zamowienia.mleczarnia-kuzma.pl/api/zamowienie/' + event.MZN_UUID);
+  let tempOrder = await response.json();
+
+  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;
+  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) {
+        product.Twr_Cena = orderProduct.MZE_TwrCena.slice(0, -2);
+        product.Quantity = orderProduct.MZE_TwrIlosc.slice(0, -2);
+        category.isVisible = true;
+        break;
+      }
+    }
+  }
+  window.scrollTo(0, 0);
+}
+
 fetchData();
 checkTheme();
 </script>
@@ -111,7 +151,6 @@ checkTheme();

 :root {
  min-height: 100vh;
-  --dp-background-color: rgb(20, 22, 26);
 }

 body {
--- a/src/components/ConfirmedForm.vue
+++ b/src/components/ConfirmedForm.vue
@@ -0,0 +1,129 @@
+<script setup lang="ts">
+import type { Category, Contractor, Order } from '@/main'
+import VueDatePicker from '@vuepic/vue-datepicker'
+
+const order = defineModel<Order>('order');
+const categories = defineModel<Array<Category>>('categories');
+const contractor = defineModel<Contractor>('contractor');
+
+const props = defineProps({
+  orderDate: Date,
+  uuid: String,
+  deliveryDate: Date
+})
+
+</script>
+
+<template>
+  <form class="box" @submit="createJSON" style="min-height: 93.5vh">
+    <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>
+        <div class="field mb-3" v-if="contractor != undefined">
+          <label class="label is-small">Klient</label>
+          <div class="field is-small mb-3">
+            <input class="input is-small is-static"
+                   type="text"
+                   :value="contractor.Knt_Nazwa1 + contractor.Knt_Nazwa2 + contractor.Knt_Nazwa3"
+                   readonly/>
+          </div>
+        </div>
+        <div class="field mb-3" v-if="order != undefined">
+          <label class="label is-small">Data dostawy</label>
+          <div class="field is-small">
+            <VueDatePicker
+              v-model="order.MZN_DataDos"
+              :enable-time-picker="false"
+              :clearable="true"
+              input-class-name="input is-small calendar-background is-static"
+              menu-class-name="calendar-background"
+              readonly
+              hide-input-icon/>
+          </div>
+        </div>
+        <div class="field mb-3" v-if="order != undefined">
+          <label class="label is-small">Data zamówienia</label>
+          <div class="field is-small">
+            <VueDatePicker
+              v-model="order.MZN_DataZam"
+              :enable-time-picker="false"
+              :clearable="true"
+              input-class-name="input is-small calendar-background is-static"
+              menu-class-name="calendar-background"
+              readonly
+              hide-input-icon/>
+          </div>
+        </div>
+      </div>
+    </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>
+        <div class="field" v-for="(product) in category.Towary" :key="product.Twr_Nazwa">
+          <div v-if="product.Quantity > 0" class="mb-3">
+            <label class="label is-small">{{ product.Twr_Nazwa }}</label>
+            <div class="columns is-mobile">
+              <div class="column">
+                <div class="field">
+                  <p class="control is-expanded">
+                    <input class="input is-small is-static" type="text" placeholder="Ilość" :value="product.Quantity + ' ' + product.ChosenOption" readonly>
+                  </p>
+                </div>
+              </div>
+              <div class="column" v-if="product.ChosenOption == product.Twr_JM">
+                <div class="field">
+                  <input
+                    class="input is-small is-static"
+                    type="text"
+                    placeholder="Kwota"
+                    :value="product.Twr_Cena + ' PLN'"
+                    readonly
+                  />
+                </div>
+              </div>
+              <div class="column" v-else-if="product.ChosenOption == product.Twr_JMZ">
+                <div class="field">
+                  <input
+                    class="input is-small is-static"
+                    type="text"
+                    placeholder="Kwota"
+                    :value="product.Twr_CenaZ + ' PLN'"
+                    readonly
+                  />
+                </div>
+              </div>
+              <div class="column" v-if="product.ChosenOption == product.Twr_JM">
+                <div class="field">
+                  <input
+                    class="input is-small is-static"
+                    type="text"
+                    placeholder="Kwota"
+                    :value="(Number(product.Twr_Cena) * product.Quantity).toFixed(2) + ' PLN'"
+                    readonly
+                  />
+                </div>
+              </div>
+              <div class="column" v-else-if="product.ChosenOption == product.Twr_JMZ">
+                <div class="field">
+                  <input
+                    class="input is-small is-static"
+                    type="text"
+                    placeholder="Kwota"
+                    :value="(Number(product.Twr_CenaZ) * product.Quantity).toFixed(2) + ' PLN'"
+                    readonly
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+
+        </div>
+      </div>
+    </div>
+  </form>
+</template>
+
+<style scoped>
+
+</style>
--- a/src/components/MainForm.vue
+++ b/src/components/MainForm.vue
@@ -6,7 +6,7 @@ const props = defineProps(['isDarkTheme']);

 const uuid = defineModel<string>('orderUuid');
 const contractors = defineModel<Array<Contractor>>('contractors');
-const contractor = defineModel<number>('contractor');
+const contractor = defineModel<Contractor>('contractor');
 const deliveryDate = defineModel<Date>('deliveryDate');
 const categories = defineModel<Array<Category>>('categories');
 const showModal = defineModel<boolean>('showModal');
@@ -66,7 +66,7 @@ function createJSON(event: Event) {
          <div class="field">
            <div class="select is-small is-expanded" style="width: 100%">
              <select v-model="contractor" class="is-expanded" style="width: 100%" required>
-                <option class="is-expanded" v-for="contractor in contractors" :key="contractor.Knt_KntId" :value=contractor.Knt_KntId>{{ contractor.Knt_NipE + ', ' + contractor.Knt_Miasto + ', ' + contractor.Knt_Nazwa1 + ' ' + contractor.Knt_Nazwa2 + ' ' + contractor.Knt_Nazwa3 }}</option>
+                <option class="is-expanded" v-for="contractor in contractors" :key="contractor.Knt_KntId" :value="contractor">{{ contractor.Knt_NipE + ', ' + contractor.Knt_Miasto + ', ' + contractor.Knt_Nazwa1 + ' ' + contractor.Knt_Nazwa2 + ' ' + contractor.Knt_Nazwa3 }}</option>
              </select>
            </div>
          </div>
@@ -74,11 +74,12 @@ function createJSON(event: Event) {
        <div class="field">
          <label class="label is-small">Data dostawy</label>
          <div class="field is-small">
-            <VueDatePicker class ="bulma-is-small is-static"
+            <VueDatePicker class ="bulma-is-small"
                           v-model="deliveryDate"
                           :enable-time-picker="false"
                           :clearable="true"
-                           input-class-name="input is-small"
+                           input-class-name="input is-small calendar-background"
+                           menu-class-name="calendar-background"
                           v-bind:dark = "isDarkTheme"/>
          </div>
        </div>
@@ -142,8 +143,23 @@ function createJSON(event: Event) {
  </form>
 </template>

-<style scoped>
-.dp__theme_dark {
-  --dp-background-color: rgb(20, 22, 26);
+<style>
+@media (prefers-color-scheme: dark){
+  .calendar-background {
+    --dp-background-color: rgb(20, 22, 26);
+    --dp-border-color: var(--bulma-border);
+    --dp-menu-border-color: var(--bulma-border);
+    --dp-border-color-hover: var(--bulma-border);
+    --dp-border-color-focus: var(--bulma-border);
+  }
+}
+
+@media (prefers-color-scheme: light){
+  .calendar-background {
+    --dp-border-color: var(--bulma-border);
+    --dp-menu-border-color: var(--bulma-border);
+    --dp-border-color-hover: var(--bulma-border);
+    --dp-border-color-focus: var(--bulma-border);
+  }
 }
 </style>
--- a/src/components/OrdersSelector.vue
+++ b/src/components/OrdersSelector.vue
@@ -1,18 +1,23 @@
 <script setup lang="ts">
 import VueDatePicker from '@vuepic/vue-datepicker';
 import {ref, watch} from 'vue'
-import type { Category, Order } from '@/main'
+import type { Category, Contractor, 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<number>('contractor');
+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']);
+
+const emit = defineEmits<{
+  order: [order: Order]
+}>()

 watch(isInBufor, (val) => {
  if(val && val == isOutOfBufor.value) {
@@ -30,33 +35,12 @@ watch(isOutOfBufor, (val) => {
  immediate: true
 });

-async function viewOrder(event: Event | undefined) {
+function viewOrder(event: Event | undefined) {
  console.log(event?.target?.name);
  let tempOrder = orders.value?.find(order => (order.MZN_UUID == event?.target?.name));
-  console.log(tempOrder);
  if (tempOrder == undefined) return;
-  if (categories.value == undefined) return;
-
-  const response = await fetch('https://zamowienia.mleczarnia-kuzma.pl/api/zamowienie/' + tempOrder.MZN_UUID);
-  let order = await response.json();
-
-  uuid.value = "test";
-  contractor.value = order.MZN_PodID;
-  deliveryDate.value = new Date(order.MZN_DataDos);
-  console.log(order);
-  for(let orderProduct of order.MZamElem){
-    for(let category of categories.value) {
-      let product = category.Towary.find(product => (product.Twr_TwrId == orderProduct.MZE_TwrId));
-      if(product != null) {
-        console.log('ten towar ' + product);
-        product.Twr_Cena = orderProduct.MZE_TwrCena.slice(0, -2);
-        product.Quantity = orderProduct.MZE_TwrIlosc.slice(0, -2);
-        break;
-      }
-    }
-  }
-  emit('order');
-  window.scrollTo(0, 0);
+  console.log(tempOrder);
+  emit('order', tempOrder);
 }
 </script>

--- a/src/main.ts
+++ b/src/main.ts
@@ -6,6 +6,7 @@ import ConfirmationModal from '@/components/ConfirmationModal.vue';
 import NavBar from '@/components/NavBar.vue';
 import MainForm from '@/components/MainForm.vue';
 import OrdersSelector from '@/components/OrdersSelector.vue'
+import ConfirmedForm from '@/components/ConfirmedForm.vue'

 const app = createApp(App)
 app.component('VueDatePicker', VueDatePicker);
@@ -13,6 +14,7 @@ app.component('ConfirmationModal', ConfirmationModal);
 app.component('NavBar', NavBar);
 app.component('MainForm', MainForm);
 app.component('OrdersSelector', OrdersSelector);
+app.component('ConfirmedForm', ConfirmedForm)
 app.mount('#app');

 export interface Category {
@@ -23,6 +25,7 @@ export interface Category {
  Poziom: number,
  Sciezka: string,
  Towary: Array<Product>
+  isVisible: boolean
 }

 export interface Product {