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

1
src/assets/base.css
View File

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

19
src/assets/style.scss
View File

@@ -1,3 +1,22 @@
@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;

14
src/components/ConfirmedForm.vue
View File

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

12
src/components/MainForm.vue
View File

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

3
src/components/NavBar.vue
View File

@@ -70,12 +70,11 @@ function routeLogin() {
<a class="navbar-item" @click="clickForm">
Formularz
</a>
<a class="navbar-item" @click="clickOrders">
Zamówienia
</a>
<a class="navbar-item" @click="clickTable">
Tabela
Zestawienie
</a>
</div>
<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 { storeToRefs } from 'pinia'
import { useSiteControlStore } from '@/stores/siteControl.store'
import type { Order } from '@/main'
const ordersStore = useOrdersStore();
const siteControlStore = useSiteControlStore();
const searchOrderDate = ref<Array<Date>>();
const searchOrderDate = ref<Array<Date>>([]);
const isOutOfBuffer = ref<boolean>(false);
const isInBufor = ref<boolean>(false);
const { orders, dates } = storeToRefs(ordersStore);
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) => {
if(val && val == isOutOfBuffer.value) {
@@ -36,12 +42,29 @@ const buffer = computed(()=>{
} else return !!isInBufor.value;
});
function viewOrder(uuid : string) {
siteControlStore.viewOrder(uuid);
const datesWithOrders = computed( ()=>{
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) {
event.preventDefault();
event?.preventDefault();
areOrdersLoading.value = true;
console.log(searchOrderDate.value);
@@ -54,6 +77,7 @@ async function fetchOrders(event : Event) {
areOrdersLoading.value = false;
}
fetchOrders(null);
</script>
<template>
@@ -70,7 +94,6 @@ async function fetchOrders(event : Event) {
:highlight="dates"
input-class-name="input is-small calendar-background"
menu-class-name="calendar-background"
v-bind:dark = "isDarkTheme"
range/>
</div>
</div>
@@ -92,63 +115,61 @@ async function fetchOrders(event : Event) {
</form>
<div class="box">
<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"
: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">
<input class="input is-small is-static"
type="text"
v-model="order.MZN_DataDos"
readonly/>
<div v-for="date in datesWithOrders.keys()" :key="String(date)">
<div v-if="datesWithOrders.get(date)?.length != 0">
<h1 class="mb-3 subtitle is-6" :class="{'is-skeleton' : areOrdersLoading}">{{ date }}</h1>
<div class="columns is-multiline">
<template v-for="order in datesWithOrders.get(date)" :key="order.MZN_UUID">
<div class="column is-4 mb-3" v-if="order.MZN_DataDos == date.toString()">
<div class="box"
:class="{'confirmed' : order.MZN_Bufor == 0 && order.MZN_Anulowane != 1,
'cancelled' : order.MZN_Anulowane == 1,
'is-skeleton' : areOrdersLoading}">
<label class="label is-small" :class="{'is-invisible': areOrdersLoading}">Klient</label>
<div class="field is-small mb-3" :class="{'is-invisible': areOrdersLoading}">
<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" :class="{'is-invisible': areOrdersLoading}">
<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" :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 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>
<label class="label is-small mb-5" :class="{'is-invisible': areOrdersLoading}">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" :class="{'is-invisible': areOrdersLoading, 'is-loading': order.loading}" @click="viewOrder(order)">Podgląd</button>
</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>
</template>
</template>
</div>
</div>
</div>
</div>

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

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

8
src/main.ts
View File

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

5
src/router/router.ts
View File

@@ -1,6 +1,6 @@
import { createRouter, createWebHistory } from 'vue-router';
import { MainView, LoginView, SummedOrdersView } from '@/views';
import { MainView, LoginView, SummaryView, OrdersView } from '@/views'
export const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
@@ -8,7 +8,8 @@ export const router = createRouter({
routes: [
{ path: '/', component: MainView },
{ 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', () => {
const orders = ref<Array<Order>>();
const dates = ref<Array<string>>();
const dates = ref<Date[]>();
const order = ref<Order>();
const uuid = ref<string>();
const deliveryDate = ref<Date>();
const orderDate = ref<Date>();
const additionalNotes = ref<string>();
async function fetchOrders() {
const response = await axiosInstance.get('/zamowienia', {withCredentials: true});
const ordersTemp : Array<Order> = response.data;
getOrderDates(ordersTemp);
await getOrderDates();
return ordersTemp;
}
@@ -27,7 +26,7 @@ export const useOrdersStore = defineStore('orders', () => {
}
const response = await axiosInstance.get(urlString, {withCredentials: true});
const ordersTemp : Array<Order> = response.data;
getOrderDates(ordersTemp);
await getOrderDates();
return ordersTemp;
}
@@ -38,7 +37,7 @@ export const useOrdersStore = defineStore('orders', () => {
}
const response = await axiosInstance.get(urlString, {withCredentials: true});
const ordersTemp : Array<Order> = response.data;
getOrderDates(ordersTemp);
await getOrderDates();
return ordersTemp;
}
@@ -50,23 +49,25 @@ export const useOrdersStore = defineStore('orders', () => {
}
const response = await axiosInstance.get(urlString, {withCredentials: true});
const ordersTemp : Array<Order> = response.data;
getOrderDates(ordersTemp);
await getOrderDates();
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 getOrderDates() {
const tempDates = new Array<Date>();
tempDates.push(...await fetchDates(0));
tempDates.push(...await fetchDates(1));
tempDates.push(...await fetchDates(2));
dates.value = tempDates;
console.log(dates.value);
}
async function fetchDates(offset : number) {
const date = new Date(Date.now());
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>>) {
@@ -83,6 +84,7 @@ export const useOrdersStore = defineStore('orders', () => {
orderDate.value = new Date(tempOrder.MZN_DataZam);
uuid.value = uuidString;
order.value = tempOrder;
additionalNotes.value = tempOrder.MZN_Uwagi;
if(categories.value == undefined) {
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);
function switchToForm() {
shownComponent.value = "mainForm";
if(router.currentRoute.value.fullPath != "/") {
newOrder(true);
router.push("/");
}
async function switchToForm() {
await router.push("/");
}
async function switchToOrders() {
if(shownComponent.value != 'orderSelector') {
const orderStore = useOrdersStore();
const { orders } = storeToRefs(orderStore);
isLoading.value = true;
shownComponent.value = "orderSelector"
orders.value = new Array<Order>();
orders.value = await orderStore.fetchOrders();
isLoading.value = false;
}
if(router.currentRoute.value.fullPath != "/") {
router.push("/");
}
await router.push("/orders");
// const orderStore = useOrdersStore();
// const { orders } = storeToRefs(orderStore);
// isLoading.value = true;
// 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());
// orders.value = await orderStore.fetchOrdersByDateStartAndEnd(startDate, endDate, null);
// console.log(orders.value);
// isLoading.value = false;
}
async function switchToTable() {
if(router.currentRoute.value.fullPath != "/table") {
shownComponent.value = "table"
router.push("/table");
}
// const ordersStore = useOrdersStore();
// const { orders } = storeToRefs(ordersStore);
// orders.value = await ordersStore.fetchOrdersByDay(new Date(Date.now()), null);
await router.push("/summary");
}
function checkTheme() {
@@ -54,15 +48,15 @@ export const useSiteControlStore = defineStore('siteControl', () => {
const categoriesStore = useCategoriesStore();
shownComponent.value = "mainForm";
isLoading.value = true;
window.scrollTo(0, 0);
await categoriesStore.fetchCategories();
const { contractor, contractors } = storeToRefs(contractorsStore);
const { categories } = storeToRefs(categoriesStore);
await orderStore.loadOrder(uuid, false, contractor, contractors, categories);
isLoading.value=false;
await router.push("/");
}
function newOrder(redirect : boolean) {
async function newOrder(redirect : boolean) {
const ordersStore = useOrdersStore();
const contractorsStore = useContractorsStore();
const categoriesStore = useCategoriesStore();
@@ -73,11 +67,8 @@ export const useSiteControlStore = defineStore('siteControl', () => {
uuid.value = undefined;
deliveryDate.value = undefined;
orderDate.value = undefined;
categoriesStore.fetchCategories();
if(shownComponent.value != "mainForm" && redirect) {
switchToForm();
}
window.scrollTo(0, 0);
await categoriesStore.fetchCategories();
await router.push("/");
}
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 { router } from '@/router/router'
import { useUserStore } from '@/stores/user.store'
import { storeToRefs } from 'pinia'
import { getActivePinia, storeToRefs } from 'pinia'
const schema = Yup.object().shape({
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) {
const userStore = useUserStore();
localStorage.setItem("username", body.data.displayName);
storeToRefs(userStore).username = body.data.displayName;
storeToRefs(userStore).logoutButtonText = body.data.displayName;
const { username } = storeToRefs(userStore);
username.value = body.data.displayName;
await router.push('/');
}

18
src/views/MainView.vue
View File

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