add: (wip) new filtering layout

DropDown component, ToggleButton component,

app/pages/index.vue

@@ -17,9 +17,16 @@
           <h1>Mit ProPapier Preise vergleichen und sparen</h1>
         </div>
         <aside class="filter-bar">
-          <button v-for="(button, index) in filterButtons" @click="() => sort(index)" :class="{ 'active': button.active }">
-            {{ button.label }}
-          </button>
+          <PpFormDropDown
+            :elements="sortElements"
+            :current="currentSortElement!"
+            @click="setSortElement"
+          />
+          <PpFormToggleButton
+            :icons="['uil:sort-amount-up', 'uil:sort-amount-down']"
+            :current="currentSortDirection"
+            @click="countSortDirection"
+          />
         </aside>
         <div class="flex-col" role="list" v-if="cards.length">
           <PpPriceCard
@@ -52,15 +59,37 @@
 import type { Card } from '../../shared/Card'
 import type { Button } from '../../shared/ButtonGroup'
 import { PpPriceCardDialog, PpDeleteDialog, PpPriceCard } from '#components'
+import type { DropDownElement } from '../../shared/DropDown'
 
 const cards = useLocalStorage<Card[]>('cards', [])
 const currentSort = useLocalStorage<number>('sort', 0)
+const currentSortDirection = useLocalStorage<number>('sortDirection', 0)
 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 sortElements : DropDownElement[] = [
+  {
+    label: 'Rollen',
+    value: 0,
+  },
+  {
+    label: 'Blatt',
+    value: 1,
+  },
+  {
+    label: 'Lagen',
+    value: 2,
+  }
+]
+const currentSortElement = ref<DropDownElement>(sortElements[0]!)
+
+const setSortElement = (element : DropDownElement) => {
+  sort(element.value as number)
+}
+
 const createCard = (uuid : string) : Card => ({
   uuid,
   name: '',
@@ -70,7 +99,6 @@ const createCard = (uuid : string) : Card => ({
   layers: '',
 })
 
-
 const addCard = (card : Card) => {
   cards.value.unshift({ ...card })
   sort()
@@ -111,37 +139,23 @@ const openDeleteModal = () => {
   deleteModal.value?.$el.showModal()
 }
 
-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, 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
+
+    if (currentSortDirection.value === 0) {
+      return bCard[key] - aCard[key]
+    }
+
     return aCard[key] - bCard[key]
   })
 }
 
 const sort = async (index : number = currentSort.value) => {
   currentSort.value = index
-  filterButtons.value.forEach(button => { button.active = false })
-  filterButtons.value[index]!.active = true
+  currentSortElement.value = sortElements[index]!
 
   await nextTick()
 
@@ -151,4 +165,12 @@ const sort = async (index : number = currentSort.value) => {
     case 2: return sortBy('ppl')
   }
 }
+
+const countSortDirection = () => {
+  let newSortDirection = currentSortDirection.value + 1
+  if (newSortDirection > 1) newSortDirection = 0
+
+  currentSortDirection.value = newSortDirection
+  sort()
+}
 </script>