add: iteration 1 finished

Finished simple calculator iteration

app/pages/index.vue

@@ -1,17 +1,32 @@
 <template>
   <section class="content flex-col">
-    <div class="pc-wrapper 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="updateCard(card, index)"
+        @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>
@@ -21,42 +36,95 @@
 
 <script setup lang="ts">
 import type { Card } from '../../shared/Card'
+import type { Button } from '../../shared/ButtonGroup'
 
-const createCard = (uuid : string) => ({
+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()),
 ])
 
-onMounted(() => {
-  const fromStorage = JSON.parse(localStorage.getItem('cards') ?? '[]')
-  cards.value = fromStorage.length !== 0 ? fromStorage : cards.value
-})
-
 const addCard = () => {
-  cards.value.push(createCard(crypto.randomUUID()))
+  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 sort = () => {}
+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>