@3mo/moddable-data-grid/dist/DataGridModesController.js

A moddable variant of @3mo/fetchable-data-grid

import { Controller } from '@a11d/lit';
import { DialogDeletion } from '@3mo/standard-dialogs';
import { Localizer } from '@3mo/localization';
Localizer.dictionaries.add({
    de: {
        'view "${name:string}"': 'Ansicht "${name}"',
    }
});
export class DataGridModesController extends Controller {
    get defaultMode() { return this._defaultMode; }
    get selectedMode() { return this._selectedMode; }
    get modes() { return this._modes; }
    get archivedModes() {
        return this.modes.filter(m => m.archived);
    }
    get visibleModes() {
        return this.modes.filter(m => !m.archived || m.id === this.selectedMode?.id);
    }
    get adapter() {
        return this.host.modesAdapter;
    }
    constructor(host) {
        super(host);
        this.host = host;
        this.dataGridKey = `ModdableDataGrid.${this.host.tagName.toLowerCase()}`;
        this._modes = new Array();
        this._initialized = false;
    }
    hostUpdated() {
        if (!this._defaultMode && !!this.host.columns.length) {
            this._defaultMode = this.host.currentMode.clone();
        }
    }
    get initialized() { return this._initialized; }
    async hostConnected() {
        await this.fetch();
        this._initialized = true;
        this.host.requestFetch();
    }
    async fetch() {
        await this.fetchAll();
        await this.fetchSelected();
        this.host.requestUpdate();
    }
    async fetchAll() {
        this._modes = await this.adapter.getAll(this.dataGridKey);
    }
    async fetchSelected() {
        const selectedModeId = await this.adapter.getSelectedId(this.dataGridKey);
        await this.set(this._modes.find(m => m.id === selectedModeId));
    }
    async set(mode) {
        await this.adapter.setSelectedId(this.dataGridKey, mode?.id);
        this._selectedMode = mode;
        this.host.modeChange.dispatch(mode);
        this.host.runPreventingFetch(() => (this.selectedMode ?? this.defaultMode)?.apply(this.host));
        this.host.requestFetch();
    }
    async save(mode) {
        await this.adapter.save(this.dataGridKey, mode);
        await this.fetch();
    }
    async delete(mode) {
        await new DialogDeletion({
            label: t('view "${name:string}"', { name: mode.name }),
            deletionAction: async () => {
                if (this.selectedMode?.id === mode.id) {
                    this.set(undefined);
                }
                await this.adapter.delete(this.dataGridKey, mode);
                await this.fetch();
            },
        }).confirm();
    }
}