* fix: semicolon on estimate settings page

* refactor: project settings automations store implementation

* fix: active cycle stuck on infinite loading

* fix: removed delete project option from sidebar

* fix: discloser not opening when navigating to project

* fix: clear filter not working & filter appearing even if nothing is selected

* refactor: select label store implementation

* refactor: select state store implementation
This commit is contained in:
Dakshesh Jain 2023-11-14 18:33:01 +05:30 committed by sriram veeraghanta
parent 964e880fc4
commit e96f059f65
7 changed files with 87 additions and 102 deletions

View File

@ -80,7 +80,7 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
workspaceSlug && projectId ? () => cycleStore.fetchCycles(workspaceSlug, projectId, "current") : null workspaceSlug && projectId ? () => cycleStore.fetchCycles(workspaceSlug, projectId, "current") : null
); );
const activeCycle = cycleStore.cycles?.[projectId]?.active || null; const activeCycle = cycleStore.cycles?.[projectId]?.current || null;
const cycle = activeCycle ? activeCycle[0] : null; const cycle = activeCycle ? activeCycle[0] : null;
const issues = (cycleStore?.active_cycle_issues as any) || null; const issues = (cycleStore?.active_cycle_issues as any) || null;

View File

@ -3,16 +3,13 @@ import { useRouter } from "next/router";
import useSWR from "swr"; import useSWR from "swr";
import { Combobox, Transition } from "@headlessui/react"; import { Combobox, Transition } from "@headlessui/react";
import { usePopper } from "react-popper"; import { usePopper } from "react-popper";
// services import { observer } from "mobx-react-lite";
import { IssueLabelService } from "services/issue"; // store
import { useMobxStore } from "lib/mobx/store-provider";
// ui // ui
import { IssueLabelsList } from "components/ui"; import { IssueLabelsList } from "components/ui";
// icons // icons
import { Check, Component, Plus, Search, Tag } from "lucide-react"; import { Check, Component, Plus, Search, Tag } from "lucide-react";
// types
import type { IIssueLabels } from "types";
// fetch-keys
import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
type Props = { type Props = {
setIsOpen: React.Dispatch<React.SetStateAction<boolean>>; setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
@ -22,15 +19,19 @@ type Props = {
label?: JSX.Element; label?: JSX.Element;
}; };
const issueLabelService = new IssueLabelService(); export const IssueLabelSelect: React.FC<Props> = observer((props) => {
const { setIsOpen, value, onChange, projectId, label } = props;
export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange, projectId, label }) => {
// states // states
const [query, setQuery] = useState(""); const [query, setQuery] = useState("");
const router = useRouter(); const router = useRouter();
const { workspaceSlug } = router.query; const { workspaceSlug } = router.query;
const {
project: { labels, fetchProjectLabels },
} = useMobxStore();
const [referenceElement, setReferenceElement] = useState<HTMLDivElement | null>(null); const [referenceElement, setReferenceElement] = useState<HTMLDivElement | null>(null);
const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null); const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
@ -38,11 +39,11 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
placement: "bottom-start", placement: "bottom-start",
}); });
const { data: issueLabels } = useSWR<IIssueLabels[]>( const issueLabels = labels?.[projectId] || [];
projectId ? PROJECT_ISSUE_LABELS(projectId) : null,
workspaceSlug && projectId useSWR(
? () => issueLabelService.getProjectIssueLabels(workspaceSlug as string, projectId) workspaceSlug && projectId ? `PROJECT_ISSUE_LABELS_${projectId.toUpperCase()}` : null,
: null workspaceSlug && projectId ? () => fetchProjectLabels(workspaceSlug.toString(), projectId) : null
); );
const filteredOptions = const filteredOptions =
@ -202,4 +203,4 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
)} )}
</Combobox> </Combobox>
); );
}; });

View File

@ -1,14 +1,13 @@
import React from "react"; import React from "react";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import useSWR from "swr"; import useSWR from "swr";
// services import { observer } from "mobx-react-lite";
import { ProjectStateService } from "services/project"; // store
import { useMobxStore } from "lib/mobx/store-provider";
// ui // ui
import { CustomSearchSelect, DoubleCircleIcon, StateGroupIcon } from "@plane/ui"; import { CustomSearchSelect, DoubleCircleIcon, StateGroupIcon } from "@plane/ui";
// icons // icons
import { Plus } from "lucide-react"; import { Plus } from "lucide-react";
// fetch keys
import { STATES_LIST } from "constants/fetch-keys";
type Props = { type Props = {
setIsOpen: React.Dispatch<React.SetStateAction<boolean>>; setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
@ -17,19 +16,24 @@ type Props = {
projectId: string; projectId: string;
}; };
// services export const IssueStateSelect: React.FC<Props> = observer((props) => {
const projectStateService = new ProjectStateService(); const { setIsOpen, value, onChange, projectId } = props;
export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange, projectId }) => {
// states // states
const router = useRouter(); const router = useRouter();
const { workspaceSlug } = router.query; const { workspaceSlug } = router.query;
const { data: states } = useSWR( const {
workspaceSlug && projectId ? STATES_LIST(projectId) : null, projectState: { states: projectStates, fetchProjectStates },
workspaceSlug && projectId ? () => projectStateService.getStates(workspaceSlug as string, projectId) : null } = useMobxStore();
useSWR(
workspaceSlug && projectId ? `STATES_LIST_${projectId.toUpperCase()}` : null,
workspaceSlug && projectId ? () => fetchProjectStates(workspaceSlug.toString(), projectId) : null
); );
const states = projectStates?.[projectId] || [];
const options = states?.map((state) => ({ const options = states?.map((state) => ({
value: state.id, value: state.id,
query: state.name, query: state.name,
@ -74,4 +78,4 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
noChevron noChevron
/> />
); );
}; });

View File

@ -5,18 +5,7 @@ import { DraggableProvided, DraggableStateSnapshot } from "@hello-pangea/dnd";
import { Disclosure, Transition } from "@headlessui/react"; import { Disclosure, Transition } from "@headlessui/react";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
// icons // icons
import { import { MoreVertical, PenSquare, LinkIcon, Star, FileText, Settings, Share2, LogOut, ChevronDown } from "lucide-react";
MoreVertical,
PenSquare,
LinkIcon,
Star,
Trash2,
FileText,
Settings,
Share2,
LogOut,
ChevronDown,
} from "lucide-react";
// hooks // hooks
import useToast from "hooks/use-toast"; import useToast from "hooks/use-toast";
// helpers // helpers
@ -27,7 +16,7 @@ import { IProject } from "types";
import { useMobxStore } from "lib/mobx/store-provider"; import { useMobxStore } from "lib/mobx/store-provider";
// components // components
import { CustomMenu, Tooltip, ArchiveIcon, PhotoFilterIcon, DiceIcon, ContrastIcon, LayersIcon } from "@plane/ui"; import { CustomMenu, Tooltip, ArchiveIcon, PhotoFilterIcon, DiceIcon, ContrastIcon, LayersIcon } from "@plane/ui";
import { LeaveProjectModal, DeleteProjectModal, PublishProjectModal } from "components/project"; import { LeaveProjectModal, PublishProjectModal } from "components/project";
type Props = { type Props = {
project: IProject; project: IProject;
@ -71,6 +60,7 @@ const navigation = (workspaceSlug: string, projectId: string) => [
]; ];
export const ProjectSidebarListItem: React.FC<Props> = observer((props) => { export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { project, provided, snapshot, handleCopyText, shortContextMenu = false } = props; const { project, provided, snapshot, handleCopyText, shortContextMenu = false } = props;
// store // store
const { project: projectStore, theme: themeStore } = useMobxStore(); const { project: projectStore, theme: themeStore } = useMobxStore();
@ -81,7 +71,6 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
const { setToastAlert } = useToast(); const { setToastAlert } = useToast();
// states // states
const [leaveProjectModalOpen, setLeaveProjectModal] = useState(false); const [leaveProjectModalOpen, setLeaveProjectModal] = useState(false);
const [deleteProjectModalOpen, setDeleteProjectModal] = useState(false);
const [publishModalOpen, setPublishModal] = useState(false); const [publishModalOpen, setPublishModal] = useState(false);
const isAdmin = project.member_role === 20; const isAdmin = project.member_role === 20;
@ -121,21 +110,11 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
setLeaveProjectModal(false); setLeaveProjectModal(false);
}; };
const handleDeleteProjectClick = () => {
setDeleteProjectModal(true);
};
const handleDeleteProjectModalClose = () => {
setDeleteProjectModal(false);
router.push(`/${workspaceSlug}/projects`);
};
return ( return (
<> <>
<PublishProjectModal isOpen={publishModalOpen} project={project} onClose={() => setPublishModal(false)} /> <PublishProjectModal isOpen={publishModalOpen} project={project} onClose={() => setPublishModal(false)} />
<DeleteProjectModal project={project} isOpen={deleteProjectModalOpen} onClose={handleDeleteProjectModalClose} />
<LeaveProjectModal project={project} isOpen={leaveProjectModalOpen} onClose={handleLeaveProjectModalClose} /> <LeaveProjectModal project={project} isOpen={leaveProjectModalOpen} onClose={handleLeaveProjectModalClose} />
<Disclosure key={project.id} defaultOpen={projectId === project.id}> <Disclosure key={`${project.id} ${projectId}`} defaultOpen={projectId === project.id}>
{({ open }) => ( {({ open }) => (
<> <>
<div <div
@ -186,9 +165,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
</span> </span>
)} )}
{!isCollapsed && ( {!isCollapsed && <p className={`truncate text-custom-sidebar-text-200`}>{project.name}</p>}
<p className={`truncate text-custom-sidebar-text-200`}>{project.name}</p>
)}
</div> </div>
{!isCollapsed && ( {!isCollapsed && (
<ChevronDown <ChevronDown
@ -278,15 +255,6 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
</div> </div>
</CustomMenu.MenuItem> </CustomMenu.MenuItem>
)} )}
{!shortContextMenu && isAdmin && (
<CustomMenu.MenuItem onClick={handleDeleteProjectClick}>
<span className="flex items-center justify-start gap-2 ">
<Trash2 className="h-3.5 w-3.5 stroke-[1.5]" />
<span>Delete project</span>
</span>
</CustomMenu.MenuItem>
)}
</CustomMenu> </CustomMenu>
)} )}
</div> </div>

View File

@ -9,7 +9,7 @@ import { AppliedFiltersList, FilterSelection, FiltersDropdown } from "components
// ui // ui
import { Button, Input, TextArea } from "@plane/ui"; import { Button, Input, TextArea } from "@plane/ui";
// types // types
import { IProjectView } from "types"; import { IProjectView, IIssueFilterOptions } from "types";
// constants // constants
import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue"; import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
@ -43,7 +43,34 @@ export const ProjectViewForm: React.FC<Props> = observer(({ handleFormSubmit, ha
defaultValues, defaultValues,
}); });
const selectedFilters = watch("query_data"); 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) 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) => { const handleCreateUpdateView = async (formData: IProjectView) => {
await handleFormSubmit(formData); await handleFormSubmit(formData);
@ -153,10 +180,10 @@ export const ProjectViewForm: React.FC<Props> = observer(({ handleFormSubmit, ha
<AppliedFiltersList <AppliedFiltersList
appliedFilters={selectedFilters} appliedFilters={selectedFilters}
handleClearAllFilters={clearAllFilters} handleClearAllFilters={clearAllFilters}
handleRemoveFilter={() => {}} handleRemoveFilter={handleRemoveFilter}
labels={projectStore.projectLabels ?? undefined} labels={projectStore.projectLabels ?? []}
members={projectMembers?.map((m) => m.member) ?? undefined} members={projectMembers?.map((m) => m.member) ?? []}
states={projectStateStore.projectStates ?? undefined} states={projectStateStore.projectStates ?? []}
/> />
</div> </div>
)} )}

View File

@ -1,14 +1,12 @@
import React, { ReactElement } from "react"; import React, { ReactElement } from "react";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import useSWR from "swr"; import { observer } from "mobx-react-lite";
// services // store
import { ProjectService, ProjectMemberService } from "services/project"; import { useMobxStore } from "lib/mobx/store-provider";
// layouts // layouts
import { AppLayout } from "layouts/app-layout"; import { AppLayout } from "layouts/app-layout";
import { ProjectSettingLayout } from "layouts/settings-layout"; import { ProjectSettingLayout } from "layouts/settings-layout";
// hooks // hooks
import useUserAuth from "hooks/use-user-auth";
import useProjectDetails from "hooks/use-project-details";
import useToast from "hooks/use-toast"; import useToast from "hooks/use-toast";
// components // components
import { AutoArchiveAutomation, AutoCloseAutomation } from "components/automation"; import { AutoArchiveAutomation, AutoCloseAutomation } from "components/automation";
@ -16,45 +14,32 @@ import { ProjectSettingHeader } from "components/headers";
// types // types
import { NextPageWithLayout } from "types/app"; import { NextPageWithLayout } from "types/app";
import { IProject } from "types"; import { IProject } from "types";
// constant
import { USER_PROJECT_VIEW } from "constants/fetch-keys";
// services const AutomationSettingsPage: NextPageWithLayout = observer(() => {
const projectService = new ProjectService();
const projectMemberService = new ProjectMemberService();
const AutomationSettingsPage: NextPageWithLayout = () => {
const router = useRouter(); const router = useRouter();
const { workspaceSlug, projectId } = router.query; const { workspaceSlug, projectId } = router.query;
const { user } = useUserAuth();
const { setToastAlert } = useToast(); const { setToastAlert } = useToast();
const { projectDetails } = useProjectDetails(); // store
const {
const { data: memberDetails } = useSWR( user: { currentProjectRole },
workspaceSlug && projectId ? USER_PROJECT_VIEW(projectId.toString()) : null, project: { currentProjectDetails: projectDetails, updateProject },
workspaceSlug && projectId } = useMobxStore();
? () => projectMemberService.projectMemberMe(workspaceSlug.toString(), projectId.toString())
: null
);
const handleChange = async (formData: Partial<IProject>) => { const handleChange = async (formData: Partial<IProject>) => {
if (!workspaceSlug || !projectId || !projectDetails) return; if (!workspaceSlug || !projectId || !projectDetails) return;
await projectService await updateProject(workspaceSlug.toString(), projectId.toString(), formData).catch(() => {
.updateProject(workspaceSlug as string, projectId as string, formData, user) setToastAlert({
.then(() => {}) type: "error",
.catch(() => { title: "Error!",
setToastAlert({ message: "Something went wrong. Please try again.",
type: "error",
title: "Error!",
message: "Something went wrong. Please try again.",
});
}); });
});
}; };
const isAdmin = memberDetails?.role === 20; const isAdmin = currentProjectRole === 20;
return ( return (
<section className={`pr-9 py-8 w-full overflow-y-auto ${isAdmin ? "" : "opacity-60"}`}> <section className={`pr-9 py-8 w-full overflow-y-auto ${isAdmin ? "" : "opacity-60"}`}>
@ -65,7 +50,7 @@ const AutomationSettingsPage: NextPageWithLayout = () => {
<AutoCloseAutomation handleChange={handleChange} /> <AutoCloseAutomation handleChange={handleChange} />
</section> </section>
); );
}; });
AutomationSettingsPage.getLayout = function getLayout(page: ReactElement) { AutomationSettingsPage.getLayout = function getLayout(page: ReactElement) {
return ( return (

View File

@ -17,7 +17,7 @@ const EstimatesSettingsPage: NextPageWithLayout = () => (
EstimatesSettingsPage.getLayout = function getLayout(page: ReactElement) { EstimatesSettingsPage.getLayout = function getLayout(page: ReactElement) {
return ( return (
<AppLayout header={<ProjectSettingHeader title="Estimates Settings" />} withProjectWrapper> <AppLayout header={<ProjectSettingHeader title="Estimates Settings" />} withProjectWrapper>
<ProjectSettingLayout>{page}; </ProjectSettingLayout> <ProjectSettingLayout>{page}</ProjectSettingLayout>
</AppLayout> </AppLayout>
); );
}; };