feat: Display only resources questions (#2831)

AB#122462

---------

Co-authored-by: Antoine Hurard <[email protected]>

Author: Joselgc1

libs/shared/src/lib/components/form-builder/form-builder.component.ts

@@ -590,14 +590,35 @@ export class FormBuilderComponent
       });
     }
     if (['resource', 'resources'].includes(question.getType())) {
-      if (question.relatedName) {
-        question.relatedName = this.formHelpersService.toSnakeCase(
-          question.relatedName
-        );
-        if (this.relatedNames.includes(question.relatedName)) {
+      // Check that relatedName is set and not duplicated
+      if (!question.displayOnly) {
+        // Skip check if display only
+        if (question.relatedName) {
+          question.relatedName = this.formHelpersService.toSnakeCase(
+            question.relatedName
+          );
+          if (this.relatedNames.includes(question.relatedName)) {
+            this.snackBar.openSnackBar(
+              this.translate.instant(
+                'components.formBuilder.errors.duplicatedRelatedName',
+                {
+                  question: question.name,
+                  page: page.name,
+                }
+              ),
+              {
+                error: true,
+                duration: 15000,
+              }
+            );
+            return false;
+          } else {
+            this.relatedNames.push(question.relatedName);
+          }
+        } else {
           this.snackBar.openSnackBar(
             this.translate.instant(
-              'components.formBuilder.errors.duplicatedRelatedName',
+              'components.formBuilder.errors.missingRelatedName',
               {
                 question: question.name,
                 page: page.name,
@@ -609,25 +630,10 @@ export class FormBuilderComponent
             }
           );
           return false;
-        } else {
-          this.relatedNames.push(question.relatedName);
         }
-      } else {
-        this.snackBar.openSnackBar(
-          this.translate.instant(
-            'components.formBuilder.errors.missingRelatedName',
-            {
-              question: question.name,
-              page: page.name,
-            }
-          ),
-          {
-            error: true,
-            duration: 15000,
-          }
-        );
-        return false;
       }
+
+      // Error if the user selected Add Record without adding a template.
       if (question.addRecord && !question.addTemplate) {
         this.snackBar.openSnackBar(
           this.translate.instant(

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

@@ -6,14 +6,15 @@ import {
   FilterDescriptor,
 } from '@progress/kendo-data-query';
 import { Apollo } from 'apollo-angular';
-import { isNil } from 'lodash';
+import { isEqual, isNil } from 'lodash';
 import get from 'lodash/get';
 import {
   ComponentCollection,
   JsonObject,
   Serializer,
   SurveyModel,
   SvgRegistry,
+  surveyLocalization,
 } from 'survey-core';
 import { CoreGridComponent } from '../../components/ui/core-grid/core-grid.component';
 import { ResourceQueryResponse } from '../../models/resource.model';
@@ -178,6 +179,13 @@ export const init = (
     },
     resourceFieldsName: [] as any[],
     onInit: (): void => {
+      Serializer.addProperty('resources', {
+        name: 'displayOnly:boolean',
+        category: 'general',
+        displayName: surveyLocalization.getString('oort:displayOnly'),
+        visibleIndex: 7,
+        default: false,
+      });
       Serializer.addProperty('resources', {
         name: 'resource',
         category: 'Custom Questions',
@@ -218,7 +226,7 @@ export const init = (
         dependsOn: 'resource',
         required: true,
         description: 'unique name for this resource question',
-        visibleIf: visibleIfResource,
+        visibleIf: (obj: any) => visibleIfResource(obj) && !obj.displayOnly,
         visibleIndex: 4,
       });
 
@@ -447,39 +455,10 @@ export const init = (
           }
         });
         if (question.customFilter && question.customFilter.trim().length > 0) {
-          /**
-           * Get question filters value
-           *
-           * @param question Current question
-           */
-          const getQuestionFilters = (question: any) => {
-            const surveyData = question.survey?.data;
-
-            const customFilter = JSON.parse(question.customFilter);
-            if (Array.isArray(customFilter)) {
-              question.filters = {
-                logic: 'and',
-                filters: customFilter
-                  .map((x) => updateFilter(surveyData, x))
-                  .filter((x) => !isNil(x)),
-              };
-            } else {
-              question.filters = updateFilter(surveyData, customFilter);
-            }
-
-            // Load question choices
-            if (!question.displayAsGrid) {
-              this.populateChoices(question);
-            }
-          };
-
           // Subscribe to survey value changes
           question.survey?.onValueChanged.add(() => {
-            getQuestionFilters(question);
+            this.getQuestionFilters(question);
           });
-
-          // Initial load
-          getQuestionFilters(question);
         } else {
           // Load question choices
           if (!question.displayAsGrid) {
@@ -514,7 +493,37 @@ export const init = (
         question.prefillWithCurrentRecord = false;
       }
     },
-    onAfterRender: (question: QuestionResource, el: any): void => {
+    /**
+     * Get question filters
+     *
+     * @param question Current question
+     */
+    getQuestionFilters(question: QuestionResource): void {
+      const surveyData = (question.survey as SurveyModel).data;
+      const customFilter = JSON.parse(question.customFilter);
+      if (Array.isArray(customFilter)) {
+        question.filters = {
+          logic: 'and',
+          filters: customFilter
+            .map((x) => updateFilter(surveyData, x))
+            .filter((x) => !isNil(x)),
+        };
+      } else {
+        question.filters = updateFilter(surveyData, customFilter);
+      }
+
+      // Load question choices
+      if (!question.displayAsGrid) {
+        this.populateChoices(question);
+      }
+    },
+    /**
+     * On After render callback
+     *
+     * @param question Current question
+     * @param el Element
+     */
+    onAfterRender(question: QuestionResource, el: any): void {
       const parentElement = el.querySelector('.sd-question__content');
       // Display the add button | grid for resources question
       const actionsButtons = setUpActionsButtonWrapper();
@@ -529,6 +538,13 @@ export const init = (
         }
       }, 500);
 
+      if (question.resource) {
+        if (question.customFilter && question.customFilter.trim().length > 0) {
+          // Initial load
+          this.getQuestionFilters(question);
+        }
+      }
+
       const searchBtn = buildSearchButton(
         question,
         question.gridFieldsSettings,
@@ -540,14 +556,14 @@ export const init = (
       );
       searchBtn.style.display = 'none';
       if (question.resource) {
-        searchBtn.style.display = 'block';
+        searchBtn.style.display = question.displayOnly ? 'none' : 'block';
         if (parentElement) {
           if (question.displayAsGrid) {
             gridComponentRef = buildGridDisplay(question, parentElement);
           }
 
           if ((question.survey as SurveyModel).mode !== 'display') {
-            searchBtn.style.display = 'block';
+            searchBtn.style.display = question.displayOnly ? 'none' : 'block';
             const addBtn = buildAddButton(
               question,
               true,
@@ -579,15 +595,16 @@ export const init = (
       actionsButtons.appendChild(searchBtn);
       parentElement.insertBefore(actionsButtons, parentElement.firstChild);
       question.registerFunctionOnPropertyValueChanged('resource', () => {
-        if (question.resource && question.canSearch) {
+        if (question.resource && question.canSearch && !question.displayOnly) {
           searchBtn.style.display = 'block';
         }
       });
       question.registerFunctionOnPropertyValueChanged('canSearch', () => {
         if (question.displayAsGrid) {
           setGridInputs(gridComponentRef.instance, question);
         } else {
-          searchBtn.style.display = question.canSearch ? 'block' : 'none';
+          searchBtn.style.display =
+            question.canSearch && !question.displayOnly ? 'block' : 'none';
         }
       });
       question.registerFunctionOnPropertyValueChanged(
@@ -614,7 +631,7 @@ export const init = (
           if (element) {
             element.style.display = 'block';
           }
-          if (question.canSearch) {
+          if (question.canSearch && !question.displayOnly) {
             searchBtn.style.display = 'block';
           }
         }
@@ -679,7 +696,7 @@ export const init = (
     );
     setGridInputs(grid.instance, question);
     question.survey?.onValueChanged.add((_: any, options: any) => {
-      if (options.name === question.name) {
+      if (question.displayOnly || options.name === question.name) {
         setGridInputs(grid.instance, question);
       }
     });
@@ -693,7 +710,8 @@ export const init = (
    * @param question survey question.
    */
   const setGridInputs = async (instance: CoreGridComponent, question: any) => {
-    instance.multiSelect = true;
+    instance.multiSelect = !question.displayOnly;
+    instance.selectable = !question.displayOnly;
     const promises: any[] = [];
     const settings = await processNewCreatedRecords(question, true, promises);
     if (
@@ -718,9 +736,27 @@ export const init = (
     if (question.canSearch) {
       temporaryRecordsForm.setValue(settings.query.temporaryRecords);
     }
-    instance.settings = settings;
+    if (question.displayOnly) {
+      const filters: any[] = [];
+
+      if (question.filters) {
+        filters.push(question.filters);
+      }
+      if (question.gridFieldsSettings?.filter) {
+        filters.push(question.gridFieldsSettings.filter);
+      }
+
+      settings.query.filter = {
+        logic: 'and',
+        filters: filters,
+      };
+    }
     Promise.allSettled(promises).then(() => {
-      instance.configureGrid();
+      // Only update grid if needed
+      if (!isEqual(instance.settings, settings)) {
+        instance.settings = settings;
+        instance.configureGrid();
+      }
     });
   };
 };

libs/shared/src/lib/survey/localization.ts

@@ -9,6 +9,13 @@ const SURVEY_LOCALIZABLE_STRINGS = [
       fr: 'Ajouter un enregistrement',
     },
   },
+  {
+    key: 'displayOnly',
+    locales: {
+      en: 'Display only',
+      fr: 'Affichage seul',
+    },
+  },
   {
     key: 'fileLimitations',
     locales: {

libs/shared/src/lib/survey/types.ts

@@ -82,6 +82,7 @@ export interface QuestionResource
   staticValue: string;
   customFilter: string;
   displayAsGrid: boolean;
+  displayOnly?: boolean;
   remove?: boolean;
   template?: string;
   draftData?: any;