# Tabelleneinstellungen

# TableSettings – Persistenz von Tabelleneinstellungen (ab Version 2.31)

<p class="callout info">**Interne Entwicklerdokumentation:** Eine detailliertere Version dieser Seite inkl. Entscheidungshistorie und PR-Kontext befindet sich im [Azure DevOps Wiki](https://dev.azure.com/DEXPRO/DEXPRO%20Platform/_wiki/wikis/DEXPRO-Platform.wiki/113/TableSettings-Pe%0D%0A%20%20rsistenz-von-Tabelleneinstellungen) (nur für DEXPRO-interne Entwickler zugänglich).</p>

## Übersicht

Die Klasse `TableSettings` (`frontend/src/util/TableSettings.ts`) ist ein zentrales Utility, das alle benutzerspezifischen Tabelleneinstellungen verwaltet und **serverseitig persistiert**. Einstellungen bleiben nach einem Seiten-Reload oder Browser-Neustart erhalten.

<table id="bkmrk-einstellung-beschrei"><thead><tr><th>Einstellung</th><th>Beschreibung</th></tr></thead><tbody><tr><td>**Seitengröße**</td><td>Anzahl Zeilen pro Seite (Rows per Page)</td></tr><tr><td>**Spaltenbreiten**</td><td>Individuelle Spaltenbreiten (nur Dokumentenliste)</td></tr><tr><td>**Sortierung**</td><td>Sortierfeld und -richtung pro Tabellenview</td></tr><tr><td>**Eingefrorene Spalten**</td><td>Welche Spalten links fixiert sind</td></tr></tbody></table>

Alle Einstellungen werden als JSON-String im Vuex-Store unter `userSettings.tableSettings` gehalten und über `UserApi.putAllUserProperties()` serverseitig gespeichert.

## Datenspeicherstruktur

Alle Einträge sind nach **Route-Namen** indexiert. Darunter gibt es je nach View-Typ weitere Sub-Keys.

```
{
    "DocumentListView": {                                                                                        
      "sort":          { "42": [{ "field": "status", "order": 1 }] },
      "frozenColumns": { "42": { "step": true, "status": true, "errorText": false } },                           
      "pageSize": 100                                                                                            
    },                                                                                                           
    "AdminBatchClassList": {                                                                                     
      "sort": { "": { "field": "name", "order": 1 } }                                                            
    },
    "AdminQueueList": {                                                                                          
      "sort": { "Validation": { "field": "created", "order": -1 } }                                              
    }
  }
```

### Sub-Key-Konventionen

<table id="bkmrk-view-typ-sub-key-doc"><thead><tr><th>View-Typ</th><th>Sub-Key</th></tr></thead><tbody><tr><td>DocumentList (Sort + Frozen)</td><td>`documentClassId` (Zahl)</td></tr><tr><td>QueueList (Sort)</td><td>`stepName` (String, z.B. `"Validation"`)</td></tr><tr><td>Alle anderen Listen</td><td>`""` (leerer String)</td></tr></tbody></table>

## API-Referenz

### Bestehende Methoden

#### `getTableListPagination(store, routeName): number`

Liest die gespeicherte Seitengröße für eine Route. Gibt `25` zurück wenn kein Wert hinterlegt ist.

#### `saveTableListPagination(t, toast, store, userApi, routeName, rows): void`

Speichert die Seitengröße. Bei Standardwert (`25`) wird der Eintrag entfernt. Mergt in bestehende Route-Einträge – überschreibt `sort`/`frozenColumns` nicht.

#### `saveDocumentListTableColumnWidths(t, toast, store, userApi, documentClassId, columnWidths):            void`

Speichert Spaltenbreiten für eine Dokumentenklasse. Bei leerem Array wird der Eintrag entfernt.

### Neue generische Methoden (ab Version 2.31)

#### `getTableSubSetting<T>(store, routeName, property, subKey): T | null`

Generischer Getter für verschachtelte Einstellungen der Form `settings[routeName][property][subKey]`.

<table id="bkmrk-parameter-typ-beispi"><thead><tr><th>Parameter</th><th>Typ</th><th>Beispiel</th></tr></thead><tbody><tr><td>`routeName`</td><td>`string`</td><td>`"DocumentListView"`, `"AdminBatchClassList"`</td></tr><tr><td>`property`</td><td>`string`</td><td>`"sort"`, `"frozenColumns"`</td></tr><tr><td>`subKey`</td><td>`string | number`</td><td>`documentClassId`, `stepName`, `""`</td></tr></tbody></table>

Gibt `null` zurück wenn kein Wert vorhanden oder ein Fehler auftritt.

#### `saveTableSubSetting<T>(t, toast, store, userApi, routeName, property, subKey, value, isEmpty?):   void`

Generischer Setter. Räumt leere Elternobjekte nach einer Löschung automatisch auf.

<table id="bkmrk-parameter-typ-beschr"><thead><tr><th>Parameter</th><th>Typ</th><th>Beschreibung</th></tr></thead><tbody><tr><td>`routeName`</td><td>`string`</td><td>Route-Name als Top-Level-Schlüssel</td></tr><tr><td>`property`</td><td>`string`</td><td>Setting-Kategorie (`"sort"`, `"frozenColumns"`)</td></tr><tr><td>`subKey`</td><td>`string | number`</td><td>Instanz-Schlüssel</td></tr><tr><td>`value`</td><td>`T`</td><td>Zu speichernder Wert</td></tr><tr><td>`isEmpty`</td><td>`(v: T) => boolean`</td><td>Optional: wenn `true`, wird der Eintrag gelöscht. Default: `value == null`</td></tr></tbody></table>

## Betroffene Views (ab Version 2.31)

<table id="bkmrk-view-%2F-datei-sortier"><thead><tr><th>View / Datei</th><th>Sortierung</th><th>Frozen Columns</th><th>Reset-Button</th></tr></thead><tbody><tr><td>`DocumentList.vue`</td><td>Multi-Sort</td><td>ja</td><td>Sort + Frozen</td></tr><tr><td>`LocatorList.vue`</td><td>Single-Sort</td><td>ja</td><td>Sort + Frozen</td></tr><tr><td>`QueueList.vue`</td><td>Single-Sort per Step</td><td>–</td><td>nur Sort</td></tr><tr><td>`BatchClassList.vue`</td><td>Single-Sort</td><td>–</td><td>nur Sort</td></tr><tr><td>`DocumentClassList.vue`</td><td>Single-Sort</td><td>–</td><td>nur Sort</td></tr><tr><td>`DocumentClassFieldTable.vue`</td><td>Single-Sort</td><td>–</td><td>nur Sort</td></tr><tr><td>`DocumentClassTableColumns.vue`</td><td>Single-Sort</td><td>–</td><td>nur Sort</td></tr><tr><td>`MasterDataTableList.vue`</td><td>Single-Sort</td><td>–</td><td>nur Sort</td></tr><tr><td>`MasterDataRows.vue`</td><td>Single-Sort</td><td>–</td><td>nur Sort</td></tr></tbody></table>

## Reset-Button

Jede betroffene View hat im Paginator-Bereich einen Reset-Button (Icon: `mdi-sort-variant-remove`). Beim Klick wird die Sortierung zurückgesetzt, eingefrorene Spalten auf View-Defaults zurückgestellt und alle Einstellungen serverseitig gelöscht.

<table id="bkmrk-i18n-key-deutsch-squ"><thead><tr><th>i18n-Key</th><th>Deutsch</th></tr></thead><tbody><tr><td>`Squeeze.Validation.Buttons.ResetTableSettings`</td><td>Sortierung und fixierte Spalten zurücksetzen</td></tr><tr><td>`Squeeze.Validation.Buttons.ResetTableSort`</td><td>Sortierung zurücksetzen</td></tr></tbody></table>

## Integration: Neue View anbinden

### Sortierung

```
import { TableSettings } from "@/util/TableSettings";                                               
  import { useRoute } from "vue-router";
                                                                                                                 
  const route = useRoute();
  const userApi = ClientManager.getInstance().squeeze.user;                                                      
  const currentSortField = ref<string | undefined>(undefined);                                             
  const currentSortOrder = ref<number>(0);                                                                 
                                                                                                                 
  // onMounted – gespeicherte Sortierung laden                                                                   
  const savedSort = TableSettings.getTableSubSetting<{ field: string; order: number }>(
    store, route.name as string, 'sort', ''                                                                      
  );              
  if (savedSort) {                                                                                               
    currentSortField.value = savedSort.field;                                                                    
    currentSortOrder.value = savedSort.order;
  }                                                                                                              
                  
  // onSort – Sortierung speichern
  const onSort = (event: { sortField: string; sortOrder: number }) => {
    TableSettings.saveTableSubSetting(                                                                           
      t, toast, store, userApi,                                                                                  
      route.name as string, 'sort', '',                                                                          
      { field: event.sortField, order: event.sortOrder },                                                        
      v => !v || v.order === 0                                                                                
    );
  };                                                                                                             
                                                                                                                 
  // Reset
  const resetTableSettings = () => {                                                                          
    currentSortField.value = undefined;
    currentSortOrder.value = 0;
    TableSettings.saveTableSubSetting(
      t, toast, store, userApi,
      route.name as string, 'sort', '', null, () => true                                                      
    );
  };
```

### Frozen Columns (zusätzlich)

```
// onMounted – gespeicherte Frozen Columns laden
  const savedFrozen = TableSettings.getTableSubSetting<Record<string, boolean>>(                     
    store, route.name as string, 'frozenColumns', ''
  );                                                                                                             
  if (savedFrozen) {
    Object.assign(frozenColumns, savedFrozen);                                                                   
  }               

  // Nach jeder Änderung speichern                                                                               
  TableSettings.saveTableSubSetting(
    t, toast, store, userApi,                                                                                    
    route.name as string, 'frozenColumns', '',
    { ...frozenColumns }
  );                                                                                                             
   
  // Reset – Defaults wiederherstellen und Eintrag löschen                                                       
  Object.assign(frozenColumns, { name: true, description: true }); // View-spezifische Defaults
  TableSettings.saveTableSubSetting(                                                                             
    t, toast, store, userApi,
    route.name as string, 'frozenColumns', '',                                                                   
    null, () => true
  );
```

### Reset-Button im Template

```
<template #paginatorend>
    <Button                                                                                                   
      v-tooltip.bottom="$t('Squeeze.Validation.Buttons.ResetTableSort')"
      type="button"                                                                                              
      icon="mdi mdi-sort-variant-remove"
      class="p-button p-button-text p-ml-2"                                                                      
      @click="resetTableSettings"
    />                                                                                                        
  </template>
```