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

8
src/components/ConfirmationModal.vue
View File

@@ -5,23 +5,27 @@ import { axiosInstance } from '@/main'
import { useSiteControlStore } from '@/stores/siteControl.store'
import { useContractorsStore } from '@/stores/contractors.store'
import { useCategoriesStore } from '@/stores/categories.store'
import { useRoute } from 'vue-router'
import { useRoutesStore } from '@/stores/routes.store'
const ordersStore = useOrdersStore();
const siteControlStore = useSiteControlStore();
const contractorStore = useContractorsStore();
const categoriesStore = useCategoriesStore();
const routeStore = useRoutesStore();
const { contractor, contractors } = storeToRefs(contractorStore);
const { categories } = storeToRefs(categoriesStore);
const { uuid } = storeToRefs(ordersStore);
const { showConfirmationModal, isLoading} = storeToRefs(siteControlStore);
const { route, routes } = storeToRefs(routeStore);
async function confirmOrder() {
await axiosInstance.put('/zamowienie/' + uuid.value);
showConfirmationModal.value = false;
if (uuid.value != undefined) {
if (uuid.value != undefined && route.value != undefined) {
isLoading.value = true;
await ordersStore.loadOrder(uuid.value, true, contractor, contractors, categories);
await ordersStore.loadOrder(uuid.value, true, contractor, contractors, categories, route, routes);
isLoading.value = false;
}
}

13
src/components/ConfirmedForm.vue
View File

@@ -5,10 +5,12 @@ import { storeToRefs } from 'pinia'
import { useCategoriesStore } from '@/stores/categories.store'
import { useContractorsStore } from '@/stores/contractors.store'
import { axiosInstance } from '@/main'
import { useRoutesStore } from '@/stores/routes.store'
const ordersStore = useOrdersStore();
const categoriesStore = useCategoriesStore();
const contractorsStore = useContractorsStore();
const routeStore = useRoutesStore();
const { order, uuid} = storeToRefs(ordersStore);
@@ -16,6 +18,8 @@ const { categories } = storeToRefs(categoriesStore);
const { contractor } = storeToRefs(contractorsStore);
const { route } = storeToRefs(routeStore);
function cancelOrder(event: Event) {
event.preventDefault();
axiosInstance.delete('/zamowienie/' + uuid.value);
@@ -63,6 +67,15 @@ function cancelOrder(event: Event) {
hide-input-icon/>
</div>
</div>
<div class="field mb-3" v-if="route != undefined">
<label class="label is-small">Trasa</label>
<div class="field is-small mb-3">
<input class="input is-small is-static"
type="text"
:value="route.MZT_Nazwa1"
readonly/>
</div>
</div>
<button class="button is-danger" @click="cancelOrder">Anuluj zamówienie</button>
</div>
</div>

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>

6
src/main.ts
View File

@@ -149,6 +149,7 @@ export interface Order {
MZN_TypDokumentu: number,
MZN_UUID: string,
MZN_Uwagi: string,
MZN_MZTID: number,
MZamElem: Array<OrderProduct>
}
@@ -164,3 +165,8 @@ export interface OrderProduct {
MZE_TwrStawka: string | undefined,
}
export interface Route {
MZT_MZTID: number,
MZT_Nazwa1: string
}

5
src/stores/orders.store.ts
View File

@@ -1,5 +1,5 @@
import { defineStore } from 'pinia'
import type { Category, Contractor, Order } from '@/main'
import type { Category, Contractor, Order, Route } from '@/main'
import { type Ref, ref } from 'vue'
import { axiosInstance } from '@/main'
@@ -70,7 +70,7 @@ export const useOrdersStore = defineStore('orders', () => {
return datesTemp;
}
async function loadOrder(uuidString: string, confirmed: boolean, contractor: Ref<Contractor|undefined>, contractors: Ref<Array<Contractor>>, categories: Ref<Array<Category>>) {
async function loadOrder(uuidString: string, confirmed: boolean, contractor: Ref<Contractor|undefined>, contractors: Ref<Array<Contractor>>, categories: Ref<Array<Category>>, route: Ref<Route|undefined>, routes: Ref<Array<Route>|undefined>) {
const response = await axiosInstance.get('/zamowienie/' + uuidString);
const tempOrder = response.data;
console.log(tempOrder);
@@ -80,6 +80,7 @@ export const useOrdersStore = defineStore('orders', () => {
}
contractor.value = <Contractor>contractors.value?.find((contractor) => contractor.Knt_KntId == tempOrder.MZN_PodID);
route.value = <Route>routes.value?.find((route) => route.MZT_MZTID == tempOrder.MZN_MZTID);
deliveryDate.value = new Date(tempOrder.MZN_DataDos);
orderDate.value = new Date(tempOrder.MZN_DataZam);
uuid.value = uuidString;

17
src/stores/routes.store.ts Normal file
View File

@@ -0,0 +1,17 @@
import { defineStore } from 'pinia'
import type { Route } from '@/main'
import { ref } from 'vue'
import { axiosInstance } from '@/main'
export const useRoutesStore = defineStore('routes', () => {
const routes = ref<Array<Route>>();
const route = ref<Route>();
async function fetchRoutes() {
const response = await axiosInstance.get('/trasy', {withCredentials: true});
routes.value = [];
routes.value.push(...response.data);
}
return {routes, route, fetchRoutes};
});

8
src/stores/siteControl.store.ts
View File

@@ -5,6 +5,7 @@ import type { Order } from '@/main'
import { useContractorsStore } from '@/stores/contractors.store'
import { useCategoriesStore } from '@/stores/categories.store'
import { router } from '@/router/router'
import { useRoutesStore } from '@/stores/routes.store'
export const useSiteControlStore = defineStore('siteControl', () => {
const shownComponent = ref<string>("mainForm");
@@ -46,12 +47,14 @@ export const useSiteControlStore = defineStore('siteControl', () => {
const orderStore = useOrdersStore();
const contractorsStore = useContractorsStore();
const categoriesStore = useCategoriesStore();
const routeStore = useRoutesStore();
shownComponent.value = "mainForm";
isLoading.value = true;
await categoriesStore.fetchCategories();
const { contractor, contractors } = storeToRefs(contractorsStore);
const { categories } = storeToRefs(categoriesStore);
await orderStore.loadOrder(uuid, false, contractor, contractors, categories);
const { route, routes } = storeToRefs( routeStore );
await orderStore.loadOrder(uuid, false, contractor, contractors, categories, route, routes);
isLoading.value=false;
await router.push("/");
}
@@ -60,13 +63,16 @@ export const useSiteControlStore = defineStore('siteControl', () => {
const ordersStore = useOrdersStore();
const contractorsStore = useContractorsStore();
const categoriesStore = useCategoriesStore();
const routeStore = useRoutesStore();
const { order, uuid, deliveryDate, orderDate } = storeToRefs(ordersStore);
const { contractor } = storeToRefs(contractorsStore);
const { route } = storeToRefs(routeStore);
contractor.value = undefined;
order.value = undefined;
uuid.value = undefined;
deliveryDate.value = undefined;
orderDate.value = undefined;
route.value = undefined;
await categoriesStore.fetchCategories();
if (redirect) {
await router.push("/");

3
src/views/MainView.vue
View File

@@ -23,12 +23,14 @@ import { useCategoriesStore } from '@/stores/categories.store'
import { useOrdersStore } from '@/stores/orders.store'
import { useSiteControlStore } from '@/stores/siteControl.store'
import { useUserStore } from '@/stores/user.store'
import { useRoutesStore } from '@/stores/routes.store'
const contractorsStore = useContractorsStore();
const categoriesStore = useCategoriesStore();
const ordersStore = useOrdersStore();
const siteControlStore = useSiteControlStore();
const userStore = useUserStore();
const routesStore = useRoutesStore();
const contractors = storeToRefs(contractorsStore).contractors;
const contractor = storeToRefs(contractorsStore).contractor;
const categories = storeToRefs(categoriesStore).categories;
@@ -40,6 +42,7 @@ const { showConfirmationModal, showCancellationModal, isLoading, shownComponent
async function fetchData() {
//await categoriesStore.fetchCategories();
await contractorsStore.fetchContractors();
await routesStore.fetchRoutes();
//siteControlStore.newOrder(false);
isLoading.value = false;
}