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

Fix Remove required mark #9 changes #13

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Fix Remove required mark #9 changes #13

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7acb03f
Change Required design for modal in index
Blueclaus13 Feb 25, 2023
4dd8791
Fix Remove required mark #9 corrections
Blueclaus13 Feb 28, 2023
6b77e5f
Change tooltip on save button
Blueclaus13 Feb 28, 2023
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
65 changes: 52 additions & 13 deletions src/components/EventForm/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import { supabaseClient } from "../../supabase/client";
import { useUserStore } from "../../store/userStore";
import { handleError, handleSuccess } from "../../util";
import { DeleteOutlined, PlusOutlined } from "@ant-design/icons";
import Tooltip from "antd/lib/tooltip";

export default function EventForm({
event,
Expand All @@ -30,6 +31,10 @@ export default function EventForm({
const [isDeleting, setIsDeleting] = useState(false);
const [imageURL, setImageUrl] = useState(event?.image_url);

//States to control in the current time when the required input change.
const [valueTitle, setValueTitle] = useState("");
const [valueDate, setValueDate] = useState("");

const updateEvent = async (values) => {
const { error } = await supabaseClient
.from("timeline")
Expand Down Expand Up @@ -59,7 +64,6 @@ export default function EventForm({
handleError({ message: "Please check your input" });
return;
}

values.image_url = imageURL;

setIsLoading(true);
Expand All @@ -72,6 +76,7 @@ export default function EventForm({
closeModal();
};


const handleUpload = async ({ file }) => {
setIsUpLoading(true);
const { error } = await supabaseClient.storage
Expand Down Expand Up @@ -130,34 +135,67 @@ export default function EventForm({
</div>
);

//Function to save the input Title value when it changes
const onInput = (e) => {
setValueTitle(e.target.value)};

//Function to save the input Date-value when it changes
const onChange = (date, dateString) => {
if(dateString !== ""){
setValueDate(dateString)
}
};


return (
<Modal
open={isModalOpen}
onOk={() => {
onFinish(form.getFieldsValue());
}}
onCancel={() => {
closeModal();
}}
okText={"Save"}
confirmLoading={isLoading}
centered
footer={[
<Button key="cancelButton" onClick={()=>{closeModal()}}>Cancel</Button>,
<Tooltip key="saveTooltip" placement="top" title="Save available when title and date are filled in" >
<Button key="saveButton"type="primary" onClick={() =>{onFinish(form.getFieldsValue());}}
disabled={valueDate !== "" && valueTitle !== "" ? false : true}
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of maintaining two states, we can get the values by using form.getFieldValue() provided by antd.

Can you please check @Blueclaus13

style={{margin: "0.75em"}}>Save</Button>
</Tooltip>,
]}

>
<Form
initialValues={event ? { ...event, date: moment.utc(event.date) } : {}}
initialValues={event ? { ...event, date: moment.utc(event.date) }
: {}}
layout={"vertical"}
form={form}
onValuesChange={() => {}}
requiredMark="optional"
onFinish={onFinish}

>
<Form.Item required name="date" label="Date">
<DatePicker />
<Form.Item name="date" label="Date"
rules={[
{
required:true,
message: 'Please input Date!',
},
]}
tooltip="This is a required field">
<DatePicker onChange={onChange}/>
</Form.Item>
<Form.Item required name="title" label="Event title">
<Input placeholder="What happened?" />
<Form.Item name="title" label="Event title"
rules={[
{
required:true,
message: 'Please input a Title!',
},
]}
tooltip="This is a required field">
<Input placeholder="What happened?" onInput={onInput}/>
</Form.Item>

<Form.Item name="description" label="Event description">
<Form.Item name="description" label="Event description" >
<TextArea rows={4} />
</Form.Item>
<div>
Expand Down Expand Up @@ -192,4 +230,5 @@ export default function EventForm({
</Form>
</Modal>
);
}
}