chore: workspace view display filters and properties , code refactor (#2295)
* chore: spreadsheet view context * chore: spreadsheet context provider * chore: spreadsheet view context * chore: display filters and properties added in workspace view and code refactor * fix: build error fix * chore: set sub-issue display option to false for global views --------- Co-authored-by: gurusainath <gurusainath007@gmail.com>
This commit is contained in:
Anmol Singh Bhatia
GitHub
parent
4503810aeb
commit
a048e513b7
48 changed files with 3119 additions and 2369 deletions
221
web/components/issues/workspace-views/workpace-view-issues.tsx
Normal file
221
web/components/issues/workspace-views/workpace-view-issues.tsx
Normal file
|
|
@ -0,0 +1,221 @@
|
|||
import React, { useCallback, useState } from "react";
|
||||
|
||||
import useSWR from "swr";
|
||||
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
// context
|
||||
import { useProjectMyMembership } from "contexts/project-member.context";
|
||||
// service
|
||||
import projectIssuesServices from "services/issues.service";
|
||||
// hooks
|
||||
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";
|
||||
// components
|
||||
import { WorkspaceViewsNavigation } from "components/workspace/views/workpace-view-navigation";
|
||||
import { EmptyState, PrimaryButton } from "components/ui";
|
||||
import { SpreadsheetView, WorkspaceFiltersList } from "components/core";
|
||||
import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
|
||||
import { CreateUpdateWorkspaceViewModal } from "components/workspace/views/modal";
|
||||
// icon
|
||||
import { PlusIcon } from "components/icons";
|
||||
// image
|
||||
import emptyView from "public/empty-state/view.svg";
|
||||
// constants
|
||||
import { WORKSPACE_LABELS } from "constants/fetch-keys";
|
||||
import { STATE_GROUP } from "constants/project";
|
||||
// types
|
||||
import { IIssue, IWorkspaceIssueFilterOptions } from "types";
|
||||
|
||||
export const WorkspaceViewIssues = () => {
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, workspaceViewId } = router.query;
|
||||
|
||||
const { memberRole } = useProjectMyMembership();
|
||||
const { user } = useUser();
|
||||
const { isGuest, isViewer } = useWorkspaceMembers(
|
||||
workspaceSlug?.toString(),
|
||||
Boolean(workspaceSlug)
|
||||
);
|
||||
const { filters, viewIssues, mutateViewIssues, handleFilters } = useWorkspaceView();
|
||||
|
||||
const [createViewModal, setCreateViewModal] = useState<any>(null);
|
||||
|
||||
// create issue modal
|
||||
const [createIssueModal, setCreateIssueModal] = useState(false);
|
||||
const [preloadedData, setPreloadedData] = useState<
|
||||
(Partial<IIssue> & { actionType: "createIssue" | "edit" | "delete" }) | undefined
|
||||
>(undefined);
|
||||
|
||||
// update issue modal
|
||||
const [editIssueModal, setEditIssueModal] = useState(false);
|
||||
const [issueToEdit, setIssueToEdit] = useState<
|
||||
(IIssue & { actionType: "edit" | "delete" }) | undefined
|
||||
>(undefined);
|
||||
|
||||
// delete issue modal
|
||||
const [deleteIssueModal, setDeleteIssueModal] = useState(false);
|
||||
const [issueToDelete, setIssueToDelete] = useState<IIssue | null>(null);
|
||||
|
||||
const { projects: allProjects } = useProjects();
|
||||
const joinedProjects = allProjects?.filter((p) => p.is_member);
|
||||
|
||||
const { data: workspaceLabels } = useSWR(
|
||||
workspaceSlug ? WORKSPACE_LABELS(workspaceSlug.toString()) : null,
|
||||
workspaceSlug ? () => projectIssuesServices.getWorkspaceLabels(workspaceSlug.toString()) : null
|
||||
);
|
||||
|
||||
const { workspaceMembers } = useWorkspaceMembers(workspaceSlug?.toString() ?? "");
|
||||
|
||||
const makeIssueCopy = useCallback(
|
||||
(issue: IIssue) => {
|
||||
setCreateIssueModal(true);
|
||||
|
||||
setPreloadedData({ ...issue, name: `${issue.name} (Copy)`, actionType: "createIssue" });
|
||||
},
|
||||
[setCreateIssueModal, setPreloadedData]
|
||||
);
|
||||
|
||||
const handleEditIssue = useCallback(
|
||||
(issue: IIssue) => {
|
||||
setEditIssueModal(true);
|
||||
setIssueToEdit({
|
||||
...issue,
|
||||
actionType: "edit",
|
||||
cycle: issue.issue_cycle ? issue.issue_cycle.cycle : null,
|
||||
module: issue.issue_module ? issue.issue_module.module : null,
|
||||
});
|
||||
},
|
||||
[setEditIssueModal, setIssueToEdit]
|
||||
);
|
||||
|
||||
const handleDeleteIssue = useCallback(
|
||||
(issue: IIssue) => {
|
||||
setDeleteIssueModal(true);
|
||||
setIssueToDelete(issue);
|
||||
},
|
||||
[setDeleteIssueModal, setIssueToDelete]
|
||||
);
|
||||
|
||||
const handleIssueAction = useCallback(
|
||||
(issue: IIssue, action: "copy" | "edit" | "delete" | "updateDraft") => {
|
||||
if (action === "copy") makeIssueCopy(issue);
|
||||
else if (action === "edit") handleEditIssue(issue);
|
||||
else if (action === "delete") handleDeleteIssue(issue);
|
||||
},
|
||||
[makeIssueCopy, handleEditIssue, handleDeleteIssue]
|
||||
);
|
||||
|
||||
const nullFilters =
|
||||
filters.filters &&
|
||||
Object.keys(filters.filters).filter(
|
||||
(key) => filters.filters[key as keyof IWorkspaceIssueFilterOptions] === null
|
||||
);
|
||||
|
||||
const areFiltersApplied =
|
||||
filters.filters &&
|
||||
Object.keys(filters.filters).length > 0 &&
|
||||
nullFilters.length !== Object.keys(filters.filters).length;
|
||||
|
||||
const isNotAllowed = isGuest || isViewer;
|
||||
return (
|
||||
<>
|
||||
<CreateUpdateIssueModal
|
||||
isOpen={createIssueModal && preloadedData?.actionType === "createIssue"}
|
||||
handleClose={() => setCreateIssueModal(false)}
|
||||
prePopulateData={{
|
||||
...preloadedData,
|
||||
}}
|
||||
onSubmit={async () => mutateViewIssues()}
|
||||
/>
|
||||
<CreateUpdateIssueModal
|
||||
isOpen={editIssueModal && issueToEdit?.actionType !== "delete"}
|
||||
handleClose={() => setEditIssueModal(false)}
|
||||
data={issueToEdit}
|
||||
onSubmit={async () => mutateViewIssues()}
|
||||
/>
|
||||
<DeleteIssueModal
|
||||
handleClose={() => setDeleteIssueModal(false)}
|
||||
isOpen={deleteIssueModal}
|
||||
data={issueToDelete}
|
||||
user={user}
|
||||
onSubmit={async () => mutateViewIssues()}
|
||||
/>
|
||||
<CreateUpdateWorkspaceViewModal
|
||||
isOpen={createViewModal !== null}
|
||||
handleClose={() => setCreateViewModal(null)}
|
||||
preLoadedData={createViewModal}
|
||||
/>
|
||||
<div className="h-full flex flex-col overflow-hidden bg-custom-background-100">
|
||||
<div className="h-full w-full border-b border-custom-border-300">
|
||||
<WorkspaceViewsNavigation handleAddView={() => setCreateViewModal(true)} />
|
||||
{false ? (
|
||||
<EmptyState
|
||||
image={emptyView}
|
||||
title="View does not exist"
|
||||
description="The view you are looking for does not exist or has been deleted."
|
||||
primaryButton={{
|
||||
text: "View other views",
|
||||
onClick: () => router.push(`/${workspaceSlug}/workspace-views`),
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<div className="h-full w-full flex flex-col">
|
||||
{areFiltersApplied && (
|
||||
<>
|
||||
<div className="flex items-center justify-between gap-2 px-5 pt-3 pb-0">
|
||||
<WorkspaceFiltersList
|
||||
filters={filters.filters}
|
||||
setFilters={(updatedFilter) => handleFilters("filters", updatedFilter)}
|
||||
labels={workspaceLabels}
|
||||
members={workspaceMembers?.map((m) => m.member)}
|
||||
stateGroup={STATE_GROUP}
|
||||
project={joinedProjects}
|
||||
clearAllFilters={() =>
|
||||
handleFilters("filters", {
|
||||
assignees: null,
|
||||
created_by: null,
|
||||
labels: null,
|
||||
priority: null,
|
||||
state_group: null,
|
||||
start_date: null,
|
||||
target_date: null,
|
||||
subscriber: null,
|
||||
project: null,
|
||||
})
|
||||
}
|
||||
/>
|
||||
<PrimaryButton
|
||||
onClick={() => {
|
||||
if (workspaceViewId) handleFilters("filters", filters.filters, true);
|
||||
else
|
||||
setCreateViewModal({
|
||||
query: filters.filters,
|
||||
});
|
||||
}}
|
||||
className="flex items-center gap-2 text-sm"
|
||||
>
|
||||
{!workspaceViewId && <PlusIcon className="h-4 w-4" />}
|
||||
{workspaceViewId ? "Update" : "Save"} view
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
{<div className="mt-3 border-t border-custom-border-200" />}
|
||||
</>
|
||||
)}
|
||||
<SpreadsheetView
|
||||
spreadsheetIssues={viewIssues}
|
||||
mutateIssues={mutateViewIssues}
|
||||
handleIssueAction={handleIssueAction}
|
||||
disableUserActions={isNotAllowed ?? false}
|
||||
user={user}
|
||||
userAuth={memberRole}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
234
web/components/issues/workspace-views/workspace-all-issue.tsx
Normal file
234
web/components/issues/workspace-views/workspace-all-issue.tsx
Normal file
|
|
@ -0,0 +1,234 @@
|
|||
import { useCallback, useState } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
import useSWR from "swr";
|
||||
|
||||
// hook
|
||||
import useUser from "hooks/use-user";
|
||||
import useWorkspaceMembers from "hooks/use-workspace-members";
|
||||
import useProjects from "hooks/use-projects";
|
||||
import { useWorkspaceView } from "hooks/use-workspace-view";
|
||||
// context
|
||||
import { useProjectMyMembership } from "contexts/project-member.context";
|
||||
// services
|
||||
import workspaceService from "services/workspace.service";
|
||||
import projectIssuesServices from "services/issues.service";
|
||||
// components
|
||||
import { SpreadsheetView, WorkspaceFiltersList } from "components/core";
|
||||
import { WorkspaceViewsNavigation } from "components/workspace/views/workpace-view-navigation";
|
||||
import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
|
||||
import { CreateUpdateWorkspaceViewModal } from "components/workspace/views/modal";
|
||||
// ui
|
||||
import { PrimaryButton } from "components/ui";
|
||||
// icons
|
||||
import { PlusIcon } from "@heroicons/react/24/outline";
|
||||
// fetch-keys
|
||||
import { WORKSPACE_LABELS, WORKSPACE_VIEW_ISSUES } from "constants/fetch-keys";
|
||||
// constants
|
||||
import { STATE_GROUP } from "constants/project";
|
||||
// types
|
||||
import { IIssue, IWorkspaceIssueFilterOptions } from "types";
|
||||
|
||||
export const WorkspaceAllIssue = () => {
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, workspaceViewId } = router.query;
|
||||
|
||||
const [createViewModal, setCreateViewModal] = useState<any>(null);
|
||||
|
||||
// create issue modal
|
||||
const [createIssueModal, setCreateIssueModal] = useState(false);
|
||||
const [preloadedData, setPreloadedData] = useState<
|
||||
(Partial<IIssue> & { actionType: "createIssue" | "edit" | "delete" }) | undefined
|
||||
>(undefined);
|
||||
|
||||
// update issue modal
|
||||
const [editIssueModal, setEditIssueModal] = useState(false);
|
||||
const [issueToEdit, setIssueToEdit] = useState<
|
||||
(IIssue & { actionType: "edit" | "delete" }) | undefined
|
||||
>(undefined);
|
||||
|
||||
// delete issue modal
|
||||
const [deleteIssueModal, setDeleteIssueModal] = useState(false);
|
||||
const [issueToDelete, setIssueToDelete] = useState<IIssue | null>(null);
|
||||
|
||||
const { user } = useUser();
|
||||
const { memberRole } = useProjectMyMembership();
|
||||
|
||||
const { workspaceMembers } = useWorkspaceMembers(workspaceSlug?.toString() ?? "");
|
||||
|
||||
const { data: workspaceLabels } = useSWR(
|
||||
workspaceSlug ? WORKSPACE_LABELS(workspaceSlug.toString()) : null,
|
||||
workspaceSlug ? () => projectIssuesServices.getWorkspaceLabels(workspaceSlug.toString()) : null
|
||||
);
|
||||
|
||||
const { filters, handleFilters } = useWorkspaceView();
|
||||
|
||||
const params: any = {
|
||||
assignees: filters?.filters?.assignees ? filters?.filters?.assignees.join(",") : undefined,
|
||||
subscriber: filters?.filters?.subscriber ? filters?.filters?.subscriber.join(",") : undefined,
|
||||
state_group: filters?.filters?.state_group
|
||||
? filters?.filters?.state_group.join(",")
|
||||
: undefined,
|
||||
priority: filters?.filters?.priority ? filters?.filters?.priority.join(",") : undefined,
|
||||
labels: filters?.filters?.labels ? filters?.filters?.labels.join(",") : undefined,
|
||||
created_by: filters?.filters?.created_by ? filters?.filters?.created_by.join(",") : undefined,
|
||||
start_date: filters?.filters?.start_date ? filters?.filters?.start_date.join(",") : undefined,
|
||||
target_date: filters?.filters?.target_date
|
||||
? filters?.filters?.target_date.join(",")
|
||||
: undefined,
|
||||
project: filters?.filters?.project ? filters?.filters?.project.join(",") : undefined,
|
||||
sub_issue: false,
|
||||
type: undefined,
|
||||
};
|
||||
|
||||
const { data: viewIssues, mutate: mutateViewIssues } = useSWR(
|
||||
workspaceSlug ? WORKSPACE_VIEW_ISSUES(workspaceSlug.toString(), params) : null,
|
||||
workspaceSlug ? () => workspaceService.getViewIssues(workspaceSlug.toString(), params) : null
|
||||
);
|
||||
|
||||
const makeIssueCopy = useCallback(
|
||||
(issue: IIssue) => {
|
||||
setCreateIssueModal(true);
|
||||
|
||||
setPreloadedData({ ...issue, name: `${issue.name} (Copy)`, actionType: "createIssue" });
|
||||
},
|
||||
[setCreateIssueModal, setPreloadedData]
|
||||
);
|
||||
|
||||
const handleEditIssue = useCallback(
|
||||
(issue: IIssue) => {
|
||||
setEditIssueModal(true);
|
||||
setIssueToEdit({
|
||||
...issue,
|
||||
actionType: "edit",
|
||||
cycle: issue.issue_cycle ? issue.issue_cycle.cycle : null,
|
||||
module: issue.issue_module ? issue.issue_module.module : null,
|
||||
});
|
||||
},
|
||||
[setEditIssueModal, setIssueToEdit]
|
||||
);
|
||||
|
||||
const handleDeleteIssue = useCallback(
|
||||
(issue: IIssue) => {
|
||||
setDeleteIssueModal(true);
|
||||
setIssueToDelete(issue);
|
||||
},
|
||||
[setDeleteIssueModal, setIssueToDelete]
|
||||
);
|
||||
|
||||
const handleIssueAction = useCallback(
|
||||
(issue: IIssue, action: "copy" | "edit" | "delete" | "updateDraft") => {
|
||||
if (action === "copy") makeIssueCopy(issue);
|
||||
else if (action === "edit") handleEditIssue(issue);
|
||||
else if (action === "delete") handleDeleteIssue(issue);
|
||||
},
|
||||
[makeIssueCopy, handleEditIssue, handleDeleteIssue]
|
||||
);
|
||||
|
||||
const nullFilters =
|
||||
filters.filters &&
|
||||
Object.keys(filters.filters).filter(
|
||||
(key) => filters.filters[key as keyof IWorkspaceIssueFilterOptions] === null
|
||||
);
|
||||
|
||||
const areFiltersApplied =
|
||||
filters.filters &&
|
||||
Object.keys(filters.filters).length > 0 &&
|
||||
nullFilters.length !== Object.keys(filters.filters).length;
|
||||
|
||||
const { projects: allProjects } = useProjects();
|
||||
const joinedProjects = allProjects?.filter((p) => p.is_member);
|
||||
|
||||
return (
|
||||
<>
|
||||
<CreateUpdateIssueModal
|
||||
isOpen={createIssueModal && preloadedData?.actionType === "createIssue"}
|
||||
handleClose={() => setCreateIssueModal(false)}
|
||||
prePopulateData={{
|
||||
...preloadedData,
|
||||
}}
|
||||
onSubmit={async () => {
|
||||
mutateViewIssues();
|
||||
}}
|
||||
/>
|
||||
<CreateUpdateIssueModal
|
||||
isOpen={editIssueModal && issueToEdit?.actionType !== "delete"}
|
||||
handleClose={() => setEditIssueModal(false)}
|
||||
data={issueToEdit}
|
||||
onSubmit={async () => {
|
||||
mutateViewIssues();
|
||||
}}
|
||||
/>
|
||||
<DeleteIssueModal
|
||||
handleClose={() => setDeleteIssueModal(false)}
|
||||
isOpen={deleteIssueModal}
|
||||
data={issueToDelete}
|
||||
user={user}
|
||||
onSubmit={async () => {
|
||||
mutateViewIssues();
|
||||
}}
|
||||
/>
|
||||
<CreateUpdateWorkspaceViewModal
|
||||
isOpen={createViewModal !== null}
|
||||
handleClose={() => setCreateViewModal(null)}
|
||||
preLoadedData={createViewModal}
|
||||
/>
|
||||
<div className="h-full flex flex-col overflow-hidden bg-custom-background-100">
|
||||
<div className="h-full w-full border-b border-custom-border-300">
|
||||
<WorkspaceViewsNavigation handleAddView={() => setCreateViewModal(true)} />
|
||||
<div className="h-full w-full flex flex-col">
|
||||
{areFiltersApplied && (
|
||||
<>
|
||||
<div className="flex items-center justify-between gap-2 px-5 pt-3 pb-0">
|
||||
<WorkspaceFiltersList
|
||||
filters={filters.filters}
|
||||
setFilters={(updatedFilter) => handleFilters("filters", updatedFilter)}
|
||||
labels={workspaceLabels}
|
||||
members={workspaceMembers?.map((m) => m.member)}
|
||||
stateGroup={STATE_GROUP}
|
||||
project={joinedProjects}
|
||||
clearAllFilters={() =>
|
||||
handleFilters("filters", {
|
||||
assignees: null,
|
||||
created_by: null,
|
||||
labels: null,
|
||||
priority: null,
|
||||
state_group: null,
|
||||
start_date: null,
|
||||
target_date: null,
|
||||
subscriber: null,
|
||||
project: null,
|
||||
})
|
||||
}
|
||||
/>
|
||||
<PrimaryButton
|
||||
onClick={() => {
|
||||
if (workspaceViewId) handleFilters("filters", filters.filters, true);
|
||||
else
|
||||
setCreateViewModal({
|
||||
query: filters.filters,
|
||||
});
|
||||
}}
|
||||
className="flex items-center gap-2 text-sm"
|
||||
>
|
||||
{!workspaceViewId && <PlusIcon className="h-4 w-4" />}
|
||||
{workspaceViewId ? "Update" : "Save"} view
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
{<div className="mt-3 border-t border-custom-border-200" />}
|
||||
</>
|
||||
)}
|
||||
<SpreadsheetView
|
||||
spreadsheetIssues={viewIssues}
|
||||
mutateIssues={mutateViewIssues}
|
||||
handleIssueAction={handleIssueAction}
|
||||
disableUserActions={false}
|
||||
user={user}
|
||||
userAuth={memberRole}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,155 @@
|
|||
import React, { useCallback, useState } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
import useSWR from "swr";
|
||||
|
||||
// hook
|
||||
import useUser from "hooks/use-user";
|
||||
// context
|
||||
import { useProjectMyMembership } from "contexts/project-member.context";
|
||||
// services
|
||||
import workspaceService from "services/workspace.service";
|
||||
// components
|
||||
import { SpreadsheetView } from "components/core";
|
||||
import { WorkspaceViewsNavigation } from "components/workspace/views/workpace-view-navigation";
|
||||
import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
|
||||
import { CreateUpdateWorkspaceViewModal } from "components/workspace/views/modal";
|
||||
// fetch-keys
|
||||
import { WORKSPACE_VIEW_ISSUES } from "constants/fetch-keys";
|
||||
// types
|
||||
import { IIssue } from "types";
|
||||
|
||||
export const WorkspaceAssignedIssue = () => {
|
||||
const [createViewModal, setCreateViewModal] = useState<any>(null);
|
||||
|
||||
// create issue modal
|
||||
const [createIssueModal, setCreateIssueModal] = useState(false);
|
||||
const [preloadedData, setPreloadedData] = useState<
|
||||
(Partial<IIssue> & { actionType: "createIssue" | "edit" | "delete" }) | undefined
|
||||
>(undefined);
|
||||
|
||||
// update issue modal
|
||||
const [editIssueModal, setEditIssueModal] = useState(false);
|
||||
const [issueToEdit, setIssueToEdit] = useState<
|
||||
(IIssue & { actionType: "edit" | "delete" }) | undefined
|
||||
>(undefined);
|
||||
|
||||
// delete issue modal
|
||||
const [deleteIssueModal, setDeleteIssueModal] = useState(false);
|
||||
const [issueToDelete, setIssueToDelete] = useState<IIssue | null>(null);
|
||||
|
||||
const router = useRouter();
|
||||
const { workspaceSlug } = router.query;
|
||||
|
||||
const { user } = useUser();
|
||||
|
||||
const { memberRole } = useProjectMyMembership();
|
||||
|
||||
const params: any = {
|
||||
assignees: user?.id ?? undefined,
|
||||
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
|
||||
);
|
||||
|
||||
const makeIssueCopy = useCallback(
|
||||
(issue: IIssue) => {
|
||||
setCreateIssueModal(true);
|
||||
|
||||
setPreloadedData({ ...issue, name: `${issue.name} (Copy)`, actionType: "createIssue" });
|
||||
},
|
||||
[setCreateIssueModal, setPreloadedData]
|
||||
);
|
||||
|
||||
const handleEditIssue = useCallback(
|
||||
(issue: IIssue) => {
|
||||
setEditIssueModal(true);
|
||||
setIssueToEdit({
|
||||
...issue,
|
||||
actionType: "edit",
|
||||
cycle: issue.issue_cycle ? issue.issue_cycle.cycle : null,
|
||||
module: issue.issue_module ? issue.issue_module.module : null,
|
||||
});
|
||||
},
|
||||
[setEditIssueModal, setIssueToEdit]
|
||||
);
|
||||
|
||||
const handleDeleteIssue = useCallback(
|
||||
(issue: IIssue) => {
|
||||
setDeleteIssueModal(true);
|
||||
setIssueToDelete(issue);
|
||||
},
|
||||
[setDeleteIssueModal, setIssueToDelete]
|
||||
);
|
||||
|
||||
const handleIssueAction = useCallback(
|
||||
(issue: IIssue, action: "copy" | "edit" | "delete" | "updateDraft") => {
|
||||
if (action === "copy") makeIssueCopy(issue);
|
||||
else if (action === "edit") handleEditIssue(issue);
|
||||
else if (action === "delete") handleDeleteIssue(issue);
|
||||
},
|
||||
[makeIssueCopy, handleEditIssue, handleDeleteIssue]
|
||||
);
|
||||
return (
|
||||
<>
|
||||
<CreateUpdateIssueModal
|
||||
isOpen={createIssueModal && preloadedData?.actionType === "createIssue"}
|
||||
handleClose={() => setCreateIssueModal(false)}
|
||||
prePopulateData={{
|
||||
...preloadedData,
|
||||
}}
|
||||
onSubmit={async () => {
|
||||
mutateIssues();
|
||||
}}
|
||||
/>
|
||||
<CreateUpdateIssueModal
|
||||
isOpen={editIssueModal && issueToEdit?.actionType !== "delete"}
|
||||
handleClose={() => setEditIssueModal(false)}
|
||||
data={issueToEdit}
|
||||
onSubmit={async () => {
|
||||
mutateIssues();
|
||||
}}
|
||||
/>
|
||||
<DeleteIssueModal
|
||||
handleClose={() => setDeleteIssueModal(false)}
|
||||
isOpen={deleteIssueModal}
|
||||
data={issueToDelete}
|
||||
user={user}
|
||||
onSubmit={async () => {
|
||||
mutateIssues();
|
||||
}}
|
||||
/>
|
||||
<CreateUpdateWorkspaceViewModal
|
||||
isOpen={createViewModal !== null}
|
||||
handleClose={() => setCreateViewModal(null)}
|
||||
preLoadedData={createViewModal}
|
||||
/>
|
||||
<div className="h-full flex flex-col overflow-hidden bg-custom-background-100">
|
||||
<div className="h-full w-full border-b border-custom-border-300">
|
||||
<WorkspaceViewsNavigation handleAddView={() => setCreateViewModal(true)} />
|
||||
|
||||
<div className="h-full w-full flex flex-col">
|
||||
<SpreadsheetView
|
||||
spreadsheetIssues={viewIssues}
|
||||
mutateIssues={mutateIssues}
|
||||
handleIssueAction={handleIssueAction}
|
||||
disableUserActions={false}
|
||||
user={user}
|
||||
userAuth={memberRole}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,147 @@
|
|||
import React, { useCallback, useState } from "react";
|
||||
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
import useSWR from "swr";
|
||||
|
||||
// hook
|
||||
import useUser from "hooks/use-user";
|
||||
// context
|
||||
import { useProjectMyMembership } from "contexts/project-member.context";
|
||||
// services
|
||||
import workspaceService from "services/workspace.service";
|
||||
// components
|
||||
import { SpreadsheetView } from "components/core";
|
||||
import { WorkspaceViewsNavigation } from "components/workspace/views/workpace-view-navigation";
|
||||
import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
|
||||
import { CreateUpdateWorkspaceViewModal } from "components/workspace/views/modal";
|
||||
// fetch-keys
|
||||
import { WORKSPACE_VIEW_ISSUES } from "constants/fetch-keys";
|
||||
// types
|
||||
import { IIssue } from "types";
|
||||
|
||||
export const WorkspaceCreatedIssues = () => {
|
||||
const [createViewModal, setCreateViewModal] = useState<any>(null);
|
||||
|
||||
// create issue modal
|
||||
const [createIssueModal, setCreateIssueModal] = useState(false);
|
||||
const [preloadedData, setPreloadedData] = useState<
|
||||
(Partial<IIssue> & { actionType: "createIssue" | "edit" | "delete" }) | undefined
|
||||
>(undefined);
|
||||
|
||||
// update issue modal
|
||||
const [editIssueModal, setEditIssueModal] = useState(false);
|
||||
const [issueToEdit, setIssueToEdit] = useState<
|
||||
(IIssue & { actionType: "edit" | "delete" }) | undefined
|
||||
>(undefined);
|
||||
|
||||
// delete issue modal
|
||||
const [deleteIssueModal, setDeleteIssueModal] = useState(false);
|
||||
const [issueToDelete, setIssueToDelete] = useState<IIssue | null>(null);
|
||||
|
||||
const router = useRouter();
|
||||
const { workspaceSlug } = router.query;
|
||||
|
||||
const { user } = useUser();
|
||||
const { memberRole } = useProjectMyMembership();
|
||||
|
||||
const params: any = {
|
||||
created_by: user?.id ?? undefined,
|
||||
sub_issue: false,
|
||||
};
|
||||
|
||||
const { data: viewIssues, mutate: mutateIssues } = useSWR(
|
||||
workspaceSlug ? WORKSPACE_VIEW_ISSUES(workspaceSlug.toString(), params) : null,
|
||||
workspaceSlug ? () => workspaceService.getViewIssues(workspaceSlug.toString(), params) : null
|
||||
);
|
||||
|
||||
const makeIssueCopy = useCallback(
|
||||
(issue: IIssue) => {
|
||||
setCreateIssueModal(true);
|
||||
|
||||
setPreloadedData({ ...issue, name: `${issue.name} (Copy)`, actionType: "createIssue" });
|
||||
},
|
||||
[setCreateIssueModal, setPreloadedData]
|
||||
);
|
||||
|
||||
const handleEditIssue = useCallback(
|
||||
(issue: IIssue) => {
|
||||
setEditIssueModal(true);
|
||||
setIssueToEdit({
|
||||
...issue,
|
||||
actionType: "edit",
|
||||
cycle: issue.issue_cycle ? issue.issue_cycle.cycle : null,
|
||||
module: issue.issue_module ? issue.issue_module.module : null,
|
||||
});
|
||||
},
|
||||
[setEditIssueModal, setIssueToEdit]
|
||||
);
|
||||
|
||||
const handleDeleteIssue = useCallback(
|
||||
(issue: IIssue) => {
|
||||
setDeleteIssueModal(true);
|
||||
setIssueToDelete(issue);
|
||||
},
|
||||
[setDeleteIssueModal, setIssueToDelete]
|
||||
);
|
||||
|
||||
const handleIssueAction = useCallback(
|
||||
(issue: IIssue, action: "copy" | "edit" | "delete" | "updateDraft") => {
|
||||
if (action === "copy") makeIssueCopy(issue);
|
||||
else if (action === "edit") handleEditIssue(issue);
|
||||
else if (action === "delete") handleDeleteIssue(issue);
|
||||
},
|
||||
[makeIssueCopy, handleEditIssue, handleDeleteIssue]
|
||||
);
|
||||
return (
|
||||
<>
|
||||
<CreateUpdateIssueModal
|
||||
isOpen={createIssueModal && preloadedData?.actionType === "createIssue"}
|
||||
handleClose={() => setCreateIssueModal(false)}
|
||||
prePopulateData={{
|
||||
...preloadedData,
|
||||
}}
|
||||
onSubmit={async () => {
|
||||
mutateIssues();
|
||||
}}
|
||||
/>
|
||||
<CreateUpdateIssueModal
|
||||
isOpen={editIssueModal && issueToEdit?.actionType !== "delete"}
|
||||
handleClose={() => setEditIssueModal(false)}
|
||||
data={issueToEdit}
|
||||
onSubmit={async () => {
|
||||
mutateIssues();
|
||||
}}
|
||||
/>
|
||||
<DeleteIssueModal
|
||||
handleClose={() => setDeleteIssueModal(false)}
|
||||
isOpen={deleteIssueModal}
|
||||
data={issueToDelete}
|
||||
user={user}
|
||||
onSubmit={async () => {
|
||||
mutateIssues();
|
||||
}}
|
||||
/>
|
||||
<CreateUpdateWorkspaceViewModal
|
||||
isOpen={createViewModal !== null}
|
||||
handleClose={() => setCreateViewModal(null)}
|
||||
preLoadedData={createViewModal}
|
||||
/>
|
||||
<div className="h-full flex flex-col overflow-hidden bg-custom-background-100">
|
||||
<div className="h-full w-full border-b border-custom-border-300">
|
||||
<WorkspaceViewsNavigation handleAddView={() => setCreateViewModal(true)} />
|
||||
<div className="h-full w-full flex flex-col">
|
||||
<SpreadsheetView
|
||||
spreadsheetIssues={viewIssues}
|
||||
mutateIssues={mutateIssues}
|
||||
handleIssueAction={handleIssueAction}
|
||||
disableUserActions={false}
|
||||
user={user}
|
||||
userAuth={memberRole}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
@ -3,10 +3,9 @@ import React from "react";
|
|||
import { useRouter } from "next/router";
|
||||
|
||||
// hooks
|
||||
import useMyIssuesFilters from "hooks/my-issues/use-my-issues-filter";
|
||||
import useWorkspaceIssuesFilters from "hooks/use-worskpace-issue-filter";
|
||||
import { useWorkspaceView } from "hooks/use-workspace-view";
|
||||
// components
|
||||
import { MyIssuesSelectFilters } from "components/issues";
|
||||
import { GlobalSelectFilters } from "components/workspace/views/global-select-filters";
|
||||
// ui
|
||||
import { Tooltip } from "components/ui";
|
||||
// icons
|
||||
|
|
@ -33,12 +32,7 @@ export const WorkspaceIssuesViewOptions: React.FC = () => {
|
|||
const router = useRouter();
|
||||
const { workspaceSlug, workspaceViewId } = router.query;
|
||||
|
||||
const { displayFilters, setDisplayFilters } = useMyIssuesFilters(workspaceSlug?.toString());
|
||||
|
||||
const { filters, setFilters } = useWorkspaceIssuesFilters(
|
||||
workspaceSlug?.toString(),
|
||||
workspaceViewId?.toString()
|
||||
);
|
||||
const { filters, handleFilters } = useWorkspaceView();
|
||||
|
||||
const isWorkspaceViewPath = router.pathname.includes("workspace-views/all-issues");
|
||||
|
||||
|
|
@ -58,12 +52,12 @@ export const WorkspaceIssuesViewOptions: React.FC = () => {
|
|||
<button
|
||||
type="button"
|
||||
className={`grid h-7 w-7 place-items-center rounded p-1 outline-none hover:bg-custom-sidebar-background-100 duration-300 ${
|
||||
displayFilters?.layout === option.type
|
||||
filters.display_filters?.layout === option.type
|
||||
? "bg-custom-sidebar-background-100 shadow-sm"
|
||||
: "text-custom-sidebar-text-200"
|
||||
}`}
|
||||
onClick={() => {
|
||||
setDisplayFilters({ layout: option.type });
|
||||
handleFilters("display_filters", { layout: option.type }, true);
|
||||
if (option.type === "spreadsheet")
|
||||
router.push(`/${workspaceSlug}/workspace-views/all-issues`);
|
||||
else router.push(`/${workspaceSlug}/workspace-views`);
|
||||
|
|
@ -82,37 +76,38 @@ export const WorkspaceIssuesViewOptions: React.FC = () => {
|
|||
|
||||
{showFilters && (
|
||||
<>
|
||||
<MyIssuesSelectFilters
|
||||
filters={filters}
|
||||
<GlobalSelectFilters
|
||||
filters={filters.filters}
|
||||
onSelect={(option) => {
|
||||
const key = option.key as keyof typeof filters;
|
||||
const key = option.key as keyof typeof filters.filters;
|
||||
|
||||
if (key === "start_date" || key === "target_date") {
|
||||
const valueExists = checkIfArraysHaveSameElements(
|
||||
filters?.[key] ?? [],
|
||||
filters.filters?.[key] ?? [],
|
||||
option.value
|
||||
);
|
||||
|
||||
setFilters({
|
||||
handleFilters("filters", {
|
||||
...filters,
|
||||
[key]: valueExists ? null : option.value,
|
||||
});
|
||||
} else {
|
||||
const valueExists = filters[key]?.includes(option.value);
|
||||
|
||||
if (valueExists)
|
||||
setFilters({
|
||||
[option.key]: ((filters[key] ?? []) as any[])?.filter(
|
||||
(val) => val !== option.value
|
||||
if (!filters?.filters?.[key]?.includes(option.value))
|
||||
handleFilters("filters", {
|
||||
...filters,
|
||||
[key]: [...((filters?.filters?.[key] as any[]) ?? []), option.value],
|
||||
});
|
||||
else {
|
||||
handleFilters("filters", {
|
||||
...filters,
|
||||
[key]: (filters?.filters?.[key] as any[])?.filter(
|
||||
(item) => item !== option.value
|
||||
),
|
||||
});
|
||||
else
|
||||
setFilters({
|
||||
[option.key]: [...((filters[key] ?? []) as any[]), option.value],
|
||||
});
|
||||
}
|
||||
}
|
||||
}}
|
||||
direction="left"
|
||||
height="rg"
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,148 @@
|
|||
import React, { useCallback, useState } from "react";
|
||||
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
import useSWR from "swr";
|
||||
|
||||
// hook
|
||||
import useUser from "hooks/use-user";
|
||||
// context
|
||||
import { useProjectMyMembership } from "contexts/project-member.context";
|
||||
// services
|
||||
import workspaceService from "services/workspace.service";
|
||||
// components
|
||||
import { SpreadsheetView } from "components/core";
|
||||
import { WorkspaceViewsNavigation } from "components/workspace/views/workpace-view-navigation";
|
||||
import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
|
||||
import { CreateUpdateWorkspaceViewModal } from "components/workspace/views/modal";
|
||||
// fetch-keys
|
||||
import { WORKSPACE_VIEW_ISSUES } from "constants/fetch-keys";
|
||||
// types
|
||||
import { IIssue } from "types";
|
||||
|
||||
export const WorkspaceSubscribedIssues = () => {
|
||||
const [createViewModal, setCreateViewModal] = useState<any>(null);
|
||||
|
||||
// create issue modal
|
||||
const [createIssueModal, setCreateIssueModal] = useState(false);
|
||||
const [preloadedData, setPreloadedData] = useState<
|
||||
(Partial<IIssue> & { actionType: "createIssue" | "edit" | "delete" }) | undefined
|
||||
>(undefined);
|
||||
|
||||
// update issue modal
|
||||
const [editIssueModal, setEditIssueModal] = useState(false);
|
||||
const [issueToEdit, setIssueToEdit] = useState<
|
||||
(IIssue & { actionType: "edit" | "delete" }) | undefined
|
||||
>(undefined);
|
||||
|
||||
// delete issue modal
|
||||
const [deleteIssueModal, setDeleteIssueModal] = useState(false);
|
||||
const [issueToDelete, setIssueToDelete] = useState<IIssue | null>(null);
|
||||
|
||||
const router = useRouter();
|
||||
const { workspaceSlug } = router.query;
|
||||
|
||||
const { user } = useUser();
|
||||
const { memberRole } = useProjectMyMembership();
|
||||
|
||||
const params: any = {
|
||||
subscriber: user?.id ?? undefined,
|
||||
sub_issue: false,
|
||||
};
|
||||
|
||||
const { data: viewIssues, mutate: mutateIssues } = useSWR(
|
||||
workspaceSlug ? WORKSPACE_VIEW_ISSUES(workspaceSlug.toString(), params) : null,
|
||||
workspaceSlug ? () => workspaceService.getViewIssues(workspaceSlug.toString(), params) : null
|
||||
);
|
||||
|
||||
const makeIssueCopy = useCallback(
|
||||
(issue: IIssue) => {
|
||||
setCreateIssueModal(true);
|
||||
|
||||
setPreloadedData({ ...issue, name: `${issue.name} (Copy)`, actionType: "createIssue" });
|
||||
},
|
||||
[setCreateIssueModal, setPreloadedData]
|
||||
);
|
||||
|
||||
const handleEditIssue = useCallback(
|
||||
(issue: IIssue) => {
|
||||
setEditIssueModal(true);
|
||||
setIssueToEdit({
|
||||
...issue,
|
||||
actionType: "edit",
|
||||
cycle: issue.issue_cycle ? issue.issue_cycle.cycle : null,
|
||||
module: issue.issue_module ? issue.issue_module.module : null,
|
||||
});
|
||||
},
|
||||
[setEditIssueModal, setIssueToEdit]
|
||||
);
|
||||
|
||||
const handleDeleteIssue = useCallback(
|
||||
(issue: IIssue) => {
|
||||
setDeleteIssueModal(true);
|
||||
setIssueToDelete(issue);
|
||||
},
|
||||
[setDeleteIssueModal, setIssueToDelete]
|
||||
);
|
||||
|
||||
const handleIssueAction = useCallback(
|
||||
(issue: IIssue, action: "copy" | "edit" | "delete" | "updateDraft") => {
|
||||
if (action === "copy") makeIssueCopy(issue);
|
||||
else if (action === "edit") handleEditIssue(issue);
|
||||
else if (action === "delete") handleDeleteIssue(issue);
|
||||
},
|
||||
[makeIssueCopy, handleEditIssue, handleDeleteIssue]
|
||||
);
|
||||
return (
|
||||
<>
|
||||
<CreateUpdateIssueModal
|
||||
isOpen={createIssueModal && preloadedData?.actionType === "createIssue"}
|
||||
handleClose={() => setCreateIssueModal(false)}
|
||||
prePopulateData={{
|
||||
...preloadedData,
|
||||
}}
|
||||
onSubmit={async () => {
|
||||
mutateIssues();
|
||||
}}
|
||||
/>
|
||||
<CreateUpdateIssueModal
|
||||
isOpen={editIssueModal && issueToEdit?.actionType !== "delete"}
|
||||
handleClose={() => setEditIssueModal(false)}
|
||||
data={issueToEdit}
|
||||
onSubmit={async () => {
|
||||
mutateIssues();
|
||||
}}
|
||||
/>
|
||||
<DeleteIssueModal
|
||||
handleClose={() => setDeleteIssueModal(false)}
|
||||
isOpen={deleteIssueModal}
|
||||
data={issueToDelete}
|
||||
user={user}
|
||||
onSubmit={async () => {
|
||||
mutateIssues();
|
||||
}}
|
||||
/>
|
||||
<CreateUpdateWorkspaceViewModal
|
||||
isOpen={createViewModal !== null}
|
||||
handleClose={() => setCreateViewModal(null)}
|
||||
preLoadedData={createViewModal}
|
||||
/>
|
||||
<div className="h-full flex flex-col overflow-hidden bg-custom-background-100">
|
||||
<div className="h-full w-full border-b border-custom-border-300">
|
||||
<WorkspaceViewsNavigation handleAddView={() => setCreateViewModal(true)} />
|
||||
|
||||
<div className="h-full w-full flex flex-col">
|
||||
<SpreadsheetView
|
||||
spreadsheetIssues={viewIssues}
|
||||
mutateIssues={mutateIssues}
|
||||
handleIssueAction={handleIssueAction}
|
||||
disableUserActions={false}
|
||||
user={user}
|
||||
userAuth={memberRole}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue