webfussel/propapier
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: a lot of design flaws

Browse source 
Info text when empty, new inputs, minimum height of content fixed
This commit is contained in:
Fiona Lena Urban 2025-05-11 11:07:19 +02:00
parent cef5330567
commit 1504b8bfe9
21 changed files with 970 additions and 458 deletions
Download patch file Download diff file Expand all files Collapse all files

145
app/components/Pp/PriceCardDialog.vue
View file

@ -1,64 +1,72 @@
<template>
<dialog
ref="dialog"
closedby="any"
>
<form method="dialog">
<header class="flex-row padding">
{{ currentCardIndex > -1 ? 'Bearbeiten' : 'Neues Hinzufügen' }}
<PpButton class="round text">
<Icon name="uil:times" mode="svg" />
</PpButton>
</header>
</form>
<dialog ref="dialog" closedby="any">
<div class="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="padding flex-col">
<div class="flex-col gap-default">
<div class="flex-row gap-default">
<PpFormInput
<PpFormTextField
v-model="currentCard.name"
id="card_name"
label="Name"
:class="{'error': !validFields.name }"
icon="uil:user"
:class="{ error: !validFields.name }"
:message="!validFields.name ? 'Feld darf nicht leer sein.' : ''"
@input="validFields.name = true"
/>
<PpFormInput
<PpFormTextField
v-model="currentCard.price"
id="card_price"
label="Preis"
icon="uil:euro"
mode="decimal"
:class="{'error': !validFields.price }"
:class="{ error: !validFields.price }"
:message="!validFields.price ? 'Muss eine Zahl sein.' : ''"
@input="validFields.price = true"
/>
</div>
<div class="flex-row gap-default">
<PpFormInput
<PpFormTextField
v-model="currentCard.roles"
id="card_roles"
label="Rollen"
icon="uil:toilet-paper"
mode="decimal"
:class="{'error': !validFields.roles }"
:class="{ error: !validFields.roles }"
:message="!validFields.roles ? 'Muss eine Ganzzahl sein.' : ''"
@input="validFields.roles = true"
/>
<PpFormInput
<PpFormTextField
v-model="currentCard.sheets"
id="card_sheets"
label="Blätter"
label="Blatt"
icon="uil:file-landscape"
mode="decimal"
:class="{'error': !validFields.sheets }"
:class="{ error: !validFields.sheets }"
:message="!validFields.sheets ? 'Muss eine Ganzzahl sein.' : ''"
@input="validFields.sheets = true"
/>
<PpFormInput
<PpFormTextField
v-model="currentCard.layers"
id="card_layers"
label="Lagen"
icon="uil:layer-group"
mode="decimal"
:class="{'error': !validFields.layers }"
:class="{ error: !validFields.layers }"
:message="!validFields.layers ? 'Muss eine Ganzzahl sein.' : ''"
@input="validFields.layers = true"
/>
</div>
</div>
</main>
<footer class="flex-row padding">
<footer class="flex-row">
<form method="dialog">
<PpButton class="danger text">
<span>Abbrechen</span>
@ -68,34 +76,43 @@
<span>{{ currentCardIndex > -1 ? 'Übernehmen' : 'Hinzufügen' }}</span>
</PpButton>
</footer>
</div>
</dialog>
</template>
<script setup lang="ts">
import type { Card } from '../../../shared/Card'
import type { Card } from '../../../shared/Card';
type Props = {
currentCardIndex : number
currentCard ?: Card
}
currentCardIndex: number;
currentCard?: Card;
};
const { currentCardIndex, currentCard } = defineProps<Props>()
const emit = defineEmits(['update'])
const { currentCardIndex, currentCard } = defineProps<Props>();
const emit = defineEmits(['update']);
const dialog = useTemplateRef<HTMLDialogElement>('dialog')
const dialog = useTemplateRef<HTMLDialogElement>("dialog");
const checkPrice = () => {
if (!currentCard) { return false }
if (currentCard.price.length === 0) { return false }
const price = +replaceComma(currentCard.price)
return !isNaN(price)
}
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 checkIfInteger = (toBeNumber: string) => {
if (toBeNumber.length === 0) {
return false;
}
if (toBeNumber.includes(",") || toBeNumber.includes(".")) {
return false;
}
return !isNaN(+toBeNumber);
};
const validFields = reactive({
name: true,
@ -103,30 +120,32 @@ const validFields = reactive({
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()
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>
validFields.name = true;
validFields.price = true;
validFields.roles = true;
validFields.sheets = true;
validFields.layers = true;
});
});
</script>