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">
<title>Mleczarnia Kuzma</title>
</head>
<body>
<body class="has-navbar-fixed-top">
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>

38
package-lock.json generated
View File

@@ -8,6 +8,7 @@
"name": "testvue",
"version": "0.0.0",
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.6.0",
"@vuepic/vue-datepicker": "^8.7.0",
"axios": "^1.7.2",
"bulma": "^1.0.1",
@@ -16,7 +17,9 @@
"vee-validate": "^4.13.1",
"vue": "^3.4.21",
"vue-router": "^4.3.3",
"vue-to-print": "^1.1.0",
"vue3-cookies": "^1.0.6",
"vue3-print-nb": "^0.1.4",
"yup": "^1.4.0"
},
"devDependencies": {
@@ -494,6 +497,25 @@
"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": {
"version": "0.11.14",
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
@@ -3385,6 +3407,14 @@
"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": {
"version": "2.0.19",
"resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.0.19.tgz",
@@ -3410,6 +3440,14 @@
"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": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",

3
package.json
View File

@@ -13,6 +13,7 @@
"format": "prettier --write src/"
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.6.0",
"@vuepic/vue-datepicker": "^8.7.0",
"axios": "^1.7.2",
"bulma": "^1.0.1",
@@ -21,7 +22,9 @@
"vee-validate": "^4.13.1",
"vue": "^3.4.21",
"vue-router": "^4.3.3",
"vue-to-print": "^1.1.0",
"vue3-cookies": "^1.0.6",
"vue3-print-nb": "^0.1.4",
"yup": "^1.4.0"
},
"devDependencies": {

15
src/App.vue
View File

@@ -1,28 +1,17 @@
<template>
<Suspense>
<RouterView />
<RouterView class="has-navbar-fixed-top"/>
</Suspense>
</template>
<script setup lang="ts">
import './assets/style.scss'
import './assets/print.css'
import { RouterView } from 'vue-router'
import { watch } from 'vue'
import { getActivePinia } from 'pinia'
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>
<style>

9
src/assets/main.css
View File

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

2
src/components/NavBar.vue
View File

@@ -52,7 +52,7 @@ function routeLogin() {
</script>
<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">
<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>

89
src/components/OrdersSelector.vue
View File

@@ -10,7 +10,7 @@ const siteControlStore = useSiteControlStore();
const searchOrderDate = ref<Array<Date>>();
const isOutOfBuffer = ref<boolean>(false);
const isInBufor = ref<boolean>(false);
const { orders } = storeToRefs(ordersStore);
const { orders, dates } = storeToRefs(ordersStore);
const areOrdersLoading = ref<boolean>(false);
const { isDarkTheme } = storeToRefs(siteControlStore);
@@ -60,13 +60,14 @@ async function fetchOrders(event : Event) {
<div class="box is-shadowless">
<form class="mb-3">
<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">
<label class="label is-small">Data zamówienia</label>
<div class="field is-small">
<VueDatePicker v-model="searchOrderDate"
:enable-time-picker="false"
:clearable="true"
:highlight="dates"
input-class-name="input is-small calendar-background"
menu-class-name="calendar-background"
v-bind:dark = "isDarkTheme"
@@ -90,52 +91,64 @@ async function fetchOrders(event : Event) {
</div>
</form>
<div class="box">
<h1 class="is-large mb-3"><b>ZAMÓWIENIA</b></h1>
<div class="columns is-multiline">
<div class="column is-4" v-for="order in orders" :key="order.MZN_UUID">
<div class="box" :class="{'confirmed' : order.MZN_Bufor == 0 && order.MZN_Anulowane != 1, 'cancelled' : order.MZN_Anulowane == 1}">
<label class="label is-small">Klient</label>
<div class="field is-small mb-3">
<input class="input is-small is-static"
type="text"
:value="order.MZN_PodNazwa1 + order.MZN_PodNazwa2 + order.MZN_PodNazwa3"
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">
<h1 class="mb-3 title is-5"><b>ZAMÓWIENIA</b></h1>
<div v-for="date in dates" :key="date">
<h1 class="mb-3 subtitle is-6">{{ date }}</h1>
<div class="columns is-multiline">
<template v-for="order in orders" :key="order.MZN_UUID">
<div class="column is-4 mb-3" v-if="order.MZN_DataDos == date">
<div class="box" :class="{'confirmed' : order.MZN_Bufor == 0 && order.MZN_Anulowane != 1, 'cancelled' : order.MZN_Anulowane == 1}">
<label class="label is-small">Klient</label>
<div class="field is-small mb-3">
<input class="input is-small is-static"
type="text"
v-model="order.MZN_DataDos"
:value="order.MZN_PodNazwa1 + order.MZN_PodNazwa2 + order.MZN_PodNazwa3"
readonly/>
</div>
</div>
<div class="column is-6">
<label class="label is-small">Data zamówienia</label>
<div class="field is-small">
<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"
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"
type="text"
v-model="order.MZN_DataZam.split('T')[0]"
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>
<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>
<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"
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>
</template>
</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 { useContractorsStore } from '@/stores/contractors.store'
import { useUserStore } from '@/stores/user.store'
import print from 'vue3-print-nb'
import CancelationModal from '@/components/CancelationModal.vue'
const app = createApp(App);
const pinia = createPinia();
app.use(pinia);
app.use(VueCookies);
app.use(router);
app.use(print);
if(localStorage.getItem('piniaState')) {
pinia.state.value = JSON.parse(localStorage.getItem('piniaState') as string);
@@ -61,6 +64,7 @@ app.component('MainForm', MainForm);
app.component('OrdersSelector', OrdersSelector);
app.component('ConfirmedForm', ConfirmedForm);
app.component('LoadingComponent', LoadingComponent);
app.component('CancelationModal', CancelationModal);
app.mount('#app');
export interface Category {
@@ -145,6 +149,7 @@ export interface OrderProduct {
MZE_TwrIlosc: string,
MZE_TwrJm: string,
MZE_TwrNazwa: string,
MZE_TwrKod: string,
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) {
mapProduct.SummedQuantityZ += 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', () => {
const orders = ref<Array<Order>>();
const dates = ref<Array<string>>();
const order = ref<Order>();
const uuid = ref<string>();
const deliveryDate = ref<Date>();
const orderDate = ref<Date>();
async function fetchOrders() {
const response = await axiosInstance.get('/zamowienia', {withCredentials: true});
const ordersTemp : Array<Order> = response.data;
getOrderDates(ordersTemp);
return ordersTemp;
}
@@ -23,6 +27,7 @@ export const useOrdersStore = defineStore('orders', () => {
}
const response = await axiosInstance.get(urlString, {withCredentials: true});
const ordersTemp : Array<Order> = response.data;
getOrderDates(ordersTemp);
return ordersTemp;
}
@@ -33,6 +38,7 @@ export const useOrdersStore = defineStore('orders', () => {
}
const response = await axiosInstance.get(urlString, {withCredentials: true});
const ordersTemp : Array<Order> = response.data;
getOrderDates(ordersTemp);
return ordersTemp;
}
@@ -44,9 +50,25 @@ export const useOrdersStore = defineStore('orders', () => {
}
const response = await axiosInstance.get(urlString, {withCredentials: true});
const ordersTemp : Array<Order> = response.data;
getOrderDates(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>>) {
const response = await axiosInstance.get('/zamowienie/' + uuidString);
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'
export const useSiteControlStore = defineStore('siteControl', () => {
const shownComponent = ref<string>('mainForm');
const shownComponent = ref<string>("mainForm");
const showConfirmationModal = ref<boolean>(false);
const showCancellationModal = ref<boolean>(false);
const isDarkTheme = ref<boolean>(false);
const isLoading = ref<boolean>(true);
@@ -16,6 +17,7 @@ export const useSiteControlStore = defineStore('siteControl', () => {
function switchToForm() {
shownComponent.value = "mainForm";
if(router.currentRoute.value.fullPath != "/") {
newOrder(true);
router.push("/");
}
}
@@ -60,7 +62,7 @@ export const useSiteControlStore = defineStore('siteControl', () => {
isLoading.value=false;
}
function newOrder() {
function newOrder(redirect : boolean) {
const ordersStore = useOrdersStore();
const contractorsStore = useContractorsStore();
const categoriesStore = useCategoriesStore();
@@ -72,9 +74,11 @@ export const useSiteControlStore = defineStore('siteControl', () => {
deliveryDate.value = undefined;
orderDate.value = undefined;
categoriesStore.fetchCategories();
switchToForm();
if(shownComponent.value != "mainForm" && redirect) {
switchToForm();
}
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/>
<div v-if="isLoading">
<LoadingComponent/>
</div>
<div v-else>
<div v-if="shownComponent == 'mainForm'">
<OrdersSelector class="box is-shadowless" v-if="shownComponent == 'orderSelector'"
/>
<div v-else>
<MainForm
v-if="order == undefined || order.MZN_Bufor==1"
/>
<ConfirmedForm v-else-if="order.MZN_Bufor==0"/>
</div>
<OrdersSelector class="box is-shadowless" v-else-if="shownComponent == 'orderSelector'"
/>
</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>-->
</template>
@@ -37,32 +39,16 @@ const contractor = storeToRefs(contractorsStore).contractor;
const categories = storeToRefs(categoriesStore).categories;
const { uuid, order } = storeToRefs(ordersStore);
const { username } = storeToRefs(userStore);
const { showConfirmationModal, isLoading, shownComponent } = storeToRefs(siteControlStore);
const { showConfirmationModal, showCancellationModal, isLoading, shownComponent } = storeToRefs(siteControlStore);
async function fetchData() {
await categoriesStore.fetchCategories();
await contractorsStore.fetchContractors();
const usernameString = localStorage.getItem("username");
if(usernameString != null) {
username.value = usernameString;
}
siteControlStore.newOrder(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();
fetchData();
</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 confirmedOrders = ref<boolean>();
const isSummed = ref<boolean>(true);
const printMe = ref();
orders.value = await ordersStore.fetchOrdersByDay(searchDate.value, null);
@@ -62,46 +63,48 @@ categoriesStore.sumProductsFromOrders(orders.value);
</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>
<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 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>
<div class="is-flex is-justify-content-center is-flex-direction-row box printMe" style="width: 100%; height: 100%; align-content: center">
<div id="printMe">
<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 dashedBorder">
<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">
@@ -118,9 +121,10 @@ categoriesStore.sumProductsFromOrders(orders.value);
</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>
</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>
</div>
@@ -147,4 +151,11 @@ categoriesStore.sumProductsFromOrders(orders.value);
overflow-x: scroll;
display: block;
}
@media print {
.dashedBorder{
border-style: dotted;
border-color: lightgray;
}
}
</style>