State before adding a confirmation modal

package-lock.json

@@ -8,6 +8,7 @@
       "name": "testvue",
       "version": "0.0.0",
       "dependencies": {
+        "@vuepic/vue-datepicker": "^8.7.0",
         "bulma": "^1.0.1",
         "cors": "^2.8.5",
         "vue": "^3.4.21",
@@ -1224,6 +1225,20 @@
       "integrity": "sha512-VcZK7MvpjuTPx2w6blwnwZAu5/LgBUtejFOi3pPGQFXQN5Ela03FUtd2Qtg4yWGGissVL0dr6Ro1LfOFh+PCuQ==",
       "dev": true
     },
+    "node_modules/@vuepic/vue-datepicker": {
+      "version": "8.7.0",
+      "resolved": "https://registry.npmjs.org/@vuepic/vue-datepicker/-/vue-datepicker-8.7.0.tgz",
+      "integrity": "sha512-EqL51GdaRg6AExVuPCOmnO81n9+oLqgTi+LlST44TwU0UcX0UfefHx1HXwV948fAqBgj0ESgTyDvjXx7EFFL2A==",
+      "dependencies": {
+        "date-fns": "^3.6.0"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      },
+      "peerDependencies": {
+        "vue": ">=3.2.0"
+      }
+    },
     "node_modules/acorn": {
       "version": "8.11.3",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
@@ -1497,6 +1512,15 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
+    "node_modules/date-fns": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
+      "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
     "node_modules/de-indent": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",

package.json

@@ -13,6 +13,7 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
+    "@vuepic/vue-datepicker": "^8.7.0",
     "bulma": "^1.0.1",
     "cors": "^2.8.5",
     "vue": "^3.4.21",

src/App.vue

@@ -1,6 +1,9 @@
 <template>
   <nav class="navbar" role="navigation" aria-label="main navigation">
     <div class="navbar-brand">
+      <a class="navbar-item">
+        <h3 class="title is-3">Mleczarnia</h3>
+      </a>
       <button @click="makeBurger" class="button navbar-burger" data-target="navMenu" v-bind:class="{ 'is-active': activator }">
         <span aria-hidden="true"></span>
         <span aria-hidden="true"></span>
@@ -32,7 +35,7 @@
     </div>
   </nav>
   <div v-if="isForm">
-    <form class="box">
+    <form class="box" @submit="createJSON">
       <div class="mb-3">
         <div class="box">
           <h1 class="is-large mb-3"><b>ZAMÓWIENIE</b></h1>
@@ -40,8 +43,8 @@
           <div class="field mb-5">
             <label class="label is-small">NIP</label>
             <div class="field">
-              <div class="select is-small is-expanded">
+              <div class="select is-small is-expanded" style="width: 100%">
-                <select v-model="contractor" class="is-expanded">
+                <select v-model="contractor" class="is-expanded" style="width: 100%" required>
                   <option class="is-expanded" v-for="contractor in contractors" :key="contractor" :value=contractor.Knt_KntId>{{ contractor.Knt_NipE + ', ' + contractor.Knt_Miasto + ', ' + contractor.Knt_Nazwa1 + ' ' + contractor.Knt_Nazwa2 + ' ' + contractor.Knt_Nazwa3 }}</option>
                 </select>
               </div>
@@ -49,8 +52,13 @@
           </div>
           <div class="field">
             <label class="label is-small">Data dostawy</label>
-            <div class="field">
+            <div class="field is-small">
-              <input class="input is-small" type="text" placeholder="MM/DD/YYYY" v-model="deliveryDate"/>
+              <VueDatePicker class ="bulma-is-small"
+                             v-model="deliveryDate"
+                             :enable-time-picker="false"
+                             :clearable="true"
+                             input-class-name="input is-small"
+                              required/>
             </div>
           </div>
         </div>
@@ -85,13 +93,13 @@
                 <div class="field has-addons">
                   <p class="control">
                   <span class="select is-small">
-                    <select v-model="ware.chosenOption">
+                    <select v-model="ware.chosenOption" readonly>
                       <option v-for="option in ware.Options" :key="option">{{ option }}</option>
                     </select>
                   </span>
                   </p>
                   <p class="control is-expanded">
-                    <input class="input is-small" type="number" placeholder="Ilość" v-model="ware.Quantity">
+                    <input class="input is-small" type="text" placeholder="Ilość" v-model="ware.Quantity">
                   </p>
                 </div>
               </div>
@@ -101,46 +109,96 @@
         </div>
         <div class="mb-3" v-if="!(index == wares.length - 1)"></div>
       </div>
-      <button class="button is-primary mt-3 is-large is-fullwidth" @click="createJSON">Submit</button>
+      <button class="button is-primary mt-3 is-large is-fullwidth">Submit</button>
+      <button class="button is-primary mt-3 is-large is-fullwidth" @click="parseOrderJSON">Submit</button>
     </form>
   </div>
-  <div v-else-if="isOrders" style="height: calc(100vh - 3.5rem);">
+  <div class="box is-shadowless" v-else-if="isOrders">
-    <form class="box" style="height: calc(100vh - 3.5rem);">
+    <form class="mb-3">
-      <div class="mb-3"  style="height: max-content;">
         <div class="box">
-          <h1 class="is-large mb-3"><b>ZAMÓWIENIA</b></h1>
+          <h1 class="is-large mb-3"><b>FILTR ZAMÓWIEŃ</b></h1>
           <div class="field mb-5">
-            <label class="label is-small">Zamówienia do edycji</label>
+            <label class="label is-small">Data zamówienia</label>
-            <div class="field is-grouped is-grouped-multiline">
+            <div class="field is-small">
-              <div class="select is-small is-expanded">
+              <VueDatePicker v-model="searchOrderDate"
-                <select v-model="contractor" class="is-expanded">
+                             :enable-time-picker="false"
-                  <option class="is-expanded" v-for="contractor in contractors" :key="contractor" :value=contractor.Knt_KntId>{{ contractor.Knt_NipE + ', ' + contractor.Knt_Miasto + ', ' + contractor.Knt_Nazwa1 + ' ' + contractor.Knt_Nazwa2 + ' ' + contractor.Knt_Nazwa3 }}</option>
+                             :clearable="true"
-                </select>
+                             input-class-name="input is-small"/>
-              </div>
-              <button class="button is-primary is-small is-expanded" @click="createJSON">Podgląd</button>
-              <button class="button is-primary is-small is-expanded" @click="createJSON">Edycja</button>
             </div>
           </div>
           <div class="field mb-5">
-            <label class="label is-small">Zamówienia do podglądu</label>
+            <label class="label is-small">Zamówienie potwierdzone?</label>
-            <div class="field is-grouped is-grouped-multiline">
+            <div class="control">
-              <div class="select is-small is-expanded">
+              <label class="checkbox mr-5">
-                <select v-model="contractor" class="is-expanded">
+                <input type="checkbox" v-model="isOutOfBufor"/>
-                  <option class="is-expanded" v-for="contractor in contractors" :key="contractor" :value=contractor.Knt_KntId>{{ contractor.Knt_NipE + ', ' + contractor.Knt_Miasto + ', ' + contractor.Knt_Nazwa1 + ' ' + contractor.Knt_Nazwa2 + ' ' + contractor.Knt_Nazwa3 }}</option>
+                Tak
-                </select>
+              </label>
+              <label class="checkbox">
+                <input type="checkbox" v-model="isInBufor"/>
+                Nie
+              </label>
+            </div>
+          </div>
+          <button class="button is-primary is-small is-expanded" @click="createJSON">Pobierz zamówienia</button>
+        </div>
+    </form>
+    <div class="box">
+      <h1 class="is-large mb-3"><b>ZAMÓWIENIA</b></h1>
+        <div class="columns is-multiline">
+          <div class="column is-4" v-for="order in orders" :key="order.MZN_UUID">
+            <div class="box">
+              <h1 class="mb-3 is-size-7"><b>{{ order.MZN_UUID }}</b></h1>
+              <label class="label is-small">Klient</label>
+              <div class="field is-small mb-3">
+                <input class="input is-small is-static"
+                       type="text"
+                       :value="order.MZN_PodNazwa1 + order.MZN_PodNazwa2 + order.MZN_PodNazwa3"
+                        readonly/>
               </div>
-              <button class="button is-primary is-small is-expanded" @click="createJSON">Podgląd</button>
+              <div class="columns is-mobile field is-small mb-0">
+                <div class="column is-6">
+                  <label class="label is-small">Data dostawy</label>
+                  <div class="field is-small">
+                    <input class="input is-small is-static"
+                           type="text"
+                           v-model="order.MZN_DataDos"
+                           readonly/>
+                  </div>
+                </div>
+                <div class="column is-6">
+                  <label class="label is-small">Data zamówienia</label>
+                  <div class="field is-small">
+                    <input class="input is-small is-static"
+                           type="text"
+                           v-model="order.MZN_DataZam.split('T')[0]"
+                           readonly/>
+                  </div>
+                </div>
+              </div>
+              <label class="label is-small">Zamówienie potwierdzone?</label>
+              <div class="field is-small mb-3" v-if="order.MZN_Bufor==0">
+                <input class="input is-small is-static"
+                       type="text"
+                       value="Tak"
+                       readonly/>
+              </div>
+              <div class="field is-small mb-3" v-else>
+                <input class="input is-small is-static"
+                       type="text"
+                       value="Nie"
+                       readonly/>
+              </div>
+              <button class="button is-primary is-small is-expanded" @click="viewOrder" :name="order.MZN_UUID">Podgląd</button>
             </div>
           </div>
         </div>
-      </div>
+    </div>
-    </form>
   </div>
-
 </template>
 
 <script lang="ts">
 import './assets/style.scss'
+import { ref } from 'vue';
 
 export default {
   data() {
@@ -148,13 +206,28 @@ export default {
       contractors: [],
       contractor: {},
       wares: [],
-      orders: [],
+      orders: ref(new Array<Object>),
       order: {},
-      deliveryDate: "01/01/2024",
+      deliveryDate: ref(),
-      uuid: null,
+      searchOrderDate: ref(null),
-      activator: false,
+      isInBufor: ref(false),
-      isForm: true,
+      isOutOfBufor: ref(false),
-      isOrders: false
+      uuid: ref(),
+      activator: ref(false),
+      isForm: ref(true),
+      isOrders: ref(false)
+    }
+  },
+  watch: {
+    isInBufor(val) {
+      if(val == true && val == this.isOutOfBufor) {
+        this.isOutOfBufor = false;
+      }
+    },
+    isOutOfBufor(val) {
+      if(val == true && val == this.isInBufor) {
+        this.isInBufor = false;
+      }
     }
   },
   methods: {
@@ -174,15 +247,21 @@ export default {
           }
         }
       }
-      let date = Date.parse(this.deliveryDate);
+      const response3 = await fetch('https://zamowienia.mleczarnia-kuzma.pl/api/zamowienia/bufor');
+      let ordersTemp : Array<Object> = await response3.json();
+      this.orders.push(...ordersTemp);
+      const response4 = await fetch('https://zamowienia.mleczarnia-kuzma.pl/api/zamowienia');
+      ordersTemp = await response4.json();
+      this.orders.push(...ordersTemp);
+      console.log(this.orders);
     },
     createJSON(event: Event) {
       event.preventDefault();
       console.log(this.contractor);
       const json = {
         MZN_UUID: this.uuid,
-        MZN_DataZam: Date.parse(this.deliveryDate),
+        MZN_DataZam: new Date(Date.now()).toISOString(),
-        MZN_DataDos: Date.now(),
+        MZN_DataDos: this.deliveryDate != null ? this.deliveryDate.toISOString() : null,
         MZN_PodID: this.contractor,
         MZamElem: new Array()
       };
@@ -198,7 +277,7 @@ export default {
               MZE_TwrId: ware.Twr_TwrId,
               MZE_TwrJM: ware.chosenOption,
               MZE_TwrCena: ware.chosenOption == ware.Twr_JMZ ? ware.Twr_CenaZ : ware.Twr_Cena,
-              MZN_TwrIlosc: ware.Quantity
+              MZE_TwrIlosc: ware.Quantity
             }
             json.MZamElem.push(wareObject);
           }
@@ -216,6 +295,41 @@ export default {
         .then(response => response.json())
         .then(response => this.uuid = response.MZN_UUID)
     },
+    parseOrderJSON(event: Event) {
+      event.preventDefault();
+      const json = "{\"MZN_UUID\":\"55ca3087-38c0-445f-ab7e-7e566c68c0d4\",\"MZN_DataZam\":1704063600000,\"MZN_DataDos\":1717493437880,\"MZN_PodID\":194,\"MZamElem\":[{\"MZE_TwrId\":1833,\"MZE_TwrJM\":\"kg\",\"MZE_TwrCena\":\"16.00\",\"MZN_TwrIlosc\":2},{\"MZE_TwrId\":1837,\"MZE_TwrJM\":\"kg\",\"MZE_TwrCena\":\"16.10\",\"MZN_TwrIlosc\":4}]}";
+      const parsedJson = JSON.parse(json);
+      console.log(this.deliveryDate.toJSON());
+      console.log(this.contractor);
+      fetch('https://zamowienia.mleczarnia-kuzma.pl/api/zamowienie/' + this.uuid, {
+        method: 'PUT'
+      })
+    },
+    async viewOrder(event: Event) {
+      console.log(event.target.name);
+      let tempOrder = this.orders.find(order => (order.MZN_UUID == event.target.name));
+      console.log(tempOrder);
+      const response = await fetch('https://zamowienia.mleczarnia-kuzma.pl/api/zamowienie/' + tempOrder.MZN_UUID);
+      let order = await response.json();
+      this.uuid = order.MZN_UUID;
+      this.contractor = order.MZN_PodID;
+      this.deliveryDate = new Date(order.MZN_DataDos);
+      console.log(order);
+      for(let product of order.MZamElem){
+        for(let kategoria of this.wares) {
+          let towar = kategoria.Towary.find(ware => (ware.Twr_TwrId == product.MZE_TwrId));
+          if(towar != null) {
+            console.log('ten towar ' + towar);
+            towar.Twr_Cena = product.MZE_TwrCena.slice(0, -2);
+            towar.Quantity = product.MZE_TwrIlosc.slice(0, -2);
+            break;
+          }
+        }
+      }
+      this.isForm = true;
+      this.isOrders = false;
+      window.scrollTo(0, 0);
+    },
     makeBurger () {
       this.activator = !this.activator
       return this.activator
@@ -254,7 +368,4 @@ export default {
 body {
   min-height: 100vh;
 }
-.select, .select select {
-  width: 100%;
-}
 </style>

src/components/confirmationModal.vue

@@ -0,0 +1,35 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+import './assets/style.scss'
+
+export default defineComponent({
+  data() {
+    defineModel( return {
+      confirmationURL : String
+    }
+    )
+    return {
+
+    }
+  },
+  name: 'confirmationModal',
+})
+</script>
+
+<template>
+  <div>
+    <div class="modal is-active">
+      <div class="modal-background"></div>
+      <div class="modal-content">
+        <div class="box">
+          <p>woop</p>
+        </div>
+      </div>
+      <button class="modal-close" @click="$emit('close')"></button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

src/main.ts

@@ -1,12 +1,8 @@
 import { createApp } from 'vue'
 import App from './App.vue'
-import type { CorsOptions } from 'vite'
+import VueDatePicker from '@vuepic/vue-datepicker';
-
+import '@vuepic/vue-datepicker/dist/main.css'
 
 const app = createApp(App)
-const corsConfig = {
+app.component('VueDatePicker', VueDatePicker);
-  credentials: true,
-  origin: true,
-};
-
 app.mount('#app')