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

Summed table of products, small improvements

Browse Source
This commit is contained in:
Patryk Binkowski
2024-07-16 17:12:52 +02:00
parent bbec759b08
commit ff3b22fb1b
5 changed files with 176 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/MainForm.vue
View File

@@ -25,7 +25,9 @@ const showContractorsDropdown = ref<boolean>(false);
const contractorInput = 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) => {
@@ -41,8 +43,8 @@ function createJSON(event: Event) {
console.log(route);
const json = {
MZN_UUID: uuid.value,
MZN_DataZam: new Date(Date.now()).toISOString().split('T')[0],
MZN_DataDos: deliveryDate.value != undefined ? deliveryDate.value.toISOString() : null,
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,
MZamElem: new Array<OrderProduct>
};
@@ -73,6 +75,8 @@ function createJSON(event: Event) {
errorNotificationMessage.value = "W zamówieniu znajdują się niepoprawne wartości.";
return;
}
product.Twr_Cena = product.Twr_Cena == "" || product.Twr_Cena == null ? product.BasePrice : product.Twr_Cena;
product.Twr_CenaZ = product.Twr_CenaZ == "" || product.Twr_CenaZ == null ? product.BasePriceZ : product.Twr_CenaZ;
const productObject : OrderProduct = {
MZE_TwrId: product.Twr_TwrId,
MZE_TwrJm: product.ChosenOption,
@@ -97,6 +101,8 @@ function createJSON(event: Event) {
console.log(JSON.stringify(json));
axiosInstance.post('/zamowienie', JSON.stringify(json)).then( response => {
uuid.value = response.data.MZN_UUID;
showSuccessNotification.value = true;
successNotificationMessage.value = "Zamówienie zostało zapisane do bazy danych."
});
}
@@ -172,8 +178,8 @@ onBeforeUnmount( function () {
<div ref="contractorInput" class="dropdown maxwidth"
v-bind:class="{'is-active': showContractorsDropdown == true}">
<div class="dropdown-trigger maxwidth" @click="toggleContractorsDropdown">
<div class="field maxwidth" @onclick.prevent="toggleContractorsDropdown">
<p class="control is-expanded has-icons-right is-small maxwidth" @onclick.prevent="toggleContractorsDropdown">
<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="contractorSearch" @input="filterContractors" />
<span class="icon is-small is-right"><i class="fas fa-search"></i></span>
@@ -205,13 +211,25 @@ onBeforeUnmount( function () {
v-bind:dark = "isDarkTheme"/>
</div>
</div>
<div class="field mt-5">
<label class="label is-small">Uwagi do zamówienia</label>
<textarea
class="textarea"
placeholder="Jeszcze nie połączone z bazą danych"
rows="5"
></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-danger mt-5 ml-3" @click="cancelOrder" v-bind:disabled="uuid == undefined">Anuluj</button>
<div v-if="showErrorNotification==true" class="notification is-danger is-bold mt-5">
<div v-if="showErrorNotification" class="notification is-danger is-bold mt-5">
<button class="delete" @click.prevent="showErrorNotification = false"></button>
{{ errorNotificationMessage }}
</div>
<div v-if="showSuccessNotification" class="notification is-success is-bold mt-5">
<button class="delete" @click.prevent="showSuccessNotification = false"></button>
{{ successNotificationMessage }}
</div>
</div>
</div>
<div v-for="category in categories" :key="category.Kod">

8
src/main.ts
View File

@@ -89,7 +89,13 @@ export interface Product {
Twr_TwrId: number,
Options: Array<string>,
ChosenOption: string,
Quantity: string
Quantity: string,
BasePrice: string,
BasePriceZ: string,
SummedQuantity: number,
SummedQuantityZ: number,
SummedPrice: number,
SummedPriceZ: number
}
export interface Contractor {

41
src/stores/categories.store.ts
View File

@@ -1,5 +1,5 @@
import { defineStore } from 'pinia'
import type { Category } from '@/main'
import type { Category, Order, Product } from '@/main'
import { ref } from 'vue'
import { axiosInstance } from '@/main'
@@ -15,6 +15,12 @@ export const useCategoriesStore = defineStore('categories', () => {
for (const product of category.Towary) {
product.Options = new Array(product.Twr_JM);
product.ChosenOption = product.Twr_JM;
product.BasePrice = product.Twr_Cena;
product.BasePriceZ = product.Twr_CenaZ;
product.SummedQuantity = 0;
product.SummedQuantityZ = 0;
product.SummedPrice = 0;
product.SummedPriceZ = 0;
if (product.Twr_JMZ != null) {
product.Options.push(product.Twr_JMZ);
}
@@ -23,5 +29,36 @@ export const useCategoriesStore = defineStore('categories', () => {
}
}
return {categories, fetchCategories}
async function sumProductsFromOrders(orders : Array<Order>) {
const productsMap = new Map<string, Product>();
await fetchCategories();
if(categories.value != undefined) {
for (const category of categories.value) {
for (const product of category.Towary) {
productsMap.set(product.Twr_TwrId.toString(), product);
}
}
}
if(orders != undefined) {
for (const order of orders) {
for (const product of order.MZamElem) {
const mapProduct = productsMap.get(String(product.MZE_TwrId));
if(product.MZE_TwrJm == mapProduct?.Twr_JM) {
mapProduct.SummedQuantity += Number(product.MZE_TwrIlosc);
mapProduct.SummedPrice += (Number(product.MZE_TwrCena) * Number(product.MZE_TwrIlosc));
}
if (product.MZE_TwrJm == mapProduct?.Twr_JMZ) {
mapProduct.SummedQuantityZ += Number(product.MZE_TwrIlosc);
mapProduct.SummedPriceZ += (Number(product.MZE_TwrCena) * Number(product.MZE_TwrIlosc));
}
}
}
}
console.log(categories.value);
}
return {categories, fetchCategories, sumProductsFromOrders}
})

6
src/views/MainView.vue
View File

@@ -4,7 +4,7 @@
<div v-if="isLoading">
<LoadingComponent/>
</div>
<div>
<div v-else>
<div v-if="shownComponent == 'mainForm'">
<MainForm
v-if="order == undefined || order.MZN_Bufor==1"
@@ -15,7 +15,7 @@
/>
</div>
<ConfirmationModal v-show="showConfirmationModal" @close="showConfirmationModal = false" @confirm="closeConfirmationModal" :order-uuid="uuid"></ConfirmationModal>
<button class="button" @click="test">test</button>
<!-- <button class="button" @click="test">test</button>-->
</template>
<script setup lang="ts">
@@ -37,7 +37,7 @@ const contractor = storeToRefs(contractorsStore).contractor;
const categories = storeToRefs(categoriesStore).categories;
const { uuid, order } = storeToRefs(ordersStore);
const { username } = storeToRefs(userStore);
const { isForm, isOrders, showConfirmationModal, isLoading, shownComponent } = storeToRefs(siteControlStore);
const { showConfirmationModal, isLoading, shownComponent } = storeToRefs(siteControlStore);
async function fetchData() {

148
src/views/SummedOrdersView.vue
View File

@@ -6,17 +6,22 @@ import NavBar from '@/components/NavBar.vue'
import VueDatePicker from '@vuepic/vue-datepicker'
import { useSiteControlStore } from '@/stores/siteControl.store'
import { ref } from 'vue'
import { useCategoriesStore } from '@/stores/categories.store'
const ordersStore = useOrdersStore();
const siteControlStore = useSiteControlStore();
const categoriesStore = useCategoriesStore();
const { orders } = storeToRefs(ordersStore);
const { categories } = storeToRefs(categoriesStore);
const { isDarkTheme } = storeToRefs(siteControlStore);
const searchDate = ref<Date>();
const searchDate = ref<Date>(new Date(Date.now()));
const confirmedOrders = ref<boolean>();
const isSummed = ref<boolean>(true);
orders.value = await ordersStore.fetchOrdersByDay(new Date(Date.now()), null);
orders.value = await ordersStore.fetchOrdersByDay(searchDate.value, null);
await categoriesStore.fetchCategories();
const route = useRoute();
console.log(route);
@@ -26,65 +31,120 @@ async function fetchOrders() {
orders.value = await ordersStore.fetchOrdersByDateStartAndEnd(searchDate.value != undefined ? searchDate.value : new Date(Date.now()),
searchDate.value != undefined ? searchDate.value : new Date(Date.now()),
(confirmedOrders.value) ? true : null);
await categoriesStore.sumProductsFromOrders(orders.value);
}
categoriesStore.sumProductsFromOrders(orders.value);
</script>
<template>
<NavBar/>
<div class="columns box is-shadowless">
<div class="column box mr-3">
<h1 class="title is-4 mb-3">Opcje</h1>
<label class="label is-small">Data dostawy</label>
<VueDatePicker v-model="searchDate"
:enable-time-picker="false"
:clearable="true"
input-class-name="input is-small calendar-background"
menu-class-name="calendar-background"
v-bind:dark = "isDarkTheme" />
<div class="column">
<div class="box">
<h1 class="title is-4 mb-3">Opcje</h1>
<label class="label is-small">Data dostawy</label>
<VueDatePicker v-model="searchDate"
:enable-time-picker="false"
:clearable="true"
input-class-name="input is-small calendar-background"
menu-class-name="calendar-background"
v-bind:dark = "isDarkTheme" />
<div class="control mt-3">
<label class="checkbox mr-5">
<input type="checkbox" v-model="confirmedOrders"/>
Tylko potwierdzone zamówienia?
</label>
<div class="control mt-3">
<label class="checkbox mr-5">
<input type="checkbox" v-model="confirmedOrders"/>
Tylko potwierdzone zamówienia?
</label>
</div>
<button class="button mt-3" @click="fetchOrders">Potwierdź</button>
</div>
<div class="box mt-3">
<button class="button is-fullwidth mb-3" @click="isSummed=false">Rozdzielone zamówienia</button>
<button class="button is-fullwidth" @click="isSummed=true">Zsumowane zamówienia</button>
</div>
<button class="button mt-3" @click="fetchOrders">Potwierdź</button>
</div>
<div class="column is-four-fifths is-flex is-align-content-center box is-justify-content-center">
<table class="table blackBorder">
<thead>
<tr class="has-background-grey-light">
<th>Nazwa produktu</th>
<th>Ilość</th>
<th>Jednostka miary</th>
<th>Cena jednostkowa</th>
<th>Cena całkowita</th>
</tr>
</thead>
<tbody v-for="order in orders" :key="order.MZN_UUID">
<tr class="has-background-grey-lighter">
<th colspan="5">
{{ order.MZN_PodNazwa1 + order.MZN_PodNazwa2 + order.MZN_PodNazwa3 + order.MZN_DataDos.toString()}}
</th>
</tr>
<tr v-for="product in order.MZamElem" :key="product.MZE_MZEID">
<th>{{ product.MZE_TwrNazwa }}</th>
<th>{{ Number(product.MZE_TwrIlosc).toFixed(2) }}</th>
<th>{{ product.MZE_TwrJm }}</th>
<th>{{ Number(product.MZE_TwrCena).toFixed(2) }}</th>
<th>{{ (Number(product.MZE_TwrCena) * Number(product.MZE_TwrIlosc)).toFixed(2) }}</th>
</tr>
</tbody>
</table>
<div class="column is-four-fifths ">
<div class="is-flex is-justify-content-center is-flex-direction-row box" style="width: 100%; height: 100%; align-content: center">
<table class="table blackBorder tableOverflow" v-if="orders != undefined && orders.length != 0 && !isSummed">
<thead>
<tr class="has-background-grey-light">
<th>Nazwa produktu</th>
<th>Ilość</th>
<th>Jednostka miary</th>
<th>Cena jednostkowa</th>
<th>Cena całkowita</th>
</tr>
</thead>
<tbody v-for="order in orders" :key="order.MZN_UUID">
<tr class="has-background-grey-lighter">
<td colspan="5">
{{ order.MZN_PodNazwa1 + order.MZN_PodNazwa2 + order.MZN_PodNazwa3 + order.MZN_DataDos.toString()}}
</td>
</tr>
<tr v-for="product in order.MZamElem" :key="product.MZE_MZEID">
<td>{{ product.MZE_TwrNazwa }}</td>
<td>{{ Number(product.MZE_TwrIlosc).toFixed(2) }}</td>
<td>{{ product.MZE_TwrJm }}</td>
<td>{{ Number(product.MZE_TwrCena).toFixed(2) }} &nbsp;PLN</td>
<td>{{ (Number(product.MZE_TwrCena) * Number(product.MZE_TwrIlosc)).toFixed(2) }}&nbsp;PLN</td>
</tr>
</tbody>
</table>
<table class="table blackBorder tableOverflow" v-else-if="orders != undefined && orders.length != 0 && isSummed">
<thead>
<tr class="has-background-grey-light">
<th>Nazwa produktu</th>
<th>Ilość</th>
<th>Jednostka miary</th>
<th>Cena zsumowana</th>
</tr>
</thead>
<tbody>
<template v-for="category in categories" :key="category.Kod">
<template v-for="product in category.Towary" :key="product.Twr_Kod">
<tr v-if="product.SummedQuantity > 0">
<td>{{ product.Twr_Nazwa }}</td>
<td>{{ product.SummedQuantity.toFixed(2) }}</td>
<td>{{ product.Twr_JM }}</td>
<td>{{ product.SummedPrice.toFixed(2) }}&nbsp;PLN</td>
</tr>
<tr v-if="product.SummedQuantityZ > 0">
<td>{{ product.Twr_Nazwa }}</td>
<td>{{ product.SummedQuantityZ.toFixed(2) }}</td>
<td>{{ product.Twr_JM }}</td>
<td>{{ product.SummedPriceZ.toFixed(2) }}&nbsp;PLN</td>
</tr>
</template>
</template>
</tbody>
</table>
<p v-else class="title is-1 has-text-centered" style="height: min-content; align-self: center;">Brak zamówień</p>
</div>
</div>
</div>
</template>
<style scoped>
@media screen and (min-width: 500px) {
.box {
--bulma-box-padding: 1.5rem;
}
}
@media screen and (max-width: 500px) {
.box {
--bulma-box-padding: 0.75rem;
}
}
.blackBorder {
--bulma-table-cell-border-color : black;
}
.tableOverflow {
overflow-x: scroll;
display: block;
}
</style>