feature: local storage

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(),

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

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,
+  };
+};
+

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())
       );
     },
   },