feat/AB#74292 People picker

libs/shared/src/lib/components/ui/core-grid/grid/grid.component.html

@@ -751,7 +751,7 @@
           </div>
         </ng-template>
       </kendo-grid-column>
-      <!-- MULTI SELECT QUESTION TYPES ( checkbox / tagbox / owner / users ) -->
+      <!-- MULTI SELECT QUESTION TYPES ( checkbox / tagbox / owner / users / people ) -->
       <kendo-grid-column
         *ngIf="
           field.type === 'JSON' && multiSelectTypes.includes(field.meta.type)

libs/shared/src/lib/components/ui/core-grid/grid/grid.constants.ts

@@ -10,6 +10,7 @@ export const MULTISELECT_TYPES: string[] = [
   'tagbox',
   'owner',
   'users',
+  'people',
 ];
 
 /** Settings for pager */

libs/shared/src/lib/models/people.model.ts

@@ -0,0 +1,8 @@
+/** Model for Person object. */
+export interface Person {
+  id?: string;
+  firstName?: string;
+  lastName?: string;
+  username?: string;
+  email?: string;
+}

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

@@ -0,0 +1,92 @@
+import { Apollo } from 'apollo-angular';
+import * as SurveyCreator from 'survey-creator';
+import { DomService } from '../../services/dom/dom.service';
+import { ApplicationDropdownComponent } from '../../components/application-dropdown/application-dropdown.component';
+import { GetPeopleQueryResponse, GET_PEOPLE } from '../graphql/queries';
+
+/**
+ * Inits the people component.
+ *
+ * @param Survey survey library
+ * @param domService Dom service.
+ * @param apollo Apollo client.
+ */
+export const init = (
+  Survey: any,
+  domService: DomService,
+  apollo: Apollo
+): void => {
+  // registers icon-people in the SurveyJS library
+  Survey.SvgRegistry.registerIconFromSvg(
+    'people',
+    '<svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 0 24 24" width="18px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M9 13.75c-2.34 0-7 1.17-7 3.5V19h14v-1.75c0-2.33-4.66-3.5-7-3.5zM4.34 17c.84-.58 2.87-1.25 4.66-1.25s3.82.67 4.66 1.25H4.34zM9 12c1.93 0 3.5-1.57 3.5-3.5S10.93 5 9 5 5.5 6.57 5.5 8.5 7.07 12 9 12zm0-5c.83 0 1.5.67 1.5 1.5S9.83 10 9 10s-1.5-.67-1.5-1.5S8.17 7 9 7zm7.04 6.81c1.16.84 1.96 1.96 1.96 3.44V19h4v-1.75c0-2.02-3.5-3.17-5.96-3.44zM15 12c1.93 0 3.5-1.57 3.5-3.5S16.93 5 15 5c-.54 0-1.04.13-1.5.35.63.89 1 1.98 1 3.15s-.37 2.26-1 3.15c.46.22.96.35 1.5.35z"/></svg>'
+  );
+  const component = {
+    name: 'people',
+    title: 'People',
+    iconName: 'icon-people',
+    category: 'Custom Questions',
+    questionJSON: {
+      name: 'people',
+      type: 'tagbox',
+      optionsCaption: 'Select people...',
+      choicesOrder: 'asc',
+      choices: [] as any[],
+    },
+    onInit: (): void => {
+      Survey.Serializer.addProperty('people', {
+        name: 'applications',
+        category: 'people properties',
+        type: 'applicationsDropdown',
+        isDynamicChoices: true,
+        visibleIndex: 3,
+        required: true,
+      });
+
+      const applicationEditor = {
+        render: (editor: any, htmlElement: any) => {
+          const question = editor.object;
+          const dropdown = domService.appendComponentToBody(
+            ApplicationDropdownComponent,
+            htmlElement
+          );
+          const instance: ApplicationDropdownComponent = dropdown.instance;
+          instance.value = question.applications;
+          instance.choice.subscribe((res) => editor.onChanged(res));
+        },
+      };
+
+      SurveyCreator.SurveyPropertyEditorFactory.registerCustomEditor(
+        'applicationsDropdown',
+        applicationEditor
+      );
+    },
+    onLoaded: (question: any): void => {
+      apollo
+        .query<GetPeopleQueryResponse>({
+          query: GET_PEOPLE,
+          variables: {
+            applications: question.applications,
+          },
+        })
+        .subscribe(({ data }) => {
+          if (data.people) {
+            const people: any = [];
+            for (const person of data.people) {
+              if (!people.some((el: any) => el.value === person.id)) {
+                people.push({
+                  value: person.id,
+                  text: person.username,
+                  email: person.email,
+                });
+              }
+            }
+            question.contentQuestion.choices = people;
+          }
+        });
+    },
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onAfterRender: (): void => {},
+  };
+  Survey.ComponentCollection.Instance.add(component);
+};

libs/shared/src/lib/survey/graphql/queries.ts

@@ -1,4 +1,7 @@
 import { gql } from 'apollo-angular';
+import { Role, User } from '../../models/user.model';
+import { Resource } from '../../models/resource.model';
+import { Person } from '../../models/people.model';
 
 // === GET ROLES FROM APPLICATION ===
 
@@ -12,6 +15,11 @@ export const GET_ROLES_FROM_APPLICATIONS = gql`
   }
 `;
 
+/** Model for GetRolesFromApplicationsQueryResponse object */
+export interface GetRolesFromApplicationsQueryResponse {
+  rolesFromApplications: Role[];
+}
+
 // === GET RESOURCE BY ID ===
 /** Graphql request for getting data of a resource by its id */
 export const GET_RESOURCE_BY_ID = gql`
@@ -60,6 +68,11 @@ export const GET_SHORT_RESOURCE_BY_ID = gql`
   }
 `;
 
+/** Model for GetResourceByIdQueryResponse object */
+export interface GetResourceByIdQueryResponse {
+  resource: Resource;
+}
+
 // === GET USERS ===
 
 /** Graphql request for getting users (optionnally by a list of application ids) */
@@ -73,3 +86,27 @@ export const GET_USERS = gql`
     }
   }
 `;
+
+/** Model for GetUsersQueryResponse object */
+export interface GetUsersQueryResponse {
+  users: User[];
+}
+
+// === GET PEOPLE ===
+
+/** Graphql request for getting people */
+export const GET_PEOPLE = gql`
+  query GetPeople($applications: [ID]) {
+    people(applications: $applications) {
+      id
+      username
+      name
+      oid
+    }
+  }
+`;
+
+/** Model for GetPeopleQueryResponse object */
+export interface GetPeopleQueryResponse {
+  people: Person[];
+}

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

@@ -12,6 +12,7 @@ import * as ResourceComponent from './components/resource';
 import * as ResourcesComponent from './components/resources';
 import * as OwnerComponent from './components/owner';
 import * as UsersComponent from './components/users';
+import * as PeopleComponent from './components/people';
 import * as GeospatialComponent from './components/geospatial';
 import * as TextWidget from './widgets/text-widget';
 import * as CommentWidget from './widgets/comment-widget';
@@ -86,6 +87,7 @@ export const initCustomSurvey = (
     );
     OwnerComponent.init(Survey, domService, apollo);
     UsersComponent.init(Survey, domService, apollo);
+    PeopleComponent.init(Survey, domService, apollo);
     GeospatialComponent.init(Survey, domService);
   }
 

libs/shared/src/lib/survey/widgets/tagbox-widget.ts

@@ -69,8 +69,9 @@ export const init = (
     afterRender: (question: QuestionTagbox, el: HTMLElement): void => {
       const parentQuestion = question.parentQuestion;
       if (
-        (parentQuestion && parentQuestion.getType() === 'matrixdynamic') ||
-        parentQuestion.getType() === 'matrixdropdown'
+        parentQuestion &&
+        (parentQuestion.getType() === 'matrixdynamic' ||
+          parentQuestion.getType() === 'matrixdropdown')
       ) {
         question.choices = parentQuestion.choices;
       }

libs/shared/src/lib/utils/parser/utils.ts

@@ -271,6 +271,7 @@ const replaceRecordFields = (
             break;
           case 'owner':
           case 'users':
+          case 'people':
           case 'resources':
             convertedValue = `<span style='${style}'>${
               value ? value.length : 0