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,61 +1,66 @@
 <template>
-  <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
-        :buttons="filterButtons"
-        @click="sort"
-      />
-    </aside>
-    <div class="flex-col" role="list">
-      <PpPriceCard
-        v-for="(card, index) in cards"
-        :key="card.uuid"
-        :deletable="cards.length > 1"
-        :card="card"
-        @update="openModal(false, index)"
-        @remove="openDeleteModal()"
-      />
-    </div>
-  </section>
-  <PpToolbar>
-    <PpButton class="mini-button text-white transparent" @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 transparent" @click="openModal(true, -1)">
-      <Icon class="icon" name="uil:plus" mode="svg" />
-      <span>Hinzufügen</span>
-    </PpButton>
-  </PpToolbar>
+  <ClientOnly>
+    <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
+          :buttons="filterButtons"
+          @click="sort"
+        />
+      </aside>
+      <div class="flex-col" role="list">
+          <PpPriceCard
+            ref="priceCard"
+            v-for="(card, index) in cards"
+            :key="card.uuid"
+            :deletable="cards.length > 1"
+            :card="card"
+            @update="openModal(false, index)"
+            @remove="openDeleteModal()"
+          />
+      </div>
+    </section>
+    <PpToolbar>
+      <PpButton class="mini-button text-white transparent" @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 transparent" @click="openModal(true, -1)">
+        <Icon class="icon" name="uil:plus" mode="svg" />
+        <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, ...price })
+  cards.value.unshift({ ...card })
   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!, ...price }
+  const newCard = { ...currentCard.value! }
   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,11 +1,8 @@
 export type Card = {
-  ppr: number
-  pps: number
-  ppl: number
-  uuid: string
-  name: string
-  price: string
-  roles: string
-  sheets: string
-  layers: string
+  uuid : string
+  name : string
+  price : string
+  roles : string
+  sheets : string
+  layers : string
 }