add: new price card design

Bigger header, icons for deletion and edit, form validation

app/components/Pp/DeleteDialog.vue

@@ -0,0 +1,39 @@
+<template>
+  <dialog
+    ref="dialog"
+    closedby="any"
+  >
+    <form method="dialog">
+      <header class="flex-row padding">
+        Wirklich löschen?
+        <PpButton class="round text">
+          <Icon name="uil:times" mode="svg" />
+        </PpButton>
+      </header>
+      <main>
+        <div class="padding flex-col">
+          <p>Bist du dir sicher, dass du diesen Eintrag löschen möchtest?</p>
+        </div>
+      </main>
+      <footer class="flex-row padding">
+          <PpButton class="text">
+            <span>Abbrechen</span>
+          </PpButton>
+        <PpButton class="danger raised" @click="$emit('delete')">
+          <span>Löschen</span>
+        </PpButton>
+      </footer>
+    </form>
+  </dialog>
+</template>
+
+<script setup lang="ts">
+type Props = {
+  currentCardIndex : number
+}
+
+defineProps<Props>()
+defineEmits(['delete'])
+
+
+</script>

app/components/Pp/FormInput.vue

@@ -1,6 +1,7 @@
 <template>
-  <div class="Input flex-col">
-    <input
+  <div class="Input">
+    <div class="input-wrapper flex-col">
+      <input
         v-model="text"
         :type="type"
         :id="id"
@@ -10,8 +11,10 @@
         :required="required"
         placeholder=" "
         @blur="emit('blur')"
-    />
-    <label :for="id">{{ label }}</label>
+      />
+      <label :for="id">{{ label }}</label>
+    </div>
+    <span v-if="message">{{ message }}</span>
   </div>
 </template>
 
@@ -22,6 +25,7 @@ type Props = {
   min ?: number
   step ?: number
   required ?: boolean
+  message ?: string
   label : string
   id : string
 }
@@ -31,9 +35,6 @@ const {
   required = false,
   step = 0.01,
   min = 1,
-  max,
-  label,
-  id,
 } = defineProps<Props>()
 
 const emit = defineEmits(['blur'])

app/components/Pp/PriceCard.vue

@@ -7,11 +7,16 @@
     <header class="padding">
       <div class="name-price">
         <span>{{ card.name || 'Kein Name' }}</span>
-        <span>{{ intl.format(card.price)}}</span>
+        <span>{{ intl.format(+replaceComma(card.price))}}</span>
+      </div>
+      <div class="flex-row gap-default">
+        <PpButton class="icon-button" @click="update()">
+          <Icon class="icon" name="uil:pen" mode="svg" />
+        </PpButton>
+        <PpButton class="icon-button" @click="deleteCard()">
+          <Icon class="icon" name="uil:times" mode="svg" />
+        </PpButton>
       </div>
-      <PpButton class="text-white" @click="update()">
-        <Icon class="icon" name="uil:ellipsis-v" mode="svg" />
-      </PpButton>
     </header>
     <main class="wrapper padding">
       <div class="info flex-col">
@@ -60,8 +65,5 @@ const intl = Intl.NumberFormat('de-DE', {
 
 const update = () => emit('update')
 
-const deleteCard = async () => {
-  root.value?.addEventListener('transitionend', () => emit('remove'))
-  deleting.value = true
-}
+const deleteCard = () => emit('remove')
 </script>

app/components/Pp/PriceCardDialog.vue

@@ -0,0 +1,129 @@
+<template>
+  <dialog
+    ref="dialog"
+    closedby="any"
+  >
+    <form method="dialog">
+      <header class="flex-row padding">
+        {{ cardLabel }}
+        <PpButton class="round text">
+          <Icon name="uil:times" mode="svg" />
+        </PpButton>
+      </header>
+    </form>
+      <main v-if="currentCard">
+        <div class="padding flex-col">
+          <div class="flex-row gap-default">
+            <PpFormInput
+              v-model="currentCard.name"
+              id="card_name"
+              label="Name"
+              :class="{'error': !validFields.name }"
+              :message="!validFields.name ? 'Feld darf nicht leer sein.' : ''"
+            />
+            <PpFormInput
+              v-model="currentCard.price"
+              id="card_price"
+              label="Preis"
+              :class="{'error': !validFields.price }"
+              :message="!validFields.price ? 'Muss eine Zahl sein.' : ''"
+            />
+          </div>
+          <div class="flex-row gap-default">
+            <PpFormInput
+              v-model="currentCard.roles"
+              id="card_roles"
+              label="Rollen"
+              :class="{'error': !validFields.roles }"
+              :message="!validFields.roles ? 'Muss eine Ganzzahl sein.' : ''"
+            />
+            <PpFormInput
+              v-model="currentCard.sheets"
+              id="card_sheets"
+              label="Blätter"
+              :class="{'error': !validFields.sheets }"
+              :message="!validFields.sheets ? 'Muss eine Ganzzahl sein.' : ''"
+            />
+            <PpFormInput
+              v-model="currentCard.layers"
+              id="card_layers"
+              label="Lagen"
+              :class="{'error': !validFields.layers }"
+              :message="!validFields.layers ? 'Muss eine Ganzzahl sein.' : ''"
+            />
+          </div>
+        </div>
+      </main>
+      <footer class="flex-row padding">
+        <form method="dialog">
+          <PpButton class="danger text">
+            <span>Abbrechen</span>
+          </PpButton>
+        </form>
+        <PpButton class="raised" @click="validate">
+          <span>{{ cardLabel }}</span>
+        </PpButton>
+      </footer>
+  </dialog>
+</template>
+
+<script setup lang="ts">
+import type { Card } from '../../../shared/Card'
+
+type Props = {
+  currentCardIndex : number
+  currentCard ?: Card
+}
+
+const { currentCardIndex, currentCard } = defineProps<Props>()
+const emit = defineEmits(['update'])
+
+const dialog = useTemplateRef<HTMLDialogElement>('dialog')
+const cardLabel = computed(() => currentCardIndex > -1 ? 'Bearbeiten' : 'Hinzufügen')
+
+const checkPrice = () => {
+  if (!currentCard) { return false }
+  if (currentCard.price.length === 0) { return false }
+  const price = +replaceComma(currentCard.price)
+  return !isNaN(price)
+}
+
+const checkIfInteger = (toBeNumber : string) => {
+  if (toBeNumber.length === 0) { return false }
+  if (toBeNumber.includes(',') || toBeNumber.includes('.')) { return false }
+  return !isNaN(+toBeNumber)
+}
+
+const validFields = reactive({
+  name: true,
+  price: true,
+  roles: true,
+  sheets: true,
+  layers: true,
+})
+
+const validate = () => {
+  if (!currentCard) { return }
+
+  validFields.name = currentCard.name.length > 0
+  validFields.price = checkPrice()
+  validFields.roles = checkIfInteger(currentCard.roles)
+  validFields.sheets = checkIfInteger(currentCard.sheets)
+  validFields.layers = checkIfInteger(currentCard.layers)
+
+  if (Object.values(validFields).every(value => value)) {
+    emit('update')
+    dialog.value?.close()
+  }
+}
+
+onMounted(() => {
+  dialog.value?.addEventListener('close', () => {
+    validFields.name = true
+    validFields.price = true
+    validFields.roles = true
+    validFields.sheets = true
+    validFields.layers = true
+  })
+})
+</script>