mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
chore: workspace global issues (#2964)
* dev: global issues store * build-error: all issues render * build-error: build error resolved in global view store
This commit is contained in:
guru_sainath
sriram veeraghanta
parent
83026e8b2f
commit
a276bd2301
@ -2,8 +2,6 @@ import { useCallback, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import useSWR from "swr";
|
||||
|
||||
// mobx store
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
// components
|
||||
@ -17,6 +15,7 @@ import { List, PlusIcon, Sheet } from "lucide-react";
|
||||
import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TStaticViewTypes } from "types";
|
||||
// constants
|
||||
import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
|
||||
import { EFilterType } from "store/issues/types";
|
||||
|
||||
const GLOBAL_VIEW_LAYOUTS = [
|
||||
{ key: "list", title: "List", link: "/workspace-views", icon: List },
|
||||
@ -27,73 +26,55 @@ type Props = {
|
||||
activeLayout: "list" | "spreadsheet";
|
||||
};
|
||||
|
||||
const STATIC_VIEW_TYPES: TStaticViewTypes[] = ["all-issues", "assigned", "created", "subscribed"];
|
||||
|
||||
export const GlobalIssuesHeader: React.FC<Props> = observer((props) => {
|
||||
const { activeLayout } = props;
|
||||
|
||||
const [createViewModal, setCreateViewModal] = useState(false);
|
||||
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, globalViewId } = router.query;
|
||||
const { workspaceSlug } = router.query as { workspaceSlug: string };
|
||||
|
||||
const {
|
||||
globalViewFilters: globalViewFiltersStore,
|
||||
workspaceFilter: workspaceFilterStore,
|
||||
workspace: workspaceStore,
|
||||
workspace: { workspaceLabels },
|
||||
workspaceMember: { workspaceMembers },
|
||||
project: projectStore,
|
||||
} = useMobxStore();
|
||||
project: { workspaceProjects },
|
||||
|
||||
const storedFilters = globalViewId ? globalViewFiltersStore.storedFilters[globalViewId.toString()] : undefined;
|
||||
workspaceGlobalIssuesFilter: { issueFilters, updateFilters },
|
||||
} = useMobxStore();
|
||||
|
||||
const handleFiltersUpdate = useCallback(
|
||||
(key: keyof IIssueFilterOptions, value: string | string[]) => {
|
||||
if (!workspaceSlug || !globalViewId) return;
|
||||
|
||||
const newValues = storedFilters?.[key] ?? [];
|
||||
if (!workspaceSlug) return;
|
||||
const newValues = issueFilters?.filters?.[key] ?? [];
|
||||
|
||||
if (Array.isArray(value)) {
|
||||
value.forEach((val) => {
|
||||
if (!newValues.includes(val)) newValues.push(val);
|
||||
});
|
||||
} else {
|
||||
if (storedFilters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
|
||||
if (issueFilters?.filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
|
||||
else newValues.push(value);
|
||||
}
|
||||
|
||||
globalViewFiltersStore.updateStoredFilters(globalViewId.toString(), {
|
||||
[key]: newValues,
|
||||
});
|
||||
updateFilters(workspaceSlug, EFilterType.FILTERS, { [key]: newValues });
|
||||
},
|
||||
[globalViewId, globalViewFiltersStore, storedFilters, workspaceSlug]
|
||||
[workspaceSlug, issueFilters, updateFilters]
|
||||
);
|
||||
|
||||
const handleDisplayFiltersUpdate = useCallback(
|
||||
const handleDisplayFilters = useCallback(
|
||||
(updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
|
||||
if (!workspaceSlug) return;
|
||||
|
||||
workspaceFilterStore.updateWorkspaceFilters(workspaceSlug.toString(), {
|
||||
display_filters: updatedDisplayFilter,
|
||||
});
|
||||
updateFilters(workspaceSlug, EFilterType.DISPLAY_FILTERS, updatedDisplayFilter);
|
||||
},
|
||||
[workspaceFilterStore, workspaceSlug]
|
||||
[workspaceSlug, updateFilters]
|
||||
);
|
||||
|
||||
const handleDisplayPropertiesUpdate = useCallback(
|
||||
const handleDisplayProperties = useCallback(
|
||||
(property: Partial<IIssueDisplayProperties>) => {
|
||||
if (!workspaceSlug) return;
|
||||
|
||||
workspaceFilterStore.updateWorkspaceFilters(workspaceSlug.toString(), {
|
||||
display_properties: property,
|
||||
});
|
||||
updateFilters(workspaceSlug, EFilterType.DISPLAY_PROPERTIES, property);
|
||||
},
|
||||
[workspaceFilterStore, workspaceSlug]
|
||||
);
|
||||
|
||||
useSWR(
|
||||
workspaceSlug ? "USER_WORKSPACE_DISPLAY_FILTERS" : null,
|
||||
workspaceSlug ? () => workspaceFilterStore.fetchUserWorkspaceFilters(workspaceSlug.toString()) : null
|
||||
[workspaceSlug, updateFilters]
|
||||
);
|
||||
|
||||
return (
|
||||
@ -137,32 +118,31 @@ export const GlobalIssuesHeader: React.FC<Props> = observer((props) => {
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{activeLayout === "spreadsheet" && (
|
||||
<>
|
||||
{!STATIC_VIEW_TYPES.some((word) => router.pathname.includes(word)) && (
|
||||
<FiltersDropdown title="Filters" placement="bottom-end">
|
||||
<FilterSelection
|
||||
filters={storedFilters ?? {}}
|
||||
handleFiltersUpdate={handleFiltersUpdate}
|
||||
layoutDisplayFiltersOptions={ISSUE_DISPLAY_FILTERS_BY_LAYOUT.my_issues.spreadsheet}
|
||||
labels={workspaceStore.workspaceLabels ?? undefined}
|
||||
members={workspaceMembers?.map((m) => m.member) ?? undefined}
|
||||
projects={workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : undefined}
|
||||
filters={issueFilters?.filters ?? {}}
|
||||
handleFiltersUpdate={handleFiltersUpdate}
|
||||
labels={workspaceLabels ?? undefined}
|
||||
members={workspaceMembers?.map((m) => m.member)}
|
||||
projects={workspaceProjects ?? undefined}
|
||||
/>
|
||||
</FiltersDropdown>
|
||||
)}
|
||||
|
||||
<FiltersDropdown title="Display" placement="bottom-end">
|
||||
<DisplayFiltersSelection
|
||||
displayFilters={workspaceFilterStore.workspaceDisplayFilters}
|
||||
displayProperties={workspaceFilterStore.workspaceDisplayProperties}
|
||||
handleDisplayFiltersUpdate={handleDisplayFiltersUpdate}
|
||||
handleDisplayPropertiesUpdate={handleDisplayPropertiesUpdate}
|
||||
layoutDisplayFiltersOptions={ISSUE_DISPLAY_FILTERS_BY_LAYOUT.my_issues.spreadsheet}
|
||||
displayFilters={issueFilters?.displayFilters ?? {}}
|
||||
handleDisplayFiltersUpdate={handleDisplayFilters}
|
||||
displayProperties={issueFilters?.displayProperties ?? {}}
|
||||
handleDisplayPropertiesUpdate={handleDisplayProperties}
|
||||
/>
|
||||
</FiltersDropdown>
|
||||
</>
|
||||
)}
|
||||
|
||||
<Button variant="primary" size="sm" prependIcon={<PlusIcon />} onClick={() => setCreateViewModal(true)}>
|
||||
New View
|
||||
</Button>
|
||||
|
||||
@ -25,9 +25,7 @@ export const DraftIssueAppliedFiltersRoot: React.FC = observer(() => {
|
||||
const appliedFilters: IIssueFilterOptions = {};
|
||||
Object.entries(userFilters ?? {}).forEach(([key, value]) => {
|
||||
if (!value) return;
|
||||
|
||||
if (Array.isArray(value) && value.length === 0) return;
|
||||
|
||||
appliedFilters[key as keyof IIssueFilterOptions] = value;
|
||||
});
|
||||
|
||||
|
||||
@ -12,85 +12,73 @@ import { Button } from "@plane/ui";
|
||||
import { areFiltersDifferent } from "helpers/filter.helper";
|
||||
// types
|
||||
import { IIssueFilterOptions } from "types";
|
||||
import { EFilterType } from "store/issues/types";
|
||||
|
||||
export const GlobalViewsAppliedFiltersRoot = observer(() => {
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, globalViewId } = router.query;
|
||||
const { workspaceSlug, globalViewId } = router.query as { workspaceSlug: string; globalViewId: string };
|
||||
|
||||
const {
|
||||
globalViews: globalViewsStore,
|
||||
globalViewFilters: globalViewFiltersStore,
|
||||
project: projectStore,
|
||||
workspace: workspaceStore,
|
||||
project: { workspaceProjects },
|
||||
workspace: { workspaceLabels },
|
||||
workspaceMember: { workspaceMembers },
|
||||
workspaceGlobalIssuesFilter: { issueFilters, updateFilters },
|
||||
} = useMobxStore();
|
||||
|
||||
const viewDetails = globalViewId ? globalViewsStore.globalViewDetails[globalViewId.toString()] : undefined;
|
||||
const storedFilters = globalViewId ? globalViewFiltersStore.storedFilters[globalViewId.toString()] : undefined;
|
||||
|
||||
const userFilters = issueFilters?.filters;
|
||||
|
||||
// filters whose value not null or empty array
|
||||
const appliedFilters: IIssueFilterOptions = {};
|
||||
Object.entries(storedFilters ?? {}).forEach(([key, value]) => {
|
||||
Object.entries(userFilters ?? {}).forEach(([key, value]) => {
|
||||
if (!value) return;
|
||||
|
||||
if (Array.isArray(value) && value.length === 0) return;
|
||||
|
||||
appliedFilters[key as keyof IIssueFilterOptions] = value;
|
||||
});
|
||||
|
||||
const handleRemoveFilter = (key: keyof IIssueFilterOptions, value: string | null) => {
|
||||
if (!globalViewId) return;
|
||||
|
||||
// remove all values of the key if value is null
|
||||
if (!value) {
|
||||
globalViewFiltersStore.updateStoredFilters(globalViewId.toString(), {
|
||||
[key]: null,
|
||||
});
|
||||
updateFilters(workspaceSlug, EFilterType.FILTERS, { [key]: null });
|
||||
return;
|
||||
}
|
||||
|
||||
// remove the passed value from the key
|
||||
let newValues = globalViewFiltersStore.storedFilters?.[globalViewId.toString()]?.[key] ?? [];
|
||||
let newValues = userFilters?.[key] ?? [];
|
||||
newValues = newValues.filter((val) => val !== value);
|
||||
|
||||
globalViewFiltersStore.updateStoredFilters(globalViewId.toString(), {
|
||||
[key]: newValues,
|
||||
});
|
||||
updateFilters(workspaceSlug, EFilterType.FILTERS, { [key]: newValues });
|
||||
};
|
||||
|
||||
const handleClearAllFilters = () => {
|
||||
if (!globalViewId || !storedFilters) return;
|
||||
|
||||
if (!workspaceSlug) return;
|
||||
const newFilters: IIssueFilterOptions = {};
|
||||
Object.keys(storedFilters).forEach((key) => {
|
||||
Object.keys(userFilters ?? {}).forEach((key) => {
|
||||
newFilters[key as keyof IIssueFilterOptions] = null;
|
||||
});
|
||||
|
||||
globalViewFiltersStore.updateStoredFilters(globalViewId.toString(), {
|
||||
...newFilters,
|
||||
});
|
||||
updateFilters(workspaceSlug, EFilterType.FILTERS, { ...newFilters });
|
||||
};
|
||||
|
||||
const handleUpdateView = () => {
|
||||
if (!workspaceSlug || !globalViewId || !viewDetails) return;
|
||||
// const handleUpdateView = () => {
|
||||
// if (!workspaceSlug || !globalViewId || !viewDetails) return;
|
||||
|
||||
globalViewsStore.updateGlobalView(workspaceSlug.toString(), globalViewId.toString(), {
|
||||
query_data: {
|
||||
...viewDetails.query_data,
|
||||
filters: {
|
||||
...(storedFilters ?? {}),
|
||||
},
|
||||
},
|
||||
});
|
||||
};
|
||||
// globalViewsStore.updateGlobalView(workspaceSlug.toString(), globalViewId.toString(), {
|
||||
// query_data: {
|
||||
// ...viewDetails.query_data,
|
||||
// filters: {
|
||||
// ...(storedFilters ?? {}),
|
||||
// },
|
||||
// },
|
||||
// });
|
||||
// };
|
||||
|
||||
// update stored filters when view details are fetched
|
||||
useEffect(() => {
|
||||
if (!globalViewId || !viewDetails) return;
|
||||
// useEffect(() => {
|
||||
// if (!globalViewId || !viewDetails) return;
|
||||
|
||||
if (!globalViewFiltersStore.storedFilters[globalViewId.toString()])
|
||||
globalViewFiltersStore.updateStoredFilters(globalViewId.toString(), viewDetails?.query_data?.filters ?? {});
|
||||
}, [globalViewId, globalViewFiltersStore, viewDetails]);
|
||||
// if (!globalViewFiltersStore.storedFilters[globalViewId.toString()])
|
||||
// globalViewFiltersStore.updateStoredFilters(globalViewId.toString(), viewDetails?.query_data?.filters ?? {});
|
||||
// }, [globalViewId, globalViewFiltersStore, viewDetails]);
|
||||
|
||||
// return if no filters are applied
|
||||
if (Object.keys(appliedFilters).length === 0) return null;
|
||||
@ -98,18 +86,19 @@ export const GlobalViewsAppliedFiltersRoot = observer(() => {
|
||||
return (
|
||||
<div className="flex items-start justify-between gap-4 p-4">
|
||||
<AppliedFiltersList
|
||||
appliedFilters={storedFilters ?? {}}
|
||||
labels={workspaceLabels ?? undefined}
|
||||
members={workspaceMembers?.map((m) => m.member)}
|
||||
projects={workspaceProjects ?? undefined}
|
||||
appliedFilters={appliedFilters ?? {}}
|
||||
handleClearAllFilters={handleClearAllFilters}
|
||||
handleRemoveFilter={handleRemoveFilter}
|
||||
labels={workspaceStore.workspaceLabels ?? undefined}
|
||||
members={workspaceMembers?.map((m) => m.member)}
|
||||
projects={workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : undefined}
|
||||
/>
|
||||
{storedFilters && viewDetails && areFiltersDifferent(storedFilters, viewDetails.query_data.filters ?? {}) && (
|
||||
|
||||
{/* {storedFilters && viewDetails && areFiltersDifferent(storedFilters, viewDetails.query_data.filters ?? {}) && (
|
||||
<Button variant="primary" onClick={handleUpdateView}>
|
||||
Update view
|
||||
</Button>
|
||||
)}
|
||||
)} */}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
@ -3,6 +3,9 @@ export * from "./filters";
|
||||
export * from "./empty-states";
|
||||
export * from "./quick-action-dropdowns";
|
||||
|
||||
// roots
|
||||
export * from "./roots";
|
||||
|
||||
// layouts
|
||||
export * from "./list";
|
||||
export * from "./calendar";
|
||||
@ -10,6 +13,5 @@ export * from "./gantt";
|
||||
export * from "./kanban";
|
||||
export * from "./spreadsheet";
|
||||
|
||||
// properties
|
||||
export * from "./properties";
|
||||
|
||||
export * from "./roots";
|
||||
|
||||
@ -0,0 +1,114 @@
|
||||
import { useState } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import { CustomMenu } from "@plane/ui";
|
||||
import { Copy, Link, Pencil, Trash2 } from "lucide-react";
|
||||
// hooks
|
||||
import useToast from "hooks/use-toast";
|
||||
// components
|
||||
import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
|
||||
// helpers
|
||||
import { copyUrlToClipboard } from "helpers/string.helper";
|
||||
// types
|
||||
import { IIssue } from "types";
|
||||
import { IQuickActionProps } from "../list/list-view-types";
|
||||
import { EProjectStore } from "store/command-palette.store";
|
||||
|
||||
export const AllIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
|
||||
const { issue, handleDelete, handleUpdate } = props;
|
||||
|
||||
const router = useRouter();
|
||||
const { workspaceSlug } = router.query;
|
||||
|
||||
// states
|
||||
const [createUpdateIssueModal, setCreateUpdateIssueModal] = useState(false);
|
||||
const [issueToEdit, setIssueToEdit] = useState<IIssue | null>(null);
|
||||
const [deleteIssueModal, setDeleteIssueModal] = useState(false);
|
||||
|
||||
const { setToastAlert } = useToast();
|
||||
|
||||
const handleCopyIssueLink = () => {
|
||||
copyUrlToClipboard(`/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`).then(() =>
|
||||
setToastAlert({
|
||||
type: "success",
|
||||
title: "Link copied",
|
||||
message: "Issue link copied to clipboard",
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<DeleteIssueModal
|
||||
data={issue}
|
||||
isOpen={deleteIssueModal}
|
||||
handleClose={() => setDeleteIssueModal(false)}
|
||||
onSubmit={handleDelete}
|
||||
/>
|
||||
<CreateUpdateIssueModal
|
||||
isOpen={createUpdateIssueModal}
|
||||
handleClose={() => {
|
||||
setCreateUpdateIssueModal(false);
|
||||
setIssueToEdit(null);
|
||||
}}
|
||||
// pre-populate date only if not editing
|
||||
prePopulateData={!issueToEdit && createUpdateIssueModal ? { ...issue, name: `${issue.name} (copy)` } : {}}
|
||||
data={issueToEdit}
|
||||
onSubmit={async (data) => {
|
||||
if (issueToEdit && handleUpdate) handleUpdate({ ...issueToEdit, ...data });
|
||||
}}
|
||||
currentStore={EProjectStore.PROJECT}
|
||||
/>
|
||||
<CustomMenu placement="bottom-start" ellipsis>
|
||||
<CustomMenu.MenuItem
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
handleCopyIssueLink();
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Link className="h-3 w-3" />
|
||||
Copy link
|
||||
</div>
|
||||
</CustomMenu.MenuItem>
|
||||
<CustomMenu.MenuItem
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setIssueToEdit(issue);
|
||||
setCreateUpdateIssueModal(true);
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Pencil className="h-3 w-3" />
|
||||
Edit issue
|
||||
</div>
|
||||
</CustomMenu.MenuItem>
|
||||
<CustomMenu.MenuItem
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setCreateUpdateIssueModal(true);
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Copy className="h-3 w-3" />
|
||||
Make a copy
|
||||
</div>
|
||||
</CustomMenu.MenuItem>
|
||||
<CustomMenu.MenuItem
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setDeleteIssueModal(true);
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Trash2 className="h-3 w-3" />
|
||||
Delete issue
|
||||
</div>
|
||||
</CustomMenu.MenuItem>
|
||||
</CustomMenu>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@ -2,3 +2,4 @@ export * from "./cycle-issue";
|
||||
export * from "./module-issue";
|
||||
export * from "./project-issue";
|
||||
export * from "./archived-issue";
|
||||
export * from "./all-issue";
|
||||
|
||||
@ -0,0 +1,134 @@
|
||||
import React, { useCallback } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import useSWR from "swr";
|
||||
// mobx store
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
// components
|
||||
import { GlobalViewEmptyState, GlobalViewsAppliedFiltersRoot } from "components/issues";
|
||||
import { SpreadsheetView } from "components/issues/issue-layouts";
|
||||
import { AllIssueQuickActions } from "components/issues/issue-layouts/quick-action-dropdowns";
|
||||
// ui
|
||||
import { Spinner } from "@plane/ui";
|
||||
// types
|
||||
import { IIssue, IIssueDisplayFilterOptions, TStaticViewTypes } from "types";
|
||||
import { IIssueUnGroupedStructure } from "store/issue";
|
||||
import { EIssueActions } from "../types";
|
||||
|
||||
import { EFilterType, TUnGroupedIssues } from "store/issues/types";
|
||||
|
||||
type Props = {
|
||||
type?: TStaticViewTypes | null;
|
||||
};
|
||||
|
||||
export const AllIssueLayoutRoot: React.FC<Props> = observer((props) => {
|
||||
const { type = null } = props;
|
||||
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, globalViewId } = router.query as { workspaceSlug: string; globalViewId: string };
|
||||
|
||||
const currentIssueView = type ?? globalViewId;
|
||||
|
||||
const {
|
||||
workspaceMember: { workspaceMembers },
|
||||
workspace: { workspaceLabels },
|
||||
globalViews: { fetchAllGlobalViews },
|
||||
workspaceGlobalIssues: { loader, getIssues, getIssuesIds, fetchIssues, updateIssue, removeIssue },
|
||||
workspaceGlobalIssuesFilter: { currentView, issueFilters, fetchFilters, updateFilters, setCurrentView },
|
||||
} = useMobxStore();
|
||||
|
||||
useSWR(workspaceSlug ? `WORKSPACE_GLOBAL_VIEWS${workspaceSlug}` : null, async () => {
|
||||
if (workspaceSlug) {
|
||||
await fetchAllGlobalViews(workspaceSlug);
|
||||
}
|
||||
});
|
||||
|
||||
useSWR(
|
||||
workspaceSlug && currentIssueView ? `WORKSPACE_GLOBAL_VIEW_ISSUES_${workspaceSlug}_${currentIssueView}` : null,
|
||||
async () => {
|
||||
if (workspaceSlug && currentIssueView) {
|
||||
setCurrentView(currentIssueView);
|
||||
await fetchAllGlobalViews(workspaceSlug);
|
||||
await fetchFilters(workspaceSlug, currentIssueView);
|
||||
await fetchIssues(workspaceSlug, currentIssueView, getIssues ? "mutation" : "init-loader");
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const isEditingAllowed = false;
|
||||
|
||||
const issuesResponse = getIssues;
|
||||
const issueIds = (getIssuesIds ?? []) as TUnGroupedIssues;
|
||||
const issues = issueIds?.filter((id) => id && issuesResponse?.[id]).map((id) => issuesResponse?.[id]);
|
||||
|
||||
const issueActions = {
|
||||
[EIssueActions.UPDATE]: async (issue: IIssue) => {
|
||||
if (!workspaceSlug) return;
|
||||
|
||||
await updateIssue(workspaceSlug, issue.project, issue.id, issue);
|
||||
},
|
||||
[EIssueActions.DELETE]: async (issue: IIssue) => {
|
||||
if (!workspaceSlug) return;
|
||||
|
||||
await removeIssue(workspaceSlug, issue.project, issue.id);
|
||||
},
|
||||
};
|
||||
|
||||
const handleIssues = useCallback(
|
||||
async (issue: IIssue, action: EIssueActions) => {
|
||||
if (issueActions && action && issue) {
|
||||
if (action === EIssueActions.UPDATE) await issueActions[action]!(issue);
|
||||
if (action === EIssueActions.DELETE) await issueActions[action]!(issue);
|
||||
}
|
||||
},
|
||||
[getIssues]
|
||||
);
|
||||
|
||||
const handleDisplayFiltersUpdate = useCallback(
|
||||
(updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
|
||||
if (!workspaceSlug) return;
|
||||
|
||||
updateFilters(workspaceSlug, EFilterType.DISPLAY_FILTERS, { ...updatedDisplayFilter });
|
||||
},
|
||||
[updateFilters, workspaceSlug]
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="relative w-full h-full flex flex-col overflow-hidden">
|
||||
{currentView != currentIssueView && loader === "init-loader" ? (
|
||||
<div className="w-full h-full flex justify-center items-center">
|
||||
<Spinner />
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<GlobalViewsAppliedFiltersRoot />
|
||||
|
||||
{Object.keys(getIssues ?? {}).length == 0 && !loader ? (
|
||||
<>{/* <GlobalViewEmptyState /> */}</>
|
||||
) : (
|
||||
<div className="w-full h-full relative overflow-auto">
|
||||
<SpreadsheetView
|
||||
displayProperties={issueFilters?.displayProperties ?? {}}
|
||||
displayFilters={issueFilters?.displayFilters ?? {}}
|
||||
handleDisplayFilterUpdate={handleDisplayFiltersUpdate}
|
||||
issues={issues as IIssueUnGroupedStructure}
|
||||
quickActions={(issue) => (
|
||||
<AllIssueQuickActions
|
||||
issue={issue}
|
||||
handleUpdate={async () => handleIssues({ ...issue }, EIssueActions.UPDATE)}
|
||||
handleDelete={async () => handleIssues(issue, EIssueActions.DELETE)}
|
||||
/>
|
||||
)}
|
||||
members={workspaceMembers?.map((m) => m.member)}
|
||||
labels={workspaceLabels || undefined}
|
||||
handleIssues={handleIssues}
|
||||
disableUserActions={isEditingAllowed}
|
||||
viewId={currentIssueView}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
@ -1,118 +0,0 @@
|
||||
import React, { useCallback } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import useSWR from "swr";
|
||||
// mobx store
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
// components
|
||||
import { GlobalViewEmptyState, GlobalViewsAppliedFiltersRoot, SpreadsheetView } from "components/issues";
|
||||
// ui
|
||||
import { Spinner } from "@plane/ui";
|
||||
// types
|
||||
import { IIssue, IIssueDisplayFilterOptions, TStaticViewTypes } from "types";
|
||||
|
||||
type Props = {
|
||||
type?: TStaticViewTypes;
|
||||
};
|
||||
|
||||
export const GlobalViewLayoutRoot: React.FC<Props> = observer((props) => {
|
||||
const { type } = props;
|
||||
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, globalViewId } = router.query;
|
||||
|
||||
const {
|
||||
globalViews: globalViewsStore,
|
||||
globalViewIssues: globalViewIssuesStore,
|
||||
globalViewFilters: globalViewFiltersStore,
|
||||
workspaceFilter: workspaceFilterStore,
|
||||
workspace: workspaceStore,
|
||||
workspaceMember: { workspaceMembers },
|
||||
issueDetail: issueDetailStore,
|
||||
project: projectStore,
|
||||
} = useMobxStore();
|
||||
|
||||
const viewDetails = globalViewId ? globalViewsStore.globalViewDetails[globalViewId.toString()] : undefined;
|
||||
|
||||
const storedFilters = globalViewId ? globalViewFiltersStore.storedFilters[globalViewId.toString()] : undefined;
|
||||
|
||||
const projects = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : null;
|
||||
|
||||
useSWR(
|
||||
workspaceSlug && globalViewId && viewDetails ? `GLOBAL_VIEW_ISSUES_${globalViewId.toString()}` : null,
|
||||
workspaceSlug && globalViewId && viewDetails
|
||||
? () => {
|
||||
globalViewIssuesStore.fetchViewIssues(workspaceSlug.toString(), globalViewId.toString(), storedFilters ?? {});
|
||||
}
|
||||
: null
|
||||
);
|
||||
|
||||
useSWR(
|
||||
workspaceSlug && type ? `GLOBAL_VIEW_ISSUES_${type.toString()}` : null,
|
||||
workspaceSlug && type
|
||||
? () => {
|
||||
globalViewIssuesStore.fetchStaticIssues(workspaceSlug.toString(), type);
|
||||
}
|
||||
: null
|
||||
);
|
||||
|
||||
const handleDisplayFiltersUpdate = useCallback(
|
||||
(updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
|
||||
if (!workspaceSlug) return;
|
||||
|
||||
workspaceFilterStore.updateWorkspaceFilters(workspaceSlug.toString(), {
|
||||
display_filters: updatedDisplayFilter,
|
||||
});
|
||||
},
|
||||
[workspaceFilterStore, workspaceSlug]
|
||||
);
|
||||
|
||||
const handleUpdateIssue = useCallback(
|
||||
(issue: IIssue, data: Partial<IIssue>) => {
|
||||
if (!workspaceSlug) return;
|
||||
|
||||
const payload = {
|
||||
...issue,
|
||||
...data,
|
||||
};
|
||||
|
||||
globalViewIssuesStore.updateIssueStructure(type ?? globalViewId!.toString(), payload);
|
||||
// issueDetailStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, data);
|
||||
},
|
||||
[globalViewId, globalViewIssuesStore, workspaceSlug, issueDetailStore]
|
||||
);
|
||||
|
||||
const issues = type
|
||||
? globalViewIssuesStore.viewIssues?.[type]
|
||||
: globalViewId
|
||||
? globalViewIssuesStore.viewIssues?.[globalViewId.toString()]
|
||||
: undefined;
|
||||
|
||||
if (!issues)
|
||||
return (
|
||||
<div className="h-full w-full grid place-items-center">
|
||||
<Spinner />
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="relative w-full h-full flex flex-col overflow-hidden">
|
||||
<GlobalViewsAppliedFiltersRoot />
|
||||
{issues?.length === 0 || !projects || projects?.length === 0 ? (
|
||||
<GlobalViewEmptyState />
|
||||
) : (
|
||||
<div className="h-full w-full overflow-auto">
|
||||
{/* <SpreadsheetView
|
||||
displayProperties={workspaceFilterStore.workspaceDisplayProperties}
|
||||
displayFilters={workspaceFilterStore.workspaceDisplayFilters}
|
||||
handleDisplayFilterUpdate={handleDisplayFiltersUpdate}
|
||||
issues={issues}
|
||||
members={workspaceMembers?.map((m) => m.member)}
|
||||
labels={workspaceStore.workspaceLabels ? workspaceStore.workspaceLabels : undefined}
|
||||
disableUserActions={false}
|
||||
/> */}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
@ -1,5 +1,5 @@
|
||||
export * from "./cycle-layout-root";
|
||||
export * from "./global-view-layout-root";
|
||||
export * from "./all-issue-layout-root";
|
||||
export * from "./module-layout-root";
|
||||
export * from "./project-layout-root";
|
||||
export * from "./project-view-layout-root";
|
||||
|
||||
@ -26,20 +26,12 @@ export const ProjectLayoutRoot: React.FC = observer(() => {
|
||||
projectIssuesFilter: { issueFilters, fetchFilters },
|
||||
} = useMobxStore();
|
||||
|
||||
useSWR(
|
||||
workspaceSlug && projectId ? `PROJECT_ISSUES_V3_${workspaceSlug}_${projectId}` : null,
|
||||
async () => {
|
||||
useSWR(workspaceSlug && projectId ? `PROJECT_ISSUES_V3_${workspaceSlug}_${projectId}` : null, async () => {
|
||||
if (workspaceSlug && projectId) {
|
||||
await fetchFilters(workspaceSlug, projectId);
|
||||
await fetchIssues(workspaceSlug, projectId, getIssues ? "mutation" : "init-loader");
|
||||
}
|
||||
},
|
||||
{
|
||||
onErrorRetry: (error) => {
|
||||
if (error.status === 404) return;
|
||||
},
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
const activeLayout = issueFilters?.displayFilters?.layout;
|
||||
|
||||
|
||||
@ -77,8 +77,6 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
|
||||
};
|
||||
}, []);
|
||||
|
||||
console.log("spreadsheet issues", issues);
|
||||
|
||||
return (
|
||||
<div className="relative flex h-full w-full rounded-lg text-custom-text-200 overflow-x-auto whitespace-nowrap bg-custom-background-200">
|
||||
<div className="h-full w-full flex flex-col">
|
||||
|
||||
@ -229,9 +229,7 @@ export const OnboardingSidebar: React.FC<Props> = (props) => {
|
||||
<div className={`space-y-1 p-4`}>
|
||||
<div className={`flex items-center justify-between w-full px-1 mb-3 gap-2 mt-4 `}>
|
||||
<div
|
||||
className={`relative flex items-center justify-between w-full rounded gap-1 group
|
||||
px-3 shadow-custom-shadow-2xs border-onboarding-border-100 border
|
||||
`}
|
||||
className={`relative flex items-center justify-between w-full rounded gap-1 group px-3 shadow-custom-shadow-2xs border-onboarding-border-100 border`}
|
||||
>
|
||||
<div className={`relative flex items-center gap-2 flex-grow rounded flex-shrink-0 py-1.5 outline-none`}>
|
||||
<PenSquare className="h-4 w-4 text-custom-sidebar-text-300" />
|
||||
|
||||
@ -108,14 +108,13 @@ export const SignInView = observer(() => {
|
||||
<Lightbulb className="h-7 w-7 mr-2 mx-3" />
|
||||
<p className="text-sm text-left text-onboarding-text-100">
|
||||
Pages gets a facelift! Write anything and use Galileo to help you start.{" "}
|
||||
<Link href="https://plane.so/changelog">
|
||||
<a
|
||||
<Link
|
||||
href="https://plane.so/changelog"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="font-medium text-sm underline hover:cursor-pointer"
|
||||
>
|
||||
Learn more
|
||||
</a>
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@ -2,8 +2,6 @@ import React, { useEffect, useState } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import Link from "next/link";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import useSWR from "swr";
|
||||
|
||||
// mobx store
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
// components
|
||||
@ -21,11 +19,6 @@ export const GlobalViewsHeader: React.FC = observer(() => {
|
||||
|
||||
const { globalViews: globalViewsStore } = useMobxStore();
|
||||
|
||||
useSWR(
|
||||
workspaceSlug ? `GLOBAL_VIEWS_LIST_${workspaceSlug.toString()}` : null,
|
||||
workspaceSlug ? () => globalViewsStore.fetchAllGlobalViews(workspaceSlug.toString()) : null
|
||||
);
|
||||
|
||||
// bring the active view to the centre of the header
|
||||
useEffect(() => {
|
||||
if (!globalViewId) return;
|
||||
|
||||
@ -297,7 +297,6 @@ export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
|
||||
filters: ["priority", "state_group", "labels", "assignees", "created_by", "project", "start_date", "target_date"],
|
||||
display_properties: true,
|
||||
display_filters: {
|
||||
order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "priority"],
|
||||
type: [null, "active", "backlog"],
|
||||
},
|
||||
extra_options: {
|
||||
|
||||
@ -102,8 +102,8 @@ export const ProfileLayoutSidebar = observer(() => {
|
||||
} ${sidebarCollapsed ? "left-0" : "-left-full md:left-0"}`}
|
||||
>
|
||||
<div className="h-full w-full flex flex-col gap-y-4">
|
||||
<Link href={`/${redirectWorkspaceSlug}`}>
|
||||
<a
|
||||
<Link
|
||||
href={`/${redirectWorkspaceSlug}`}
|
||||
className={`flex-shrink-0 flex items-center gap-2 px-4 pt-4 truncate ${
|
||||
sidebarCollapsed ? "justify-center" : ""
|
||||
}`}
|
||||
@ -114,7 +114,6 @@ export const ProfileLayoutSidebar = observer(() => {
|
||||
{!sidebarCollapsed && (
|
||||
<h4 className="text-custom-text-200 font-semibold text-lg truncate">Profile settings</h4>
|
||||
)}
|
||||
</a>
|
||||
</Link>
|
||||
<div className="flex-shrink-0 flex flex-col overflow-x-hidden px-4">
|
||||
{!sidebarCollapsed && (
|
||||
@ -125,8 +124,7 @@ export const ProfileLayoutSidebar = observer(() => {
|
||||
if (link.key === "change-password" && currentUser?.is_password_autoset) return null;
|
||||
|
||||
return (
|
||||
<Link key={link.key} href={link.href}>
|
||||
<a className="block w-full">
|
||||
<Link key={link.key} href={link.href} className="block w-full">
|
||||
<Tooltip tooltipContent={link.label} position="right" className="ml-2" disabled={!sidebarCollapsed}>
|
||||
<div
|
||||
className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium outline-none ${
|
||||
@ -139,7 +137,6 @@ export const ProfileLayoutSidebar = observer(() => {
|
||||
{!sidebarCollapsed && link.label}
|
||||
</div>
|
||||
</Tooltip>
|
||||
</a>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
@ -189,8 +186,7 @@ export const ProfileLayoutSidebar = observer(() => {
|
||||
)}
|
||||
<div className="mt-1.5">
|
||||
{WORKSPACE_ACTION_LINKS.map((link) => (
|
||||
<Link key={link.key} href={link.href}>
|
||||
<a className="block w-full">
|
||||
<Link className="block w-full" key={link.key} href={link.href}>
|
||||
<Tooltip tooltipContent={link.label} position="right" className="ml-2" disabled={!sidebarCollapsed}>
|
||||
<div
|
||||
className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium outline-none text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80 ${
|
||||
@ -201,7 +197,6 @@ export const ProfileLayoutSidebar = observer(() => {
|
||||
{!sidebarCollapsed && link.label}
|
||||
</div>
|
||||
</Tooltip>
|
||||
</a>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@ -1,41 +1,21 @@
|
||||
import { ReactElement } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import useSWR from "swr";
|
||||
// mobx store
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
// layouts
|
||||
import { AppLayout } from "layouts/app-layout";
|
||||
// components
|
||||
import { GlobalViewsHeader } from "components/workspace";
|
||||
import { GlobalViewLayoutRoot } from "components/issues";
|
||||
import { AllIssueLayoutRoot } from "components/issues";
|
||||
import { GlobalIssuesHeader } from "components/headers";
|
||||
// types
|
||||
import { NextPageWithLayout } from "types/app";
|
||||
|
||||
const GlobalViewIssuesPage: NextPageWithLayout = () => {
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, globalViewId } = router.query;
|
||||
|
||||
const {
|
||||
globalViews: { fetchGlobalViewDetails },
|
||||
} = useMobxStore();
|
||||
|
||||
useSWR(
|
||||
workspaceSlug && globalViewId ? `GLOBAL_VIEW_DETAILS_${globalViewId.toString()}` : null,
|
||||
workspaceSlug && globalViewId
|
||||
? () => fetchGlobalViewDetails(workspaceSlug.toString(), globalViewId.toString())
|
||||
: null
|
||||
);
|
||||
|
||||
return (
|
||||
const GlobalViewIssuesPage: NextPageWithLayout = () => (
|
||||
<div className="h-full overflow-hidden bg-custom-background-100">
|
||||
<div className="h-full w-full flex flex-col border-b border-custom-border-300">
|
||||
<GlobalViewsHeader />
|
||||
<GlobalViewLayoutRoot />
|
||||
<AllIssueLayoutRoot />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
GlobalViewIssuesPage.getLayout = function getLayout(page: ReactElement) {
|
||||
return <AppLayout header={<GlobalIssuesHeader activeLayout="spreadsheet" />}>{page}</AppLayout>;
|
||||
|
||||
@ -2,7 +2,7 @@ import { ReactElement } from "react";
|
||||
// components
|
||||
import { GlobalViewsHeader } from "components/workspace";
|
||||
import { GlobalIssuesHeader } from "components/headers";
|
||||
import { GlobalViewLayoutRoot } from "components/issues";
|
||||
import { AllIssueLayoutRoot } from "components/issues/issue-layouts";
|
||||
// layouts
|
||||
import { AppLayout } from "layouts/app-layout";
|
||||
// types
|
||||
@ -12,7 +12,7 @@ const GlobalViewAllIssuesPage: NextPageWithLayout = () => (
|
||||
<div className="h-full overflow-hidden bg-custom-background-100">
|
||||
<div className="h-full w-full flex flex-col border-b border-custom-border-300">
|
||||
<GlobalViewsHeader />
|
||||
<GlobalViewLayoutRoot type="all-issues" />
|
||||
<AllIssueLayoutRoot type="all-issues" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -2,7 +2,7 @@ import { ReactElement } from "react";
|
||||
// components
|
||||
import { GlobalViewsHeader } from "components/workspace";
|
||||
import { GlobalIssuesHeader } from "components/headers";
|
||||
import { GlobalViewLayoutRoot } from "components/issues";
|
||||
import { AllIssueLayoutRoot } from "components/issues/issue-layouts";
|
||||
// layouts
|
||||
import { AppLayout } from "layouts/app-layout";
|
||||
// types
|
||||
@ -12,7 +12,7 @@ const GlobalViewAssignedIssuesPage: NextPageWithLayout = () => (
|
||||
<div className="h-full overflow-hidden bg-custom-background-100">
|
||||
<div className="h-full w-full flex flex-col border-b border-custom-border-300">
|
||||
<GlobalViewsHeader />
|
||||
<GlobalViewLayoutRoot type="assigned" />
|
||||
<AllIssueLayoutRoot type="assigned" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -2,7 +2,7 @@ import { ReactElement } from "react";
|
||||
// components
|
||||
import { GlobalViewsHeader } from "components/workspace";
|
||||
import { GlobalIssuesHeader } from "components/headers";
|
||||
import { GlobalViewLayoutRoot } from "components/issues";
|
||||
import { AllIssueLayoutRoot } from "components/issues";
|
||||
// layouts
|
||||
import { AppLayout } from "layouts/app-layout";
|
||||
// types
|
||||
@ -12,7 +12,7 @@ const GlobalViewCreatedIssuesPage: NextPageWithLayout = () => (
|
||||
<div className="h-full overflow-hidden bg-custom-background-100">
|
||||
<div className="h-full w-full flex flex-col border-b border-custom-border-300">
|
||||
<GlobalViewsHeader />
|
||||
<GlobalViewLayoutRoot type="created" />
|
||||
<AllIssueLayoutRoot type="created" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -4,7 +4,7 @@ import { AppLayout } from "layouts/app-layout";
|
||||
// components
|
||||
import { GlobalViewsHeader } from "components/workspace";
|
||||
import { GlobalIssuesHeader } from "components/headers";
|
||||
import { GlobalViewLayoutRoot } from "components/issues";
|
||||
import { AllIssueLayoutRoot } from "components/issues";
|
||||
// types
|
||||
import { NextPageWithLayout } from "types/app";
|
||||
|
||||
@ -12,7 +12,7 @@ const GlobalViewSubscribedIssuesPage: NextPageWithLayout = () => (
|
||||
<div className="h-full overflow-hidden bg-custom-background-100">
|
||||
<div className="h-full w-full flex flex-col border-b border-custom-border-300">
|
||||
<GlobalViewsHeader />
|
||||
<GlobalViewLayoutRoot type="subscribed" />
|
||||
<AllIssueLayoutRoot type="subscribed" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -142,8 +142,13 @@ const HomePage: NextPageWithLayout = () => {
|
||||
</Button>
|
||||
<p className="text-xs text-onboarding-text-200">
|
||||
When you click the button above, you agree with our{" "}
|
||||
<Link href="https://plane.so/terms-and-conditions" target="_blank" rel="noopener noreferrer">
|
||||
<a className="font-semibold underline">terms and conditions of service.</a>
|
||||
<Link
|
||||
href="https://plane.so/terms-and-conditions"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="font-semibold underline"
|
||||
>
|
||||
terms and conditions of service.
|
||||
</Link>
|
||||
</p>
|
||||
</form>
|
||||
|
||||
@ -17,6 +17,7 @@ import {
|
||||
import { IWorkspaceView } from "types/workspace-views";
|
||||
// store
|
||||
import { IIssueGroupWithSubGroupsStructure, IIssueGroupedStructure, IIssueUnGroupedStructure } from "store/issue";
|
||||
import { IIssueResponse } from "store/issues/types";
|
||||
|
||||
export class WorkspaceService extends APIService {
|
||||
constructor() {
|
||||
@ -245,10 +246,7 @@ export class WorkspaceService extends APIService {
|
||||
});
|
||||
}
|
||||
|
||||
async getViewIssues(
|
||||
workspaceSlug: string,
|
||||
params: any
|
||||
): Promise<IIssueGroupedStructure | IIssueGroupWithSubGroupsStructure | IIssueUnGroupedStructure> {
|
||||
async getViewIssues(workspaceSlug: string, params: any): Promise<IIssueResponse> {
|
||||
return this.get(`/api/workspaces/${workspaceSlug}/issues/`, {
|
||||
params,
|
||||
})
|
||||
|
||||
@ -118,7 +118,7 @@ export class GlobalViewIssuesStore implements IGlobalViewIssuesStore {
|
||||
this.loader = false;
|
||||
this.viewIssues = {
|
||||
...this.viewIssues,
|
||||
[viewId]: response as IIssue[],
|
||||
[viewId]: Object.values(response) as IIssue[],
|
||||
};
|
||||
});
|
||||
|
||||
@ -163,7 +163,7 @@ export class GlobalViewIssuesStore implements IGlobalViewIssuesStore {
|
||||
this.loader = false;
|
||||
this.viewIssues = {
|
||||
...this.viewIssues,
|
||||
[type]: response as IIssue[],
|
||||
[type]: Object.values(response) as IIssue[],
|
||||
};
|
||||
});
|
||||
|
||||
|
||||
@ -3,48 +3,55 @@ import { action, makeObservable, observable, runInAction } from "mobx";
|
||||
import { RootStore } from "store/root";
|
||||
import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueParams } from "types";
|
||||
import { EFilterType } from "store/issues/types";
|
||||
import { handleIssueQueryParamsByLayout } from "helpers/issue.helper";
|
||||
import { IssueFilterBaseStore } from "../project-issues/base-issue-filter.store";
|
||||
import { isEmpty } from "lodash";
|
||||
// helpers
|
||||
import { handleIssueQueryParamsByLayout } from "helpers/issue.helper";
|
||||
// services
|
||||
import { WorkspaceService } from "services/workspace.service";
|
||||
|
||||
interface IProjectIssuesFiltersOptions {
|
||||
interface IIssuesDisplayOptions {
|
||||
filters: IIssueFilterOptions;
|
||||
displayFilters: IIssueDisplayFilterOptions;
|
||||
}
|
||||
|
||||
interface IProjectIssuesDisplayOptions {
|
||||
type TIssueViewTypes = "all-issues" | "assigned" | "created" | "subscribed" | string;
|
||||
|
||||
interface IIssueViewOptions {
|
||||
"all-issues": IIssuesDisplayOptions;
|
||||
assigned: IIssuesDisplayOptions;
|
||||
created: IIssuesDisplayOptions;
|
||||
subscribed: IIssuesDisplayOptions;
|
||||
[view_id: string]: IIssuesDisplayOptions;
|
||||
}
|
||||
|
||||
interface IWorkspaceProperties {
|
||||
filters: IIssueFilterOptions;
|
||||
displayFilters: IIssueDisplayFilterOptions;
|
||||
displayProperties: IIssueDisplayProperties;
|
||||
}
|
||||
|
||||
interface IProjectIssuesFilters {
|
||||
filters: IIssueFilterOptions | undefined;
|
||||
displayFilters: IIssueDisplayFilterOptions | undefined;
|
||||
displayProperties: IIssueDisplayProperties | undefined;
|
||||
}
|
||||
|
||||
export interface IGlobalIssuesFilterStore {
|
||||
// observables
|
||||
projectIssueFilters: { [workspaceId: string]: IProjectIssuesDisplayOptions } | undefined;
|
||||
currentView: TIssueViewTypes;
|
||||
workspaceProperties: { [workspaceId: string]: IWorkspaceProperties } | undefined;
|
||||
workspaceViewFilters: { [workspaceId: string]: IIssueViewOptions } | undefined;
|
||||
// computed
|
||||
issueFilters: IProjectIssuesFilters | undefined;
|
||||
issueFilters: IWorkspaceProperties | undefined;
|
||||
appliedFilters: TIssueParams[] | undefined;
|
||||
// helpers
|
||||
issueDisplayFilters: (workspaceId: string) => IProjectIssuesDisplayOptions | undefined;
|
||||
issueDisplayFilters: (workspaceId: string) => IIssuesDisplayOptions | undefined;
|
||||
// actions
|
||||
fetchDisplayFilters: (workspaceSlug: string) => Promise<IProjectIssuesFiltersOptions>;
|
||||
updateDisplayFilters: (
|
||||
setCurrentView: (view: TIssueViewTypes) => void;
|
||||
fetchWorkspaceProperties: (workspaceSlug: string) => Promise<IWorkspaceProperties>;
|
||||
updateWorkspaceProperties: (
|
||||
workspaceSlug: string,
|
||||
type: EFilterType,
|
||||
filters: IIssueFilterOptions | IIssueDisplayFilterOptions
|
||||
) => Promise<IProjectIssuesFiltersOptions>;
|
||||
fetchDisplayProperties: (workspaceSlug: string) => Promise<IIssueDisplayProperties>;
|
||||
updateDisplayProperties: (
|
||||
workspaceSlug: string,
|
||||
properties: IIssueDisplayProperties
|
||||
) => Promise<IIssueDisplayProperties>;
|
||||
fetchFilters: (workspaceSlug: string) => Promise<void>;
|
||||
filters: IIssueFilterOptions | IIssueDisplayFilterOptions | IIssueDisplayProperties
|
||||
) => Promise<IWorkspaceProperties>;
|
||||
|
||||
fetchWorkspaceViewFilters: (workspaceId: string, view: TIssueViewTypes) => Promise<IIssueFilterOptions>;
|
||||
updateWorkspaceViewFilters: (workspaceId: string, filters: IIssueFilterOptions) => Promise<IIssueFilterOptions>;
|
||||
|
||||
fetchFilters: (workspaceSlug: string, view: TIssueViewTypes) => Promise<void>;
|
||||
updateFilters: (
|
||||
workspaceSlug: string,
|
||||
filterType: EFilterType,
|
||||
@ -54,89 +61,160 @@ export interface IGlobalIssuesFilterStore {
|
||||
|
||||
export class GlobalIssuesFilterStore extends IssueFilterBaseStore implements IGlobalIssuesFilterStore {
|
||||
// observables
|
||||
projectIssueFilters: { [projectId: string]: IProjectIssuesDisplayOptions } | undefined = undefined;
|
||||
currentView: TIssueViewTypes = "all-issues";
|
||||
workspaceProperties: { [workspaceId: string]: IWorkspaceProperties } | undefined = undefined;
|
||||
workspaceViewFilters: { [workspaceId: string]: IIssueViewOptions } | undefined = undefined;
|
||||
// root store
|
||||
rootStore;
|
||||
// service
|
||||
workspaceService;
|
||||
|
||||
constructor(_rootStore: RootStore) {
|
||||
super(_rootStore);
|
||||
|
||||
makeObservable(this, {
|
||||
// observables
|
||||
projectIssueFilters: observable.ref,
|
||||
currentView: observable.ref,
|
||||
workspaceProperties: observable.ref,
|
||||
workspaceViewFilters: observable.ref,
|
||||
// computed
|
||||
// actions
|
||||
fetchDisplayFilters: action,
|
||||
updateDisplayFilters: action,
|
||||
fetchDisplayProperties: action,
|
||||
updateDisplayProperties: action,
|
||||
setCurrentView: action,
|
||||
fetchWorkspaceProperties: action,
|
||||
updateWorkspaceProperties: action,
|
||||
fetchWorkspaceViewFilters: action,
|
||||
updateWorkspaceViewFilters: action,
|
||||
});
|
||||
// root store
|
||||
this.rootStore = _rootStore;
|
||||
// services
|
||||
this.workspaceService = new WorkspaceService();
|
||||
}
|
||||
|
||||
// computed
|
||||
|
||||
// helpers
|
||||
issueDisplayFilters = (workspaceId: string) => {
|
||||
if (!workspaceId) return undefined;
|
||||
return this.projectIssueFilters?.[workspaceId] || undefined;
|
||||
if (!workspaceId || !this.currentView) return undefined;
|
||||
const filters: IWorkspaceProperties = {
|
||||
filters: this.workspaceProperties?.[workspaceId]?.filters || {},
|
||||
displayFilters: this.workspaceProperties?.[workspaceId]?.displayFilters || {},
|
||||
displayProperties: this.workspaceProperties?.[workspaceId]?.displayProperties || {},
|
||||
};
|
||||
|
||||
if (!["all-issues", "assigned", "created", "subscribed"].includes(this.currentView)) {
|
||||
const viewFilters = this.workspaceViewFilters?.[workspaceId]?.[this.currentView];
|
||||
if (viewFilters) {
|
||||
filters.filters = { ...filters.filters, ...viewFilters?.filters };
|
||||
}
|
||||
}
|
||||
|
||||
return filters;
|
||||
};
|
||||
|
||||
// actions
|
||||
fetchDisplayFilters = async (workspaceSlug: string) => {
|
||||
setCurrentView = (view: TIssueViewTypes) => {
|
||||
this.currentView = view;
|
||||
};
|
||||
|
||||
fetchWorkspaceProperties = async (workspaceSlug: string) => {
|
||||
try {
|
||||
const filters: IIssueFilterOptions = {
|
||||
assignees: null,
|
||||
mentions: null,
|
||||
let _filters: IWorkspaceProperties = {} as IWorkspaceProperties;
|
||||
|
||||
const filtersResponse = await this.workspaceService.workspaceMemberMe(workspaceSlug);
|
||||
_filters = {
|
||||
filters: { ...filtersResponse?.view_props?.filters } || null,
|
||||
displayFilters: { ...filtersResponse?.view_props?.display_filters } || null,
|
||||
displayProperties: { ...filtersResponse?.view_props?.display_properties } || null,
|
||||
};
|
||||
|
||||
let filters: IIssueFilterOptions = {
|
||||
assignees: _filters?.filters?.assignees || null,
|
||||
mentions: _filters?.filters?.mentions || null,
|
||||
created_by: _filters?.filters?.created_by || null,
|
||||
labels: _filters?.filters?.labels || null,
|
||||
priority: _filters?.filters?.priority || null,
|
||||
project: _filters?.filters?.project || null,
|
||||
start_date: _filters?.filters?.start_date || null,
|
||||
state: _filters?.filters?.state || null,
|
||||
state_group: _filters?.filters?.state_group || null,
|
||||
subscriber: _filters?.filters?.subscriber || null,
|
||||
target_date: _filters?.filters?.target_date || null,
|
||||
};
|
||||
|
||||
const currentUserId = this.rootStore.user.currentUser?.id;
|
||||
if (currentUserId && this.currentView === "assigned")
|
||||
filters = {
|
||||
...filters,
|
||||
assignees: [currentUserId],
|
||||
created_by: null,
|
||||
labels: null,
|
||||
priority: null,
|
||||
project: null,
|
||||
start_date: null,
|
||||
state: null,
|
||||
state_group: null,
|
||||
subscriber: null,
|
||||
target_date: null,
|
||||
};
|
||||
|
||||
if (currentUserId && this.currentView === "created")
|
||||
filters = {
|
||||
...filters,
|
||||
assignees: null,
|
||||
created_by: [currentUserId],
|
||||
subscriber: null,
|
||||
};
|
||||
if (currentUserId && this.currentView === "subscribed")
|
||||
filters = {
|
||||
...filters,
|
||||
assignees: null,
|
||||
created_by: null,
|
||||
subscriber: [currentUserId],
|
||||
};
|
||||
|
||||
const displayFilters: IIssueDisplayFilterOptions = {
|
||||
calendar: {
|
||||
show_weekends: false,
|
||||
layout: "month",
|
||||
show_weekends: _filters?.displayFilters?.calendar?.show_weekends || false,
|
||||
layout: _filters?.displayFilters?.calendar?.layout || "month",
|
||||
},
|
||||
group_by: "state_detail.group",
|
||||
sub_group_by: null,
|
||||
layout: "list",
|
||||
order_by: "-created_at",
|
||||
show_empty_groups: false,
|
||||
start_target_date: false,
|
||||
sub_issue: false,
|
||||
type: null,
|
||||
group_by: _filters?.displayFilters?.group_by || null,
|
||||
sub_group_by: _filters?.displayFilters?.sub_group_by || null,
|
||||
layout: _filters?.displayFilters?.layout || "list",
|
||||
order_by: _filters?.displayFilters?.order_by || "-created_at",
|
||||
show_empty_groups: _filters?.displayFilters?.show_empty_groups || false,
|
||||
start_target_date: _filters?.displayFilters?.start_target_date || false,
|
||||
sub_issue: _filters?.displayFilters?.sub_issue || false,
|
||||
type: _filters?.displayFilters?.type || null,
|
||||
};
|
||||
|
||||
const issueFilters: IProjectIssuesFiltersOptions = {
|
||||
const displayProperties: IIssueDisplayProperties = {
|
||||
assignee: _filters?.displayProperties?.assignee || false,
|
||||
start_date: _filters?.displayProperties?.start_date || false,
|
||||
due_date: _filters?.displayProperties?.due_date || false,
|
||||
labels: _filters?.displayProperties?.labels || false,
|
||||
key: _filters?.displayProperties?.key || false,
|
||||
priority: _filters?.displayProperties?.priority || false,
|
||||
state: _filters?.displayProperties?.state || false,
|
||||
sub_issue_count: _filters?.displayProperties?.sub_issue_count || false,
|
||||
link: _filters?.displayProperties?.link || false,
|
||||
attachment_count: _filters?.displayProperties?.attachment_count || false,
|
||||
estimate: _filters?.displayProperties?.estimate || false,
|
||||
created_on: _filters?.displayProperties?.created_on || false,
|
||||
updated_on: _filters?.displayProperties?.updated_on || false,
|
||||
};
|
||||
|
||||
const issueFilters: IWorkspaceProperties = {
|
||||
filters: filters,
|
||||
displayFilters: displayFilters,
|
||||
displayProperties: displayProperties,
|
||||
};
|
||||
|
||||
let _projectIssueFilters = this.projectIssueFilters;
|
||||
if (!_projectIssueFilters) _projectIssueFilters = {};
|
||||
if (!_projectIssueFilters[workspaceSlug]) {
|
||||
_projectIssueFilters[workspaceSlug] = { displayProperties: {} } as IProjectIssuesDisplayOptions;
|
||||
}
|
||||
if (
|
||||
isEmpty(_projectIssueFilters[workspaceSlug].filters) ||
|
||||
isEmpty(_projectIssueFilters[workspaceSlug].displayFilters)
|
||||
) {
|
||||
_projectIssueFilters[workspaceSlug] = {
|
||||
..._projectIssueFilters[workspaceSlug],
|
||||
...issueFilters,
|
||||
let _workspaceProperties = { ...this.workspaceProperties };
|
||||
if (!_workspaceProperties) _workspaceProperties = {};
|
||||
if (!_workspaceProperties[workspaceSlug])
|
||||
_workspaceProperties[workspaceSlug] = {
|
||||
filters: {},
|
||||
displayFilters: {},
|
||||
displayProperties: {},
|
||||
};
|
||||
}
|
||||
_workspaceProperties[workspaceSlug] = { ...issueFilters };
|
||||
|
||||
runInAction(() => {
|
||||
this.projectIssueFilters = _projectIssueFilters;
|
||||
this.workspaceProperties = _workspaceProperties;
|
||||
});
|
||||
|
||||
return issueFilters;
|
||||
@ -145,114 +223,126 @@ export class GlobalIssuesFilterStore extends IssueFilterBaseStore implements IGl
|
||||
}
|
||||
};
|
||||
|
||||
updateDisplayFilters = async (
|
||||
updateWorkspaceProperties = async (
|
||||
workspaceSlug: string,
|
||||
type: EFilterType,
|
||||
filters: IIssueFilterOptions | IIssueDisplayFilterOptions
|
||||
filters: IIssueFilterOptions | IIssueDisplayFilterOptions | IIssueDisplayProperties
|
||||
) => {
|
||||
try {
|
||||
let _projectIssueFilters = { ...this.projectIssueFilters };
|
||||
if (!_projectIssueFilters) _projectIssueFilters = {};
|
||||
if (!_projectIssueFilters[workspaceSlug])
|
||||
_projectIssueFilters[workspaceSlug] = { filters: {}, displayFilters: {}, displayProperties: {} };
|
||||
let _workspaceProperties = { ...this.workspaceProperties };
|
||||
if (!_workspaceProperties) _workspaceProperties = {};
|
||||
if (!_workspaceProperties[workspaceSlug])
|
||||
_workspaceProperties[workspaceSlug] = { filters: {}, displayFilters: {}, displayProperties: {} };
|
||||
|
||||
const _filters = {
|
||||
filters: { ..._projectIssueFilters[workspaceSlug].filters },
|
||||
displayFilters: { ..._projectIssueFilters[workspaceSlug].displayFilters },
|
||||
filters: { ..._workspaceProperties[workspaceSlug].filters },
|
||||
displayFilters: { ..._workspaceProperties[workspaceSlug].displayFilters },
|
||||
displayProperties: { ..._workspaceProperties[workspaceSlug].displayProperties },
|
||||
};
|
||||
|
||||
if (type === EFilterType.FILTERS) _filters.filters = { ..._filters.filters, ...filters };
|
||||
else if (type === EFilterType.DISPLAY_FILTERS)
|
||||
_filters.displayFilters = { ..._filters.displayFilters, ...filters };
|
||||
switch (type) {
|
||||
case EFilterType.FILTERS:
|
||||
_filters.filters = { ..._filters.filters, ...(filters as IIssueFilterOptions) };
|
||||
break;
|
||||
case EFilterType.DISPLAY_FILTERS:
|
||||
_filters.displayFilters = { ..._filters.displayFilters, ...(filters as IIssueDisplayFilterOptions) };
|
||||
break;
|
||||
case EFilterType.DISPLAY_PROPERTIES:
|
||||
_filters.displayProperties = { ..._filters.displayProperties, ...(filters as IIssueDisplayProperties) };
|
||||
break;
|
||||
}
|
||||
|
||||
// set sub_group_by to null if group_by is set to null
|
||||
if (_filters.displayFilters.group_by === null) _filters.displayFilters.sub_group_by = null;
|
||||
|
||||
// set sub_group_by to null if layout is switched to kanban group_by and sub_group_by are same
|
||||
if (
|
||||
_filters.displayFilters.layout === "kanban" &&
|
||||
_filters.displayFilters.group_by === _filters.displayFilters.sub_group_by
|
||||
)
|
||||
_filters.displayFilters.sub_group_by = null;
|
||||
|
||||
// set group_by to state if layout is switched to kanban and group_by is null
|
||||
if (_filters.displayFilters.layout === "kanban" && _filters.displayFilters.group_by === null)
|
||||
_filters.displayFilters.group_by = "state";
|
||||
|
||||
_projectIssueFilters[workspaceSlug] = {
|
||||
filters: _filters.filters,
|
||||
displayFilters: _filters.displayFilters,
|
||||
displayProperties: _projectIssueFilters[workspaceSlug].displayProperties,
|
||||
_workspaceProperties[workspaceSlug] = {
|
||||
..._workspaceProperties[workspaceSlug],
|
||||
filters: _filters?.filters,
|
||||
displayFilters: _filters?.displayFilters,
|
||||
displayProperties: _filters?.displayProperties,
|
||||
};
|
||||
|
||||
runInAction(() => {
|
||||
this.projectIssueFilters = _projectIssueFilters;
|
||||
this.workspaceProperties = _workspaceProperties;
|
||||
});
|
||||
|
||||
await this.workspaceService.updateWorkspaceView(workspaceSlug, {
|
||||
view_props: {
|
||||
filters: _filters.filters,
|
||||
display_filters: _filters.displayFilters,
|
||||
display_properties: _filters.displayProperties,
|
||||
},
|
||||
});
|
||||
|
||||
return _filters;
|
||||
} catch (error) {
|
||||
this.fetchDisplayFilters(workspaceSlug);
|
||||
this.fetchWorkspaceProperties(workspaceSlug);
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
fetchDisplayProperties = async (workspaceSlug: string) => {
|
||||
fetchWorkspaceViewFilters = async (workspaceSlug: string, view: TIssueViewTypes) => {
|
||||
try {
|
||||
const displayProperties: IIssueDisplayProperties = {
|
||||
assignee: true,
|
||||
start_date: true,
|
||||
due_date: true,
|
||||
labels: false,
|
||||
key: false,
|
||||
priority: true,
|
||||
state: false,
|
||||
sub_issue_count: true,
|
||||
link: true,
|
||||
attachment_count: false,
|
||||
estimate: false,
|
||||
created_on: false,
|
||||
updated_on: false,
|
||||
let _workspaceViewFilters = { ...this.workspaceViewFilters };
|
||||
if (!_workspaceViewFilters) _workspaceViewFilters = {};
|
||||
if (!_workspaceViewFilters[workspaceSlug]) _workspaceViewFilters[workspaceSlug] = {} as IIssueViewOptions;
|
||||
if (!_workspaceViewFilters[workspaceSlug][view]) _workspaceViewFilters[workspaceSlug][view] = { filters: {} };
|
||||
|
||||
const filtersResponse = await this.workspaceService.getViewDetails(workspaceSlug, view);
|
||||
|
||||
const _filters: IIssueFilterOptions = {
|
||||
assignees: filtersResponse?.query_data?.filters?.assignees || null,
|
||||
mentions: filtersResponse?.query_data?.filters?.mentions || null,
|
||||
created_by: filtersResponse?.query_data?.filters?.created_by || null,
|
||||
labels: filtersResponse?.query_data?.filters?.labels || null,
|
||||
priority: filtersResponse?.query_data?.filters?.priority || null,
|
||||
project: filtersResponse?.query_data?.filters?.project || null,
|
||||
start_date: filtersResponse?.query_data?.filters?.start_date || null,
|
||||
state: filtersResponse?.query_data?.filters?.state || null,
|
||||
state_group: filtersResponse?.query_data?.filters?.state_group || null,
|
||||
subscriber: filtersResponse?.query_data?.filters?.subscriber || null,
|
||||
target_date: filtersResponse?.query_data?.filters?.target_date || null,
|
||||
};
|
||||
|
||||
let _projectIssueFilters = { ...this.projectIssueFilters };
|
||||
if (!_projectIssueFilters) _projectIssueFilters = {};
|
||||
if (!_projectIssueFilters[workspaceSlug]) {
|
||||
_projectIssueFilters[workspaceSlug] = { filters: {}, displayFilters: {} } as IProjectIssuesDisplayOptions;
|
||||
}
|
||||
if (isEmpty(_projectIssueFilters[workspaceSlug].displayProperties)) {
|
||||
_projectIssueFilters[workspaceSlug] = {
|
||||
..._projectIssueFilters[workspaceSlug],
|
||||
displayProperties: displayProperties,
|
||||
};
|
||||
}
|
||||
_workspaceViewFilters[workspaceSlug][view].filters = { ..._filters };
|
||||
|
||||
runInAction(() => {
|
||||
this.projectIssueFilters = _projectIssueFilters;
|
||||
this.workspaceViewFilters = _workspaceViewFilters;
|
||||
});
|
||||
|
||||
return displayProperties;
|
||||
return _filters;
|
||||
} catch (error) {
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
updateDisplayProperties = async (workspaceSlug: string, properties: IIssueDisplayProperties) => {
|
||||
updateWorkspaceViewFilters = async (workspaceSlug: string, filters: IIssueFilterOptions) => {
|
||||
try {
|
||||
let _issueFilters = { ...this.projectIssueFilters };
|
||||
if (!_issueFilters) _issueFilters = {};
|
||||
if (!_issueFilters[workspaceSlug])
|
||||
_issueFilters[workspaceSlug] = { filters: {}, displayFilters: {}, displayProperties: {} };
|
||||
let _workspaceViewFilters = { ...this.workspaceViewFilters };
|
||||
if (!_workspaceViewFilters) _workspaceViewFilters = {};
|
||||
if (!_workspaceViewFilters[workspaceSlug]) _workspaceViewFilters[workspaceSlug] = {} as IIssueViewOptions;
|
||||
if (!_workspaceViewFilters[workspaceSlug][this.currentView])
|
||||
_workspaceViewFilters[workspaceSlug][this.currentView] = { filters: {} };
|
||||
|
||||
const updatedDisplayProperties = { ..._issueFilters[workspaceSlug].displayProperties, ...properties };
|
||||
_issueFilters[workspaceSlug] = { ..._issueFilters[workspaceSlug], displayProperties: updatedDisplayProperties };
|
||||
const _filters = {
|
||||
filters: { ..._workspaceViewFilters[workspaceSlug][this.currentView].filters, ...filters },
|
||||
};
|
||||
|
||||
_workspaceViewFilters[workspaceSlug][this.currentView] = {
|
||||
..._workspaceViewFilters[workspaceSlug][this.currentView],
|
||||
filters: _filters?.filters,
|
||||
};
|
||||
|
||||
runInAction(() => {
|
||||
this.projectIssueFilters = _issueFilters;
|
||||
this.workspaceViewFilters = _workspaceViewFilters;
|
||||
});
|
||||
|
||||
return properties;
|
||||
await this.workspaceService.updateView(workspaceSlug, this.currentView, {
|
||||
query_data: {
|
||||
filters: _filters.filters,
|
||||
} as any,
|
||||
});
|
||||
|
||||
return _filters.filters;
|
||||
} catch (error) {
|
||||
this.fetchDisplayProperties(workspaceSlug);
|
||||
this.fetchWorkspaceViewFilters(workspaceSlug, this.currentView);
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
@ -262,10 +352,10 @@ export class GlobalIssuesFilterStore extends IssueFilterBaseStore implements IGl
|
||||
if (!workspaceSlug) return undefined;
|
||||
const displayFilters = this.issueDisplayFilters(workspaceSlug);
|
||||
|
||||
const _filters: IProjectIssuesFilters = {
|
||||
filters: displayFilters?.filters,
|
||||
displayFilters: displayFilters?.displayFilters,
|
||||
displayProperties: displayFilters?.displayProperties,
|
||||
const _filters: IWorkspaceProperties = {
|
||||
filters: displayFilters?.filters || {},
|
||||
displayFilters: displayFilters?.displayFilters || {},
|
||||
displayProperties: displayFilters?.displayProperties || {},
|
||||
};
|
||||
|
||||
return _filters;
|
||||
@ -277,6 +367,7 @@ export class GlobalIssuesFilterStore extends IssueFilterBaseStore implements IGl
|
||||
|
||||
let filteredRouteParams: any = {
|
||||
priority: userFilters?.filters?.priority || undefined,
|
||||
project: userFilters?.filters?.project || undefined,
|
||||
state_group: userFilters?.filters?.state_group || undefined,
|
||||
state: userFilters?.filters?.state || undefined,
|
||||
assignees: userFilters?.filters?.assignees || undefined,
|
||||
@ -286,24 +377,20 @@ export class GlobalIssuesFilterStore extends IssueFilterBaseStore implements IGl
|
||||
start_date: userFilters?.filters?.start_date || undefined,
|
||||
target_date: userFilters?.filters?.target_date || undefined,
|
||||
type: userFilters?.displayFilters?.type || undefined,
|
||||
sub_issue: userFilters?.displayFilters?.sub_issue || true,
|
||||
show_empty_groups: userFilters?.displayFilters?.show_empty_groups || true,
|
||||
start_target_date: userFilters?.displayFilters?.start_target_date || true,
|
||||
sub_issue: false,
|
||||
};
|
||||
|
||||
const filteredParams = handleIssueQueryParamsByLayout(userFilters?.displayFilters?.layout, "profile_issues");
|
||||
const filteredParams = handleIssueQueryParamsByLayout("spreadsheet", "my_issues");
|
||||
if (filteredParams) filteredRouteParams = this.computedFilter(filteredRouteParams, filteredParams);
|
||||
|
||||
if (userFilters?.displayFilters?.layout === "calendar") filteredRouteParams.group_by = "target_date";
|
||||
if (userFilters?.displayFilters?.layout === "gantt_chart") filteredRouteParams.start_target_date = true;
|
||||
|
||||
return filteredRouteParams;
|
||||
}
|
||||
|
||||
fetchFilters = async (workspaceSlug: string) => {
|
||||
fetchFilters = async (workspaceSlug: string, view: TIssueViewTypes) => {
|
||||
try {
|
||||
await this.fetchDisplayFilters(workspaceSlug);
|
||||
await this.fetchDisplayProperties(workspaceSlug);
|
||||
await this.fetchWorkspaceProperties(workspaceSlug);
|
||||
if (!["all-issues", "assigned", "created", "subscribed"].includes(view))
|
||||
await this.fetchWorkspaceViewFilters(workspaceSlug, view);
|
||||
return;
|
||||
} catch (error) {
|
||||
throw Error;
|
||||
@ -312,20 +399,21 @@ export class GlobalIssuesFilterStore extends IssueFilterBaseStore implements IGl
|
||||
|
||||
updateFilters = async (
|
||||
workspaceSlug: string,
|
||||
|
||||
filterType: EFilterType,
|
||||
filters: IIssueFilterOptions | IIssueDisplayFilterOptions | IIssueDisplayProperties
|
||||
) => {
|
||||
try {
|
||||
switch (filterType) {
|
||||
case EFilterType.FILTERS:
|
||||
await this.updateDisplayFilters(workspaceSlug, filterType, filters as IIssueFilterOptions);
|
||||
if (["all-issues", "assigned", "created", "subscribed"].includes(this.currentView))
|
||||
await this.updateWorkspaceProperties(workspaceSlug, filterType, filters as IIssueDisplayFilterOptions);
|
||||
else await this.updateWorkspaceViewFilters(workspaceSlug, filters as IIssueFilterOptions);
|
||||
break;
|
||||
case EFilterType.DISPLAY_FILTERS:
|
||||
await this.updateDisplayFilters(workspaceSlug, filterType, filters as IIssueDisplayFilterOptions);
|
||||
await this.updateWorkspaceProperties(workspaceSlug, filterType, filters as IIssueDisplayFilterOptions);
|
||||
break;
|
||||
case EFilterType.DISPLAY_PROPERTIES:
|
||||
await this.updateDisplayProperties(workspaceSlug, filters as IIssueDisplayProperties);
|
||||
await this.updateWorkspaceProperties(workspaceSlug, filterType, filters as IIssueDisplayProperties);
|
||||
break;
|
||||
}
|
||||
|
||||
|
||||
@ -2,60 +2,60 @@ import { action, observable, makeObservable, computed, runInAction, autorun } fr
|
||||
// base class
|
||||
import { IssueBaseStore } from "store/issues";
|
||||
// services
|
||||
import { UserService } from "services/user.service";
|
||||
import { WorkspaceService } from "services/workspace.service";
|
||||
import { IssueService } from "services/issue";
|
||||
// types
|
||||
import { IIssueResponse, TLoader, IGroupedIssues, ISubGroupedIssues, TUnGroupedIssues, ViewFlags } from "../types";
|
||||
import { IIssue } from "types/issues";
|
||||
import { IIssueResponse, TLoader, TUnGroupedIssues, ViewFlags } from "../types";
|
||||
import { RootStore } from "store/root";
|
||||
import { IIssue } from "types";
|
||||
|
||||
interface IProfileIssueTabTypes {
|
||||
assigned: IIssueResponse;
|
||||
created: IIssueResponse;
|
||||
subscribed: IIssueResponse;
|
||||
}
|
||||
import isEmpty from "lodash/isEmpty";
|
||||
|
||||
export interface IGlobalIssuesStore {
|
||||
// observable
|
||||
loader: TLoader;
|
||||
issues: { [user_id: string]: IProfileIssueTabTypes } | undefined;
|
||||
currentUserId: string | null;
|
||||
currentUserIssueTab: "assigned" | "created" | "subscribed" | null;
|
||||
issues: { [workspace_view: string]: IIssueResponse } | undefined;
|
||||
// computed
|
||||
getIssues: IIssueResponse | undefined;
|
||||
getIssuesIds: IGroupedIssues | ISubGroupedIssues | TUnGroupedIssues | undefined;
|
||||
getIssuesIds: TUnGroupedIssues | undefined;
|
||||
// actions
|
||||
fetchIssues: (
|
||||
fetchIssues: (workspaceSlug: string, workspaceViewId: string, loadType: TLoader) => Promise<IIssueResponse>;
|
||||
createIssue: (
|
||||
workspaceSlug: string,
|
||||
userId: string,
|
||||
loadType: TLoader,
|
||||
type: "assigned" | "created" | "subscribed"
|
||||
) => Promise<IIssueResponse>;
|
||||
createIssue: (workspaceSlug: string, userId: string, data: Partial<IIssue>) => Promise<IIssue | undefined>;
|
||||
projectId: string,
|
||||
data: Partial<IIssue>,
|
||||
workspaceViewId?: string | undefined
|
||||
) => Promise<IIssue | undefined>;
|
||||
updateIssue: (
|
||||
workspaceSlug: string,
|
||||
userId: string,
|
||||
projectId: string,
|
||||
issueId: string,
|
||||
data: Partial<IIssue>
|
||||
data: Partial<IIssue>,
|
||||
workspaceViewId?: string | undefined
|
||||
) => Promise<IIssue | undefined>;
|
||||
removeIssue: (
|
||||
workspaceSlug: string,
|
||||
userId: string,
|
||||
projectId: string,
|
||||
issueId: string
|
||||
issueId: string,
|
||||
workspaceViewId?: string | undefined
|
||||
) => Promise<IIssue | undefined>;
|
||||
quickAddIssue: (workspaceSlug: string, userId: string, data: IIssue) => Promise<IIssue | undefined>;
|
||||
|
||||
viewFlags: ViewFlags;
|
||||
}
|
||||
|
||||
export class GlobalIssuesStore extends IssueBaseStore implements IGlobalIssuesStore {
|
||||
loader: TLoader = "init-loader";
|
||||
issues: { [user_id: string]: IProfileIssueTabTypes } | undefined = undefined;
|
||||
currentUserId: string | null = null;
|
||||
currentUserIssueTab: "assigned" | "created" | "subscribed" | null = null;
|
||||
issues: { [workspace_view: string]: IIssueResponse } | undefined = undefined;
|
||||
// root store
|
||||
rootStore;
|
||||
// service
|
||||
userService;
|
||||
workspaceService;
|
||||
issueService;
|
||||
//viewData
|
||||
viewFlags = {
|
||||
enableQuickAdd: true,
|
||||
enableIssueCreation: true,
|
||||
enableInlineEditing: true,
|
||||
};
|
||||
|
||||
constructor(_rootStore: RootStore) {
|
||||
super(_rootStore);
|
||||
@ -64,146 +64,91 @@ export class GlobalIssuesStore extends IssueBaseStore implements IGlobalIssuesSt
|
||||
// observable
|
||||
loader: observable.ref,
|
||||
issues: observable.ref,
|
||||
currentUserId: observable.ref,
|
||||
currentUserIssueTab: observable.ref,
|
||||
// computed
|
||||
getIssues: computed,
|
||||
getIssuesIds: computed,
|
||||
viewFlags: computed,
|
||||
// action
|
||||
fetchIssues: action,
|
||||
createIssue: action,
|
||||
updateIssue: action,
|
||||
removeIssue: action,
|
||||
quickAddIssue: action,
|
||||
});
|
||||
|
||||
this.rootStore = _rootStore;
|
||||
this.userService = new UserService();
|
||||
this.workspaceService = new WorkspaceService();
|
||||
this.issueService = new IssueService();
|
||||
|
||||
autorun(() => {
|
||||
const workspaceSlug = this.rootStore.workspace.workspaceSlug;
|
||||
if (!workspaceSlug || !this.currentUserId || !this.currentUserIssueTab) return;
|
||||
const currentView = this.rootStore.workspaceGlobalIssuesFilter?.currentView;
|
||||
if (!workspaceSlug || currentView === "") return;
|
||||
|
||||
const userFilters = this.rootStore?.workspaceProfileIssuesFilter?.issueFilters?.filters;
|
||||
if (userFilters) this.fetchIssues(workspaceSlug, this.currentUserId, "mutation", this.currentUserIssueTab);
|
||||
const userFilters = this.rootStore?.workspaceGlobalIssuesFilter?.issueFilters?.filters;
|
||||
|
||||
if (!isEmpty(userFilters)) this.fetchIssues(workspaceSlug, currentView, "mutation");
|
||||
});
|
||||
}
|
||||
|
||||
get getIssues() {
|
||||
if (!this.currentUserId || !this.currentUserIssueTab || !this.issues || !this.issues[this.currentUserId])
|
||||
return undefined;
|
||||
const currentView = this.rootStore.workspaceGlobalIssuesFilter?.currentView;
|
||||
if (currentView === "" || !this.issues || !this.issues[currentView]) return undefined;
|
||||
|
||||
return this.issues[this.currentUserId][this.currentUserIssueTab];
|
||||
return this.issues[currentView];
|
||||
}
|
||||
|
||||
get getIssuesIds() {
|
||||
const currentUserId = this.currentUserId;
|
||||
const displayFilters = this.rootStore?.workspaceProfileIssuesFilter?.issueFilters?.displayFilters;
|
||||
const currentView = this.rootStore.workspaceGlobalIssuesFilter?.currentView;
|
||||
const displayFilters = this.rootStore?.workspaceGlobalIssuesFilter?.issueFilters?.displayFilters;
|
||||
if (!displayFilters) return undefined;
|
||||
|
||||
const groupBy = displayFilters?.group_by;
|
||||
const orderBy = displayFilters?.order_by;
|
||||
const layout = displayFilters?.layout;
|
||||
|
||||
if (!currentUserId || !this.currentUserIssueTab || !this.issues || !this.issues[currentUserId]) return undefined;
|
||||
if (currentView === "" || !this.issues || !this.issues[currentView]) return undefined;
|
||||
|
||||
let issues: IIssueResponse | IGroupedIssues | ISubGroupedIssues | TUnGroupedIssues | undefined = undefined;
|
||||
let issues: IIssueResponse | TUnGroupedIssues | undefined = undefined;
|
||||
|
||||
if (layout === "list" && orderBy) {
|
||||
if (groupBy) issues = this.groupedIssues(groupBy, orderBy, this.issues[currentUserId][this.currentUserIssueTab]);
|
||||
else issues = this.unGroupedIssues(orderBy, this.issues[currentUserId][this.currentUserIssueTab]);
|
||||
}
|
||||
issues = this.unGroupedIssues(orderBy ?? "-created_at", this.issues[currentView]);
|
||||
|
||||
return issues;
|
||||
}
|
||||
|
||||
get viewFlags() {
|
||||
if (this.currentUserIssueTab === "subscribed") {
|
||||
return {
|
||||
enableQuickAdd: false,
|
||||
enableIssueCreation: false,
|
||||
enableInlineEditing: false,
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
enableQuickAdd: false,
|
||||
enableIssueCreation: true,
|
||||
enableInlineEditing: true,
|
||||
};
|
||||
}
|
||||
|
||||
fetchIssues = async (
|
||||
workspaceSlug: string,
|
||||
userId: string,
|
||||
loadType: TLoader = "init-loader",
|
||||
type: "assigned" | "created" | "subscribed"
|
||||
) => {
|
||||
fetchIssues = async (workspaceSlug: string, workspaceViewId: string, loadType: TLoader = "init-loader") => {
|
||||
try {
|
||||
this.loader = loadType;
|
||||
this.currentUserId = userId;
|
||||
if (type) this.currentUserIssueTab = type;
|
||||
|
||||
let params: any = this.rootStore?.workspaceProfileIssuesFilter?.appliedFilters;
|
||||
params = {
|
||||
...params,
|
||||
assignees: undefined,
|
||||
created_by: undefined,
|
||||
subscriber: undefined,
|
||||
};
|
||||
if (this.currentUserIssueTab === "assigned")
|
||||
params = params ? { ...params, assignees: userId } : { assignees: userId };
|
||||
else if (this.currentUserIssueTab === "created")
|
||||
params = params ? { ...params, created_by: userId } : { created_by: userId };
|
||||
else if (this.currentUserIssueTab === "subscribed")
|
||||
params = params ? { ...params, subscriber: userId } : { subscriber: userId };
|
||||
const params = this.rootStore?.workspaceGlobalIssuesFilter?.appliedFilters;
|
||||
const response = await this.workspaceService.getViewIssues(workspaceSlug, params);
|
||||
|
||||
const response = await this.userService.getUserProfileIssues(workspaceSlug, userId, params);
|
||||
|
||||
if (!this.currentUserIssueTab) return;
|
||||
|
||||
const _issues: any = {
|
||||
...this.issues,
|
||||
[userId]: {
|
||||
...this.issues?.[userId],
|
||||
...{ [this.currentUserIssueTab]: response },
|
||||
},
|
||||
};
|
||||
const _issues = { ...this.issues, [workspaceViewId]: { ...response } };
|
||||
|
||||
runInAction(() => {
|
||||
this.issues = _issues;
|
||||
this.loader = undefined;
|
||||
});
|
||||
|
||||
return _issues;
|
||||
return response;
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
this.loader = undefined;
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
createIssue = async (workspaceSlug: string, userId: string, data: Partial<IIssue>) => {
|
||||
createIssue = async (
|
||||
workspaceSlug: string,
|
||||
projectId: string,
|
||||
data: Partial<IIssue>,
|
||||
workspaceViewId: string | undefined = undefined
|
||||
) => {
|
||||
if (!workspaceViewId) return;
|
||||
|
||||
try {
|
||||
const projectId = data.project;
|
||||
const moduleId = data.module_id;
|
||||
const cycleId = data.cycle_id;
|
||||
|
||||
if (!projectId) return;
|
||||
|
||||
let response = {} as IIssue;
|
||||
response = await this.rootStore.projectIssues.createIssue(workspaceSlug, projectId, data);
|
||||
|
||||
// if (moduleId)
|
||||
// response = await this.rootStore.moduleIssues.addIssueToModule(workspaceSlug, projectId, moduleId, response);
|
||||
|
||||
// if (cycleId)
|
||||
// response = await this.rootStore.cycleIssues.addIssueToCycle(workspaceSlug, projectId, cycleId, response);
|
||||
const response = await this.issueService.createIssue(workspaceSlug, projectId, data);
|
||||
|
||||
let _issues = this.issues;
|
||||
if (!_issues) _issues = {};
|
||||
if (!_issues[userId]) _issues[userId] = { assigned: {}, created: {}, subscribed: {} };
|
||||
_issues[userId] = { ..._issues[userId], ...{ [response.id]: response } };
|
||||
if (!_issues[workspaceViewId]) _issues[workspaceViewId] = {};
|
||||
_issues[workspaceViewId] = { ..._issues[workspaceViewId], ...{ [response.id]: response } };
|
||||
|
||||
runInAction(() => {
|
||||
this.issues = _issues;
|
||||
@ -211,116 +156,62 @@ export class GlobalIssuesStore extends IssueBaseStore implements IGlobalIssuesSt
|
||||
|
||||
return response;
|
||||
} catch (error) {
|
||||
if (this.currentUserIssueTab) this.fetchIssues(workspaceSlug, userId, "mutation", this.currentUserIssueTab);
|
||||
this.fetchIssues(workspaceSlug, workspaceViewId, "mutation");
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
updateIssue = async (workspaceSlug: string, userId: string, issueId: string, data: Partial<IIssue>) => {
|
||||
try {
|
||||
const projectId = data.project;
|
||||
const moduleId = data.module_id;
|
||||
const cycleId = data.cycle_id;
|
||||
updateIssue = async (
|
||||
workspaceSlug: string,
|
||||
projectId: string,
|
||||
issueId: string,
|
||||
data: Partial<IIssue>,
|
||||
workspaceViewId: string | undefined = undefined
|
||||
) => {
|
||||
if (!workspaceViewId) return;
|
||||
|
||||
if (!projectId || !this.currentUserIssueTab) return;
|
||||
|
||||
let _issues = { ...this.issues };
|
||||
if (!_issues) _issues = {};
|
||||
if (!_issues[userId]) _issues[userId] = { assigned: {}, created: {}, subscribed: {} };
|
||||
_issues[projectId][this.currentUserIssueTab][userId] = {
|
||||
..._issues[projectId][this.currentUserIssueTab][userId],
|
||||
...data,
|
||||
};
|
||||
|
||||
runInAction(() => {
|
||||
this.issues = _issues;
|
||||
});
|
||||
|
||||
let response = data as IIssue | undefined;
|
||||
response = await this.rootStore.projectIssues.updateIssue(
|
||||
workspaceSlug,
|
||||
projectId,
|
||||
data.id as keyof IIssue,
|
||||
data
|
||||
);
|
||||
|
||||
if (moduleId)
|
||||
response = await this.rootStore.moduleIssues.updateIssue(
|
||||
workspaceSlug,
|
||||
projectId,
|
||||
response.id as keyof IIssue,
|
||||
response,
|
||||
moduleId
|
||||
);
|
||||
|
||||
if (cycleId)
|
||||
response = await this.rootStore.cycleIssues.updateIssue(
|
||||
workspaceSlug,
|
||||
projectId,
|
||||
data.id as keyof IIssue,
|
||||
data,
|
||||
cycleId
|
||||
);
|
||||
|
||||
return response;
|
||||
} catch (error) {
|
||||
if (this.currentUserIssueTab) this.fetchIssues(workspaceSlug, userId, "mutation", this.currentUserIssueTab);
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
removeIssue = async (workspaceSlug: string, userId: string, projectId: string, issueId: string) => {
|
||||
try {
|
||||
let _issues = { ...this.issues };
|
||||
if (!_issues) _issues = {};
|
||||
if (!_issues[userId]) _issues[userId] = { assigned: {}, created: {}, subscribed: {} };
|
||||
|
||||
if (this.currentUserIssueTab) delete _issues?.[userId]?.[this.currentUserIssueTab]?.[issueId];
|
||||
if (!_issues[workspaceViewId]) _issues[workspaceViewId] = {};
|
||||
_issues[workspaceViewId][issueId] = { ..._issues[workspaceViewId][issueId], ...data };
|
||||
|
||||
runInAction(() => {
|
||||
this.issues = _issues;
|
||||
});
|
||||
|
||||
const response = await this.rootStore.projectIssues.removeIssue(workspaceSlug, projectId, issueId);
|
||||
const response = await this.issueService.patchIssue(workspaceSlug, projectId, issueId, data);
|
||||
|
||||
return response;
|
||||
} catch (error) {
|
||||
if (this.currentUserIssueTab) this.fetchIssues(workspaceSlug, userId, "mutation", this.currentUserIssueTab);
|
||||
this.fetchIssues(workspaceSlug, workspaceViewId, "mutation");
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
quickAddIssue = async (workspaceSlug: string, userId: string, data: IIssue) => {
|
||||
removeIssue = async (
|
||||
workspaceSlug: string,
|
||||
projectId: string,
|
||||
issueId: string,
|
||||
workspaceViewId: string | undefined = undefined
|
||||
) => {
|
||||
if (!workspaceViewId) return;
|
||||
|
||||
try {
|
||||
const projectId = data.project;
|
||||
|
||||
let _issues = { ...this.issues };
|
||||
if (!_issues) _issues = {};
|
||||
if (!_issues[userId]) _issues[userId] = { assigned: {}, created: {}, subscribed: {} };
|
||||
_issues[userId] = { ..._issues[userId], ...{ [data.id as keyof IIssue]: data } };
|
||||
if (!_issues[workspaceViewId]) _issues[workspaceViewId] = {};
|
||||
delete _issues?.[workspaceViewId]?.[issueId];
|
||||
|
||||
runInAction(() => {
|
||||
this.issues = _issues;
|
||||
});
|
||||
|
||||
const response = await this.rootStore.projectIssues.createIssue(workspaceSlug, projectId, data);
|
||||
|
||||
if (this.issues && this.currentUserIssueTab) {
|
||||
delete this.issues[userId][this.currentUserIssueTab][data.id as keyof IIssue];
|
||||
|
||||
let _issues = { ...this.issues };
|
||||
if (!_issues) _issues = {};
|
||||
if (!_issues[userId]) _issues[userId] = { assigned: {}, created: {}, subscribed: {} };
|
||||
_issues[userId] = { ..._issues[userId], ...{ [response.id as keyof IIssue]: response } };
|
||||
|
||||
runInAction(() => {
|
||||
this.issues = _issues;
|
||||
});
|
||||
}
|
||||
const response = await this.issueService.deleteIssue(workspaceSlug, projectId, issueId);
|
||||
|
||||
return response;
|
||||
} catch (error) {
|
||||
if (this.currentUserIssueTab) this.fetchIssues(workspaceSlug, userId, "mutation", this.currentUserIssueTab);
|
||||
this.fetchIssues(workspaceSlug, workspaceViewId, "mutation");
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
@ -125,6 +125,7 @@ export class ProfileIssuesFilterStore extends IssueFilterBaseStore implements IP
|
||||
if (!_projectIssueFilters[workspaceSlug]) {
|
||||
_projectIssueFilters[workspaceSlug] = { displayProperties: {} } as IProjectIssuesDisplayOptions;
|
||||
}
|
||||
|
||||
if (
|
||||
isEmpty(_projectIssueFilters[workspaceSlug].filters) ||
|
||||
isEmpty(_projectIssueFilters[workspaceSlug].displayFilters)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user