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

Small changes and fixes, highlight days on the calendar

Browse Source
This commit is contained in:
Patryk Binkowski
2024-07-26 11:58:07 +02:00
parent ff3b22fb1b
commit feee47f464
16 changed files with 296 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/components/CancelationModal.vue Normal file
View File

@@ -0,0 +1,45 @@
<script setup lang="ts">
import { useOrdersStore } from '@/stores/orders.store'
import { storeToRefs } from 'pinia'
import { axiosInstance } from '@/main'
import { useSiteControlStore } from '@/stores/siteControl.store'
import { useContractorsStore } from '@/stores/contractors.store'
import { useCategoriesStore } from '@/stores/categories.store'
const ordersStore = useOrdersStore();
const siteControlStore = useSiteControlStore();
const contractorStore = useContractorsStore();
const categoriesStore = useCategoriesStore();
const { uuid } = storeToRefs(ordersStore);
const { showCancellationModal, isLoading } = storeToRefs(siteControlStore);
async function cancelOrder() {
showCancellationModal.value = false;
axiosInstance.delete('/zamowienie/' + uuid.value);
siteControlStore.newOrder(true);
}
</script>
<template>
<div>
<div class="modal is-active">
<div class="modal-background"></div>
<div class="modal-card p-3">
<header class="modal-card-head">
<p class="modal-card-title">Uwaga</p>
<button class="delete" aria-label="close" @click="$emit('close')"></button>
</header>
<section class="modal-card-body">
Czy napewno chcesz anulować zamówienie? Czynności tej nie można odwrócić.
</section>
<footer class="modal-card-foot">
<div class="buttons">
<button class="button is-success" @click="cancelOrder">Tak</button>
<button class="button" @click="$emit('close')">Nie</button>
</div>
</footer>
</div>
</div>
</div>
</template>

59
src/components/MainForm.vue
View File

@@ -17,7 +17,7 @@ const siteControlStore = useSiteControlStore();
const { contractor, contractors } = storeToRefs(contractorsStore);
const { deliveryDate, uuid } = storeToRefs(ordersStore);
const { categories } = storeToRefs(categoriesStore);
const { showConfirmationModal, isDarkTheme } = storeToRefs(siteControlStore);
const { showConfirmationModal, showCancellationModal, isDarkTheme } = storeToRefs(siteControlStore);
const contractorSearch = ref<string>();
const filteredContractors = ref<Array<Contractor>>();
@@ -41,6 +41,10 @@ watch(contractor, (contractor) => {
function createJSON(event: Event) {
event.preventDefault();
console.log(route);
console.log(deliveryDate.value);
if(typeof deliveryDate.value != typeof Date) {
deliveryDate.value = new Date(deliveryDate.value as unknown as string);
}
const json = {
MZN_UUID: uuid.value,
MZN_DataZam: new Date(Date.now()).toISOString(),
@@ -70,7 +74,8 @@ function createJSON(event: Event) {
for (let category of categories.value) {
for (let product of category.Towary) {
if(product.Quantity != null && product.Quantity != '') {
if(isNaN(Number(product.Quantity)) || isNaN(Number(product.Twr_CenaZ)) || isNaN(Number(product.Twr_Cena))) {
if(isNaN(Number(product.Quantity)) || isNaN(Number(product.Twr_CenaZ)) || isNaN(Number(product.Twr_Cena))
|| product.Twr_Cena == "" || product.Twr_CenaZ == "") {
showErrorNotification.value=true;
errorNotificationMessage.value = "W zamówieniu znajdują się niepoprawne wartości.";
return;
@@ -83,6 +88,7 @@ function createJSON(event: Event) {
MZE_TwrCena: product.ChosenOption == product.Twr_JMZ ? product.Twr_CenaZ : product.Twr_Cena,
MZE_TwrIlosc: product.Quantity,
MZE_TwrNazwa: product.Twr_Nazwa,
MZE_TwrKod: product.Twr_Kod,
MZE_MZNID: undefined,
MZE_MZEID: undefined,
MZE_TwrStawka: undefined
@@ -118,8 +124,7 @@ function setConfirmationModal(event : Event) {
function cancelOrder(event: Event) {
event.preventDefault();
axiosInstance.delete('/zamowienie/' + uuid.value);
siteControlStore.newOrder();
showCancellationModal.value = true;
}
function filterContractors() {
@@ -220,7 +225,7 @@ onBeforeUnmount( function () {
></textarea>
</div>
<button class="button is-info mt-5">Zapisz</button>
<button class="button is-success mt-5 ml-3" @click="setConfirmationModal">Potwierdź</button>
<button class="button is-success mt-5 ml-3" @click="setConfirmationModal" v-bind:disabled="uuid == undefined">Potwierdź</button>
<button class="button is-danger mt-5 ml-3" @click="cancelOrder" v-bind:disabled="uuid == undefined">Anuluj</button>
<div v-if="showErrorNotification" class="notification is-danger is-bold mt-5">
<button class="delete" @click.prevent="showErrorNotification = false"></button>
@@ -239,26 +244,36 @@ onBeforeUnmount( function () {
<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"
v-bind:class="{ 'is-danger has-background-danger-soft': product.Twr_Cena != undefined && isNaN(Number(product.Twr_Cena)),'is-success has-background-success-soft': product.Quantity != undefined && product.Quantity as unknown as string != '' && !isNaN(Number(product.Quantity))}"
/>
<div class="field has-addons">
<p class="control is-expanded">
<input
class="input is-small is-fullwidth"
type="text"
placeholder="Kwota"
v-model="product.Twr_Cena"
v-bind:class="{ 'is-danger has-background-danger-soft': product.Twr_Cena != undefined && (isNaN(Number(product.Twr_Cena)) || product.Twr_Cena == ''),'is-success has-background-success-soft': product.Quantity != undefined && product.Quantity as unknown as string != '' && !isNaN(Number(product.Quantity))}"
/>
</p>
<p class="control">
<button class="button is-small is-danger is-outlined" @click.prevent="product.Twr_Cena = product.BasePrice">X</button>
</p>
</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"
v-bind:class="{ 'is-danger has-background-danger-soft': product.Twr_CenaZ != undefined && isNaN(Number(product.Twr_CenaZ)), 'is-success has-background-success-soft': product.Quantity != undefined && product.Quantity as unknown as string != '' && !isNaN(Number(product.Quantity))
}"
/>
<div class="field has-addons">
<p class="control is-expanded">
<input
class="input is-small"
type="text"
placeholder="Kwota"
v-model="product.Twr_CenaZ"
v-bind:class="{ 'is-danger has-background-danger-soft': product.Twr_CenaZ != undefined && isNaN(Number(product.Twr_CenaZ)), 'is-success has-background-success-soft': product.Quantity != undefined && product.Quantity as unknown as string != '' && !isNaN(Number(product.Quantity))
}"
/>
</p>
<p class="control">
<button class="button is-small is-danger is-outlined" @click.prevent="product.Twr_CenaZ = product.BasePriceZ">X</button>
</p>
</div>
</div>
<div class="column">

2
src/components/NavBar.vue
View File

@@ -52,7 +52,7 @@ function routeLogin() {
</script>
<template>
<nav class="navbar has-shadow" role="navigation" aria-label="main navigation">
<nav class="navbar has-shadow is-fixed-top" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item is-overflow-hidden" style="max-width: calc(100vw - 50px); white-space: nowrap; overflow: hidden">
<h3 class="title is-4">Mleczarnia</h3>

89
src/components/OrdersSelector.vue
View File

@@ -10,7 +10,7 @@ const siteControlStore = useSiteControlStore();
const searchOrderDate = ref<Array<Date>>();
const isOutOfBuffer = ref<boolean>(false);
const isInBufor = ref<boolean>(false);
const { orders } = storeToRefs(ordersStore);
const { orders, dates } = storeToRefs(ordersStore);
const areOrdersLoading = ref<boolean>(false);
const { isDarkTheme } = storeToRefs(siteControlStore);
@@ -60,13 +60,14 @@ async function fetchOrders(event : Event) {
<div class="box is-shadowless">
<form class="mb-3">
<div class="box">
<h1 class="is-large mb-3"><b>FILTR ZAMÓWIEŃ</b></h1>
<h1 class="mb-3 title is-5"><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"
:highlight="dates"
input-class-name="input is-small calendar-background"
menu-class-name="calendar-background"
v-bind:dark = "isDarkTheme"
@@ -90,52 +91,64 @@ async function fetchOrders(event : Event) {
</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" :class="{'confirmed' : order.MZN_Bufor == 0 && order.MZN_Anulowane != 1, 'cancelled' : order.MZN_Anulowane == 1}">
<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">
<h1 class="mb-3 title is-5"><b>ZAMÓWIENIA</b></h1>
<div v-for="date in dates" :key="date">
<h1 class="mb-3 subtitle is-6">{{ date }}</h1>
<div class="columns is-multiline">
<template v-for="order in orders" :key="order.MZN_UUID">
<div class="column is-4 mb-3" v-if="order.MZN_DataDos == date">
<div class="box" :class="{'confirmed' : order.MZN_Bufor == 0 && order.MZN_Anulowane != 1, 'cancelled' : order.MZN_Anulowane == 1}">
<label class="label is-small">Klient</label>
<div class="field is-small mb-3">
<input class="input is-small is-static"
type="text"
v-model="order.MZN_DataDos"
:value="order.MZN_PodNazwa1 + order.MZN_PodNazwa2 + order.MZN_PodNazwa3"
readonly/>
</div>
</div>
<div class="column is-6">
<label class="label is-small">Data zamówienia</label>
<div class="field is-small">
<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"
v-model="order.MZN_DataZam.split('T')[0]"
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>
<label class="label is-small mb-5">Produkty</label>
<div class="field columns is-multiline is-mobile">
<template v-for="product in order.MZamElem" :key="product.MZE_TwrKod">
<div class="column is-6 py-0">{{ product.MZE_TwrKod }}</div>
<div class="column is-6 py-0">{{Number(product.MZE_TwrIlosc).toFixed(2) + " " + product.MZE_TwrJm}}</div>
</template>
</div>
<button class="button is-info is-small is-expanded" @click="viewOrder(order.MZN_UUID)" :name="order.MZN_UUID">Podgląd</button>
</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-info is-small is-expanded" @click="viewOrder(order.MZN_UUID)" :name="order.MZN_UUID">Podgląd</button>
</div>
</template>
</div>
</div>
</div>