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

add: new price card design

Browse source 
Bigger header, icons for deletion and edit, form validation
This commit is contained in:
Fiona Lena Urban 2025-05-05 20:40:17 +02:00
parent 7aa21c1c19
commit 8f924151da
11 changed files with 290 additions and 101 deletions
Download patch file Download diff file Expand all files Collapse all files

9
app/assets/styles/button.css
View file

@ -20,6 +20,11 @@
box-shadow: var(--box-shadow-z2);
padding: .5em 1.5em;
border-radius: var(--radius-default);
&.danger {
--background: var(--color-red);
--color: var(--color-white);
}
}
&.text {
@ -32,6 +37,10 @@
--background: rgba(0, 0, 0, 0.05);
}
&.white {
--color: var(--color-white);
}
&.danger {
--color: var(--color-red);

72
app/assets/styles/formInput.css
View file

@ -1,40 +1,52 @@
.Input {
position: relative;
flex: 25% 1 0;
border: 2px solid var(--color-blue);
border-radius: var(--radius-default);
overflow: hidden;
transition: var(--transition-default);
outline: 0 solid var(--color-white);
&.error {
& .input-wrapper {
border-color: var(--color-red);
outline-width: 2px;
}
& label {
position: absolute;
font-size: .8em;
top: .3rem;
left: .5rem;
transition: var(--transition-default);
}
& input {
all: unset;
width: calc(100% - 1rem);
padding: 1.3rem .5rem .5rem .5rem;
background: var(--color-white);
&[type="number"] {
text-align: right;
& span {
color: var(--color-red);
}
}
&.error {
border-color: var(--color-red);
outline-width: 2px;
& span {
font-size: .65em;
}
& input:focus,
& input:not(:placeholder-shown) {
& + label {
color: var(--color-main);
& .input-wrapper {
position: relative;
flex: 25% 1 0;
border: 2px solid var(--color-blue);
border-radius: var(--radius-default);
overflow: hidden;
transition: var(--transition-default);
outline: 0 solid var(--color-white);
& label {
position: absolute;
font-size: .8em;
top: .3rem;
left: .5rem;
transition: var(--transition-default);
}
& input {
all: unset;
width: calc(100% - 1rem);
padding: 1.3rem .5rem .5rem .5rem;
background: var(--color-white);
&[type="number"] {
text-align: right;
}
}
& input:focus,
& input:not(:placeholder-shown) {
& + label {
color: var(--color-main);
}
}
}
}

6
app/assets/styles/priceCard.css
View file

@ -16,6 +16,12 @@
display: flex;
justify-content: space-between;
align-items: center;
font-size: 1.5rem;
& .icon {
font-size: 1.2rem;
cursor: pointer;
}
& > .name-price {
display: flex;

39
app/components/Pp/DeleteDialog.vue Normal file
View file

@ -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>

15
app/components/Pp/FormInput.vue
View file

@ -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'])

18
app/components/Pp/PriceCard.vue
View file

@ -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>

129
app/components/Pp/PriceCardDialog.vue Normal file
View file

@ -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>

93
app/pages/index.vue
View file

@ -1,38 +1,15 @@
<template>
<dialog
ref="modal"
closedby="any"
>
<form method="dialog">
<header class="flex-row padding">
{{ currentCardIndex! > -1 ? 'Bearbeiten' : 'Hinzufügen'}}
<PpButton class="round text">
<Icon name="uil:times" mode="svg" />
</PpButton>
</header>
<main v-if="currentCard">
<div class="padding flex-col">
<div class="flex-row gap-default">
<PpFormInput v-model="currentCard.name" label="Name" id="card_name" />
<PpFormInput v-model="currentCard.price" label="Preis" id="card_price" />
</div>
<div class="flex-row gap-default">
<PpFormInput v-model="currentCard.roles" label="Rollen" id="card_roles" />
<PpFormInput v-model="currentCard.sheets" label="Blätter" id="card_sheets" />
<PpFormInput v-model="currentCard.layers" label="Lagen" id="card_layers" />
</div>
</div>
</main>
<footer class="flex-row padding">
<PpButton class="danger text">
<span>Abbrechen</span>
</PpButton>
<PpButton class="raised" @click="updateCard()">
<span>{{ currentCardIndex! > -1 ? 'Bearbeiten' : 'Hinzufügen'}}</span>
</PpButton>
</footer>
</form>
</dialog>
<PpDeleteDialog
ref="deleteModal"
:current-card-index="currentCardIndex"
@delete="removeCard(currentCardIndex)"
/>
<PpPriceCardDialog
ref="modal"
:current-card="currentCard"
:current-card-index="currentCardIndex"
@update="updateCard()"
/>
<section class="content flex-col">
<aside class="filter-bar">
<PpButtonGroup
@ -46,8 +23,8 @@
:key="card.uuid"
:deletable="cards.length > 1"
:card="card"
@update="openModal(index)"
@remove="removeCard(index)"
@update="openModal(false, index)"
@remove="openDeleteModal()"
/>
</div>
</section>
@ -61,7 +38,7 @@
aria-hidden="true"
/>
</PpButton>
<PpButton class="mini-button text-white" @click="openModal()">
<PpButton class="mini-button text-white" @click="openModal(true, -1)">
<Icon class="icon" name="uil:plus" mode="svg" />
<span>Hinzufügen</span>
</PpButton>
@ -71,20 +48,22 @@
<script setup lang="ts">
import type { Card } from '../../shared/Card'
import type { Button } from '../../shared/ButtonGroup'
import { PpPriceCardDialog, PpDeleteDialog } from '#components'
const currentSort = ref(0)
const isDirty = ref(false)
const currentCard = ref<Card>()
const currentCardIndex = ref<number>(-1)
const modal = useTemplateRef<HTMLDialogElement>('modal')
const modal = useTemplateRef<typeof PpPriceCardDialog>('modal')
const deleteModal = useTemplateRef<typeof PpDeleteDialog>('deleteModal')
const createCard = (uuid : string) : Card => ({
uuid,
name: '',
price: 0,
roles: 0,
sheets: 0,
layers: 0,
price: '',
roles: '',
sheets: '',
layers: '',
ppr: 0,
pps: 0,
ppl: 0,
@ -98,6 +77,7 @@ const addCard = (card : Card) => {
const price = calculate(card)
cards.value.unshift({ ...card, ...price })
isDirty.value = true
updateLocalStorage()
}
const removeCard = (index : number) => {
@ -109,6 +89,7 @@ const removeCard = (index : number) => {
const updateCard = () => {
if (currentCardIndex.value === -1) {
addCard(currentCard.value!)
return
}
const price = calculate(currentCard.value!)
@ -118,16 +99,24 @@ const updateCard = () => {
updateLocalStorage()
}
const openModal = (index ?: number) => {
modal.value?.showModal()
if (index !== undefined && index > -1) {
currentCardIndex.value = index
currentCard.value = { ...cards.value[index]! }
const openModal = (createNew : boolean, index : number) => {
if (createNew) {
currentCardIndex.value = -1
currentCard.value = createCard(crypto.randomUUID())
modal.value?.$el.showModal()
return
}
currentCardIndex.value = -1
currentCard.value = createCard(crypto.randomUUID())
currentCardIndex.value = index
currentCard.value = { ...cards.value[index]! }
modal.value?.$el.showModal()
return
}
const openDeleteModal = () => {
deleteModal.value?.$el.showModal()
}
const updateLocalStorage = () => {
@ -176,9 +165,9 @@ const sort = (index : number) => {
}
const calculate = (card : Card) => {
const ppr = card.price / card.roles
const pps = (ppr / card.sheets) * 10
const ppl = (pps / card.layers) * 10
const ppr = +replaceComma(card.price) / +card.roles
const pps = (ppr / +card.sheets) * 10
const ppl = (pps / +card.layers) * 10
return { ppr, pps, ppl }
}

1
app/utils/number.ts Normal file
View file

@ -0,0 +1 @@
export const replaceComma = (value: string) => value.replace(',', '.');

1
package.json
View file

@ -8,6 +8,7 @@
"dev:expose": "nuxt dev --host",
"generate": "nuxt generate",
"preview": "nuxt preview",
"prepare": "nuxt prepare",
"postinstall": "nuxt prepare"
},
"dependencies": {

8
shared/Card.ts
View file

@ -1,10 +1,10 @@
export type Card = {
uuid: string
name: string
price: number
roles: number
sheets: number
layers: number
price: string
roles: string
sheets: string
layers: string
ppr: number
pps: number
ppl: number