129 lines
No EOL
3.7 KiB
Vue
129 lines
No EOL
3.7 KiB
Vue
<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> |