From 9df9049fdfa4c3c6968f0dfeb35b5a57e5e8dd8e Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sat, 6 Apr 2024 23:45:34 +0200
Subject: [PATCH] Added sorting functions in search

---
 src/components/calendar/CalendarTile.vue      |  8 +-
 .../calendar/search/CalendarSearch.vue        | 73 ++++++++++++++++---
 .../calendar/search/lists/SearchList.vue      | 29 +++++++-
 src/components/ui/dialog/DialogContent.vue    |  2 +-
 src/models/Date.ts                            | 39 ++++++++++
 src/stores/calendar.ts                        | 13 ----
 6 files changed, 133 insertions(+), 31 deletions(-)

diff --git a/src/components/calendar/CalendarTile.vue b/src/components/calendar/CalendarTile.vue
index f7184e9..96f90c7 100644
--- 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>
 
diff --git a/src/components/calendar/search/CalendarSearch.vue b/src/components/calendar/search/CalendarSearch.vue
index 4a0a4dd..05994d4 100644
--- 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>
diff --git a/src/components/calendar/search/lists/SearchList.vue b/src/components/calendar/search/lists/SearchList.vue
index 0a683b6..521265d 100644
--- 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"
diff --git a/src/components/ui/dialog/DialogContent.vue b/src/components/ui/dialog/DialogContent.vue
index e681ebb..b835dd3 100644
--- 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
         )
       "
diff --git a/src/models/Date.ts b/src/models/Date.ts
index dcad803..52584b3 100644
--- a/src/models/Date.ts
+++ b/src/models/Date.ts
@@ -7,3 +7,42 @@ export interface LeimDate {
 
 export type LeimPeriod = 'ante' | 'nante'
 export type LeimPeriodShort = 'A.R' | 'N.R'
+export type LeimDateOrder = 'asc' | 'desc'
+
+/**
+ * Check whether two dates are identical
+ *
+ * @param date1 First date
+ * @param date2 Second date
+ * @returns True if the dates are identical
+ */
+export function areDatesIdentical(date1: LeimDate, date2: LeimDate) {
+  // To refacto to be more precise
+  return JSON.stringify({ ...date1 }) === JSON.stringify({ ...date2 })
+}
+
+/**
+ * Compare dates
+ *
+ * @param date1 First date
+ * @param date2 Second date
+ * @returns 1 means the first date comes before the second, -1 means the second comes before the first, and 0 if they're identical
+ */
+export function compareDates(a: LeimDate, b: LeimDate, order: LeimDateOrder = 'desc'): number {
+  // Reverses the order if specified
+  const orderFactor = order === 'desc' ? 1 : -1
+
+  if (a.period === 'ante' && b.period === 'nante') return -1 * orderFactor
+  if (a.period === 'nante' && b.period === 'ante') return 1 * orderFactor
+
+  if (a.year < b.year) return -1 * orderFactor
+  if (a.year > b.year) return 1 * orderFactor
+
+  if (a.month < b.month) return -1 * orderFactor
+  if (a.month > b.month) return 1 * orderFactor
+
+  if (a.day < b.day) return -1 * orderFactor
+  if (a.day > b.day) return 1 * orderFactor
+
+  return 0
+}
diff --git a/src/stores/calendar.ts b/src/stores/calendar.ts
index 4d05170..68b8259 100644
--- a/src/stores/calendar.ts
+++ b/src/stores/calendar.ts
@@ -316,18 +316,6 @@ export const useCalendar = defineStore('calendar', () => {
     return `${getMonthName(date.month)} ${date.year} ${getPeriodOfYear(date.year).short}`
   }
 
-  /**
-   * Check whether two dates are identical
-   *
-   * @param date1 First date
-   * @param date2 Second date
-   * @returns True if the dates are identical
-   */
-  function compareTwoDates(date1: LeimDate, date2: LeimDate) {
-    // To refacto to be more precise
-    return JSON.stringify({ ...date1 }) === JSON.stringify({ ...date2 })
-  }
-
   /**
    * Jumps the calendar to the given date
    *
@@ -362,7 +350,6 @@ export const useCalendar = defineStore('calendar', () => {
     decrementYear,
     jumpToDate,
     jumpToDefaultDate,
-    compareTwoDates,
     getFormattedDateTitle,
     getMonthName,
     setViewType,