107 lines
3.4 KiB
Vue
107 lines
3.4 KiB
Vue
<template>
|
|
<div class="container">
|
|
<div class="flex flex-column align-items-center justify-content-center">
|
|
<img alt="logo" class="mb-3" style="height: auto; width: 5rem" src="" />
|
|
<div class="text-center text-sm">Plätschwiesen 2, 72622 Nürtingen<br />Baden-Württemberg</div>
|
|
</div>
|
|
<Transition>
|
|
<WaveSpinner v-if="isLoading" />
|
|
<div v-else>
|
|
<div class="flex justify-content-between my-5">
|
|
<div>{{ date }}</div>
|
|
<div>|</div>
|
|
<div class="mb-1">Tisch {{ bill.table_id }}</div>
|
|
<div>|</div>
|
|
<div>{{ time }}</div>
|
|
</div>
|
|
<div class="text-lg">
|
|
<div v-for="billItem in billItems" :key="billItem.id" class="flex flex-column mb-1">
|
|
<div class="flex align-items-center justify-content-between">
|
|
<div class="entry white-space-nowrap overflow-hidden">{{ billItem.description }}</div>
|
|
<div>{{ convertToEur(billItem.total) }}</div>
|
|
</div>
|
|
<div v-if="billItem.amount !== 1" class="ml-4 font-italic text-sm">{{ billItem.amount }} x {{ convertToEur(billItem.price) }}</div>
|
|
</div>
|
|
<div class="flex justify-content-end font-bold mt-5 mb-3">Total: {{ convertToEur(bill.total) }}</div>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { computed, defineComponent, onMounted, PropType, ref } from "vue";
|
|
import { BillsService, service_Bill, service_BillItem } from "@/services/openapi";
|
|
import { convertToEur } from "@/utils";
|
|
import WaveSpinner from "@/components/UI/WaveSpinner.vue";
|
|
import moment from "moment";
|
|
|
|
export default defineComponent({
|
|
name: "BillModal",
|
|
components: { WaveSpinner },
|
|
props: { bill: { type: Object as PropType<service_Bill>, required: true } },
|
|
setup(props) {
|
|
const isLoading = ref(true);
|
|
const billItems = ref<service_BillItem[]>();
|
|
const date = computed(() => props.bill.created_at && moment.unix(props.bill.created_at).format("DD.MM.YYYY"));
|
|
const time = computed(() => props.bill.created_at && moment.unix(props.bill.created_at).format("HH:mm") + " Uhr");
|
|
onMounted(() => {
|
|
props.bill.id &&
|
|
BillsService.getBillsItems(props.bill.id)
|
|
.then((res) => {
|
|
billItems.value = res;
|
|
})
|
|
.finally(() => (isLoading.value = false));
|
|
});
|
|
|
|
return { convertToEur, isLoading, billItems, date, time };
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.v-enter-active {
|
|
transition: opacity 0.2s ease-in;
|
|
}
|
|
.v-enter-from {
|
|
opacity: 0;
|
|
}
|
|
|
|
.container {
|
|
--bs-gutter-x: 0;
|
|
--bs-gutter-y: 0;
|
|
width: 100%;
|
|
padding-right: 0.5rem;
|
|
padding-left: 0.5rem;
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
}
|
|
@media (min-width: 576px) {
|
|
.container {
|
|
max-width: 540px;
|
|
}
|
|
}
|
|
@media (min-width: 768px) {
|
|
.container {
|
|
max-width: 720px;
|
|
}
|
|
}
|
|
@media (min-width: 992px) {
|
|
.container {
|
|
max-width: 960px;
|
|
}
|
|
}
|
|
@media (min-width: 1200px) {
|
|
.container {
|
|
max-width: 1140px;
|
|
}
|
|
}
|
|
@media (min-width: 1400px) {
|
|
.container {
|
|
max-width: 1320px;
|
|
}
|
|
}
|
|
.entry:first-child:after {
|
|
content: " . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ";
|
|
}
|
|
</style>
|