add: reactive store

Add useLocalStorage from VueUse

app/components/Pp/PriceCard.vue

@@ -33,21 +33,21 @@
         <div class="info flex-col">
           <div class="price">
             <Icon class="icon" name="uil:toilet-paper" mode="svg" />
-            <span class="value">{{ intl.format(card.ppr) }}</span>
+            <span class="value">{{ intl.format(ppr) }}</span>
           </div>
           <span class="pro">Pro 1 {{ card.roles ? `(${card.roles})` : '' }}</span>
         </div>
         <div class="info flex-col">
           <div class="price">
             <Icon class="icon" name="uil:file-landscape" mode="svg" />
-            <span class="value">{{ intl.format(card.pps) }}</span>
+            <span class="value">{{ intl.format(pps) }}</span>
           </div>
           <span class="pro">Pro 100 {{ card.sheets ? `(${card.sheets})` : '' }}</span>
         </div>
         <div class="info flex-col">
           <div class="price">
             <Icon class="icon" name="uil:layer-group" mode="svg" />
-            <span class="value">{{ intl.format(card.ppl) }}</span>
+            <span class="value">{{ intl.format(ppl) }}</span>
           </div>
           <span class="pro">Pro 100 {{ card.layers ? `(${card.layers})` : '' }}</span>
         </div>
@@ -92,7 +92,17 @@ const { lengthX, direction, isSwiping } = useSwipe(top, {
   },
 })
 
+const priceClean = computed<number>(() => +replaceComma(card.price))
+const ppr = computed(() => priceClean.value / +card.roles)
+const pps = computed(() => (ppr.value / +card.sheets) * 100)
+const ppl = computed(() => (pps.value / +card.layers))
+
 const update = () => emit('update')
 
 const deleteCard = () => emit('remove')
+
+defineExpose({
+  ppr, pps, ppl, uuid : card.uuid,
+})
+
 </script>

app/components/Pp/PriceCardDialog.vue

@@ -83,7 +83,6 @@ 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 }

app/pages/index.vue

@@ -1,4 +1,5 @@
 <template>
+  <ClientOnly>
     <PpDeleteDialog
       ref="deleteModal"
       :current-card-index="currentCardIndex"
@@ -19,6 +20,7 @@
       </aside>
       <div class="flex-col" role="list">
           <PpPriceCard
+            ref="priceCard"
             v-for="(card, index) in cards"
             :key="card.uuid"
             :deletable="cards.length > 1"
@@ -43,19 +45,22 @@
         <span>Hinzufügen</span>
       </PpButton>
     </PpToolbar>
+  </ClientOnly>
 </template>
 
 <script setup lang="ts">
 import type { Card } from '../../shared/Card'
 import type { Button } from '../../shared/ButtonGroup'
-import { PpPriceCardDialog, PpDeleteDialog } from '#components'
+import { PpPriceCardDialog, PpDeleteDialog, PpPriceCard } from '#components'
 
-const currentSort = ref(0)
+const cards = useLocalStorage<Card[]>('cards', [])
+const currentSort = useLocalStorage<number>('sort', 0)
 const isDirty = ref(false)
 const currentCard = ref<Card>()
 const currentCardIndex = ref<number>(-1)
 const modal = useTemplateRef<typeof PpPriceCardDialog>('modal')
 const deleteModal = useTemplateRef<typeof PpDeleteDialog>('deleteModal')
+const priceCards = useTemplateRef<(typeof PpPriceCard)[]>('priceCard')
 
 const createCard = (uuid : string) : Card => ({
   uuid,
@@ -64,26 +69,17 @@ const createCard = (uuid : string) : Card => ({
   roles: '',
   sheets: '',
   layers: '',
-  ppr: 0,
-  pps: 0,
-  ppl: 0,
 })
 
-const cards = useState<Card[]>('cards', () => [
-  createCard(randomUUID()),
-])
 
 const addCard = (card : Card) => {
-  const price = calculate(card)
+  cards.value.unshift({ ...card })
-  cards.value.unshift({ ...card, ...price })
   isDirty.value = true
-  updateLocalStorage()
 }
 
 const removeCard = (index : number) => {
   cards.value.splice(index, 1)
   isDirty.value = true
-  updateLocalStorage()
 }
 
 const updateCard = () => {
@@ -92,11 +88,9 @@ const updateCard = () => {
     return
   }
 
-  const price = calculate(currentCard.value!)
+  const newCard = { ...currentCard.value! }
-  const newCard = { ...currentCard.value!, ...price }
   cards.value.splice(currentCardIndex.value, 1, newCard)
   isDirty.value = true
-  updateLocalStorage()
 }
 
 const openModal = (createNew : boolean, index : number) => {
@@ -118,31 +112,31 @@ const openDeleteModal = () => {
   deleteModal.value?.$el.showModal()
 }
 
-const updateLocalStorage = () => {
-  localStorage.setItem('cards', JSON.stringify(cards.value.map(card => {
-    const { uuid, name, price, roles, sheets, layers } = card
-    return { uuid, name, price, roles, sheets, layers }
-  })))
-  localStorage.setItem('sort', JSON.stringify(currentSort.value))
-}
-
 const filterButtons = ref<Button[]>([
   {
     label: 'Rollen',
     icon: 'uil:toilet-paper',
+    active: currentSort.value === 0,
   },
   {
     label: 'Blatt',
     icon: 'uil:file-landscape',
+    active: currentSort.value === 1,
   },
   {
     label: 'Lagen',
     icon: 'uil:layer-group',
+    active: currentSort.value === 2,
   },
 ])
 
 const sortBy = (key : 'ppr' | 'pps' | 'ppl') => {
-  cards.value.sort((a : Card, b : Card) => a[key] - b[key])
+  cards.value.sort((a, b) => {
+    const aCard = priceCards.value?.find(card => card.uuid === a.uuid) || null
+    const bCard = priceCards.value?.find(card => card.uuid === b.uuid) || null
+    if (!aCard || !bCard) return 0
+    return aCard[key] - bCard[key]
+  })
 }
 
 const sort = (index : number) => {
@@ -162,23 +156,6 @@ const sort = (index : number) => {
       break
   }
 
-  updateLocalStorage()
   isDirty.value = false
 }
-
-const calculate = (card : Card) => {
-  const ppr = +replaceComma(card.price) / +card.roles
-  const pps = (ppr / +card.sheets) * 100
-  const ppl = (pps / +card.layers)
-
-  return { ppr, pps, ppl }
-}
-
-onMounted(() => {
-  const cardsFromStorage = JSON.parse(localStorage.getItem('cards') ?? '[]').map((card : Card) => ({ ...card, ...calculate(card) }))
-  cards.value = cardsFromStorage.length !== 0 ? cardsFromStorage : cards.value
-  const sortFromStorage = +JSON.parse(localStorage.getItem('sort') ?? '0')
-  sort(sortFromStorage)
-  filterButtons.value[sortFromStorage]!.active = true
-})
 </script>

shared/Card.ts

@@ -1,7 +1,4 @@
 export type Card = {
-  ppr: number
-  pps: number
-  ppl: number
   uuid : string
   name : string
   price : string