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

Nowe pole Trasa

Browse Source
This commit is contained in:
Patryk Binkowski
2024-09-09 13:27:25 +02:00
parent 8140233e3a
commit eeac03235b
8 changed files with 149 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
src/components/MainForm.vue
View File

@@ -1,34 +1,40 @@
<script setup lang="ts">
import VueDatePicker from '@vuepic/vue-datepicker';
import { axiosInstance, type Contractor, type OrderProduct } from '@/main'
import { axiosInstance, type Contractor, type OrderProduct, type Route } from '@/main'
import { useCategoriesStore } from '@/stores/categories.store'
import { useContractorsStore } from '@/stores/contractors.store'
import { useOrdersStore } from '@/stores/orders.store'
import { storeToRefs } from 'pinia'
import { useSiteControlStore } from '@/stores/siteControl.store'
import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useRoutesStore } from '@/stores/routes.store'
const categoriesStore = useCategoriesStore();
const contractorsStore = useContractorsStore();
const ordersStore = useOrdersStore();
const siteControlStore = useSiteControlStore();
const routesStore = useRoutesStore();
const { contractor, contractors } = storeToRefs(contractorsStore);
const { deliveryDate, uuid, additionalNotes } = storeToRefs(ordersStore);
const { categories } = storeToRefs(categoriesStore);
const { showConfirmationModal, showCancellationModal, isDarkTheme } = storeToRefs(siteControlStore);
const { route, routes } = storeToRefs(routesStore);
const contractorSearch = ref<string>();
const filteredContractors = ref<Array<Contractor>>();
const showContractorsDropdown = ref<boolean>(false);
const contractorInput = ref(null);
const routeSearch = ref<string>();
const filteredRoutes = ref<Array<Route>>();
const showRoutesDropdown = ref<boolean>(false);
const routeInput = ref(null);
const showErrorNotification = ref<boolean>(false);
const showSuccessNotification = ref<boolean>(false);
const errorNotificationMessage = ref<string>();
const successNotificationMessage = ref<string>();
const route = useRoute();
watch(contractor, (contractor) => {
if(contractor == undefined) {
@@ -38,9 +44,16 @@ watch(contractor, (contractor) => {
}
}, { immediate: true });
watch(route, (route) => {
if(route == undefined) {
routeSearch.value = '';
} else {
routeSearch.value = route.MZT_Nazwa1;
}
}, { immediate: true });
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);
@@ -50,6 +63,7 @@ function createJSON(event: Event) {
MZN_DataZam: new Date(Date.now()).toISOString(),
MZN_DataDos: deliveryDate.value != undefined ? deliveryDate.value.toISOString().split('T')[0] : null,
MZN_PodID: contractor.value?.Knt_KntId,
MZN_MZTID: route.value?.MZT_MZTID,
MZamElem: new Array<OrderProduct>
};
@@ -148,36 +162,67 @@ function toggleContractorsDropdown() {
}
}
function handleClickOutsideDropdown(event : Event) {
if(contractorInput.value != null && !contractorInput.value.contains(event.target)){
showContractorsDropdown.value = false;
}
}
function selectContractorFromDropdown(selectedContractor : Contractor) {
console.log(selectedContractor);
contractor.value = selectedContractor;
showContractorsDropdown.value = false;
}
function filterRoutes() {
if (routeSearch.value == "") {
route.value = undefined;
filteredRoutes.value = routes.value;
return;
}
if(routes.value != undefined) {
filteredRoutes.value = routes.value.filter(
route =>
route.MZT_Nazwa1.toLowerCase().includes(routeSearch.value?.toLowerCase() as string)
);
}
}
function toggleRoutesDropdown() {
if(!showRoutesDropdown.value) {
showRoutesDropdown.value = true;
if(routeSearch.value == undefined || routeSearch.value == '') {
filteredRoutes.value = routes.value;
}
}
}
function selectRouteFromDropdown(selectedRoute : Route) {
route.value = selectedRoute;
showRoutesDropdown.value = false;
}
function handleClickOutsideDropdown(event : Event) {
if(contractorInput.value != null && !contractorInput.value.contains(event.target)){
showContractorsDropdown.value = false;
}
if(routeInput.value != null && !routeInput.value.contains(event.target)){
showRoutesDropdown.value = false;
}
}
onMounted(function (){
document.addEventListener('click', handleClickOutsideDropdown);
});
onBeforeUnmount( function () {
document.removeEventListener('click', handleClickOutsideDropdown);
})
});
</script>
<template>
<form class="box is-shadowless" @submit.prevent="createJSON">
<div>
<div class="box">
<div class="box mb-5">
<div class="mb-3">
<h1 class="title is-5"><b>ZAMÓWIENIE</b></h1>
<h1 class="subtitle is-5" v-if="uuid != undefined" ><b>{{ uuid }}</b></h1>
</div>
<div class="field mb-5">
<div class="field mb-3">
<label class="label is-small">Klient</label>
<div class="field">
<div ref="contractorInput" class="dropdown maxwidth"
@@ -204,7 +249,7 @@ onBeforeUnmount( function () {
</div>
</div>
</div>
<div class="field">
<div class="field mb-3">
<label class="label is-small">Data dostawy</label>
<div class="field is-small">
<VueDatePicker class ="bulma-is-small"
@@ -217,7 +262,36 @@ onBeforeUnmount( function () {
/>
</div>
</div>
<div class="field mt-5">
<div class="field mb-3">
<label class="label is-small">Trasa</label>
<div class="field">
<div ref="routeInput" class="dropdown maxwidth"
v-bind:class="{'is-active': showRoutesDropdown == true}">
<div class="dropdown-trigger maxwidth" @click="toggleRoutesDropdown">
<div class="field maxwidth">
<p class="control is-expanded has-icons-right is-small maxwidth">
<input class="input is-small is-expanded maxwidth" type="search"
v-model="routeSearch" @input="filterRoutes" />
<span class="icon is-small is-right"><i class="fas fa-search"></i></span>
</p>
</div>
</div>
<div class="dropdown-menu is-clipped has-background-info-on-scheme-invert" id="dropdown-menu" role="menu" style="max-width: calc(100vw - 3rem); box-shadow: 0px 0px 6px -1px rgba(165, 165, 165, 0.8); border-radius: 10px 10px 10px 10px; overflow-x:auto">
<div class="dropdown-content" style="max-height: 50vh; overflow-x: auto">
<a v-if="filteredRoutes != undefined && filteredRoutes.length == 0" class="dropdown-item is-clipped">Brak wyników</a>
<a class="dropdown-item is-clipped" @click = "selectRouteFromDropdown(dropdownRoute)"
v-bind:class = "{'has-background-info' : route == null}">Brak</a>
<a v-for="dropdownRoute in filteredRoutes" v-bind:key="dropdownRoute.MZT_MZTID"
class="dropdown-item is-clipped" @click = "selectRouteFromDropdown(dropdownRoute)"
v-bind:class = "{'has-background-info' : dropdownRoute == route}">
{{dropdownRoute.MZT_Nazwa1}}
</a>
</div>
</div>
</div>
</div>
</div>
<div class="field">
<label class="label is-small">Uwagi do zamówienia</label>
<textarea
v-model="additionalNotes"
@@ -226,14 +300,14 @@ onBeforeUnmount( function () {
rows="5"
></textarea>
</div>
<button class="button is-info mt-5">Zapisz</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="button is-info mt-3">Zapisz</button>
<button class="button is-success mt-3 ml-3" @click="setConfirmationModal" v-bind:disabled="uuid == undefined">Potwierdź</button>
<button class="button is-danger mt-3 ml-3" @click="cancelOrder" v-bind:disabled="uuid == undefined">Anuluj</button>
<div v-if="showErrorNotification" class="notification is-danger is-bold mt-3">
<button class="delete" @click.prevent="showErrorNotification = false"></button>
{{ errorNotificationMessage }}
</div>
<div v-if="showSuccessNotification" class="notification is-success is-bold mt-5">
<div v-if="showSuccessNotification" class="notification is-success is-bold mt-3">
<button class="delete" @click.prevent="showSuccessNotification = false"></button>
{{ successNotificationMessage }}
</div>