add: new price card design

Bigger header, icons for deletion and edit, form validation

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>