feat/AB#74292 People picker

libs/shared/src/lib/components/filter/filter-row/filter-row.component.html

@@ -164,6 +164,18 @@
     </div>
   </ng-template>
 
+  <!-- PEOPLE EDITOR -->
+  <ng-template #peopleEditor>
+    <div class="w-60">
+      <label>{{ 'common.value.one' | translate }}</label>
+      <shared-people-dropdown
+        [control]="$any(form.get('value'))"
+        [initialSelectionIDs]="form.get('value')?.value"
+        [multiselect]="field.multiSelect"
+      ></shared-people-dropdown>
+    </div>
+  </ng-template>
+
   <!-- DATE EDITOR -->
   <ng-template #dateEditor>
     <div uiFormFieldDirective [defaultMargin]="false">

libs/shared/src/lib/components/filter/filter-row/filter-row.component.ts

@@ -51,6 +51,9 @@ export class FilterRowComponent
   /** Reference to context editor template */
   @ViewChild('contextEditor', { static: false })
   contextEditor!: TemplateRef<any>;
+  /** Reference to people editor template */
+  @ViewChild('peopleEditor', { static: false })
+  peopleEditor!: TemplateRef<any>;
   /** Current field */
   public field?: any;
   /** Template reference to the editor */
@@ -219,6 +222,10 @@ export class FilterRowComponent
           this.editor = this.dateEditor;
           break;
         }
+        case 'people': {
+          this.editor = this.peopleEditor;
+          break;
+        }
         default: {
           this.editor = this.textEditor;
         }

libs/shared/src/lib/components/filter/filter.module.ts

@@ -12,6 +12,7 @@ import {
   DateModule,
   TooltipModule,
 } from '@oort-front/ui';
+import { PeopleDropdownComponent } from '../../survey/components/people-dropdown/people-dropdown.component';
 
 /**
  * Composite Filter module.
@@ -29,6 +30,7 @@ import {
     DateModule,
     FormWrapperModule,
     TooltipModule,
+    PeopleDropdownComponent,
   ],
   exports: [FilterComponent],
 })

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

@@ -40,7 +40,7 @@ import {
 } from '../../../models/record.model';
 import { GridLayout } from './models/grid-layout.model';
 import { GridActions, GridSettings } from './models/grid-settings.model';
-import { get, isEqual, isNil } from 'lodash';
+import { get, isArray, isEqual, isNil } from 'lodash';
 import { GridService } from '../../../services/grid/grid.service';
 import { TranslateService } from '@ngx-translate/core';
 import { DatePipe } from '../../../pipes/date/date.pipe';
@@ -49,7 +49,7 @@ import { DateTranslateService } from '../../../services/date-translate/date-tran
 import { ApplicationService } from '../../../services/application/application.service';
 import { UnsubscribeComponent } from '../../utils/unsubscribe/unsubscribe.component';
 import { debounceTime, filter, takeUntil } from 'rxjs/operators';
-import { firstValueFrom, from, merge, Subject } from 'rxjs';
+import { firstValueFrom, from, lastValueFrom, merge, Subject } from 'rxjs';
 import { SnackbarService, UILayoutService } from '@oort-front/ui';
 import { ConfirmService } from '../../../services/confirm/confirm.service';
 import { ContextService } from '../../../services/context/context.service';
@@ -517,6 +517,7 @@ export class CoreGridComponent
                 }
               }
             }
+
             this.getRecords();
           },
           error: (err: any) => {
@@ -1073,8 +1074,9 @@ export class CoreGridComponent
       });
       dialogRef.closed
         .pipe(takeUntil(this.destroy$))
-        .subscribe((value: any) => {
+        .subscribe(async (value: any) => {
           if (value) {
+            await this.loadPeopleChoices(value);
             this.reloadData();
           }
         });
@@ -1156,6 +1158,64 @@ export class CoreGridComponent
     }
   }
 
+  /**
+   * Load more people choices if needed
+   *
+   * @param value new updated or added record
+   */
+  public async loadPeopleChoices(value: any) {
+    const newIds: any[] = [];
+
+    // Loop over metaFields to verify if there are new users
+    for (const metaField in this.metaFields) {
+      const choices: string[] = isArray(value.data.data[metaField])
+        ? value.data.data[metaField]
+        : [value.data.data[metaField]];
+      if (
+        ['people', 'singlepeople'].includes(this.metaFields[metaField]?.type) &&
+        choices
+      ) {
+        newIds.push(
+          ...choices
+            // Filter new users
+            .filter(
+              (choice: any) =>
+                !this.metaFields[metaField].choices.some(
+                  (obj: any) => obj.value === choice
+                )
+            )
+            .map((choice: any) => ({
+              id: choice,
+              // Saving the field name to address new choices after fetching
+              field: metaField,
+            }))
+        );
+      }
+    }
+
+    if (newIds.length) {
+      // Fetch new users
+      const newChoices = await lastValueFrom(
+        this.gridService.getNewPeopleChoices(newIds.map((el) => el.id))
+      );
+
+      // Assign the choices to the correct field
+      newChoices.forEach((choice: any) => {
+        const fieldName = newIds.find((el) => el.id === choice.value)?.field;
+        if (fieldName) {
+          this.metaFields[fieldName].choices.push(choice);
+        }
+      });
+
+      this.fields = this.gridService.getFields(
+        this.settings?.query?.fields || [],
+        this.metaFields,
+        this.defaultLayout.fields || {},
+        ''
+      );
+    }
+  }
+
   /**
    * Opens the form corresponding to selected row in order to update it
    *
@@ -1174,12 +1234,15 @@ export class CoreGridComponent
       },
       autoFocus: false,
     });
-    dialogRef.closed.pipe(takeUntil(this.destroy$)).subscribe((value: any) => {
-      if (value) {
-        this.validateRecords(ids);
-        this.reloadData();
-      }
-    });
+    dialogRef.closed
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(async (value: any) => {
+        if (value) {
+          await this.loadPeopleChoices(value);
+          this.validateRecords(ids);
+          this.reloadData();
+        }
+      });
   }
 
   /**

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

@@ -132,7 +132,8 @@
       <kendo-grid-column
         *ngIf="
           field.type !== 'JSON' &&
-          (!field.meta || field.meta.type !== 'referenceData')
+          (!field.meta || field.meta.type !== 'referenceData') &&
+          !(field.meta.type === 'singlepeople')
         "
         [field]="field.name"
         [title]="field.title"
@@ -653,7 +654,64 @@
           </div>
         </ng-template>
       </kendo-grid-column>
-      <!-- MULTI SELECT QUESTION TYPES ( checkbox / tagbox / owner / users ) -->
+      <!-- SINGLE PEOPLE -->
+      <kendo-grid-column
+        *ngIf="field.meta.type === 'singlepeople'"
+        [field]="field.name"
+        [filterable]="true"
+        [title]="field.title"
+        [editor]="field.editor"
+        [editable]="false"
+        [width]="field.width"
+        [hidden]="field.hidden"
+        [minResizableWidth]="50"
+        class="no-padding"
+      >
+        <ng-template
+          kendoGridFilterMenuTemplate
+          let-filter
+          let-column="column"
+          let-filterService="filterService"
+        >
+          <shared-grid-filter-menu
+            [isNotArray]="true"
+            [filter]="filter"
+            [filterService]="filterService"
+            [data]="field.meta.choices || []"
+            [field]="field.name"
+            textField="text"
+            valueField="value"
+          >
+          </shared-grid-filter-menu>
+        </ng-template>
+        <ng-template
+          kendoGridFilterCellTemplate
+          let-filter
+          let-dataItem="dataItem"
+        >
+          <shared-grid-filter
+            [isNotArray]="true"
+            [filter]="filter"
+            [data]="field.meta.choices || []"
+            [field]="field.name"
+            textField="text"
+            valueField="value"
+          >
+          </shared-grid-filter>
+        </ng-template>
+        <ng-template #refSpan kendoGridCellTemplate let-dataItem="dataItem">
+          <div class="textbox-container" [style]="dataItem.style[field.name]">
+            <div
+              class="truncate"
+              [uiTooltip]="dataItem.text[field.name]"
+              tooltipEnableBy="truncate"
+            >
+              {{ dataItem.text[field.name] }}
+            </div>
+          </div>
+        </ng-template>
+      </kendo-grid-column>
+      <!-- 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/components/widgets/editor/editor.component.ts

@@ -634,6 +634,13 @@ export class EditorComponent extends BaseWidgetComponent implements OnInit {
                     rows: metaData.rows,
                   };
                 }
+                //add choices for people questions
+                if (metaData && metaData.choices) {
+                  return {
+                    ...field,
+                    choices: metaData.choices,
+                  };
+                }
                 return field;
               });
             } catch (err) {