feat: People picker in forms (#1216)

AB#68534

---------

Co-authored-by: Antoine Hurard <antoine@reliefapplications.org>

Author: Joselgc1

src/utils/files/getColumns.ts

@@ -170,6 +170,20 @@ export const getColumns = async (
         }
         break;
       }
+      case 'people-dropdown':
+      case 'people-tagbox': {
+        // people-dropdown: single object, people-tagbox: array of objects
+        columns.push({
+          name: field.name,
+          label: field.label || field.name,
+          field: field.name,
+          type: field.type,
+          meta: {
+            field,
+          },
+        });
+        break;
+      }
       default: {
         const name = `${field.name}`;
         columns.push({

src/utils/files/getRows.ts

@@ -55,6 +55,49 @@ export const getRows = async (
           set(row, column.name, Array.isArray(value) ? value.join(',') : value);
           break;
         }
+        case 'people-dropdown': {
+          // People dropdown: { userid, firstname, lastname, emailaddress }
+          const personData: any = get(data, column.field);
+          if (personData) {
+            const firstName = personData.firstname || '';
+            const lastName = personData.lastname || '';
+            const email = personData.emailaddress || '';
+            const name = [firstName, lastName].filter(Boolean).join(' ').trim();
+            const displayValue = email
+              ? name
+                ? `${name} (${email})`
+                : email
+              : name || personData.userid || '';
+            set(row, column.name, displayValue);
+          } else {
+            set(row, column.name, '');
+          }
+          break;
+        }
+        case 'people-tagbox': {
+          // People tagbox: array of { userid, firstname, lastname, emailaddress }
+          const peopleData: any[] = get(data, column.field) || [];
+          if (Array.isArray(peopleData) && peopleData.length > 0) {
+            const displayValues = peopleData.map((person) => {
+              const firstName = person.firstname || '';
+              const lastName = person.lastname || '';
+              const email = person.emailaddress || '';
+              const name = [firstName, lastName]
+                .filter(Boolean)
+                .join(' ')
+                .trim();
+              return email
+                ? name
+                  ? `${name} (${email})`
+                  : email
+                : name || person.userid || '';
+            });
+            set(row, column.name, displayValues.join(', '));
+          } else {
+            set(row, column.name, '');
+          }
+          break;
+        }
         case 'multipletext':
         case 'matrix':
         case 'matrixdropdown': {

src/utils/files/getRowsFromMeta.ts

@@ -77,6 +77,49 @@ export const getRowsFromMeta = (
           set(row, column.name, Array.isArray(value) ? value.join(',') : value);
           break;
         }
+        case 'people-dropdown': {
+          // People dropdown: { userid, firstname, lastname, emailaddress }
+          const personData: any = get(record, column.field);
+          if (personData) {
+            const firstName = personData.firstname || '';
+            const lastName = personData.lastname || '';
+            const email = personData.emailaddress || '';
+            const name = [firstName, lastName].filter(Boolean).join(' ').trim();
+            const displayValue = email
+              ? name
+                ? `${name} (${email})`
+                : email
+              : name || personData.userid || '';
+            set(row, column.name, displayValue);
+          } else {
+            set(row, column.name, '');
+          }
+          break;
+        }
+        case 'people-tagbox': {
+          // People tagbox: array of { userid, firstname, lastname, emailaddress }
+          const peopleData: any[] = get(record, column.field) || [];
+          if (Array.isArray(peopleData) && peopleData.length > 0) {
+            const displayValues = peopleData.map((person) => {
+              const firstName = person.firstname || '';
+              const lastName = person.lastname || '';
+              const email = person.emailaddress || '';
+              const name = [firstName, lastName]
+                .filter(Boolean)
+                .join(' ')
+                .trim();
+              return email
+                ? name
+                  ? `${name} (${email})`
+                  : email
+                : name || person.userid || '';
+            });
+            set(row, column.name, displayValues.join(', '));
+          } else {
+            set(row, column.name, '');
+          }
+          break;
+        }
         case 'checkbox':
         case 'tagbox': {
           setMultiselectRow(column, record, row);

src/utils/form/getFieldType.ts

@@ -86,6 +86,12 @@ export const getFieldType = async (question: {
     case 'editor': {
       return 'editor';
     }
+    case 'people-dropdown': {
+      return 'people-dropdown';
+    }
+    case 'people-tagbox': {
+      return 'people-tagbox';
+    }
     default:
       return 'text';
   }

src/utils/form/transformRecord.ts

@@ -61,6 +61,16 @@ export const formatValue = (field: any, value: any): any => {
         );
       }
       break;
+    case 'people-dropdown':
+      if (!isNil(value)) {
+        return value;
+      }
+      break;
+    case 'people-tagbox':
+      if (!isNil(value) && Array.isArray(value)) {
+        return value;
+      }
+      break;
     default:
       return value;
   }

src/utils/schema/introspection/getFieldType.ts

@@ -128,6 +128,12 @@ const getFieldType = (
     case 'editor': {
       return GraphQLString;
     }
+    case 'people-dropdown': {
+      return GraphQLJSON;
+    }
+    case 'people-tagbox': {
+      return GraphQLJSON;
+    }
     default: {
       return GraphQLString;
     }

src/utils/schema/resolvers/Query/getSortField.ts

@@ -42,6 +42,16 @@ export default (sortField: string, field?: any): string => {
     ) {
       return `_${sortField}`;
     }
+    if (field) {
+      switch (field.type) {
+        case 'people-dropdown':
+        case 'people-tagbox': {
+          // Sort by last name within people fields
+          return `data.${sortField}.lastname`;
+        }
+        // By default, continue
+      }
+    }
     return `data.${sortField}`;
   }
   return defaultSortField ? defaultSortField.path : 'createdAt';