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

Refactor, improving responsivness

Browse Source
This commit is contained in:
Patryk Binkowski
2024-08-06 17:08:07 +02:00
parent feee47f464
commit ce89b79074
17 changed files with 262 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/App.vue
View File

@@ -8,9 +8,7 @@
import './assets/style.scss' import './assets/style.scss'
import './assets/print.css' import './assets/print.css'
import { RouterView } from 'vue-router' import { RouterView } from 'vue-router'
import { getActivePinia } from 'pinia'
const pinia = getActivePinia();
</script> </script>
@@ -25,12 +23,4 @@ const pinia = getActivePinia();
--bulma-box-padding: 0.75rem; --bulma-box-padding: 0.75rem;
} }
} }
:root {
min-height: 100vh;
}
body {
min-height: 100vh;
}
</style> </style>

1
src/assets/base.css
View File

@@ -59,7 +59,6 @@
} }
body { body {
min-height: 100vh;
color: var(--color-text); color: var(--color-text);
background: var(--color-background); background: var(--color-background);
transition: transition:

19
src/assets/style.scss
View File

@@ -1,3 +1,22 @@
@import 'node_modules/bulma/bulma.scss'; @import 'node_modules/bulma/bulma.scss';
@import '/home/patryk/WebstormProjects/Zamowienia-UI/node_modules/bulma/sass/utilities/mixins';
.element {
&.is-loading {
position: relative;
pointer-events: none;
opacity: 1;
&:after {
@include loader;
position: absolute;
top: calc(50% - 1em);
left: calc(50% - 1em);
width: 2em;
height: 2em;
border-width: 0.25em;
}
}
}
$primary-color: #111111; $primary-color: #111111;

14
src/components/ConfirmedForm.vue
View File

@@ -23,11 +23,11 @@ function cancelOrder(event: Event) {
</script> </script>
<template> <template>
<form class="box" style="min-height: 93.5vh"> <form class="box is-shadowless">
<div class="mb-3"> <div class="mb-3">
<div class="box"> <div class="box">
<h1 class="is-large mb-3"><b>ZAMÓWIENIE</b></h1> <h1 class="title mb-3 is-6"><b>ZAMÓWIENIE</b></h1>
<h1 class="is-large mb-3" v-if="uuid != null" ><b>{{ uuid }}</b></h1> <h1 class="subtitle is-6 mb-3" v-if="uuid != null" ><b>{{ uuid }}</b></h1>
<div class="field mb-3" v-if="contractor != undefined"> <div class="field mb-3" v-if="contractor != undefined">
<label class="label is-small">Klient</label> <label class="label is-small">Klient</label>
<div class="field is-small mb-3"> <div class="field is-small mb-3">
@@ -68,9 +68,9 @@ function cancelOrder(event: Event) {
</div> </div>
<div v-for="category in categories" :key="category.Kod"> <div v-for="category in categories" :key="category.Kod">
<div class="box mb-3" v-if="category.isVisible"> <div class="box mb-3" v-if="category.isVisible">
<h1 class="is-large mb-3"><b>{{ category.Kod }}</b></h1> <h1 class="title mb-3 is-6"><b>{{ category.Kod }}</b></h1>
<div class="field" v-for="(product) in category.Towary" :key="product.Twr_Nazwa"> <div class="field" v-for="(product) in category.Towary" :key="product.Twr_Nazwa">
<div v-if="product.Quantity > 0" class="mb-3"> <div v-if="Number(product.Quantity) > 0" class="mb-3">
<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"> <div class="column">
@@ -108,7 +108,7 @@ function cancelOrder(event: Event) {
class="input is-small is-static" class="input is-small is-static"
type="text" type="text"
placeholder="Kwota" placeholder="Kwota"
:value="(Number(product.Twr_Cena) * product.Quantity).toFixed(2) + ' PLN'" :value="(Number(product.Twr_Cena) * Number(product.Quantity)).toFixed(2) + ' PLN'"
readonly readonly
/> />
</div> </div>
@@ -119,7 +119,7 @@ function cancelOrder(event: Event) {
class="input is-small is-static" class="input is-small is-static"
type="text" type="text"
placeholder="Kwota" placeholder="Kwota"
:value="(Number(product.Twr_CenaZ) * product.Quantity).toFixed(2) + ' PLN'" :value="(Number(product.Twr_CenaZ) * Number(product.Quantity)).toFixed(2) + ' PLN'"
readonly readonly
/> />
</div> </div>

12
src/components/MainForm.vue
View File

@@ -15,7 +15,7 @@ const ordersStore = useOrdersStore();
const siteControlStore = useSiteControlStore(); const siteControlStore = useSiteControlStore();
const { contractor, contractors } = storeToRefs(contractorsStore); const { contractor, contractors } = storeToRefs(contractorsStore);
const { deliveryDate, uuid } = storeToRefs(ordersStore); const { deliveryDate, uuid, additionalNotes } = storeToRefs(ordersStore);
const { categories } = storeToRefs(categoriesStore); const { categories } = storeToRefs(categoriesStore);
const { showConfirmationModal, showCancellationModal, isDarkTheme } = storeToRefs(siteControlStore); const { showConfirmationModal, showCancellationModal, isDarkTheme } = storeToRefs(siteControlStore);
@@ -170,8 +170,8 @@ onBeforeUnmount( function () {
</script> </script>
<template> <template>
<form class="box" @submit.prevent="createJSON"> <form class="box is-shadowless" @submit.prevent="createJSON">
<div class="mb-3"> <div>
<div class="box"> <div class="box">
<div class="mb-3"> <div class="mb-3">
<h1 class="title is-5"><b>ZAMÓWIENIE</b></h1> <h1 class="title is-5"><b>ZAMÓWIENIE</b></h1>
@@ -213,14 +213,16 @@ onBeforeUnmount( function () {
:clearable="true" :clearable="true"
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 = "!!window?.matchMedia?.('(prefers-color-scheme:dark)')?.matches"
/>
</div> </div>
</div> </div>
<div class="field mt-5"> <div class="field mt-5">
<label class="label is-small">Uwagi do zamówienia</label> <label class="label is-small">Uwagi do zamówienia</label>
<textarea <textarea
v-model="additionalNotes"
class="textarea" class="textarea"
placeholder="Jeszcze nie połączone z bazą danych" placeholder="Uwagi do zamówienia"
rows="5" rows="5"
></textarea> ></textarea>
</div> </div>

3
src/components/NavBar.vue
View File

@@ -70,12 +70,11 @@ function routeLogin() {
<a class="navbar-item" @click="clickForm"> <a class="navbar-item" @click="clickForm">
Formularz Formularz
</a> </a>
<a class="navbar-item" @click="clickOrders"> <a class="navbar-item" @click="clickOrders">
Zamówienia Zamówienia
</a> </a>
<a class="navbar-item" @click="clickTable"> <a class="navbar-item" @click="clickTable">
Tabela Zestawienie
</a> </a>
</div> </div>
<div class="navbar-end"> <div class="navbar-end">

137
src/components/OrdersSelector.vue
View File

@@ -4,15 +4,21 @@ import { computed, ref, watch } from 'vue'
import { useOrdersStore } from '@/stores/orders.store' import { useOrdersStore } from '@/stores/orders.store'
import { storeToRefs } from 'pinia' import { storeToRefs } from 'pinia'
import { useSiteControlStore } from '@/stores/siteControl.store' import { useSiteControlStore } from '@/stores/siteControl.store'
import type { Order } from '@/main'
const ordersStore = useOrdersStore(); const ordersStore = useOrdersStore();
const siteControlStore = useSiteControlStore(); 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, dates } = storeToRefs(ordersStore); const { orders, dates } = storeToRefs(ordersStore);
const areOrdersLoading = ref<boolean>(false); const areOrdersLoading = ref<boolean>(false);
const { isDarkTheme } = storeToRefs(siteControlStore); const { isDarkTheme, isLoading } = storeToRefs(siteControlStore);
const date = new Date(Date.now());
const startDate = new Date(date.getFullYear(), date.getMonth(), (date.getDate() - 2));
const endDate = new Date(date.getFullYear()+1, date.getMonth(), date.getDay());
searchOrderDate.value?.push(startDate, endDate);
watch(isInBufor, (val) => { watch(isInBufor, (val) => {
if(val && val == isOutOfBuffer.value) { if(val && val == isOutOfBuffer.value) {
@@ -36,12 +42,29 @@ const buffer = computed(()=>{
} else return !!isInBufor.value; } else return !!isInBufor.value;
}); });
function viewOrder(uuid : string) { const datesWithOrders = computed( ()=>{
siteControlStore.viewOrder(uuid); const datesWithOrders = new Map<Date, Array<Order>>();
if (dates.value == undefined || orders.value == undefined) {
return datesWithOrders;
}
for (const date of dates.value) {
datesWithOrders.set(date, []);
for (const order of orders.value) {
if (order.MZN_DataDos == date.toString()) {
datesWithOrders.get(date)?.push(order);
}
}
}
return datesWithOrders;
})
function viewOrder(order : Order) {
order.loading = true;
siteControlStore.viewOrder(order.MZN_UUID);
} }
async function fetchOrders(event : Event) { async function fetchOrders(event : Event) {
event.preventDefault(); event?.preventDefault();
areOrdersLoading.value = true; areOrdersLoading.value = true;
console.log(searchOrderDate.value); console.log(searchOrderDate.value);
@@ -54,6 +77,7 @@ async function fetchOrders(event : Event) {
areOrdersLoading.value = false; areOrdersLoading.value = false;
} }
fetchOrders(null);
</script> </script>
<template> <template>
@@ -70,7 +94,6 @@ async function fetchOrders(event : Event) {
:highlight="dates" :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"
range/> range/>
</div> </div>
</div> </div>
@@ -92,63 +115,61 @@ async function fetchOrders(event : Event) {
</form> </form>
<div class="box"> <div class="box">
<h1 class="mb-3 title is-5"><b>ZAMÓWIENIA</b></h1> <h1 class="mb-3 title is-5"><b>ZAMÓWIENIA</b></h1>
<div v-for="date in dates" :key="date"> <div v-for="date in datesWithOrders.keys()" :key="String(date)">
<h1 class="mb-3 subtitle is-6">{{ date }}</h1> <div v-if="datesWithOrders.get(date)?.length != 0">
<div class="columns is-multiline"> <h1 class="mb-3 subtitle is-6" :class="{'is-skeleton' : areOrdersLoading}">{{ date }}</h1>
<template v-for="order in orders" :key="order.MZN_UUID"> <div class="columns is-multiline">
<div class="column is-4 mb-3" v-if="order.MZN_DataDos == date"> <template v-for="order in datesWithOrders.get(date)" :key="order.MZN_UUID">
<div class="box" :class="{'confirmed' : order.MZN_Bufor == 0 && order.MZN_Anulowane != 1, 'cancelled' : order.MZN_Anulowane == 1}"> <div class="column is-4 mb-3" v-if="order.MZN_DataDos == date.toString()">
<label class="label is-small">Klient</label> <div class="box"
<div class="field is-small mb-3"> :class="{'confirmed' : order.MZN_Bufor == 0 && order.MZN_Anulowane != 1,
<input class="input is-small is-static" 'cancelled' : order.MZN_Anulowane == 1,
type="text" 'is-skeleton' : areOrdersLoading}">
:value="order.MZN_PodNazwa1 + order.MZN_PodNazwa2 + order.MZN_PodNazwa3" <label class="label is-small" :class="{'is-invisible': areOrdersLoading}">Klient</label>
readonly/> <div class="field is-small mb-3" :class="{'is-invisible': areOrdersLoading}">
</div> <input class="input is-small is-static"
<div class="columns is-mobile field is-small mb-0"> type="text"
<div class="column is-6"> :value="order.MZN_PodNazwa1 + order.MZN_PodNazwa2 + order.MZN_PodNazwa3"
<label class="label is-small">Data dostawy</label> readonly/>
<div class="field is-small"> </div>
<input class="input is-small is-static" <div class="columns is-mobile field is-small mb-0">
type="text" <div class="column is-6" :class="{'is-invisible': areOrdersLoading}">
v-model="order.MZN_DataDos" <label class="label is-small">Data dostawy</label>
readonly/> <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" :class="{'is-invisible': areOrdersLoading}">Zamówienie potwierdzone?</label>
<div class="field is-small" :class="{'is-invisible': areOrdersLoading}" v-if="order.MZN_Bufor==0">
<input class="input is-small is-static"
type="text"
value="Tak"
readonly/>
</div>
<div class="field is-small" :class="{'is-invisible': areOrdersLoading}" v-else>
<input class="input is-small is-static"
type="text"
value="Nie"
readonly/>
</div>
</div> </div>
</div> </div>
<div class="column is-6"> <label class="label is-small mb-5" :class="{'is-invisible': areOrdersLoading}">Produkty</label>
<label class="label is-small">Data zamówienia</label> <div class="field columns is-multiline is-mobile">
<div class="field is-small"> <template v-for="product in order.MZamElem" :key="product.MZE_TwrKod">
<input class="input is-small is-static" <div class="column is-6 py-0">{{ product.MZE_TwrKod }}</div>
type="text" <div class="column is-6 py-0">{{Number(product.MZE_TwrIlosc).toFixed(2) + " " + product.MZE_TwrJm}}</div>
v-model="order.MZN_DataZam.split('T')[0]" </template>
readonly/>
</div>
</div> </div>
<button class="button is-info is-small is-expanded" :class="{'is-invisible': areOrdersLoading, 'is-loading': order.loading}" @click="viewOrder(order)">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>
<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> </template>
</template> </div>
</div> </div>
</div> </div>
</div> </div>

137
src/views/SummedOrdersView.vue → src/components/SummaryComponent.vue
View File

@@ -1,46 +1,45 @@
<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 { useRoute } from 'vue-router'
import NavBar from '@/components/NavBar.vue' 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 { ref } from 'vue' import { onMounted, ref } from 'vue'
import { useCategoriesStore } from '@/stores/categories.store' import { useCategoriesStore } from '@/stores/categories.store'
const ordersStore = useOrdersStore(); const ordersStore = useOrdersStore();
const siteControlStore = useSiteControlStore(); const siteControlStore = useSiteControlStore();
const categoriesStore = useCategoriesStore(); const categoriesStore = useCategoriesStore();
const { orders } = storeToRefs(ordersStore); const { orders, dates } = storeToRefs(ordersStore);
const { categories } = storeToRefs(categoriesStore); const { categories } = storeToRefs(categoriesStore);
const { isDarkTheme } = storeToRefs(siteControlStore); 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 printMe = ref();
const isLoading = ref<boolean>(true);
async function fetchOrders() {
isLoading.value=true;
console.log((confirmedOrders.value) ? true : null);
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);
isLoading.value=false;
}
orders.value = await ordersStore.fetchOrdersByDay(searchDate.value, null); onMounted(async () => {
await categoriesStore.fetchCategories(); orders.value = await ordersStore.fetchOrdersByDay(searchDate.value, null);
await categoriesStore.sumProductsFromOrders(orders.value);
const route = useRoute(); isLoading.value=false;
console.log(route); });
async function fetchOrders() {
console.log((confirmedOrders.value) ? true : null);
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> </script>
<template> <template>
<NavBar/> <div class="columns box is-shadowless" style="margin: 0.5rem 0 0; padding: 0; min-height: 100%">
<div class="columns box is-shadowless">
<div class="column"> <div class="column">
<div class="box"> <div class="box">
<h1 class="title is-4 mb-3">Opcje</h1> <h1 class="title is-4 mb-3">Opcje</h1>
@@ -50,7 +49,8 @@ categoriesStore.sumProductsFromOrders(orders.value);
:clearable="true" :clearable="true"
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" /> :highlight = "dates"
/>
<div class="control mt-3"> <div class="control mt-3">
<label class="checkbox mr-5"> <label class="checkbox mr-5">
@@ -67,12 +67,14 @@ categoriesStore.sumProductsFromOrders(orders.value);
<button class="button is-fullwidth" v-print="'#printMe'">Drukuj</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 printMe" style="width: 100%; height: 100%; align-content: center"> <div class="is-flex is-justify-content-center is-flex-direction-row box" style="width: 100%; height: 100%; align-content: space-evenly;">
<div id="printMe"> <div class="is-flex is-justify-content-center is-flex-direction-row" id="printMe" style="">
<table class="table blackBorder tableOverflow" v-if="orders != undefined && orders.length != 0 && !isSummed" > <div v-if="isLoading == true" class="title is-1 has-text-centered element is-loading" style="height: 25%; align-self: center;"></div>
<thead> <table class="table blackBorder tableOverflow" v-else-if="orders != undefined && orders.length != 0 && !isSummed">
<thead style="width: 100%">
<tr class="has-background-grey-light"> <tr class="has-background-grey-light">
<th>Indeks</th>
<th>Nazwa produktu</th> <th>Nazwa produktu</th>
<th>Ilość</th> <th>Ilość</th>
<th>Jednostka miary</th> <th>Jednostka miary</th>
@@ -82,11 +84,12 @@ categoriesStore.sumProductsFromOrders(orders.value);
</thead> </thead>
<tbody v-for="order in orders" :key="order.MZN_UUID"> <tbody v-for="order in orders" :key="order.MZN_UUID">
<tr class="has-background-grey-lighter dashedBorder"> <tr class="has-background-grey-lighter dashedBorder">
<td colspan="5"> <td colspan="6">
{{ order.MZN_PodNazwa1 + order.MZN_PodNazwa2 + order.MZN_PodNazwa3 + order.MZN_DataDos.toString()}} {{ order.MZN_PodNazwa1 + order.MZN_PodNazwa2 + order.MZN_PodNazwa3 }}
</td> </td>
</tr> </tr>
<tr v-for="product in order.MZamElem" :key="product.MZE_MZEID"> <tr v-for="product in order.MZamElem" :key="product.MZE_MZEID">
<td>{{product.MZE_TwrKod}}</td>
<td>{{ product.MZE_TwrNazwa }}</td> <td>{{ product.MZE_TwrNazwa }}</td>
<td>{{ Number(product.MZE_TwrIlosc).toFixed(2) }}</td> <td>{{ Number(product.MZE_TwrIlosc).toFixed(2) }}</td>
<td>{{ product.MZE_TwrJm }}</td> <td>{{ product.MZE_TwrJm }}</td>
@@ -98,6 +101,7 @@ categoriesStore.sumProductsFromOrders(orders.value);
<table class="table blackBorder tableOverflow" v-else-if="orders != undefined && orders.length != 0 && isSummed"> <table class="table blackBorder tableOverflow" v-else-if="orders != undefined && orders.length != 0 && isSummed">
<thead> <thead>
<tr class="has-background-grey-light"> <tr class="has-background-grey-light">
<th>Indeks</th>
<th>Nazwa produktu</th> <th>Nazwa produktu</th>
<th>Ilość</th> <th>Ilość</th>
<th>Jednostka miary</th> <th>Jednostka miary</th>
@@ -108,12 +112,14 @@ categoriesStore.sumProductsFromOrders(orders.value);
<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">
<td>{{product.Twr_Kod}}</td>
<td>{{ product.Twr_Nazwa }}</td> <td>{{ product.Twr_Nazwa }}</td>
<td>{{ product.SummedQuantity.toFixed(2) }}</td> <td>{{ product.SummedQuantity.toFixed(2) }}</td>
<td>{{ product.Twr_JM }}</td> <td>{{ product.Twr_JM }}</td>
<td>{{ product.SummedPrice.toFixed(2) }}&nbsp;PLN</td> <td>{{ product.SummedPrice.toFixed(2) }}&nbsp;PLN</td>
</tr> </tr>
<tr v-if="product.SummedQuantityZ > 0"> <tr v-if="product.SummedQuantityZ > 0">
<td>{{product.Twr_Kod}}</td>
<td>{{ product.Twr_Nazwa }}</td> <td>{{ product.Twr_Nazwa }}</td>
<td>{{ product.SummedQuantityZ.toFixed(2) }}</td> <td>{{ product.SummedQuantityZ.toFixed(2) }}</td>
<td>{{ product.Twr_JM }}</td> <td>{{ product.Twr_JM }}</td>
@@ -128,34 +134,33 @@ categoriesStore.sumProductsFromOrders(orders.value);
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<style scoped> <style scoped>
@media screen and (min-width: 500px) { @media screen and (min-width: 500px) {
.box { .box {
--bulma-box-padding: 1.5rem; --bulma-box-padding: 1.5rem;
}
} }
} @media screen and (max-width: 500px) {
@media screen and (max-width: 500px) { .box {
.box { --bulma-box-padding: 0.75rem;
--bulma-box-padding: 0.75rem; }
} }
}
.blackBorder { .blackBorder {
--bulma-table-cell-border-color : black; --bulma-table-cell-border-color : black;
} }
.tableOverflow { .tableOverflow {
overflow-x: scroll; overflow-x: scroll;
display: block; display: block;
} }
@media print { @media print {
.dashedBorder{ .dashedBorder{
border-style: dotted; border-style: dotted;
border-color: lightgray; border-color: lightgray;
}
} }
}
</style> </style>

8
src/main.ts
View File

@@ -13,13 +13,10 @@ import LoginModal from '@/components/LoginModal.vue'
import { createPinia, storeToRefs } from 'pinia' import { createPinia, storeToRefs } from 'pinia'
import VueCookies from 'vue3-cookies' import VueCookies from 'vue3-cookies'
import { router } from '@/router/router' import { router } from '@/router/router'
import { useSiteControlStore } from '@/stores/siteControl.store'
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 { 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'
const app = createApp(App); const app = createApp(App);
const pinia = createPinia(); const pinia = createPinia();
@@ -65,6 +62,7 @@ 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.component('CancelationModal', CancelationModal);
app.component('SummaryComponent', SummaryComponent);
app.mount('#app'); app.mount('#app');
export interface Category { export interface Category {
@@ -120,6 +118,7 @@ export interface Contractor {
} }
export interface Order { export interface Order {
loading: boolean
MZN_Bufor: number, MZN_Bufor: number,
MZN_Anulowane: number, MZN_Anulowane: number,
MZN_DataDos: string, MZN_DataDos: string,
@@ -138,6 +137,7 @@ export interface Order {
MZN_PodWojewodztwo: string, MZN_PodWojewodztwo: string,
MZN_TypDokumentu: number, MZN_TypDokumentu: number,
MZN_UUID: string, MZN_UUID: string,
MZN_Uwagi: string,
MZamElem: Array<OrderProduct> MZamElem: Array<OrderProduct>
} }

5
src/router/router.ts
View File

@@ -1,6 +1,6 @@
import { createRouter, createWebHistory } from 'vue-router'; import { createRouter, createWebHistory } from 'vue-router';
import { MainView, LoginView, SummedOrdersView } from '@/views'; import { MainView, LoginView, SummaryView, OrdersView } from '@/views'
export const router = createRouter({ export const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL), history: createWebHistory(import.meta.env.BASE_URL),
@@ -8,7 +8,8 @@ export const router = createRouter({
routes: [ routes: [
{ path: '/', component: MainView }, { path: '/', component: MainView },
{ path: '/login', component: LoginView }, { path: '/login', component: LoginView },
{ path: '/table', component: SummedOrdersView, }, { path: '/summary', component: SummaryView, },
{ path: '/orders', component: OrdersView}
] ]
}); });

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

@@ -5,18 +5,17 @@ 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 dates = ref<Date[]>();
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>();
const additionalNotes = ref<string>();
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); await getOrderDates();
return ordersTemp; return ordersTemp;
} }
@@ -27,7 +26,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); await getOrderDates();
return ordersTemp; return ordersTemp;
} }
@@ -38,7 +37,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); await getOrderDates();
return ordersTemp; return ordersTemp;
} }
@@ -50,23 +49,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); await getOrderDates();
return ordersTemp; return ordersTemp;
} }
function getOrderDates(orders : Array<Order>) { async function getOrderDates() {
dates.value = new Array<string>(); const tempDates = new Array<Date>();
if(orders != undefined && orders.length >0) { tempDates.push(...await fetchDates(0));
console.log('watch'); tempDates.push(...await fetchDates(1));
for (const order of orders) { tempDates.push(...await fetchDates(2));
console.log(order); dates.value = tempDates;
if(!dates.value.includes(order.MZN_DataDos)) { console.log(dates.value);
dates.value?.push(order.MZN_DataDos); }
}
} async function fetchDates(offset : number) {
dates.value.sort((a, b) => a.localeCompare(b)); const date = new Date(Date.now());
console.log(dates.value); const urlString = "/kalendarz/" + date.getFullYear() + '-' + Number(date.getMonth() + offset);
} const response = await axiosInstance.get(urlString, {withCredentials: true});
const datesTemp :Array<Date> = response.data;
return datesTemp;
} }
async function loadOrder(uuidString: string, confirmed: boolean, contractor: Ref<Contractor|undefined>, contractors: Ref<Array<Contractor>>, categories: Ref<Array<Category>>) { async function loadOrder(uuidString: string, confirmed: boolean, contractor: Ref<Contractor|undefined>, contractors: Ref<Array<Contractor>>, categories: Ref<Array<Category>>) {
@@ -83,6 +84,7 @@ export const useOrdersStore = defineStore('orders', () => {
orderDate.value = new Date(tempOrder.MZN_DataZam); orderDate.value = new Date(tempOrder.MZN_DataZam);
uuid.value = uuidString; uuid.value = uuidString;
order.value = tempOrder; order.value = tempOrder;
additionalNotes.value = tempOrder.MZN_Uwagi;
if(categories.value == undefined) { if(categories.value == undefined) {
return; return;
@@ -107,5 +109,5 @@ export const useOrdersStore = defineStore('orders', () => {
} }
} }
return {orders, order, uuid, deliveryDate, orderDate, dates, fetchOrders, loadOrder, fetchOrdersByDay, fetchOrdersByBuffer, fetchOrdersByDateStartAndEnd, getOrderDates} return {orders, order, uuid, deliveryDate, orderDate, dates, additionalNotes, fetchOrders, loadOrder, fetchOrdersByDay, fetchOrdersByBuffer, fetchOrdersByDateStartAndEnd, fetchDates, getOrderDates}
}) })

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

@@ -14,34 +14,28 @@ export const useSiteControlStore = defineStore('siteControl', () => {
const isLoading = ref<boolean>(true); const isLoading = ref<boolean>(true);
function switchToForm() { async function switchToForm() {
shownComponent.value = "mainForm"; await router.push("/");
if(router.currentRoute.value.fullPath != "/") {
newOrder(true);
router.push("/");
}
} }
async function switchToOrders() { async function switchToOrders() {
if(shownComponent.value != 'orderSelector') { await router.push("/orders");
const orderStore = useOrdersStore(); // const orderStore = useOrdersStore();
const { orders } = storeToRefs(orderStore); // const { orders } = storeToRefs(orderStore);
isLoading.value = true; // isLoading.value = true;
shownComponent.value = "orderSelector" // const date = new Date(Date.now());
orders.value = new Array<Order>(); // const startDate = new Date(date.getFullYear(), date.getMonth(), (date.getDate() - 2));
orders.value = await orderStore.fetchOrders(); // const endDate = new Date(date.getFullYear()+1, date.getMonth(), date.getDay());
isLoading.value = false; // orders.value = await orderStore.fetchOrdersByDateStartAndEnd(startDate, endDate, null);
} // console.log(orders.value);
if(router.currentRoute.value.fullPath != "/") { // isLoading.value = false;
router.push("/");
}
} }
async function switchToTable() { async function switchToTable() {
if(router.currentRoute.value.fullPath != "/table") { // const ordersStore = useOrdersStore();
shownComponent.value = "table" // const { orders } = storeToRefs(ordersStore);
router.push("/table"); // orders.value = await ordersStore.fetchOrdersByDay(new Date(Date.now()), null);
} await router.push("/summary");
} }
function checkTheme() { function checkTheme() {
@@ -54,15 +48,15 @@ export const useSiteControlStore = defineStore('siteControl', () => {
const categoriesStore = useCategoriesStore(); const categoriesStore = useCategoriesStore();
shownComponent.value = "mainForm"; shownComponent.value = "mainForm";
isLoading.value = true; isLoading.value = true;
window.scrollTo(0, 0);
await categoriesStore.fetchCategories(); await categoriesStore.fetchCategories();
const { contractor, contractors } = storeToRefs(contractorsStore); const { contractor, contractors } = storeToRefs(contractorsStore);
const { categories } = storeToRefs(categoriesStore); const { categories } = storeToRefs(categoriesStore);
await orderStore.loadOrder(uuid, false, contractor, contractors, categories); await orderStore.loadOrder(uuid, false, contractor, contractors, categories);
isLoading.value=false; isLoading.value=false;
await router.push("/");
} }
function newOrder(redirect : boolean) { async function newOrder(redirect : boolean) {
const ordersStore = useOrdersStore(); const ordersStore = useOrdersStore();
const contractorsStore = useContractorsStore(); const contractorsStore = useContractorsStore();
const categoriesStore = useCategoriesStore(); const categoriesStore = useCategoriesStore();
@@ -73,11 +67,8 @@ export const useSiteControlStore = defineStore('siteControl', () => {
uuid.value = undefined; uuid.value = undefined;
deliveryDate.value = undefined; deliveryDate.value = undefined;
orderDate.value = undefined; orderDate.value = undefined;
categoriesStore.fetchCategories(); await categoriesStore.fetchCategories();
if(shownComponent.value != "mainForm" && redirect) { await router.push("/");
switchToForm();
}
window.scrollTo(0, 0);
} }
return {isLoading, showConfirmationModal, showCancellationModal, isDarkTheme, shownComponent, switchToForm, switchToOrders, switchToTable, checkTheme, viewOrder, newOrder}; return {isLoading, showConfirmationModal, showCancellationModal, isDarkTheme, shownComponent, switchToForm, switchToOrders, switchToTable, checkTheme, viewOrder, newOrder};

7
src/views/LoginView.vue
View File

@@ -4,7 +4,7 @@ import * as Yup from 'yup';
import { axiosInstance } from '@/main' import { axiosInstance } from '@/main'
import { router } from '@/router/router' import { router } from '@/router/router'
import { useUserStore } from '@/stores/user.store' import { useUserStore } from '@/stores/user.store'
import { storeToRefs } from 'pinia' import { getActivePinia, storeToRefs } from 'pinia'
const schema = Yup.object().shape({ const schema = Yup.object().shape({
username: Yup.string().required('Nazwa użytkownika jest wymagana'), username: Yup.string().required('Nazwa użytkownika jest wymagana'),
@@ -24,9 +24,8 @@ async function onSubmit(values : any, { setErrors } : any) {
}); });
if(body != undefined && body.status == 200) { if(body != undefined && body.status == 200) {
const userStore = useUserStore(); const userStore = useUserStore();
localStorage.setItem("username", body.data.displayName); const { username } = storeToRefs(userStore);
storeToRefs(userStore).username = body.data.displayName; username.value = body.data.displayName;
storeToRefs(userStore).logoutButtonText = body.data.displayName;
await router.push('/'); await router.push('/');
} }

18
src/views/MainView.vue
View File

@@ -1,18 +1,13 @@
<template class="has-navbar-fixed-top"> <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>
<OrdersSelector class="box is-shadowless" v-if="shownComponent == 'orderSelector'" <MainForm
/>
<div v-else>
<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> </div>
<ConfirmationModal v-show="showConfirmationModal" @close="showConfirmationModal = false"></ConfirmationModal> <ConfirmationModal v-show="showConfirmationModal" @close="showConfirmationModal = false"></ConfirmationModal>
@@ -50,7 +45,8 @@ async function fetchData() {
isLoading.value = false; isLoading.value = false;
} }
siteControlStore.checkTheme(); siteControlStore.checkTheme();
fetchData(); //fetchData();
isLoading.value = false;
</script> </script>
<style> <style>
@@ -64,12 +60,4 @@ fetchData();
--bulma-box-padding: 0.75rem; --bulma-box-padding: 0.75rem;
} }
} }
:root {
min-height: 100vh;
}
body {
min-height: 100vh;
}
</style> </style>

12
src/views/OrdersView.vue Normal file
View File

@@ -0,0 +1,12 @@
<script setup lang="ts">
</script>
<template>
<NavBar/>
<OrdersSelector class="box is-shadowless"/>
</template>
<style scoped>
</style>

8
src/views/SummaryView.vue Normal file
View File

@@ -0,0 +1,8 @@
<script setup lang="ts">
import SummaryComponent from '@/components/SummaryComponent.vue'
</script>
<template>
<NavBar/>
<SummaryComponent/>
</template>

3
src/views/index.ts
View File

@@ -1,3 +1,4 @@
export { default as LoginView } from "./LoginView.vue"; export { default as LoginView } from "./LoginView.vue";
export { default as MainView } from "./MainView.vue"; export { default as MainView } from "./MainView.vue";
export { default as SummedOrdersView } from "./SummedOrdersView.vue" export { default as SummaryView } from "./SummaryView.vue"
export { default as OrdersView } from "./OrdersView.vue"