add: better card handling

Better handling of cards, safe to localStorage

app/assets/styles/priceCard.css

@@ -1,13 +1,14 @@
 .PriceCard {
-    --height: auto;
     width: 100%;
     display: grid;
-    transition: var(--transition-default);
+    transition: 150ms;
     grid-template-rows: auto 1fr auto;
-    height: var(--height);
+    max-height: 400px;
+    opacity: 1;
 
     &.deleting {
-        height: 0;
+        max-height: 0;
+        opacity: 0;
     }
 
     &.folded {

app/components/Pp/PriceCard.vue

@@ -1,13 +1,12 @@
 <template>
   <form
-      ref="root"
+    ref="root"
-      class="PriceCard card"
+    class="PriceCard card"
-      :class="{ folded }"
+    :class="{ folded, deleting }"
-      :style="{ '--height': height }"
+    @submit.prevent="() => {}"
-      @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="card.name" label="Name" id="n" :uid="card.uuid" type="text" @blur="update" />
-          <PpFormInput v-model="price" label="Preis" id="p" :uid="uid" type="number" :min="0.01" @blur="calculate" />
+          <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="card.roles" label="Rollen" id="r" :uid="card.uuid" 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="card.sheets" label="Blätter" id="b" :uid="card.uuid" 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.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 { card } = defineProps<Props>()
-const emit = defineEmits(['remove'])
+const emit = defineEmits(['remove', 'update'])
-
-const root = ref<HTMLElement>()
-const height = ref<string>()
-const folded = ref(false)
 
 onMounted(() => {
+  calculate()
+  if (card.price) folded.value = true
 })
 
-const name = ref('')
+const root = ref<HTMLElement>()
-const price = ref(0)
+const folded = ref<boolean>(false)
-const roles = ref(0)
+const deleting = ref<boolean>(false)
-const sheets = ref(0)
-const layers = ref(0)
 
 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
+  if (!card.price || !card.roles) return
-  ppr.value = price.value / roles.value
+  ppr.value = card.price / card.roles
 
-  if (!sheets.value) return
+  if (!card.sheets) return
-  pps.value = (ppr.value / sheets.value) * 10
+  pps.value = (ppr.value / card.sheets) * 10
 
-  if(!layers.value) return
+  if(!card.layers) return
-  ppl.value = (pps.value / layers.value) * 10
+  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`
+  deleting.value = true
-  await nextTick()
-  root.value?.classList.add('deleting')
 }
 </script>

app/pages/index.vue

@@ -2,11 +2,12 @@
   <section class="content flex-col">
     <div class="pc-wrapper flex-col">
       <PpPriceCard
-          v-for="card in cards"
+        v-for="(card, index) in cards"
-          :key="card"
+        :key="card.uuid"
-          :uid="card"
+        :deletable="cards.length > 1"
-          :deletable="cards.length > 1"
+        :card="card"
-          @remove="removeCard"
+        @update="updateCard(card, index)"
+        @remove="removeCard(card)"
       />
     </div>
   </section>
@@ -15,35 +16,47 @@
       <Icon class="icon" name="uil:plus" mode="svg" />
       <span>Hinzufügen</span>
     </PpButton>
-    <PpButton class="mini-button text-white" @click="calculate">
-      <Icon class="icon" name="uil:calculator" mode="svg" />
-      <span>Berechnen</span>
-    </PpButton>
   </PpToolbar>
 </template>
 
 <script setup lang="ts">
-const randomUUID = () => {
+import type { Card } from '../../shared/Card'
-  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, char => {
-    const random = Math.random() * 16 | 0
-    const value = char === 'x' ? random : (random & 0x3 | 0x8)
-    return value.toString(16)
-  })
-}
 
-const initialId = randomUUID()
+const createCard = (uuid : string) => ({
+  uuid,
+  name: '',
+  price: 0,
+  roles: 0,
+  sheets: 0,
+  layers: 0,
+})
 
 const cards = useState('cards', () => [
-  initialId,
+  createCard(crypto.randomUUID()),
 ])
 
+onMounted(() => {
+  const fromStorage = JSON.parse(localStorage.getItem('cards') ?? '[]')
+  cards.value = fromStorage.length !== 0 ? fromStorage : cards.value
+})
+
 const addCard = () => {
-  cards.value.push(randomUUID())
+  cards.value.push(createCard(crypto.randomUUID()))
 }
 
-const removeCard = (uuid : string) => {
+const removeCard = (card : Card) => {
-  cards.value = cards.value.filter((c) => c !== uuid)
+  cards.value = cards.value.filter(element => element.uuid !== card.uuid)
+  updateLocalStorage()
 }
 
-const calculate = () => {}
+const updateCard = (card : Card, index : number) => {
+  cards.value[index] = card
+  updateLocalStorage()
+}
+
+const updateLocalStorage = () => {
+  localStorage.setItem('cards', JSON.stringify(cards.value))
+}
+
+const sort = () => {}
 </script>

shared/Card.ts

@@ -0,0 +1,8 @@
+export type Card = {
+  uuid: string
+  name: string
+  price: number
+  roles: number
+  sheets: number
+  layers: number
+}