add pilots

api/package.json

@@ -35,6 +35,7 @@
     "rxjs": "^7.8.1"
   },
   "devDependencies": {
+    "@microsoft/microsoft-graph-types": "^2.40.0",
     "@nestjs/cli": "^10.0.0",
     "@nestjs/schematics": "^10.0.0",
     "@nestjs/testing": "^10.0.0",

api/src/app.controller.ts

@@ -6,6 +6,7 @@ import {
 } from '@noahspan/noahspan-modules';
 import { FeatureFlagValue } from '@azure/app-configuration';
 import { Public } from '@noahspan/noahspan-modules';
+import { Person } from '@microsoft/microsoft-graph-types';
 
 @Controller()
 export class AppController {
@@ -56,4 +57,26 @@ export class AppController {
       return error;
     }
   }
+
+  @Get('personSearch')
+  async searchUsers(
+    @Headers() headers: any,
+    @Query('search') search: any
+  ): Promise<Person[]> {
+    try {
+      const graphToken: string = await this.msGraphService.getMsGraphAuth(
+        headers.authorization.replace('Bearer ', '')
+      );
+      const client: MsGraphClient =
+        await this.msGraphService.getMsGraphClientDelegated(graphToken);
+      const results: any = await client
+        .api(`me/people/?$search=${search}`)
+        .get();
+      const personResults: Person[] = results.values ? results.values : [];
+
+      return personResults;
+    } catch (error) {
+      return error;
+    }
+  }
 }

app/package.json

@@ -16,7 +16,7 @@
     "@fortawesome/free-regular-svg-icons": "^6.5.2",
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
     "@fortawesome/react-fontawesome": "^0.2.2",
-    "@noahspan/noahspan-components": "^0.3.8",
+    "@noahspan/noahspan-components": "^0.4.5",
     "axios": "^1.7.2",
     "framer-motion": "^11.1.7",
     "react": "^18.2.0",

app/src/components/pilotForm/PilotForm.tsx

@@ -9,13 +9,23 @@ import {
   DatePicker,
   Input,
   Option,
+  PeoplePicker,
   Select
 } from '@noahspan/noahspan-components';
 import PilotFormCertificates from '../pilotFormCertificates/PilotFormCertificates';
 import PilotFormEndorsements from '../pilotFormEndorsements/PilotFormEndorsements';
+import { Person } from '@microsoft/microsoft-graph-types';
+import { AxiosInstance, AxiosResponse } from 'axios';
+import { useHttpClient } from '../../hooks/httpClient/UseHttpClient';
+import { useAccount } from '@azure/msal-react';
 
 const PilotForm: React.FC<unknown> = () => {
+  const httpClient: AxiosInstance = useHttpClient();
+  const accountInfo = useAccount();
   const [open, setOpen] = useState<number>(0);
+  const [peoplePickerResults, setPeoplePickerResults] = useState<Person[]>([]);
+  const [isPeoplePickerLoading, setIsPeoplePickerLoading] =
+    useState<boolean>(false);
   const handleOpen = (value: number) => {
     setOpen(open === value ? 0 : value);
   };
@@ -26,44 +36,46 @@ const PilotForm: React.FC<unknown> = () => {
     console.log(data);
   };
 
+  const handlePeoplePickerOnChange = async (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const searchString: string = event.target.value;
+    const response: AxiosResponse = await httpClient.get(
+      `api/personSearch?search=${searchString}`,
+      {
+        headers: {
+          Authorization: `Bearer ${accountInfo?.idToken}`
+        }
+      }
+    );
+  };
+
   return (
     <FormProvider {...methods}>
       <form className="m-10" onSubmit={handleSubmit(onSubmit)}>
-        <Accordion
+        {/* <Accordion
           open={open === 1}
           icon={open === 1 ? <ChevronDownIcon /> : <ChevronUpIcon />}
         >
           <AccordionHeader onClick={() => handleOpen(1)}>Info</AccordionHeader>
           <AccordionBody>
-            <div className="grid grid-cols-3 gap-4">
-              <div className="col-span-3">
+            <div className="grid grid-cols-1 gap-4">
+              <div className="col-span-1">
                 <Controller
-                  name="firstName"
+                  name="name"
                   control={control}
                   render={({ field }) => (
-                    <Input
-                      className="w-full"
-                      disabled={field.disabled}
-                      label="First Name"
-                      value={field.value}
+                    <PeoplePicker 
+                      results={peoplePickerResults}
+                      inputProps={{
+                        onChange: handlePeoplePickerOnChange
+                      }}
+                      loading={isPeoplePickerLoading}
                     />
                   )}
                 />
               </div>
-              <div className="col-span-3">
-                <Controller
-                  name="lastName"
-                  control={control}
-                  render={({ field }) => (
-                    <Input
-                      disabled={field.disabled}
-                      label="Last Name"
-                      value={field.value}
-                    />
-                  )}
-                />
-              </div>
-              <div className="col-span-3">
+              <div className="col-span-1">
                 <Controller
                   name="address"
                   control={control}
@@ -76,7 +88,7 @@ const PilotForm: React.FC<unknown> = () => {
                   )}
                 />
               </div>
-              <div className="col-span-3">
+              <div className="col-span-1">
                 <Controller
                   name="city"
                   control={control}
@@ -89,7 +101,7 @@ const PilotForm: React.FC<unknown> = () => {
                   )}
                 />
               </div>
-              <div className="col-span-3">
+              <div className="col-span-1">
                 <Controller
                   name="state"
                   control={control}
@@ -102,7 +114,7 @@ const PilotForm: React.FC<unknown> = () => {
                   )}
                 />
               </div>
-              <div className="col-span-3">
+              <div className="col-span-1">
                 <Controller
                   name="postalCode"
                   control={control}
@@ -117,7 +129,7 @@ const PilotForm: React.FC<unknown> = () => {
               </div>
             </div>
           </AccordionBody>
-        </Accordion>
+        </Accordion> */}
         <Accordion
           open={open === 2}
           icon={open === 2 ? <ChevronDownIcon /> : <ChevronUpIcon />}
@@ -148,7 +160,8 @@ const PilotForm: React.FC<unknown> = () => {
             Medical
           </AccordionHeader>
           <AccordionBody>
-            <div className="grid grid-cols-3 gap-4">
+            <div className="grid grid-cols-1 gap-4">
+              <div className="col-span1">
                 <Controller
                   name="medicalClass"
                   control={control}
@@ -162,13 +175,14 @@ const PilotForm: React.FC<unknown> = () => {
                   )}
                 />
               </div>
-            <div className="col-span-3">
+              <div className="col-span-1">
                 <Controller
                   name="medicalExpiration"
                   control={control}
                   render={() => <DatePicker />}
                 />
               </div>
+            </div>
           </AccordionBody>
         </Accordion>
       </form>

app/src/components/pilots/Pilots.tsx

@@ -6,7 +6,8 @@ import {
   Drawer,
   DrawerBody,
   DrawerHeader,
-  DrawerFooter
+  DrawerFooter,
+  PlusIcon
 } from '@noahspan/noahspan-components';
 
 const Pilots: React.FC<unknown> = () => {
@@ -19,13 +20,15 @@ const Pilots: React.FC<unknown> = () => {
     <div className="container mx-auto">
       <div className="px-6">
         <h1 role="heading">Pilots</h1>
+        <PlusIcon size="2xl" />
         <Button
+          className="flex items-center gap-3"
           variant="filled"
           onClick={onOpenCloseDrawer}
-          // startContent={<FontAwesomeIcon icon={faPlus} />}
-          data-testid="new-pilot-button"
+          data-testid="add-pilot-button"
         >
-          New
+          <PlusIcon size="lg" />
+          Add Pilot
         </Button>
         <DatePicker />
         <Drawer
@@ -34,13 +37,13 @@ const Pilots: React.FC<unknown> = () => {
           size={1000}
           data-testid="pilot-drawer"
         >
-          {/* <DrawerHeader text='Add Pilot' onClose={onOpenCloseDrawer} /> */}
+          <DrawerHeader text="Add Pilot" onClose={onOpenCloseDrawer} />
 
           <DrawerBody>
             <PilotForm />
           </DrawerBody>
           <DrawerFooter>
-            <div className="flex gap-4 justify-end justify-self-center">
+            <div className="flex gap-2 justify-end justify-self-center">
               <div>
                 <Button
                   variant="outlined"

package.json

@@ -27,9 +27,5 @@
   },
   "lint-staged": {
     "**/*": "prettier --write \"**/src/**/*.ts\" \"**/test/**/*.ts\" --ignore-unknown"
-  },
-  "dependencies": {
-    "@microsoft/mgt-element": "^4.2.2",
-    "@microsoft/mgt-msal2-provider": "^4.2.2"
   }
 }