add: new price card

Added new price card design, wip

app/pages/index.vue

@@ -1,4 +1,38 @@
 <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>
   <section class="content flex-col">
     <aside class="filter-bar">
       <PpButtonGroup
@@ -12,8 +46,8 @@
         :key="card.uuid"
         :deletable="cards.length > 1"
         :card="card"
-        @update="newCard => updateCard(newCard, index)"
-        @remove="removeCard(card)"
+        @update="openModal(index)"
+        @remove="removeCard(index)"
       />
     </div>
   </section>
@@ -27,7 +61,7 @@
         aria-hidden="true"
       />
     </PpButton>
-    <PpButton class="mini-button text-white" @click="addCard">
+    <PpButton class="mini-button text-white" @click="openModal()">
       <Icon class="icon" name="uil:plus" mode="svg" />
       <span>Hinzufügen</span>
     </PpButton>
@@ -40,6 +74,9 @@ import type { Button } from '../../shared/ButtonGroup'
 
 const currentSort = ref(0)
 const isDirty = ref(false)
+const currentCard = ref<Card>()
+const currentCardIndex = ref<number>(-1)
+const modal = useTemplateRef<HTMLDialogElement>('modal')
 
 const createCard = (uuid : string) : Card => ({
   uuid,
@@ -57,23 +94,41 @@ const cards = useState('cards', () => [
   createCard(crypto.randomUUID()),
 ])
 
-const addCard = () => {
-  cards.value.unshift(createCard(crypto.randomUUID()))
+const addCard = (card : Card) => {
+  const price = calculate(card)
+  cards.value.unshift({ ...card, ...price })
   isDirty.value = true
 }
 
-const removeCard = (card : Card) => {
-  cards.value = cards.value.filter(element => element.uuid !== card.uuid)
+const removeCard = (index : number) => {
+  cards.value.splice(index, 1)
   isDirty.value = true
   updateLocalStorage()
 }
 
-const updateCard = (card : Card, index : number) => {
-  cards.value[index] = card
+const updateCard = () => {
+  if (currentCardIndex.value === -1) {
+    addCard(currentCard.value!)
+  }
+
+  const price = calculate(currentCard.value!)
+  const newCard = { ...currentCard.value!, ...price }
+  cards.value.splice(currentCardIndex.value, 1, newCard)
   isDirty.value = true
   updateLocalStorage()
 }
 
+const openModal = (index ?: number) => {
+  modal.value?.showModal()
+  if (index !== undefined && index > -1) {
+    currentCardIndex.value = index
+    currentCard.value = { ...cards.value[index]! }
+    return
+  }
+
+  currentCardIndex.value = -1
+  currentCard.value = createCard(crypto.randomUUID())
+}
 
 const updateLocalStorage = () => {
   localStorage.setItem('cards', JSON.stringify(cards.value))
@@ -120,6 +175,14 @@ const sort = (index : number) => {
   isDirty.value = false
 }
 
+const calculate = (card : Card) => {
+  const ppr = card.price / card.roles
+  const pps = (ppr / card.sheets) * 10
+  const ppl = (pps / card.layers) * 10
+
+  return { ppr, pps, ppl }
+}
+
 onMounted(() => {
   const cardsFromStorage = JSON.parse(localStorage.getItem('cards') ?? '[]')
   cards.value = cardsFromStorage.length !== 0 ? cardsFromStorage : cards.value