@lavalogic/scoria 0.0.1

package/dist/Components/Table/Types/DataRepository/RemoteTableDataRepository.svelte.js

@@ -0,0 +1,521 @@
+import { Type } from '@sinclair/typebox';
+import { TableDataRepository } from './TableDataRepository.svelte.js';
+import { browser, dev } from '$app/environment';
+import { PaginationType } from '../Pagination/PaginationType.js';
+import { FilterType } from '../Filtering/FilterType.js';
+import { StringFilterMode } from '../Filtering/StringFilterMode.js';
+import { NumberDateFilterMode } from '../Filtering/NumberDateFilterMode.js';
+import { assert, asyncForEach, floFriendly, floFriendlyWithLocalTime, getErrorMessage, lastSec } from '../../../../Helpers/Helpers.svelte.js';
+function isProxyFilter(filter) {
+    return 'responseValueTransform' in filter;
+}
+export class RemoteTableDataRepository extends TableDataRepository {
+    options;
+    httpGetter;
+    httpGetterPaginated;
+    static memoise = (getter, key) => {
+        const cache = new Map();
+        return async (item) => {
+            const found = cache.get(item[key]);
+            if (found) {
+                return found;
+            }
+            const response = getter(item);
+            cache.set(item[key], response);
+            // invalidate cache shortly after
+            setTimeout(() => {
+                cache.delete(item[key]);
+            }, 60000);
+            return response;
+        };
+    };
+    constructor(options, getUserId, httpGetter, httpGetterPaginated) {
+        super(options.tableName, getUserId);
+        this.options = options;
+        this.httpGetter = httpGetter;
+        this.httpGetterPaginated = httpGetterPaginated;
+        if (browser) {
+            const userId = getUserId();
+            const savedPageSize = localStorage.getItem(`${userId}-${options.tableName}-page-size`);
+            if (savedPageSize) {
+                const saved = JSON.parse(savedPageSize);
+                if (saved) {
+                    this.setPageSize?.(saved);
+                }
+            }
+        }
+        else {
+            this.paginationState = {
+                pageIndex: 0,
+                pageSize: options.pageSize ?? 20
+            };
+        }
+        // this.paginationState = {
+        // 	pageIndex: 0,
+        // 	pageSize
+        // };
+        if (browser && options.fetchImmediately) {
+            this.reload();
+        }
+    }
+    _latestFetchId = 0;
+    _data = $state([]);
+    get data() {
+        return this._data;
+    }
+    set data(v) {
+        this._data = v;
+    }
+    paginationType = PaginationType.Remote;
+    filterType = FilterType.Virtual;
+    manualSorting = true;
+    _sorting = $state([]);
+    get sorting() {
+        return this._sorting;
+    }
+    set sorting(v) {
+        this._sorting = v;
+    }
+    _totalRows = $state(0);
+    get totalRows() {
+        return this._totalRows;
+    }
+    set totalRows(v) {
+        this._totalRows = v;
+    }
+    _lastPageIndex = $state(0);
+    _lastPage = $derived(this._lastPageIndex + 1);
+    get lastPage() {
+        return this._lastPage;
+    }
+    _isLoadingInternal = $state(false);
+    _isLoadingExternal = $state(false);
+    _isLoading = $derived(this._isLoadingInternal || this._isLoadingExternal);
+    get isLoading() {
+        return this._isLoading;
+    }
+    set isLoading(v) {
+        this._isLoadingExternal = v;
+    }
+    _filtering = $state([]);
+    get filtering() {
+        return this._filtering;
+    }
+    set filtering(v) {
+        this._filtering = v;
+        this.reload(true);
+    }
+    get pageStartIndex() {
+        return 0;
+    }
+    _pageEndIndexExclusive = $derived(this.paginationState.pageSize);
+    get pageEndIndexExclusive() {
+        return this._pageEndIndexExclusive;
+    }
+    resetFilters = () => {
+        this.filtering = [];
+    };
+    updateSorting = (stateOrCallback) => {
+        if (typeof stateOrCallback == 'function') {
+            this._sorting = stateOrCallback(this._sorting);
+        }
+        else {
+            this._sorting = stateOrCallback;
+        }
+        this._fetch(700);
+    };
+    setFilterMode = (id, mode) => {
+        let wasUpdated = false;
+        if (mode && this.filterModes.get(id) !== mode) {
+            this.filterModes.set(id, mode);
+            wasUpdated = true;
+        }
+        if (wasUpdated) {
+            const filterValue = this._filtering.find((it) => it.id === id)?.value;
+            if (filterValue != '' && filterValue != undefined) {
+                this.reload();
+            }
+        }
+    };
+    filterBy = (id, value) => {
+        // if (typeof value === 'string') {
+        // 	value = value.trim();
+        // }
+        const newFiltering = this.filtering.concat();
+        const oldIndex = newFiltering.findIndex((it) => it.id === id);
+        if (oldIndex === -1 || newFiltering[oldIndex].value != value) {
+            if (oldIndex > -1) {
+                newFiltering.splice(oldIndex, 1);
+            }
+            const hasNoValue = value == null ||
+                (typeof value === 'object' && Array.isArray(value) && value.length === 0) ||
+                (typeof value === 'string' && value.length === 0);
+            if (!hasNoValue) {
+                newFiltering.push({ id, value });
+            }
+            this.filtering = newFiltering;
+        }
+    };
+    setPageSize = (size) => {
+        if (typeof size === 'string') {
+            size = parseInt(size);
+        }
+        if (isNaN(size)) {
+            return;
+        }
+        this.paginationState = { ...this.paginationState, pageSize: size };
+        this.reload();
+    };
+    setPage = (page) => {
+        const lastIndex = this._lastPageIndex;
+        this.paginationState = {
+            ...this.paginationState,
+            pageIndex: Math.max(0, Math.min(lastIndex, page - 1))
+        };
+        this.reload();
+    };
+    nextPage = () => {
+        const lastIndex = this._lastPageIndex;
+        this.paginationState = {
+            ...this.paginationState,
+            pageIndex: Math.min(lastIndex, this.paginationState.pageIndex + 1)
+        };
+        this.reload();
+    };
+    prevPage = () => {
+        this.paginationState = {
+            ...this.paginationState,
+            pageIndex: Math.max(0, this.paginationState.pageIndex - 1)
+        };
+        this.reload();
+    };
+    reload = (debounced = false) => {
+        // force a re-fetch
+        this._fetch(debounced ? undefined : 50, true);
+    };
+    previousUri = '';
+    async _fetch(delay = 400, force = false) {
+        const fetchId = (this._latestFetchId = this._latestFetchId + 1);
+        if (delay) {
+            await new Promise((r) => setTimeout(r, delay));
+        }
+        if (this._latestFetchId !== fetchId) {
+            if (dev) {
+                console.log('cancelling due to a newer fetch id');
+            }
+            return;
+        }
+        try {
+            this._isLoadingInternal = true;
+            const { pageIndex, pageSize } = this.paginationState;
+            if (!this.options.uri) {
+                this.data = [];
+                if (dev) {
+                    console.log('cancelling due to no URI');
+                }
+                return;
+            }
+            const queryString = await this.queryString;
+            const computedUri = `${this.options.uri}${this.options.uri.includes('?') ? '&' : '?'}page=${pageIndex + 1}&recordsPerPage=${pageSize}${queryString}`;
+            if (!force && computedUri === this.previousUri) {
+                if (dev) {
+                    console.log('cancelling due to final uri being identical to the previous one');
+                }
+                return;
+            }
+            const response = await this.httpGetterPaginated(this.options.service, computedUri);
+            if (this._latestFetchId === fetchId) {
+                this.previousUri = computedUri;
+                //use response to set data AND pagination
+                const { data, pagination } = response.payload;
+                if (dev && this.options.schema) {
+                    assert(Type.Array(this.options.schema), data);
+                }
+                // HACK this type coercion needs proof. It is meant to happen when there is no response transformation, which means that R is identical to T
+                this.data = this.options.responseTransformation?.(data) ?? data;
+                this._lastPageIndex = pagination.lastPage - 1;
+                this.totalRows = pagination.totalRecords;
+                if (pagination.lastPage > 0 && pagination.lastPage < pageIndex + 1) {
+                    this._lastPageIndex = pagination.lastPage - 1;
+                    this.setPage(pagination.lastPage);
+                }
+            }
+            else {
+                if (dev) {
+                    console.log('cancelling callback as it was not the latest fetch');
+                }
+            }
+        }
+        catch (e) {
+            if (this._latestFetchId === fetchId) {
+                // TODO improve
+                alert(getErrorMessage(e));
+            }
+        }
+        finally {
+            if (this._latestFetchId === fetchId) {
+                this._isLoadingInternal = false;
+            }
+        }
+    }
+    _queryString = $derived.by(async () => {
+        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+        this.filtering;
+        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+        this.sorting;
+        const uri = [];
+        const buffer = new Map();
+        const prerequisites = new Map();
+        const remoteFilterResults = new Map();
+        this.options.defaultFilters.forEach((value, key) => {
+            buffer.set(key, value);
+        });
+        await asyncForEach(this.filtering, async (filtering) => {
+            if (filtering.value != undefined && filtering.value !== '') {
+                if (this.options.remoteFilters?.has(filtering.id)) {
+                    // debugger;
+                    const customFilter = this.options.remoteFilters.get(filtering.id);
+                    if (customFilter != null) {
+                        if (isProxyFilter(customFilter)) {
+                            if (!prerequisites.has(customFilter.service)) {
+                                prerequisites.set(customFilter.service, new Map());
+                            }
+                            const byService = prerequisites.get(customFilter.service);
+                            if (!byService.has(customFilter.group)) {
+                                byService.set(customFilter.group, new Map());
+                            }
+                            // return values for proxied requests, set directly for direct query strings
+                            const result = await (async () => {
+                                if (Array.isArray(filtering.value)) {
+                                    const _result = getNumericFilterValue(this.filterModes.get(filtering.id) ?? NumberDateFilterMode.In, filtering);
+                                    if (!_result) {
+                                        return;
+                                    }
+                                    const [, mode, value] = _result;
+                                    const finalValue = (await customFilter.searchValueTransform?.(mode, value)) ?? value;
+                                    return [customFilter.queryKey, mode, finalValue];
+                                }
+                                else {
+                                    const mode = this.filterModes.get(filtering.id) ?? StringFilterMode.Contains;
+                                    const finalValue = (await customFilter.searchValueTransform?.(mode, filtering.value)) ??
+                                        filtering.value;
+                                    return [customFilter.queryKey, mode, finalValue];
+                                }
+                            })();
+                            if (!result) {
+                                return;
+                            }
+                            const [endpoint, mode, queryString] = result;
+                            const withMode = {
+                                endpoint,
+                                finalisedQuery: endpoint + mode + queryString,
+                                responseValueTransform: customFilter.responseValueTransform
+                            };
+                            const forThisService = byService.get(customFilter.group);
+                            if (forThisService.has(customFilter.endpoint)) {
+                                forThisService.get(customFilter.endpoint).push(withMode);
+                            }
+                            else {
+                                forThisService.set(customFilter.endpoint, [withMode]);
+                            }
+                        }
+                        else {
+                            if (Array.isArray(filtering.value)) {
+                                if (filtering.value[0] instanceof Date || filtering.value[1] instanceof Date) {
+                                    const [from, to] = filtering.value;
+                                    if (from && to) {
+                                        buffer.set(filtering.id, `__between=${floFriendly(from)},${floFriendlyWithLocalTime(to, lastSec())}`);
+                                    }
+                                    else if (from) {
+                                        buffer.set(filtering.id, `__gte=${floFriendly(from)}`);
+                                    }
+                                    else if (to) {
+                                        buffer.set(filtering.id, `__lte=${floFriendlyWithLocalTime(to, lastSec())}`);
+                                    }
+                                }
+                                else if (typeof filtering.value[0] === 'string') {
+                                    const joinedValue = filtering.value.join(',');
+                                    if (!joinedValue) {
+                                        return;
+                                    }
+                                    const mode = this.filterModes.get(filtering.id) ?? StringFilterMode.In;
+                                    buffer.set(customFilter.queryKey, mode + joinedValue);
+                                }
+                                else {
+                                    const _result = getNumericFilterValue(this.filterModes.get(filtering.id) ?? NumberDateFilterMode.In, filtering);
+                                    if (!_result) {
+                                        return;
+                                    }
+                                    const [, mode, value] = _result;
+                                    buffer.set(customFilter.queryKey, mode + value);
+                                }
+                            }
+                            else {
+                                if (typeof filtering.value === 'string' || typeof filtering.value == 'number') {
+                                    const isNumeric = !isNaN(Number(filtering.value)) ||
+                                        typeof filtering.value === 'number' ||
+                                        (filtering.value.includes(',') &&
+                                            filtering.value.split(',').every((slice) => !isNaN(Number(slice))));
+                                    const mode = isNumeric
+                                        ? (this.filterModes.get(filtering.id) ?? NumberDateFilterMode.In)
+                                        : (this.filterModes.get(filtering.id) ?? StringFilterMode.Contains);
+                                    buffer.set(customFilter.queryKey, (mode + filtering.value));
+                                }
+                                else if (dev) {
+                                    console.warn(`unhandled filter value type ${typeof filtering.value} (value ${filtering.value})`);
+                                    alert(`unhandled filter value type ${typeof filtering.value} (value ${filtering.value})`);
+                                }
+                            }
+                        }
+                    }
+                    return;
+                }
+                // if value is numeric
+                if (Array.isArray(filtering.value)) {
+                    if (filtering.value[0] instanceof Date || filtering.value[1] instanceof Date) {
+                        const [from, to] = filtering.value;
+                        if (from && to) {
+                            buffer.set(filtering.id, `__between=${floFriendly(from)},${floFriendlyWithLocalTime(to, lastSec())}`);
+                        }
+                        else if (from) {
+                            buffer.set(filtering.id, `__gte=${floFriendly(from)}`);
+                        }
+                        else if (to) {
+                            buffer.set(filtering.id, `__lte=${floFriendlyWithLocalTime(to, lastSec())}`);
+                        }
+                    }
+                    else {
+                        const userMode = this.filterModes.get(filtering.id) ?? NumberDateFilterMode.In;
+                        const result = getNumericFilterValue(userMode, filtering);
+                        if (result) {
+                            const [key, mode, value] = result;
+                            buffer.set(key, mode + value);
+                        }
+                    }
+                }
+                else if (typeof filtering.value == 'string') {
+                    const mode = this.filterModes.get(filtering.id) ?? StringFilterMode.Contains;
+                    buffer.set(filtering.id, mode + filtering.value);
+                }
+                else if (dev) {
+                    console.log(filtering);
+                    // eslint-disable-next-line no-debugger
+                    debugger;
+                }
+            }
+        });
+        const finalisedRquests = [];
+        for (const [service, groups] of prerequisites) {
+            for (const [, filterMap] of groups) {
+                for (const [endpoint, filters] of filterMap) {
+                    const q = `${endpoint}?${filters.map((it) => it.finalisedQuery).join('&')}`;
+                    finalisedRquests.push([service, q, filters]);
+                }
+            }
+        }
+        await asyncForEach(finalisedRquests, async ([service, uri, filters]) => {
+            const response = await this.httpGetter(service, uri);
+            await asyncForEach(filters, async (filter) => {
+                const result = await filter.responseValueTransform(response.payload.data);
+                if (result) {
+                    const [key, value] = result;
+                    if (remoteFilterResults.has(key)) {
+                        remoteFilterResults.set(key, remoteFilterResults.get(key).filter((it) => value.includes(it)));
+                    }
+                    else {
+                        remoteFilterResults.set(key, value);
+                    }
+                }
+            });
+        });
+        remoteFilterResults.forEach((values, key) => {
+            const left = `${key}__in=`;
+            if (values.length) {
+                if (dev && buffer.has(left)) {
+                    console.log(buffer.get(left));
+                    console.log(values);
+                    // eslint-disable-next-line no-debugger
+                    debugger;
+                }
+                buffer.set(left, values.toString());
+            }
+        });
+        buffer.forEach((value, key) => {
+            if (value.length) {
+                uri.push(key + value);
+            }
+        });
+        if (this.sorting.length) {
+            const sortingQueryString = this.sorting
+                .map((it) => it.id + (it.desc ? '__desc' : '__asc'))
+                .join(',');
+            uri.push(`sortBy=${sortingQueryString}`);
+        }
+        return uri.length ? '&' + uri.join('&') : '';
+    });
+    get queryString() {
+        return this._queryString;
+    }
+}
+function getNumericFilterValue(mode, it) {
+    if (Array.isArray(it.value)) {
+        switch (mode) {
+            case NumberDateFilterMode.Equals:
+            case NumberDateFilterMode.Only:
+            case NumberDateFilterMode.NotEquals:
+            case NumberDateFilterMode.LessThan:
+            case NumberDateFilterMode.LessThanOrEqual:
+            case NumberDateFilterMode.GreaterThan:
+            case NumberDateFilterMode.GreaterThanOrEqual: {
+                const [min] = TableDataRepository.getMinMax(it.value);
+                if (min != null) {
+                    return [it.id, mode, min.toString()];
+                }
+                break;
+            }
+            case NumberDateFilterMode.Between: {
+                const [min, max] = TableDataRepository.getMinMax(it.value);
+                if (min != null) {
+                    if (max != null) {
+                        return [it.id, mode, `${min},${max}`];
+                    }
+                    else {
+                        return [it.id, NumberDateFilterMode.GreaterThanOrEqual, min.toString()];
+                    }
+                }
+                else if (max != null) {
+                    return [it.id, NumberDateFilterMode.LessThanOrEqual, max.toString()];
+                }
+                break;
+            }
+            case NumberDateFilterMode.In:
+            case NumberDateFilterMode.NotIn: {
+                const values = TableDataRepository.getValues(it.value);
+                if (values.length) {
+                    return [it.id, mode, values.toString()];
+                }
+                break;
+            }
+            case NumberDateFilterMode.null: {
+                // TODO true or false
+                return [it.id, mode, 'true'];
+            }
+            case StringFilterMode.ImplicitEquals:
+            case StringFilterMode.Equals:
+            case StringFilterMode.NotEquals:
+            case StringFilterMode.Contains:
+            case StringFilterMode.NotContains:
+            case StringFilterMode.StartsWith:
+            case StringFilterMode.NotStartsWith:
+            case StringFilterMode.EndsWith:
+            case StringFilterMode.NotEndsWith:
+            case StringFilterMode.In:
+            case StringFilterMode.NotIn:
+            case StringFilterMode.Empty:
+            case StringFilterMode.null: {
+                throw new Error('Used stirng filtering mode were a numeric filter was expected');
+            }
+        }
+    }
+    return null;
+}

package/dist/Components/Table/Types/DataRepository/SortingState.d.ts

@@ -0,0 +1,5 @@
+export interface ColumnSort {
+    desc: boolean;
+    id: string;
+}
+export type SortingState = ColumnSort[];

package/dist/Components/Table/Types/DataRepository/SortingState.js

@@ -0,0 +1 @@
+export {};

package/dist/Components/Table/Types/DataRepository/TableDataRepository.svelte.d.ts

@@ -0,0 +1,47 @@
+import { SvelteMap } from 'svelte/reactivity';
+import type { FilterMode } from '../Filtering/FilterMode.js';
+import type { FilterType } from '../Filtering/FilterType.js';
+import type { PaginationState } from '../Pagination/PaginationState.js';
+import type { PaginationType } from '../Pagination/PaginationType.js';
+import type { DataRepository } from './DataRepository.js';
+import type { ColumnFiltersState } from '../Filtering/ColumnFiltersState.js';
+import type { SortingState } from './SortingState.js';
+export interface ReadonlyPaginationState extends PaginationState {
+    readonly pageIndex: number;
+    readonly pageSize: number;
+}
+export declare abstract class TableDataRepository<T extends object> implements DataRepository<T> {
+    private tableName;
+    private getUserId;
+    abstract paginationType: PaginationType.Remote | PaginationType.Local;
+    abstract filterType: FilterType;
+    abstract totalRows: number;
+    abstract isLoading: boolean;
+    abstract data: T[];
+    abstract setPageSize: (size: number) => void;
+    abstract filtering: ColumnFiltersState;
+    abstract setFilterMode: (id: string, mode: FilterMode) => void;
+    abstract filterBy: (id: string, value: unknown) => void;
+    abstract resetFilters: () => void;
+    abstract setPage: (page: number) => void;
+    abstract nextPage: () => void;
+    abstract prevPage: () => void;
+    abstract sorting: SortingState;
+    abstract pageStartIndex: number;
+    abstract pageEndIndexExclusive: number;
+    constructor(tableName: string, getUserId: () => string | undefined);
+    private _paginationState;
+    get paginationState(): ReadonlyPaginationState;
+    set paginationState(v: ReadonlyPaginationState);
+    private _previouslyViewedPage;
+    get previouslyViewedPage(): number;
+    private set previouslyViewedPage(value);
+    filterModes: SvelteMap<string, FilterMode>;
+    private _forceRefresh;
+    get forceRefresh(): () => void;
+    set forceRefresh(v: () => void);
+    readonly registerRefreshMethod: (method: () => void) => void;
+    protected getValueSet(values: (string | number | undefined)[]): Set<number>;
+    static getValues(values: (string | number | undefined)[]): number[];
+    static getMinMax(values: (string | number | undefined)[]): number[] | undefined[];
+}

package/dist/Components/Table/Types/DataRepository/TableDataRepository.svelte.js

@@ -0,0 +1,75 @@
+import { browser, dev } from '$app/environment';
+import { SvelteMap } from 'svelte/reactivity';
+export class TableDataRepository {
+    tableName;
+    getUserId;
+    constructor(tableName, getUserId) {
+        this.tableName = tableName;
+        this.getUserId = getUserId;
+    }
+    _paginationState = $state({
+        pageIndex: 0,
+        pageSize: 20
+    });
+    get paginationState() {
+        return this._paginationState;
+    }
+    set paginationState(v) {
+        this._previouslyViewedPage = this._paginationState?.pageIndex;
+        this._paginationState = v;
+        if (browser) {
+            localStorage.setItem(`${this.getUserId()}-${this.tableName}-page-size`, v.pageSize.toString());
+        }
+    }
+    _previouslyViewedPage = $state(0);
+    get previouslyViewedPage() {
+        return this._previouslyViewedPage;
+    }
+    set previouslyViewedPage(v) {
+        this._previouslyViewedPage = v;
+    }
+    filterModes = $state(new SvelteMap());
+    _forceRefresh = $state(() => {
+        if (dev) {
+            console.warn('tried to force refresh without a callback registered');
+        }
+    });
+    get forceRefresh() {
+        return this._forceRefresh;
+    }
+    set forceRefresh(v) {
+        this._forceRefresh = v;
+        this._forceRefresh();
+    }
+    registerRefreshMethod = (method) => {
+        this._forceRefresh = method;
+    };
+    getValueSet(values) {
+        return new Set(TableDataRepository.getValues(values));
+    }
+    static getValues(values) {
+        return values
+            .toString()
+            .split(',')
+            .map((it) => {
+            return parseFloat(it.toString());
+        })
+            .filter((it) => !isNaN(it));
+    }
+    static getMinMax(values) {
+        let [min, max] = values;
+        if (typeof min === 'string') {
+            min = parseFloat(min);
+        }
+        if (typeof max === 'string') {
+            max = parseFloat(max);
+        }
+        if (min == null || isNaN(min)) {
+            return [undefined, undefined];
+        }
+        if (max == null || isNaN(max)) {
+            return [min, min];
+        }
+        return [min, max];
+    }
+}

package/dist/Components/Table/Types/ExpandedPanel.d.ts

@@ -0,0 +1,6 @@
+export declare const enum ExpandedPanel {
+    None = 0,
+    Column = 1,
+    Filter = 2,
+    Toolbox = 3
+}

package/dist/Components/Table/Types/ExpandedPanel.js

@@ -0,0 +1,7 @@
+export var ExpandedPanel;
+(function (ExpandedPanel) {
+    ExpandedPanel[ExpandedPanel["None"] = 0] = "None";
+    ExpandedPanel[ExpandedPanel["Column"] = 1] = "Column";
+    ExpandedPanel[ExpandedPanel["Filter"] = 2] = "Filter";
+    ExpandedPanel[ExpandedPanel["Toolbox"] = 3] = "Toolbox";
+})(ExpandedPanel || (ExpandedPanel = {}));

package/dist/Components/Table/Types/Filtering/ColumnFiltersState.d.ts

@@ -0,0 +1,5 @@
+export interface ColumnFilter {
+    id: string;
+    value: unknown;
+}
+export type ColumnFiltersState = ColumnFilter[];

package/dist/Components/Table/Types/Filtering/ColumnFiltersState.js

@@ -0,0 +1 @@
+export {};