feature: skrót posterunku

src/components/TableActions.vue

@@ -59,6 +59,12 @@
       wyników
     </div>
 
+    <div class="pane">
+      Obecnie pokazane scenerie:
+      {{ Math.min(store.maxVisibleResults, store.stationList.length, store.sortedStationList.length) }} /
+      {{ store.stationList.length }}
+    </div>
+
     <div class="pane">
       <button @click="changelogVisible = !changelogVisible">
         {{ changelogVisible ? 'Ukryj' : 'Pokaż' }} changelog
@@ -198,6 +204,7 @@ export default defineComponent({
 
       const newSt: SceneryRowItem = {
         name,
+        abbr: name.slice(0, 2),
         url: '',
         hash: '',
         lines: '',

src/store.ts

@@ -32,6 +32,7 @@ export const useStore = defineStore('store', {
 
       changesResponse: [],
     } as IStore),
+
   actions: {
     fetchSceneriesData() {
       this.dataState = 'LOADING';
@@ -95,4 +96,13 @@ export const useStore = defineStore('store', {
       return axios.post<{ user: IUser }>('auth/token', { token: this.token }, { baseURL });
     },
   },
+
+  getters: {
+    sortedStationList(state) {
+      return state.stationList
+        .filter((station) => station.name.toLowerCase().startsWith(state.searchedSceneryName.toLowerCase()))
+        .sort((a, b) => (a.name > b.name ? 1 : -1))
+        .filter((_, i) => i < state.maxVisibleResults);
+    },
+  },
 });

src/types/types.ts

@@ -17,6 +17,7 @@ export type ChangeProp =
 
 export enum HeaderTypes {
   name = 'Nazwa',
+  abbr = "Skrót posterunku",
   url = 'URL',
   hash = 'Hash',
   lines = 'Linie',
@@ -45,6 +46,7 @@ export interface SceneryRowItem {
   id: string;
   hash: string;
   name: string;
+  abbr: string;
   url: string;
   lines: string;
   project: string | null;

src/views/ManagerView.vue

@@ -16,7 +16,7 @@
         </thead>
 
         <tbody>
-          <tr v-for="(station, row) in sortedStationList" tabindex="0">
+          <tr v-for="(station, row) in store.sortedStationList" tabindex="0">
             <td v-for="(value, propName) in headerNameList" @click="changeProperty(station, row, propName as string)">
               <span v-if="propName === 'url'" :style="station.url ? 'color: gold' : 'color: gray;'">URL</span>
               <span v-else-if="propName === 'projectUrl'" :style="station.projectUrl ? 'color: gold' : 'color: gray;'"
@@ -39,8 +39,8 @@
               <select
                 name="availability"
                 :id="`select-${row}`"
-                v-model="sortedStationList[row]['availability']"
-                @input="(e) => changeAvailability(station, sortedStationList[row]['availability'], e)"
+                v-model="store.sortedStationList[row]['availability']"
+                @input="(e) => changeAvailability(station, store.sortedStationList[row]['availability'], e)"
               >
                 <option value="default">dostępna (w paczce)</option>
                 <option value="nonDefault">dostępna (poza paczką)</option>
@@ -76,6 +76,7 @@ export default defineComponent({
     AuthState,
     headerNameList: {
       name: 'Nazwa',
+      abbr: 'Skrót posterunku',
       hash: 'Hash',
       url: 'URL',
       lines: 'Linie',
@@ -104,15 +105,6 @@ export default defineComponent({
     this.store.fetchSceneriesData();
   },
 
-  computed: {
-    sortedStationList() {
-      return this.store.stationList
-        .filter((station) => station.name.toLowerCase().startsWith(this.store.searchedSceneryName.toLowerCase()))
-        .sort((a, b) => (a.name > b.name ? 1 : -1))
-        .filter((_, i) => i < this.store.maxVisibleResults);
-    },
-  },
-
   methods: {
     changeProperty(station: SceneryRowItem, row: number, propertyName: string) {
       this.store.selectedStationName = station.name;
@@ -128,7 +120,7 @@ export default defineComponent({
       }
 
       const stationListRow = this.store.stationList.findIndex(
-        (station) => station.name == this.sortedStationList[row].name
+        (station) => station.name == this.store.sortedStationList[row].name
       );
 
       if (stationListRow == -1) return;
@@ -150,7 +142,7 @@ export default defineComponent({
 
     changeCheckpoints(row: number) {
       const stationListRow = this.store.stationList.findIndex(
-        (station) => station.name == this.sortedStationList[row].name
+        (station) => station.name == this.store.sortedStationList[row].name
       );
 
       if (stationListRow == -1) return;
@@ -159,7 +151,7 @@ export default defineComponent({
       if (newCheckpoints === null) return;
 
       this.store.stationList[stationListRow]['checkpoints'] = newCheckpoints;
-      this.addChange(this.sortedStationList[row], 'checkpoints', oldCheckpoints, newCheckpoints);
+      this.addChange(this.store.sortedStationList[row], 'checkpoints', oldCheckpoints, newCheckpoints);
     },
 
     changeAvailability(scenery: SceneryRowItem, availability: Availability, e: Event) {