webfussel
c99c243dfc
Implemented bottom toolbar for adding and calculating, added remove button for Price Cards
79 lines
2.3 KiB
Vue
79 lines
2.3 KiB
Vue
<template>
|
|
<form class="PriceCard card">
|
|
<header class="padding bg-blue">
|
|
TODO: IRGENDWAS
|
|
<PpButton
|
|
class="icon-button bg-main"
|
|
:class="[deletable && 'deletable']"
|
|
@click="emit('remove', uid)"
|
|
>
|
|
<Icon name="uil:times" mode="svg" />
|
|
</PpButton>
|
|
</header>
|
|
<div class="padding bg-blue flex-col">
|
|
<div class="wrapper">
|
|
<!-- <PpFormInput v-model="name" label="Name" id="n" :uid="uid" type="text" />-->
|
|
<PpFormInput v-model="price" label="Preis" id="p" :uid="uid" type="number" :min="0.01" @blur="calculate" />
|
|
</div>
|
|
<div class="wrapper">
|
|
<PpFormInput v-model="roles" label="Rollen" id="r" :uid="uid" type="number" :max="150" @blur="calculate" />
|
|
<PpFormInput v-model="sheets" label="Blätter" id="b" :uid="uid" type="number" :max="500" @blur="calculate" />
|
|
<PpFormInput v-model="layers" label="Lagen" id="l" :uid="uid" type="number" :max="10" @blur="calculate" />
|
|
</div>
|
|
</div>
|
|
<div class="wrapper padding bg-white">
|
|
<div class="info flex-col">
|
|
<Icon class="icon" name="uil:toilet-paper" mode="svg" />
|
|
<span class="price">{{ intl.format(ppr) }}</span>
|
|
<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>
|
|
<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>
|
|
<span class="pro">Pro 100</span>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
type Props = {
|
|
uid: string
|
|
deletable: boolean
|
|
}
|
|
|
|
const { uid } = defineProps<Props>()
|
|
|
|
const emit = defineEmits(['remove'])
|
|
|
|
const name = ref('')
|
|
const price = ref(0)
|
|
const roles = ref(0)
|
|
const sheets = ref(0)
|
|
const layers = ref(0)
|
|
|
|
const ppr = ref(0)
|
|
const pps = ref(0)
|
|
const ppl = ref(0)
|
|
|
|
const intl = Intl.NumberFormat('de-DE', {
|
|
style: 'currency',
|
|
currency: 'EUR',
|
|
})
|
|
|
|
const calculate = () => {
|
|
if (!price.value || !roles.value) return
|
|
ppr.value = price.value / roles.value
|
|
|
|
if (!sheets.value) return
|
|
pps.value = (ppr.value / sheets.value) * 10
|
|
|
|
if(!layers.value) return
|
|
ppl.value = (pps.value / layers.value) * 10
|
|
}
|
|
</script>
|