@afeefa/vue-app 0.0.343 → 0.0.345

package/.afeefa/package/release/version.txt

@@ -1 +1 @@
-0.0.343
+0.0.345

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@afeefa/vue-app",
-  "version": "0.0.343",
+  "version": "0.0.345",
   "description": "",
   "author": "Afeefa Kollektiv <kollektiv@afeefa.de>",
   "license": "MIT",

package/src/api-resources/ListAction.js

@@ -1,6 +1,7 @@
 import { NextRouteFilterSource } from '@a-vue/components/list/NextRouteFilterSource'
 import { AlertEvent } from '@a-vue/events'
 import { eventBus } from '@a-vue/plugins/event-bus/EventBus'
+import { StartFilterStorage } from '@a-vue/services/start-filter/StartFilterStorage'
 import { ListViewModel } from '@afeefa/api-resources-client'
 
 import { ApiAction } from './ApiAction'
@@ -10,7 +11,18 @@ export class ListAction extends ApiAction {
     return this.execute()
   }
 
-  initFiltersForRoute (route) {
+  initFiltersForRoute (route, { startFilterKey } = {}) {
+    // Startfilter anwenden, wenn die URL keine Filter vorgibt: synthetisches
+    // Route-Objekt mit der gespeicherten Query (kein Router-Eingriff — die
+    // Liste pusht die Filter anschließend selbst in die URL). Bei vorhandener
+    // Session-History bleibt die injizierte Query wirkungslos (History gewinnt).
+    if (startFilterKey && !Object.keys(route.query).length) {
+      const startFilterQuery = StartFilterStorage.load(startFilterKey)
+      if (startFilterQuery) {
+        route = { ...route, query: startFilterQuery }
+      }
+    }
+
     const request = new ListViewModel(this)
       // read from next route query string, but do not push
       // list component will be init with used_filters

package/src/components/ASelect2.vue

@@ -123,7 +123,6 @@
           v-if="activeTab === 'search'"
           ref="list"
           :items="displayItems"
-          :stickyCount="isDynamic ? topSpecialCount : 0"
           :selection="activeSelection"
           :getTitle="getTitle"
           :getSubtitle="getSubtitle"
@@ -369,18 +368,17 @@ export default class ASelect2 extends Mixins(ComponentWidthMixin, UsesPositionSe
   // Maßstab ist die GESAMTzahl der ungefilterten Liste (`totalCount`), nicht der
   // aktuelle Such-`count` und nicht `hasMore`: beide fallen während einer Suche
   // (0 Treffer → hasMore false) und flackern beim Reload. `totalCount` bleibt
-  // stabil. Zwei Sonderfälle halten das Feld zusätzlich sichtbar:
+  // stabil. Sonderfälle:
+  // - Noch nichts geladen (`!loaded`): KEIN Feld — die Items erscheinen ohnehin
+  //   erst mit der ersten Antwort; das Feld kommt dann (falls nötig) zusammen mit
+  //   der Liste. Vorher kurz eins zu zeigen, das bei kurzen Listen gleich wieder
+  //   verschwindet, wäre Flackern.
   // - Schon getippt (`search`): das Feld muss bleiben, sonst lässt sich die Suche
   //   nicht mehr ändern/leeren.
-  // - Noch nichts geladen (`!loaded`): `totalCount` ist erst nach der ersten Seite
-  //   bekannt. Bis dahin Feld zeigen, statt es nachträglich aufpoppen zu lassen.
   get showSearchField () {
-    if (!this.isDynamic || !this.hasSearch) {
+    if (!this.isDynamic || !this.hasSearch || !this.loaded) {
       return false
     }
-    if (!this.loaded) {
-      return true
-    }
     return !!this.search || this.totalCount > this.pageSize
   }
 
@@ -423,14 +421,14 @@ export default class ASelect2 extends Mixins(ComponentWidthMixin, UsesPositionSe
   // wenn die ganze Liste auf einer Seite liegt — sonst (Pagination greift,
   // `hasMore`) würden sie zwischen den bisher geladenen Treffern und den noch
   // nachkommenden Seiten hängen, also faktisch mitten in der Liste. In dem Fall
-  // ziehen wir alle Sonder-Items nach oben (sticky), damit sie sichtbar bleiben.
+  // ziehen wir alle Sonder-Items nach oben.
   get collapseSpecialToTop () {
     return this.isDynamic && this.hasMore
   }
 
-  // Was die Liste anzeigt: Sonder-Items oben (vor den Treffern, bei dynamischer
-  // Liste angepinnt), dann die Treffer, dann Sonder-Items unten — Letzteres nur,
-  // solange die Liste auf einer Seite passt (§5, siehe collapseSpecialToTop).
+  // Was die Liste anzeigt: Sonder-Items oben (vor den Treffern), dann die
+  // Treffer, dann Sonder-Items unten — Letzteres nur, solange die Liste auf
+  // eine Seite passt (§5, siehe collapseSpecialToTop).
   get displayItems () {
     if (this.collapseSpecialToTop) {
       return [
@@ -446,15 +444,6 @@ export default class ASelect2 extends Mixins(ComponentWidthMixin, UsesPositionSe
     ]
   }
 
-  // Anzahl der oben angepinnten Sonder-Items (für sticky-Rendering in Select2List).
-  // Bei collapseSpecialToTop sind auch die unteren Sonder-Items mit oben.
-  get topSpecialCount () {
-    const top = this.matchingSpecialItems('top').length
-    return this.collapseSpecialToTop
-      ? top + this.matchingSpecialItems('bottom').length
-      : top
-  }
-
   // --- Laden (nur dynamisch) -----------------------------------------------
 
   async loadResults ({ reset = false } = {}) {

package/src/components/select2/Select2List.vue

@@ -29,8 +29,7 @@
           :class="['row', 'row-' + index, {
             included: polarityOf(model) === 'include',
             excluded: polarityOf(model) === 'exclude',
-            active: activeIndex === index,
-            sticky: index < stickyCount
+            active: activeIndex === index
           }]"
           @click="onRowClick(model)"
         >
@@ -144,10 +143,7 @@ import { Component, Vue, Watch } from '@a-vue'
       // Zustands — die Polarität (include/exclude) zeigt weiter der Nicht-Button.
       showCheckbox: false,
       isLoading: false,
-      hasMore: false,
-      // Anzahl der oben angepinnten Sonder-Items (§5): die ersten N Zeilen
-      // bleiben beim Scrollen sichtbar (position: sticky).
-      stickyCount: 0
+      hasMore: false
     }
   ]
 })
@@ -360,16 +356,6 @@ export default class Select2List extends Vue {
     }
   }
 
-  // Oben angepinnte Sonder-Items (§5): bleiben beim Scrollen sichtbar. Weißer
-  // Hintergrund, damit durchscrollende Treffer nicht durchscheinen.
-
-  :deep(.a-table-row.sticky) {
-    position: sticky;
-    top: 0;
-    z-index: 1;
-    background: white;
-  }
-
   // Endlos-Scroll-Ziel: braucht Höhe, damit der IntersectionObserver feuert.
 
   .sentinel {

package/src/services/start-filter/StartFilterStorage.js

@@ -0,0 +1,51 @@
+// Speicherung des persönlichen Startfilters einer Liste im localStorage.
+//
+// Gespeichert wird die Filterbelegung in Query-Form (wie sie auch in der URL
+// stünde), pro Liste über deren storageKey. Genutzt vom ListStartFilterButton
+// (speichern/löschen/anwenden) und von ListAction.initFiltersForRoute
+// (Anwenden beim Listen-Start).
+
+const KEY_PREFIX = 'start-filters-'
+
+export const StartFilterStorage = {
+  load (storageKey) {
+    if (!storageKey) {
+      return null
+    }
+    try {
+      const storageItem = localStorage.getItem(KEY_PREFIX + storageKey)
+      if (storageItem) {
+        return JSON.parse(storageItem)
+      }
+    } catch (error) {
+      console.warn('Failed to load start filter from localStorage:', error)
+    }
+    return null
+  },
+
+  save (storageKey, query) {
+    if (!storageKey) {
+      return
+    }
+    try {
+      localStorage.setItem(KEY_PREFIX + storageKey, JSON.stringify(query))
+    } catch (error) {
+      console.warn('Failed to save start filter to localStorage:', error)
+    }
+  },
+
+  clear (storageKey) {
+    if (!storageKey) {
+      return
+    }
+    try {
+      localStorage.removeItem(KEY_PREFIX + storageKey)
+    } catch (error) {
+      console.warn('Failed to clear start filter from localStorage:', error)
+    }
+  },
+
+  has (storageKey) {
+    return this.load(storageKey) !== null
+  }
+}

package/src-admin/components/index.js

@@ -19,6 +19,7 @@ import HSeparator from './HSeparator'
 import ListColumnHeader from './list/ListColumnHeader'
 import ListColumnSelector from './list/ListColumnSelector'
 import ListConfig from './list/ListConfig'
+import ListStartFilterButton from './list/ListStartFilterButton'
 import ListView from './list/ListView'
 import ModelCount from './model/ModelCount'
 import ModelIcon from './model/ModelIcon'
@@ -32,6 +33,7 @@ Vue.component('ListColumnHeader', ListColumnHeader)
 Vue.component('ListConfig', ListConfig)
 Vue.component('ListView', ListView)
 Vue.component('ListColumnSelector', ListColumnSelector)
+Vue.component('ListStartFilterButton', ListStartFilterButton)
 
 Vue.component('EditPage', EditPage)
 Vue.component('EditFormButtons', EditFormButtons)

package/src-admin/components/list/ListStartFilterButton.vue

@@ -0,0 +1,123 @@
+<template>
+  <div>
+    <!-- ohne gespeicherten Startfilter: Klick speichert direkt -->
+    <v-btn
+      v-if="!hasStartFilter"
+      class="startFilterButton"
+      title="Aktuelle Filter als Startfilter speichern"
+      small
+      @click="saveStartFilter"
+    >
+      <v-icon
+        color="#999999"
+        size="1rem"
+        class="mr-1"
+      >
+        {{ mdiPinOutline }}
+      </v-icon>
+      Filter
+    </v-btn>
+
+    <!-- mit gespeichertem Startfilter: Kontext-Menü -->
+    <a-context-menu v-else>
+      <template #activator>
+        <v-btn
+          class="startFilterButton"
+          title="Startfilter gespeichert"
+          small
+        >
+          <v-icon
+            color="#999999"
+            size="1rem"
+            class="mr-1"
+          >
+            {{ mdiPin }}
+          </v-icon>
+          Filter
+        </v-btn>
+      </template>
+
+      <a-context-menu-item @click="applyStartFilter">
+        <v-icon>
+          {{ mdiPin }}
+        </v-icon>
+        Liste auf Startfilter setzen
+      </a-context-menu-item>
+
+      <a-context-menu-item @click="saveStartFilter">
+        <v-icon>
+          {{ mdiContentSaveOutline }}
+        </v-icon>
+        Startfilter ersetzen
+      </a-context-menu-item>
+
+      <a-context-menu-item @click="removeStartFilter">
+        <v-icon>
+          {{ mdiTrashCanOutline }}
+        </v-icon>
+        Startfilter löschen
+      </a-context-menu-item>
+    </a-context-menu>
+  </div>
+</template>
+
+<script>
+import { Component, Vue } from '@a-vue'
+import { StartFilterStorage } from '@a-vue/services/start-filter/StartFilterStorage'
+import { mdiContentSaveOutline, mdiPin, mdiPinOutline, mdiTrashCanOutline } from '@mdi/js'
+
+// Filter, die nicht zum Startfilter gehören:
+// Seitenzahl und Suchfeld (zählen auch in der Filterleiste nicht als gesetzte Filter)
+const EXCLUDED_FILTERS = ['page', 'q', 'qfield']
+
+@Component({
+  props: ['filters', 'storageKey']
+})
+export default class ListStartFilterButton extends Vue {
+  mdiPin = mdiPin
+  mdiPinOutline = mdiPinOutline
+  mdiContentSaveOutline = mdiContentSaveOutline
+  mdiTrashCanOutline = mdiTrashCanOutline
+
+  hasStartFilter = false
+
+  created () {
+    this.hasStartFilter = StartFilterStorage.has(this.storageKey)
+  }
+
+  saveStartFilter () {
+    StartFilterStorage.save(this.storageKey, this.getCurrentFilterQuery())
+    this.hasStartFilter = true
+  }
+
+  /**
+   * Wendet den gespeicherten Startfilter auf die lebende Ansicht an:
+   * Query pushen, der $route.query-Watcher der Liste übernimmt den Rest
+   * (Filter ohne Query-Wert fallen auf Default zurück, inkl. Suche/Seite).
+   */
+  applyStartFilter () {
+    const query = StartFilterStorage.load(this.storageKey) || {}
+    // Duplicate-Push vermeiden (JSON-Vergleich ist key-Reihenfolge-sensitiv,
+    // daher zusätzlich catch gegen NavigationDuplicated)
+    if (JSON.stringify(this.$router.currentRoute.query) !== JSON.stringify(query)) {
+      this.$router.push({ query }).catch(() => {})
+    }
+  }
+
+  removeStartFilter () {
+    StartFilterStorage.clear(this.storageKey)
+    this.hasStartFilter = false
+  }
+
+  getCurrentFilterQuery () {
+    let query = {}
+    for (const filter of Object.values(this.filters)) {
+      if (EXCLUDED_FILTERS.includes(filter.name)) {
+        continue
+      }
+      query = { ...query, ...filter.toQuerySource() }
+    }
+    return query
+  }
+}
+</script>