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

Bugfix

Browse Source
This commit is contained in:
Patryk Binkowski
2024-09-03 09:33:00 +02:00
parent ce89b79074
commit d7e28cd926
8 changed files with 1317 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1193
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

5
package.json
View File

@@ -14,20 +14,22 @@
}, },
"dependencies": { "dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.6.0", "@fortawesome/fontawesome-svg-core": "^6.6.0",
"@primevue/themes": "^4.0.4",
"@vuepic/vue-datepicker": "^8.7.0", "@vuepic/vue-datepicker": "^8.7.0",
"axios": "^1.7.2", "axios": "^1.7.2",
"bulma": "^1.0.1", "bulma": "^1.0.1",
"cors": "^2.8.5", "cors": "^2.8.5",
"pinia": "^2.1.7", "pinia": "^2.1.7",
"primevue": "^4.0.4",
"vee-validate": "^4.13.1", "vee-validate": "^4.13.1",
"vue": "^3.4.21", "vue": "^3.4.21",
"vue-router": "^4.3.3", "vue-router": "^4.3.3",
"vue-to-print": "^1.1.0",
"vue3-cookies": "^1.0.6", "vue3-cookies": "^1.0.6",
"vue3-print-nb": "^0.1.4", "vue3-print-nb": "^0.1.4",
"yup": "^1.4.0" "yup": "^1.4.0"
}, },
"devDependencies": { "devDependencies": {
"@primevue/auto-import-resolver": "^4.0.4",
"@rushstack/eslint-patch": "^1.8.0", "@rushstack/eslint-patch": "^1.8.0",
"@tsconfig/node20": "^20.1.4", "@tsconfig/node20": "^20.1.4",
"@types/node": "^20.12.5", "@types/node": "^20.12.5",
@@ -41,6 +43,7 @@
"prettier": "^3.2.5", "prettier": "^3.2.5",
"sass": "^1.77.2", "sass": "^1.77.2",
"typescript": "~5.4.0", "typescript": "~5.4.0",
"unplugin-vue-components": "^0.27.3",
"vite": "^5.2.8", "vite": "^5.2.8",
"vue-tsc": "^2.0.11" "vue-tsc": "^2.0.11"
} }

178
src/components/SummaryComponent.vue
View File

@@ -1,25 +1,22 @@
<script setup lang="ts"> <script setup lang="ts">
import { useOrdersStore } from '@/stores/orders.store' import { useOrdersStore } from '@/stores/orders.store'
import { storeToRefs } from 'pinia' import { storeToRefs } from 'pinia'
import { useRoute } from 'vue-router'
import NavBar from '@/components/NavBar.vue'
import VueDatePicker from '@vuepic/vue-datepicker' import VueDatePicker from '@vuepic/vue-datepicker'
import { useSiteControlStore } from '@/stores/siteControl.store' import { useSiteControlStore } from '@/stores/siteControl.store'
import { onMounted, ref } from 'vue' import { onMounted, ref } from 'vue'
import { useCategoriesStore } from '@/stores/categories.store' import { useCategoriesStore } from '@/stores/categories.store'
import type { Product } from '@/main'
const ordersStore = useOrdersStore(); const ordersStore = useOrdersStore();
const siteControlStore = useSiteControlStore();
const categoriesStore = useCategoriesStore(); const categoriesStore = useCategoriesStore();
const { orders, dates } = storeToRefs(ordersStore); const { orders, dates } = storeToRefs(ordersStore);
const { categories } = storeToRefs(categoriesStore);
const { isDarkTheme } = storeToRefs(siteControlStore);
const searchDate = ref<Date>(new Date(Date.now())); const searchDate = ref<Date>(new Date(Date.now()));
const confirmedOrders = ref<boolean>(); const confirmedOrders = ref<boolean>();
const isSummed = ref<boolean>(true); const isSummed = ref<boolean>(true);
const printMe = ref();
const isLoading = ref<boolean>(true); const isLoading = ref<boolean>(true);
const summedProducts = ref<Array<Product>>([]);
const products = ref<Array<Object>>();
async function fetchOrders() { async function fetchOrders() {
isLoading.value=true; isLoading.value=true;
@@ -27,13 +24,53 @@
orders.value = await ordersStore.fetchOrdersByDateStartAndEnd(searchDate.value != undefined ? searchDate.value : new Date(Date.now()), orders.value = await ordersStore.fetchOrdersByDateStartAndEnd(searchDate.value != undefined ? searchDate.value : new Date(Date.now()),
searchDate.value != undefined ? searchDate.value : new Date(Date.now()), searchDate.value != undefined ? searchDate.value : new Date(Date.now()),
(confirmedOrders.value) ? true : null); (confirmedOrders.value) ? true : null);
await categoriesStore.sumProductsFromOrders(orders.value); const productsMap = await categoriesStore.sumProductsFromOrders(orders.value);
for(const product of productsMap.values()) {
if(product.SummedQuantity > 0) {
summedProducts.value.push(product);
}
}
await prepareProductsFromOrders();
isLoading.value=false; isLoading.value=false;
} }
async function prepareProductsFromOrders() {
products.value = [];
if(orders.value == undefined) {
return;
}
for(const order of orders.value) {
for (const product of order.MZamElem) {
const newProduct = {
'kod': product.MZE_TwrKod,
'nazwa': product.MZE_TwrNazwa,
'ilosc': Number(product.MZE_TwrIlosc).toFixed(2),
'jm': product.MZE_TwrJm,
'cena': Number(product.MZE_TwrCena).toFixed(2),
'suma': Number(Number(product.MZE_TwrCena) * Number(product.MZE_TwrIlosc)).toFixed(2),
'order': {
'uuid': order.MZN_UUID,
'nazwaklienta': order.MZN_PodNazwa1 + order.MZN_PodNazwa2 + order.MZN_PodNazwa3
}
}
products.value.push(newProduct);
}
}
}
onMounted(async () => { onMounted(async () => {
orders.value = await ordersStore.fetchOrdersByDay(searchDate.value, null); orders.value = await ordersStore.fetchOrdersByDay(searchDate.value, null);
await categoriesStore.sumProductsFromOrders(orders.value); const productsMap = await categoriesStore.sumProductsFromOrders(orders.value);
summedProducts.value = [];
for(const product of productsMap.values()) {
if(product.SummedQuantity > 0) {
summedProducts.value.push(product);
}
}
console.log(summedProducts.value);
await prepareProductsFromOrders();
console.log(products.value);
isLoading.value=false; isLoading.value=false;
}); });
</script> </script>
@@ -68,75 +105,49 @@
</div> </div>
</div> </div>
<div class="column is-four-fifths"> <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: space-evenly;"> <div class="box" style="width: 100%; height: 100%; padding: 0">
<div class="is-flex is-justify-content-center is-flex-direction-row" id="printMe" style=""> <div style="width: 100%; height: 100%">
<div v-if="isLoading == true" class="title is-1 has-text-centered element is-loading" style="height: 25%; align-self: center;"></div> <div v-if="isLoading == true" class="is-flex is-justify-content-center is-flex-direction-row" style="height: 100%; align-content:space-evenly">
<table class="table blackBorder tableOverflow" v-else-if="orders != undefined && orders.length != 0 && !isSummed"> <div class="title is-1 has-text-centered element is-loading" style="min-height: 150px; align-self: center;"></div>
<thead style="width: 100%"> </div>
<tr class="has-background-grey-light"> <DataTable :value="products" class="mb-3" style="padding:0" scrollable id="printMe" rowGroupMode="subheader" groupRowsBy="order.uuid" v-else-if="orders != undefined && orders.length != 0 && !isSummed">
<th>Indeks</th> <Column field="order.uuid" header="UUID"/>
<th>Nazwa produktu</th> <Column field="kod" header="Indeks" frozen></Column>
<th>Ilość</th> <Column field="nazwa" header="Nazwa"/>
<th>Jednostka miary</th> <Column field="ilosc" header="Ilość"/>
<th>Cena jednostkowa</th> <Column field="jm" header="JM"/>
<th>Cena całkowita</th> <Column field="cena" header="Cena"/>
</tr> <Column field="suma" header="Suma"/>
</thead> <template #groupheader="slotProps">
<tbody v-for="order in orders" :key="order.MZN_UUID"> <span>{{ slotProps.data.order.nazwaklienta }}</span>
<tr class="has-background-grey-lighter dashedBorder">
<td colspan="6">
{{ order.MZN_PodNazwa1 + order.MZN_PodNazwa2 + order.MZN_PodNazwa3 }}
</td>
</tr>
<tr v-for="product in order.MZamElem" :key="product.MZE_MZEID">
<td>{{product.MZE_TwrKod}}</td>
<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>Indeks</th>
<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_Kod}}</td>
<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_Kod}}</td>
<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>
</DataTable>
<DataTable :value="summedProducts" class="mb-3" style="padding:0" scrollable id="printMe" v-else-if="orders != undefined && orders.length != 0 && isSummed">
<Column field="Twr_Kod" header="Indeks" frozen></Column>
<Column field="Twr_Nazwa" header="Nazwa"/>
<Column field="SummedQuantity" header="Ilość">
<template #body="slotProps">
<span>{{ slotProps.data.SummedQuantity.toFixed(2)}}</span>
</template> </template>
</tbody> </Column>
</table> <Column field="Twr_JM" header="JM">
<p v-else class="title is-1 has-text-centered" style="height: min-content; align-self: center;">Brak zamówień</p> </Column>
<Column field="SummedPrice" header="Suma">
<template #body="slotProps">
<span>{{ slotProps.data.SummedPrice.toFixed(2)}}</span>
</template>
</Column>
</DataTable>
<div v-else class="is-flex is-justify-content-center is-flex-direction-row">
<p class="title is-1 has-text-centered" style="height: min-content; align-self: center;">Brak zamówień</p>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<style scoped> <style>
@media screen and (min-width: 500px) { @media screen and (min-width: 500px) {
.box { .box {
--bulma-box-padding: 1.5rem; --bulma-box-padding: 1.5rem;
@@ -155,8 +166,37 @@
.tableOverflow { .tableOverflow {
overflow-x: scroll; overflow-x: scroll;
display: block; display: block;
padding: 0;
} }
.test {
padding: 0.75rem;
}
tr th:first-child{
border-top-left-radius: 0.75rem;
}
tr th:last-child{
border-top-right-radius: 0.75rem;
}
.p-datatable-scrollable {
border-top-right-radius: 0.75rem;
border-top-left-radius: 0.75rem;
}
.p-datatable-table-container {
border-top-right-radius: 0.75rem;
border-top-left-radius: 0.75rem;
}
table {
border-top-right-radius: 0.75rem;
border-top-left-radius: 0.75rem;
}
@media print { @media print {
.dashedBorder{ .dashedBorder{
border-style: dotted; border-style: dotted;

19
src/main.ts
View File

@@ -17,6 +17,8 @@ import { useUserStore } from '@/stores/user.store'
import print from 'vue3-print-nb' import print from 'vue3-print-nb'
import CancelationModal from '@/components/CancelationModal.vue' import CancelationModal from '@/components/CancelationModal.vue'
import SummaryComponent from '@/components/SummaryComponent.vue' import SummaryComponent from '@/components/SummaryComponent.vue'
import PrimeVue from "primevue/config";
import Lara from '@primevue/themes/lara';
const app = createApp(App); const app = createApp(App);
const pinia = createPinia(); const pinia = createPinia();
@@ -24,6 +26,17 @@ app.use(pinia);
app.use(VueCookies); app.use(VueCookies);
app.use(router); app.use(router);
app.use(print); app.use(print);
app.use(PrimeVue, {
// Default theme configuration
theme: {
preset: Lara,
options: {
prefix: 'p',
darkModeSelector: 'system',
cssLayer: false
}
}
});
if(localStorage.getItem('piniaState')) { if(localStorage.getItem('piniaState')) {
pinia.state.value = JSON.parse(localStorage.getItem('piniaState') as string); pinia.state.value = JSON.parse(localStorage.getItem('piniaState') as string);
@@ -95,9 +108,7 @@ export interface Product {
BasePrice: string, BasePrice: string,
BasePriceZ: string, BasePriceZ: string,
SummedQuantity: number, SummedQuantity: number,
SummedQuantityZ: number, SummedPrice: number
SummedPrice: number,
SummedPriceZ: number
} }
export interface Contractor { export interface Contractor {
@@ -150,6 +161,6 @@ export interface OrderProduct {
MZE_TwrJm: string, MZE_TwrJm: string,
MZE_TwrNazwa: string, MZE_TwrNazwa: string,
MZE_TwrKod: string, MZE_TwrKod: string,
MZE_TwrStawka: string | undefined MZE_TwrStawka: string | undefined,
} }

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

@@ -18,9 +18,7 @@ export const useCategoriesStore = defineStore('categories', () => {
product.BasePrice = product.Twr_Cena; product.BasePrice = product.Twr_Cena;
product.BasePriceZ = product.Twr_CenaZ; product.BasePriceZ = product.Twr_CenaZ;
product.SummedQuantity = 0; product.SummedQuantity = 0;
product.SummedQuantityZ = 0;
product.SummedPrice = 0; product.SummedPrice = 0;
product.SummedPriceZ = 0;
if (product.Twr_JMZ != null) { if (product.Twr_JMZ != null) {
product.Options.push(product.Twr_JMZ); product.Options.push(product.Twr_JMZ);
} }
@@ -50,18 +48,14 @@ export const useCategoriesStore = defineStore('categories', () => {
mapProduct.SummedQuantity += Number(product.MZE_TwrIlosc); mapProduct.SummedQuantity += Number(product.MZE_TwrIlosc);
mapProduct.SummedPrice += (Number(product.MZE_TwrCena) * Number(product.MZE_TwrIlosc)); mapProduct.SummedPrice += (Number(product.MZE_TwrCena) * Number(product.MZE_TwrIlosc));
} }
if (product.MZE_TwrJm == mapProduct?.Twr_JMZ) { else if (product.MZE_TwrJm == mapProduct?.Twr_JMZ) {
mapProduct.SummedQuantityZ += Number(product.MZE_TwrIlosc); mapProduct.SummedQuantity += (Number(product.MZE_TwrIlosc) * Number(mapProduct.Twr_JMPrzelicznikM))/Number(mapProduct.Twr_JMPrzelicznikL);
mapProduct.SummedPriceZ += (Number(product.MZE_TwrCena) * Number(product.MZE_TwrIlosc)); mapProduct.SummedPrice += (Number(product.MZE_TwrCena) * Number(product.MZE_TwrIlosc));
// mapProduct.SummedQuantity += Number(product.MZE_TwrIlosc) * Number(product.mnoznik);
// mapProduct.SummedPrice += (Number(product.MZE_TwrCena) * Number(product.MZE_TwrIlosc));
}
} }
} }
} }
console.log(categories.value); }
return productsMap;
} }
return {categories, fetchCategories, sumProductsFromOrders} return {categories, fetchCategories, sumProductsFromOrders}

8
src/views/MainView.vue
View File

@@ -38,15 +38,13 @@ const { showConfirmationModal, showCancellationModal, isLoading, shownComponent
async function fetchData() { async function fetchData() {
await categoriesStore.fetchCategories(); //await categoriesStore.fetchCategories();
await contractorsStore.fetchContractors(); await contractorsStore.fetchContractors();
siteControlStore.newOrder(false); //siteControlStore.newOrder(false);
isLoading.value = false; isLoading.value = false;
} }
siteControlStore.checkTheme(); siteControlStore.checkTheme();
//fetchData(); fetchData();
isLoading.value = false;
</script> </script>
<style> <style>

5
tsconfig.json
View File

@@ -7,5 +7,8 @@
{ {
"path": "./tsconfig.app.json" "path": "./tsconfig.app.json"
} }
] ],
"compilerOptions": {
"allowJs": true
}
} }

7
vite.config.ts
View File

@@ -2,11 +2,18 @@ import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite' import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue' import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite';
import {PrimeVueResolver} from '@primevue/auto-import-resolver';
// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default defineConfig({ export default defineConfig({
plugins: [ plugins: [
vue(), vue(),
Components({
resolvers: [
PrimeVueResolver()
]
})
], ],
resolve: { resolve: {
alias: { alias: {