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

add: better card handling

Browse source 
Better handling of cards, safe to localStorage
This commit is contained in:
Fiona Lena Urban 2025-03-11 07:25:24 +01:00
parent d0f2adaa38
commit e4ff2ba229
4 changed files with 81 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,13 +1,12 @@
<template>
<form
ref="root"
class="PriceCard card"
:class="{ folded }"
:style="{ '--height': height }"
@submit.prevent="() => {}"
ref="root"
class="PriceCard card"
:class="{ folded, deleting }"
@submit.prevent="() => {}"
>
<header class="padding bg-blue">
{{ name || 'Kein Name' }}
{{ card.name || 'Kein Name' }}
<PpButton
class="icon-button bg-main"
@click="folded = !folded"
@ -18,13 +17,13 @@
<aside>
<div class="input-wrapper 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" />
<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="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" />
<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>
@ -63,28 +62,24 @@
</template>
<script setup lang="ts">
import { nextTick } from '@redocly/openapi-core/src/utils'
import type { Card } from '../../../shared/Card'
type Props = {
uid: string
deletable: boolean
card: Card
}
const { uid } = defineProps<Props>()
const emit = defineEmits(['remove'])
const root = ref<HTMLElement>()
const height = ref<string>()
const folded = ref(false)
const { card } = defineProps<Props>()
const emit = defineEmits(['remove', 'update'])
onMounted(() => {
calculate()
if (card.price) folded.value = true
})
const name = ref('')
const price = ref(0)
const roles = ref(0)
const sheets = ref(0)
const layers = ref(0)
const root = ref<HTMLElement>()
const folded = ref<boolean>(false)
const deleting = ref<boolean>(false)
const ppr = ref(0)
const pps = ref(0)
@ -95,24 +90,28 @@ const intl = Intl.NumberFormat('de-DE', {
currency: 'EUR',
})
const update = () => {
emit('update', card)
}
const calculate = () => {
if (!price.value || !roles.value) return
ppr.value = price.value / roles.value
if (!card.price || !card.roles) return
ppr.value = card.price / card.roles
if (!sheets.value) return
pps.value = (ppr.value / sheets.value) * 10
if (!card.sheets) return
pps.value = (ppr.value / card.sheets) * 10
if(!layers.value) return
ppl.value = (pps.value / layers.value) * 10
if(!card.layers) return
ppl.value = (pps.value / card.layers) * 10
update()
}
const deleteCard = async () => {
root.value?.addEventListener('transitionend', () => {
emit('remove', uid)
emit('remove')
})
height.value = `${root.value?.offsetHeight}px`
await nextTick()
root.value?.classList.add('deleting')
deleting.value = true
}
</script>