From 3b6e4adcb1956bf3cd59d6d8131baf6cc9de1b7a Mon Sep 17 00:00:00 2001
From: x-OvO-x <xxwhowhoxx@gmail.com>
Date: Thu, 20 Jul 2023 19:09:02 +0200
Subject: [PATCH 1/2] feat: order sessions by newest or oldest

---
 src/pages/LogsPage.vue   | 35 +++++++++++++++++++++++++++++++++--
 src/stores/log-viewer.ts |  3 +++
 2 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/src/pages/LogsPage.vue b/src/pages/LogsPage.vue
index 37d0c588..6c17f2c9 100644
--- a/src/pages/LogsPage.vue
+++ b/src/pages/LogsPage.vue
@@ -81,6 +81,19 @@
             style="width: 256px"
           />
 
+          <q-select
+            v-if="logViewerStore.viewerState === 'viewing-session'"
+            filled
+            v-model="logViewerStore.sessionsOrder"
+            @update:model-value="reOrderSessions()"
+            :options="[
+              { label: 'Newest', value: 'desc' },
+              { label: 'Oldest', value: 'asc' },
+            ]"
+            label="Sessions Order"
+            style="width: 256px; margin-left: 10px"
+          />
+
           <q-space />
 
           <div v-if="logViewerStore.viewerState === 'none'">
@@ -165,8 +178,8 @@
             </q-timeline-entry>
 
             <q-timeline-entry
-              v-for="encounter in encounterRows"
-              :key="encounter.encounterName"
+              v-for="(encounter, index) in encounterRows"
+              :key="`${index}-${encounter}`"
               :title="
                 encounter.encounterName +
                 ' | ' +
@@ -442,9 +455,27 @@ function calculateEncounterRows() {
       return;
     }
   });
+
+  reOrderSessions();
 }
 /* End session table */
 
+function reOrderSessions() {
+  if (encounterRows.value.length === 1) return;
+
+  const firstEncounter = encounterRows.value.at(0);
+  const lastEncounter = encounterRows.value.at(-1);
+
+  if (!firstEncounter || !lastEncounter) return;
+
+  const currentOrientation =
+    firstEncounter.startingMs < lastEncounter.startingMs ? "asc" : "desc";
+
+  if (currentOrientation === logViewerStore.sessionsOrder.value) return;
+
+  encounterRows.value.reverse();
+}
+
 /* Start encounter table */
 const encounterRows: Ref<RowData[]> = ref([]);
 
diff --git a/src/stores/log-viewer.ts b/src/stores/log-viewer.ts
index f8371ed6..8a9cfd50 100644
--- a/src/stores/log-viewer.ts
+++ b/src/stores/log-viewer.ts
@@ -33,6 +33,7 @@ type State = {
   encounterOptions: string[];
   encounterFilter: string[];
   logfileFilter: string[];
+  sessionsOrder: { label: "Newest" | "Oldest"; value: "desc" | "asc" };
 };
 
 export const useLogViewerStore = defineStore("log-viewer", {
@@ -45,6 +46,7 @@ export const useLogViewerStore = defineStore("log-viewer", {
     encounterOptions: [],
     encounterFilter: [],
     logfileFilter: [],
+    sessionsOrder: { label: "Newest", value: "desc" },
   }),
   actions: {
     resetState() {
@@ -56,6 +58,7 @@ export const useLogViewerStore = defineStore("log-viewer", {
       this.encounterOptions = [];
       this.encounterFilter = [];
       this.logfileFilter = [];
+      this.sessionsOrder = { label: "Newest", value: "desc" };
     },
   },
 });

From 398067161af197e8d9067125d41dd573abbf9820 Mon Sep 17 00:00:00 2001
From: x-OvO-x <xxwhowhoxx@gmail.com>
Date: Thu, 20 Jul 2023 19:44:57 +0200
Subject: [PATCH 2/2] fix: clearable filters

Log filters will no longer be null once cleared
---
 src/pages/LogsPage.vue | 34 ++++++++++++++++++++++++++++++----
 1 file changed, 30 insertions(+), 4 deletions(-)

diff --git a/src/pages/LogsPage.vue b/src/pages/LogsPage.vue
index 6c17f2c9..85b200e1 100644
--- a/src/pages/LogsPage.vue
+++ b/src/pages/LogsPage.vue
@@ -63,11 +63,24 @@
             v-model="logViewerStore.logfileFilter"
             @update:model-value="computedLogFileList()"
             multiple
-            clearable
             :options="logViewerStore.encounterOptions"
             label="Filter encounters"
             style="width: 256px"
-          />
+          >
+            <template
+              v-if="logViewerStore.logfileFilter.length > 0"
+              v-slot:append
+            >
+              <q-icon
+                name="cancel"
+                @click.stop.prevent="
+                  logViewerStore.logfileFilter = [];
+                  computedLogFileList();
+                "
+                class="cursor-pointer q-field__focusable-action"
+              />
+            </template>
+          </q-select>
 
           <q-select
             v-if="logViewerStore.viewerState === 'viewing-session'"
@@ -75,11 +88,24 @@
             v-model="logViewerStore.encounterFilter"
             @update:model-value="calculateEncounterRows()"
             multiple
-            clearable
             :options="logViewerStore.encounterOptions"
             label="Filter encounters"
             style="width: 256px"
-          />
+          >
+            <template
+              v-if="logViewerStore.encounterFilter.length > 0"
+              v-slot:append
+            >
+              <q-icon
+                name="cancel"
+                @click.stop.prevent="
+                  logViewerStore.encounterFilter = [];
+                  calculateEncounterRows();
+                "
+                class="cursor-pointer q-field__focusable-action"
+              />
+            </template>
+          </q-select>
 
           <q-select
             v-if="logViewerStore.viewerState === 'viewing-session'"