From e4ff2ba2290f3cef229737e4d2bdc7ad75174f8f Mon Sep 17 00:00:00 2001
From: webfussel <fiona@webfussel.de>
Date: Tue, 11 Mar 2025 07:25:24 +0100
Subject: [PATCH] add: better card handling

Better handling of cards, safe to localStorage
---
 app/assets/styles/priceCard.css |  9 +++--
 app/components/Pp/PriceCard.vue | 67 ++++++++++++++++-----------------
 app/pages/index.vue             | 57 +++++++++++++++++-----------
 shared/Card.ts                  |  8 ++++
 4 files changed, 81 insertions(+), 60 deletions(-)
 create mode 100644 shared/Card.ts

diff --git a/app/assets/styles/priceCard.css b/app/assets/styles/priceCard.css
index 92ad006..47acd68 100755
--- a/app/assets/styles/priceCard.css
+++ b/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 {
diff --git a/app/components/Pp/PriceCard.vue b/app/components/Pp/PriceCard.vue
index 0aa0e99..2104633 100755
--- a/app/components/Pp/PriceCard.vue
+++ b/app/components/Pp/PriceCard.vue
@@ -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>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 4530791..8c7f550 100755
--- a/app/pages/index.vue
+++ b/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"
-          :key="card"
-          :uid="card"
-          :deletable="cards.length > 1"
-          @remove="removeCard"
+        v-for="(card, index) in cards"
+        :key="card.uuid"
+        :deletable="cards.length > 1"
+        :card="card"
+        @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 = () => {
-  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)
-  })
-}
+import type { Card } from '../../shared/Card'
 
-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) => {
-  cards.value = cards.value.filter((c) => c !== uuid)
+const removeCard = (card : Card) => {
+  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>
diff --git a/shared/Card.ts b/shared/Card.ts
new file mode 100644
index 0000000..98b555a
--- /dev/null
+++ b/shared/Card.ts
@@ -0,0 +1,8 @@
+export type Card = {
+  uuid: string
+  name: string
+  price: number
+  roles: number
+  sheets: number
+  layers: number
+}
\ No newline at end of file