@masterteam/client-components 0.0.60 → 0.0.62

package/fesm2022/masterteam-client-components-client-list.mjs

@@ -1327,6 +1327,76 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
             args: [{ selector: 'mt-client-list-informative-view', standalone: true, imports: [CommonModule, Card, DashboardViewer, SkeletonModule, TranslocoPipe], template: "<div class=\"grid gap-4\" [style.gridTemplateColumns]=\"gridTemplateColumns\">\r\n  @if (informativeState().config.contentStart) {\r\n    <div\r\n      [style.gridColumn]=\"\r\n        slotGridSpan(informativeState().config.layout.startSpan)\r\n      \"\r\n    >\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"informativeState().config.contentStart\"\r\n        [ngTemplateOutletContext]=\"templateContext(informativeState())\"\r\n      />\r\n    </div>\r\n  }\r\n\r\n  <div\r\n    [style.gridColumn]=\"\r\n      slotGridSpan(informativeState().config.layout.tableSpan)\r\n    \"\r\n  >\r\n    <mt-card>\r\n      @if (\r\n        informativeState().loading &&\r\n        !informativeState().dashboardData?.charts?.length\r\n      ) {\r\n        <div class=\"flex flex-col gap-3 py-3\">\r\n          <p-skeleton height=\"6rem\" />\r\n          <p-skeleton height=\"12rem\" />\r\n          <p-skeleton height=\"12rem\" />\r\n        </div>\r\n      } @else if (informativeState().error) {\r\n        <div\r\n          class=\"rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-700\"\r\n        >\r\n          {{ informativeState().error }}\r\n        </div>\r\n      } @else if (!informativeState().dashboardData?.charts?.length) {\r\n        <div class=\"p-6 text-center text-gray-400\">\r\n          {{\r\n            \"components.clientComponents.list.noInformativeDashboard\"\r\n              | transloco\r\n          }}\r\n        </div>\r\n      } @else {\r\n        <div class=\"min-h-[420px]\">\r\n          <mt-dashboard-viewer\r\n            [isPage]=\"false\"\r\n            [showFilters]=\"false\"\r\n            [dashboardData]=\"informativeState().dashboardData\"\r\n            [extraFilters]=\"dashboardExtraFilters()\"\r\n          />\r\n        </div>\r\n      }\r\n    </mt-card>\r\n  </div>\r\n\r\n  @if (informativeState().config.contentEnd) {\r\n    <div\r\n      [style.gridColumn]=\"\r\n        slotGridSpan(informativeState().config.layout.endSpan)\r\n      \"\r\n    >\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"informativeState().config.contentEnd\"\r\n        [ngTemplateOutletContext]=\"templateContext(informativeState())\"\r\n      />\r\n    </div>\r\n  }\r\n</div>\r\n" }]
         }], propDecorators: { state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: true }] }] } });
 
+function mergeRuntimeFilters(configured = [], runtime = {}, columns = []) {
+    const filters = [...configured];
+    for (const [rawKey, rawValue] of Object.entries(runtime)) {
+        const key = rawKey === 'generalSearch' ? 'Name' : rawKey;
+        const column = columns.find((item) => item.key === rawKey);
+        const filterType = column
+            ? TableValueResolver.getColumnFilterType(column)
+            : null;
+        if (isRange(rawValue)) {
+            appendRange(filters, key, rawValue, filterType === 'date');
+            continue;
+        }
+        const scalar = toScalar(rawValue);
+        const value = rawKey === 'generalSearch' && typeof scalar === 'string'
+            ? scalar.trim()
+            : scalar;
+        if (value === null)
+            continue;
+        filters.push({
+            key,
+            operator: rawKey === 'generalSearch' || filterType === 'text'
+                ? 'Contains'
+                : 'Equals',
+            value,
+        });
+    }
+    return filters;
+}
+function appendRange(filters, key, range, isDate) {
+    const from = toRangeValue(range.from, isDate);
+    const to = toRangeValue(range.to, isDate);
+    if (from !== null) {
+        filters.push({ key, operator: 'GreaterThanOrEqual', value: from });
+    }
+    if (to !== null) {
+        filters.push({ key, operator: 'LessThanOrEqual', value: to });
+    }
+}
+function isRange(value) {
+    return (!!value && typeof value === 'object' && ('from' in value || 'to' in value));
+}
+function toRangeValue(value, isDate) {
+    if (value === null || value === undefined || value === '')
+        return null;
+    if (!isDate)
+        return value;
+    const date = value instanceof Date ? value : new Date(String(value));
+    if (Number.isNaN(date.getTime()))
+        return null;
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    return `${year}-${month}-${day}`;
+}
+function toScalar(value) {
+    if (Array.isArray(value)) {
+        return value.length === 1 ? toScalar(value[0]) : null;
+    }
+    if (value === null || value === undefined || value === '')
+        return null;
+    if (typeof value !== 'object')
+        return value;
+    const item = value;
+    return toScalar(item['value'] ??
+        item['id'] ??
+        item['key'] ??
+        item['userName'] ??
+        item['displayName']);
+}
+
 const DEFAULT_AREA_TYPE = 'table';
 const DEFAULT_MODE = 'auto';
 const DEFAULT_TYPE = 'form';
@@ -1357,6 +1427,7 @@ class ClientList {
     subscriptions = new Map();
     inFlightRequestSignatures = new Map();
     fulfilledRequestSignatures = new Map();
+    runtimeFilters = new Map();
     constructor() {
         effect(() => {
             const configs = this.configurations();
@@ -1370,10 +1441,12 @@ class ClientList {
     }
     onLazyLoad(itemKey, event) {
         const item = this.state.itemsByKey()[itemKey];
-        if (!item ||
-            item.type === 'informative' ||
-            item.areaType !== 'table' ||
-            !item.config.isPaginated) {
+        if (!item || item.type === 'informative' || !item.config.isPaginated) {
+            return;
+        }
+        this.runtimeFilters.set(item.key, event.filters ?? {});
+        if (item.areaType === 'cards') {
+            this.loadCards(item.key, item.config);
             return;
         }
         const take = this.resolvePositiveInteger(event.pageSize) ?? item.take;
@@ -1805,7 +1878,8 @@ class ClientList {
             return;
         }
         const query = this.toTableQuery(config, skip, take);
-        const requestSignature = this.createTableRequestSignature(config, query);
+        const filters = this.resolveFetchFilters(key, config);
+        const requestSignature = this.createTableRequestSignature(config, query, filters);
         if (force) {
             this.inFlightRequestSignatures.delete(key);
             this.fulfilledRequestSignatures.delete(key);
@@ -1818,9 +1892,7 @@ class ClientList {
         this.inFlightRequestSignatures.set(key, requestSignature);
         this.state.setLoading(key, true);
         this.state.setError(key, null);
-        const sub = this.api
-            .getRows(config.contextKey, query, config.filters)
-            .subscribe({
+        const sub = this.api.getRows(config.contextKey, query, filters).subscribe({
             next: (response) => {
                 let hasLoadedData = false;
                 if (response.data) {
@@ -1859,7 +1931,8 @@ class ClientList {
             this.state.setError(key, this.getMissingIdentifiersMessage(config));
             return;
         }
-        const requestSignature = this.createCardsRequestSignature(config);
+        const filters = this.resolveFetchFilters(key, config);
+        const requestSignature = this.createCardsRequestSignature(config, filters);
         if (force) {
             this.inFlightRequestSignatures.delete(key);
             this.fulfilledRequestSignatures.delete(key);
@@ -1872,9 +1945,7 @@ class ClientList {
         this.inFlightRequestSignatures.set(key, requestSignature);
         this.state.setLoading(key, true);
         this.state.setError(key, null);
-        const sub = this.api
-            .getCards(config.contextKey, config.filters)
-            .subscribe({
+        const sub = this.api.getCards(config.contextKey, filters).subscribe({
             next: (response) => {
                 let hasLoadedData = false;
                 if (response.data) {
@@ -2091,6 +2162,11 @@ class ClientList {
                 this.fulfilledRequestSignatures.delete(key);
             }
         }
+        for (const key of this.runtimeFilters.keys()) {
+            if (!activeKeys.has(key)) {
+                this.runtimeFilters.delete(key);
+            }
+        }
         for (const key of this.rowActionsLoadingFnCache.keys()) {
             if (!activeKeys.has(key)) {
                 this.rowActionsLoadingFnCache.delete(key);
@@ -2128,24 +2204,24 @@ class ClientList {
             take: queryTake,
         };
     }
-    createTableRequestSignature(config, query) {
+    createTableRequestSignature(config, query, filters) {
         return [
             config.type,
             config.areaType,
             config.contextKey ?? 'x',
-            this.serializeFilters(config.filters),
+            this.serializeFilters(filters),
             query.mode,
             query.skip,
             query.take,
             ...(query.columnKeys ?? []),
         ].join('|');
     }
-    createCardsRequestSignature(config) {
+    createCardsRequestSignature(config, filters) {
         return [
             config.type,
             config.areaType,
             config.contextKey ?? 'x',
-            this.serializeFilters(config.filters),
+            this.serializeFilters(filters),
             'Card',
         ].join('|');
     }
@@ -2186,6 +2262,9 @@ class ClientList {
     serializeFilters(filters) {
         return JSON.stringify(filters ?? []);
     }
+    resolveFetchFilters(key, config) {
+        return mergeRuntimeFilters(config.filters, this.runtimeFilters.get(key), this.state.itemsByKey()[key]?.columns);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ClientList, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: ClientList, isStandalone: true, selector: "mt-client-list", inputs: { configurations: { classPropertyName: "configurations", publicName: "configurations", isSignal: true, isRequired: true, transformFunction: null }, defaultTake: { classPropertyName: "defaultTake", publicName: "defaultTake", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loaded: "loaded", errored: "errored", itemClicked: "itemClicked" }, providers: [
             ClientListStateService,