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

2
index.html
View File

@@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mleczarnia Kuzma</title> <title>Mleczarnia Kuzma</title>
</head> </head>
<body> <body class="has-navbar-fixed-top">
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
</body> </body>

38
package-lock.json generated
View File

@@ -8,6 +8,7 @@
"name": "testvue", "name": "testvue",
"version": "0.0.0", "version": "0.0.0",
"dependencies": { "dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.6.0",
"@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",
@@ -16,7 +17,9 @@
"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",
"yup": "^1.4.0" "yup": "^1.4.0"
}, },
"devDependencies": { "devDependencies": {
@@ -494,6 +497,25 @@
"node": "^12.22.0 || ^14.17.0 || >=16.0.0" "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
} }
}, },
"node_modules/@fortawesome/fontawesome-common-types": {
"version": "6.6.0",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.6.0.tgz",
"integrity": "sha512-xyX0X9mc0kyz9plIyryrRbl7ngsA9jz77mCZJsUkLl+ZKs0KWObgaEBoSgQiYWAsSmjz/yjl0F++Got0Mdp4Rw==",
"engines": {
"node": ">=6"
}
},
"node_modules/@fortawesome/fontawesome-svg-core": {
"version": "6.6.0",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.6.0.tgz",
"integrity": "sha512-KHwPkCk6oRT4HADE7smhfsKudt9N/9lm6EJ5BVg0tD1yPA5hht837fB87F8pn15D8JfTqQOjhKTktwmLMiD7Kg==",
"dependencies": {
"@fortawesome/fontawesome-common-types": "6.6.0"
},
"engines": {
"node": ">=6"
}
},
"node_modules/@humanwhocodes/config-array": { "node_modules/@humanwhocodes/config-array": {
"version": "0.11.14", "version": "0.11.14",
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
@@ -3385,6 +3407,14 @@
"he": "^1.2.0" "he": "^1.2.0"
} }
}, },
"node_modules/vue-to-print": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/vue-to-print/-/vue-to-print-1.1.0.tgz",
"integrity": "sha512-k6/4TQ9x2yIzV7PR2DPKySJ0fz04wtfK4pd/JSD1Lr6Z0qYoM5NP4NqzfR/d9pLFGlBrhHjO6W1UyeE95zrKpA==",
"peerDependencies": {
"vue": "^3.0.0"
}
},
"node_modules/vue-tsc": { "node_modules/vue-tsc": {
"version": "2.0.19", "version": "2.0.19",
"resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.0.19.tgz", "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.0.19.tgz",
@@ -3410,6 +3440,14 @@
"vue": "^3.0.0" "vue": "^3.0.0"
} }
}, },
"node_modules/vue3-print-nb": {
"version": "0.1.4",
"resolved": "https://registry.npmjs.org/vue3-print-nb/-/vue3-print-nb-0.1.4.tgz",
"integrity": "sha512-LExI7viEzplR6ZKQ2b+V4U0cwGYbVD4fut/XHvk3UPGlT5CcvIGs6VlwGp107aKgk6P8Pgx4rco3Rehv2lti3A==",
"dependencies": {
"vue": "^3.0.5"
}
},
"node_modules/which": { "node_modules/which": {
"version": "2.0.2", "version": "2.0.2",
"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",

3
package.json
View File

@@ -13,6 +13,7 @@
"format": "prettier --write src/" "format": "prettier --write src/"
}, },
"dependencies": { "dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.6.0",
"@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",
@@ -21,7 +22,9 @@
"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",
"yup": "^1.4.0" "yup": "^1.4.0"
}, },
"devDependencies": { "devDependencies": {

15
src/App.vue
View File

@@ -1,28 +1,17 @@
<template> <template>
<Suspense> <Suspense>
<RouterView /> <RouterView class="has-navbar-fixed-top"/>
</Suspense> </Suspense>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import './assets/style.scss' import './assets/style.scss'
import './assets/print.css'
import { RouterView } from 'vue-router' import { RouterView } from 'vue-router'
import { watch } from 'vue'
import { getActivePinia } from 'pinia' import { getActivePinia } from 'pinia'
const pinia = getActivePinia(); const pinia = getActivePinia();
if(pinia != undefined) {
watch(
pinia.state,
(state) => {
// persist the whole state to the local storage whenever it changes
localStorage.setItem('piniaState', JSON.stringify(state))
},
{ deep: true }
);
}
</script> </script>
<style> <style>

9
src/assets/main.css
View File

@@ -7,6 +7,15 @@
font-weight: normal; font-weight: normal;
} }
.blackBorder {
--bulma-table-cell-border-color : black;
}
.tableOverflow {
overflow-x: scroll;
display: block;
}
a, a,
.green { .green {
text-decoration: none; text-decoration: none;

8
src/assets/print.css Normal file
View File

@@ -0,0 +1,8 @@
.blackBorder {
--bulma-table-cell-border-color : black;
}
.tableOverflow {
overflow-x: scroll;
display: block;
}

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

2
src/components/NavBar.vue
View File

@@ -52,7 +52,7 @@ function routeLogin() {
</script> </script>
<template> <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"> <div class="navbar-brand">
<a class="navbar-item is-overflow-hidden" style="max-width: calc(100vw - 50px); white-space: nowrap; overflow: hidden"> <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> <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 searchOrderDate = ref<Array<Date>>();
const isOutOfBuffer = ref<boolean>(false); const isOutOfBuffer = ref<boolean>(false);
const isInBufor = ref<boolean>(false); const isInBufor = ref<boolean>(false);
const { orders } = storeToRefs(ordersStore); const { orders, dates } = storeToRefs(ordersStore);
const areOrdersLoading = ref<boolean>(false); const areOrdersLoading = ref<boolean>(false);
const { isDarkTheme } = storeToRefs(siteControlStore); const { isDarkTheme } = storeToRefs(siteControlStore);
@@ -60,13 +60,14 @@ async function fetchOrders(event : Event) {
<div class="box is-shadowless"> <div class="box is-shadowless">
<form class="mb-3"> <form class="mb-3">
<div class="box"> <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"> <div class="field mb-5">
<label class="label is-small">Data zamówienia</label> <label class="label is-small">Data zamówienia</label>
<div class="field is-small"> <div class="field is-small">
<VueDatePicker v-model="searchOrderDate" <VueDatePicker v-model="searchOrderDate"
:enable-time-picker="false" :enable-time-picker="false"
:clearable="true" :clearable="true"
:highlight="dates"
input-class-name="input is-small calendar-background" input-class-name="input is-small calendar-background"
menu-class-name="calendar-background" menu-class-name="calendar-background"
v-bind:dark = "isDarkTheme" v-bind:dark = "isDarkTheme"
@@ -90,52 +91,64 @@ async function fetchOrders(event : Event) {
</div> </div>
</form> </form>
<div class="box"> <div class="box">
<h1 class="is-large mb-3"><b>ZAMÓWIENIA</b></h1> <h1 class="mb-3 title is-5"><b>ZAMÓWIENIA</b></h1>
<div class="columns is-multiline"> <div v-for="date in dates" :key="date">
<div class="column is-4" v-for="order in orders" :key="order.MZN_UUID"> <h1 class="mb-3 subtitle is-6">{{ date }}</h1>
<div class="box" :class="{'confirmed' : order.MZN_Bufor == 0 && order.MZN_Anulowane != 1, 'cancelled' : order.MZN_Anulowane == 1}"> <div class="columns is-multiline">
<label class="label is-small">Klient</label> <template v-for="order in orders" :key="order.MZN_UUID">
<div class="field is-small mb-3"> <div class="column is-4 mb-3" v-if="order.MZN_DataDos == date">
<input class="input is-small is-static" <div class="box" :class="{'confirmed' : order.MZN_Bufor == 0 && order.MZN_Anulowane != 1, 'cancelled' : order.MZN_Anulowane == 1}">
type="text" <label class="label is-small">Klient</label>
:value="order.MZN_PodNazwa1 + order.MZN_PodNazwa2 + order.MZN_PodNazwa3" <div class="field is-small mb-3">
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">
<input class="input is-small is-static" <input class="input is-small is-static"
type="text" type="text"
v-model="order.MZN_DataDos" :value="order.MZN_PodNazwa1 + order.MZN_PodNazwa2 + order.MZN_PodNazwa3"
readonly/> readonly/>
</div> </div>
</div> <div class="columns is-mobile field is-small mb-0">
<div class="column is-6"> <div class="column is-6">
<label class="label is-small">Data zamówienia</label> <label class="label is-small">Data dostawy</label>
<div class="field is-small"> <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" <input class="input is-small is-static"
type="text" type="text"
v-model="order.MZN_DataZam.split('T')[0]" value="Tak"
readonly/> readonly/>
</div> </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>
</div> </div>
<label class="label is-small">Zamówienie potwierdzone?</label> </template>
<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>
</div> </div>
</div> </div>
</div> </div>

5
src/main.ts
View File

@@ -18,12 +18,15 @@ import { useCategoriesStore } from '@/stores/categories.store'
import { useOrdersStore } from '@/stores/orders.store' import { useOrdersStore } from '@/stores/orders.store'
import { useContractorsStore } from '@/stores/contractors.store' import { useContractorsStore } from '@/stores/contractors.store'
import { useUserStore } from '@/stores/user.store' import { useUserStore } from '@/stores/user.store'
import print from 'vue3-print-nb'
import CancelationModal from '@/components/CancelationModal.vue'
const app = createApp(App); const app = createApp(App);
const pinia = createPinia(); const pinia = createPinia();
app.use(pinia); app.use(pinia);
app.use(VueCookies); app.use(VueCookies);
app.use(router); app.use(router);
app.use(print);
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);
@@ -61,6 +64,7 @@ app.component('MainForm', MainForm);
app.component('OrdersSelector', OrdersSelector); app.component('OrdersSelector', OrdersSelector);
app.component('ConfirmedForm', ConfirmedForm); app.component('ConfirmedForm', ConfirmedForm);
app.component('LoadingComponent', LoadingComponent); app.component('LoadingComponent', LoadingComponent);
app.component('CancelationModal', CancelationModal);
app.mount('#app'); app.mount('#app');
export interface Category { export interface Category {
@@ -145,6 +149,7 @@ export interface OrderProduct {
MZE_TwrIlosc: string, MZE_TwrIlosc: string,
MZE_TwrJm: string, MZE_TwrJm: string,
MZE_TwrNazwa: string, MZE_TwrNazwa: string,
MZE_TwrKod: string,
MZE_TwrStawka: string | undefined MZE_TwrStawka: string | undefined
} }

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

@@ -53,7 +53,11 @@ export const useCategoriesStore = defineStore('categories', () => {
if (product.MZE_TwrJm == mapProduct?.Twr_JMZ) { if (product.MZE_TwrJm == mapProduct?.Twr_JMZ) {
mapProduct.SummedQuantityZ += Number(product.MZE_TwrIlosc); mapProduct.SummedQuantityZ += Number(product.MZE_TwrIlosc);
mapProduct.SummedPriceZ += (Number(product.MZE_TwrCena) * Number(product.MZE_TwrIlosc)); mapProduct.SummedPriceZ += (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));
} }
} }
} }
} }

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

@@ -5,14 +5,18 @@ import { axiosInstance } from '@/main'
export const useOrdersStore = defineStore('orders', () => { export const useOrdersStore = defineStore('orders', () => {
const orders = ref<Array<Order>>(); const orders = ref<Array<Order>>();
const dates = ref<Array<string>>();
const order = ref<Order>(); const order = ref<Order>();
const uuid = ref<string>(); const uuid = ref<string>();
const deliveryDate = ref<Date>(); const deliveryDate = ref<Date>();
const orderDate = ref<Date>(); const orderDate = ref<Date>();
async function fetchOrders() { async function fetchOrders() {
const response = await axiosInstance.get('/zamowienia', {withCredentials: true}); const response = await axiosInstance.get('/zamowienia', {withCredentials: true});
const ordersTemp : Array<Order> = response.data; const ordersTemp : Array<Order> = response.data;
getOrderDates(ordersTemp);
return ordersTemp; return ordersTemp;
} }
@@ -23,6 +27,7 @@ export const useOrdersStore = defineStore('orders', () => {
} }
const response = await axiosInstance.get(urlString, {withCredentials: true}); const response = await axiosInstance.get(urlString, {withCredentials: true});
const ordersTemp : Array<Order> = response.data; const ordersTemp : Array<Order> = response.data;
getOrderDates(ordersTemp);
return ordersTemp; return ordersTemp;
} }
@@ -33,6 +38,7 @@ export const useOrdersStore = defineStore('orders', () => {
} }
const response = await axiosInstance.get(urlString, {withCredentials: true}); const response = await axiosInstance.get(urlString, {withCredentials: true});
const ordersTemp : Array<Order> = response.data; const ordersTemp : Array<Order> = response.data;
getOrderDates(ordersTemp);
return ordersTemp; return ordersTemp;
} }
@@ -44,9 +50,25 @@ export const useOrdersStore = defineStore('orders', () => {
} }
const response = await axiosInstance.get(urlString, {withCredentials: true}); const response = await axiosInstance.get(urlString, {withCredentials: true});
const ordersTemp : Array<Order> = response.data; const ordersTemp : Array<Order> = response.data;
getOrderDates(ordersTemp);
return ordersTemp; return ordersTemp;
} }
function getOrderDates(orders : Array<Order>) {
dates.value = new Array<string>();
if(orders != undefined && orders.length >0) {
console.log('watch');
for (const order of orders) {
console.log(order);
if(!dates.value.includes(order.MZN_DataDos)) {
dates.value?.push(order.MZN_DataDos);
}
}
dates.value.sort((a, b) => a.localeCompare(b));
console.log(dates.value);
}
}
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>>) {
const response = await axiosInstance.get('/zamowienie/' + uuidString); const response = await axiosInstance.get('/zamowienie/' + uuidString);
const tempOrder = response.data; const tempOrder = response.data;
@@ -85,5 +107,5 @@ export const useOrdersStore = defineStore('orders', () => {
} }
} }
return {orders, order, uuid, deliveryDate, orderDate, fetchOrders, loadOrder, fetchOrdersByDay, fetchOrdersByBuffer, fetchOrdersByDateStartAndEnd} return {orders, order, uuid, deliveryDate, orderDate, dates, fetchOrders, loadOrder, fetchOrdersByDay, fetchOrdersByBuffer, fetchOrdersByDateStartAndEnd, getOrderDates}
}) })

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

@@ -7,8 +7,9 @@ import { useCategoriesStore } from '@/stores/categories.store'
import { router } from '@/router/router' import { router } from '@/router/router'
export const useSiteControlStore = defineStore('siteControl', () => { export const useSiteControlStore = defineStore('siteControl', () => {
const shownComponent = ref<string>('mainForm'); const shownComponent = ref<string>("mainForm");
const showConfirmationModal = ref<boolean>(false); const showConfirmationModal = ref<boolean>(false);
const showCancellationModal = ref<boolean>(false);
const isDarkTheme = ref<boolean>(false); const isDarkTheme = ref<boolean>(false);
const isLoading = ref<boolean>(true); const isLoading = ref<boolean>(true);
@@ -16,6 +17,7 @@ export const useSiteControlStore = defineStore('siteControl', () => {
function switchToForm() { function switchToForm() {
shownComponent.value = "mainForm"; shownComponent.value = "mainForm";
if(router.currentRoute.value.fullPath != "/") { if(router.currentRoute.value.fullPath != "/") {
newOrder(true);
router.push("/"); router.push("/");
} }
} }
@@ -60,7 +62,7 @@ export const useSiteControlStore = defineStore('siteControl', () => {
isLoading.value=false; isLoading.value=false;
} }
function newOrder() { function newOrder(redirect : boolean) {
const ordersStore = useOrdersStore(); const ordersStore = useOrdersStore();
const contractorsStore = useContractorsStore(); const contractorsStore = useContractorsStore();
const categoriesStore = useCategoriesStore(); const categoriesStore = useCategoriesStore();
@@ -72,9 +74,11 @@ export const useSiteControlStore = defineStore('siteControl', () => {
deliveryDate.value = undefined; deliveryDate.value = undefined;
orderDate.value = undefined; orderDate.value = undefined;
categoriesStore.fetchCategories(); categoriesStore.fetchCategories();
switchToForm(); if(shownComponent.value != "mainForm" && redirect) {
switchToForm();
}
window.scrollTo(0, 0); window.scrollTo(0, 0);
} }
return {isLoading, showConfirmationModal, isDarkTheme, shownComponent, switchToForm, switchToOrders, switchToTable, checkTheme, viewOrder, newOrder}; return {isLoading, showConfirmationModal, showCancellationModal, isDarkTheme, shownComponent, switchToForm, switchToOrders, switchToTable, checkTheme, viewOrder, newOrder};
}) })

34
src/views/MainView.vue
View File

@@ -1,20 +1,22 @@
<template> <template class="has-navbar-fixed-top">
<NavBar/> <NavBar/>
<div v-if="isLoading"> <div v-if="isLoading">
<LoadingComponent/> <LoadingComponent/>
</div> </div>
<div v-else> <div v-else>
<div v-if="shownComponent == 'mainForm'"> <OrdersSelector class="box is-shadowless" v-if="shownComponent == 'orderSelector'"
/>
<div v-else>
<MainForm <MainForm
v-if="order == undefined || order.MZN_Bufor==1" v-if="order == undefined || order.MZN_Bufor==1"
/> />
<ConfirmedForm v-else-if="order.MZN_Bufor==0"/> <ConfirmedForm v-else-if="order.MZN_Bufor==0"/>
</div> </div>
<OrdersSelector class="box is-shadowless" v-else-if="shownComponent == 'orderSelector'"
/>
</div> </div>
<ConfirmationModal v-show="showConfirmationModal" @close="showConfirmationModal = false" @confirm="closeConfirmationModal" :order-uuid="uuid"></ConfirmationModal> <ConfirmationModal v-show="showConfirmationModal" @close="showConfirmationModal = false"></ConfirmationModal>
<CancelationModal v-show="showCancellationModal" @close="showCancellationModal = false"></CancelationModal>
<!-- <button class="button" @click="test">test</button>--> <!-- <button class="button" @click="test">test</button>-->
</template> </template>
@@ -37,32 +39,16 @@ const contractor = storeToRefs(contractorsStore).contractor;
const categories = storeToRefs(categoriesStore).categories; const categories = storeToRefs(categoriesStore).categories;
const { uuid, order } = storeToRefs(ordersStore); const { uuid, order } = storeToRefs(ordersStore);
const { username } = storeToRefs(userStore); const { username } = storeToRefs(userStore);
const { showConfirmationModal, isLoading, shownComponent } = storeToRefs(siteControlStore); const { showConfirmationModal, showCancellationModal, isLoading, shownComponent } = storeToRefs(siteControlStore);
async function fetchData() { async function fetchData() {
await categoriesStore.fetchCategories(); await categoriesStore.fetchCategories();
await contractorsStore.fetchContractors(); await contractorsStore.fetchContractors();
const usernameString = localStorage.getItem("username"); siteControlStore.newOrder(false);
if(usernameString != null) {
username.value = usernameString;
}
isLoading.value = false; isLoading.value = false;
} }
function test() {
console.log(getActivePinia());
}
function closeConfirmationModal() {
showConfirmationModal.value = false;
if (uuid.value != undefined) {
isLoading.value = true;
ordersStore.loadOrder(uuid.value, true, contractor, contractors, categories);
}
}
console.log(localStorage.getItem('piniaState'));
siteControlStore.checkTheme(); siteControlStore.checkTheme();
fetchData(); fetchData();
</script> </script>

91
src/views/SummedOrdersView.vue
View File

@@ -18,6 +18,7 @@ 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();
orders.value = await ordersStore.fetchOrdersByDay(searchDate.value, null); orders.value = await ordersStore.fetchOrdersByDay(searchDate.value, null);
@@ -62,46 +63,48 @@ categoriesStore.sumProductsFromOrders(orders.value);
</div> </div>
<div class="box mt-3"> <div class="box mt-3">
<button class="button is-fullwidth mb-3" @click="isSummed=false">Rozdzielone zamówienia</button> <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> <button class="button is-fullwidth mb-3" @click="isSummed=true">Zsumowane zamówienia</button>
<button class="button is-fullwidth" v-print="'#printMe'">Drukuj</button>
</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: center"> <div class="is-flex is-justify-content-center is-flex-direction-row box printMe" style="width: 100%; height: 100%; align-content: center">
<table class="table blackBorder tableOverflow" v-if="orders != undefined && orders.length != 0 && !isSummed"> <div id="printMe">
<thead> <table class="table blackBorder tableOverflow" v-if="orders != undefined && orders.length != 0 && !isSummed" >
<tr class="has-background-grey-light"> <thead>
<th>Nazwa produktu</th> <tr class="has-background-grey-light">
<th>Ilość</th> <th>Nazwa produktu</th>
<th>Jednostka miary</th> <th>Ilość</th>
<th>Cena jednostkowa</th> <th>Jednostka miary</th>
<th>Cena całkowita</th> <th>Cena jednostkowa</th>
</tr> <th>Cena całkowita</th>
</thead> </tr>
<tbody v-for="order in orders" :key="order.MZN_UUID"> </thead>
<tr class="has-background-grey-lighter"> <tbody v-for="order in orders" :key="order.MZN_UUID">
<td colspan="5"> <tr class="has-background-grey-lighter dashedBorder">
{{ order.MZN_PodNazwa1 + order.MZN_PodNazwa2 + order.MZN_PodNazwa3 + order.MZN_DataDos.toString()}} <td colspan="5">
</td> {{ order.MZN_PodNazwa1 + order.MZN_PodNazwa2 + order.MZN_PodNazwa3 + order.MZN_DataDos.toString()}}
</tr> </td>
<tr v-for="product in order.MZamElem" :key="product.MZE_MZEID"> </tr>
<td>{{ product.MZE_TwrNazwa }}</td> <tr v-for="product in order.MZamElem" :key="product.MZE_MZEID">
<td>{{ Number(product.MZE_TwrIlosc).toFixed(2) }}</td> <td>{{ product.MZE_TwrNazwa }}</td>
<td>{{ product.MZE_TwrJm }}</td> <td>{{ Number(product.MZE_TwrIlosc).toFixed(2) }}</td>
<td>{{ Number(product.MZE_TwrCena).toFixed(2) }} &nbsp;PLN</td> <td>{{ product.MZE_TwrJm }}</td>
<td>{{ (Number(product.MZE_TwrCena) * Number(product.MZE_TwrIlosc)).toFixed(2) }}&nbsp;PLN</td> <td>{{ Number(product.MZE_TwrCena).toFixed(2) }} &nbsp;PLN</td>
</tr> <td>{{ (Number(product.MZE_TwrCena) * Number(product.MZE_TwrIlosc)).toFixed(2) }}&nbsp;PLN</td>
</tbody> </tr>
</table> </tbody>
<table class="table blackBorder tableOverflow" v-else-if="orders != undefined && orders.length != 0 && isSummed"> </table>
<thead> <table class="table blackBorder tableOverflow" v-else-if="orders != undefined && orders.length != 0 && isSummed">
<tr class="has-background-grey-light"> <thead>
<th>Nazwa produktu</th> <tr class="has-background-grey-light">
<th>Ilość</th> <th>Nazwa produktu</th>
<th>Jednostka miary</th> <th>Ilość</th>
<th>Cena zsumowana</th> <th>Jednostka miary</th>
</tr> <th>Cena zsumowana</th>
</thead> </tr>
<tbody> </thead>
<tbody>
<template v-for="category in categories" :key="category.Kod"> <template v-for="category in categories" :key="category.Kod">
<template v-for="product in category.Towary" :key="product.Twr_Kod"> <template v-for="product in category.Towary" :key="product.Twr_Kod">
<tr v-if="product.SummedQuantity > 0"> <tr v-if="product.SummedQuantity > 0">
@@ -118,9 +121,10 @@ categoriesStore.sumProductsFromOrders(orders.value);
</tr> </tr>
</template> </template>
</template> </template>
</tbody> </tbody>
</table> </table>
<p v-else class="title is-1 has-text-centered" style="height: min-content; align-self: center;">Brak zamówień</p> <p v-else 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>
@@ -147,4 +151,11 @@ categoriesStore.sumProductsFromOrders(orders.value);
overflow-x: scroll; overflow-x: scroll;
display: block; display: block;
} }
@media print {
.dashedBorder{
border-style: dotted;
border-color: lightgray;
}
}
</style> </style>