Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

161 make clear why save-update-submit buttons are disabled #167

Merged
merged 5 commits into from
Jun 21, 2024
Merged

161 make clear why save-update-submit buttons are disabled #167

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
bc02b85
New button type FormSubmitButton that takes param of a form to determ…
AllanEngland Jun 19, 2024
8fee69d
Fix missing function name
AllanEngland Jun 19, 2024
1acfdf5
Update most appropriate forms to use FormSubmitButton, standardise mo…
AllanEngland Jun 19, 2024
44abed6
Improve spacing and layout of some forms, move add button bottom wher…
AllanEngland Jun 20, 2024
696b3c9
Tweaks
AllanEngland Jun 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 5 additions & 7 deletions src/main/webui/src/ProposalEditorView/investigators/List.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {
useInvestigatorResourceGetInvestigators,
} from "src/generated/proposalToolComponents.ts";
import {useQueryClient} from "@tanstack/react-query";
import {Box, Grid, Table, Text} from "@mantine/core";
import {Box, Stack, Table, Text} from "@mantine/core";
import {modals} from "@mantine/modals";
import {randomId} from "@mantine/hooks";
import DeleteButton from "src/commonButtons/delete";
Expand Down Expand Up @@ -57,10 +57,7 @@ function InvestigatorsPanel(): ReactElement {
return (
<PanelFrame>
<EditorPanelHeader proposalCode={Number(selectedProposalCode)} panelHeading={"Investigators"}/>
<Grid>
<Grid.Col span={5}>
<AddButton toolTipLabel={"Add new"}
onClick={handleAddNew} />
<Stack>
{data?.length === 0 ?
<div>Please add an investigator</div>:
isLoading ? (<div>Loading...</div>) :
Expand All @@ -81,8 +78,9 @@ function InvestigatorsPanel(): ReactElement {
}
</Table.Tbody>
</Table>}
</Grid.Col>
</Grid>
<AddButton toolTipLabel={"Add new"}
onClick={handleAddNew} />
</Stack>
</PanelFrame>
);
}
Expand Down
59 changes: 28 additions & 31 deletions src/main/webui/src/ProposalEditorView/investigators/New.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@ import {
import {useNavigate, useParams} from "react-router-dom";
import {useQueryClient} from "@tanstack/react-query";
import {InvestigatorKind} from "src/generated/proposalToolSchemas.ts";
import {Checkbox, Grid, Select} from "@mantine/core";
import {Checkbox, Select, Stack} from "@mantine/core";
import {useForm} from "@mantine/form";
import {SubmitButton} from "src/commonButtons/save";
import {FormSubmitButton} from "src/commonButtons/save";
import DeleteButton from "src/commonButtons/delete";
import { JSON_SPACES } from 'src/constants.tsx';
import {EditorPanelHeader, PanelFrame} from "../../commonPanel/appearance.tsx";
Expand All @@ -35,6 +35,8 @@ function AddInvestigatorPanel(): ReactElement {
forPhD: false,
selectedInvestigator: 0},
validate: {
type: (value) => (value != null ? null
: 'Please select an investigator type'),
selectedInvestigator: (value) => (
value === 0 || value === null ? 'Please select an investigator' : null)
}
Expand Down Expand Up @@ -107,35 +109,30 @@ function AddInvestigatorPanel(): ReactElement {
<PanelFrame>
<EditorPanelHeader proposalCode={Number(selectedProposalCode)} panelHeading={"Add an investigator"} />
<form onSubmit={handleAdd}>
<Select label={"Type"}
data={typeData}
{...form.getInputProps("type")}
/>
<Checkbox
label={"Is this for a PHD?"}
{...form.getInputProps("forPhD")}
/>
<Select
label="Select an investigator"
searchable
data={searchData}
{...form.getInputProps("selectedInvestigator")}
/>
<Grid>
<Grid.Col span={2}>
<SubmitButton
label={"Add"}
toolTipLabel={"Add new investigator"}
disabled={!form.isDirty() || !form.isValid()}
/>
</Grid.Col>
<Grid.Col span={1}>
<DeleteButton
label={"Cancel"}
onClickEvent={handleCancel}
toolTipLabel={"Do not save the new investigator"}/>
</Grid.Col>
</Grid>
<Stack>
<Select label={"Type"}
data={typeData}
{...form.getInputProps("type")}
/>
<Checkbox
label={"Is this for a PHD?"}
{...form.getInputProps("forPhD")}
/>
<Select
label="Select an investigator"
searchable
data={searchData}
{...form.getInputProps("selectedInvestigator")}
/>
<FormSubmitButton
label={"Add"}
form={form}
/>
<DeleteButton
label={"Cancel"}
onClickEvent={handleCancel}
toolTipLabel={"Do not save the new investigator"}/>
</Stack>
</form>
</PanelFrame>
)
Expand Down
15 changes: 8 additions & 7 deletions src/main/webui/src/ProposalEditorView/justifications/justification.form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ import {useForm, UseFormReturnType} from "@mantine/form";
import {fetchProposalResourceUpdateJustification} from "src/generated/proposalToolComponents.ts";
import {useParams} from "react-router-dom";
import {useQueryClient} from "@tanstack/react-query";
import {SubmitButton} from "src/commonButtons/save.tsx";
import {notifySuccess} from "../../commonPanel/notifications.tsx";
import {FormSubmitButton} from "src/commonButtons/save.tsx";
import {notifyError, notifySuccess} from "../../commonPanel/notifications.tsx";
import {PreviewJustification} from "./justification.preview.tsx";

import Editor from "react-simple-code-editor";
Expand All @@ -17,6 +17,7 @@ import "prismjs/themes/prism.css";
import "prismjs/components/prism-latex.js";
import "prismjs/components/prism-rest.js";
import "prismjs/components/prism-asciidoc.js";
import getErrorMessage from "../../errorHandling/getErrorMessage.tsx";


const JustificationTextArea = (form : UseFormReturnType<Justification>) => {
Expand Down Expand Up @@ -112,16 +113,16 @@ export default function JustificationForm(props: JustificationProps)
notifySuccess("Update successful", props.which + " justification updated");
})
.then(props.closeModal)
.catch(console.error);
.catch((error) => {
console.error(error);
notifyError("Update justification error", getErrorMessage(error))
});
});

return (
<>
<form onSubmit={handleSubmit}>
<SubmitButton
toolTipLabel={"Save updates"}
disabled={!form.isDirty() || !form.isValid()}
/>
<FormSubmitButton form={form} />
<Grid span={10} grow>
<Grid.Col span={{base: 6, md: 8, lg: 9}}>
<JustificationTextArea {...form} />
Expand Down
8 changes: 2 additions & 6 deletions src/main/webui/src/ProposalEditorView/observations/edit.group.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import {
fetchObservationResourceReplaceTarget, fetchObservationResourceReplaceTechnicalGoal,
fetchObservationResourceReplaceTimingWindow
} from 'src/generated/proposalToolComponents.ts';
import { SubmitButton } from 'src/commonButtons/save.tsx';
import {FormSubmitButton} from 'src/commonButtons/save.tsx';
import { useParams } from 'react-router-dom';
import { useQueryClient } from '@tanstack/react-query';
import { FormEvent, ReactElement } from 'react';
Expand Down Expand Up @@ -267,11 +267,7 @@ export default function ObservationEditGroup(
<>
<form onSubmit={handleSubmit}>
<Group justify={'flex-start'} mt="md">
<SubmitButton
toolTipLabel={newObservation ? "save changes" : "save"}
label={"Save"}
disabled={!form.isDirty() || !form.isValid()}
/>
<FormSubmitButton form={form} />
</Group>
<Grid columns={5}>
<Grid.Col span={{base: 5, lg: 2}}>
Expand Down
23 changes: 12 additions & 11 deletions src/main/webui/src/ProposalEditorView/proposal/Documents.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import {
useSupportingDocumentResourceGetSupportingDocuments
} from "src/generated/proposalToolComponents";
import {useParams} from "react-router-dom";
import {Box, FileButton, Table, Text} from "@mantine/core";
import {Box, FileButton, Stack, Table, Text} from "@mantine/core";
import {useState} from "react";
import {useQueryClient} from "@tanstack/react-query";
import {modals} from "@mantine/modals";
Expand Down Expand Up @@ -84,7 +84,7 @@ const DocumentsPanel = () => {
return (
<PanelFrame>
<EditorPanelHeader proposalCode={Number(selectedProposalCode)} panelHeading={"Documents"} />
<Box>
<Stack>
<Table>
<Table.Tbody>
{isLoading ? (
Expand All @@ -106,15 +106,16 @@ const DocumentsPanel = () => {
}
</Table.Tbody>
</Table>
</Box>
<Text fz="lg" fw={HEADER_FONT_WEIGHT}>Upload a document</Text>
<FileButton onChange={handleUpload}>
{(props) => <UploadButton
toolTipLabel="select a file from disk to upload"
label={"Choose a file"}
onClick={props.onClick}/>}
</FileButton>
<Result status={status} />

<Text fz="lg" fw={HEADER_FONT_WEIGHT}>Upload a document</Text>
<FileButton onChange={handleUpload}>
{(props) => <UploadButton
toolTipLabel="select a file from disk to upload"
label={"Choose a file"}
onClick={props.onClick}/>}
</FileButton>
<Result status={status} />
</Stack>
</PanelFrame>
);
};
Expand Down
12 changes: 7 additions & 5 deletions src/main/webui/src/ProposalEditorView/proposal/New.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import {useNavigate} from "react-router-dom";
import {Box, Container, Select, Text, Textarea, TextInput} from "@mantine/core";
import {useForm} from "@mantine/form";
import {useQueryClient} from "@tanstack/react-query";
import { SubmitButton } from 'src/commonButtons/save';
import {FormSubmitButton} from 'src/commonButtons/save';
import { MAX_CHARS_FOR_INPUTS, TEXTAREA_MAX_ROWS } from "src/constants";
import MaxCharsForInputRemaining from "src/commonInputs/remainingCharacterCount.tsx";
import {PanelFrame, PanelHeader} from "../../commonPanel/appearance.tsx";
Expand Down Expand Up @@ -95,7 +95,10 @@ const textFormatData = [
}
})
.then(() => setSubmitting(false))
.catch(console.log);
.catch((error) => {
console.log(error);
notifyError("Create proposal error", getErrorMessage(error))
});
});

return (
Expand Down Expand Up @@ -169,10 +172,9 @@ const textFormatData = [
{...form.getInputProps('technicalJustification.format')}
/>
</Container>
<SubmitButton
<FormSubmitButton
form={form}
label={"Create"}
toolTipLabel={"Create new proposal"}
disabled={!form.isDirty() || !form.isValid()}
/>
</form>
</PanelFrame>
Expand Down
26 changes: 14 additions & 12 deletions src/main/webui/src/ProposalEditorView/proposal/Submit.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import {ReactElement, useEffect, useState} from "react";
import {Box, Select, Text} from "@mantine/core";
import {Box, Select, Stack, Text} from "@mantine/core";
import {
fetchProposalCyclesResourceGetProposalCycleDates,
fetchSubmittedProposalResourceSubmitProposal,
Expand Down Expand Up @@ -88,17 +88,19 @@ function SubmitPanel(): ReactElement {
<ValidationOverview cycle={selectedCycle}/>

<form onSubmit={trySubmitProposal}>
<Select label={"Cycle"}
data={searchData}
{...form.getInputProps("selectedCycle")}
onChange={changeCycleDates}
/>
<Text>Submission deadline {submissionDeadline}</Text>
<SubmitButton
disabled={form.values.selectedCycle===0}
label={"Submit proposal"}
toolTipLabel={"Submit your proposal to the selected cycle"}
/>
<Stack>
<Select label={"Cycle"}
data={searchData}
{...form.getInputProps("selectedCycle")}
onChange={changeCycleDates}
/>
<Text>Submission deadline {submissionDeadline}</Text>
<SubmitButton
disabled={form.values.selectedCycle===0}
label={"Submit proposal"}
toolTipLabel={"Submit your proposal to the selected cycle"}
/>
</Stack>
</form>
</PanelFrame>
)
Expand Down
29 changes: 16 additions & 13 deletions src/main/webui/src/ProposalEditorView/proposal/Summary.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,17 @@ import {
} from "src/generated/proposalToolComponents";
import {useMutation, useQueryClient} from "@tanstack/react-query";
import {useParams} from "react-router-dom";
import {Box, Textarea} from "@mantine/core";
import {Box, Stack, Textarea} from "@mantine/core";
import {useForm} from "@mantine/form";
import { SubmitButton } from 'src/commonButtons/save';
import {FormSubmitButton} from 'src/commonButtons/save';
import {
JSON_SPACES,
MAX_CHARS_FOR_INPUTS, TEXTAREA_MAX_ROWS
} from 'src/constants';
import MaxCharsForInputRemaining from "src/commonInputs/remainingCharacterCount.tsx";
import {PanelFrame, PanelHeader} from "../../commonPanel/appearance.tsx";
import {notifyError, notifySuccess} from "../../commonPanel/notifications.tsx";
import getErrorMessage from "../../errorHandling/getErrorMessage.tsx";

function SummaryPanel() {
const { selectedProposalCode } = useParams();
Expand Down Expand Up @@ -49,11 +51,14 @@ function SummaryPanel() {
setSubmitting(true);
},
onError: () => {
console.log("An error occurred trying to update the title")
console.error("An error occurred trying to update the title");
notifyError("Update failed", getErrorMessage(error))
},
onSuccess: () => {
queryClient.invalidateQueries()
.then(() => setSubmitting(false))
.then(() => setSubmitting(false));
notifySuccess("Update summary", "Update successful");
form.resetDirty();
}
}
);
Expand Down Expand Up @@ -88,15 +93,13 @@ function SummaryPanel() {
<Box>Submitting request</Box> :

<form onSubmit={updateSummary}>
<Textarea rows={TEXTAREA_MAX_ROWS}
maxLength={MAX_CHARS_FOR_INPUTS}
name="summary" {...form.getInputProps('summary')} />
<MaxCharsForInputRemaining length={form.values.summary.length} />
<br/>
<SubmitButton toolTipLabel={"Update summary"}
label={"Save"}
disabled={!form.isDirty() || !form.isValid()}
/>
<Stack>
<Textarea rows={TEXTAREA_MAX_ROWS}
maxLength={MAX_CHARS_FOR_INPUTS}
name="summary" {...form.getInputProps('summary')} />
<MaxCharsForInputRemaining length={form.values.summary.length} />
<FormSubmitButton form={form} />
</Stack>
</form>
}
</PanelFrame>
Expand Down
Loading
Loading