130 lines
2.9 KiB
Vue
Executable file
130 lines
2.9 KiB
Vue
Executable file
<template>
|
|
<section class="content flex-col">
|
|
<aside class="filter-bar">
|
|
<PpButtonGroup
|
|
:buttons="filterButtons"
|
|
@click="sort"
|
|
/>
|
|
</aside>
|
|
<div class="pc-wrapper flex-col" role="list">
|
|
<PpPriceCard
|
|
v-for="(card, index) in cards"
|
|
:key="card.uuid"
|
|
:deletable="cards.length > 1"
|
|
:card="card"
|
|
@update="newCard => updateCard(newCard, index)"
|
|
@remove="removeCard(card)"
|
|
/>
|
|
</div>
|
|
</section>
|
|
<PpToolbar>
|
|
<PpButton class="mini-button text-white" @click="sort(currentSort)">
|
|
<Icon class="icon" name="uil:refresh" mode="svg" />
|
|
<span>Neu sortieren</span>
|
|
<span
|
|
class="dot"
|
|
:class="{ visible : isDirty}"
|
|
aria-hidden="true"
|
|
/>
|
|
</PpButton>
|
|
<PpButton class="mini-button text-white" @click="addCard">
|
|
<Icon class="icon" name="uil:plus" mode="svg" />
|
|
<span>Hinzufügen</span>
|
|
</PpButton>
|
|
</PpToolbar>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { Card } from '../../shared/Card'
|
|
import type { Button } from '../../shared/ButtonGroup'
|
|
|
|
const currentSort = ref(0)
|
|
const isDirty = ref(false)
|
|
|
|
const createCard = (uuid : string) : Card => ({
|
|
uuid,
|
|
name: '',
|
|
price: 0,
|
|
roles: 0,
|
|
sheets: 0,
|
|
layers: 0,
|
|
ppr: 0,
|
|
pps: 0,
|
|
ppl: 0,
|
|
})
|
|
|
|
const cards = useState('cards', () => [
|
|
createCard(crypto.randomUUID()),
|
|
])
|
|
|
|
const addCard = () => {
|
|
cards.value.unshift(createCard(crypto.randomUUID()))
|
|
isDirty.value = true
|
|
}
|
|
|
|
const removeCard = (card : Card) => {
|
|
cards.value = cards.value.filter(element => element.uuid !== card.uuid)
|
|
isDirty.value = true
|
|
updateLocalStorage()
|
|
}
|
|
|
|
const updateCard = (card : Card, index : number) => {
|
|
cards.value[index] = card
|
|
isDirty.value = true
|
|
updateLocalStorage()
|
|
}
|
|
|
|
|
|
const updateLocalStorage = () => {
|
|
localStorage.setItem('cards', JSON.stringify(cards.value))
|
|
localStorage.setItem('sort', JSON.stringify(currentSort.value))
|
|
}
|
|
|
|
const filterButtons = ref<Button[]>([
|
|
{
|
|
label: 'Rollen',
|
|
icon: 'uil:toilet-paper',
|
|
},
|
|
{
|
|
label: 'Blatt',
|
|
icon: 'uil:file-landscape',
|
|
},
|
|
{
|
|
label: 'Lagen',
|
|
icon: 'uil:layer-group',
|
|
},
|
|
])
|
|
|
|
const sortBy = (key : 'ppr' | 'pps' | 'ppl') => {
|
|
cards.value.sort((a : Card, b : Card) => a[key] - b[key])
|
|
}
|
|
|
|
const sort = (index : number) => {
|
|
currentSort.value = index
|
|
filterButtons.value.forEach(button => { button.active = false })
|
|
filterButtons.value[index]!.active = true
|
|
|
|
switch (index) {
|
|
case 0:
|
|
sortBy('ppr')
|
|
break
|
|
case 1:
|
|
sortBy('pps')
|
|
break
|
|
case 2:
|
|
sortBy('ppl')
|
|
break
|
|
}
|
|
|
|
updateLocalStorage()
|
|
isDirty.value = false
|
|
}
|
|
|
|
onMounted(() => {
|
|
const cardsFromStorage = JSON.parse(localStorage.getItem('cards') ?? '[]')
|
|
cards.value = cardsFromStorage.length !== 0 ? cardsFromStorage : cards.value
|
|
const sortFromStorage = +JSON.parse(localStorage.getItem('sort') ?? '0')
|
|
sort(sortFromStorage)
|
|
filterButtons.value[sortFromStorage]!.active = true
|
|
})
|
|
</script>
|