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

adding logbook entry edit (#29)

Browse Source
This commit was merged in pull request #29.
This commit is contained in:
noahspannbauer
2024-11-19 02:30:46 +00:00
committed by GitHub
parent 014aef31aa
commit d8180bb7ee
6 changed files with 186 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
api/src/logbook/logbook.controller.ts
View File

@@ -4,7 +4,8 @@ import {
Get, Get,
HttpException, HttpException,
Param, Param,
Post Post,
Put
} from '@nestjs/common'; } from '@nestjs/common';
import { LogbookService } from './logbook.service'; import { LogbookService } from './logbook.service';
import { LogbookDto } from './logbook.dto'; import { LogbookDto } from './logbook.dto';
@@ -18,7 +19,6 @@ export class LogbookController {
@Get(':entryId') @Get(':entryId')
async find(@Param() params: any): Promise<LogbookEntity> { async find(@Param() params: any): Promise<LogbookEntity> {
console.log(params);
try { try {
const entry: LogbookEntity = await this.logbookService.find( const entry: LogbookEntity = await this.logbookService.find(
params.entryId params.entryId
@@ -43,7 +43,7 @@ export class LogbookController {
return logbookEntries; return logbookEntries;
} catch (error) { } catch (error) {
const customError = error as CustomError; const customError = error as CustomError;
console.log(error);
throw new HttpException(customError.message, customError.statusCode, { throw new HttpException(customError.message, customError.statusCode, {
cause: customError.name cause: customError.name
}); });
@@ -63,4 +63,20 @@ export class LogbookController {
}); });
} }
} }
@Put(':entryId')
async update(
@Param() params: any,
@Body() logbookData: LogbookDto
): Promise<void> {
try {
return await this.logbookService.update(logbookData);
} catch (error) {
const customError = error as CustomError;
throw new HttpException(customError.message, customError.statusCode, {
cause: customError.name
});
}
}
} }

36
api/src/logbook/logbook.service.ts
View File

@@ -8,16 +8,18 @@ import { v4 as uuidv4 } from 'uuid';
@Injectable() @Injectable()
export class LogbookService { export class LogbookService {
private readonly tableName = 'Logbook';
constructor(private readonly tableService: TableService) {} constructor(private readonly tableService: TableService) {}
async getLogbookEntries(filter: string): Promise<LogbookEntity[]> { async getLogbookEntries(filter: string): Promise<LogbookEntity[]> {
try { try {
const client: TableClient = const client: TableClient = await this.tableService.getTableClient(
await this.tableService.getTableClient('Logbook'); this.tableName
);
const entities = await client.listEntities({ const entities = await client.listEntities({
queryOptions: { filter: filter } queryOptions: { filter: filter }
}); });
console.log(entities);
const logbookEntries: LogbookEntity[] = []; const logbookEntries: LogbookEntity[] = [];
for await (const entity of entities) { for await (const entity of entities) {
@@ -73,7 +75,7 @@ export class LogbookService {
: null, : null,
notes: entity.notes.toString() notes: entity.notes.toString()
}; };
console.log(logbookEntry);
logbookEntries.push(logbookEntry); logbookEntries.push(logbookEntry);
} }
@@ -118,8 +120,9 @@ export class LogbookService {
} }
async create(logbookData: LogbookDto): Promise<TableInsertEntityHeaders> { async create(logbookData: LogbookDto): Promise<TableInsertEntityHeaders> {
const client: TableClient = const client: TableClient = await this.tableService.getTableClient(
await this.tableService.getTableClient('Logbook'); this.tableName
);
const logbook: LogbookEntity = new LogbookEntity(); const logbook: LogbookEntity = new LogbookEntity();
Object.assign(logbook, logbookData); Object.assign(logbook, logbookData);
@@ -138,4 +141,25 @@ export class LogbookService {
); );
} }
} }
async update(logbookData: LogbookDto): Promise<void> {
const client: TableClient = await this.tableService.getTableClient(
this.tableName
);
const logbook: LogbookEntity = new LogbookEntity();
Object.assign(logbook, logbookData);
try {
await client.upsertEntity(logbook, 'Replace');
} catch (error) {
const restError: RestError = error as RestError;
throw new CustomError(
restError.details['odataError']['message']['value'],
restError.details['odataError']['code'],
restError.statusCode
);
}
}
} }

6
app/src/actionMenu/ActionMenu.tsx
View File

@@ -1,4 +1,4 @@
import { useEffect, useState } from 'react'; import { useState } from 'react';
import { IActionMenuProps } from './IActionMenuProps'; import { IActionMenuProps } from './IActionMenuProps';
import { import {
EllipsisVerticalIcon, EllipsisVerticalIcon,
@@ -26,10 +26,6 @@ const ActionMenu = ({ id, onOpenCloseForm }: IActionMenuProps) => {
setAnchorElAction(null); setAnchorElAction(null);
}; };
useEffect(() => {
console.log(id);
}, [id]);
return ( return (
<div> <div>
<IconButton onClick={onOpenActionMenu}> <IconButton onClick={onOpenActionMenu}>

6
app/src/components/logbookEntryForm/ILogbookEntryFormState.ts Normal file
View File

@@ -0,0 +1,6 @@
export interface ILogbookEntryFormState {
isDisabled: boolean;
isLoading: boolean;
pilotOptions: { label: string; value: string }[];
selectedEntryPilotName: string;
}

155
app/src/components/logbookEntryForm/LogbookEntryForm.tsx
View File

@@ -1,4 +1,4 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useReducer, useState } from 'react';
import { import {
Accordion, Accordion,
AccordionDetails, AccordionDetails,
@@ -15,13 +15,9 @@ import {
Typography, Typography,
XmarkIcon XmarkIcon
} from '@noahspan/noahspan-components'; } from '@noahspan/noahspan-components';
import { import { useForm, Controller, FormProvider } from 'react-hook-form';
useForm,
Controller,
SubmitHandler,
FormProvider
} from 'react-hook-form';
import { ILogbookEntryFormProps } from './ILogbookEntryFormProps'; import { ILogbookEntryFormProps } from './ILogbookEntryFormProps';
import { initialState, reducer } from './reducer';
import axios, { AxiosInstance, AxiosResponse } from 'axios'; import axios, { AxiosInstance, AxiosResponse } from 'axios';
import { useHttpClient } from '../../hooks/httpClient/UseHttpClient'; import { useHttpClient } from '../../hooks/httpClient/UseHttpClient';
import { useAccessToken } from '../../hooks/accessToken/UseAcessToken'; import { useAccessToken } from '../../hooks/accessToken/UseAcessToken';
@@ -35,13 +31,8 @@ const LogbookEntryForm: React.FC<ILogbookEntryFormProps> = ({
mode, mode,
onOpenClose onOpenClose
}) => { }) => {
const [state, dispatch] = useReducer(reducer, initialState);
const httpClient: AxiosInstance = useHttpClient(); const httpClient: AxiosInstance = useHttpClient();
const [isLoading, setIsLoading] = useState<boolean>(false);
const [selectedEntry, setSelectedEntry] = useState();
const [isDisabled, setIsDisabled] = useState<boolean>(false);
const [pilotOptions, setPilotOptions] = useState<
{ label: string; value: string }[]
>([]);
const { getAccessToken } = useAccessToken(); const { getAccessToken } = useAccessToken();
const isAuthenticated = useIsAuthenticated(); const isAuthenticated = useIsAuthenticated();
const defaultValues = { const defaultValues = {
@@ -77,45 +68,55 @@ const LogbookEntryForm: React.FC<ILogbookEntryFormProps> = ({
const onCancel = () => { const onCancel = () => {
methods.reset(defaultValues); methods.reset(defaultValues);
dispatch({ type: 'SET_IS_DISABLED', payload: false });
onOpenClose(FormMode.CANCEL); onOpenClose(FormMode.CANCEL);
}; };
const onSubmit = async (data: unknown) => { const onSubmit = async (data: unknown) => {
try { try {
setIsLoading(true); dispatch({ type: 'SET_IS_LOADING', payload: true });
const accessToken: string = await getAccessToken(); const accessToken: string = await getAccessToken();
await httpClient.post(`api/logbook`, data, { if (!entryId) {
headers: { await httpClient.post(`api/logbook`, data, {
Authorization: accessToken headers: {
} Authorization: accessToken
}); }
});
} else {
await httpClient.put(`api/logbook/${entryId}`, data, {
headers: {
Authorization: accessToken
}
});
}
methods.reset(defaultValues); methods.reset(defaultValues);
dispatch({ type: 'SET_IS_DISABLED', payload: false });
onOpenClose(FormMode.CANCEL); onOpenClose(FormMode.CANCEL);
} catch (error) { } catch (error) {
if (axios.isAxiosError(error)) { if (axios.isAxiosError(error)) {
const errResp = error.response; const errResp = error.response;
console.log(errResp?.data.message); console.log(errResp);
} else { } else {
} }
} finally { } finally {
setIsLoading(false); dispatch({ type: 'SET_IS_LOADING', payload: false });
} }
}; };
useEffect(() => { useEffect(() => {
if (mode === FormMode.VIEW) { if (mode === FormMode.VIEW) {
setIsDisabled(true); dispatch({ type: 'SET_IS_DISABLED', payload: true });
} }
}, [mode]); }, [mode]);
useEffect(() => { useEffect(() => {
const getEntry = async () => { const getEntry = async () => {
try { try {
setIsLoading(true); dispatch({ type: 'SET_IS_LOADING', payload: true });
const config = isAuthenticated const config = isAuthenticated
? { headers: { Authorization: await getAccessToken() } } ? { headers: { Authorization: await getAccessToken() } }
@@ -130,7 +131,7 @@ const LogbookEntryForm: React.FC<ILogbookEntryFormProps> = ({
} catch (error) { } catch (error) {
console.log(error); console.log(error);
} finally { } finally {
setIsLoading(false); dispatch({ type: 'SET_IS_LOADING', payload: false });
} }
}; };
@@ -148,7 +149,7 @@ const LogbookEntryForm: React.FC<ILogbookEntryFormProps> = ({
}; };
}); });
setPilotOptions(newPilotsOptions); dispatch({ type: 'SET_PILOT_OPTIONS', payload: newPilotsOptions });
} }
}, [pilots]); }, [pilots]);
@@ -182,28 +183,40 @@ const LogbookEntryForm: React.FC<ILogbookEntryFormProps> = ({
name="pilotId" name="pilotId"
control={methods.control} control={methods.control}
render={({ field: { onChange, value } }) => { render={({ field: { onChange, value } }) => {
useEffect(() => {
if (value && mode !== FormMode.ADD) {
const pilot = pilots?.find((pilot) => pilot.id === value);
dispatch({
type: 'SET_SELECTED_ENTRY_PILOT_NAME',
payload: pilot.name
});
}
}, [value]);
return ( return (
<Select <>
disabled={isDisabled} {mode === FormMode.ADD && (
fullWidth <Select
onChange={(event) => { disabled={state.isDisabled}
const pilot = pilots?.find( fullWidth
(pilot) => pilot.id === event.target.value onChange={onChange}
); options={
state.pilotOptions && state.pilotOptions.length > 0
if (pilot) { ? state.pilotOptions
methods.setValue('pilotName', pilot.name); : []
} }
value={value}
methods.setValue('pilotId', event.target.value); />
}} )}
options={ {mode !== FormMode.ADD && (
pilotOptions && pilotOptions.length > 0 <TextField
? pilotOptions disabled={true}
: [] fullWidth
} value={state.selectedEntryPilotName}
value={value} />
/> )}
</>
); );
}} }}
/> />
@@ -217,7 +230,7 @@ const LogbookEntryForm: React.FC<ILogbookEntryFormProps> = ({
control={methods.control} control={methods.control}
render={({ field: { onChange, value } }) => ( render={({ field: { onChange, value } }) => (
<DatePicker <DatePicker
disabled={isDisabled} disabled={state.isDisabled}
onChange={onChange} onChange={onChange}
value={value} value={value}
/> />
@@ -233,7 +246,7 @@ const LogbookEntryForm: React.FC<ILogbookEntryFormProps> = ({
control={methods.control} control={methods.control}
render={({ field: { onChange, value } }) => ( render={({ field: { onChange, value } }) => (
<TextField <TextField
disabled={isDisabled} disabled={state.isDisabled}
error={methods.formState.errors.address ? true : false} error={methods.formState.errors.address ? true : false}
fullWidth fullWidth
helperText={ helperText={
@@ -256,7 +269,7 @@ const LogbookEntryForm: React.FC<ILogbookEntryFormProps> = ({
control={methods.control} control={methods.control}
render={({ field: { onChange, value } }) => ( render={({ field: { onChange, value } }) => (
<TextField <TextField
disabled={isDisabled} disabled={state.isDisabled}
error={methods.formState.errors.address ? true : false} error={methods.formState.errors.address ? true : false}
fullWidth fullWidth
helperText={ helperText={
@@ -279,7 +292,7 @@ const LogbookEntryForm: React.FC<ILogbookEntryFormProps> = ({
control={methods.control} control={methods.control}
render={({ field: { onChange, value } }) => ( render={({ field: { onChange, value } }) => (
<TextField <TextField
disabled={isDisabled} disabled={state.isDisabled}
error={methods.formState.errors.address ? true : false} error={methods.formState.errors.address ? true : false}
fullWidth fullWidth
helperText={ helperText={
@@ -302,7 +315,7 @@ const LogbookEntryForm: React.FC<ILogbookEntryFormProps> = ({
control={methods.control} control={methods.control}
render={({ field: { onChange, value } }) => ( render={({ field: { onChange, value } }) => (
<TextField <TextField
disabled={isDisabled} disabled={state.isDisabled}
error={methods.formState.errors.address ? true : false} error={methods.formState.errors.address ? true : false}
fullWidth fullWidth
helperText={ helperText={
@@ -325,7 +338,7 @@ const LogbookEntryForm: React.FC<ILogbookEntryFormProps> = ({
control={methods.control} control={methods.control}
render={({ field: { onChange, value } }) => ( render={({ field: { onChange, value } }) => (
<TextField <TextField
disabled={isDisabled} disabled={state.isDisabled}
error={methods.formState.errors.address ? true : false} error={methods.formState.errors.address ? true : false}
fullWidth fullWidth
helperText={ helperText={
@@ -354,7 +367,7 @@ const LogbookEntryForm: React.FC<ILogbookEntryFormProps> = ({
control={methods.control} control={methods.control}
render={({ field: { onChange, value } }) => ( render={({ field: { onChange, value } }) => (
<TextField <TextField
disabled={isDisabled} disabled={state.isDisabled}
error={methods.formState.errors.address ? true : false} error={methods.formState.errors.address ? true : false}
fullWidth fullWidth
helperText={ helperText={
@@ -383,7 +396,7 @@ const LogbookEntryForm: React.FC<ILogbookEntryFormProps> = ({
control={methods.control} control={methods.control}
render={({ field: { onChange, value } }) => ( render={({ field: { onChange, value } }) => (
<TextField <TextField
disabled={isDisabled} disabled={state.isDisabled}
error={methods.formState.errors.address ? true : false} error={methods.formState.errors.address ? true : false}
fullWidth fullWidth
helperText={ helperText={
@@ -419,7 +432,7 @@ const LogbookEntryForm: React.FC<ILogbookEntryFormProps> = ({
control={methods.control} control={methods.control}
render={({ field: { onChange, value } }) => ( render={({ field: { onChange, value } }) => (
<TextField <TextField
disabled={isDisabled} disabled={state.isDisabled}
error={ error={
methods.formState.errors.address ? true : false methods.formState.errors.address ? true : false
} }
@@ -450,7 +463,7 @@ const LogbookEntryForm: React.FC<ILogbookEntryFormProps> = ({
control={methods.control} control={methods.control}
render={({ field: { onChange, value } }) => ( render={({ field: { onChange, value } }) => (
<TextField <TextField
disabled={isDisabled} disabled={state.isDisabled}
error={ error={
methods.formState.errors.address ? true : false methods.formState.errors.address ? true : false
} }
@@ -492,7 +505,7 @@ const LogbookEntryForm: React.FC<ILogbookEntryFormProps> = ({
control={methods.control} control={methods.control}
render={({ field: { onChange, value } }) => ( render={({ field: { onChange, value } }) => (
<TextField <TextField
disabled={isDisabled} disabled={state.isDisabled}
error={ error={
methods.formState.errors.address ? true : false methods.formState.errors.address ? true : false
} }
@@ -523,7 +536,7 @@ const LogbookEntryForm: React.FC<ILogbookEntryFormProps> = ({
control={methods.control} control={methods.control}
render={({ field: { onChange, value } }) => ( render={({ field: { onChange, value } }) => (
<TextField <TextField
disabled={isDisabled} disabled={state.isDisabled}
error={ error={
methods.formState.errors.address ? true : false methods.formState.errors.address ? true : false
} }
@@ -556,7 +569,7 @@ const LogbookEntryForm: React.FC<ILogbookEntryFormProps> = ({
control={methods.control} control={methods.control}
render={({ field: { onChange, value } }) => ( render={({ field: { onChange, value } }) => (
<TextField <TextField
disabled={isDisabled} disabled={state.isDisabled}
error={ error={
methods.formState.errors.address ? true : false methods.formState.errors.address ? true : false
} }
@@ -587,7 +600,7 @@ const LogbookEntryForm: React.FC<ILogbookEntryFormProps> = ({
control={methods.control} control={methods.control}
render={({ field: { onChange, value } }) => ( render={({ field: { onChange, value } }) => (
<TextField <TextField
disabled={isDisabled} disabled={state.isDisabled}
error={ error={
methods.formState.errors.address ? true : false methods.formState.errors.address ? true : false
} }
@@ -618,7 +631,7 @@ const LogbookEntryForm: React.FC<ILogbookEntryFormProps> = ({
control={methods.control} control={methods.control}
render={({ field: { onChange, value } }) => ( render={({ field: { onChange, value } }) => (
<TextField <TextField
disabled={isDisabled} disabled={state.isDisabled}
error={ error={
methods.formState.errors.address ? true : false methods.formState.errors.address ? true : false
} }
@@ -662,7 +675,7 @@ const LogbookEntryForm: React.FC<ILogbookEntryFormProps> = ({
control={methods.control} control={methods.control}
render={({ field: { onChange, value } }) => ( render={({ field: { onChange, value } }) => (
<TextField <TextField
disabled={isDisabled} disabled={state.isDisabled}
error={ error={
methods.formState.errors.address ? true : false methods.formState.errors.address ? true : false
} }
@@ -695,7 +708,7 @@ const LogbookEntryForm: React.FC<ILogbookEntryFormProps> = ({
control={methods.control} control={methods.control}
render={({ field: { onChange, value } }) => ( render={({ field: { onChange, value } }) => (
<TextField <TextField
disabled={isDisabled} disabled={state.isDisabled}
error={ error={
methods.formState.errors.address ? true : false methods.formState.errors.address ? true : false
} }
@@ -726,7 +739,7 @@ const LogbookEntryForm: React.FC<ILogbookEntryFormProps> = ({
control={methods.control} control={methods.control}
render={({ field: { onChange, value } }) => ( render={({ field: { onChange, value } }) => (
<TextField <TextField
disabled={isDisabled} disabled={state.isDisabled}
error={ error={
methods.formState.errors.address ? true : false methods.formState.errors.address ? true : false
} }
@@ -757,7 +770,7 @@ const LogbookEntryForm: React.FC<ILogbookEntryFormProps> = ({
control={methods.control} control={methods.control}
render={({ field: { onChange, value } }) => ( render={({ field: { onChange, value } }) => (
<TextField <TextField
disabled={isDisabled} disabled={state.isDisabled}
error={ error={
methods.formState.errors.address ? true : false methods.formState.errors.address ? true : false
} }
@@ -788,7 +801,7 @@ const LogbookEntryForm: React.FC<ILogbookEntryFormProps> = ({
control={methods.control} control={methods.control}
render={({ field: { onChange, value } }) => ( render={({ field: { onChange, value } }) => (
<TextField <TextField
disabled={isDisabled} disabled={state.isDisabled}
error={ error={
methods.formState.errors.address ? true : false methods.formState.errors.address ? true : false
} }
@@ -819,7 +832,7 @@ const LogbookEntryForm: React.FC<ILogbookEntryFormProps> = ({
control={methods.control} control={methods.control}
render={({ field: { onChange, value } }) => ( render={({ field: { onChange, value } }) => (
<TextField <TextField
disabled={isDisabled} disabled={state.isDisabled}
error={ error={
methods.formState.errors.address ? true : false methods.formState.errors.address ? true : false
} }
@@ -854,7 +867,7 @@ const LogbookEntryForm: React.FC<ILogbookEntryFormProps> = ({
control={methods.control} control={methods.control}
render={({ field: { onChange, value } }) => ( render={({ field: { onChange, value } }) => (
<TextField <TextField
disabled={isDisabled} disabled={state.isDisabled}
error={methods.formState.errors.address ? true : false} error={methods.formState.errors.address ? true : false}
fullWidth fullWidth
helperText={ helperText={
@@ -873,8 +886,8 @@ const LogbookEntryForm: React.FC<ILogbookEntryFormProps> = ({
<Grid display="flex" gap={2} justifyContent="right" size={12}> <Grid display="flex" gap={2} justifyContent="right" size={12}>
<Button <Button
disabled={ disabled={
isDisabled && mode.toString() !== FormMode.VIEW state.isDisabled && mode.toString() !== FormMode.VIEW
? isDisabled ? state.isDisabled
: false : false
} }
startIcon={<XmarkIcon />} startIcon={<XmarkIcon />}
@@ -886,7 +899,7 @@ const LogbookEntryForm: React.FC<ILogbookEntryFormProps> = ({
</Button> </Button>
{mode.toString() !== FormMode.VIEW && ( {mode.toString() !== FormMode.VIEW && (
<Button <Button
disabled={isDisabled} disabled={state.isDisabled}
startIcon={<SaveIcon />} startIcon={<SaveIcon />}
size="small" size="small"
type="submit" type="submit"

46
app/src/components/logbookEntryForm/reducer.tsx Normal file
View File

@@ -0,0 +1,46 @@
import { ILogbookEntryFormState } from './ILogbookEntryFormState';
type Action =
| { type: 'SET_IS_DISABLED'; payload: boolean }
| { type: 'SET_IS_LOADING'; payload: boolean }
| { type: 'SET_PILOT_OPTIONS'; payload: { label: string; value: string }[] }
| { type: 'SET_SELECTED_ENTRY_PILOT_NAME'; payload: string };
export const initialState: ILogbookEntryFormState = {
isDisabled: false,
isLoading: true,
pilotOptions: [],
selectedEntryPilotName: ''
};
export const reducer = (
state: ILogbookEntryFormState,
action: Action
): ILogbookEntryFormState => {
switch (action.type) {
case 'SET_IS_DISABLED': {
return {
...state,
isDisabled: action.payload
};
}
case 'SET_IS_LOADING': {
return {
...state,
isLoading: action.payload
};
}
case 'SET_PILOT_OPTIONS': {
return {
...state,
pilotOptions: action.payload
};
}
case 'SET_SELECTED_ENTRY_PILOT_NAME': {
return {
...state,
selectedEntryPilotName: action.payload
};
}
}
};