145 lines
4.4 KiB
Vue
145 lines
4.4 KiB
Vue
<template>
|
|
<dialog ref="dialog" closedby="none">
|
|
<div class="wrapper" ref="wrapper">
|
|
<form method="dialog">
|
|
<header class="flex-row">
|
|
{{ currentCardIndex > -1 ? 'Bearbeiten' : 'Neues hinzufügen' }}
|
|
<PpButton class="round text">
|
|
<Icon name="uil:times" mode="svg" />
|
|
</PpButton>
|
|
</header>
|
|
</form>
|
|
<main v-if="currentCard">
|
|
<div class="flex-col gap-default">
|
|
<div class="flex-row gap-default">
|
|
<PpFormTextField
|
|
v-model="currentCard.name"
|
|
id="card_name"
|
|
label="Name"
|
|
icon="uil:user"
|
|
:class="{ error: !validFields.name }"
|
|
:message="!validFields.name ? 'Feld darf nicht leer sein.' : ''"
|
|
@input="validFields.name = true"
|
|
/>
|
|
<PpFormTextField
|
|
v-model="currentCard.price"
|
|
id="card_price"
|
|
label="Preis"
|
|
icon="uil:euro"
|
|
mode="decimal"
|
|
:class="{ error: !validFields.price }"
|
|
:message="!validFields.price ? 'Muss eine Zahl sein.' : ''"
|
|
@input="validFields.price = true"
|
|
/>
|
|
</div>
|
|
<div class="flex-row gap-default">
|
|
<PpFormTextField
|
|
v-model="currentCard.roles"
|
|
id="card_roles"
|
|
label="Rollen"
|
|
icon="uil:toilet-paper"
|
|
mode="decimal"
|
|
:class="{ error: !validFields.roles }"
|
|
:message="!validFields.roles ? 'Muss eine Ganzzahl sein.' : ''"
|
|
@input="validFields.roles = true"
|
|
/>
|
|
<PpFormTextField
|
|
v-model="currentCard.sheets"
|
|
id="card_sheets"
|
|
label="Blatt"
|
|
icon="uil:file-landscape"
|
|
mode="decimal"
|
|
:class="{ error: !validFields.sheets }"
|
|
:message="!validFields.sheets ? 'Muss eine Ganzzahl sein.' : ''"
|
|
@input="validFields.sheets = true"
|
|
/>
|
|
<PpFormTextField
|
|
v-model="currentCard.layers"
|
|
id="card_layers"
|
|
label="Lagen"
|
|
icon="uil:layer-group"
|
|
mode="decimal"
|
|
:class="{ error: !validFields.layers }"
|
|
:message="!validFields.layers ? 'Muss eine Ganzzahl sein.' : ''"
|
|
@input="validFields.layers = true"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<footer class="flex-row">
|
|
<form method="dialog">
|
|
<PpButton class="danger text">
|
|
<span>Abbrechen</span>
|
|
</PpButton>
|
|
</form>
|
|
<PpButton class="raised" @click="validate">
|
|
<span>{{ currentCardIndex > -1 ? 'Übernehmen' : 'Hinzufügen' }}</span>
|
|
</PpButton>
|
|
</footer>
|
|
</div>
|
|
</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 wrapper = useTemplateRef<HTMLElement>('wrapper')
|
|
|
|
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
|
|
})
|
|
|
|
onClickOutside(wrapper, () => dialog.value?.close())
|
|
})
|
|
</script>
|