Divided the app into components and rewrote JS to TS.
This commit is contained in:
452
src/App.vue
452
src/App.vue
@@ -1,375 +1,119 @@
|
|||||||
<template>
|
<template>
|
||||||
<nav class="navbar" role="navigation" aria-label="main navigation">
|
<NavBar @form="switchToFrom" @order="switchToOrders"/>
|
||||||
<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>
|
|
||||||
<span aria-hidden="true"></span>
|
|
||||||
<span aria-hidden="true"></span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="navbar-menu" id="navMenu" v-bind:class="{ 'is-active': activator }">
|
<MainForm v-if="isForm"
|
||||||
<div class="navbar-start">
|
:is-dark-theme="isDarkTheme"
|
||||||
<a class="navbar-item" @click="switchToFrom">
|
v-model:order-uuid="uuid"
|
||||||
Formularz
|
v-model:contractors="contractors"
|
||||||
</a>
|
v-model:categories="categories"
|
||||||
|
v-model:contractor="contractor"
|
||||||
|
v-model:delivery-date="deliveryDate"
|
||||||
|
v-model:show-modal="showModal"
|
||||||
|
/>
|
||||||
|
|
||||||
<a class="navbar-item" @click="switchToOrders">
|
|
||||||
Zamówienia
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="navbar-end">
|
<OrdersSelector class="box is-shadowless" v-else-if="isOrders"
|
||||||
<div class="navbar-item">
|
v-model:uuid="uuid"
|
||||||
<div class="buttons">
|
v-model:orders="orders"
|
||||||
<a class="button is-light">
|
v-model:contractor="contractor"
|
||||||
Log in
|
v-model:delivery-date="deliveryDate"
|
||||||
</a>
|
v-model:categories="categories"
|
||||||
</div>
|
@order="isForm=true; isOrders=false"
|
||||||
</div>
|
/>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
<div v-if="isForm">
|
|
||||||
<form class="box" @submit="createJSON">
|
|
||||||
<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-5">
|
|
||||||
<label class="label is-small">NIP</label>
|
|
||||||
<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" :value=contractor.Knt_KntId>{{ contractor.Knt_NipE + ', ' + contractor.Knt_Miasto + ', ' + contractor.Knt_Nazwa1 + ' ' + contractor.Knt_Nazwa2 + ' ' + contractor.Knt_Nazwa3 }}</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="field">
|
|
||||||
<label class="label is-small">Data dostawy</label>
|
|
||||||
<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>
|
|
||||||
<button class="button is-primary mt-5">Submit</button>
|
|
||||||
<button class="button is-primary mt-5 ml-3" @click="showModal = true">Potwierdź</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div v-for="(kategoria, index) in wares" :key="kategoria.Kod">
|
|
||||||
<div class="box" >
|
|
||||||
<h1 class="is-large mb-3"><b>{{ kategoria.Kod }}</b></h1>
|
|
||||||
<div class="field" v-for="(ware, index) in kategoria.Towary" :key="ware.Twr_Nazwa">
|
|
||||||
<label class="label is-small">{{ ware.Twr_Nazwa }}</label>
|
|
||||||
<div class="columns is-mobile">
|
|
||||||
<div class="column" v-if="ware.chosenOption == ware.Twr_JM">
|
|
||||||
<div class="field">
|
|
||||||
<input
|
|
||||||
class="input is-small"
|
|
||||||
type="text"
|
|
||||||
placeholder="Kwota"
|
|
||||||
v-model="ware.Twr_Cena"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="column" v-else-if="ware.chosenOption == ware.Twr_JMZ">
|
|
||||||
<div class="field">
|
|
||||||
<input
|
|
||||||
class="input is-small"
|
|
||||||
type="text"
|
|
||||||
placeholder="Kwota"
|
|
||||||
v-model="ware.Twr_CenaZ"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="column">
|
|
||||||
<div class="field has-addons">
|
|
||||||
<p class="control">
|
|
||||||
<span class="select is-small">
|
|
||||||
<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="text" placeholder="Ilość" v-model="ware.Quantity">
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div v-if="!(index == kategoria.Towary.length - 1)"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="mb-3" v-if="!(index == wares.length - 1)"></div>
|
|
||||||
</div>
|
|
||||||
<button class="button is-primary mt-3 is-large is-fullwidth">Submit</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
<div class="box is-shadowless" v-else-if="isOrders">
|
|
||||||
<form class="mb-3">
|
|
||||||
<div class="box">
|
|
||||||
<h1 class="is-large mb-3"><b>FILTR ZAMÓWIEŃ</b></h1>
|
|
||||||
<div class="field mb-5">
|
|
||||||
<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ó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>
|
|
||||||
<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>
|
|
||||||
<ConfirmationModal v-show="showModal" @close="showModal = false" :order-uuid="uuid"></ConfirmationModal>
|
<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>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script setup lang="ts">
|
||||||
import './assets/style.scss';
|
import './assets/style.scss'
|
||||||
import { ref } from 'vue';
|
import type { Category, Contractor, Order } from '@/main'
|
||||||
import ConfirmationModal from '@/components/ConfirmationModal.vue';
|
import { ref, watch } from 'vue'
|
||||||
|
|
||||||
export default {
|
const contractors = ref<Array<Contractor>>();
|
||||||
components: { ConfirmationModal },
|
const contractor = ref<number>();
|
||||||
data() {
|
const categories = ref<Array<Category>>();
|
||||||
return {
|
const orders = ref<Array<Order>>(new Array<Order>());
|
||||||
contractors: [],
|
const order = ref<Order>();
|
||||||
contractor: {},
|
const deliveryDate = ref<Date>();
|
||||||
wares: [],
|
const uuid = ref<string>();
|
||||||
orders: ref(new Array<Object>),
|
const isForm = ref<boolean>(true);
|
||||||
order: ref(),
|
const isOrders = ref<boolean>(false);
|
||||||
deliveryDate: ref(),
|
const showModal = ref<boolean>(false);
|
||||||
searchOrderDate: ref(null),
|
const isDarkTheme = ref<boolean>(false);
|
||||||
isInBufor: ref(false),
|
|
||||||
isOutOfBufor: ref(false),
|
async function fetchData() {
|
||||||
uuid: ref(),
|
const response1 = await fetch('https://zamowienia.mleczarnia-kuzma.pl/api/kontrahenci');
|
||||||
activator: ref(false),
|
contractors.value = await response1.json();
|
||||||
isForm: ref(true),
|
console.log(contractors.value);
|
||||||
isOrders: ref(false),
|
const response2 = await fetch('https://zamowienia.mleczarnia-kuzma.pl/api/towary');
|
||||||
showModal: ref(false)
|
categories.value = await response2.json();
|
||||||
}
|
console.log(categories.value);
|
||||||
},
|
if(categories.value != undefined) {
|
||||||
watch: {
|
for (let kategoria of categories.value) {
|
||||||
isInBufor(val) {
|
for (let product of kategoria.Towary) {
|
||||||
if(val == true && val == this.isOutOfBufor) {
|
product.Options = new Array(product.Twr_JM);
|
||||||
this.isOutOfBufor = false;
|
product.ChosenOption = product.Twr_JM;
|
||||||
}
|
if (product.Twr_JMZ != null) {
|
||||||
},
|
product.Options.push(product.Twr_JMZ);
|
||||||
isOutOfBufor(val) {
|
|
||||||
if(val == true && val == this.isInBufor) {
|
|
||||||
this.isInBufor = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
async fetchData() {
|
|
||||||
const response1 = await fetch('https://zamowienia.mleczarnia-kuzma.pl/api/kontrahenci');
|
|
||||||
this.contractors = await response1.json();
|
|
||||||
console.log(this.contractors);
|
|
||||||
const response2 = await fetch('https://zamowienia.mleczarnia-kuzma.pl/api/towary');
|
|
||||||
this.wares = await response2.json();
|
|
||||||
console.log(this.wares);
|
|
||||||
for (let kategoria of this.wares) {
|
|
||||||
for (let ware of kategoria.Towary) {
|
|
||||||
ware.Options = new Array(ware.Twr_JM);
|
|
||||||
ware.chosenOption = ware.Twr_JM;
|
|
||||||
if (ware.Twr_JMZ != null) {
|
|
||||||
ware.Options.push(ware.Twr_JMZ);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
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: new Date(Date.now()).toISOString(),
|
|
||||||
MZN_DataDos: this.deliveryDate != null ? this.deliveryDate.toISOString() : null,
|
|
||||||
MZN_PodID: this.contractor,
|
|
||||||
MZamElem: new Array()
|
|
||||||
};
|
|
||||||
for (let category of this.wares) {
|
|
||||||
for (let ware of category.Towary) {
|
|
||||||
if(ware.Quantity != null) {
|
|
||||||
ware.Options = new Array(ware.Twr_JM);
|
|
||||||
ware.chosenOption = ware.Twr_JM;
|
|
||||||
if (ware.Twr_JMZ != null) {
|
|
||||||
ware.Options.push(ware.Twr_JMZ);
|
|
||||||
}
|
|
||||||
const wareObject = {
|
|
||||||
MZE_TwrId: ware.Twr_TwrId,
|
|
||||||
MZE_TwrJM: ware.chosenOption,
|
|
||||||
MZE_TwrCena: ware.chosenOption == ware.Twr_JMZ ? ware.Twr_CenaZ : ware.Twr_Cena,
|
|
||||||
MZE_TwrIlosc: ware.Quantity
|
|
||||||
}
|
|
||||||
json.MZamElem.push(wareObject);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
console.log(JSON.stringify(json));
|
|
||||||
fetch('https://zamowienia.mleczarnia-kuzma.pl/api/zamowienie', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
|
||||||
'Accept': 'application/json',
|
|
||||||
'Content-Type': 'application/json'
|
|
||||||
},
|
|
||||||
body: JSON.stringify(json)
|
|
||||||
})
|
|
||||||
.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
|
|
||||||
},
|
|
||||||
switchToFrom() {
|
|
||||||
if(!this.isForm) {
|
|
||||||
this.isForm = true;
|
|
||||||
this.isOrders = false;
|
|
||||||
if(this.activator) {
|
|
||||||
this.activator = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
switchToOrders() {
|
|
||||||
if(!this.isOrders) {
|
|
||||||
this.isForm = false;
|
|
||||||
this.isOrders = true;
|
|
||||||
if(this.activator) {
|
|
||||||
this.activator = false;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
}
|
||||||
created() {
|
|
||||||
this.fetchData()
|
const response3 = await fetch('https://zamowienia.mleczarnia-kuzma.pl/api/zamowienia/bufor');
|
||||||
|
let ordersTemp : Array<Order> = await response3.json();
|
||||||
|
orders.value.push(...ordersTemp);
|
||||||
|
const response4 = await fetch('https://zamowienia.mleczarnia-kuzma.pl/api/zamowienia');
|
||||||
|
ordersTemp = await response4.json();
|
||||||
|
orders.value.push(...ordersTemp);
|
||||||
|
console.log(orders.value);
|
||||||
|
}
|
||||||
|
|
||||||
|
function switchToFrom() {
|
||||||
|
if(!isForm.value) {
|
||||||
|
isForm.value = true;
|
||||||
|
isOrders.value = false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function switchToOrders() {
|
||||||
|
if(!isOrders.value) {
|
||||||
|
isForm.value = false;
|
||||||
|
isOrders.value = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function activateModal(event : Event) {
|
||||||
|
event.preventDefault();
|
||||||
|
showModal.value = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function checkTheme() {
|
||||||
|
isDarkTheme.value = !!window?.matchMedia?.('(prefers-color-scheme:dark)')?.matches;
|
||||||
|
}
|
||||||
|
|
||||||
|
fetchData();
|
||||||
|
checkTheme();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
@media (prefers-color-scheme: light) {
|
@media screen and (min-width: 500px) {
|
||||||
:root {
|
.box {
|
||||||
min-height: 100vh;
|
--bulma-box-padding: 1.5rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@media screen and (max-width: 500px) {
|
||||||
|
.box {
|
||||||
|
--bulma-box-padding: 0.75rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
min-height: 100vh;
|
||||||
|
--dp-background-color: rgb(20, 22, 26);
|
||||||
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
|
|||||||
7
src/components/Child.vue
Normal file
7
src/components/Child.vue
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
<script setup>
|
||||||
|
const model = defineModel()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<span>My input</span> <input v-model="model">
|
||||||
|
</template>
|
||||||
149
src/components/MainForm.vue
Normal file
149
src/components/MainForm.vue
Normal file
@@ -0,0 +1,149 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import VueDatePicker from '@vuepic/vue-datepicker';
|
||||||
|
import type { Category, Contractor, OrderProduct } from '@/main';
|
||||||
|
|
||||||
|
const props = defineProps(['isDarkTheme']);
|
||||||
|
|
||||||
|
const uuid = defineModel<string>('orderUuid');
|
||||||
|
const contractors = defineModel<Array<Contractor>>('contractors');
|
||||||
|
const contractor = defineModel<number>('contractor');
|
||||||
|
const deliveryDate = defineModel<Date>('deliveryDate');
|
||||||
|
const categories = defineModel<Array<Category>>('categories');
|
||||||
|
const showModal = defineModel<boolean>('showModal');
|
||||||
|
|
||||||
|
|
||||||
|
function createJSON(event: Event) {
|
||||||
|
console.log(contractor.value);
|
||||||
|
event.preventDefault();
|
||||||
|
const json = {
|
||||||
|
MZN_UUID: uuid.value,
|
||||||
|
MZN_DataZam: new Date(Date.now()).toISOString(),
|
||||||
|
MZN_DataDos: deliveryDate.value != undefined ? deliveryDate.value.toISOString() : null,
|
||||||
|
MZN_PodID: contractor.value,
|
||||||
|
MZamElem: new Array<OrderProduct>
|
||||||
|
};
|
||||||
|
|
||||||
|
if(categories.value == undefined) return;
|
||||||
|
|
||||||
|
for (let category of categories.value) {
|
||||||
|
for (let product of category.Towary) {
|
||||||
|
if(product.Quantity != null) {
|
||||||
|
const productObject : OrderProduct = {
|
||||||
|
MZE_TwrId: product.Twr_TwrId,
|
||||||
|
MZE_TwrJm: product.ChosenOption,
|
||||||
|
MZE_TwrCena: product.ChosenOption == product.Twr_JMZ ? product.Twr_CenaZ : product.Twr_Cena,
|
||||||
|
MZE_TwrIlosc: product.Quantity.toString(),
|
||||||
|
MZE_TwrNazwa: product.Twr_Nazwa,
|
||||||
|
MZE_MZNID: undefined,
|
||||||
|
MZE_MZEID: undefined,
|
||||||
|
MZE_TwrStawka: undefined
|
||||||
|
};
|
||||||
|
json.MZamElem.push(productObject);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
fetch('https://zamowienia.mleczarnia-kuzma.pl/api/zamowienie', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Accept': 'application/json',
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify(json)
|
||||||
|
})
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(response => uuid.value = response.MZN_UUID);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<form class="box" @submit="createJSON">
|
||||||
|
<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-5">
|
||||||
|
<label class="label is-small">NIP</label>
|
||||||
|
<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>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="field">
|
||||||
|
<label class="label is-small">Data dostawy</label>
|
||||||
|
<div class="field is-small">
|
||||||
|
<VueDatePicker class ="bulma-is-small is-static"
|
||||||
|
v-model="deliveryDate"
|
||||||
|
:enable-time-picker="false"
|
||||||
|
:clearable="true"
|
||||||
|
input-class-name="input is-small"
|
||||||
|
v-bind:dark = "isDarkTheme"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="button is-primary mt-5">Submit</button>
|
||||||
|
<button class="button is-primary mt-5 ml-3" @click="showModal = true">Potwierdź</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-for="category in categories" :key="category.Kod">
|
||||||
|
<div class="box mb-3" >
|
||||||
|
<h1 class="is-large mb-3"><b>{{ category.Kod }}</b></h1>
|
||||||
|
<div class="field" v-for="(product, index) in category.Towary" :key="product.Twr_Nazwa">
|
||||||
|
<label class="label is-small">{{ product.Twr_Nazwa }}</label>
|
||||||
|
<div class="columns is-mobile">
|
||||||
|
<div class="column" v-if="product.ChosenOption == product.Twr_JM">
|
||||||
|
<div class="field">
|
||||||
|
<input
|
||||||
|
class="input is-small"
|
||||||
|
type="text"
|
||||||
|
placeholder="Kwota"
|
||||||
|
v-model="product.Twr_Cena"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="column" v-else-if="product.ChosenOption == product.Twr_JMZ">
|
||||||
|
<div class="field">
|
||||||
|
<input
|
||||||
|
class="input is-small"
|
||||||
|
type="text"
|
||||||
|
placeholder="Kwota"
|
||||||
|
v-model="product.Twr_CenaZ"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<div class="field has-addons">
|
||||||
|
<p class="control">
|
||||||
|
<span class="select is-small">
|
||||||
|
<select v-model="product.ChosenOption" readonly>
|
||||||
|
<option v-for="option in product.Options" :key="option">{{ option }}</option>
|
||||||
|
</select>
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
<p class="control is-expanded">
|
||||||
|
<input class="input is-small" type="text" placeholder="Ilość" v-model="product.Quantity">
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="!(index == category.Towary.length - 1)"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="columns mt-1 is-variable is-mobile">
|
||||||
|
<div class = "column is-6">
|
||||||
|
<button class="button is-primary is-fullwidth is-large">Submit</button>
|
||||||
|
</div>
|
||||||
|
<div class = "is-large column is-6 ml-3">
|
||||||
|
<button class="button is-primary is-fullwidth is-large" @click="parseOrderJSON">Potwierdź</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.dp__theme_dark {
|
||||||
|
--dp-background-color: rgb(20, 22, 26);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
68
src/components/NavBar.vue
Normal file
68
src/components/NavBar.vue
Normal file
@@ -0,0 +1,68 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue'
|
||||||
|
|
||||||
|
const emit = defineEmits(['form', 'order']);
|
||||||
|
|
||||||
|
const activator = ref(false);
|
||||||
|
|
||||||
|
function makeBurger() {
|
||||||
|
activator.value = !activator.value
|
||||||
|
return activator
|
||||||
|
}
|
||||||
|
|
||||||
|
function clickForm() {
|
||||||
|
emit('form');
|
||||||
|
if(activator.value) {
|
||||||
|
activator.value = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function clickOrders() {
|
||||||
|
emit('order');
|
||||||
|
if(activator.value) {
|
||||||
|
activator.value = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
<span aria-hidden="true"></span>
|
||||||
|
<span aria-hidden="true"></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="navbar-menu" id="navMenu" v-bind:class="{ 'is-active': activator }">
|
||||||
|
<div class="navbar-start">
|
||||||
|
<a class="navbar-item" @click="clickForm">
|
||||||
|
Formularz
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a class="navbar-item" @click="clickOrders">
|
||||||
|
Zamówienia
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="navbar-end">
|
||||||
|
<div class="navbar-item">
|
||||||
|
<div class="buttons">
|
||||||
|
<a class="button is-light">
|
||||||
|
Log in
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
149
src/components/OrdersSelector.vue
Normal file
149
src/components/OrdersSelector.vue
Normal file
@@ -0,0 +1,149 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import VueDatePicker from '@vuepic/vue-datepicker';
|
||||||
|
import {ref, watch} from 'vue'
|
||||||
|
import type { Category, 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 deliveryDate = defineModel<Date>('deliveryDate');
|
||||||
|
const categories = defineModel<Array<Category>>('categories');
|
||||||
|
|
||||||
|
const emit = defineEmits(['order']);
|
||||||
|
|
||||||
|
watch(isInBufor, (val) => {
|
||||||
|
if(val && val == isOutOfBufor.value) {
|
||||||
|
isOutOfBufor.value = false;
|
||||||
|
}
|
||||||
|
},{
|
||||||
|
immediate: true
|
||||||
|
});
|
||||||
|
|
||||||
|
watch(isOutOfBufor, (val) => {
|
||||||
|
if(val && val == isInBufor.value) {
|
||||||
|
isInBufor.value = false;
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
immediate: true
|
||||||
|
});
|
||||||
|
|
||||||
|
async 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);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="box is-shadowless">
|
||||||
|
<form class="mb-3">
|
||||||
|
<div class="box">
|
||||||
|
<h1 class="is-large mb-3"><b>FILTR ZAMÓWIEŃ</b></h1>
|
||||||
|
<div class="field mb-5">
|
||||||
|
<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ó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>
|
||||||
|
<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>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
94
src/main.ts
94
src/main.ts
@@ -1,8 +1,94 @@
|
|||||||
import { createApp } from 'vue'
|
import { createApp } from 'vue';
|
||||||
import App from './App.vue'
|
import App from './App.vue';
|
||||||
import VueDatePicker from '@vuepic/vue-datepicker';
|
import VueDatePicker from '@vuepic/vue-datepicker';
|
||||||
import '@vuepic/vue-datepicker/dist/main.css'
|
import '@vuepic/vue-datepicker/dist/main.css';
|
||||||
|
import ConfirmationModal from '@/components/ConfirmationModal.vue';
|
||||||
|
import NavBar from '@/components/NavBar.vue';
|
||||||
|
import MainForm from '@/components/MainForm.vue';
|
||||||
|
import OrdersSelector from '@/components/OrdersSelector.vue'
|
||||||
|
|
||||||
const app = createApp(App)
|
const app = createApp(App)
|
||||||
app.component('VueDatePicker', VueDatePicker);
|
app.component('VueDatePicker', VueDatePicker);
|
||||||
app.mount('#app')
|
app.component('ConfirmationModal', ConfirmationModal);
|
||||||
|
app.component('NavBar', NavBar);
|
||||||
|
app.component('MainForm', MainForm);
|
||||||
|
app.component('OrdersSelector', OrdersSelector);
|
||||||
|
app.mount('#app');
|
||||||
|
|
||||||
|
export interface Category {
|
||||||
|
GIDNumer: number,
|
||||||
|
GrONumer: number,
|
||||||
|
Kod: string,
|
||||||
|
Nazwa: string,
|
||||||
|
Poziom: number,
|
||||||
|
Sciezka: string,
|
||||||
|
Towary: Array<Product>
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Product {
|
||||||
|
Twr_Cena: string,
|
||||||
|
Twr_CenaZ: string,
|
||||||
|
Twr_JM: string,
|
||||||
|
Twr_JMPrzelicznikL: string,
|
||||||
|
Twr_JMPrzelicznikM: string,
|
||||||
|
Twr_JMZ: string,
|
||||||
|
Twr_Kod: string,
|
||||||
|
Twr_Nazwa: string,
|
||||||
|
Twr_NieAktywny: number,
|
||||||
|
Twr_Stawka: string,
|
||||||
|
Twr_TwGGIDNumer: number,
|
||||||
|
Twr_TwrId: number,
|
||||||
|
Options: Array<string>,
|
||||||
|
ChosenOption: string,
|
||||||
|
Quantity: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Contractor {
|
||||||
|
Knt_Email: string,
|
||||||
|
Knt_KntId: number,
|
||||||
|
Knt_KodPocztowy: string,
|
||||||
|
Knt_Miasto: string,
|
||||||
|
Knt_Nazwa1: string,
|
||||||
|
Knt_Nazwa2: string,
|
||||||
|
Knt_Nazwa3: string,
|
||||||
|
Knt_Niekatywny: number,
|
||||||
|
Knt_NipE: string,
|
||||||
|
Knt_NrDomu: string,
|
||||||
|
Knt_OpiekunId: number,
|
||||||
|
Knt_OpiekunTyp: number,
|
||||||
|
Knt_Ulica: string,
|
||||||
|
Knt_Wojewodztwo: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Order {
|
||||||
|
MZN_Bufor: number,
|
||||||
|
MZN_DataDos: string,
|
||||||
|
MZN_DataZam: string,
|
||||||
|
MZN_MZNID: number,
|
||||||
|
MZN_OpeID: number,
|
||||||
|
MZN_PodID: number,
|
||||||
|
MZN_PodKodPocztowy: string,
|
||||||
|
MZN_PodMiasto: string,
|
||||||
|
MZN_PodNazwa1: string,
|
||||||
|
MZN_PodNazwa2: string,
|
||||||
|
MZN_PodNazwa3: string,
|
||||||
|
MZN_PodNipE: string,
|
||||||
|
MZN_PodNrDomu: string,
|
||||||
|
MZN_PodUlica: string,
|
||||||
|
MZN_PodWojewodztwo: string,
|
||||||
|
MZN_TypDokumentu: number,
|
||||||
|
MZN_UUID: string,
|
||||||
|
MZamElem: Array<OrderProduct>
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface OrderProduct {
|
||||||
|
MZE_MZEID: number | undefined,
|
||||||
|
MZE_MZNID: number | undefined,
|
||||||
|
MZE_TwrCena: string,
|
||||||
|
MZE_TwrId: number,
|
||||||
|
MZE_TwrIlosc: string,
|
||||||
|
MZE_TwrJm: string,
|
||||||
|
MZE_TwrNazwa: string,
|
||||||
|
MZE_TwrStawka: string | undefined
|
||||||
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user