github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor issue dropdown logic to help work properly with issues on global level

Browse Source
This commit is contained in:
Rahul R 2024-01-22 11:54:04 +05:30
parent 66de428987
commit 78c7a016e3
56 changed files with 280 additions and 358 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/components/core/activity.tsx
View File

@ -72,9 +72,7 @@ const UserLink = ({ activity }: { activity: IIssueActivity }) => {
const LabelPill = observer(({ labelId, workspaceSlug }: { labelId: string; workspaceSlug: string }) => {
// store hooks
const {
workspace: { workspaceLabels, fetchWorkspaceLabels },
} = useLabel();
const { workspaceLabels, fetchWorkspaceLabels } = useLabel();
useEffect(() => {
if (!workspaceLabels) fetchWorkspaceLabels(workspaceSlug);

11
web/components/dropdowns/estimate.tsx
View File

@ -158,17 +158,12 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
const filteredOptions =
query === "" ? options : options?.filter((o) => o.query.toLowerCase().includes(query.toLowerCase()));
// fetch cycles of the project if not already present in the store
useEffect(() => {
if (!workspaceSlug) return;
if (!activeEstimate) fetchProjectEstimates(workspaceSlug, projectId);
}, [activeEstimate, fetchProjectEstimates, projectId, workspaceSlug]);
const selectedEstimate = value !== null ? getEstimatePointValue(value) : null;
const selectedEstimate = value !== null ? getEstimatePointValue(value, projectId) : null;
const openDropdown = () => {
setIsOpen(true);
if (!activeEstimate && workspaceSlug) fetchProjectEstimates(workspaceSlug, projectId);
if (referenceElement) referenceElement.focus();
};
const closeDropdown = () => setIsOpen(false);

8
web/components/dropdowns/member/project-member.tsx
View File

@ -93,14 +93,10 @@ export const ProjectMemberDropdown: React.FC<Props> = observer((props) => {
};
if (multiple) comboboxProps.multiple = true;
useEffect(() => {
if (!workspaceSlug) return;
if (!projectMemberIds) fetchProjectMembers(workspaceSlug, projectId);
}, [fetchProjectMembers, projectId, projectMemberIds, workspaceSlug]);
const openDropdown = () => {
setIsOpen(true);
if (!projectMemberIds && workspaceSlug) fetchProjectMembers(workspaceSlug, projectId);
if (referenceElement) referenceElement.focus();
};
const closeDropdown = () => setIsOpen(false);

7
web/components/dropdowns/state.tsx
View File

@ -142,17 +142,12 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
const filteredOptions =
query === "" ? options : options?.filter((o) => o.query.toLowerCase().includes(query.toLowerCase()));
// fetch states of the project if not already present in the store
useEffect(() => {
if (!workspaceSlug) return;
if (!statesList) fetchProjectStates(workspaceSlug, projectId);
}, [fetchProjectStates, projectId, statesList, workspaceSlug]);
const selectedState = getStateById(value);
const openDropdown = () => {
setIsOpen(true);
if (!statesList && workspaceSlug) fetchProjectStates(workspaceSlug, projectId);
if (referenceElement) referenceElement.focus();
};
const closeDropdown = () => setIsOpen(false);

4
web/components/headers/cycle-issues.tsx
View File

@ -75,9 +75,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
} = useUser();
const { currentProjectDetails } = useProject();
const { projectStates } = useProjectState();
const {
project: { projectLabels },
} = useLabel();
const { projectLabels } = useLabel();
const {
project: { projectMemberIds },
} = useMember();

4
web/components/headers/global-issues.tsx
View File

@ -45,9 +45,7 @@ export const GlobalIssuesHeader: React.FC<Props> = observer((props) => {
const {
membership: { currentWorkspaceRole },
} = useUser();
const {
workspace: { workspaceLabels },
} = useLabel();
const { workspaceLabels } = useLabel();
const {
workspace: { workspaceMemberIds },
} = useMember();

4
web/components/headers/module-issues.tsx
View File

@ -77,9 +77,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
membership: { currentProjectRole },
} = useUser();
const { currentProjectDetails } = useProject();
const {
project: { projectLabels },
} = useLabel();
const { projectLabels } = useLabel();
const { projectStates } = useProjectState();
const {
project: { projectMemberIds },

4
web/components/headers/project-archived-issues.tsx
View File

@ -25,9 +25,7 @@ export const ProjectArchivedIssuesHeader: FC = observer(() => {
} = useIssues(EIssuesStoreType.ARCHIVED);
const { currentProjectDetails } = useProject();
const { projectStates } = useProjectState();
const {
project: { projectLabels },
} = useLabel();
const { projectLabels } = useLabel();
const {
project: { projectMemberIds },
} = useMember();

4
web/components/headers/project-draft-issues.tsx
View File

@ -22,9 +22,7 @@ export const ProjectDraftIssueHeader: FC = observer(() => {
} = useIssues(EIssuesStoreType.DRAFT);
const { currentProjectDetails } = useProject();
const { projectStates } = useProjectState();
const {
project: { projectLabels },
} = useLabel();
const { projectLabels } = useLabel();
const {
project: { projectMemberIds },
} = useMember();

4
web/components/headers/project-issues.tsx
View File

@ -42,9 +42,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
} = useUser();
const { currentProjectDetails } = useProject();
const { projectStates } = useProjectState();
const {
project: { projectLabels },
} = useLabel();
const { projectLabels } = useLabel();
const activeLayout = issueFilters?.displayFilters?.layout;

4
web/components/headers/project-view-issues.tsx
View File

@ -49,9 +49,7 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
const { currentProjectDetails } = useProject();
const { projectViewIds, getViewById } = useProjectView();
const { projectStates } = useProjectState();
const {
project: { projectLabels },
} = useLabel();
const { projectLabels } = useLabel();
const {
project: { projectMemberIds },
} = useMember();

4
web/components/issues/issue-detail/label/root.tsx
View File

@ -24,9 +24,7 @@ export const IssueLabel: FC<TIssueLabel> = observer((props) => {
const { workspaceSlug, projectId, issueId, disabled = false } = props;
// hooks
const { updateIssue } = useIssueDetail();
const {
project: { createLabel },
} = useLabel();
const { createLabel } = useLabel();
const { setToastAlert } = useToast();
const labelOperations: TLabelOperations = useMemo(

8
web/components/issues/issue-detail/label/select/label-select.tsx
View File

@ -20,9 +20,7 @@ export const IssueLabelSelect: React.FC<IIssueLabelSelect> = observer((props) =>
const {
issue: { getIssueById },
} = useIssueDetail();
const {
project: { fetchProjectLabels, projectLabels },
} = useLabel();
const { fetchProjectLabels, getProjectLabels } = useLabel();
// states
const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
@ -30,10 +28,12 @@ export const IssueLabelSelect: React.FC<IIssueLabelSelect> = observer((props) =>
const [query, setQuery] = useState("");
const issue = getIssueById(issueId);
const projectLabels = getProjectLabels(projectId);
const fetchLabels = () => {
setIsLoading(true);
if (workspaceSlug && projectId) fetchProjectLabels(workspaceSlug, projectId).then(() => setIsLoading(false));
if (!projectLabels && workspaceSlug && projectId)
fetchProjectLabels(workspaceSlug, projectId).then(() => setIsLoading(false));
};
const options = (projectLabels ?? []).map((label) => ({

4
web/components/issues/issue-layouts/filters/applied-filters/roots/archived-issue.tsx
View File

@ -17,9 +17,7 @@ export const ArchivedIssueAppliedFiltersRoot: React.FC = observer(() => {
const {
issuesFilter: { issueFilters, updateFilters },
} = useIssues(EIssuesStoreType.ARCHIVED);
const {
project: { projectLabels },
} = useLabel();
const { projectLabels } = useLabel();
const { projectStates } = useProjectState();
// derived values
const userFilters = issueFilters?.filters;

4
web/components/issues/issue-layouts/filters/applied-filters/roots/cycle-root.tsx
View File

@ -21,9 +21,7 @@ export const CycleAppliedFiltersRoot: React.FC = observer(() => {
issuesFilter: { issueFilters, updateFilters },
} = useIssues(EIssuesStoreType.CYCLE);
const {
project: { projectLabels },
} = useLabel();
const { projectLabels } = useLabel();
const { projectStates } = useProjectState();
// derived values
const userFilters = issueFilters?.filters;

4
web/components/issues/issue-layouts/filters/applied-filters/roots/draft-issue.tsx
View File

@ -16,9 +16,7 @@ export const DraftIssueAppliedFiltersRoot: React.FC = observer(() => {
const {
issuesFilter: { issueFilters, updateFilters },
} = useIssues(EIssuesStoreType.DRAFT);
const {
project: { projectLabels },
} = useLabel();
const { projectLabels } = useLabel();
const { projectStates } = useProjectState();
// derived values
const userFilters = issueFilters?.filters;

4
web/components/issues/issue-layouts/filters/applied-filters/roots/global-view-root.tsx
View File

@ -25,9 +25,7 @@ export const GlobalViewsAppliedFiltersRoot = observer((props: Props) => {
const {
issuesFilter: { filters, updateFilters },
} = useIssues(EIssuesStoreType.GLOBAL);
const {
workspace: { workspaceLabels },
} = useLabel();
const { workspaceLabels } = useLabel();
const { globalViewMap, updateGlobalView } = useGlobalView();
const {
membership: { currentWorkspaceRole },

4
web/components/issues/issue-layouts/filters/applied-filters/roots/module-root.tsx
View File

@ -20,9 +20,7 @@ export const ModuleAppliedFiltersRoot: React.FC = observer(() => {
const {
issuesFilter: { issueFilters, updateFilters },
} = useIssues(EIssuesStoreType.MODULE);
const {
project: { projectLabels },
} = useLabel();
const { projectLabels } = useLabel();
const { projectStates } = useProjectState();
// derived values
const userFilters = issueFilters?.filters;

7
web/components/issues/issue-layouts/filters/applied-filters/roots/profile-issues-root.tsx
View File

@ -7,19 +7,20 @@ import { AppliedFiltersList } from "components/issues";
// types
import { IIssueFilterOptions } from "@plane/types";
import { EIssueFilterType, EIssuesStoreType } from "constants/issue";
import { useWorskspaceIssueProperties } from "hooks/use-worskspace-issue-properties";
export const ProfileIssuesAppliedFiltersRoot: React.FC = observer(() => {
// router
const router = useRouter();
const { workspaceSlug, userId } = router.query;
//swr hook for fetching issue properties
useWorskspaceIssueProperties(workspaceSlug);
// store hooks
const {
issuesFilter: { issueFilters, updateFilters },
} = useIssues(EIssuesStoreType.PROFILE);
const {
workspace: { workspaceLabels },
} = useLabel();
const { workspaceLabels } = useLabel();
// derived values
const userFilters = issueFilters?.filters;

4
web/components/issues/issue-layouts/filters/applied-filters/roots/project-root.tsx
View File

@ -19,9 +19,7 @@ export const ProjectAppliedFiltersRoot: React.FC = observer(() => {
projectId: string;
};
// store hooks
const {
project: { projectLabels },
} = useLabel();
const { projectLabels } = useLabel();
const {
issuesFilter: { issueFilters, updateFilters },
} = useIssues(EIssuesStoreType.PROJECT);

4
web/components/issues/issue-layouts/filters/applied-filters/roots/project-view-root.tsx
View File

@ -23,9 +23,7 @@ export const ProjectViewAppliedFiltersRoot: React.FC = observer(() => {
const {
issuesFilter: { issueFilters, updateFilters },
} = useIssues(EIssuesStoreType.PROJECT_VIEW);
const {
project: { projectLabels },
} = useLabel();
const { projectLabels } = useLabel();
const { projectStates } = useProjectState();
const { viewMap, updateView } = useProjectView();
// derived values

4
web/components/issues/issue-layouts/kanban/default.tsx
View File

@ -71,10 +71,10 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
const member = useMember();
const project = useProject();
const projectLabel = useLabel();
const label = useLabel();
const projectState = useProjectState();
const list = getGroupByColumns(group_by as GroupByColumnTypes, project, projectLabel, projectState, member);
const list = getGroupByColumns(group_by as GroupByColumnTypes, project, label, projectState, member);
if (!list) return null;

12
web/components/issues/issue-layouts/kanban/swimlanes.tsx
View File

@ -208,17 +208,11 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
const member = useMember();
const project = useProject();
const projectLabel = useLabel();
const label = useLabel();
const projectState = useProjectState();
const groupByList = getGroupByColumns(group_by as GroupByColumnTypes, project, projectLabel, projectState, member);
const subGroupByList = getGroupByColumns(
sub_group_by as GroupByColumnTypes,
project,
projectLabel,
projectState,
member
);
const groupByList = getGroupByColumns(group_by as GroupByColumnTypes, project, label, projectState, member);
const subGroupByList = getGroupByColumns(sub_group_by as GroupByColumnTypes, project, label, projectState, member);
if (!groupByList || !subGroupByList) return null;

4
web/components/issues/issue-layouts/list/default.tsx
View File

@ -59,10 +59,10 @@ const GroupByList: React.FC<IGroupByList> = (props) => {
// store hooks
const member = useMember();
const project = useProject();
const projectLabel = useLabel();
const label = useLabel();
const projectState = useProjectState();
const list = getGroupByColumns(group_by as GroupByColumnTypes, project, projectLabel, projectState, member, true);
const list = getGroupByColumns(group_by as GroupByColumnTypes, project, label, projectState, member, true);
if (!list) return null;

13
web/components/issues/issue-layouts/properties/labels.tsx
View File

@ -53,13 +53,14 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
const {
router: { workspaceSlug },
} = useApplication();
const {
project: { fetchProjectLabels, projectLabels: storeLabels },
} = useLabel();
const { fetchProjectLabels, getProjectLabels } = useLabel();
const fetchLabels = () => {
const storeLabels = getProjectLabels(projectId);
const openDropDown = () => {
setIsLoading(true);
if (workspaceSlug && projectId) fetchProjectLabels(workspaceSlug, projectId).then(() => setIsLoading(false));
if (!storeLabels && workspaceSlug && projectId)
fetchProjectLabels(workspaceSlug, projectId).then(() => setIsLoading(false));
};
const { styles, attributes } = usePopper(referenceElement, popperElement, {
@ -182,7 +183,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
? "cursor-pointer"
: "cursor-pointer hover:bg-custom-background-80"
} ${buttonClassName}`}
onClick={() => !storeLabels && fetchLabels()}
onClick={openDropDown}
>
{label}
{!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}

4
web/components/issues/issue-layouts/roots/all-issue-layout-root.tsx
View File

@ -4,6 +4,7 @@ import { observer } from "mobx-react-lite";
import useSWR from "swr";
// hooks
import { useGlobalView, useIssues, useUser } from "hooks/store";
import { useWorskspaceIssueProperties } from "hooks/use-worskspace-issue-properties";
// components
import { GlobalViewsAppliedFiltersRoot, IssuePeekOverview } from "components/issues";
import { SpreadsheetView } from "components/issues/issue-layouts";
@ -20,7 +21,8 @@ export const AllIssueLayoutRoot: React.FC = observer(() => {
// router
const router = useRouter();
const { workspaceSlug, globalViewId } = router.query;
//swr hook for fetching issue properties
useWorskspaceIssueProperties(workspaceSlug);
// store
const {
issuesFilter: { filters, fetchFilters, updateFilters },

12
web/components/issues/issue-layouts/utils.tsx
View File

@ -1,17 +1,17 @@
import { Avatar, PriorityIcon, StateGroupIcon } from "@plane/ui";
import { ISSUE_PRIORITIES } from "constants/issue";
import { renderEmoji } from "helpers/emoji.helper";
import { ILabelRootStore } from "store/label";
import { IMemberRootStore } from "store/member";
import { IProjectStore } from "store/project/project.store";
import { IStateStore } from "store/state.store";
import { GroupByColumnTypes, IGroupByColumn } from "@plane/types";
import { STATE_GROUPS } from "constants/state";
import { ILabelStore } from "store/label.store";
export const getGroupByColumns = (
groupBy: GroupByColumnTypes | null,
project: IProjectStore,
projectLabel: ILabelRootStore,
label: ILabelStore,
projectState: IStateStore,
member: IMemberRootStore,
includeNone?: boolean
@ -26,7 +26,7 @@ export const getGroupByColumns = (
case "priority":
return getPriorityColumns();
case "labels":
return getLabelsColumns(projectLabel) as any;
return getLabelsColumns(label) as any;
case "assignees":
return getAssigneeColumns(member) as any;
case "created_by":
@ -97,10 +97,8 @@ const getPriorityColumns = () => {
}));
};
const getLabelsColumns = (projectLabel: ILabelRootStore) => {
const {
project: { projectLabels },
} = projectLabel;
const getLabelsColumns = (label: ILabelStore) => {
const { projectLabels } = label;
if (!projectLabels) return;

18
web/components/issues/issue-modal/form.tsx
View File

@ -325,7 +325,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
{envConfig?.has_openai_configured && (
<GptAssistantPopover
isOpen={gptAssistantModal}
projectId={projectId}
projectId={watch("project_id")}
handleClose={() => {
setGptAssistantModal((prevData) => !prevData);
// this is done so that the title do not reset after gpt popover closed
@ -389,7 +389,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
onChange(stateId);
handleFormChange();
}}
projectId={projectId}
projectId={watch("project_id")}
buttonVariant="border-with-text"
tabIndex={6}
/>
@ -419,7 +419,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
render={({ field: { value, onChange } }) => (
<div className="h-7">
<ProjectMemberDropdown
projectId={projectId}
projectId={watch("project_id")}
value={value}
onChange={(assigneeIds) => {
onChange(assigneeIds);
@ -446,7 +446,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
onChange(labelIds);
handleFormChange();
}}
projectId={projectId}
projectId={watch("project_id")}
tabIndex={9}
/>
</div>
@ -497,7 +497,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
render={({ field: { value, onChange } }) => (
<div className="h-7">
<CycleDropdown
projectId={projectId}
projectId={watch("project_id")}
onChange={(cycleId) => {
onChange(cycleId);
handleFormChange();
@ -517,7 +517,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
render={({ field: { value, onChange } }) => (
<div className="h-7">
<ModuleDropdown
projectId={projectId}
projectId={watch("project_id")}
value={value}
onChange={(moduleId) => {
onChange(moduleId);
@ -530,7 +530,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
)}
/>
)}
{areEstimatesEnabledForProject(projectId) && (
{areEstimatesEnabledForProject(watch("project_id")) && (
<Controller
control={control}
name="estimate_point"
@ -542,7 +542,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
onChange(estimatePoint);
handleFormChange();
}}
projectId={projectId}
projectId={watch("project_id")}
buttonVariant="border-with-text"
tabIndex={14}
/>
@ -609,7 +609,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
handleFormChange();
setSelectedParentIssue(issue);
}}
projectId={projectId}
projectId={watch("project_id")}
/>
)}
/>

9
web/components/issues/issue-modal/modal.tsx
View File

@ -23,14 +23,7 @@ export interface IssuesModalProps {
}
export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((props) => {
const {
data,
isOpen,
onClose,
onSubmit,
withDraftIssueWrapper = true,
storeType = EIssuesStoreType.PROJECT,
} = props;
const { data, isOpen, onClose, onSubmit, withDraftIssueWrapper = true, storeType = EIssuesStoreType.PROJECT } = props;
// states
const [changesMade, setChangesMade] = useState<Partial<TIssue> | null>(null);
const [createMore, setCreateMore] = useState(false);

10
web/components/issues/select/label.tsx
View File

@ -29,9 +29,7 @@ export const IssueLabelSelect: React.FC<Props> = observer((props) => {
const router = useRouter();
const { workspaceSlug } = router.query;
// store hooks
const {
project: { getProjectLabels, fetchProjectLabels },
} = useLabel();
const { getProjectLabels, fetchProjectLabels } = useLabel();
// states
const [query, setQuery] = useState("");
const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
@ -50,13 +48,9 @@ export const IssueLabelSelect: React.FC<Props> = observer((props) => {
const filteredOptions =
query === "" ? projectLabels : projectLabels?.filter((l) => l.name.toLowerCase().includes(query.toLowerCase()));
useSWR(
workspaceSlug && projectId ? `PROJECT_ISSUE_LABELS_${projectId.toUpperCase()}` : null,
workspaceSlug && projectId ? () => fetchProjectLabels(workspaceSlug.toString(), projectId) : null
);
const openDropdown = () => {
setIsDropdownOpen(true);
if (!projectLabels && workspaceSlug && projectId) fetchProjectLabels(workspaceSlug.toString(), projectId);
if (referenceElement) referenceElement.focus();
};
const closeDropdown = () => setIsDropdownOpen(false);

2
web/components/issues/view-select/estimate.tsx
View File

@ -21,7 +21,7 @@ export const ViewEstimateSelect: React.FC<Props> = observer((props) => {
const { issue, onChange, tooltipPosition = "top", customButton = false, disabled } = props;
const { areEstimatesEnabledForCurrentProject, activeEstimateDetails, getEstimatePointValue } = useEstimate();
const estimateValue = getEstimatePointValue(issue.estimate_point);
const estimateValue = getEstimatePointValue(issue.estimate_point, issue.project_id);
const estimateLabels = (
<Tooltip tooltipHeading="Estimate" tooltipContent={estimateValue} position={tooltipPosition}>

4
web/components/labels/create-label-modal.tsx
View File

@ -34,9 +34,7 @@ export const CreateLabelModal: React.FC<Props> = observer((props) => {
const router = useRouter();
const { workspaceSlug } = router.query;
// store hooks
const {
project: { createLabel },
} = useLabel();
const { createLabel } = useLabel();
// form info
const {
formState: { errors, isSubmitting },

4
web/components/labels/create-update-label-inline.tsx
View File

@ -34,9 +34,7 @@ export const CreateUpdateLabelInline = observer(
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
// store hooks
const {
project: { createLabel, updateLabel },
} = useLabel();
const { createLabel, updateLabel } = useLabel();
// toast alert
const { setToastAlert } = useToast();
// form info

4
web/components/labels/delete-label-modal.tsx
View File

@ -25,9 +25,7 @@ export const DeleteLabelModal: React.FC<Props> = observer((props) => {
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
// store hooks
const {
project: { deleteLabel },
} = useLabel();
const { deleteLabel } = useLabel();
// states
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
// hooks

4
web/components/labels/labels-list-modal.tsx
View File

@ -25,9 +25,7 @@ export const LabelsListModal: React.FC<Props> = observer((props) => {
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
// store hooks
const {
project: { projectLabels, fetchProjectLabels, updateLabel },
} = useLabel();
const { projectLabels, fetchProjectLabels, updateLabel } = useLabel();
// api call to fetch project details
useSWR(

4
web/components/labels/project-setting-label-item.tsx
View File

@ -28,9 +28,7 @@ export const ProjectSettingLabelItem: React.FC<Props> = (props) => {
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
// store hooks
const {
project: { updateLabel },
} = useLabel();
const { updateLabel } = useLabel();
const removeFromGroup = (label: IIssueLabel) => {
if (!workspaceSlug || !projectId) return;

4
web/components/labels/project-setting-label-list.tsx
View File

@ -41,9 +41,7 @@ export const ProjectSettingsLabelList: React.FC = observer(() => {
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
// store hooks
const {
project: { projectLabels, updateLabelPosition, projectLabelsTree },
} = useLabel();
const { projectLabels, updateLabelPosition, projectLabelsTree } = useLabel();
// portal
const renderDraggable = useDraggableInPortal();

4
web/components/profile/profile-issues-filter.tsx
View File

@ -18,9 +18,7 @@ export const ProfileIssuesFilter = observer(() => {
issuesFilter: { issueFilters, updateFilters },
} = useIssues(EIssuesStoreType.PROFILE);
const {
workspace: { workspaceLabels },
} = useLabel();
const { workspaceLabels } = useLabel();
// derived values
const states = undefined;
const members = undefined;

4
web/components/views/form.tsx
View File

@ -28,9 +28,7 @@ export const ProjectViewForm: React.FC<Props> = observer((props) => {
const { handleFormSubmit, handleClose, data, preLoadedData } = props;
// store hooks
const { projectStates } = useProjectState();
const {
project: { projectLabels },
} = useLabel();
const { projectLabels } = useLabel();
const {
project: { projectMemberIds },
} = useMember();

4
web/components/workspace/views/form.tsx
View File

@ -27,9 +27,7 @@ const defaultValues: Partial<IWorkspaceView> = {
export const WorkspaceViewForm: React.FC<Props> = observer((props) => {
const { handleFormSubmit, handleClose, data, preLoadedData } = props;
// store hooks
const {
workspace: { workspaceLabels },
} = useLabel();
const { workspaceLabels } = useLabel();
const {
workspace: { workspaceMemberIds },
} = useMember();

6
web/hooks/store/use-label.ts
View File

@ -2,10 +2,10 @@ import { useContext } from "react";
// mobx store
import { StoreContext } from "contexts/store-context";
// types
import { ILabelRootStore } from "store/label";
import { ILabelStore } from "store/label.store";
export const useLabel = (): ILabelRootStore => {
export const useLabel = (): ILabelStore => {
const context = useContext(StoreContext);
if (context === undefined) throw new Error("useLabel must be used within StoreProvider");
return context.labelRoot;
return context.label;
};

28
web/hooks/use-worskspace-issue-properties.ts Normal file
View File

@ -0,0 +1,28 @@
import useSWR from "swr";
import { useEstimate, useLabel, useProjectState } from "./store";
export const useWorskspaceIssueProperties = (workspaceSlug: string | string[] | undefined) => {
const { fetchWorkspaceLabels } = useLabel();
const { fetchWorkspaceStates } = useProjectState();
const { fetchWorskpaceEstimates } = useEstimate();
// fetch workspace labels
useSWR(
workspaceSlug ? `WORKSPACE_LABELS_${workspaceSlug}` : null,
workspaceSlug ? () => fetchWorkspaceLabels(workspaceSlug.toString()) : null
);
// fetch workspace states
useSWR(
workspaceSlug ? `WORKSPACE_STATES_${workspaceSlug}` : null,
workspaceSlug ? () => fetchWorkspaceStates(workspaceSlug.toString()) : null
);
// fetch workspace estimates
useSWR(
workspaceSlug ? `WORKSPACE_ESTIMATES_${workspaceSlug}` : null,
workspaceSlug ? () => fetchWorskpaceEstimates(workspaceSlug.toString()) : null
);
};

4
web/layouts/auth-layout/project-wrapper.tsx
View File

@ -45,9 +45,7 @@ export const ProjectAuthWrapper: FC<IProjectAuthWrapper> = observer((props) => {
project: { fetchProjectMembers },
} = useMember();
const { fetchProjectStates } = useProjectState();
const {
project: { fetchProjectLabels },
} = useLabel();
const { fetchProjectLabels } = useLabel();
const { fetchProjectEstimates } = useEstimate();
// router
const router = useRouter();

8
web/layouts/auth-layout/workspace-wrapper.tsx
View File

@ -20,9 +20,6 @@ export const WorkspaceAuthWrapper: FC<IWorkspaceAuthWrapper> = observer((props)
const {
workspace: { fetchWorkspaceMembers },
} = useMember();
const {
workspace: { fetchWorkspaceLabels },
} = useLabel();
// router
const router = useRouter();
const { workspaceSlug } = router.query;
@ -41,11 +38,6 @@ export const WorkspaceAuthWrapper: FC<IWorkspaceAuthWrapper> = observer((props)
workspaceSlug ? `WORKSPACE_MEMBERS_${workspaceSlug}` : null,
workspaceSlug ? () => fetchWorkspaceMembers(workspaceSlug.toString()) : null
);
// fetch workspace labels
useSWR(
workspaceSlug ? `WORKSPACE_LABELS_${workspaceSlug}` : null,
workspaceSlug ? () => fetchWorkspaceLabels(workspaceSlug.toString()) : null
);
// fetch workspace user projects role
useSWR(
workspaceSlug ? `WORKSPACE_PROJECTS_ROLE_${workspaceSlug}` : null,

1
web/package.json
View File

@ -40,6 +40,7 @@
"lucide-react": "^0.294.0",
"mobx": "^6.10.0",
"mobx-react": "^9.1.0",
"mobx-utils": "^6.0.8",
"next": "^14.0.3",
"next-pwa": "^5.6.0",
"next-themes": "^0.2.1",

8
web/services/project/project-estimate.service.ts
View File

@ -61,4 +61,12 @@ export class ProjectEstimateService extends APIService {
throw error?.response?.data;
});
}
async getWorkspaceEstimatesList(workspaceSlug: string): Promise<IEstimate[]> {
return this.get(`/api/workspaces/${workspaceSlug}/estimates/`)
.then((response) => response?.data)
.catch((error) => {
throw error?.response?.data;
});
}
}

8
web/services/project/project-state.service.ts
View File

@ -65,4 +65,12 @@ export class ProjectStateService extends APIService {
throw error?.response;
});
}
async getWorkspaceStates(workspaceSlug: string): Promise<IState[]> {
return this.get(`/api/workspaces/${workspaceSlug}/states/`)
.then((response) => response?.data)
.catch((error) => {
throw error?.response?.data;
});
}
}

91
web/store/estimate.store.ts
View File

@ -5,21 +5,25 @@ import { ProjectEstimateService } from "services/project";
// types
import { RootStore } from "store/root.store";
import { IEstimate, IEstimateFormData } from "@plane/types";
import { computedFn } from "mobx-utils";
export interface IEstimateStore {
//Loaders
fetchedMap: Record<string, boolean>;
// observables
estimates: Record<string, IEstimate[] | null>;
estimateMap: Record<string, IEstimate>;
// computed
areEstimatesEnabledForCurrentProject: boolean;
projectEstimates: IEstimate[] | null;
activeEstimateDetails: IEstimate | null;
// computed actions
areEstimatesEnabledForProject: (projectId: string) => boolean;
getEstimatePointValue: (estimateKey: number | null) => string;
getEstimatePointValue: (estimateKey: number | null, projectId?: string) => string;
getProjectEstimateById: (estimateId: string) => IEstimate | null;
getProjectActiveEstimateDetails: (projectId: string) => IEstimate | null;
// fetch actions
fetchProjectEstimates: (workspaceSlug: string, projectId: string) => Promise<IEstimate[]>;
fetchWorskpaceEstimates: (workspaceSlug: string) => Promise<IEstimate[]>;
// crud actions
createEstimate: (workspaceSlug: string, projectId: string, data: IEstimateFormData) => Promise<IEstimate>;
updateEstimate: (
@ -33,7 +37,9 @@ export interface IEstimateStore {
export class EstimateStore implements IEstimateStore {
// observables
estimates: Record<string, IEstimate[] | null> = {};
estimateMap: Record<string, IEstimate> = {};
//loaders
fetchedMap: Record<string, boolean> = {};
// root store
rootStore;
// services
@ -42,18 +48,15 @@ export class EstimateStore implements IEstimateStore {
constructor(_rootStore: RootStore) {
makeObservable(this, {
// observables
estimates: observable,
estimateMap: observable,
fetchedMap: observable,
// computed
areEstimatesEnabledForCurrentProject: computed,
projectEstimates: computed,
activeEstimateDetails: computed,
// computed actions
areEstimatesEnabledForProject: action,
getProjectEstimateById: action,
getEstimatePointValue: action,
getProjectActiveEstimateDetails: action,
// actions
fetchProjectEstimates: action,
fetchWorskpaceEstimates: action,
createEstimate: action,
updateEstimate: action,
deleteEstimate: action,
@ -79,8 +82,9 @@ export class EstimateStore implements IEstimateStore {
*/
get projectEstimates() {
const projectId = this.rootStore.app.router.projectId;
if (!projectId) return null;
return this.estimates?.[projectId] || null;
const worksapceSlug = this.rootStore.app.router.workspaceSlug || "";
if (!projectId || !(this.fetchedMap[projectId] || this.fetchedMap[worksapceSlug])) return null;
return Object.values(this.estimateMap).filter((estimate) => estimate.project === projectId);
}
/**
@ -89,47 +93,49 @@ export class EstimateStore implements IEstimateStore {
get activeEstimateDetails() {
const currentProjectDetails = this.rootStore.projectRoot.project.currentProjectDetails;
if (!currentProjectDetails || !currentProjectDetails?.estimate) return null;
return this.projectEstimates?.find((estimate) => estimate.id === currentProjectDetails?.estimate) || null;
return this.estimateMap?.[currentProjectDetails?.estimate || ""] || null;
}
/**
* @description returns true if estimates are enabled for a project using project id
* @param projectId
*/
areEstimatesEnabledForProject = (projectId: string) => {
areEstimatesEnabledForProject = computedFn((projectId: string) => {
const projectDetails = this.rootStore.projectRoot.project.getProjectById(projectId);
if (!projectDetails) return false;
return Boolean(projectDetails.estimate) ?? false;
};
});
/**
* @description returns the point value for the given estimate key to display in the UI
*/
getEstimatePointValue = (estimateKey: number | null) => {
getEstimatePointValue = computedFn((estimateKey: number | null, projectId?: string) => {
if (estimateKey === null) return "None";
const activeEstimate = this.activeEstimateDetails;
const activeEstimate = projectId ? this.getProjectActiveEstimateDetails(projectId) : this.activeEstimateDetails;
return activeEstimate?.points?.find((point) => point.key === estimateKey)?.value || "None";
};
});
/**
* @description returns the estimate details for the given estimate id
* @param estimateId
*/
getProjectEstimateById = (estimateId: string) => {
getProjectEstimateById = computedFn((estimateId: string) => {
if (!this.projectEstimates) return null;
const estimateInfo = this.projectEstimates?.find((estimate) => estimate.id === estimateId) || null;
const estimateInfo = this.estimateMap?.[estimateId] || null;
return estimateInfo;
};
});
/**
* @description returns the estimate details for the given estimate id
* @param projectId
*/
getProjectActiveEstimateDetails = (projectId: string) => {
const projectDetails = this.rootStore.projectRoot.project.getProjectById(projectId);
if (!projectDetails || !projectDetails?.estimate) return null;
return this.projectEstimates?.find((estimate) => estimate.id === projectDetails?.estimate) || null;
};
getProjectActiveEstimateDetails = computedFn((projectId: string) => {
const projectDetails = this.rootStore.projectRoot.project?.getProjectById(projectId);
const worksapceSlug = this.rootStore.app.router.workspaceSlug || "";
if (!projectDetails || !projectDetails?.estimate || !(this.fetchedMap[projectId] || this.fetchedMap[worksapceSlug]))
return null;
return this.estimateMap?.[projectDetails?.estimate || ""] || null;
});
/**
* @description fetches the list of estimates for the given project
@ -139,7 +145,26 @@ export class EstimateStore implements IEstimateStore {
fetchProjectEstimates = async (workspaceSlug: string, projectId: string) =>
await this.estimateService.getEstimatesList(workspaceSlug, projectId).then((response) => {
runInAction(() => {
set(this.estimates, projectId, response);
response.forEach((estimate) => {
set(this.estimateMap, estimate.id, estimate);
});
this.fetchedMap[projectId] = true;
});
return response;
});
/**
* @description fetches the list of estimates for the given project
* @param workspaceSlug
* @param projectId
*/
fetchWorskpaceEstimates = async (workspaceSlug: string) =>
await this.estimateService.getWorkspaceEstimatesList(workspaceSlug).then((response) => {
runInAction(() => {
response.forEach((estimate) => {
set(this.estimateMap, estimate.id, estimate);
});
this.fetchedMap[workspaceSlug] = true;
});
return response;
});
@ -157,7 +182,7 @@ export class EstimateStore implements IEstimateStore {
points: response.estimate_points,
};
runInAction(() => {
set(this.estimates, projectId, [responseEstimate, ...(this.estimates?.[projectId] || [])]);
set(this.estimateMap, [responseEstimate.id], responseEstimate);
});
return response.estimate;
});
@ -171,11 +196,12 @@ export class EstimateStore implements IEstimateStore {
*/
updateEstimate = async (workspaceSlug: string, projectId: string, estimateId: string, data: IEstimateFormData) =>
await this.estimateService.patchEstimate(workspaceSlug, projectId, estimateId, data).then((response) => {
const updatedEstimates = (this.estimates?.[projectId] ?? []).map((estimate) =>
estimate.id === estimateId ? { ...estimate, ...data.estimate, points: [...data.estimate_points] } : estimate
);
runInAction(() => {
set(this.estimates, projectId, updatedEstimates);
set(this.estimateMap, estimateId, {
...this.estimateMap[estimateId],
...data.estimate,
points: [...data.estimate_points],
});
});
return response;
});
@ -188,9 +214,8 @@ export class EstimateStore implements IEstimateStore {
*/
deleteEstimate = async (workspaceSlug: string, projectId: string, estimateId: string) =>
await this.estimateService.deleteEstimate(workspaceSlug, projectId, estimateId).then(() => {
const updatedEstimates = (this.estimates?.[projectId] ?? []).filter((estimate) => estimate.id !== estimateId);
runInAction(() => {
set(this.estimates, projectId, updatedEstimates);
delete this.estimateMap[estimateId];
});
});
}

61
web/store/label/project-label.store.ts → web/store/label.store.ts
View File

@ -1,4 +1,5 @@
import { action, computed, makeObservable, observable, runInAction } from "mobx";
import { computedFn } from "mobx-utils";
import set from "lodash/set";
// services
import { IssueLabelService } from "services/issue";
@ -7,17 +8,21 @@ import { buildTree } from "helpers/array.helper";
// types
import { RootStore } from "store/root.store";
import { IIssueLabel, IIssueLabelTree } from "@plane/types";
import { ILabelRootStore } from "store/label";
export interface IProjectLabelStore {
export interface ILabelStore {
//Loaders
fetchedMap: Record<string, boolean>;
//Observable
labelMap: Record<string, IIssueLabel>;
// computed
projectLabels: IIssueLabel[] | undefined;
projectLabelsTree: IIssueLabelTree[] | undefined;
workspaceLabels: IIssueLabel[] | undefined;
//computed actions
getProjectLabels: (projectId: string) => IIssueLabel[] | undefined;
getProjectLabels: (projectId: string | null) => IIssueLabel[] | undefined;
getLabelById: (labelId: string) => IIssueLabel | null;
// fetch actions
fetchWorkspaceLabels: (workspaceSlug: string) => Promise<IIssueLabel[]>;
fetchProjectLabels: (workspaceSlug: string, projectId: string) => Promise<IIssueLabel[]>;
// crud actions
createLabel: (workspaceSlug: string, projectId: string, data: Partial<IIssueLabel>) => Promise<IIssueLabel>;
@ -39,7 +44,7 @@ export interface IProjectLabelStore {
deleteLabel: (workspaceSlug: string, projectId: string, labelId: string) => Promise<void>;
}
export class ProjectLabelStore implements IProjectLabelStore {
export class LabelStore implements ILabelStore {
// root store
rootStore;
// root store labelMap
@ -49,15 +54,13 @@ export class ProjectLabelStore implements IProjectLabelStore {
// services
issueLabelService;
constructor(_labelRoot: ILabelRootStore, _rootStore: RootStore) {
constructor(_rootStore: RootStore) {
makeObservable(this, {
labelMap: observable,
fetchedMap: observable,
// computed
projectLabels: computed,
projectLabelsTree: computed,
// actions
getProjectLabels: action,
fetchProjectLabels: action,
createLabel: action,
@ -68,17 +71,27 @@ export class ProjectLabelStore implements IProjectLabelStore {
// root store
this.rootStore = _rootStore;
this.labelMap = _labelRoot?.labelMap;
// services
this.issueLabelService = new IssueLabelService();
}
/**
* Returns the labelMap belongs to a specific workspace
*/
get workspaceLabels() {
const currentWorkspaceDetails = this.rootStore.workspaceRoot.currentWorkspace;
const worksapceSlug = this.rootStore.app.router.workspaceSlug || "";
if (!currentWorkspaceDetails || !this.fetchedMap[worksapceSlug]) return;
return Object.values(this.labelMap).filter((label) => label.workspace === currentWorkspaceDetails.id);
}
/**
* Returns the labelMap belonging to the current project
*/
get projectLabels() {
const projectId = this.rootStore.app.router.projectId;
if (!projectId || !this.fetchedMap[projectId] || !this.labelMap) return;
const worksapceSlug = this.rootStore.app.router.workspaceSlug || "";
if (!projectId || !(this.fetchedMap[projectId] || this.fetchedMap[worksapceSlug])) return;
return Object.values(this.labelMap ?? {}).filter((label) => label.project === projectId);
}
@ -90,10 +103,17 @@ export class ProjectLabelStore implements IProjectLabelStore {
return buildTree(this.projectLabels);
}
getProjectLabels = (projectId: string) => {
if (!this.fetchedMap[projectId] || !this.labelMap) return;
getProjectLabels = computedFn((projectId: string | null) => {
const worksapceSlug = this.rootStore.app.router.workspaceSlug || "";
if (!projectId || !(this.fetchedMap[projectId] || this.fetchedMap[worksapceSlug])) return;
return Object.values(this.labelMap ?? {}).filter((label) => label.project === projectId);
};
});
/**
* get label info from the map of labels in the store using label id
* @param labelId
*/
getLabelById = computedFn((labelId: string): IIssueLabel | null => this.labelMap?.[labelId] || null);
/**
* Fetches all the labelMap belongs to a specific project
@ -112,6 +132,23 @@ export class ProjectLabelStore implements IProjectLabelStore {
return response;
});
/**
* Fetches all the labelMap belongs to a specific project
* @param workspaceSlug
* @param projectId
* @returns Promise<IIssueLabel[]>
*/
fetchWorkspaceLabels = async (workspaceSlug: string) =>
await this.issueLabelService.getWorkspaceIssueLabels(workspaceSlug).then((response) => {
runInAction(() => {
response.forEach((label) => {
set(this.labelMap, [label.id], label);
});
set(this.fetchedMap, workspaceSlug, true);
});
return response;
});
/**
* Creates a new label for a specific project and add it to the store
* @param workspaceSlug

42
web/store/label/index.ts
View File

@ -1,42 +0,0 @@
import { observable, makeObservable, action } from "mobx";
import { RootStore } from "../root.store";
// types
import { IIssueLabel } from "@plane/types";
import { IProjectLabelStore, ProjectLabelStore } from "./project-label.store";
import { IWorkspaceLabelStore, WorkspaceLabelStore } from "./workspace-label.store";
export interface ILabelRootStore {
// observables
labelMap: Record<string, IIssueLabel>;
// computed actions
getLabelById: (labelId: string) => IIssueLabel | null;
// sub-stores
project: IProjectLabelStore;
workspace: IWorkspaceLabelStore;
}
export class LabelRootStore implements ILabelRootStore {
// observables
labelMap: Record<string, IIssueLabel> = {};
// sub-stores
project: IProjectLabelStore;
workspace: IWorkspaceLabelStore;
constructor(_rootStore: RootStore) {
makeObservable(this, {
// observables
labelMap: observable,
// computed actions
getLabelById: action,
});
// sub-stores
this.project = new ProjectLabelStore(this, _rootStore);
this.workspace = new WorkspaceLabelStore(this, _rootStore);
}
/**
* get label info from the map of labels in the store using label id
* @param labelId
*/
getLabelById = (labelId: string): IIssueLabel | null => this.labelMap?.[labelId] || null;
}

64
web/store/label/workspace-label.store.ts
View File

@ -1,64 +0,0 @@
import { action, computed, makeObservable, runInAction } from "mobx";
import { set } from "lodash";
// services
import { IssueLabelService } from "services/issue";
// types
import { RootStore } from "store/root.store";
import { IIssueLabel } from "@plane/types";
import { ILabelRootStore } from "store/label";
export interface IWorkspaceLabelStore {
// computed
workspaceLabels: IIssueLabel[] | undefined;
// fetch actions
fetchWorkspaceLabels: (workspaceSlug: string) => Promise<IIssueLabel[]>;
}
export class WorkspaceLabelStore implements IWorkspaceLabelStore {
// root store
rootStore;
// root store labelMap
labelMap: Record<string, IIssueLabel> = {};
// services
issueLabelService;
constructor(_labelRoot: ILabelRootStore, _rootStore: RootStore) {
makeObservable(this, {
// computed
workspaceLabels: computed,
// actions
fetchWorkspaceLabels: action,
});
// root store
this.rootStore = _rootStore;
this.labelMap = _labelRoot?.labelMap;
// services
this.issueLabelService = new IssueLabelService();
}
/**
* Returns the labelMap belongs to a specific workspace
*/
get workspaceLabels() {
const currentWorkspaceDetails = this.rootStore.workspaceRoot.currentWorkspace;
if (!currentWorkspaceDetails) return;
return Object.values(this.labelMap).filter((label) => label.workspace === currentWorkspaceDetails.id);
}
/**
* Fetches all the labelMap belongs to a specific project
* @param workspaceSlug
* @param projectId
* @returns Promise<IIssueLabel[]>
*/
fetchWorkspaceLabels = async (workspaceSlug: string) =>
await this.issueLabelService.getWorkspaceIssueLabels(workspaceSlug).then((response) => {
runInAction(() => {
response.forEach((label) => {
set(this.labelMap, [label.id], label);
});
});
return response;
});
}

12
web/store/member/project-member.store.ts
View File

@ -1,4 +1,5 @@
import { action, computed, makeObservable, observable, runInAction } from "mobx";
import { computedFn } from "mobx-utils";
import set from "lodash/set";
import sortBy from "lodash/sortBy";
// services
@ -64,9 +65,6 @@ export class ProjectMemberStore implements IProjectMemberStore {
projectMemberMap: observable,
// computed
projectMemberIds: computed,
// computed actions
getProjectMemberDetails: action,
getProjectMemberIds: action,
// actions
fetchProjectMembers: action,
bulkAddMembersToProject: action,
@ -101,7 +99,7 @@ export class ProjectMemberStore implements IProjectMemberStore {
* @description get the details of a project member
* @param userId
*/
getProjectMemberDetails = (userId: string) => {
getProjectMemberDetails = computedFn((userId: string) => {
const projectId = this.routerStore.projectId;
if (!projectId) return null;
const projectMember = this.projectMemberMap?.[projectId]?.[userId];
@ -113,13 +111,13 @@ export class ProjectMemberStore implements IProjectMemberStore {
member: this.memberRoot?.memberMap?.[projectMember.member],
};
return memberDetails;
};
});
/**
* @description get the list of all the user ids of all the members of a project using projectId
* @param projectId
*/
getProjectMemberIds = (projectId: string): string[] | null => {
getProjectMemberIds = computedFn((projectId: string): string[] | null => {
if (!this.projectMemberMap?.[projectId]) return null;
let members = Object.values(this.projectMemberMap?.[projectId]);
members = sortBy(members, [
@ -128,7 +126,7 @@ export class ProjectMemberStore implements IProjectMemberStore {
]);
const memberIds = members.map((m) => m.member);
return memberIds;
};
});
/**
* @description fetch the list of all the members of a project

6
web/store/project/project.store.ts
View File

@ -1,4 +1,5 @@
import { observable, action, computed, makeObservable, runInAction } from "mobx";
import { computedFn } from "mobx-utils";
import set from "lodash/set";
// types
import { RootStore } from "../root.store";
@ -6,7 +7,6 @@ import { IProject } from "@plane/types";
// services
import { IssueLabelService, IssueService } from "services/issue";
import { ProjectService, ProjectStateService } from "services/project";
export interface IProjectStore {
// observables
searchQuery: string;
@ -197,10 +197,10 @@ export class ProjectStore implements IProjectStore {
* @param projectId
* @returns IProject | null
*/
getProjectById = (projectId: string) => {
getProjectById = computedFn((projectId: string) => {
const projectInfo = this.projectMap[projectId] || null;
return projectInfo;
};
});
/**
* Adds project to favorites and updates project favorite status in the store

6
web/store/root.store.ts
View File

@ -9,7 +9,6 @@ import { IUserRootStore, UserRootStore } from "./user";
import { IWorkspaceRootStore, WorkspaceRootStore } from "./workspace";
import { IssueRootStore, IIssueRootStore } from "./issue/root.store";
import { IStateStore, StateStore } from "./state.store";
import { ILabelRootStore, LabelRootStore } from "./label";
import { IMemberRootStore, MemberRootStore } from "./member";
import { IInboxRootStore, InboxRootStore } from "./inbox";
import { IEstimateStore, EstimateStore } from "./estimate.store";
@ -17,6 +16,7 @@ import { GlobalViewStore, IGlobalViewStore } from "./global-view.store";
import { IMentionStore, MentionStore } from "./mention.store";
import { DashboardStore, IDashboardStore } from "./dashboard.store";
import { IProjectPageStore, ProjectPageStore } from "./project-page.store";
import { ILabelStore, LabelStore } from "./label.store";
enableStaticRendering(typeof window === "undefined");
@ -25,7 +25,6 @@ export class RootStore {
user: IUserRootStore;
workspaceRoot: IWorkspaceRootStore;
projectRoot: IProjectRootStore;
labelRoot: ILabelRootStore;
memberRoot: IMemberRootStore;
inboxRoot: IInboxRootStore;
cycle: ICycleStore;
@ -34,6 +33,7 @@ export class RootStore {
globalView: IGlobalViewStore;
issue: IIssueRootStore;
state: IStateStore;
label: ILabelStore;
estimate: IEstimateStore;
mention: IMentionStore;
dashboard: IDashboardStore;
@ -44,7 +44,6 @@ export class RootStore {
this.user = new UserRootStore(this);
this.workspaceRoot = new WorkspaceRootStore(this);
this.projectRoot = new ProjectRootStore(this);
this.labelRoot = new LabelRootStore(this);
this.memberRoot = new MemberRootStore(this);
this.inboxRoot = new InboxRootStore(this);
// independent stores
@ -54,6 +53,7 @@ export class RootStore {
this.globalView = new GlobalViewStore(this);
this.issue = new IssueRootStore(this);
this.state = new StateStore(this);
this.label = new LabelStore(this);
this.estimate = new EstimateStore(this);
this.mention = new MentionStore(this);
this.projectPages = new ProjectPageStore(this);

37
web/store/state.store.ts
View File

@ -1,4 +1,5 @@
import { makeObservable, observable, computed, action, runInAction } from "mobx";
import { computedFn } from "mobx-utils"
import groupBy from "lodash/groupBy";
import set from "lodash/set";
// store
@ -21,6 +22,7 @@ export interface IStateStore {
getProjectStates: (projectId: string) => IState[] | undefined;
// fetch actions
fetchProjectStates: (workspaceSlug: string, projectId: string) => Promise<IState[]>;
fetchWorkspaceStates: (workspaceSlug: string) => Promise<IState[]>;
// crud actions
createState: (workspaceSlug: string, projectId: string, data: Partial<IState>) => Promise<IState>;
updateState: (
@ -55,9 +57,6 @@ export class StateStore implements IStateStore {
// computed
projectStates: computed,
groupedProjectStates: computed,
// computed actions
getStateById: action,
getProjectStates: action,
// fetch action
fetchProjectStates: action,
// CRUD actions
@ -76,8 +75,9 @@ export class StateStore implements IStateStore {
* Returns the stateMap belongs to a specific project
*/
get projectStates() {
const projectId = this.router.query?.projectId?.toString();
if (!projectId || !this.fetchedMap[projectId]) return;
const projectId = this.router.projectId;
const worksapceSlug = this.router.workspaceSlug || "";
if (!projectId || !(this.fetchedMap[projectId] || this.fetchedMap[worksapceSlug])) return;
return Object.values(this.stateMap).filter((state) => state.project === this.router.query.projectId);
}
@ -93,20 +93,21 @@ export class StateStore implements IStateStore {
* @description returns state details using state id
* @param stateId
*/
getStateById = (stateId: string) => {
getStateById = computedFn((stateId: string) => {
if (!this.stateMap) return;
return this.stateMap[stateId] ?? undefined;
};
});
/**
* Returns the stateMap belongs to a project by projectId
* @param projectId
* @returns IState[]
*/
getProjectStates = (projectId: string) => {
if (!projectId || !this.fetchedMap[projectId]) return;
getProjectStates = computedFn((projectId: string) => {
const worksapceSlug = this.router.workspaceSlug || "";
if (!projectId || !(this.fetchedMap[projectId] || this.fetchedMap[worksapceSlug])) return;
return Object.values(this.stateMap).filter((state) => state.project === projectId);
};
});
/**
* fetches the stateMap of a project
@ -125,6 +126,22 @@ export class StateStore implements IStateStore {
return statesResponse;
};
/**
* fetches the stateMap of all the states in workspace
* @param workspaceSlug
* @returns
*/
fetchWorkspaceStates = async (workspaceSlug: string) => {
const statesResponse = await this.stateService.getWorkspaceStates(workspaceSlug);
runInAction(() => {
statesResponse.forEach((state) => {
set(this.stateMap, [state.id], state);
});
set(this.fetchedMap, workspaceSlug, true);
});
return statesResponse;
};
/**
* creates a new state in a project and adds it to the store
* @param workspaceSlug

27
yarn.lock
View File

@ -2406,6 +2406,13 @@
lodash.merge "^4.6.2"
postcss-selector-parser "6.0.10"
"@tippyjs/react@^4.2.6":
version "4.2.6"
resolved "https://registry.yarnpkg.com/@tippyjs/react/-/react-4.2.6.tgz#971677a599bf663f20bb1c60a62b9555b749cc71"
integrity sha512-91RicDR+H7oDSyPycI13q3b7o4O60wa2oRbjlz2fyRLmHImc4vyDwuUP8NtZaN0VARJY5hybvDYrFzhY9+Lbyw==
dependencies:
tippy.js "^6.3.1"
"@tiptap/core@^2.1.13":
version "2.1.13"
resolved "https://registry.yarnpkg.com/@tiptap/core/-/core-2.1.13.tgz#e21f566e81688c826c6f26d2940886734189e193"
@ -6617,16 +6624,6 @@ mkdirp@^0.5.5:
dependencies:
minimist "^1.2.6"
mobx-devtools-mst@^0.9.30:
version "0.9.30"
resolved "https://registry.yarnpkg.com/mobx-devtools-mst/-/mobx-devtools-mst-0.9.30.tgz#0d1cad8b3d97e1f3f94bb9afb701cd9c8b5b164d"
integrity sha512-6fIYeFG4xT4syIeKddmK55zQbc3ZZZr/272/cCbfaAAM5YiuFdteGZGUgdsz8wxf/mGxWZbFOM3WmASAnpwrbw==
mobx-react-devtools@^6.1.1:
version "6.1.1"
resolved "https://registry.yarnpkg.com/mobx-react-devtools/-/mobx-react-devtools-6.1.1.tgz#a462b944085cf11ff96fc937d12bf31dab4c8984"
integrity sha512-nc5IXLdEUFLn3wZal65KF3/JFEFd+mbH4KTz/IG5BOPyw7jo8z29w/8qm7+wiCyqVfUIgJ1gL4+HVKmcXIOgqA==
mobx-react-lite@^4.0.3, mobx-react-lite@^4.0.4:
version "4.0.5"
resolved "https://registry.yarnpkg.com/mobx-react-lite/-/mobx-react-lite-4.0.5.tgz#e2cb98f813e118917bcc463638f5bf6ea053a67b"
@ -6641,10 +6638,10 @@ mobx-react@^9.1.0:
dependencies:
mobx-react-lite "^4.0.4"
mobx-state-tree@^5.4.0:
version "5.4.0"
resolved "https://registry.yarnpkg.com/mobx-state-tree/-/mobx-state-tree-5.4.0.tgz#d41b7fd90b8d4b063bc32526758417f1100751df"
integrity sha512-2VuUhAqFklxgGqFNqaZUXYYSQINo8C2SUEP9YfCQrwatHWHqJLlEC7Xb+5WChkev7fubzn3aVuby26Q6h+JeBg==
mobx-utils@^6.0.8:
version "6.0.8"
resolved "https://registry.yarnpkg.com/mobx-utils/-/mobx-utils-6.0.8.tgz#843e222c7694050c2e42842682fd24a84fdb7024"
integrity sha512-fPNt0vJnHwbQx9MojJFEnJLfM3EMGTtpy4/qOOW6xueh1mPofMajrbYAUvByMYAvCJnpy1A5L0t+ZVB5niKO4g==
mobx@^6.10.0:
version "6.12.0"
@ -8540,7 +8537,7 @@ tinycolor2@^1.4.1:
resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.6.0.tgz#f98007460169b0263b97072c5ae92484ce02d09e"
integrity sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==
tippy.js@^6.3.7:
tippy.js@^6.3.1, tippy.js@^6.3.7:
version "6.3.7"
resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-6.3.7.tgz#8ccfb651d642010ed9a32ff29b0e9e19c5b8c61c"
integrity sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==