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

Table summary of orders

Browse Source
This commit is contained in:
Patryk Binkowski
2024-07-12 17:11:52 +02:00
parent 200242252c
commit bbec759b08
16 changed files with 414 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/components/OrdersSelector.vue
View File

@@ -1,17 +1,18 @@
<script setup lang="ts">
import VueDatePicker from '@vuepic/vue-datepicker';
import { ref, watch } from 'vue'
import { computed, ref, watch } from 'vue'
import { useOrdersStore } from '@/stores/orders.store'
import { storeToRefs } from 'pinia'
import { useSiteControlStore } from '@/stores/siteControl.store'
const ordersStore = useOrdersStore();
const siteControlStore = useSiteControlStore();
const searchOrderDate = ref<Date>();
const searchOrderDate = ref<Array<Date>>();
const isOutOfBuffer = ref<boolean>(false);
const isInBufor = ref<boolean>(false);
const { orders } = storeToRefs(ordersStore);
const areOrdersLoading = ref<boolean>(false);
const { isDarkTheme } = storeToRefs(siteControlStore);
watch(isInBufor, (val) => {
if(val && val == isOutOfBuffer.value) {
@@ -29,6 +30,12 @@ watch(isOutOfBuffer, (val) => {
immediate: true
});
const buffer = computed(()=>{
if (!isInBufor.value && !isOutOfBuffer.value) {
return null;
} else return !!isInBufor.value;
});
function viewOrder(uuid : string) {
siteControlStore.viewOrder(uuid);
}
@@ -36,10 +43,13 @@ function viewOrder(uuid : string) {
async function fetchOrders(event : Event) {
event.preventDefault();
areOrdersLoading.value = true;
if(isInBufor.value) {
orders.value = await ordersStore.fetchOrdersInBuffer();
} else if (isOutOfBuffer.value) {
orders.value = await ordersStore.fetchOrdersOutOfBuffer();
console.log(searchOrderDate.value);
if(searchOrderDate.value == undefined) {
orders.value = await ordersStore.fetchOrdersByBuffer(buffer.value);
}
if(searchOrderDate.value != undefined) {
orders.value = await ordersStore.fetchOrdersByDateStartAndEnd(searchOrderDate.value[0], searchOrderDate.value[1], buffer.value);
}
areOrdersLoading.value = false;
}
@@ -57,7 +67,10 @@ async function fetchOrders(event : Event) {
<VueDatePicker v-model="searchOrderDate"
:enable-time-picker="false"
:clearable="true"
input-class-name="input is-small"/>
input-class-name="input is-small calendar-background"
menu-class-name="calendar-background"
v-bind:dark = "isDarkTheme"
range/>
</div>
</div>
<div class="field mb-5">
@@ -73,15 +86,14 @@ async function fetchOrders(event : Event) {
</label>
</div>
</div>
<button class="button is-primary is-small is-expanded" @click="fetchOrders" :class="{ 'is-loading': areOrdersLoading }">Pobierz zamówienia</button>
<button class="button is-info is-small is-expanded" @click="fetchOrders" :class="{ 'is-loading': areOrdersLoading }">Pobierz zamówienia</button>
</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">
<!-- <h1 class="mb-3 is-size-7"><b>{{ order.MZN_UUID }}</b></h1>-->
<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"
@@ -122,7 +134,7 @@ async function fetchOrders(event : Event) {
value="Nie"
readonly/>
</div>
<button class="button is-primary is-small is-expanded" @click="viewOrder(order.MZN_UUID)" :name="order.MZN_UUID">Podgląd</button>
<button class="button is-info is-small is-expanded" @click="viewOrder(order.MZN_UUID)" :name="order.MZN_UUID">Podgląd</button>
</div>
</div>
</div>
@@ -130,6 +142,34 @@ async function fetchOrders(event : Event) {
</div>
</template>
<style scoped>
<style>
@media (prefers-color-scheme: dark){
.calendar-background {
--dp-background-color: rgb(20, 22, 26);
--dp-border-color: var(--bulma-border);
--dp-menu-border-color: var(--bulma-border);
--dp-border-color-hover: var(--bulma-border);
--dp-border-color-focus: var(--bulma-border);
--dp-primary-color: var(--bulma-info);
--dp-primary-text-color: #000;
}
}
@media (prefers-color-scheme: light){
.calendar-background {
--dp-border-color: var(--bulma-border);
--dp-menu-border-color: var(--bulma-border);
--dp-border-color-hover: var(--bulma-border);
--dp-border-color-focus: var(--bulma-border);
--dp-primary-color: var(--bulma-info);
--dp-primary-text-color: #000;
}
}
.cancelled {
--bulma-box-background-color: var(--bulma-danger-soft)
}
.confirmed {
--bulma-box-background-color: var(--bulma-success-soft)
}
</style>