Feature/4 pilots add (#20)

* changing api url to env variable * updating env variables * updating env variables * updating env variables * updating env variables * updating env variables * updating env variables * feature/4-pilots---add * feature/4-pilots---add * feature/4-pilots---add * feature/4-pilots---add * ad pilot * add pilot * add pilot * add pilot * add pilot * add pilot * adding pilots * add pilot * add pilot * add pilots * add pilot * add pilot * adding pilots * adding pilots * adding pilots * adding pilots * adding pilots * adding pilots * adding pilots * adding pilots * adding pilots * adding pilots * adding pilots * adding pilot * adding pilot * adding pilot * adding pilot * adding pilot * adding pilot * adding pilot * adding pilot * adding pilot * adding pilot * adding pilot * adding pilot * adding pilot * adding pilot * adding pilot * adding pilot * adding pilot * adding pilot * adding pilot * adding pilot * Testing menu button * Testing menu button * Testing menu button * Testing menu button * adding pilot * adding pilot * adding pilot * adding pilot * adding pilot * adding pilot --------- Co-authored-by: Noah Spannbauer <nspannbauer@sensonix.com>
2024-09-23 20:52:59 -05:00
parent 80b4fb8c1d
commit 071e211525
53 changed files with 4184 additions and 13161 deletions
--- a/app/src/components/pilotFormEndorsements/PilotFormEndorsements.tsx
+++ b/app/src/components/pilotFormEndorsements/PilotFormEndorsements.tsx
@@ -0,0 +1,120 @@
+import { IPilotFormEndorsements } from './IPilotFormEndorsements';
+import {
+  Button,
+  DatePicker,
+  Input,
+  Option,
+  PlusIcon,
+  Select,
+  TrashIcon,
+  Typography
+} from '@noahspan/noahspan-components';
+import { Controller, useFieldArray, useFormContext } from 'react-hook-form';
+
+const PilotFormEndorsements: React.FC<IPilotFormEndorsements> = ({
+  endorsements
+}: IPilotFormEndorsements) => {
+  const {
+    control,
+    formState: { errors },
+    setValue
+  } = useFormContext();
+
+  const { fields, append, remove } = useFieldArray({
+    name: 'endorsements',
+    control
+  });
+
+  return (
+    <>
+      {fields.length > 0 && (
+        <>
+          <div className="col-span-1">
+            <Typography variant="h6">Type</Typography>
+          </div>
+          <div className="col-span-1">
+            <Typography variant="h6">Date of Issue</Typography>
+          </div>
+          <div className="col-span-1"></div>
+          <div className="col-span-1"></div>
+        </>
+      )}
+      {fields.map((field, index) => {
+        return (
+          <>
+            <div className="col-span-1">
+              <Controller
+                name={`endorsements.${index}.type`}
+                control={control}
+                render={({ field }) => {
+                  return (
+                    <Select label="Type" {...field}>
+                      <Option key="complex" value="Complex">
+                        Complex
+                      </Option>
+                      <Option key="highPerformance" value="High Performance">
+                        High Performance
+                      </Option>
+                      <Option key="highAltitude" value="High Altitude">
+                        High Altitude
+                      </Option>
+                      <Option key="tailwheel" value="Tailwheel">
+                        Tailwheel
+                      </Option>
+                    </Select>
+                  );
+                }}
+              />
+            </div>
+            <div className="col-span-1">
+              <Controller
+                name={`endorsements.${index}.dateOfIssue`}
+                control={control}
+                render={({ field }) => {
+                  return (
+                    <DatePicker
+                      handleDateChanged={(date: string) => {
+                        setValue(`endorsements.${index}.dateOfIssue`, date);
+                      }}
+                      inputProps={{
+                        value: field.value
+                      }}
+                    />
+                  );
+                }}
+              />
+            </div>
+            <div className="col-span-1">
+              <Button
+                className="flex items-center gap-3"
+                onClick={() => remove(index)}
+                variant="outlined"
+              >
+                <TrashIcon size="lg" />
+                Delete
+              </Button>
+            </div>
+          </>
+        );
+      })}
+      <div className="col-span-4">
+        <Button
+          className="flex items-center gap-3"
+          onClick={() => {
+            append({
+              type: '',
+              number: '',
+              dateOfIssue: null
+            });
+          }}
+          variant="outlined"
+        >
+          <PlusIcon size="lg" />
+          Add Endorsement
+        </Button>
+      </div>
+    </>
+  );
+};
+
+export default PilotFormEndorsements;