@afeefa/vue-app 0.0.344 → 0.0.346

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

@@ -1 +1 @@
-0.0.344
+0.0.346

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@afeefa/vue-app",
-  "version": "0.0.344",
+  "version": "0.0.346",
   "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"
@@ -422,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 [
@@ -445,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)"
         >
@@ -62,7 +61,12 @@
                 class="flex-grow-1"
                 style="min-width: 0;"
               >
-                <div class="rowTitle">
+                <!-- Nativer Tooltip immer mit vollem Titel — lange Titel werden
+                     per Ellipsis gekappt (und beim Hover vom nicht-Button überdeckt). -->
+                <div
+                  class="rowTitle"
+                  :title="title(model)"
+                >
                   {{ title(model) }}
                 </div>
                 <div
@@ -144,10 +148,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
     }
   ]
 })
@@ -310,6 +311,9 @@ export default class Select2List extends Vue {
     min-width: 0;
     padding-right: 0;
     cursor: pointer;
+
+    // Anker für den absolut gelegten nicht-Button.
+    position: relative;
   }
 
   :deep(.a-table-row.included) {
@@ -336,9 +340,46 @@ export default class Select2List extends Vue {
 
   // Nicht-Button nur bei Zeilen-Hover sichtbar (auch der aktive). Der
   // Ausschluss-Zustand bleibt an der roten/durchgestrichenen Zeile erkennbar.
+  // Absolut über dem Textende statt als eigene Flex-Spalte: reserviert keine
+  // Breite (auch unsichtbar belegte er sonst Platz und kappte den Titel),
+  // sondern überdeckt den Titel nur während des Hovers.
 
   .excludeBtn {
     visibility: hidden;
+    position: absolute;
+    right: .5rem;
+    top: 50%;
+    transform: translateY(-50%);
+
+    // Liegt über dem Text — zwei Ränder heben ihn ab: innen eine dezente Linie
+    // (gegen den Zeilen-Hover-Hintergrund), außen ein 5px-Ring in der
+    // Hover-Hintergrundfarbe (#F4F4F4, ATableRow), der Luft zum überdeckten
+    // Text schafft (Button wirkt „freigestellt"). Ring als outline, NICHT als
+    // box-shadow — das globale `.v-btn { box-shadow: none !important }` würde
+    // einen Shadow-Ring schlucken. Die Border braucht !important, weil Vuetifys
+    // Farbklasse (.grey.lighten-3 bzw. .error) border-color per !important
+    // plattzieht.
+    border: 1px solid rgba(0, 0, 0, .1) !important;
+    outline: 5px solid #F4F4F4;
+
+    &.active {
+      border-color: transparent !important;
+    }
+
+    // Vuetifys x-small-Button bringt min-width 36px + breites Padding mit —
+    // über dem Text soll er so schmal wie möglich sein.
+
+    &.v-btn {
+      min-width: 0;
+      padding: 0 .25rem;
+    }
+  }
+
+  // Tastatur-aktive Zeile hat einen anderen Hintergrund (#EEEEFF, ATableRow) —
+  // der Freisteller-Ring zieht mit.
+
+  :deep(.a-table-row.active) .excludeBtn {
+    outline-color: #EEEEFF;
   }
 
   :deep(.a-table-row:hover) .excludeBtn {
@@ -360,16 +401,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>