Added sorting functions in search

2024-04-06 23:45:34 +02:00
parent dd8c4727a3
commit 9df9049fdf
6 changed files with 133 additions and 31 deletions
--- a/src/components/calendar/CalendarTile.vue
+++ b/src/components/calendar/CalendarTile.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { LeimDate } from '@/models/Date'
+import { areDatesIdentical, type LeimDate } from '@/models/Date'
 import { useCalendar } from '@/stores/calendar'
 import { useCalendarEvents } from '@/stores/events'
 import { storeToRefs } from 'pinia'
@@ -11,17 +11,17 @@ const props = defineProps<{
  faded?: boolean
 }>()

-const { compareTwoDates, defaultDate } = useCalendar()
+const { defaultDate } = useCalendar()
 const { currentEvents } = storeToRefs(useCalendarEvents())

 const eventsForTheDay = computed(() => {
  return currentEvents.value.filter((currentEvent) => {
-    return compareTwoDates(currentEvent.date, props.date)
+    return areDatesIdentical(currentEvent.date, props.date)
  })
 })

 const isDefaultDate = computed(() => {
-  return compareTwoDates(props.date, defaultDate)
+  return areDatesIdentical(props.date, defaultDate)
 })
 </script>

--- a/src/components/calendar/search/CalendarSearch.vue
+++ b/src/components/calendar/search/CalendarSearch.vue
@@ -3,15 +3,17 @@ import { Button } from '@/components/ui/button'
 import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/dialog'
 import { Input } from '@/components/ui/input'
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
+import { isCharacter, type Character } from '@/models/Characters'
+import type { LeimDateOrder } from '@/models/Date'
+import { isCalendarEvent, type CalendarEvent } from '@/models/Events'
 import { useCharacters } from '@/stores/characters'
 import { useCalendarEvents } from '@/stores/events'
-import { PhMagnifyingGlass } from '@phosphor-icons/vue'
+import { PhCaretDoubleDown, PhCaretDoubleUp, PhMagnifyingGlass } from '@phosphor-icons/vue'
 import { useMagicKeys, useStorage, useTimeoutFn, whenever } from '@vueuse/core'
 import { computed, ref } from 'vue'
 import { searchUnifier, type SearchMode } from '../Search'
 import SearchList from './lists/SearchList.vue'
-import { isCalendarEvent, type CalendarEvent } from '@/models/Events'
-import { isCharacter, type Character } from '@/models/Characters'

 const { characters } = useCharacters()
 const { baseEvents } = useCalendarEvents()
@@ -22,6 +24,15 @@ const searchQuery = ref('')
 const searchEnough = computed(() => searchQuery.value.length >= 2)

 const selectedEntity = useStorage('se', undefined as SearchMode)
+const selectedOrder = ref<LeimDateOrder>('desc')
+
+function setOrderAsc() {
+  selectedOrder.value = 'asc'
+}
+
+function setOrderDesc() {
+  selectedOrder.value = 'desc'
+}

 const searchResults = computed(() => {
  let results: (Character | CalendarEvent)[] = []
@@ -127,14 +138,53 @@ whenever(keys.control_period, () => {
        </span>
      </div>

-      <ToggleGroup type="single" class="justify-start" v-model="selectedEntity">
-        <ToggleGroupItem value="events" aria-label="Uniquement les évènements">
-          Évènements
-        </ToggleGroupItem>
-        <ToggleGroupItem value="characters" aria-label="Uniquement les personnages">
-          Personnages
-        </ToggleGroupItem>
-      </ToggleGroup>
+      <div class="flex items-center justify-between">
+        <div>
+          <ToggleGroup type="single" class="justify-start" v-model="selectedEntity">
+            <ToggleGroupItem value="events" aria-label="Uniquement les évènements">
+              Évènements
+            </ToggleGroupItem>
+            <ToggleGroupItem value="characters" aria-label="Uniquement les personnages">
+              Personnages
+            </ToggleGroupItem>
+          </ToggleGroup>
+        </div>
+        <div class="flex items-center gap-1">
+          <TooltipProvider :delayDuration="250">
+            <Tooltip>
+              <TooltipTrigger>
+                <Button
+                  :variant="selectedOrder === 'desc' ? 'secondary' : 'outline'"
+                  size="icon"
+                  @click="setOrderDesc()"
+                >
+                  <PhCaretDoubleUp size="18" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>Plus ancien</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+
+          <TooltipProvider :delayDuration="250">
+            <Tooltip>
+              <TooltipTrigger>
+                <Button
+                  :variant="selectedOrder === 'asc' ? 'secondary' : 'outline'"
+                  size="icon"
+                  @click="setOrderAsc()"
+                >
+                  <PhCaretDoubleDown size="18" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>Plus récent</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </div>
+      </div>

      <hr />

@@ -142,6 +192,7 @@ whenever(keys.control_period, () => {
        <SearchList
          :results="searchResults"
          :current-entity="selectedEntity"
+          :order="selectedOrder"
          @jumped-to-date="closeDialog()"
        />
      </div>
--- a/src/components/calendar/search/lists/SearchList.vue
+++ b/src/components/calendar/search/lists/SearchList.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { Button } from '@/components/ui/button'
 import { isCharacter, type Character } from '@/models/Characters'
-import type { LeimDate } from '@/models/Date'
+import { compareDates, type LeimDate, type LeimDateOrder } from '@/models/Date'
 import { isCalendarEvent, type CalendarEvent } from '@/models/Events'
 import { useCalendar } from '@/stores/calendar'
 import { computed } from 'vue'
@@ -10,6 +10,7 @@ import type { SearchMode } from '../../Search'
 const props = defineProps<{
  results: (Character | CalendarEvent)[]
  currentEntity: SearchMode
+  order: LeimDateOrder
 }>()

 const emit = defineEmits(['jumpedToDate'])
@@ -27,11 +28,35 @@ const searchLimit = 10
 const activeSearchLimit = computed<number>(() => (!props.currentEntity ? searchLimit : 9999))

 const resultsToDisplay = computed(() => props.results.slice(0, activeSearchLimit.value))
+const sortedResults = computed(() => {
+  return [...resultsToDisplay.value].sort((a, b) => {
+    let firstDate: LeimDate
+    let secondDate: LeimDate
+
+    if (isCalendarEvent(a)) {
+      firstDate = a.date
+    } else if (isCharacter(a) && a.birth) {
+      firstDate = a.birth
+    } else {
+      return 1
+    }
+
+    if (isCalendarEvent(b)) {
+      secondDate = b.date
+    } else if (isCharacter(b) && b.birth) {
+      secondDate = b.birth
+    } else {
+      return -1
+    }
+
+    return compareDates(firstDate, secondDate, props.order)
+  })
+})
 </script>

 <template>
  <ul class="grid gap-3">
-    <li v-for="r in resultsToDisplay" :key="isCalendarEvent(r) ? r.title : r.name">
+    <li v-for="r in sortedResults" :key="isCalendarEvent(r) ? r.title : r.name">
      <button
        v-if="isCalendarEvent(r)"
        class="block w-full text-left p-2 rounded-sm"
--- a/src/components/ui/dialog/DialogContent.vue
+++ b/src/components/ui/dialog/DialogContent.vue
@@ -33,7 +33,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
      v-bind="forwarded"
      :class="
        cn(
-          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-3xl -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-4xl -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
          props.class
        )
      "