WIP: Shared table options

Author: niemyjski

src/Exceptionless.Web/ClientApp/src/lib/features/projects/api.svelte.ts

@@ -271,7 +271,7 @@ export function getOrganizationProjectsQuery(request: GetOrganizationProjectsReq
 
             return response;
         },
-        queryKey: queryKeys.organization(request.route.organizationId)
+        queryKey: [...queryKeys.organization(request.route.organizationId), { params: request.params }]
     }));
 }
 

src/Exceptionless.Web/ClientApp/src/lib/features/projects/components/table/options.svelte.ts

@@ -1,22 +1,11 @@
-import type { FetchClientResponse } from '@exceptionless/fetchclient';
+import type { FetchClientResponse, ProblemDetails } from '@exceptionless/fetchclient';
+import type { CreateQueryResult } from '@tanstack/svelte-query';
 
 import NumberFormatter from '$comp/formatters/number.svelte';
 import ProjectActionsCell from '$features/projects/components/table/project-actions-cell.svelte';
 import { ViewProject } from '$features/projects/models';
-import { DEFAULT_LIMIT } from '$shared/api/api.svelte';
-import {
-    type ColumnDef,
-    type ColumnSort,
-    getCoreRowModel,
-    type PaginationState,
-    renderComponent,
-    type RowSelectionState,
-    type TableOptions,
-    type Updater,
-    type VisibilityState
-} from '@tanstack/svelte-table';
-import { PersistedState } from 'runed';
-import { untrack } from 'svelte';
+import { getSharedTableOptions } from '$features/shared/table.svelte';
+import { type ColumnDef, renderComponent, type TableOptions } from '@tanstack/svelte-table';
 
 import type { GetOrganizationProjectsParams, GetProjectsMode } from '../../api.svelte';
 
@@ -69,164 +58,25 @@ export function getColumns<TProject extends ViewProject>(mode: GetProjectsMode =
     return columns;
 }
 
-export function getTableContext<TProject extends ViewProject>(
-    params: GetOrganizationProjectsParams,
+export function getTableOptions<TProject extends ViewProject>(
+    queryParameters: GetOrganizationProjectsParams,
+    queryResponse: CreateQueryResult<FetchClientResponse<TProject[]>, ProblemDetails>,
     configureOptions: (options: TableOptions<TProject>) => TableOptions<TProject> = (options) => options
 ) {
-    let _parameters = $state(params);
-    let _pageCount = $state(0);
-    let _columns = $state(getColumns<TProject>(untrack(() => _parameters.mode)));
-    let _data = $state([] as TProject[]);
-    let _loading = $state(false);
-    let _meta = $state({} as FetchClientResponse<unknown>['meta']);
-
-    const [columnVisibility, setColumnVisibility] = createPersistedTableState('project-column-visibility', <VisibilityState>{});
-    const [pagination, setPagination] = createTableState<PaginationState>({
-        pageIndex: 0,
-        pageSize: untrack(() => _parameters.limit) ?? DEFAULT_LIMIT
-    });
-    const [sorting, setSorting] = createTableState<ColumnSort[]>([
+    return getSharedTableOptions<TProject>(
         {
-            desc: true,
-            id: 'name'
-        }
-    ]);
-    const [rowSelection, setRowSelection] = createTableState<RowSelectionState>({});
-    const onPaginationChange = (updaterOrValue: Updater<PaginationState>) => {
-        if (_loading) {
-            return;
-        }
-
-        _loading = true;
-        setPagination(updaterOrValue);
-
-        const currentPageInfo = pagination();
-        const nextLink = _meta.links?.next?.after as string;
-        const previousLink = _meta.links?.previous?.before as string;
-
-        _parameters = {
-            ..._parameters,
-            limit: currentPageInfo.pageSize,
-            page: !nextLink && !previousLink && currentPageInfo.pageIndex !== 0 ? currentPageInfo.pageIndex + 1 : undefined
-        };
-    };
-
-    const onSortingChange = (updaterOrValue: Updater<ColumnSort[]>) => {
-        setSorting(updaterOrValue);
-
-        _parameters = {
-            ..._parameters,
-            page: undefined,
-            sort:
-                sorting().length > 0
-                    ? sorting()
-                          .map((sort) => `${sort.desc ? '-' : ''}${sort.id}`)
-                          .join(',')
-                    : undefined
-        };
-    };
-
-    const options = configureOptions({
-        get columns() {
-            return _columns;
-        },
-        set columns(value) {
-            _columns = value;
-        },
-        get data() {
-            return _data;
-        },
-        set data(value) {
-            _data = value;
-        },
-        enableMultiRowSelection: true,
-        enableRowSelection: true,
-        enableSortingRemoval: false,
-        getCoreRowModel: getCoreRowModel(),
-        getRowId: (originalRow) => originalRow.id,
-        manualPagination: true,
-        manualSorting: true,
-        onColumnVisibilityChange: setColumnVisibility,
-        onPaginationChange,
-        onRowSelectionChange: setRowSelection,
-        onSortingChange,
-        get pageCount() {
-            return _pageCount;
-        },
-        state: {
-            get columnVisibility() {
-                return columnVisibility();
+            columnPersistenceKey: 'project',
+            get columns() {
+                return getColumns<TProject>(queryParameters.mode);
             },
-            get pagination() {
-                return pagination();
+            paginationStrategy: 'offset',
+            get queryParameters() {
+                return queryParameters;
             },
-            get rowSelection() {
-                return rowSelection();
-            },
-            get sorting() {
-                return sorting();
+            get queryResponse() {
+                return queryResponse.data;
             }
-        }
-    });
-
-    return {
-        get data() {
-            return _data;
-        },
-        set data(value) {
-            _data = value;
         },
-        get loading() {
-            return _loading;
-        },
-        get meta() {
-            return _meta;
-        },
-        set meta(value) {
-            _meta = value;
-
-            const limit = _parameters.limit ?? DEFAULT_LIMIT;
-            const total = (_meta?.total as number) ?? 0;
-            _pageCount = Math.ceil(total / limit);
-
-            _loading = false;
-        },
-        options,
-        get pageCount() {
-            return _pageCount;
-        },
-        get parameters() {
-            return _parameters;
-        }
-    };
-}
-
-function createPersistedTableState<T>(key: string, initialValue: T): [() => T, (updater: Updater<T>) => void] {
-    const persistedValue = new PersistedState<T>(key, initialValue);
-
-    return [
-        () => persistedValue.current,
-        (updater: Updater<T>) => {
-            if (updater instanceof Function) {
-                persistedValue.current = updater(persistedValue.current);
-            } else {
-                persistedValue.current = updater;
-            }
-        }
-    ];
-}
-
-function createTableState<T>(initialValue: T): [() => T, (updater: Updater<T>) => void] {
-    let value = $state(initialValue);
-
-    return [
-        () => value,
-        (updater: Updater<T>) => {
-            if (updater instanceof Function) {
-                value = updater(value);
-            } else {
-                value = updater;
-            }
-        }
-    ];
+        configureOptions
+    );
 }