import { useEffect } from "react"; import { useRouter } from "next/router"; import useSWR from "swr"; // react-hook-form import { useForm } from "react-hook-form"; // services import issuesService from "services/issues.service"; // hooks import useProjects from "hooks/use-projects"; import useWorkspaceMembers from "hooks/use-workspace-members"; // components import { WorkspaceFiltersList } from "components/core"; import { GlobalSelectFilters } from "components/workspace/views/global-select-filters"; // ui import { Input, PrimaryButton, SecondaryButton, TextArea } from "components/ui"; // helpers import { checkIfArraysHaveSameElements } from "helpers/array.helper"; // types import { IQuery } from "types"; import { IWorkspaceView } from "types/workspace-views"; // fetch-keys import { WORKSPACE_LABELS } from "constants/fetch-keys"; import { STATE_GROUP } from "constants/project"; type Props = { handleFormSubmit: (values: IWorkspaceView) => Promise; handleClose: () => void; status: boolean; data?: IWorkspaceView | null; preLoadedData?: Partial | null; }; const defaultValues: Partial = { name: "", description: "", }; export const WorkspaceViewForm: React.FC = ({ handleFormSubmit, handleClose, status, data, preLoadedData, }) => { const router = useRouter(); const { workspaceSlug } = router.query; const { register, formState: { errors, isSubmitting }, handleSubmit, reset, watch, setValue, } = useForm({ defaultValues, }); const filters = watch("query"); const { data: labelOptions } = useSWR( workspaceSlug ? WORKSPACE_LABELS(workspaceSlug.toString()) : null, workspaceSlug ? () => issuesService.getWorkspaceLabels(workspaceSlug.toString()) : null ); const { workspaceMembers } = useWorkspaceMembers(workspaceSlug?.toString() ?? ""); const memberOptions = workspaceMembers?.map((m) => m.member); const { projects: allProjects } = useProjects(); const joinedProjects = allProjects?.filter((p) => p.is_member); const handleCreateUpdateView = async (formData: IWorkspaceView) => { await handleFormSubmit(formData); reset({ ...defaultValues, }); }; const clearAllFilters = () => { setValue("query", { assignees: null, created_by: null, subscriber: null, labels: null, priority: null, state_group: null, start_date: null, target_date: null, project: null, }); }; useEffect(() => { reset({ ...defaultValues, ...preLoadedData, ...data, }); }, [data, preLoadedData, reset]); useEffect(() => { if (status && data) { setValue("query", data.query_data); } }, [data, status, setValue]); return (

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