fix: show new records created in resouce questions in the search grid

Author: estelafs

libs/safe/src/lib/components/ui/core-grid/core-grid.component.ts

@@ -655,7 +655,7 @@ export class SafeCoreGridComponent
               console.error(error);
             }
           }
-          if (this.settings.query.temporaryRecords) {
+          if (this.settings.query.temporaryRecords?.length) {
             //Handles temporary records for resources creation in forms
             this.getTemporaryRecords();
           }

libs/safe/src/lib/survey/components/resource.ts

@@ -7,14 +7,25 @@ import {
 import * as SurveyCreator from 'survey-creator';
 import { resourceConditions } from './resources';
 import { Dialog } from '@angular/cdk/dialog';
-import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
+import {
+  FormControl,
+  UntypedFormBuilder,
+  UntypedFormGroup,
+} from '@angular/forms';
 import { SafeResourceDropdownComponent } from '../../components/resource-dropdown/resource-dropdown.component';
 import { DomService } from '../../services/dom/dom.service';
-import { buildSearchButton, buildAddButton } from './utils';
+import {
+  buildSearchButton,
+  buildAddButton,
+  processNewCreatedRecords,
+} from './utils';
 import get from 'lodash/get';
 import { Question, QuestionResource } from '../types';
 import { JsonMetadata, SurveyModel } from 'survey-angular';
 
+/** Question's temporary records */
+export const temporaryRecordsForm = new FormControl([]);
+
 /**
  * Inits the resource question component of for survey.
  *
@@ -541,6 +552,20 @@ export const init = (
             this.populateChoices(question);
           }
         }
+        if (question.addRecord && question.canSearch) {
+          // If search button exists, updates grid displayed records when new records are created with the add button
+          question.registerFunctionOnPropertyValueChanged(
+            'newCreatedRecords',
+            async () => {
+              const settings = await processNewCreatedRecords(
+                question,
+                false,
+                []
+              );
+              temporaryRecordsForm.setValue(settings.query.temporaryRecords);
+            }
+          );
+        }
       }
     },
     /**
@@ -607,7 +632,8 @@ export const init = (
           question,
           question.gridFieldsSettings,
           false,
-          dialog
+          dialog,
+          temporaryRecordsForm
         );
         actionsButtons.appendChild(searchBtn);
 

libs/safe/src/lib/survey/components/resources.ts

@@ -6,15 +6,22 @@ import {
 } from '../graphql/queries';
 import { BehaviorSubject } from 'rxjs';
 import * as SurveyCreator from 'survey-creator';
-import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
+import {
+  FormControl,
+  UntypedFormBuilder,
+  UntypedFormGroup,
+} from '@angular/forms';
 import { Dialog } from '@angular/cdk/dialog';
 import { SafeResourceDropdownComponent } from '../../components/resource-dropdown/resource-dropdown.component';
 import { SafeCoreGridComponent } from '../../components/ui/core-grid/core-grid.component';
 import { DomService } from '../../services/dom/dom.service';
-import { buildSearchButton, buildAddButton } from './utils';
+import {
+  buildSearchButton,
+  buildAddButton,
+  processNewCreatedRecords,
+} from './utils';
 import { QuestionResource } from '../types';
 import { SurveyModel } from 'survey-angular';
-import localForage from 'localforage';
 
 /** Create the list of filter values for resources */
 export const resourcesFilterValues = new BehaviorSubject<
@@ -32,6 +39,9 @@ export const resourceConditions = [
   { value: '<=', text: 'less or equals' },
 ];
 
+/** Question temporary records */
+const temporaryRecordsForm = new FormControl([]);
+
 /**
  * Inits the resources question component for survey.
  *
@@ -787,7 +797,8 @@ export const init = (
               question,
               question.gridFieldsSettings,
               true,
-              dialog
+              dialog,
+              temporaryRecordsForm
             );
             actionsButtons.appendChild(searchBtn);
 
@@ -894,53 +905,8 @@ export const init = (
     question: any
   ) => {
     instance.multiSelect = true;
-    const query = question.gridFieldsSettings || {};
-    const temporaryRecords: any[] = [];
     const promises: any[] = [];
-    question.newCreatedRecords?.forEach((recordId: string) => {
-      const promise = new Promise<void>((resolve, reject) => {
-        localForage
-          .getItem(recordId)
-          .then((data: any) => {
-            if (data != null) {
-              // We ensure to make it only if such a record is found
-              const parsedData = JSON.parse(data);
-              temporaryRecords.push({
-                id: recordId,
-                template: parsedData.template,
-                ...parsedData.data,
-                isTemporary: true,
-              });
-            }
-            resolve();
-          })
-          .catch((error: any) => {
-            console.error(error); // Handle any errors that occur while getting the item
-            reject(error);
-          });
-      });
-      promises.push(promise);
-    });
-    const uuidRegExpr =
-      /^[0-9a-fA-F]{8}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{12}$/i;
-    const settings = {
-      query: {
-        ...query,
-        temporaryRecords: temporaryRecords,
-        filter: {
-          logic: 'and',
-          filters: [
-            {
-              field: 'ids',
-              operator: 'eq',
-              value:
-                question.value.filter((id: string) => !uuidRegExpr.test(id)) ||
-                [], //We exclude the temporary records by excluding id in UUID format
-            },
-          ],
-        },
-      },
-    };
+    const settings = await processNewCreatedRecords(question, true, promises);
     if (!question.readOnlyGrid) {
       Object.assign(settings, {
         actions: {
@@ -953,6 +919,10 @@ export const init = (
         },
       });
     }
+    // If search button exists, updates grid displayed records
+    if (question.canSearch) {
+      temporaryRecordsForm.setValue(settings.query.temporaryRecords);
+    }
     instance.settings = settings;
     Promise.allSettled(promises).then(() => {
       instance.configureGrid();

libs/safe/src/lib/survey/components/utils.ts

@@ -1,21 +1,24 @@
 import { Dialog } from '@angular/cdk/dialog';
-import { UntypedFormGroup } from '@angular/forms';
+import { UntypedFormControl } from '@angular/forms';
 import { surveyLocalization } from 'survey-angular';
+import localForage from 'localforage';
 
 /**
  * Build the search button for resource and resources components
  *
  * @param question The question object
- * @param fieldsSettingsForm The form used for the button
+ * @param fieldsSettingsForm The raw value from the form used for the grid settings
  * @param multiselect Indicate if we need multiselect
  * @param dialog The Dialog service
+ * @param temporaryRecords The form used to save and keep the temporary records updated
  * @returns The button DOM element
  */
 export const buildSearchButton = (
   question: any,
-  fieldsSettingsForm: UntypedFormGroup,
+  fieldsSettingsForm: any,
   multiselect: boolean,
-  dialog: Dialog
+  dialog: Dialog,
+  temporaryRecords: UntypedFormControl
 ): any => {
   const searchButton = document.createElement('button');
   searchButton.innerText = surveyLocalization.getString(
@@ -24,6 +27,11 @@ export const buildSearchButton = (
   );
   searchButton.style.marginRight = '8px';
   if (fieldsSettingsForm) {
+    temporaryRecords.valueChanges.subscribe((res: any) => {
+      if (res) {
+        fieldsSettingsForm.temporaryRecords = res;
+      }
+    });
     searchButton.onclick = async () => {
       const { SafeResourceGridModalComponent } = await import(
         '../../components/search-resource-grid-modal/search-resource-grid-modal.component'
@@ -147,3 +155,92 @@ export const buildAddButton = (
   );
   return addButton;
 };
+
+/**
+ * Updates the newCreatedRecords for resource and resources questions
+ *
+ * @param question The question object
+ * @param multiselect Indicate if the questions is multiselect
+ * @param promises Promises array to be do something after they're all reject or resolved.
+ * @returns The grid settings updated
+ */
+export const processNewCreatedRecords = (
+  question: any,
+  multiselect: boolean,
+  promises: Promise<void>[]
+): any => {
+  const query = question.gridFieldsSettings || {};
+  const temporaryRecords: any[] = [];
+  if (multiselect) {
+    question.newCreatedRecords?.forEach((recordId: string) => {
+      const promise = new Promise<void>((resolve, reject) => {
+        localForage
+          .getItem(recordId)
+          .then((data: any) => {
+            if (data != null) {
+              // We ensure to make it only if such a record is found
+              const parsedData = JSON.parse(data);
+              temporaryRecords.push({
+                id: recordId,
+                template: parsedData.template,
+                ...parsedData.data,
+                isTemporary: true,
+              });
+            }
+            resolve();
+          })
+          .catch((error: any) => {
+            console.error(error); // Handle any errors that occur while getting the item
+            reject(error);
+          });
+      });
+      promises.push(promise);
+    });
+  } else {
+    new Promise<void>((resolve, reject) => {
+      localForage
+        .getItem(question.newCreatedRecords)
+        .then((data: any) => {
+          if (data != null) {
+            // We ensure to make it only if such a record is found
+            const parsedData = JSON.parse(data);
+            temporaryRecords.push({
+              id: question.newCreatedRecords,
+              template: parsedData.template,
+              ...parsedData.data,
+              isTemporary: true,
+            });
+          }
+          resolve();
+        })
+        .catch((error: any) => {
+          console.error(error); // Handle any errors that occur while getting the item
+          reject(error);
+        });
+    });
+  }
+
+  const uuidRegExpr =
+    /^[0-9a-fA-F]{8}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{12}$/i;
+  const settings = {
+    query: {
+      ...query,
+      temporaryRecords: temporaryRecords,
+      filter: {
+        logic: 'and',
+        ...(multiselect && {
+          filters: [
+            {
+              field: 'ids',
+              operator: 'eq',
+              value:
+                question.value.filter((id: string) => !uuidRegExpr.test(id)) ||
+                [], //We exclude the temporary records by excluding id in UUID format
+            },
+          ],
+        }),
+      },
+    },
+  };
+  return settings;
+};