mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
chore: workspace view mutation fix ,bug fixes and code refactor (#2301)
* chore: workspace view mutation fix ,bug fixes and code refactor * chore: update workspace view toast alert added
This commit is contained in:
parent
459999e8c9
commit
2a770e4a95
@ -83,88 +83,89 @@ export const IssueColumn: React.FC<Props> = ({
|
||||
|
||||
return (
|
||||
<div className="group flex items-center w-[28rem] text-sm h-11 sticky top-0 bg-custom-background-100 truncate border-b border-r border-custom-border-100">
|
||||
<div
|
||||
className="flex gap-1.5 px-4 pr-0 py-2.5 items-center w-24"
|
||||
style={issue.parent && nestingLevel !== 0 ? { paddingLeft } : {}}
|
||||
>
|
||||
<div className="relative flex items-center cursor-pointer text-xs text-center hover:text-custom-text-100">
|
||||
{properties.key && (
|
||||
<span className="flex items-center justify-center font-medium opacity-100 group-hover:opacity-0">
|
||||
{properties.key && (
|
||||
<div
|
||||
className="flex gap-1.5 px-4 pr-0 py-2.5 items-center min-w-[96px]"
|
||||
style={issue.parent && nestingLevel !== 0 ? { paddingLeft } : {}}
|
||||
>
|
||||
<div className="relative flex items-center cursor-pointer text-xs text-center hover:text-custom-text-100">
|
||||
<span className="flex items-center justify-center font-medium opacity-100 group-hover:opacity-0 ">
|
||||
{issue.project_detail?.identifier}-{issue.sequence_id}
|
||||
</span>
|
||||
)}
|
||||
{!isNotAllowed && !disableUserActions && (
|
||||
<div className="absolute top-0 left-2.5 opacity-0 group-hover:opacity-100">
|
||||
<Popover2
|
||||
isOpen={isOpen}
|
||||
canEscapeKeyClose
|
||||
onInteraction={(nextOpenState) => setIsOpen(nextOpenState)}
|
||||
content={
|
||||
<div
|
||||
className={`flex flex-col gap-1.5 overflow-y-scroll whitespace-nowrap rounded-md border p-1 text-xs shadow-lg focus:outline-none max-h-44 min-w-full border-custom-border-100 bg-custom-background-90`}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
className="hover:text-custom-text-200 w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
|
||||
onClick={() => {
|
||||
handleEditIssue(issue);
|
||||
setIsOpen(false);
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center justify-start gap-2">
|
||||
<PencilIcon className="h-4 w-4" />
|
||||
<span>Edit issue</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="hover:text-custom-text-200 w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
|
||||
onClick={() => {
|
||||
handleDeleteIssue(issue);
|
||||
setIsOpen(false);
|
||||
}}
|
||||
{!isNotAllowed && !disableUserActions && (
|
||||
<div className="absolute top-0 left-2.5 opacity-0 group-hover:opacity-100">
|
||||
<Popover2
|
||||
isOpen={isOpen}
|
||||
canEscapeKeyClose
|
||||
onInteraction={(nextOpenState) => setIsOpen(nextOpenState)}
|
||||
content={
|
||||
<div
|
||||
className={`flex flex-col gap-1.5 overflow-y-scroll whitespace-nowrap rounded-md border p-1 text-xs shadow-lg focus:outline-none max-h-44 min-w-full border-custom-border-100 bg-custom-background-90`}
|
||||
>
|
||||
<div className="flex items-center justify-start gap-2">
|
||||
<TrashIcon className="h-4 w-4" />
|
||||
<span>Delete issue</span>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="hover:text-custom-text-200 w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
|
||||
onClick={() => {
|
||||
handleEditIssue(issue);
|
||||
setIsOpen(false);
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center justify-start gap-2">
|
||||
<PencilIcon className="h-4 w-4" />
|
||||
<span>Edit issue</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="hover:text-custom-text-200 w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
|
||||
onClick={() => {
|
||||
handleCopyText();
|
||||
setIsOpen(false);
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center justify-start gap-2">
|
||||
<LinkIcon className="h-4 w-4" />
|
||||
<span>Copy issue link</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
placement="bottom-start"
|
||||
<button
|
||||
type="button"
|
||||
className="hover:text-custom-text-200 w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
|
||||
onClick={() => {
|
||||
handleDeleteIssue(issue);
|
||||
setIsOpen(false);
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center justify-start gap-2">
|
||||
<TrashIcon className="h-4 w-4" />
|
||||
<span>Delete issue</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="hover:text-custom-text-200 w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
|
||||
onClick={() => {
|
||||
handleCopyText();
|
||||
setIsOpen(false);
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center justify-start gap-2">
|
||||
<LinkIcon className="h-4 w-4" />
|
||||
<span>Copy issue link</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
placement="bottom-start"
|
||||
>
|
||||
<EllipsisHorizontalIcon className="h-5 w-5 text-custom-text-200" />
|
||||
</Popover2>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{issue.sub_issues_count > 0 && (
|
||||
<div className="h-6 w-6 flex justify-center items-center">
|
||||
<button
|
||||
className="h-5 w-5 hover:bg-custom-background-90 hover:text-custom-text-100 rounded-sm cursor-pointer"
|
||||
onClick={() => handleToggleExpand(issue.id)}
|
||||
>
|
||||
<EllipsisHorizontalIcon className="h-5 w-5 text-custom-text-200" />
|
||||
</Popover2>
|
||||
<Icon iconName="chevron_right" className={`${expanded ? "rotate-90" : ""}`} />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{issue.sub_issues_count > 0 && (
|
||||
<div className="h-6 w-6 flex justify-center items-center">
|
||||
<button
|
||||
className="h-5 w-5 hover:bg-custom-background-90 hover:text-custom-text-100 rounded-sm cursor-pointer"
|
||||
onClick={() => handleToggleExpand(issue.id)}
|
||||
>
|
||||
<Icon iconName="chevron_right" className={`${expanded ? "rotate-90" : ""}`} />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<span className="flex items-center px-4 py-2.5 h-full truncate flex-grow">
|
||||
<button
|
||||
type="button"
|
||||
|
@ -82,7 +82,7 @@ export const SpreadsheetView: React.FC<Props> = ({
|
||||
const containerRef = useRef<HTMLDivElement | null>(null);
|
||||
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId, cycleId, moduleId, viewId, workspaceViewId } = router.query;
|
||||
const { workspaceSlug, projectId, cycleId, moduleId, viewId, globalViewId } = router.query;
|
||||
|
||||
const type = cycleId ? "cycle" : moduleId ? "module" : "issue";
|
||||
|
||||
@ -129,7 +129,17 @@ export const SpreadsheetView: React.FC<Props> = ({
|
||||
router.pathname.includes(path.path)
|
||||
);
|
||||
|
||||
const { params: workspaceViewParams, handleFilters } = useWorkspaceView();
|
||||
const {
|
||||
params: workspaceViewParams,
|
||||
filters: workspaceViewFilters,
|
||||
handleFilters,
|
||||
} = useWorkspaceView();
|
||||
|
||||
const workspaceViewProperties = workspaceViewFilters.display_properties;
|
||||
|
||||
const isWorkspaceView = globalViewId || currentWorkspaceIssuePath;
|
||||
|
||||
const currentViewProperties = isWorkspaceView ? workspaceViewProperties : properties;
|
||||
|
||||
const { params, displayFilters, setDisplayFilters } = useSpreadsheetIssuesView();
|
||||
|
||||
@ -143,8 +153,8 @@ export const SpreadsheetView: React.FC<Props> = ({
|
||||
? MODULE_ISSUES_WITH_PARAMS(moduleId.toString(), params)
|
||||
: viewId
|
||||
? VIEW_ISSUES(viewId.toString(), params)
|
||||
: workspaceViewId
|
||||
? WORKSPACE_VIEW_ISSUES(workspaceSlug.toString(), workspaceViewParams)
|
||||
: globalViewId
|
||||
? WORKSPACE_VIEW_ISSUES(globalViewId.toString(), workspaceViewParams)
|
||||
: currentWorkspaceIssuePath
|
||||
? WORKSPACE_VIEW_ISSUES(workspaceSlug.toString(), currentWorkspaceIssuePath?.params)
|
||||
: PROJECT_ISSUES_LIST_WITH_PARAMS(issue.project_detail.id, params);
|
||||
@ -213,7 +223,7 @@ export const SpreadsheetView: React.FC<Props> = ({
|
||||
cycleId,
|
||||
moduleId,
|
||||
viewId,
|
||||
workspaceViewId,
|
||||
globalViewId,
|
||||
workspaceViewParams,
|
||||
currentWorkspaceIssuePath,
|
||||
params,
|
||||
@ -224,7 +234,7 @@ export const SpreadsheetView: React.FC<Props> = ({
|
||||
const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
|
||||
|
||||
const handleOrderBy = (order: TIssueOrderByOptions, itemKey: string) => {
|
||||
if (!workspaceViewId || !currentWorkspaceIssuePath)
|
||||
if (!globalViewId || !currentWorkspaceIssuePath)
|
||||
handleFilters("display_filters", { order_by: order });
|
||||
else setDisplayFilters({ order_by: order });
|
||||
setSelectedMenuItem(`${order}_${itemKey}`);
|
||||
@ -442,7 +452,7 @@ export const SpreadsheetView: React.FC<Props> = ({
|
||||
projectId={issue.project_detail.id}
|
||||
partialUpdateIssue={partialUpdateIssue}
|
||||
expandedIssues={expandedIssues}
|
||||
properties={properties}
|
||||
properties={currentViewProperties}
|
||||
user={user}
|
||||
isNotAllowed={isNotAllowed}
|
||||
/>
|
||||
@ -492,9 +502,11 @@ export const SpreadsheetView: React.FC<Props> = ({
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center text-sm font-medium z-[2] h-11 w-full sticky top-0 bg-custom-background-90 border border-l-0 border-custom-border-100">
|
||||
<span className="flex items-center px-4 py-2.5 h-full w-24 flex-shrink-0">
|
||||
ID
|
||||
</span>
|
||||
{currentViewProperties.key && (
|
||||
<span className="flex items-center px-4 py-2.5 h-full w-24 flex-shrink-0">
|
||||
ID
|
||||
</span>
|
||||
)}
|
||||
<span className="flex items-center px-4 py-2.5 h-full w-full flex-grow">
|
||||
Issue
|
||||
</span>
|
||||
@ -508,7 +520,7 @@ export const SpreadsheetView: React.FC<Props> = ({
|
||||
expandedIssues={expandedIssues}
|
||||
setExpandedIssues={setExpandedIssues}
|
||||
setCurrentProjectId={setCurrentProjectId}
|
||||
properties={properties}
|
||||
properties={currentViewProperties}
|
||||
handleIssueAction={handleIssueAction}
|
||||
disableUserActions={disableUserActions}
|
||||
userAuth={userAuth}
|
||||
@ -516,69 +528,79 @@ export const SpreadsheetView: React.FC<Props> = ({
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{renderColumn(
|
||||
"State",
|
||||
"state",
|
||||
SpreadsheetStateColumn,
|
||||
"state__name",
|
||||
"-state__name"
|
||||
)}
|
||||
{renderColumn(
|
||||
"Priority",
|
||||
"priority",
|
||||
SpreadsheetPriorityColumn,
|
||||
"priority",
|
||||
"-priority"
|
||||
)}
|
||||
{renderColumn(
|
||||
"Assignees",
|
||||
"assignee",
|
||||
SpreadsheetAssigneeColumn,
|
||||
"assignees__first_name",
|
||||
"-assignees__first_name"
|
||||
)}
|
||||
{renderColumn(
|
||||
"Label",
|
||||
"labels",
|
||||
SpreadsheetLabelColumn,
|
||||
"labels__name",
|
||||
"-labels__name"
|
||||
)}
|
||||
{renderColumn(
|
||||
"Start Date",
|
||||
"start_date",
|
||||
SpreadsheetStartDateColumn,
|
||||
"-start_date",
|
||||
"start_date"
|
||||
)}
|
||||
{renderColumn(
|
||||
"Due Date",
|
||||
"due_date",
|
||||
SpreadsheetDueDateColumn,
|
||||
"-target_date",
|
||||
"target_date"
|
||||
)}
|
||||
{renderColumn(
|
||||
"Estimate",
|
||||
"estimate",
|
||||
SpreadsheetEstimateColumn,
|
||||
"estimate_point",
|
||||
"-estimate_point"
|
||||
)}
|
||||
{renderColumn(
|
||||
"Created On",
|
||||
"created_on",
|
||||
SpreadsheetCreatedOnColumn,
|
||||
"-created_at",
|
||||
"created_at"
|
||||
)}
|
||||
{renderColumn(
|
||||
"Updated On",
|
||||
"updated_on",
|
||||
SpreadsheetUpdatedOnColumn,
|
||||
"-updated_at",
|
||||
"updated_at"
|
||||
)}
|
||||
{currentViewProperties.state &&
|
||||
renderColumn(
|
||||
"State",
|
||||
"state",
|
||||
SpreadsheetStateColumn,
|
||||
"state__name",
|
||||
"-state__name"
|
||||
)}
|
||||
|
||||
{currentViewProperties.priority &&
|
||||
renderColumn(
|
||||
"Priority",
|
||||
"priority",
|
||||
SpreadsheetPriorityColumn,
|
||||
"priority",
|
||||
"-priority"
|
||||
)}
|
||||
{currentViewProperties.assignee &&
|
||||
renderColumn(
|
||||
"Assignees",
|
||||
"assignee",
|
||||
SpreadsheetAssigneeColumn,
|
||||
"assignees__first_name",
|
||||
"-assignees__first_name"
|
||||
)}
|
||||
{currentViewProperties.labels &&
|
||||
renderColumn(
|
||||
"Label",
|
||||
"labels",
|
||||
SpreadsheetLabelColumn,
|
||||
"labels__name",
|
||||
"-labels__name"
|
||||
)}
|
||||
{currentViewProperties.start_date &&
|
||||
renderColumn(
|
||||
"Start Date",
|
||||
"start_date",
|
||||
SpreadsheetStartDateColumn,
|
||||
"-start_date",
|
||||
"start_date"
|
||||
)}
|
||||
{currentViewProperties.due_date &&
|
||||
renderColumn(
|
||||
"Due Date",
|
||||
"due_date",
|
||||
SpreadsheetDueDateColumn,
|
||||
"-target_date",
|
||||
"target_date"
|
||||
)}
|
||||
{currentViewProperties.estimate &&
|
||||
renderColumn(
|
||||
"Estimate",
|
||||
"estimate",
|
||||
SpreadsheetEstimateColumn,
|
||||
"estimate_point",
|
||||
"-estimate_point"
|
||||
)}
|
||||
{currentViewProperties.created_on &&
|
||||
renderColumn(
|
||||
"Created On",
|
||||
"created_on",
|
||||
SpreadsheetCreatedOnColumn,
|
||||
"-created_at",
|
||||
"created_at"
|
||||
)}
|
||||
{currentViewProperties.updated_on &&
|
||||
renderColumn(
|
||||
"Updated On",
|
||||
"updated_on",
|
||||
SpreadsheetUpdatedOnColumn,
|
||||
"-updated_at",
|
||||
"updated_at"
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<div className="flex flex-col justify-center items-center h-full w-full">
|
||||
|
@ -30,7 +30,7 @@ const issueViewOptions: { type: TIssueViewOptions; Icon: any }[] = [
|
||||
|
||||
export const MyIssuesViewOptions: React.FC = () => {
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, workspaceViewId } = router.query;
|
||||
const { workspaceSlug, globalViewId } = router.query;
|
||||
|
||||
const { displayFilters, setDisplayFilters, filters, setFilters } = useMyIssuesFilters(
|
||||
workspaceSlug?.toString()
|
||||
@ -42,7 +42,7 @@ export const MyIssuesViewOptions: React.FC = () => {
|
||||
router.pathname.includes(pathname)
|
||||
);
|
||||
|
||||
const showFilters = isWorkspaceViewPath || workspaceViewId;
|
||||
const showFilters = isWorkspaceViewPath || globalViewId;
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-2">
|
||||
|
@ -13,6 +13,7 @@ import useProjects from "hooks/use-projects";
|
||||
import useUser from "hooks/use-user";
|
||||
import { useWorkspaceView } from "hooks/use-workspace-view";
|
||||
import useWorkspaceMembers from "hooks/use-workspace-members";
|
||||
import useToast from "hooks/use-toast";
|
||||
// components
|
||||
import { WorkspaceViewsNavigation } from "components/workspace/views/workpace-view-navigation";
|
||||
import { EmptyState, PrimaryButton } from "components/ui";
|
||||
@ -31,7 +32,9 @@ import { IIssue, IWorkspaceIssueFilterOptions } from "types";
|
||||
|
||||
export const WorkspaceViewIssues = () => {
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, viewId } = router.query;
|
||||
const { workspaceSlug, globalViewId } = router.query;
|
||||
|
||||
const { setToastAlert } = useToast();
|
||||
|
||||
const { memberRole } = useProjectMyMembership();
|
||||
const { user } = useUser();
|
||||
@ -111,7 +114,9 @@ export const WorkspaceViewIssues = () => {
|
||||
const nullFilters =
|
||||
filters.filters &&
|
||||
Object.keys(filters.filters).filter(
|
||||
(key) => filters.filters[key as keyof IWorkspaceIssueFilterOptions] === null
|
||||
(key) =>
|
||||
filters.filters[key as keyof IWorkspaceIssueFilterOptions] === null ||
|
||||
(filters.filters[key as keyof IWorkspaceIssueFilterOptions]?.length ?? 0) <= 0
|
||||
);
|
||||
|
||||
const areFiltersApplied =
|
||||
@ -189,16 +194,22 @@ export const WorkspaceViewIssues = () => {
|
||||
/>
|
||||
<PrimaryButton
|
||||
onClick={() => {
|
||||
if (viewId) handleFilters("filters", filters.filters, true);
|
||||
else
|
||||
if (globalViewId) {
|
||||
handleFilters("filters", filters.filters, true);
|
||||
setToastAlert({
|
||||
title: "View updated",
|
||||
message: "Your view has been updated",
|
||||
type: "success",
|
||||
});
|
||||
} else
|
||||
setCreateViewModal({
|
||||
query: filters.filters,
|
||||
});
|
||||
}}
|
||||
className="flex items-center gap-2 text-sm"
|
||||
>
|
||||
{!viewId && <PlusIcon className="h-4 w-4" />}
|
||||
{viewId ? "Update" : "Save"} view
|
||||
{!globalViewId && <PlusIcon className="h-4 w-4" />}
|
||||
{globalViewId ? "Update" : "Save"} view
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
{<div className="mt-3 border-t border-custom-border-200" />}
|
||||
|
@ -31,7 +31,7 @@ import { IIssue, IWorkspaceIssueFilterOptions } from "types";
|
||||
|
||||
export const WorkspaceAllIssue = () => {
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, viewId } = router.query;
|
||||
const { workspaceSlug, globalViewId } = router.query;
|
||||
|
||||
const [createViewModal, setCreateViewModal] = useState<any>(null);
|
||||
|
||||
@ -128,7 +128,9 @@ export const WorkspaceAllIssue = () => {
|
||||
const nullFilters =
|
||||
filters.filters &&
|
||||
Object.keys(filters.filters).filter(
|
||||
(key) => filters.filters[key as keyof IWorkspaceIssueFilterOptions] === null
|
||||
(key) =>
|
||||
filters.filters[key as keyof IWorkspaceIssueFilterOptions] === null ||
|
||||
(filters.filters[key as keyof IWorkspaceIssueFilterOptions]?.length ?? 0) <= 0
|
||||
);
|
||||
|
||||
const areFiltersApplied =
|
||||
@ -203,7 +205,7 @@ export const WorkspaceAllIssue = () => {
|
||||
/>
|
||||
<PrimaryButton
|
||||
onClick={() => {
|
||||
if (viewId) handleFilters("filters", filters.filters, true);
|
||||
if (globalViewId) handleFilters("filters", filters.filters, true);
|
||||
else
|
||||
setCreateViewModal({
|
||||
query: filters.filters,
|
||||
@ -211,8 +213,8 @@ export const WorkspaceAllIssue = () => {
|
||||
}}
|
||||
className="flex items-center gap-2 text-sm"
|
||||
>
|
||||
{!viewId && <PlusIcon className="h-4 w-4" />}
|
||||
{viewId ? "Update" : "Save"} view
|
||||
{!globalViewId && <PlusIcon className="h-4 w-4" />}
|
||||
{globalViewId ? "Update" : "Save"} view
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
{<div className="mt-3 border-t border-custom-border-200" />}
|
||||
|
@ -50,13 +50,6 @@ export const WorkspaceAssignedIssue = () => {
|
||||
sub_issue: false,
|
||||
};
|
||||
|
||||
// const { data: viewDetails, error } = useSWR(
|
||||
// workspaceSlug && workspaceViewId ? WORKSPACE_VIEW_DETAILS(workspaceViewId.toString()) : null,
|
||||
// workspaceSlug && workspaceViewId
|
||||
// ? () => workspaceService.getViewDetails(workspaceSlug.toString(), workspaceViewId.toString())
|
||||
// : null
|
||||
// );
|
||||
|
||||
const { data: viewIssues, mutate: mutateIssues } = useSWR(
|
||||
workspaceSlug ? WORKSPACE_VIEW_ISSUES(workspaceSlug.toString(), params) : null,
|
||||
workspaceSlug ? () => workspaceService.getViewIssues(workspaceSlug.toString(), params) : null
|
||||
|
@ -30,13 +30,13 @@ const issueViewOptions: { type: TIssueViewOptions; Icon: any }[] = [
|
||||
|
||||
export const WorkspaceIssuesViewOptions: React.FC = () => {
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, workspaceViewId } = router.query;
|
||||
const { workspaceSlug, globalViewId } = router.query;
|
||||
|
||||
const { filters, handleFilters } = useWorkspaceView();
|
||||
|
||||
const isWorkspaceViewPath = router.pathname.includes("workspace-views/all-issues");
|
||||
|
||||
const showFilters = isWorkspaceViewPath || workspaceViewId;
|
||||
const showFilters = isWorkspaceViewPath || globalViewId;
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-2">
|
||||
|
@ -91,7 +91,7 @@ export const SingleViewItem: React.FC<Props> = ({
|
||||
const viewRedirectionUrl =
|
||||
viewType === "project"
|
||||
? `/${workspaceSlug}/projects/${projectId}/views/${view.id}`
|
||||
: `/${workspaceSlug}/workspace-views/issues?viewId=${view.id}`;
|
||||
: `/${workspaceSlug}/workspace-views/issues?globalViewId=${view.id}`;
|
||||
|
||||
return (
|
||||
<div className="group hover:bg-custom-background-90 border-b border-custom-border-200">
|
||||
|
@ -17,7 +17,7 @@ type Props = {
|
||||
|
||||
export const WorkspaceViewsNavigation: React.FC<Props> = ({ handleAddView }) => {
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, viewId } = router.query;
|
||||
const { workspaceSlug, globalViewId } = router.query;
|
||||
|
||||
const { data: workspaceViews } = useSWR(
|
||||
workspaceSlug ? WORKSPACE_VIEWS_LIST(workspaceSlug.toString()) : null,
|
||||
@ -28,7 +28,7 @@ export const WorkspaceViewsNavigation: React.FC<Props> = ({ handleAddView }) =>
|
||||
React.useEffect(() => {
|
||||
const activeTabElement = document.getElementById("active-tab-global-view");
|
||||
if (activeTabElement) activeTabElement.scrollIntoView({ behavior: "smooth", inline: "center" });
|
||||
}, [viewId, workspaceViews]);
|
||||
}, [globalViewId, workspaceViews]);
|
||||
|
||||
const tabsList = [
|
||||
{
|
||||
@ -80,13 +80,13 @@ export const WorkspaceViewsNavigation: React.FC<Props> = ({ handleAddView }) =>
|
||||
workspaceViews?.map((view) => (
|
||||
<button
|
||||
className={`border-b-2 min-w-min p-3 text-sm font-medium outline-none whitespace-nowrap flex-shrink-0 ${
|
||||
view.id === viewId
|
||||
view.id === globalViewId
|
||||
? "border-custom-primary-100 text-custom-primary-100"
|
||||
: "border-transparent hover:border-custom-border-200 hover:text-custom-text-400"
|
||||
}`}
|
||||
id={view.id === viewId ? `active-tab-global-view` : ``}
|
||||
id={view.id === globalViewId ? `active-tab-global-view` : ``}
|
||||
onClick={() =>
|
||||
router.replace(`/${workspaceSlug}/workspace-views/issues?viewId=${view.id}`)
|
||||
router.replace(`/${workspaceSlug}/workspace-views/issues?globalViewId=${view.id}`)
|
||||
}
|
||||
>
|
||||
{view.name}
|
||||
|
@ -162,13 +162,11 @@ export const PROJECT_DRAFT_ISSUES_LIST_WITH_PARAMS = (projectId: string, params?
|
||||
|
||||
export const WORKSPACE_VIEWS_LIST = (workspaceSlug: string) =>
|
||||
`WORKSPACE_VIEWS_LIST_${workspaceSlug.toUpperCase()}`;
|
||||
export const WORKSPACE_VIEW_DETAILS = (workspaceViewId: string) =>
|
||||
`WORKSPACE_VIEW_DETAILS_${workspaceViewId.toUpperCase()}`;
|
||||
export const WORKSPACE_VIEW_ISSUES = (workspaceViewId: string, params: any) => {
|
||||
if (!params) return `WORKSPACE_VIEW_ISSUES_${workspaceViewId.toUpperCase()}`;
|
||||
return `WORKSPACE_VIEW_ISSUES_${workspaceViewId.toUpperCase()}_${paramsToKey(
|
||||
params
|
||||
).toUpperCase()}`;
|
||||
export const WORKSPACE_VIEW_DETAILS = (globalViewId: string) =>
|
||||
`WORKSPACE_VIEW_DETAILS_${globalViewId.toUpperCase()}`;
|
||||
export const WORKSPACE_VIEW_ISSUES = (globalViewId: string, params: any) => {
|
||||
if (!params) return `WORKSPACE_VIEW_ISSUES_${globalViewId.toUpperCase()}`;
|
||||
return `WORKSPACE_VIEW_ISSUES_${globalViewId.toUpperCase()}_${paramsToKey(params).toUpperCase()}`;
|
||||
};
|
||||
|
||||
export const PROJECT_ISSUES_DETAILS = (issueId: string) =>
|
||||
|
@ -67,19 +67,19 @@ export const initialState: IWorkspaceGlobalViewProps = {
|
||||
|
||||
const saveViewFilters = async (
|
||||
workspaceSlug: string,
|
||||
viewId: string,
|
||||
globalViewId: string,
|
||||
state: IWorkspaceGlobalViewProps
|
||||
) => {
|
||||
await workspaceService.updateView(workspaceSlug, viewId, {
|
||||
await workspaceService.updateView(workspaceSlug, globalViewId, {
|
||||
query_data: state,
|
||||
});
|
||||
};
|
||||
|
||||
export const WorkspaceViewProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, viewId } = router.query as {
|
||||
const { workspaceSlug, globalViewId } = router.query as {
|
||||
workspaceSlug: string;
|
||||
viewId: string;
|
||||
globalViewId: string;
|
||||
};
|
||||
|
||||
const [filters, setFilters] = useState<IWorkspaceGlobalViewProps>(initialState);
|
||||
@ -98,7 +98,7 @@ export const WorkspaceViewProvider: React.FC<{ children: React.ReactNode }> = ({
|
||||
};
|
||||
setFilters(() => updatedFilterPayload);
|
||||
|
||||
if (saveFiltersToServer) saveViewFilters(workspaceSlug, viewId, updatedFilterPayload);
|
||||
if (saveFiltersToServer) saveViewFilters(workspaceSlug, globalViewId, updatedFilterPayload);
|
||||
};
|
||||
|
||||
const computedFilter = (filters: any) => {
|
||||
@ -151,9 +151,9 @@ export const WorkspaceViewProvider: React.FC<{ children: React.ReactNode }> = ({
|
||||
};
|
||||
|
||||
const { data: view, isLoading: viewLoading } = useSWR(
|
||||
workspaceSlug && viewId ? WORKSPACE_VIEW_DETAILS(viewId.toString()) : null,
|
||||
workspaceSlug && viewId
|
||||
? () => workspaceService.getViewDetails(workspaceSlug.toString(), viewId.toString())
|
||||
workspaceSlug && globalViewId ? WORKSPACE_VIEW_DETAILS(globalViewId.toString()) : null,
|
||||
workspaceSlug && globalViewId
|
||||
? () => workspaceService.getViewDetails(workspaceSlug.toString(), globalViewId.toString())
|
||||
: null
|
||||
);
|
||||
|
||||
@ -162,10 +162,10 @@ export const WorkspaceViewProvider: React.FC<{ children: React.ReactNode }> = ({
|
||||
mutate: mutateViewIssues,
|
||||
isLoading: viewIssueLoading,
|
||||
} = useSWR(
|
||||
workspaceSlug && view && viewId && filters
|
||||
? WORKSPACE_VIEW_ISSUES(viewId.toString(), params)
|
||||
workspaceSlug && view && globalViewId && filters
|
||||
? WORKSPACE_VIEW_ISSUES(globalViewId.toString(), params)
|
||||
: null,
|
||||
workspaceSlug && view && viewId
|
||||
workspaceSlug && view && globalViewId
|
||||
? () =>
|
||||
workspaceService.getViewIssues(
|
||||
workspaceSlug.toString(),
|
||||
|
@ -18,7 +18,6 @@ const WorkspaceViewAllIssue = () => (
|
||||
}
|
||||
right={
|
||||
<div className="flex items-center gap-2">
|
||||
{/* <MyIssuesViewOptions /> */}
|
||||
<WorkspaceIssuesViewOptions />
|
||||
|
||||
<PrimaryButton
|
||||
|
2
web/types/view-props.d.ts
vendored
2
web/types/view-props.d.ts
vendored
@ -103,5 +103,5 @@ export interface IWorkspaceViewProps {
|
||||
export interface IWorkspaceGlobalViewProps {
|
||||
filters: IWorkspaceIssueFilterOptions;
|
||||
display_filters: IWorkspaceIssueDisplayFilterOptions | undefined;
|
||||
display_properties: Properties | undefined;
|
||||
display_properties: Properties;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user