@ngrdt/forms 0.0.78 → 0.0.80

package/fesm2022/ngrdt-forms.mjs

@@ -685,10 +685,12 @@ const rdtSelectInitialState = {
     datasource: null,
     selectedMap: new Map(),
     fetchError: null,
-    missingValuePlaceholder: 'Načítání (ID = {id})...',
+    loadingValuePlaceholder: 'Načítání (ID = {id})...',
+    missingValuePlaceholder: 'Neznámá hodnota (ID = {id})',
     _fetchRequest: null,
     _fetchMissingRequest: null,
     _missingSelected: [],
+    _unfetchableIds: [],
 };
 
 function compareSelectRequestParams(a, b) {
@@ -719,6 +721,7 @@ function getRdtSelectStore(initialState = rdtSelectInitialState) {
             const query = state.query();
             const selectedMap = state.selectedMap();
             const missing = state._missingSelected();
+            const unfetchable = state._unfetchableIds();
             if (query) {
                 return items.map((it) => ({
                     ...it,
@@ -727,13 +730,21 @@ function getRdtSelectStore(initialState = rdtSelectInitialState) {
             }
             const selected = [];
             const missingPlaceholder = state.missingValuePlaceholder();
-            const placeholders = missing.map((id) => ({
+            const loadingPlaceholder = state.loadingValuePlaceholder();
+            const loadingPlaceholders = missing.map((id) => ({
+                id,
+                label: loadingPlaceholder.replace('{id}', String(id)),
+                value: null,
+                selected: true,
+            }));
+            const missingPlaceholders = unfetchable.map((id) => ({
                 id,
                 label: missingPlaceholder.replace('{id}', String(id)),
                 value: null,
                 selected: true,
             }));
-            placeholders.forEach((pl) => selected.push(pl));
+            selected.push(...loadingPlaceholders);
+            selected.push(...missingPlaceholders);
             items.forEach((item) => {
                 selected.push({ ...item, selected: selectedMap.has(item.id) });
             });
@@ -867,6 +878,7 @@ function getRdtSelectStore(initialState = rdtSelectInitialState) {
         },
         setSelected(ids) {
             patchState(store, {
+                _unfetchableIds: [],
                 _missingSelected: ids,
                 selectedMap: new Map(),
             });
@@ -894,6 +906,7 @@ function getRdtSelectStore(initialState = rdtSelectInitialState) {
             });
         },
         _setAndGetMissing() {
+            const unfetchable = untracked(store._unfetchableIds);
             const allMissing = untracked(store._missingSelected);
             const items = untracked(store.options);
             const selectedMap = new Map(untracked(store.selectedMap));
@@ -905,7 +918,7 @@ function getRdtSelectStore(initialState = rdtSelectInitialState) {
                     selectedMap.set(id, item);
                     selectedChanged = true;
                 }
-                else {
+                else if (!unfetchable.includes(id)) {
                     newMissing.push(id);
                 }
             }
@@ -933,12 +946,16 @@ function getRdtSelectStore(initialState = rdtSelectInitialState) {
         _cancelFetchMissingIfNeeded() {
             const fetchMissingReq = untracked(store._fetchMissingRequest);
             const items = untracked(store.options);
-            if (fetchMissingReq?.ids.every((id) => items.some((it) => it.id === id))) {
-                fetchMissingReq.subscription.unsubscribe();
-                patchState(store, {
-                    _fetchMissingRequest: null,
-                    _missingSelected: [],
-                });
+            const missingEmpty = untracked(store._missingSelected).length === 0;
+            if (fetchMissingReq) {
+                if (fetchMissingReq.ids.every((id) => items.some((it) => it.id === id)) ||
+                    missingEmpty) {
+                    fetchMissingReq.subscription.unsubscribe();
+                    patchState(store, {
+                        _fetchMissingRequest: null,
+                        _missingSelected: [],
+                    });
+                }
             }
         },
         _fetchMissing(ids, datasource) {
@@ -948,12 +965,17 @@ function getRdtSelectStore(initialState = rdtSelectInitialState) {
             const sub = datasource.getItemsByIds(ids).subscribe((map) => {
                 const newMissing = [];
                 const newSelected = new Map(untracked(store.selectedMap));
+                const unfetchable = [...untracked(store._unfetchableIds)];
                 for (const id of untracked(store._missingSelected)) {
                     if (map.has(id)) {
                         const value = map.get(id);
                         const label = datasource.getLabel(value);
                         newSelected.set(id, { label, value, id });
                     }
+                    else if (ids.includes(id)) {
+                        console.error(`Item with id ${JSON.stringify(id)} not found by getItemsByIds().`, datasource);
+                        unfetchable.push(id);
+                    }
                     else {
                         newMissing.push(id);
                     }
@@ -962,6 +984,7 @@ function getRdtSelectStore(initialState = rdtSelectInitialState) {
                     _fetchMissingRequest: null,
                     _missingSelected: newMissing,
                     selectedMap: newSelected,
+                    _unfetchableIds: [...unfetchable],
                     initialized: true,
                 });
                 this._loadMissingSelected();
@@ -981,7 +1004,20 @@ function getRdtSelectStore(initialState = rdtSelectInitialState) {
             if (!datasource) {
                 throw new Error('Datasource is undefined');
             }
-            if (oldMap.has(id)) {
+            const unfetchableIds = untracked(store._unfetchableIds);
+            const missingSelectedIds = untracked(store._missingSelected);
+            if (unfetchableIds.includes(id) || missingSelectedIds.includes(id)) {
+                const newUnfetchableIds = unfetchableIds.filter((unfetchableId) => unfetchableId !== id);
+                const newMissingSelected = missingSelectedIds.filter((missingId) => missingId !== id);
+                patchState(store, {
+                    _unfetchableIds: newUnfetchableIds,
+                    _missingSelected: newMissingSelected,
+                });
+                if (newMissingSelected.length === 0) {
+                    this._cancelFetchMissingIfNeeded();
+                }
+            }
+            else if (oldMap.has(id)) {
                 const newMap = new Map(oldMap);
                 newMap.delete(id);
                 patchState(store, { selectedMap: newMap });
@@ -1128,7 +1164,9 @@ class RdtBaseSelectCommonComponent extends RdtBaseFormInputComponent {
         alias: 'manualInit',
     });
     manualInit = linkedSignal(() => this.manualInitInput());
-    datasourceInput = input(null);
+    datasourceInput = input(null, {
+        alias: 'datasource',
+    });
     store = inject(RdtSelectStore);
     visibleOptions = this.store.visibleOptions;
     queryValidatorFnInput = input(null, {
@@ -1172,6 +1210,12 @@ class RdtBaseSelectCommonComponent extends RdtBaseFormInputComponent {
             this.loadingInput() ||
             RdtObjectUtils.someValuesTrue(this.loadingMap()));
     });
+    datasourceEffect = effect(() => {
+        const datasource = this.datasourceInput();
+        if (datasource) {
+            this.store.setDatasource(datasource);
+        }
+    });
     ngOnInit() {
         super.ngOnInit();
         const control = this.control();
@@ -1230,7 +1274,7 @@ class RdtBaseSelectCommonComponent extends RdtBaseFormInputComponent {
         }
     });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtBaseSelectCommonComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.0", type: RdtBaseSelectCommonComponent, isStandalone: true, inputs: { manualInitInput: { classPropertyName: "manualInitInput", publicName: "manualInit", isSignal: true, isRequired: false, transformFunction: null }, datasourceInput: { classPropertyName: "datasourceInput", publicName: "datasourceInput", isSignal: true, isRequired: false, transformFunction: null }, queryValidatorFnInput: { classPropertyName: "queryValidatorFnInput", publicName: "inputValidator", isSignal: true, isRequired: false, transformFunction: null }, debounceTimeInput: { classPropertyName: "debounceTimeInput", publicName: "debounce", isSignal: true, isRequired: false, transformFunction: null }, pageSizeInput: { classPropertyName: "pageSizeInput", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.0", type: RdtBaseSelectCommonComponent, isStandalone: true, inputs: { manualInitInput: { classPropertyName: "manualInitInput", publicName: "manualInit", isSignal: true, isRequired: false, transformFunction: null }, datasourceInput: { classPropertyName: "datasourceInput", publicName: "datasource", isSignal: true, isRequired: false, transformFunction: null }, queryValidatorFnInput: { classPropertyName: "queryValidatorFnInput", publicName: "inputValidator", isSignal: true, isRequired: false, transformFunction: null }, debounceTimeInput: { classPropertyName: "debounceTimeInput", publicName: "debounce", isSignal: true, isRequired: false, transformFunction: null }, pageSizeInput: { classPropertyName: "pageSizeInput", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtBaseSelectCommonComponent, decorators: [{
             type: Directive