plane/web/components/views/form.tsx

164 lines
5.1 KiB
TypeScript
Raw Permalink Normal View History

2023-03-15 05:30:05 +00:00
import { useEffect } from "react";
import { observer } from "mobx-react-lite";
import { Controller, useForm } from "react-hook-form";
2023-03-15 05:30:05 +00:00
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// components
import { AppliedFiltersList, FilterSelection, FiltersDropdown } from "components/issues";
2023-03-15 05:30:05 +00:00
// ui
import { Input, PrimaryButton, SecondaryButton, TextArea } from "components/ui";
2023-03-15 05:30:05 +00:00
// types
import { IProjectView } from "types";
// constants
import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
2023-03-15 05:30:05 +00:00
type Props = {
data?: IProjectView | null;
2023-03-15 05:30:05 +00:00
handleClose: () => void;
handleFormSubmit: (values: IProjectView) => Promise<void>;
preLoadedData?: Partial<IProjectView> | null;
2023-03-15 05:30:05 +00:00
};
const defaultValues: Partial<IProjectView> = {
2023-03-15 05:30:05 +00:00
name: "",
description: "",
};
export const ProjectViewForm: React.FC<Props> = observer(({ handleFormSubmit, handleClose, data, preLoadedData }) => {
const { project: projectStore } = useMobxStore();
2023-03-15 05:30:05 +00:00
const {
control,
2023-03-15 05:30:05 +00:00
formState: { errors, isSubmitting },
handleSubmit,
register,
2023-03-15 05:30:05 +00:00
reset,
setValue,
watch,
} = useForm<IProjectView>({
2023-03-15 05:30:05 +00:00
defaultValues,
});
const selectedFilters = watch("query_data");
const handleCreateUpdateView = async (formData: IProjectView) => {
2023-03-15 05:30:05 +00:00
await handleFormSubmit(formData);
reset({
...defaultValues,
});
};
const clearAllFilters = () => {
if (!selectedFilters) return;
setValue("query_data", {});
};
2023-03-15 05:30:05 +00:00
useEffect(() => {
reset({
...defaultValues,
...preLoadedData,
2023-03-15 05:30:05 +00:00
...data,
});
}, [data, preLoadedData, reset]);
2023-03-15 05:30:05 +00:00
return (
<form onSubmit={handleSubmit(handleCreateUpdateView)}>
<div className="space-y-5">
<h3 className="text-lg font-medium leading-6 text-custom-text-100">{data ? "Update" : "Create"} View</h3>
2023-03-15 05:30:05 +00:00
<div className="space-y-3">
<div>
<Input
id="name"
name="name"
type="name"
placeholder="Title"
2023-03-15 05:30:05 +00:00
autoComplete="off"
className="resize-none text-xl"
2023-03-15 05:30:05 +00:00
error={errors.name}
register={register}
validations={{
required: "Title is required",
2023-03-15 05:30:05 +00:00
maxLength: {
value: 255,
message: "Title should be less than 255 characters",
2023-03-15 05:30:05 +00:00
},
}}
/>
</div>
<div>
<TextArea
id="description"
name="description"
placeholder="Description"
className="h-32 resize-none text-sm"
2023-03-15 05:30:05 +00:00
error={errors.description}
register={register}
/>
</div>
<div>
<Controller
control={control}
name="query_data"
render={({ field: { onChange, value: filters } }) => (
<FiltersDropdown title="Filters">
<FilterSelection
filters={filters ?? {}}
handleFiltersUpdate={(key, value) => {
const newValues = filters?.[key] ?? [];
if (Array.isArray(value)) {
value.forEach((val) => {
if (!newValues.includes(val)) newValues.push(val);
});
} else {
if (filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
else newValues.push(value);
}
onChange({
...filters,
[key]: newValues,
});
}}
layoutDisplayFiltersOptions={ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues.list}
labels={projectStore.projectLabels ?? undefined}
members={projectStore.projectMembers?.map((m) => m.member) ?? undefined}
states={projectStore.projectStatesByGroups ?? undefined}
/>
</FiltersDropdown>
)}
/>
</div>
{selectedFilters && Object.keys(selectedFilters).length > 0 && (
<div>
<AppliedFiltersList
appliedFilters={selectedFilters}
handleClearAllFilters={clearAllFilters}
handleRemoveFilter={() => {}}
labels={projectStore.projectLabels ?? undefined}
members={projectStore.projectMembers?.map((m) => m.member) ?? undefined}
states={projectStore.projectStatesByGroups ?? undefined}
/>
</div>
)}
2023-03-15 05:30:05 +00:00
</div>
</div>
<div className="mt-5 flex justify-end gap-2">
2023-03-17 05:10:38 +00:00
<SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
<PrimaryButton type="submit" loading={isSubmitting}>
{data
2023-03-15 05:30:05 +00:00
? isSubmitting
? "Updating View..."
: "Update View"
: isSubmitting
? "Creating View..."
: "Create View"}
2023-03-17 05:10:38 +00:00
</PrimaryButton>
2023-03-15 05:30:05 +00:00
</div>
</form>
);
});