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

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>

161
src/views/SummedOrdersView.vue
View File

@@ -1,161 +0,0 @@
<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'
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();
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);
</script>
<template>
<NavBar/>
<div class="columns box is-shadowless">
<div class="column">
<div class="box">
<h1 class="title is-4 mb-3">Opcje</h1>
<label class="label is-small">Data dostawy</label>
<VueDatePicker v-model="searchDate"
:enable-time-picker="false"
:clearable="true"
input-class-name="input is-small calendar-background"
menu-class-name="calendar-background"
v-bind:dark = "isDarkTheme" />
<div class="control mt-3">
<label class="checkbox mr-5">
<input type="checkbox" v-model="confirmedOrders"/>
Tylko potwierdzone zamówienia?
</label>
</div>
<button class="button mt-3" @click="fetchOrders">Potwierdź</button>
</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 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 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">
<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_Nazwa }}</td>
<td>{{ product.SummedQuantityZ.toFixed(2) }}</td>
<td>{{ product.Twr_JM }}</td>
<td>{{ product.SummedPriceZ.toFixed(2) }}&nbsp;PLN</td>
</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>
</div>
</div>
</div>
</div>
</template>
<style scoped>
@media screen and (min-width: 500px) {
.box {
--bulma-box-padding: 1.5rem;
}
}
@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;
}
}
</style>

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"