import { useEffect } from "react"; import { observer } from "mobx-react-lite"; import { Controller, useForm } from "react-hook-form"; // hooks import { useLabel, useMember, useProjectState } from "hooks/store"; // components import { AppliedFiltersList, FilterSelection, FiltersDropdown } from "components/issues"; // ui import { Button, Input, TextArea } from "@plane/ui"; // types import { IProjectView, IIssueFilterOptions } from "@plane/types"; // constants import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue"; type Props = { data?: IProjectView | null; handleClose: () => void; handleFormSubmit: (values: IProjectView) => Promise; preLoadedData?: Partial | null; }; const defaultValues: Partial = { name: "", description: "", }; export const ProjectViewForm: React.FC = observer((props) => { const { handleFormSubmit, handleClose, data, preLoadedData } = props; // store hooks const { projectStates } = useProjectState(); const { project: { projectLabels }, } = useLabel(); const { project: { projectMemberIds }, } = useMember(); // form info const { control, formState: { errors, isSubmitting }, handleSubmit, reset, setValue, watch, } = useForm({ defaultValues, }); const selectedFilters: IIssueFilterOptions = {}; Object.entries(watch("query_data") ?? {}).forEach(([key, value]) => { if (!value) return; if (Array.isArray(value) && value.length === 0) return; selectedFilters[key as keyof IIssueFilterOptions] = value; }); // for removing filters from a key const handleRemoveFilter = (key: keyof IIssueFilterOptions, value: string | null) => { // If value is null then remove all the filters of that key if (!value) { setValue("query_data", { ...selectedFilters, [key]: null, }); return; } const newValues = selectedFilters?.[key] ?? []; if (Array.isArray(value)) { value.forEach((val) => { if (newValues.includes(val)) newValues.splice(newValues.indexOf(val), 1); }); } else { if (selectedFilters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1); } setValue("query_data", { ...selectedFilters, [key]: newValues, }); }; const handleCreateUpdateView = async (formData: IProjectView) => { await handleFormSubmit(formData); reset({ ...defaultValues, }); }; const clearAllFilters = () => { if (!selectedFilters) return; setValue("query_data", {}); }; useEffect(() => { reset({ ...defaultValues, ...preLoadedData, ...data, }); }, [data, preLoadedData, reset]); return (

{data ? "Update" : "Create"} View

( )} />
(