bartosz/mleczarnia-kuzma-zamowienia-ui
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

State before adding a confirmation modal

Browse Source
This commit is contained in:
Patryk Binkowski
2024-06-07 11:40:19 +02:00
parent 1d89b32395
commit 23522fff4e
5 changed files with 218 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

199
src/App.vue
View File

@@ -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">
<select v-model="contractor" class="is-expanded">
<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" :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">
<input class="input is-small" type="text" placeholder="MM/DD/YYYY" v-model="deliveryDate"/>
<div class="field is-small">
<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);">
<form class="box" style="height: calc(100vh - 3.5rem);">
<div class="mb-3" style="height: max-content;">
<div class="box is-shadowless" v-else-if="isOrders">
<form class="mb-3">
<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>
<div class="field is-grouped is-grouped-multiline">
<div class="select is-small is-expanded">
<select v-model="contractor" class="is-expanded">
<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>
<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>
<label class="label is-small">Data zamówienia</label>
<div class="field is-small">
<VueDatePicker v-model="searchOrderDate"
:enable-time-picker="false"
:clearable="true"
input-class-name="input is-small"/>
</div>
</div>
<div class="field mb-5">
<label class="label is-small">Zamówienia do podglądu</label>
<div class="field is-grouped is-grouped-multiline">
<div class="select is-small is-expanded">
<select v-model="contractor" class="is-expanded">
<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>
<label class="label is-small">Zamówienie potwierdzone?</label>
<div class="control">
<label class="checkbox mr-5">
<input type="checkbox" v-model="isOutOfBufor"/>
Tak
</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>
</form>
</div>
</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",
uuid: null,
activator: false,
isForm: true,
isOrders: false
deliveryDate: ref(),
searchOrderDate: ref(null),
isInBufor: ref(false),
isOutOfBufor: ref(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_DataDos: Date.now(),
MZN_DataZam: new Date(Date.now()).toISOString(),
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>

35
src/components/confirmationModal.vue Normal file
View File

@@ -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>

10
src/main.ts
View File

@@ -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 = {
credentials: true,
origin: true,
};
app.component('VueDatePicker', VueDatePicker);
app.mount('#app')