noah/noahspan-flying
1
0
Fork 0
Code Issues 9 Pull Requests Actions Packages Projects Releases 8 Wiki Activity

Feature/62 limit pilot data for non auth users #69

Merged
noahspannbauer merged 3 commits from feature/62-limit-pilot-data-for-non-auth-users into main 2025-03-18 11:08:50 -04:00
Conversation 0 Commits 3 Files Changed 17 +269 -203
12 changed files with 269 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit e52d6191c9 - Show all commits

4
api/src/pilot/interceptors/pilot.interceptor.ts
View File

@@ -16,7 +16,9 @@ export class PilotInterceptor implements NestInterceptor {
partitionKey: pilot.partitionKey, partitionKey: pilot.partitionKey,
rowKey: pilot.rowKey, rowKey: pilot.rowKey,
id: pilot.id, id: pilot.id,
name: pilot.name name: pilot.name,
certificates: pilot.certificates,
endorsements: pilot.endorsements
}; };
}); });

6
app/src/App.tsx
View File

@@ -19,11 +19,7 @@ const App = () => {
<> <>
<SiteNav /> <SiteNav />
<Routes> <Routes>
<Route path="/pilots" element={ <Route path="/pilots" element={<Pilots />} />
<ProtectedRoute>
<Pilots />
</ProtectedRoute>
} />
<Route path="/" element={<Logbook />} /> <Route path="/" element={<Logbook />} />
</Routes> </Routes>
</> </>

29
app/src/components/pilotCard/PilotCard.tsx Normal file
View File

@@ -0,0 +1,29 @@
import { Card, CardContent, CardHeader, Grid, Typography } from "@noahspan/noahspan-components"
import { PilotCardProps } from "./PilotCardProps.interface"
import ActionMenu from "../actionMenu/ActionMenu"
const PilotCard = ({ pilots, onDelete, onOpenCloseForm }: PilotCardProps) => {
return (
<Grid container spacing={2}>
{pilots.map((pilot) => {
return (
<Grid size={12}>
<Card key={pilot.rowKey}>
<CardHeader
action={<ActionMenu id={pilot.rowKey} onDelete={onDelete} onOpenCloseForm={onOpenCloseForm} />}
title={pilot.name}
slotProps={{
title: {
fontSize: '24px',
}
}}
/>
</Card>
</Grid>
)
})}
</Grid>
)
}
export default PilotCard;

8
app/src/components/pilotCard/PilotCardProps.interface.ts Normal file
View File

@@ -0,0 +1,8 @@
import { FormMode } from "../../enums/formMode";
import { Pilot } from "../pilots/Pilot.interface";
export interface PilotCardProps {
pilots: Pilot[];
onDelete: (entryId: string) => void;
onOpenCloseForm: (formMode: FormMode, id: string) => void;
}

48
app/src/components/pilotForm/PilotForm.tsx
View File

@@ -1,19 +1,18 @@
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { useForm, Controller, FormProvider } from 'react-hook-form'; import { useForm, Controller, FormProvider } from 'react-hook-form';
import { import {
Accordion,
Button, Button,
DatePicker,
Drawer, Drawer,
Grid, Grid,
Icon, Icon,
IconButton, IconButton,
IconName, IconName,
PeoplePicker, PeoplePicker,
Select,
StateSelect, StateSelect,
TextField, TextField,
Typography theme,
Typography,
useMediaQuery
} from '@noahspan/noahspan-components'; } from '@noahspan/noahspan-components';
import { IPilotFormProps } from './IPilotFormProps'; import { IPilotFormProps } from './IPilotFormProps';
import { AxiosError, AxiosInstance, AxiosResponse } from 'axios'; import { AxiosError, AxiosInstance, AxiosResponse } from 'axios';
@@ -64,6 +63,7 @@ const PilotForm: React.FC<IPilotFormProps> = ({
}); });
const [isDisabled, setIsDisabled] = useState<boolean>(false); const [isDisabled, setIsDisabled] = useState<boolean>(false);
const [isError, setIsError] = useState<boolean>(false); const [isError, setIsError] = useState<boolean>(false);
const isMedium = useMediaQuery(theme.breakpoints.up('md'));
const onPeoplePickerSearch = async ( const onPeoplePickerSearch = async (
_event: React.SyntheticEvent, _event: React.SyntheticEvent,
@@ -193,7 +193,7 @@ const PilotForm: React.FC<IPilotFormProps> = ({
PaperProps={{ PaperProps={{
sx: { sx: {
padding: '30px', padding: '30px',
width: '33%' width: isMedium ? '33%' : '75%'
} }
}} }}
> >
@@ -208,10 +208,10 @@ const PilotForm: React.FC<IPilotFormProps> = ({
<Icon iconName={IconName.XMARK} /> <Icon iconName={IconName.XMARK} />
</IconButton> </IconButton>
</Grid> </Grid>
<Grid size={3}> <Grid size={isMedium ? 3 : 12}>
<Typography variant="h6">Name *</Typography> <Typography variant="h6">Name *</Typography>
</Grid> </Grid>
<Grid size={9}> <Grid size={isMedium ? 9 : 12}>
<PeoplePicker <PeoplePicker
disabled={isDisabled} disabled={isDisabled}
loading={isPeoplePickerLoading} loading={isPeoplePickerLoading}
@@ -221,10 +221,12 @@ const PilotForm: React.FC<IPilotFormProps> = ({
value={selectedPerson} value={selectedPerson}
/> />
</Grid> </Grid>
<Grid size={3}> {isAuthenticated &&
<>
<Grid size={isMedium ? 3 : 12}>
<Typography variant="h6">Address *</Typography> <Typography variant="h6">Address *</Typography>
</Grid> </Grid>
<Grid size={9}> <Grid size={isMedium ? 9 : 12}>
<Controller <Controller
name="address" name="address"
control={methods.control} control={methods.control}
@@ -245,10 +247,10 @@ const PilotForm: React.FC<IPilotFormProps> = ({
)} )}
/> />
</Grid> </Grid>
<Grid size={3}> <Grid size={isMedium ? 3 : 12}>
<Typography variant="h6">City *</Typography> <Typography variant="h6">City *</Typography>
</Grid> </Grid>
<Grid size={9}> <Grid size={isMedium ? 9 : 12}>
<Controller <Controller
name="city" name="city"
control={methods.control} control={methods.control}
@@ -269,10 +271,10 @@ const PilotForm: React.FC<IPilotFormProps> = ({
)} )}
/> />
</Grid> </Grid>
<Grid size={3}> <Grid size={isMedium ? 3 : 12}>
<Typography variant="h6">State *</Typography> <Typography variant="h6">State *</Typography>
</Grid> </Grid>
<Grid size={9}> <Grid size={isMedium ? 9 : 12}>
<Controller <Controller
name="state" name="state"
control={methods.control} control={methods.control}
@@ -295,10 +297,10 @@ const PilotForm: React.FC<IPilotFormProps> = ({
)} )}
/> />
</Grid> </Grid>
<Grid size={3}> <Grid size={isMedium ? 3 : 12}>
<Typography variant="h6">Postal Code *</Typography> <Typography variant="h6">Postal Code *</Typography>
</Grid> </Grid>
<Grid size={9}> <Grid size={isMedium ? 9 : 12}>
<Controller <Controller
name="postalCode" name="postalCode"
control={methods.control} control={methods.control}
@@ -319,10 +321,10 @@ const PilotForm: React.FC<IPilotFormProps> = ({
)} )}
/> />
</Grid> </Grid>
<Grid size={3}> <Grid size={isMedium ? 3 : 12}>
<Typography variant="h6">Email</Typography> <Typography variant="h6">Email</Typography>
</Grid> </Grid>
<Grid size={9}> <Grid size={isMedium ? 9 : 12}>
<Controller <Controller
name="email" name="email"
control={methods.control} control={methods.control}
@@ -348,10 +350,10 @@ const PilotForm: React.FC<IPilotFormProps> = ({
)} )}
/> />
</Grid> </Grid>
<Grid size={3}> <Grid size={isMedium ? 3 : 12}>
<Typography variant="h6">Phone Number</Typography> <Typography variant="h6">Phone Number</Typography>
</Grid> </Grid>
<Grid size={9}> <Grid size={isMedium ? 9 : 12}>
<Controller <Controller
name="phone" name="phone"
control={methods.control} control={methods.control}
@@ -377,16 +379,20 @@ const PilotForm: React.FC<IPilotFormProps> = ({
)} )}
/> />
</Grid> </Grid>
</>
}
{isAuthenticated &&
<Grid size={12}> <Grid size={12}>
<PilotFormMedical <PilotFormMedical
isDisabled={isDisabled} isDisabled={isDisabled}
/> />
</Grid> </Grid>
}
<Grid size={12}> <Grid size={12}>
<PilotFormCertificates isDisabled={isDisabled} /> <PilotFormCertificates isDisabled={isDisabled} mode={mode} />
</Grid> </Grid>
<Grid size={12}> <Grid size={12}>
<PilotFormEndorsements isDisabled={isDisabled} /> <PilotFormEndorsements isDisabled={isDisabled} mode={mode} />
</Grid> </Grid>
<Grid display="flex" gap={2} justifyContent="right" size={12}> <Grid display="flex" gap={2} justifyContent="right" size={12}>
<Button <Button

16
app/src/components/pilotFormCertificates/PilotFormCertificates.tsx
View File

@@ -8,17 +8,22 @@ import {
IconName, IconName,
Select, Select,
TextField, TextField,
Typography theme,
Typography,
useMediaQuery
} from '@noahspan/noahspan-components'; } from '@noahspan/noahspan-components';
import { Controller, useFieldArray, useFormContext } from 'react-hook-form'; import { Controller, useFieldArray, useFormContext } from 'react-hook-form';
import { FormMode } from '../../enums/formMode';
const PilotFormCertificates = ({ const PilotFormCertificates = ({
isDisabled isDisabled,
mode
}: PilotFormCertificatesProps ) => { }: PilotFormCertificatesProps ) => {
const { const {
control, control,
formState: { errors }, formState: { errors },
} = useFormContext(); } = useFormContext();
const isMedium = useMediaQuery(theme.breakpoints.up('md'));
const { fields, append, remove } = useFieldArray({ const { fields, append, remove } = useFieldArray({
name: 'certificates', name: 'certificates',
@@ -30,9 +35,11 @@ const PilotFormCertificates = ({
container container
spacing={2} spacing={2}
> >
{fields.length > 0 || mode !== FormMode.VIEW &&
<Grid size={12}> <Grid size={12}>
<Typography variant="h5">Certificates</Typography> <Typography variant="h5">Certificates</Typography>
</Grid> </Grid>
}
{fields.length > 0 && ( {fields.length > 0 && (
<> <>
<Grid size={4}> <Grid size={4}>
@@ -131,6 +138,11 @@ const PilotFormCertificates = ({
<Icon iconName={IconName.TRASH} size='sm' /> <Icon iconName={IconName.TRASH} size='sm' />
</IconButton> </IconButton>
</Grid> </Grid>
<Grid size={12}>
{!isMedium && index + 1 < fields.length &&
<hr style={{ border: '1px solid #cbcbcb' }} />
}
</Grid>
</> </>
); );
})} })}

3
app/src/components/pilotFormCertificates/PilotFormCertificatesProps.interface.ts
View File

@@ -1,3 +1,6 @@
import { FormMode } from "../../enums/formMode";
export interface PilotFormCertificatesProps { export interface PilotFormCertificatesProps {
isDisabled: boolean; isDisabled: boolean;
mode: FormMode;
} }

4
app/src/components/pilotFormEndorsements/PilotFormEndorsements.tsx
View File

@@ -10,8 +10,10 @@ import {
Typography Typography
} from '@noahspan/noahspan-components'; } from '@noahspan/noahspan-components';
import { Controller, useFieldArray, useFormContext } from 'react-hook-form'; import { Controller, useFieldArray, useFormContext } from 'react-hook-form';
import { FormMode } from '../../enums/formMode';
const PilotFormEndorsements = ({ const PilotFormEndorsements = ({
mode,
isDisabled isDisabled
}: PilotFormEndorsementsProps) => { }: PilotFormEndorsementsProps) => {
const { const {
@@ -30,9 +32,11 @@ const PilotFormEndorsements = ({
container container
spacing={2} spacing={2}
> >
{fields.length > 0 || mode !== FormMode.VIEW &&
<Grid size={12}> <Grid size={12}>
<Typography variant="h5">Endorsements</Typography> <Typography variant="h5">Endorsements</Typography>
</Grid> </Grid>
}
{fields.length > 0 && ( {fields.length > 0 && (
<> <>
<Grid size={8}> <Grid size={8}>

3
app/src/components/pilotFormEndorsements/PilotFormEndorsementsProps.interface.ts
View File

@@ -1,3 +1,6 @@
import { FormMode } from "../../enums/formMode";
export interface PilotFormEndorsementsProps { export interface PilotFormEndorsementsProps {
isDisabled: boolean; isDisabled: boolean;
mode: FormMode;
} }

13
app/src/components/pilotFormMedical/PilotFormMedical.tsx
View File

@@ -1,4 +1,4 @@
import { DatePicker, Grid, Select, Typography } from '@noahspan/noahspan-components'; import { DatePicker, Grid, Select, theme, Typography, useMediaQuery } from '@noahspan/noahspan-components';
import { Controller, useFormContext } from "react-hook-form" import { Controller, useFormContext } from "react-hook-form"
import { PilotFormMedicalProps } from "./PilotFormMedicalProps.interface"; import { PilotFormMedicalProps } from "./PilotFormMedicalProps.interface";
@@ -7,17 +7,18 @@ const PilotFormMedical = ({ isDisabled }: PilotFormMedicalProps) => {
control, control,
formState: { errors }, formState: { errors },
setValue setValue
} = useFormContext() } = useFormContext();
const isMedium = useMediaQuery(theme.breakpoints.up('md'));
return ( return (
<Grid container spacing={2}> <Grid container spacing={2}>
<Grid size={12}> <Grid size={12}>
<Typography variant="h5">Medical</Typography> <Typography variant="h5">Medical</Typography>
</Grid> </Grid>
<Grid size={3}> <Grid size={isMedium ? 3 : 12}>
<Typography variant="h6">Class</Typography> <Typography variant="h6">Class</Typography>
</Grid> </Grid>
<Grid size={9}> <Grid size={isMedium ? 9 : 12}>
<Controller <Controller
name="medicalClass" name="medicalClass"
control={control} control={control}
@@ -53,10 +54,10 @@ const PilotFormMedical = ({ isDisabled }: PilotFormMedicalProps) => {
}} }}
/> />
</Grid> </Grid>
<Grid size={3}> <Grid size={isMedium ? 3 : 12}>
<Typography variant="h6">Expiration</Typography> <Typography variant="h6">Expiration</Typography>
</Grid> </Grid>
<Grid size={9}> <Grid size={isMedium ? 9 : 12}>
<Controller <Controller
name="medicalExpiration" name="medicalExpiration"
control={control} control={control}

27
app/src/components/pilots/Pilots.tsx
View File

@@ -9,7 +9,9 @@ import {
Icon, Icon,
IconName, IconName,
Table, Table,
Typography theme,
Typography,
useMediaQuery
} from '@noahspan/noahspan-components'; } from '@noahspan/noahspan-components';
import { useHttpClient } from '../../hooks/httpClient/UseHttpClient'; import { useHttpClient } from '../../hooks/httpClient/UseHttpClient';
import { AxiosError, AxiosInstance, AxiosResponse } from 'axios'; import { AxiosError, AxiosInstance, AxiosResponse } from 'axios';
@@ -20,21 +22,19 @@ import { Pilot } from './Pilot.interface';
import { initialState, reducer } from './reducer'; import { initialState, reducer } from './reducer';
import ActionMenu from '../actionMenu/ActionMenu'; import ActionMenu from '../actionMenu/ActionMenu';
import ConfirmationDialog from '../confirmationDialog/ConfirmationDialog'; import ConfirmationDialog from '../confirmationDialog/ConfirmationDialog';
import PilotCard from '../pilotCard/PilotCard';
const Pilots: React.FC<unknown> = () => { const Pilots: React.FC<unknown> = () => {
const [state, dispatch] = useReducer(reducer, initialState); const [state, dispatch] = useReducer(reducer, initialState);
const httpClient: AxiosInstance = useHttpClient(); const httpClient: AxiosInstance = useHttpClient();
const isAuthenticated = useIsAuthenticated(); const isAuthenticated = useIsAuthenticated();
const { getAccessToken } = useAccessToken(); const { getAccessToken } = useAccessToken();
const isMedium = useMediaQuery(theme.breakpoints.up('md'));
const getPilots = async () => { const getPilots = async () => {
try { try {
const config = isAuthenticated
? { headers: { Authorization: await getAccessToken() } }
: {};
const response: AxiosResponse = await httpClient.get( const response: AxiosResponse = await httpClient.get(
`api/pilots`, `api/pilots`
config
); );
if (response.data.length > 0) { if (response.data.length > 0) {
@@ -147,18 +147,18 @@ const Pilots: React.FC<unknown> = () => {
]; ];
useEffect(() => { useEffect(() => {
if (isAuthenticated && !state.isFormOpen) { if (!state.isFormOpen) {
getPilots(); getPilots();
} }
}, [isAuthenticated, state.isFormOpen]); }, [state.isFormOpen]);
return ( return (
<Box sx={{ margin: '20px' }}> <Box sx={{ margin: '20px' }}>
<Grid container spacing={2}> <Grid container spacing={2}>
<Grid size={11}> <Grid size={isMedium ? 11 : 6}>
<Typography variant="h4">Pilots</Typography> <Typography variant="h4">Pilots</Typography>
</Grid> </Grid>
<Grid display="flex" justifyContent="right" size={1}> <Grid display="flex" justifyContent="right" size={isMedium ? 1 : 6}>
{isAuthenticated && {isAuthenticated &&
<Button <Button
onClick={() => onOpenClosePilotForm(FormMode.ADD)} onClick={() => onOpenClosePilotForm(FormMode.ADD)}
@@ -184,7 +184,12 @@ const Pilots: React.FC<unknown> = () => {
</Grid> </Grid>
)} )}
<Grid size={12}> <Grid size={12}>
{state.pilots.length > 0 && <Table columns={columns} data={state.pilots} />} {isMedium && state.pilots.length > 0 &&
<Table columns={columns} data={state.pilots} />
}
{!isMedium && state.pilots.length > 0 &&
<PilotCard pilots={state.pilots} onDelete={onDeleteEntry} onOpenCloseForm={onOpenClosePilotForm} />
}
</Grid> </Grid>
</Grid> </Grid>
{state.isFormOpen && ( {state.isFormOpen && (

9
app/src/components/siteNav/SiteNav.tsx
View File

@@ -34,15 +34,12 @@ const SiteNav = () => {
{ {
name: 'Logbook', name: 'Logbook',
url: '/' url: '/'
} },
]; {
if (isAuthenticated) {
pages.push({
name: 'Pilots', name: 'Pilots',
url: '/pilots' url: '/pilots'
})
} }
];
setPages(pages) setPages(pages)
}; };