add: new price card
Added new price card design, wip
This commit is contained in:
parent
9d686e2af2
commit
7aa21c1c19
7 changed files with 194 additions and 139 deletions
|
|
@ -13,9 +13,42 @@
|
|||
transition: var(--transition-default);
|
||||
outline: none;
|
||||
border: none;
|
||||
background: transparent;
|
||||
background: var(--background);
|
||||
color: var(--color);
|
||||
|
||||
&.raised {
|
||||
box-shadow: var(--box-shadow-z2);
|
||||
padding: .5em 1.5em;
|
||||
border-radius: var(--radius-default);
|
||||
}
|
||||
|
||||
&.text {
|
||||
--background: transparent;
|
||||
--color: var(--color-black);
|
||||
padding: .5em 1.5em;
|
||||
border-radius: var(--radius-default);
|
||||
|
||||
&:hover {
|
||||
--background: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
&.danger {
|
||||
--color: var(--color-red);
|
||||
|
||||
&:hover {
|
||||
--background: rgba(255, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.round {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 100%;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
&.cta {
|
||||
background: var(--background);
|
||||
color: var(--color);
|
||||
|
|
|
|||
|
|
@ -9,16 +9,15 @@
|
|||
|
||||
& label {
|
||||
position: absolute;
|
||||
font-size: .8em;
|
||||
top: .3rem;
|
||||
left: .5rem;
|
||||
font-size: 1.5em;
|
||||
top: .7rem;
|
||||
transition: var(--transition-default);
|
||||
}
|
||||
|
||||
& input {
|
||||
all: unset;
|
||||
width: calc(100% - 1rem);
|
||||
font-size: 1.2em;
|
||||
padding: 1.3rem .5rem .5rem .5rem;
|
||||
background: var(--color-white);
|
||||
|
||||
|
|
@ -27,7 +26,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
&:has(input:invalid) {
|
||||
&.error {
|
||||
border-color: var(--color-red);
|
||||
outline-width: 2px;
|
||||
}
|
||||
|
|
@ -36,9 +35,6 @@
|
|||
& input:not(:placeholder-shown) {
|
||||
& + label {
|
||||
color: var(--color-main);
|
||||
font-size: 1em;
|
||||
top: .3rem;
|
||||
right: .5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -10,6 +10,7 @@
|
|||
--color-blue: #2e86de;
|
||||
--color-blue-dark: #1b4b7f;
|
||||
--color-grey: #c7c7c7;
|
||||
--color-black: #333;
|
||||
|
||||
--color-orange: #DE9C2F;
|
||||
|
||||
|
|
@ -128,3 +129,40 @@ body {
|
|||
.gap-default {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.bg-blue {
|
||||
background: var(--color-blue);
|
||||
}
|
||||
|
||||
.bg-white {
|
||||
background: var(--color-white);
|
||||
}
|
||||
|
||||
.padding {
|
||||
gap: 1rem;
|
||||
padding: var(--padding-default);
|
||||
}
|
||||
|
||||
dialog {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 100vw;
|
||||
transform: translate(-50%, -50%);
|
||||
border: none;
|
||||
border-radius: var(--radius-default);
|
||||
|
||||
font-size: 1rem;
|
||||
|
||||
& header {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
& footer {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&::backdrop {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
}
|
||||
|
|
@ -11,83 +11,60 @@
|
|||
opacity: 0;
|
||||
}
|
||||
|
||||
&.folded {
|
||||
grid-template-rows: auto 0fr auto;
|
||||
}
|
||||
|
||||
& > header {
|
||||
color: var(--color-white);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 1.3em;
|
||||
|
||||
& > .name-price {
|
||||
display: flex;
|
||||
gap: .5rem;
|
||||
|
||||
& > span:nth-child(2)::before {
|
||||
content: '•';
|
||||
margin-right: .5rem;
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
|
||||
& > .Button {
|
||||
color: var(--color-white);
|
||||
border: 2px solid var(--color-white);
|
||||
}
|
||||
}
|
||||
|
||||
& aside {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
& footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
& > .Button.delete {
|
||||
scale: 0;
|
||||
}
|
||||
|
||||
& > .Button.deletable {
|
||||
scale: 1;
|
||||
}
|
||||
}
|
||||
|
||||
& .padding {
|
||||
gap: 1rem;
|
||||
padding: var(--padding-default);
|
||||
}
|
||||
|
||||
& .bg-blue {
|
||||
background: var(--color-blue);
|
||||
}
|
||||
|
||||
& .bg-white {
|
||||
background: var(--color-white);
|
||||
}
|
||||
|
||||
& .wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
gap: 1rem;
|
||||
justify-content: space-between;
|
||||
padding-top: 0;
|
||||
|
||||
& > * {
|
||||
flex-basis: 25%;
|
||||
flex-grow: 1;
|
||||
flex-basis: 10%;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
& > .info {
|
||||
color: var(--color-white);
|
||||
align-items: center;
|
||||
gap: .25rem;
|
||||
|
||||
& > .icon {
|
||||
color: var(--color-blue-light);
|
||||
font-size: 2rem;
|
||||
padding: .2rem;
|
||||
}
|
||||
|
||||
& > .price {
|
||||
font-size: 1.2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: .5rem;
|
||||
}
|
||||
|
||||
& > .pro {
|
||||
font-size: .8rem;
|
||||
font-size: .6rem;
|
||||
font-weight: bold;
|
||||
color: var(--color-main-light);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<input
|
||||
v-model="text"
|
||||
:type="type"
|
||||
:id="makeId()"
|
||||
:id="id"
|
||||
:step="step"
|
||||
:min="min"
|
||||
:max="max"
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
placeholder=" "
|
||||
@blur="emit('blur')"
|
||||
/>
|
||||
<label :for="makeId()">{{ label }}</label>
|
||||
<label :for="id">{{ label }}</label>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -24,7 +24,6 @@ type Props = {
|
|||
required ?: boolean
|
||||
label : string
|
||||
id : string
|
||||
uid : string
|
||||
}
|
||||
|
||||
const {
|
||||
|
|
@ -35,12 +34,9 @@ const {
|
|||
max,
|
||||
label,
|
||||
id,
|
||||
uid,
|
||||
} = defineProps<Props>()
|
||||
|
||||
const emit = defineEmits(['blur'])
|
||||
|
||||
const text = defineModel()
|
||||
|
||||
const makeId = () => `${id}_${uid}`
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,64 +1,42 @@
|
|||
<template>
|
||||
<form
|
||||
<article
|
||||
ref="root"
|
||||
class="PriceCard card"
|
||||
:class="{ folded, deleting }"
|
||||
@submit.prevent="() => {}"
|
||||
class="PriceCard card bg-blue"
|
||||
:class="{ deleting }"
|
||||
>
|
||||
<header class="padding bg-blue">
|
||||
{{ card.name || 'Kein Name' }}
|
||||
<PpButton
|
||||
class="icon-button bg-main"
|
||||
@click="folded = !folded"
|
||||
>
|
||||
<Icon :name="folded ? 'uil:sort' : 'uil:sorting'" mode="svg" />
|
||||
<header class="padding">
|
||||
<div class="name-price">
|
||||
<span>{{ card.name || 'Kein Name' }}</span>
|
||||
<span>{{ intl.format(card.price)}}</span>
|
||||
</div>
|
||||
<PpButton class="text-white" @click="update()">
|
||||
<Icon class="icon" name="uil:ellipsis-v" mode="svg" />
|
||||
</PpButton>
|
||||
</header>
|
||||
<aside>
|
||||
<div class="input-wrapper padding bg-blue flex-col">
|
||||
<div class="wrapper">
|
||||
<PpFormInput v-model="card.name" label="Name" id="n" :uid="card.uuid" type="text" @blur="update" />
|
||||
<PpFormInput v-model="card.price" label="Preis" id="p" :uid="card.uuid" type="number" :min="0.01" @blur="calculate" />
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<PpFormInput v-model="card.roles" label="Rollen" id="r" :uid="card.uuid" type="number" :max="150" @blur="calculate" />
|
||||
<PpFormInput v-model="card.sheets" label="Blätter" id="b" :uid="card.uuid" type="number" :max="500" @blur="calculate" />
|
||||
<PpFormInput v-model="card.layers" label="Lagen" id="l" :uid="card.uuid" type="number" :max="10" @blur="calculate" />
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<main class="wrapper padding bg-white">
|
||||
<main class="wrapper padding">
|
||||
<div class="info flex-col">
|
||||
<div class="price">
|
||||
<Icon class="icon" name="uil:toilet-paper" mode="svg" />
|
||||
<span class="price">{{ intl.format(ppr) }}</span>
|
||||
<span class="value">{{ intl.format(card.ppr) }}</span>
|
||||
</div>
|
||||
<span class="pro">Pro 1</span>
|
||||
</div>
|
||||
<div class="info flex-col">
|
||||
<div class="price">
|
||||
<Icon class="icon" name="uil:file-landscape" mode="svg" />
|
||||
<span class="price">{{ intl.format(pps) }}</span>
|
||||
<span class="value">{{ intl.format(card.pps) }}</span>
|
||||
</div>
|
||||
<span class="pro">Pro 10</span>
|
||||
</div>
|
||||
<div class="info flex-col">
|
||||
<div class="price">
|
||||
<Icon class="icon" name="uil:layer-group" mode="svg" />
|
||||
<span class="price">{{ intl.format(ppl) }}</span>
|
||||
<span class="value">{{ intl.format(card.ppl) }}</span>
|
||||
</div>
|
||||
<span class="pro">Pro 100</span>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="padding bg-blue flex-row">
|
||||
<PpButton
|
||||
class="delete"
|
||||
:class="{ deletable }"
|
||||
@click="deleteCard"
|
||||
>
|
||||
<Icon name="uil:trash" mode="svg" />
|
||||
Entfernen
|
||||
</PpButton>
|
||||
<PpButton v-if="false" class="cta white">
|
||||
<Icon name="uil:qrcode-scan" mode="svg" />
|
||||
Scan
|
||||
</PpButton>
|
||||
</footer>
|
||||
</form>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
|
@ -73,43 +51,17 @@ const { card } = defineProps<Props>()
|
|||
const emit = defineEmits(['remove', 'update'])
|
||||
|
||||
const root = ref<HTMLElement>()
|
||||
const folded = ref<boolean>(false)
|
||||
const deleting = ref<boolean>(false)
|
||||
|
||||
const ppr = ref(card.ppr)
|
||||
const pps = ref(card.pps)
|
||||
const ppl = ref(card.ppl)
|
||||
|
||||
const intl = Intl.NumberFormat('de-DE', {
|
||||
style: 'currency',
|
||||
currency: 'EUR',
|
||||
})
|
||||
|
||||
const calculate = () => {
|
||||
if (!card.price || !card.roles) return
|
||||
ppr.value = card.price / card.roles
|
||||
|
||||
if (!card.sheets) {
|
||||
update()
|
||||
return
|
||||
}
|
||||
pps.value = (ppr.value / card.sheets) * 10
|
||||
|
||||
if(!card.layers) {
|
||||
update()
|
||||
return
|
||||
}
|
||||
ppl.value = (pps.value / card.layers) * 10
|
||||
|
||||
update()
|
||||
}
|
||||
|
||||
const update = () => emit('update', { ...card, ppr: ppr.value, pps: pps.value, ppl: ppl.value })
|
||||
const update = () => emit('update')
|
||||
|
||||
const deleteCard = async () => {
|
||||
root.value?.addEventListener('transitionend', () => emit('remove'))
|
||||
deleting.value = true
|
||||
}
|
||||
|
||||
onMounted(() => folded.value = !!card.price)
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,38 @@
|
|||
<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>
|
||||
<section class="content flex-col">
|
||||
<aside class="filter-bar">
|
||||
<PpButtonGroup
|
||||
|
|
@ -12,8 +46,8 @@
|
|||
:key="card.uuid"
|
||||
:deletable="cards.length > 1"
|
||||
:card="card"
|
||||
@update="newCard => updateCard(newCard, index)"
|
||||
@remove="removeCard(card)"
|
||||
@update="openModal(index)"
|
||||
@remove="removeCard(index)"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -27,7 +61,7 @@
|
|||
aria-hidden="true"
|
||||
/>
|
||||
</PpButton>
|
||||
<PpButton class="mini-button text-white" @click="addCard">
|
||||
<PpButton class="mini-button text-white" @click="openModal()">
|
||||
<Icon class="icon" name="uil:plus" mode="svg" />
|
||||
<span>Hinzufügen</span>
|
||||
</PpButton>
|
||||
|
|
@ -40,6 +74,9 @@ import type { Button } from '../../shared/ButtonGroup'
|
|||
|
||||
const currentSort = ref(0)
|
||||
const isDirty = ref(false)
|
||||
const currentCard = ref<Card>()
|
||||
const currentCardIndex = ref<number>(-1)
|
||||
const modal = useTemplateRef<HTMLDialogElement>('modal')
|
||||
|
||||
const createCard = (uuid : string) : Card => ({
|
||||
uuid,
|
||||
|
|
@ -57,23 +94,41 @@ const cards = useState('cards', () => [
|
|||
createCard(crypto.randomUUID()),
|
||||
])
|
||||
|
||||
const addCard = () => {
|
||||
cards.value.unshift(createCard(crypto.randomUUID()))
|
||||
const addCard = (card : Card) => {
|
||||
const price = calculate(card)
|
||||
cards.value.unshift({ ...card, ...price })
|
||||
isDirty.value = true
|
||||
}
|
||||
|
||||
const removeCard = (card : Card) => {
|
||||
cards.value = cards.value.filter(element => element.uuid !== card.uuid)
|
||||
const removeCard = (index : number) => {
|
||||
cards.value.splice(index, 1)
|
||||
isDirty.value = true
|
||||
updateLocalStorage()
|
||||
}
|
||||
|
||||
const updateCard = (card : Card, index : number) => {
|
||||
cards.value[index] = card
|
||||
const updateCard = () => {
|
||||
if (currentCardIndex.value === -1) {
|
||||
addCard(currentCard.value!)
|
||||
}
|
||||
|
||||
const price = calculate(currentCard.value!)
|
||||
const newCard = { ...currentCard.value!, ...price }
|
||||
cards.value.splice(currentCardIndex.value, 1, newCard)
|
||||
isDirty.value = true
|
||||
updateLocalStorage()
|
||||
}
|
||||
|
||||
const openModal = (index ?: number) => {
|
||||
modal.value?.showModal()
|
||||
if (index !== undefined && index > -1) {
|
||||
currentCardIndex.value = index
|
||||
currentCard.value = { ...cards.value[index]! }
|
||||
return
|
||||
}
|
||||
|
||||
currentCardIndex.value = -1
|
||||
currentCard.value = createCard(crypto.randomUUID())
|
||||
}
|
||||
|
||||
const updateLocalStorage = () => {
|
||||
localStorage.setItem('cards', JSON.stringify(cards.value))
|
||||
|
|
@ -120,6 +175,14 @@ const sort = (index : number) => {
|
|||
isDirty.value = false
|
||||
}
|
||||
|
||||
const calculate = (card : Card) => {
|
||||
const ppr = card.price / card.roles
|
||||
const pps = (ppr / card.sheets) * 10
|
||||
const ppl = (pps / card.layers) * 10
|
||||
|
||||
return { ppr, pps, ppl }
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
const cardsFromStorage = JSON.parse(localStorage.getItem('cards') ?? '[]')
|
||||
cards.value = cardsFromStorage.length !== 0 ? cardsFromStorage : cards.value
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue