From 34759735d1b48053d2f9998df38bdbed7ba07431 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Tue, 31 Jan 2023 17:33:56 +0100
Subject: [PATCH] feature: local storage

---
 src/App.vue                     |  4 ++++
 src/components/TableActions.vue |  6 ++++++
 src/mixins/useLocalStorage.ts   | 24 ++++++++++++++++++++++++
 src/views/ManagerView.vue       |  8 +++++---
 4 files changed, 39 insertions(+), 3 deletions(-)
 create mode 100644 src/mixins/useLocalStorage.ts

diff --git a/src/App.vue b/src/App.vue
index 9b6cad2..9327ebd 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -13,6 +13,7 @@ import { RouterView } from 'vue-router';
 import { IUser, AuthState } from './types/types';
 import useRouteGuard from './mixins/useRouteGuard';
 import { useStore } from './store';
+import useLocalStorage from './mixins/useLocalStorage';
 
 export default defineComponent({
   mixins: [dataMixin],
@@ -20,7 +21,10 @@ export default defineComponent({
 
   setup() {
     const { routeAuthGuard } = useRouteGuard();
+    const { setupStorage } = useLocalStorage();
+    
     routeAuthGuard();
+    setupStorage();
 
     return {
       store: useStore(),
diff --git a/src/components/TableActions.vue b/src/components/TableActions.vue
index 4ca1888..ece87c8 100644
--- a/src/components/TableActions.vue
+++ b/src/components/TableActions.vue
@@ -53,6 +53,12 @@
       <button style="margin-left: 0.5em" @click="clearInput">Wyczyść</button>
     </div>
 
+    <div class="pane">
+      Pokazuj maks.
+      <input type="number" min="1" v-model="store.maxVisibleResults" style="width: 50px; margin: 0 0.5em;" />
+      wyników
+    </div>
+
     <div class="pane">
       <button @click="changelogVisible = !changelogVisible">
         {{ changelogVisible ? 'Ukryj' : 'Pokaż' }} changelog
diff --git a/src/mixins/useLocalStorage.ts b/src/mixins/useLocalStorage.ts
new file mode 100644
index 0000000..2945e3d
--- /dev/null
+++ b/src/mixins/useLocalStorage.ts
@@ -0,0 +1,24 @@
+import { computed, watch } from 'vue';
+import { useStore } from '../store';
+
+export default () => {
+  const store = useStore();
+
+  const setupStorage = () => {
+    // On mounted
+    store.maxVisibleResults = Number(window.localStorage.getItem('maxVisibleResults')) || 30;
+
+    // Max vis. results
+    watch(
+      computed(() => store.maxVisibleResults),
+      (v) => {
+        window.localStorage.setItem('maxVisibleResults', v.toString());
+      }
+    );
+  };
+
+  return {
+    setupStorage,
+  };
+};
+
diff --git a/src/views/ManagerView.vue b/src/views/ManagerView.vue
index 55bec49..e4b8fa3 100644
--- a/src/views/ManagerView.vue
+++ b/src/views/ManagerView.vue
@@ -103,10 +103,12 @@ export default defineComponent({
   computed: {
     sortedStationList() {
       const sortedList = this.store.stationList.sort((a, b) => (a.name > b.name ? 1 : -1));
-      if (!this.store.searchedSceneryName || this.store.searchedSceneryName == '') return sortedList;
+      // if (!this.store.searchedSceneryName || this.store.searchedSceneryName == '') return sortedList;
 
-      return sortedList.filter((station) =>
-        station.name.toLowerCase().startsWith(this.store.searchedSceneryName.toLowerCase())
+      return sortedList.filter(
+        (station, i) =>
+          i < this.store.maxVisibleResults &&
+          station.name.toLowerCase().startsWith(this.store.searchedSceneryName.toLowerCase())
       );
     },
   },