add: new price card design

Bigger header, icons for deletion and edit, form validation

app/pages/index.vue

@@ -1,38 +1,15 @@
 <template>
-  <dialog
-      ref="modal"
-      closedby="any"
-  >
-    <form method="dialog">
-      <header class="flex-row padding">
-        {{ currentCardIndex! > -1 ? 'Bearbeiten' : 'Hinzufügen'}}
-        <PpButton class="round text">
-          <Icon name="uil:times" mode="svg" />
-        </PpButton>
-      </header>
-      <main v-if="currentCard">
-        <div class="padding flex-col">
-          <div class="flex-row gap-default">
-            <PpFormInput v-model="currentCard.name" label="Name" id="card_name" />
-            <PpFormInput v-model="currentCard.price" label="Preis" id="card_price" />
-          </div>
-          <div class="flex-row gap-default">
-            <PpFormInput v-model="currentCard.roles" label="Rollen" id="card_roles" />
-            <PpFormInput v-model="currentCard.sheets" label="Blätter" id="card_sheets" />
-            <PpFormInput v-model="currentCard.layers" label="Lagen" id="card_layers" />
-          </div>
-        </div>
-      </main>
-      <footer class="flex-row padding">
-        <PpButton class="danger text">
-          <span>Abbrechen</span>
-        </PpButton>
-        <PpButton class="raised" @click="updateCard()">
-          <span>{{ currentCardIndex! > -1 ? 'Bearbeiten' : 'Hinzufügen'}}</span>
-        </PpButton>
-      </footer>
-    </form>
-  </dialog>
+  <PpDeleteDialog
+    ref="deleteModal"
+    :current-card-index="currentCardIndex"
+    @delete="removeCard(currentCardIndex)"
+  />
+  <PpPriceCardDialog
+    ref="modal"
+    :current-card="currentCard"
+    :current-card-index="currentCardIndex"
+    @update="updateCard()"
+  />
   <section class="content flex-col">
     <aside class="filter-bar">
       <PpButtonGroup
@@ -46,8 +23,8 @@
         :key="card.uuid"
         :deletable="cards.length > 1"
         :card="card"
-        @update="openModal(index)"
-        @remove="removeCard(index)"
+        @update="openModal(false, index)"
+        @remove="openDeleteModal()"
       />
     </div>
   </section>
@@ -61,7 +38,7 @@
         aria-hidden="true"
       />
     </PpButton>
-    <PpButton class="mini-button text-white" @click="openModal()">
+    <PpButton class="mini-button text-white" @click="openModal(true, -1)">
       <Icon class="icon" name="uil:plus" mode="svg" />
       <span>Hinzufügen</span>
     </PpButton>
@@ -71,20 +48,22 @@
 <script setup lang="ts">
 import type { Card } from '../../shared/Card'
 import type { Button } from '../../shared/ButtonGroup'
+import { PpPriceCardDialog, PpDeleteDialog } from '#components'
 
 const currentSort = ref(0)
 const isDirty = ref(false)
 const currentCard = ref<Card>()
 const currentCardIndex = ref<number>(-1)
-const modal = useTemplateRef<HTMLDialogElement>('modal')
+const modal = useTemplateRef<typeof PpPriceCardDialog>('modal')
+const deleteModal = useTemplateRef<typeof PpDeleteDialog>('deleteModal')
 
 const createCard = (uuid : string) : Card => ({
   uuid,
   name: '',
-  price: 0,
-  roles: 0,
-  sheets: 0,
-  layers: 0,
+  price: '',
+  roles: '',
+  sheets: '',
+  layers: '',
   ppr: 0,
   pps: 0,
   ppl: 0,
@@ -98,6 +77,7 @@ const addCard = (card : Card) => {
   const price = calculate(card)
   cards.value.unshift({ ...card, ...price })
   isDirty.value = true
+  updateLocalStorage()
 }
 
 const removeCard = (index : number) => {
@@ -109,6 +89,7 @@ const removeCard = (index : number) => {
 const updateCard = () => {
   if (currentCardIndex.value === -1) {
     addCard(currentCard.value!)
+    return
   }
 
   const price = calculate(currentCard.value!)
@@ -118,16 +99,24 @@ const updateCard = () => {
   updateLocalStorage()
 }
 
-const openModal = (index ?: number) => {
-  modal.value?.showModal()
-  if (index !== undefined && index > -1) {
-    currentCardIndex.value = index
-    currentCard.value = { ...cards.value[index]! }
+const openModal = (createNew : boolean, index : number) => {
+  if (createNew) {
+    currentCardIndex.value = -1
+    currentCard.value = createCard(crypto.randomUUID())
+
+    modal.value?.$el.showModal()
     return
   }
 
-  currentCardIndex.value = -1
-  currentCard.value = createCard(crypto.randomUUID())
+  currentCardIndex.value = index
+  currentCard.value = { ...cards.value[index]! }
+
+  modal.value?.$el.showModal()
+  return
+}
+
+const openDeleteModal = () => {
+  deleteModal.value?.$el.showModal()
 }
 
 const updateLocalStorage = () => {
@@ -176,9 +165,9 @@ const sort = (index : number) => {
 }
 
 const calculate = (card : Card) => {
-  const ppr = card.price / card.roles
-  const pps = (ppr / card.sheets) * 10
-  const ppl = (pps / card.layers) * 10
+  const ppr = +replaceComma(card.price) / +card.roles
+  const pps = (ppr / +card.sheets) * 10
+  const ppl = (pps / +card.layers) * 10
 
   return { ppr, pps, ppl }
 }