webfussel/propapier
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add: new price card

Browse source 
Added new price card design, wip
This commit is contained in:
Fiona Lena Urban 2025-04-28 21:07:04 +02:00
parent 9d686e2af2
commit 7aa21c1c19
7 changed files with 194 additions and 139 deletions
Download patch file Download diff file Expand all files Collapse all files

98
app/components/Pp/PriceCard.vue
View file

@ -1,64 +1,42 @@
<template>
<form
<article
ref="root"
class="PriceCard card"
:class="{ folded, deleting }"
@submit.prevent="() => {}"
class="PriceCard card bg-blue"
:class="{ deleting }"
>
<header class="padding bg-blue">
{{ card.name || 'Kein Name' }}
<PpButton
class="icon-button bg-main"
@click="folded = !folded"
>
<Icon :name="folded ? 'uil:sort' : 'uil:sorting'" mode="svg" />
<header class="padding">
<div class="name-price">
<span>{{ card.name || 'Kein Name' }}</span>
<span>{{ intl.format(card.price)}}</span>
</div>
<PpButton class="text-white" @click="update()">
<Icon class="icon" name="uil:ellipsis-v" mode="svg" />
</PpButton>
</header>
<aside>
<div class="input-wrapper padding bg-blue flex-col">
<div class="wrapper">
<PpFormInput v-model="card.name" label="Name" id="n" :uid="card.uuid" type="text" @blur="update" />
<PpFormInput v-model="card.price" label="Preis" id="p" :uid="card.uuid" type="number" :min="0.01" @blur="calculate" />
</div>
<div class="wrapper">
<PpFormInput v-model="card.roles" label="Rollen" id="r" :uid="card.uuid" type="number" :max="150" @blur="calculate" />
<PpFormInput v-model="card.sheets" label="Blätter" id="b" :uid="card.uuid" type="number" :max="500" @blur="calculate" />
<PpFormInput v-model="card.layers" label="Lagen" id="l" :uid="card.uuid" type="number" :max="10" @blur="calculate" />
</div>
</div>
</aside>
<main class="wrapper padding bg-white">
<main class="wrapper padding">
<div class="info flex-col">
<Icon class="icon" name="uil:toilet-paper" mode="svg" />
<span class="price">{{ intl.format(ppr) }}</span>
<div class="price">
<Icon class="icon" name="uil:toilet-paper" mode="svg" />
<span class="value">{{ intl.format(card.ppr) }}</span>
</div>
<span class="pro">Pro 1</span>
</div>
<div class="info flex-col">
<Icon class="icon" name="uil:file-landscape" mode="svg" />
<span class="price">{{ intl.format(pps) }}</span>
<div class="price">
<Icon class="icon" name="uil:file-landscape" mode="svg" />
<span class="value">{{ intl.format(card.pps) }}</span>
</div>
<span class="pro">Pro 10</span>
</div>
<div class="info flex-col">
<Icon class="icon" name="uil:layer-group" mode="svg" />
<span class="price">{{ intl.format(ppl) }}</span>
<div class="price">
<Icon class="icon" name="uil:layer-group" mode="svg" />
<span class="value">{{ intl.format(card.ppl) }}</span>
</div>
<span class="pro">Pro 100</span>
</div>
</main>
<footer class="padding bg-blue flex-row">
<PpButton
class="delete"
:class="{ deletable }"
@click="deleteCard"
>
<Icon name="uil:trash" mode="svg" />
Entfernen
</PpButton>
<PpButton v-if="false" class="cta white">
<Icon name="uil:qrcode-scan" mode="svg" />
Scan
</PpButton>
</footer>
</form>
</article>
</template>
<script setup lang="ts">
@ -73,43 +51,17 @@ const { card } = defineProps<Props>()
const emit = defineEmits(['remove', 'update'])
const root = ref<HTMLElement>()
const folded = ref<boolean>(false)
const deleting = ref<boolean>(false)
const ppr = ref(card.ppr)
const pps = ref(card.pps)
const ppl = ref(card.ppl)
const intl = Intl.NumberFormat('de-DE', {
style: 'currency',
currency: 'EUR',
})
const calculate = () => {
if (!card.price || !card.roles) return
ppr.value = card.price / card.roles
if (!card.sheets) {
update()
return
}
pps.value = (ppr.value / card.sheets) * 10
if(!card.layers) {
update()
return
}
ppl.value = (pps.value / card.layers) * 10
update()
}
const update = () => emit('update', { ...card, ppr: ppr.value, pps: pps.value, ppl: ppl.value })
const update = () => emit('update')
const deleteCard = async () => {
root.value?.addEventListener('transitionend', () => emit('remove'))
deleting.value = true
}
onMounted(() => folded.value = !!card.price)
</script>