Flaschengeist/flaschengeist-frontend
Flaschengeist
/
flaschengeist-frontend
7
0
Fork 1
Code Issues Pull Requests Projects Releases Activity

[pricelist][receipt] some more styling

This commit is contained in:
Tim Gröger 2021-03-30 22:16:12 +02:00
parent aadfca2d31
commit 7089ee4d62
3 changed files with 56 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/plugins/pricelist/components/BuildManual/BuildManualVolume.vue
View File

@ -16,7 +16,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, PropType, ref, computed } from 'vue'; import { defineComponent, PropType, ref, computed } from 'vue';
import { DrinkPriceVolume, usePricelistStore } from '../../store'; import { DrinkPriceVolume } from '../../store';
import BuildManualVolumePart from './BuildManualVolumePart.vue'; import BuildManualVolumePart from './BuildManualVolumePart.vue';
export default defineComponent({ export default defineComponent({
name: 'BuildManualVolume', name: 'BuildManualVolume',
@ -28,7 +28,6 @@ export default defineComponent({
}, },
}, },
setup(props) { setup(props) {
const store = usePricelistStore();
const volume = ref(props.volumes[0].id); const volume = ref(props.volumes[0].id);
const options = computed(() => { const options = computed(() => {
let ret: Array<{ label: number; value: number }> = []; let ret: Array<{ label: number; value: number }> = [];

32
src/plugins/pricelist/components/BuildManual/BuildManualVolumePart.vue
View File

@ -1,12 +1,11 @@
<template> <template>
<q-card-section> <q-card-section>
<div class="text-h6">Zutaten</div> <div class="text-h6">Zutaten</div>
<div v-for="(ingredient, index) in volume.ingredients" :key="ingredient.id"> <div v-for="ingredient in volume.ingredients" :key="ingredient.id">
<div v-if="ingredient.drink_ingredient">
<div class="full-width row q-gutter-sm q-py-sm"> <div class="full-width row q-gutter-sm q-py-sm">
<div class="col"> <div class="col">
{{ {{ name(ingredient.drink_ingredient?.ingredient_id) }}
name(ingredient.drink_ingredient?.ingredient_id) || ingredient.extra_ingredient?.name
}}
</div> </div>
<div class="col"> <div class="col">
{{ {{
@ -16,13 +15,32 @@
}} }}
</div> </div>
</div> </div>
<q-separator v-if="index < volume.ingredients.length - 1" /> <q-separator />
</div>
</div>
<div v-for="ingredient in volume.ingredients" :key="ingredient.id">
<div v-if="ingredient.extra_ingredient">
<div class="full-width row q-gutter-sm q-py-sm">
<div class="col">
{{ ingredient.extra_ingredient?.name }}
</div>
<div class="col"></div>
</div>
<q-separator />
</div>
</div> </div>
</q-card-section> </q-card-section>
<q-card-section> <q-card-section>
<div class="text-h6">Preise</div> <div class="text-h6">Preise</div>
<div class="full-width row q-gutter-sm"> <div class="full-width row q-gutter-sm justify-around">
<div v-for="price in volume.prices" :key="price.id">{{ price.price.toFixed(2) }}€</div> <div v-for="price in volume.prices" :key="price.id">
<div class="text-body1">{{ price.price.toFixed(2) }}€</div>
<q-badge v-if="price.public" class="text-caption"> öffentlich </q-badge>
<div class="text-caption text-weight-thin">
{{ price.description
}}
</div>
</div>
</div> </div>
</q-card-section> </q-card-section>
</template> </template>

24
src/plugins/pricelist/components/CalculationTable/BuildManual.vue
View File

@ -1,10 +1,26 @@
<template> <template>
<div v-for="(step, index) in steps" :key="index"> <div
v-for="(step, index) in steps"
:key="index"
class="full-width row q-gutter-sm justify-between q-py-sm"
>
<div class="row">
<div>{{ index + 1}}.</div>
<div class="q-pl-sm">
{{ step }} {{ step }}
<q-btn v-if="editable" icon="mdi-delete" @click="deleteStep(index)" />
</div> </div>
<div v-if="editable" class="row q-gutter-sm"> </div>
<q-input v-model="newStep" /> <q-btn
v-if="editable"
round
color="negative"
size="sm"
icon="mdi-delete"
@click="deleteStep(index)"
/>
</div>
<div v-if="editable" class="full-width row q-gutter-sm justify-between">
<q-input v-model="newStep" filled label="Arbeitsschritt" />
<q-btn label="Schritt hinzufügen" @click="addStep" /> <q-btn label="Schritt hinzufügen" @click="addStep" />
</div> </div>
</template> </template>