Skip to content
This repository has been archived by the owner on Apr 24, 2024. It is now read-only.

Commit

Permalink
Merge pull request #92 from badnames/no_error_message_when_canceling_…
Browse files Browse the repository at this point in the history 
…empty_seed_form

Show warning modal only when the form was changed.
  • Loading branch information
@markus2330
markus2330 authored Mar 12, 2023
2 parents 53fa6f4 + f37e56a commit 5908346
Show file tree
Hide file tree
Showing 5 changed files with 44 additions and 4 deletions.
3 changes: 3 additions & 0 deletions frontend/src/components/Form/CreatableSelectMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ export interface CreatableSelectMenuProps<T extends FieldValues> {
placeholder?: string;
handleOptionsChange?: (option: any) => void;
handleCreate?: (inputValue: string) => void;
onChange?: () => void;
}

export default function CreatableSelectMenu<T extends FieldValues>({
Expand All @@ -25,6 +26,7 @@ export default function CreatableSelectMenu<T extends FieldValues>({
placeholder,
handleOptionsChange,
handleCreate,
onChange,
}: CreatableSelectMenuProps<T>) {
const customStyles: StylesConfig = {
menu: (styles) => ({
Expand Down Expand Up @@ -96,6 +98,7 @@ export default function CreatableSelectMenu<T extends FieldValues>({
isMulti={isMulti}
styles={customStyles}
required={required}
onInputChange={onChange}
/>
)}
/>
Expand Down
3 changes: 3 additions & 0 deletions frontend/src/components/Form/SelectMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ export interface SelectMenuProps<T extends FieldValues> {
required?: boolean;
placeholder?: string;
handleOptionsChange?: (option: any) => void;
onChange?: () => void;
}

export default function SelectMenu<T extends FieldValues>({
Expand All @@ -26,6 +27,7 @@ export default function SelectMenu<T extends FieldValues>({
required = false,
placeholder,
handleOptionsChange,
onChange,
}: SelectMenuProps<T>) {
const customStyles: StylesConfig = {
menu: (styles) => ({
Expand Down Expand Up @@ -96,6 +98,7 @@ export default function SelectMenu<T extends FieldValues>({
isMulti={isMulti}
styles={customStyles}
required={required}
onInputChange={onChange}
/>
)}
/>
Expand Down
4 changes: 4 additions & 0 deletions frontend/src/components/Form/SimpleFormInput.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ interface SimpleFormInputProps<T extends FieldValues> {
min?: number;
max?: number;
register?: UseFormRegister<T>;
onChange?: () => void;
valueAsNumber?: boolean;
errorTitle?: string;
}
Expand All @@ -26,6 +27,7 @@ export default function SimpleFormInput<T extends FieldValues>({
max,
id,
register,
onChange,
valueAsNumber = false,
errorTitle,
}: SimpleFormInputProps<T>) {
Expand All @@ -37,6 +39,7 @@ export default function SimpleFormInput<T extends FieldValues>({
</label>
{isArea ? (
<textarea
onKeyUp={onChange}
rows={6}
name={id}
id={id}
Expand All @@ -47,6 +50,7 @@ export default function SimpleFormInput<T extends FieldValues>({
/>
) : (
<input
onKeyUp={onChange}
type={type}
min={min}
max={max}
Expand Down
22 changes: 20 additions & 2 deletions frontend/src/features/seeds/components/CreateSeedForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,11 @@ import { SubmitHandler, useForm } from 'react-hook-form';

interface CreateSeedFormProps {
onCancel: () => void;
onChange: () => void;
onSubmit: (newSeed: NewSeedDTO) => void;
}

const CreateSeedForm = ({ onCancel, onSubmit }: CreateSeedFormProps) => {
const CreateSeedForm = ({ onCancel, onChange, onSubmit }: CreateSeedFormProps) => {
const quality: SelectOption[] = enumToSelectOptionArr(Quality);
const quantity: SelectOption[] = enumToSelectOptionArr(Quantity);

Expand Down Expand Up @@ -59,13 +60,15 @@ const CreateSeedForm = ({ onCancel, onSubmit }: CreateSeedFormProps) => {
required={true}
id="harvest_year"
register={register}
onChange={onChange}
/>
<SimpleFormInput
labelText="Art"
placeHolder="Tomate"
required={true}
id="name"
register={register}
onChange={onChange}
/>
<CreatableSelectMenu
id="plant_id"
Expand All @@ -88,6 +91,7 @@ const CreateSeedForm = ({ onCancel, onSubmit }: CreateSeedFormProps) => {
else if (option !== null)
setValue('variety', option.value);
}}
onChange={onChange}
/>
<SelectMenu
id="quantity"
Expand All @@ -100,19 +104,22 @@ const CreateSeedForm = ({ onCancel, onSubmit }: CreateSeedFormProps) => {
const mapped = temp.value as Quantity;
setValue('quantity', mapped);
}}
onChange={onChange}
/>
<SimpleFormInput
labelText="Herkunft"
placeHolder="Daheim"
id="origin"
register={register}
onChange={onChange}
/>
<SimpleFormInput
type="date"
labelText="Verbrauch bis"
placeHolder="Verbrauch bis"
id="use_by"
register={register}
onChange={onChange}
/>
<SelectMenu
id="quality"
Expand All @@ -124,21 +131,30 @@ const CreateSeedForm = ({ onCancel, onSubmit }: CreateSeedFormProps) => {
const mapped = temp.value as Quality;
setValue('quality', mapped);
}}
onChange={onChange}
/>
<SimpleFormInput
labelText="Geschmack"
placeHolder="nussig"
id="taste"
register={register}
onChange={onChange}
/>
<SimpleFormInput labelText="Ertrag" placeHolder="1" id="yield_" register={register} />
<SimpleFormInput
labelText="Ertrag"
placeHolder="1"
id="yield_"
register={register}
onChange={onChange}
/>
<SimpleFormInput
labelText="Preis"
placeHolder="2,99€"
id="price"
register={register}
valueAsNumber={true}
errorTitle="Der Preis muss eine Zahl sein. z.B. 2,99"
onChange={onChange}
/>
<SimpleFormInput
type="number"
Expand All @@ -147,6 +163,7 @@ const CreateSeedForm = ({ onCancel, onSubmit }: CreateSeedFormProps) => {
placeHolder="0"
id="generation"
register={register}
onChange={onChange}
/>
</div>
<div className="mb-6">
Expand All @@ -156,6 +173,7 @@ const CreateSeedForm = ({ onCancel, onSubmit }: CreateSeedFormProps) => {
placeHolder="..."
id="notes"
register={register}
onChange={onChange}
/>
</div>
<div className="flex flex-row justify-between space-x-4">
Expand Down
16 changes: 14 additions & 2 deletions frontend/src/features/seeds/routes/CreateSeed.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,20 @@ export function CreateSeed() {
const navigate = useNavigate();

const [showCancelModal, setShowCancelModal] = useState(false);
const [formTouched, setFormTouched] = useState(false);
const createSeed = useCreateSeedStore((state) => state.createSeed);
const showErrorModal = useCreateSeedStore((state) => state.showErrorModal);
const setShowErrorModal = useCreateSeedStore((state) => state.setShowErrorModal);
const error = useCreateSeedStore((state) => state.error);

const onCancel = () => {
// There is no need to show the cancel warning modal if the user
// has not made any changes yet.
if (!formTouched) {
navigate('/seeds');
return;
}

setShowCancelModal(!showCancelModal);
};

Expand All @@ -26,10 +34,14 @@ export function CreateSeed() {
}
};

const onChange = () => {
setFormTouched(true);
}

return (
<div className="mx-auto w-full p-4 md:w-[900px]">
<PageTitle title="Neuer Eintrag" />
<CreateSeedForm onCancel={onCancel} onSubmit={onSubmit} />
<CreateSeedForm onCancel={onCancel} onChange={onChange} onSubmit={onSubmit} />
<SimpleModal
title="Eintrag abbrechen"
body="Änderungen, die Sie vorgenommen haben, werden nicht gespeichert. Wollen Sie wirklich abbrechen?"
Expand All @@ -41,7 +53,7 @@ export function CreateSeed() {
setShowCancelModal(false);
}}
onSubmit={() => {
// TODO: redirect to previous page or another page
navigate('/seeds');
}}
/>
<SimpleModal
Expand Down

0 comments on commit 5908346

Please sign in to comment.