adding pilots

2024-07-27 21:06:37 -05:00
parent e1c1a86019
commit 30b5183180
8 changed files with 176 additions and 179 deletions
--- a/api/src/app.controller.ts
+++ b/api/src/app.controller.ts
@@ -7,10 +7,12 @@ import {
 import { FeatureFlagValue } from '@azure/app-configuration';
 import { Public } from '@noahspan/noahspan-modules';
 import { Person } from '@microsoft/microsoft-graph-types';
+import { AppService } from './app.service';

@Controller()
 export class AppController {
  constructor(
+    private readonly appService: AppService,
    private readonly appConfigService: AppConfigService,
    private readonly msGraphService: MsGraphService
  ) {}
@@ -66,9 +68,10 @@ export class AppController {
    @Query('search') search: any
  ): Promise<Person[]> {
    try {
+      const accessToken: string = headers.authorization.replace('Bearer ', '');
      const personSearchResults: Person[] =
-        await getPersonSearshResults(search);
-
+        await this.appService.getPersonSearchResults(accessToken, search);
+      console.log(personSearchResults);
      return personSearchResults;
    } catch (error) {
      return error;
--- a/api/src/app.service.ts
+++ b/api/src/app.service.ts
@@ -10,18 +10,35 @@ export class AppService {
    return 'Hello World!';
  }

-  async getPersonSearchResults(accessToken: string): Person[] {
+  async getPersonSearchResults(
+    accessToken: string,
+    search: string
+  ): Promise<Person[]> {
+    try {
      const graphToken: string = await this.msGraphService.getMsGraphAuth(
        accessToken,
        ['user.read']
      );
-    console.log(graphToken);
      const client: MsGraphClient =
        await this.msGraphService.getMsGraphClientDelegated(graphToken);
-    const results: any = await client.api(`me/people/?$search=${search}`).get();
-    console.log(results);
-    const personResults: Person[] = results.values ? results.values : [];
+      const results: any = await client
+        .api(`me/people/?$search=${search}`)
+        .get();
+      let personResults: Person[];
+
+      if (results.value) {
+        personResults = results.value.filter((result: Person) => {
+          if (result.userPrincipalName !== null) {
+            return result;
+          }
+        });
+      } else {
+        personResults = [];
+      }

      return personResults;
+    } catch (error) {
+      throw new Error(error);
+    }
  }
 }
--- a/app/package.json
+++ b/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.4.5",
+    "@noahspan/noahspan-components": "^0.4.9",
    "axios": "^1.7.2",
    "framer-motion": "^11.1.7",
    "react": "^18.2.0",
--- a/app/src/components/pilotForm/PilotForm.tsx
+++ b/app/src/components/pilotForm/PilotForm.tsx
@@ -4,33 +4,42 @@ import {
  Accordion,
  AccordionBody,
  AccordionHeader,
+  Button,
  ChevronDownIcon,
  ChevronUpIcon,
  DatePicker,
+  Drawer,
+  DrawerBody,
+  DrawerHeader,
+  DrawerFooter,
  Input,
  Option,
  PeoplePicker,
-  Select
+  Select,
+  Typography
 } from '@noahspan/noahspan-components';
 import PilotFormCertificates from '../pilotFormCertificates/PilotFormCertificates';
 import PilotFormEndorsements from '../pilotFormEndorsements/PilotFormEndorsements';
-// import { Person } from '@microsoft/microsoft-graph-types';
+import { Person } from '@microsoft/microsoft-graph-types';
 import { AxiosInstance, AxiosResponse } from 'axios';
 import { useHttpClient } from '../../hooks/httpClient/UseHttpClient';
 import { useAccessToken } from '../../hooks/accessToken/UseAcessToken';

-const PilotForm: React.FC<unknown> = () => {
+interface PilotFormProps {
+  isDrawerOpen: boolean;
+  onOpenCloseDrawer: () => void;
+}
+
+const PilotForm: React.FC<PilotFormProps> = ({
+  isDrawerOpen,
+  onOpenCloseDrawer
+}: PilotFormProps) => {
  const httpClient: AxiosInstance = useHttpClient();
-  const [open, setOpen] = useState<number>(0);
-  const [peoplePickerResults, setPeoplePickerResults] = useState<any[]>([]);
+  const [peoplePickerResults, setPeoplePickerResults] = useState<Person[]>([]);
  const [isPeoplePickerLoading, setIsPeoplePickerLoading] =
    useState<boolean>(false);
  const { getAccessToken } = useAccessToken();
-  const handleOpen = (value: number) => {
-    setOpen(open === value ? 0 : value);
-  };
  const methods = useForm();
-  const { control, handleSubmit } = methods;

  const onSubmit = (data: unknown) => {
    console.log(data);
@@ -42,6 +51,8 @@ const PilotForm: React.FC<unknown> = () => {
    setIsPeoplePickerLoading(true);

    try {
+      methods.setValue('name', event.target.value);
+
      const searchString: string = event.target.value;
      const accessToken: string = await getAccessToken();
      const response: AxiosResponse = await httpClient.get(
@@ -62,24 +73,33 @@ const PilotForm: React.FC<unknown> = () => {
  };

  return (
-    <FormProvider {...methods}>
-      <form className="m-10" onSubmit={handleSubmit(onSubmit)}>
-        <Accordion
-          open={open === 1}
-          icon={open === 1 ? <ChevronDownIcon /> : <ChevronUpIcon />}
+    <Drawer
+      open={isDrawerOpen}
+      placement="right"
+      size={1000}
+      data-testid="pilot-drawer"
    >
-          <AccordionHeader onClick={() => handleOpen(1)}>Info</AccordionHeader>
-          <AccordionBody>
+      <FormProvider {...methods}>
+        <DrawerHeader text="Add Pilot" onClose={onOpenCloseDrawer} />
+        <form onSubmit={methods.handleSubmit(onSubmit)}>
+          <DrawerBody>
            <div className="grid grid-cols-1 gap-4">
+              <div className="col-span-1">
+                <Typography variant="h5">Info</Typography>
+                <hr className="my-3" />
+              </div>
              <div className="col-span-1">
                <Controller
                  name="name"
-                  control={control}
-                  render={() => (
+                  control={methods.control}
+                  render={({ field: { disabled, value } }) => (
                    <PeoplePicker
                      results={peoplePickerResults}
                      inputProps={{
-                        onChange: handlePeoplePickerOnChange
+                        disabled: disabled,
+                        label: 'Name',
+                        onChange: (event) => handlePeoplePickerOnChange(event),
+                        value: value
                      }}
                      loading={isPeoplePickerLoading}
                    />
@@ -89,115 +109,115 @@ const PilotForm: React.FC<unknown> = () => {
              <div className="col-span-1">
                <Controller
                  name="address"
-                  control={control}
-                  render={({ field }) => (
-                    <Input
-                      disabled={field.disabled}
-                      label="Address"
-                      value={field.value}
-                    />
-                  )}
+                  control={methods.control}
+                  render={({ field }) => <Input label="Address" {...field} />}
                />
              </div>
              <div className="col-span-1">
                <Controller
                  name="city"
-                  control={control}
-                  render={({ field }) => (
-                    <Input
-                      disabled={field.disabled}
-                      label="City"
-                      value={field.value}
-                    />
-                  )}
+                  control={methods.control}
+                  render={({ field }) => <Input label="City" {...field} />}
                />
              </div>
              <div className="col-span-1">
                <Controller
                  name="state"
-                  control={control}
-                  render={({ field }) => (
-                    <Input
-                      disabled={field.disabled}
-                      label="State"
-                      value={field.value}
-                    />
-                  )}
+                  control={methods.control}
+                  render={({ field }) => <Input label="State" {...field} />}
                />
              </div>
              <div className="col-span-1">
                <Controller
                  name="postalCode"
-                  control={control}
+                  control={methods.control}
                  render={({ field }) => (
-                    <Input
-                      disabled={field.disabled}
-                      label="Postal Code"
-                      value={field.value}
-                    />
-                  )}
-                />
-              </div>
-            </div>
-          </AccordionBody>
-        </Accordion>
-        <Accordion
-          open={open === 2}
-          icon={open === 2 ? <ChevronDownIcon /> : <ChevronUpIcon />}
-        >
-          <AccordionHeader onClick={() => handleOpen(2)}>
-            Certificates
-          </AccordionHeader>
-          <AccordionBody>
-            <PilotFormCertificates certificates={[]} />
-          </AccordionBody>
-        </Accordion>
-        <Accordion
-          open={open === 3}
-          icon={open === 3 ? <ChevronDownIcon /> : <ChevronUpIcon />}
-        >
-          <AccordionHeader onClick={() => handleOpen(3)}>
-            Endorsements
-          </AccordionHeader>
-          <AccordionBody>
-            <PilotFormEndorsements endorsements={[]} />
-          </AccordionBody>
-        </Accordion>
-        <Accordion
-          open={open === 4}
-          icon={open === 4 ? <ChevronDownIcon /> : <ChevronUpIcon />}
-        >
-          <AccordionHeader onClick={() => handleOpen(4)}>
-            Medical
-          </AccordionHeader>
-          <AccordionBody>
-            <div className="grid grid-cols-1 gap-4">
-              <div className="col-span1">
-                <Controller
-                  name="medicalClass"
-                  control={control}
-                  render={({ field }) => (
-                    <Select label="Class" value={field.value}>
-                      <Option>First</Option>
-                      <Option>Second</Option>
-                      <Option>Third</Option>
-                      <Option>Basic Med</Option>
-                    </Select>
+                    <Input label="Postal Code" {...field} />
                  )}
                />
              </div>
+              <div className="col-span-1">
+                <Controller
+                  name="email"
+                  control={methods.control}
+                  render={({ field }) => <Input label="Email" {...field} />}
+                />
+              </div>
+              <div className="col-span-1">
+                <Controller
+                  name="phone"
+                  control={methods.control}
+                  render={({ field }) => <Input label="Phone" {...field} />}
+                />
+              </div>
+              <div className="col-span-1">
+                <Typography variant="h5">Certificates</Typography>
+                <hr className="my-3" />
+              </div>
+              <PilotFormCertificates certificates={[]} />
+              <div className="col-span-1">
+                <Typography variant="h5">Endorsements</Typography>
+                <hr className="my-3" />
+              </div>
+              <PilotFormEndorsements endorsements={[]} />
+              <div className="col-span-1">
+                <Typography variant="h5">Medical</Typography>
+                <hr className="my-3" />
+              </div>
+              <div className="col-span1">
+                <Controller
+                  name="medicalClass"
+                  control={methods.control}
+                  render={({ field }) => {
+                    return (
+                      <Select label="Class" {...field}>
+                        <Option key="first" value="First">
+                          First
+                        </Option>
+                        <Option key="second" value="Second">
+                          Second
+                        </Option>
+                        <Option key="third" value="Third">
+                          Third
+                        </Option>
+                        <Option key="basicMed" value="Basic Med">
+                          Basic Med
+                        </Option>
+                      </Select>
+                    );
+                  }}
+                />
+              </div>
              <div className="col-span-1">
                <Controller
                  name="medicalExpiration"
-                  control={control}
+                  control={methods.control}
                  render={() => <DatePicker />}
                />
              </div>
            </div>
-          </AccordionBody>
-        </Accordion>
+          </DrawerBody>
+          <DrawerFooter>
+            <div className="flex gap-2 justify-end justify-self-center">
+              <div>
+                <Button
+                  variant="outlined"
+                  onClick={onOpenCloseDrawer}
+                  data-testid="pilot-drawer-cancel-button"
+                >
+                  Cancel
+                </Button>
+              </div>
+              <div>
+                <Button variant="filled" type="submit">
+                  Save
+                </Button>
+              </div>
+            </div>
+          </DrawerFooter>
        </form>
      </FormProvider>
+    </Drawer>
  );
 };

--- a/app/src/components/pilotFormCertificates/PilotFormCertificates.tsx
+++ b/app/src/components/pilotFormCertificates/PilotFormCertificates.tsx
@@ -59,7 +59,7 @@ const PilotFormCertificates: React.FC<IPilotFormCertificates> = ({
              <Controller
                name={`certificates.${index}.number`}
                control={control}
-                render={() => {
+                render={({ field }) => {
                  return <Input label="Number" {...field} />;
                }}
              />
@@ -68,7 +68,7 @@ const PilotFormCertificates: React.FC<IPilotFormCertificates> = ({
              <Controller
                name={`certificates.${index}.dateOfIssue`}
                control={control}
-                render={() => {
+                render={({ field }) => {
                  return <DatePicker />;
                }}
              />
--- a/app/src/components/pilotFormEndorsements/PilotFormEndorsements.tsx
+++ b/app/src/components/pilotFormEndorsements/PilotFormEndorsements.tsx
@@ -23,7 +23,7 @@ const PilotFormEndorsements: React.FC<IPilotFormEndorsements> = ({
  });

  return (
-    <div className="grid grid-cols-4 gap-4">
+    <div className="grid grid-cols-3 gap-4">
      {fields.map((field, index) => {
        return (
          <>
@@ -35,16 +35,16 @@ const PilotFormEndorsements: React.FC<IPilotFormEndorsements> = ({
                render={({ field }) => {
                  return (
                    <Select label="Type" {...field}>
-                      <Option key="student" value="Student">
+                      <Option key="complex" value="Complex">
                        Complex
                      </Option>
-                      <Option key="private" value="Private">
+                      <Option key="highPerformance" value="High Performance">
                        High Performance
                      </Option>
-                      <Option key="instrument" value="Instrument">
+                      <Option key="highAltitude" value="High Altitude">
                        High Altitude
                      </Option>
-                      <Option key="recreational" value="Recreational">
+                      <Option key="tailwheel" value="Tailwheel">
                        Tailwheel
                      </Option>
                    </Select>
@@ -52,15 +52,6 @@ const PilotFormEndorsements: React.FC<IPilotFormEndorsements> = ({
                }}
              />
            </div>
-            <div>
-              <Controller
-                name={`endorsements.${index}.number`}
-                control={control}
-                render={({ field }) => {
-                  return <Input label="Number" {...field} />;
-                }}
-              />
-            </div>
            <div>
              <Controller
                name={`endorsements.${index}.dateOfIssue`}
--- a/app/src/components/pilots/Pilots.tsx
+++ b/app/src/components/pilots/Pilots.tsx
@@ -1,14 +1,6 @@
 import { useState } from 'react';
 import PilotForm from '../pilotForm/PilotForm';
-import {
-  Button,
-  DatePicker,
-  Drawer,
-  DrawerBody,
-  DrawerHeader,
-  DrawerFooter,
-  PlusIcon
-} from '@noahspan/noahspan-components';
+import { Button, PlusIcon } from '@noahspan/noahspan-components';

 const Pilots: React.FC<unknown> = () => {
  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
@@ -30,37 +22,11 @@ const Pilots: React.FC<unknown> = () => {
          <PlusIcon size="lg" />
          Add Pilot
        </Button>
-        <DatePicker />
-        <Drawer
-          open={isDrawerOpen}
-          placement="right"
-          size={1000}
-          data-testid="pilot-drawer"
-        >
-          <DrawerHeader text="Add Pilot" onClose={onOpenCloseDrawer} />

-          <DrawerBody>
-            <PilotForm />
-          </DrawerBody>
-          <DrawerFooter>
-            <div className="flex gap-2 justify-end justify-self-center">
-              <div>
-                <Button
-                  variant="outlined"
-                  onClick={onOpenCloseDrawer}
-                  data-testid="pilot-drawer-cancel-button"
-                >
-                  Cancel
-                </Button>
-              </div>
-              <div>
-                <Button variant="filled" onClick={onOpenCloseDrawer}>
-                  Save
-                </Button>
-              </div>
-            </div>
-          </DrawerFooter>
-        </Drawer>
+        <PilotForm
+          isDrawerOpen={isDrawerOpen}
+          onOpenCloseDrawer={onOpenCloseDrawer}
+        />
      </div>
    </div>
  );
--- a/package-lock.json
+++ b/package-lock.json
@@ -74,7 +74,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.4.5",
+        "@noahspan/noahspan-components": "^0.4.9",
        "axios": "^1.7.2",
        "framer-motion": "^11.1.7",
        "react": "^18.2.0",
@@ -3004,8 +3004,7 @@
    "node_modules/@microsoft/microsoft-graph-types": {
      "version": "2.40.0",
      "resolved": "https://registry.npmjs.org/@microsoft/microsoft-graph-types/-/microsoft-graph-types-2.40.0.tgz",
-      "integrity": "sha512-1fcPVrB/NkbNcGNfCy+Cgnvwxt6/sbIEEFgZHFBJ670zYLegENYJF8qMo7x3LqBjWX2/Eneq5BVVRCLTmlJN+g==",
-      "dev": true
+      "integrity": "sha512-1fcPVrB/NkbNcGNfCy+Cgnvwxt6/sbIEEFgZHFBJ670zYLegENYJF8qMo7x3LqBjWX2/Eneq5BVVRCLTmlJN+g=="
    },
    "node_modules/@motionone/animation": {
      "version": "10.18.0",
@@ -3386,9 +3385,9 @@
      "link": true
    },
    "node_modules/@noahspan/noahspan-components": {
-      "version": "0.4.5",
-      "resolved": "https://registry.npmjs.org/@noahspan/noahspan-components/-/noahspan-components-0.4.5.tgz",
-      "integrity": "sha512-OT2b0foCAhmoSBVlvwE/CCLuho+vii2LfCLWQxF+jZZH9/cA50uxkriJ0t25psNVhbKzsHurqcw9KkBPojJBUA==",
+      "version": "0.4.9",
+      "resolved": "https://registry.npmjs.org/@noahspan/noahspan-components/-/noahspan-components-0.4.9.tgz",
+      "integrity": "sha512-Cr+cQZkCjY2JQokQrhbgCTXdD4vzFHRL4t9D5sutdouHFJAsW+vx1Qj35EyZ1quOwaisLbmMc/UqJgZldcFPaw==",
      "dependencies": {
        "@fortawesome/fontawesome-svg-core": "^6.5.2",
        "@fortawesome/free-brands-svg-icons": "^6.5.2",
@@ -3396,6 +3395,7 @@
        "@fortawesome/free-solid-svg-icons": "^6.5.2",
        "@fortawesome/react-fontawesome": "^0.2.0",
        "@material-tailwind/react": "^2.1.9",
+        "@microsoft/microsoft-graph-types": "^2.40.0",
        "@tanstack/react-table": "^8.17.3",
        "date-fns": "^3.6.0",
        "framer-motion": "^11.1.9",