add: better card handling

Better handling of cards, safe to localStorage

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>