feat: workspace global view, style: spreadsheet view revamp (#2273)
* chore: workspace view types, services and hooks added * style: spreadsheet view revamp and code refactor * feat: workspace view * fix: build fix * chore: sidebar workspace issues redirection updated
This commit is contained in:
Anmol Singh Bhatia
GitHub
parent
a187e7765c
commit
3a6d72e4b6
61 changed files with 4253 additions and 733 deletions
|
|
@ -88,12 +88,14 @@ const ProjectViews: NextPage = () => {
|
|||
>
|
||||
<CreateUpdateViewModal
|
||||
isOpen={createUpdateViewModal}
|
||||
viewType="project"
|
||||
handleClose={() => setCreateUpdateViewModal(false)}
|
||||
data={selectedViewToUpdate}
|
||||
user={user}
|
||||
/>
|
||||
<DeleteViewModal
|
||||
isOpen={deleteViewModal}
|
||||
viewType="project"
|
||||
data={selectedViewToDelete}
|
||||
setIsOpen={setDeleteViewModal}
|
||||
user={user}
|
||||
|
|
@ -107,6 +109,7 @@ const ProjectViews: NextPage = () => {
|
|||
<SingleViewItem
|
||||
key={view.id}
|
||||
view={view}
|
||||
viewType="project"
|
||||
handleEditView={() => handleEditView(view)}
|
||||
handleDeleteView={() => handleDeleteView(view)}
|
||||
/>
|
||||
|
|
|
|||
322
web/pages/[workspaceSlug]/workspace-views/[workspaceViewId].tsx
Normal file
322
web/pages/[workspaceSlug]/workspace-views/[workspaceViewId].tsx
Normal file
|
|
@ -0,0 +1,322 @@
|
|||
import { useCallback, useState } from "react";
|
||||
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
import useSWR, { mutate } from "swr";
|
||||
|
||||
// hook
|
||||
import useToast from "hooks/use-toast";
|
||||
import useWorkspaceIssuesFilters from "hooks/use-worskpace-issue-filter";
|
||||
import useProjects from "hooks/use-projects";
|
||||
import useUser from "hooks/use-user";
|
||||
import useWorkspaceMembers from "hooks/use-workspace-members";
|
||||
// context
|
||||
import { useProjectMyMembership } from "contexts/project-member.context";
|
||||
// services
|
||||
import workspaceService from "services/workspace.service";
|
||||
import projectIssuesServices from "services/issues.service";
|
||||
// layouts
|
||||
import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
|
||||
// components
|
||||
import { FiltersList, SpreadsheetView } from "components/core";
|
||||
import { WorkspaceViewsNavigation } from "components/workspace/views/workpace-view-navigation";
|
||||
import { WorkspaceIssuesViewOptions } from "components/issues/workspace-views/workspace-issue-view-option";
|
||||
import { CreateUpdateViewModal } from "components/views";
|
||||
import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
|
||||
// ui
|
||||
import { EmptyState, PrimaryButton } from "components/ui";
|
||||
// icons
|
||||
import { PlusIcon } from "@heroicons/react/24/outline";
|
||||
import { CheckCircle } from "lucide-react";
|
||||
// images
|
||||
import emptyView from "public/empty-state/view.svg";
|
||||
// fetch-keys
|
||||
import {
|
||||
WORKSPACE_LABELS,
|
||||
WORKSPACE_VIEWS_LIST,
|
||||
WORKSPACE_VIEW_DETAILS,
|
||||
WORKSPACE_VIEW_ISSUES,
|
||||
} from "constants/fetch-keys";
|
||||
// constant
|
||||
import { STATE_GROUP } from "constants/project";
|
||||
// types
|
||||
import { IIssue, IIssueFilterOptions, IView } from "types";
|
||||
|
||||
const WorkspaceView: React.FC = () => {
|
||||
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, workspaceViewId } = router.query;
|
||||
|
||||
const { memberRole } = useProjectMyMembership();
|
||||
|
||||
const { user } = useUser();
|
||||
const { setToastAlert } = useToast();
|
||||
|
||||
const { data: viewDetails, error } = useSWR(
|
||||
workspaceSlug && workspaceViewId ? WORKSPACE_VIEW_DETAILS(workspaceViewId.toString()) : null,
|
||||
workspaceSlug && workspaceViewId
|
||||
? () => workspaceService.getViewDetails(workspaceSlug.toString(), workspaceViewId.toString())
|
||||
: null
|
||||
);
|
||||
|
||||
const { params, filters, setFilters } = useWorkspaceIssuesFilters(
|
||||
workspaceSlug?.toString(),
|
||||
workspaceViewId?.toString()
|
||||
);
|
||||
|
||||
const { isGuest, isViewer } = useWorkspaceMembers(
|
||||
workspaceSlug?.toString(),
|
||||
Boolean(workspaceSlug)
|
||||
);
|
||||
|
||||
const { data: viewIssues, mutate: mutateIssues } = useSWR(
|
||||
workspaceSlug && viewDetails ? WORKSPACE_VIEW_ISSUES(workspaceSlug.toString(), params) : null,
|
||||
workspaceSlug && viewDetails
|
||||
? () => workspaceService.getViewIssues(workspaceSlug.toString(), params)
|
||||
: 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 updateView = async (payload: IIssueFilterOptions) => {
|
||||
const payloadData = {
|
||||
query_data: payload,
|
||||
};
|
||||
|
||||
await workspaceService
|
||||
.updateView(workspaceSlug as string, workspaceViewId as string, payloadData)
|
||||
.then((res) => {
|
||||
mutate<IView[]>(
|
||||
WORKSPACE_VIEWS_LIST(workspaceSlug as string),
|
||||
(prevData) =>
|
||||
prevData?.map((p) => {
|
||||
if (p.id === res.id) return { ...p, ...payloadData };
|
||||
|
||||
return p;
|
||||
}),
|
||||
false
|
||||
);
|
||||
setToastAlert({
|
||||
type: "success",
|
||||
title: "Success!",
|
||||
message: "View updated successfully.",
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
setToastAlert({
|
||||
type: "error",
|
||||
title: "Error!",
|
||||
message: "View could not be updated. Please try again.",
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
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 &&
|
||||
Object.keys(filters).filter((key) => filters[key as keyof IIssueFilterOptions] === null);
|
||||
|
||||
const areFiltersApplied =
|
||||
filters &&
|
||||
Object.keys(filters).length > 0 &&
|
||||
nullFilters.length !== Object.keys(filters).length;
|
||||
|
||||
const isNotAllowed = isGuest || isViewer;
|
||||
|
||||
return (
|
||||
<WorkspaceAuthorizationLayout
|
||||
breadcrumbs={
|
||||
<div className="flex gap-2 items-center">
|
||||
<CheckCircle className="h-[18px] w-[18px] stroke-[1.5]" />
|
||||
<span className="text-sm font-medium">
|
||||
{viewDetails ? `${viewDetails.name} Issues` : "Workspace Issues"}
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
right={
|
||||
<div className="flex items-center gap-2">
|
||||
<WorkspaceIssuesViewOptions />
|
||||
<PrimaryButton
|
||||
className="flex items-center gap-2"
|
||||
onClick={() => {
|
||||
const e = new KeyboardEvent("keydown", { key: "c" });
|
||||
document.dispatchEvent(e);
|
||||
}}
|
||||
>
|
||||
<PlusIcon className="h-4 w-4" />
|
||||
Add Issue
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<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();
|
||||
}}
|
||||
/>
|
||||
<CreateUpdateViewModal
|
||||
isOpen={createViewModal !== null}
|
||||
handleClose={() => setCreateViewModal(null)}
|
||||
viewType="workspace"
|
||||
preLoadedData={createViewModal}
|
||||
user={user}
|
||||
/>
|
||||
<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)} />
|
||||
{error ? (
|
||||
<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">
|
||||
<FiltersList
|
||||
filters={filters}
|
||||
setFilters={(updatedFilter) => setFilters(updatedFilter)}
|
||||
labels={workspaceLabels}
|
||||
members={workspaceMembers?.map((m) => m.member)}
|
||||
stateGroup={STATE_GROUP}
|
||||
project={joinedProjects}
|
||||
clearAllFilters={() =>
|
||||
setFilters({
|
||||
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) {
|
||||
updateView(filters);
|
||||
} else
|
||||
setCreateViewModal({
|
||||
query: 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={mutateIssues}
|
||||
handleIssueAction={handleIssueAction}
|
||||
disableUserActions={isNotAllowed ?? false}
|
||||
user={user}
|
||||
userAuth={memberRole}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</WorkspaceAuthorizationLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default WorkspaceView;
|
||||
283
web/pages/[workspaceSlug]/workspace-views/all-issues.tsx
Normal file
283
web/pages/[workspaceSlug]/workspace-views/all-issues.tsx
Normal file
|
|
@ -0,0 +1,283 @@
|
|||
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 useMyIssuesFilters from "hooks/my-issues/use-my-issues-filter";
|
||||
// context
|
||||
import { useProjectMyMembership } from "contexts/project-member.context";
|
||||
// services
|
||||
import workspaceService from "services/workspace.service";
|
||||
import projectIssuesServices from "services/issues.service";
|
||||
// layouts
|
||||
import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
|
||||
// components
|
||||
import { FiltersList, SpreadsheetView } from "components/core";
|
||||
import { WorkspaceViewsNavigation } from "components/workspace/views/workpace-view-navigation";
|
||||
import { CreateUpdateViewModal } from "components/views";
|
||||
import { CreateUpdateIssueModal, DeleteIssueModal, MyIssuesViewOptions } from "components/issues";
|
||||
// ui
|
||||
import { EmptyState, PrimaryButton } from "components/ui";
|
||||
// icons
|
||||
import { PlusIcon } from "@heroicons/react/24/outline";
|
||||
import { CheckCircle } from "lucide-react";
|
||||
// images
|
||||
import emptyView from "public/empty-state/view.svg";
|
||||
// fetch-keys
|
||||
import {
|
||||
WORKSPACE_LABELS,
|
||||
WORKSPACE_VIEW_DETAILS,
|
||||
WORKSPACE_VIEW_ISSUES,
|
||||
} from "constants/fetch-keys";
|
||||
// constants
|
||||
import { STATE_GROUP } from "constants/project";
|
||||
// types
|
||||
import { IIssue, IIssueFilterOptions } from "types";
|
||||
|
||||
const WorkspaceViewAllIssue: React.FC = () => {
|
||||
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, workspaceViewId } = router.query;
|
||||
|
||||
const { filters, setFilters } = useMyIssuesFilters(workspaceSlug?.toString());
|
||||
|
||||
const { user } = useUser();
|
||||
const { memberRole } = useProjectMyMembership();
|
||||
|
||||
const { workspaceMembers } = useWorkspaceMembers(workspaceSlug?.toString() ?? "");
|
||||
|
||||
const { data: viewDetails, error } = useSWR(
|
||||
workspaceSlug && workspaceViewId ? WORKSPACE_VIEW_DETAILS(workspaceViewId.toString()) : null,
|
||||
workspaceSlug && workspaceViewId
|
||||
? () => workspaceService.getViewDetails(workspaceSlug.toString(), workspaceViewId.toString())
|
||||
: null
|
||||
);
|
||||
|
||||
const params: any = {
|
||||
assignees: filters?.assignees ? filters?.assignees.join(",") : undefined,
|
||||
subscriber: filters?.subscriber ? filters?.subscriber.join(",") : undefined,
|
||||
state: filters?.state ? filters?.state.join(",") : undefined,
|
||||
state_group: filters?.state_group ? filters?.state_group.join(",") : undefined,
|
||||
priority: filters?.priority ? filters?.priority.join(",") : undefined,
|
||||
labels: filters?.labels ? filters?.labels.join(",") : undefined,
|
||||
created_by: filters?.created_by ? filters?.created_by.join(",") : undefined,
|
||||
start_date: filters?.start_date ? filters?.start_date.join(",") : undefined,
|
||||
target_date: filters?.target_date ? filters?.target_date.join(",") : undefined,
|
||||
project: filters?.project ? filters?.project.join(",") : undefined,
|
||||
sub_issue: false,
|
||||
type: undefined,
|
||||
};
|
||||
|
||||
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]
|
||||
);
|
||||
|
||||
const nullFilters =
|
||||
filters &&
|
||||
Object.keys(filters).filter((key) => filters[key as keyof IIssueFilterOptions] === null);
|
||||
|
||||
const areFiltersApplied =
|
||||
filters &&
|
||||
Object.keys(filters).length > 0 &&
|
||||
nullFilters.length !== Object.keys(filters).length;
|
||||
|
||||
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
|
||||
);
|
||||
|
||||
return (
|
||||
<WorkspaceAuthorizationLayout
|
||||
breadcrumbs={
|
||||
<div className="flex gap-2 items-center">
|
||||
<CheckCircle className="h-[18px] w-[18px] stroke-[1.5]" />
|
||||
<span className="text-sm font-medium">
|
||||
{viewDetails ? `${viewDetails.name} Issues` : "Workspace Issues"}
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
right={
|
||||
<div className="flex items-center gap-2">
|
||||
<MyIssuesViewOptions />
|
||||
<PrimaryButton
|
||||
className="flex items-center gap-2"
|
||||
onClick={() => {
|
||||
const e = new KeyboardEvent("keydown", { key: "c" });
|
||||
document.dispatchEvent(e);
|
||||
}}
|
||||
>
|
||||
<PlusIcon className="h-4 w-4" />
|
||||
Add Issue
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<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();
|
||||
}}
|
||||
/>
|
||||
<CreateUpdateViewModal
|
||||
isOpen={createViewModal !== null}
|
||||
handleClose={() => setCreateViewModal(null)}
|
||||
viewType="workspace"
|
||||
preLoadedData={createViewModal}
|
||||
user={user}
|
||||
/>
|
||||
<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)} />
|
||||
{error ? (
|
||||
<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">
|
||||
<FiltersList
|
||||
filters={filters}
|
||||
setFilters={(updatedFilter) => setFilters(updatedFilter)}
|
||||
labels={workspaceLabels}
|
||||
members={workspaceMembers?.map((m) => m.member)}
|
||||
stateGroup={STATE_GROUP}
|
||||
project={joinedProjects}
|
||||
clearAllFilters={() =>
|
||||
setFilters({
|
||||
assignees: null,
|
||||
created_by: null,
|
||||
labels: null,
|
||||
priority: null,
|
||||
state_group: null,
|
||||
start_date: null,
|
||||
target_date: null,
|
||||
subscriber: null,
|
||||
project: null,
|
||||
})
|
||||
}
|
||||
/>
|
||||
<PrimaryButton
|
||||
onClick={() => {
|
||||
setCreateViewModal({
|
||||
query: 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={mutateIssues}
|
||||
handleIssueAction={handleIssueAction}
|
||||
disableUserActions={false}
|
||||
user={user}
|
||||
userAuth={memberRole}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</WorkspaceAuthorizationLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default WorkspaceViewAllIssue;
|
||||
205
web/pages/[workspaceSlug]/workspace-views/assigned.tsx
Normal file
205
web/pages/[workspaceSlug]/workspace-views/assigned.tsx
Normal file
|
|
@ -0,0 +1,205 @@
|
|||
import { 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";
|
||||
// layouts
|
||||
import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
|
||||
// components
|
||||
import { SpreadsheetView } from "components/core";
|
||||
import { WorkspaceViewsNavigation } from "components/workspace/views/workpace-view-navigation";
|
||||
import { WorkspaceIssuesViewOptions } from "components/issues/workspace-views/workspace-issue-view-option";
|
||||
import { CreateUpdateViewModal } from "components/views";
|
||||
import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
|
||||
// ui
|
||||
import { EmptyState, PrimaryButton } from "components/ui";
|
||||
// icons
|
||||
import { PlusIcon } from "@heroicons/react/24/outline";
|
||||
import { CheckCircle } from "lucide-react";
|
||||
// images
|
||||
import emptyView from "public/empty-state/view.svg";
|
||||
// fetch-keys
|
||||
import { WORKSPACE_VIEW_DETAILS, WORKSPACE_VIEW_ISSUES } from "constants/fetch-keys";
|
||||
// types
|
||||
import { IIssue } from "types";
|
||||
|
||||
const WorkspaceViewAssignedIssue: React.FC = () => {
|
||||
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, workspaceViewId } = 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 (
|
||||
<WorkspaceAuthorizationLayout
|
||||
breadcrumbs={
|
||||
<div className="flex gap-2 items-center">
|
||||
<CheckCircle className="h-[18px] w-[18px] stroke-[1.5]" />
|
||||
<span className="text-sm font-medium">
|
||||
{viewDetails ? `${viewDetails.name} Issues` : "Workspace Issues"}
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
right={
|
||||
<div className="flex items-center gap-2">
|
||||
<WorkspaceIssuesViewOptions />
|
||||
<PrimaryButton
|
||||
className="flex items-center gap-2"
|
||||
onClick={() => {
|
||||
const e = new KeyboardEvent("keydown", { key: "c" });
|
||||
document.dispatchEvent(e);
|
||||
}}
|
||||
>
|
||||
<PlusIcon className="h-4 w-4" />
|
||||
Add Issue
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<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();
|
||||
}}
|
||||
/>
|
||||
<CreateUpdateViewModal
|
||||
isOpen={createViewModal !== null}
|
||||
handleClose={() => setCreateViewModal(null)}
|
||||
viewType="workspace"
|
||||
preLoadedData={createViewModal}
|
||||
user={user}
|
||||
/>
|
||||
<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)} />
|
||||
{error ? (
|
||||
<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">
|
||||
<SpreadsheetView
|
||||
spreadsheetIssues={viewIssues}
|
||||
mutateIssues={mutateIssues}
|
||||
handleIssueAction={handleIssueAction}
|
||||
disableUserActions={false}
|
||||
user={user}
|
||||
userAuth={memberRole}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</WorkspaceAuthorizationLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default WorkspaceViewAssignedIssue;
|
||||
205
web/pages/[workspaceSlug]/workspace-views/created.tsx
Normal file
205
web/pages/[workspaceSlug]/workspace-views/created.tsx
Normal file
|
|
@ -0,0 +1,205 @@
|
|||
import { 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";
|
||||
// layouts
|
||||
import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
|
||||
// components
|
||||
import { SpreadsheetView } from "components/core";
|
||||
import { WorkspaceViewsNavigation } from "components/workspace/views/workpace-view-navigation";
|
||||
import { WorkspaceIssuesViewOptions } from "components/issues/workspace-views/workspace-issue-view-option";
|
||||
import { CreateUpdateViewModal } from "components/views";
|
||||
import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
|
||||
// ui
|
||||
import { EmptyState, PrimaryButton } from "components/ui";
|
||||
// icons
|
||||
import { PlusIcon } from "@heroicons/react/24/outline";
|
||||
import { CheckCircle } from "lucide-react";
|
||||
// images
|
||||
import emptyView from "public/empty-state/view.svg";
|
||||
// fetch-keys
|
||||
import { WORKSPACE_VIEW_DETAILS, WORKSPACE_VIEW_ISSUES } from "constants/fetch-keys";
|
||||
// types
|
||||
import { IIssue } from "types";
|
||||
|
||||
const WorkspaceViewCreatedIssue: React.FC = () => {
|
||||
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, workspaceViewId } = router.query;
|
||||
|
||||
const { user } = useUser();
|
||||
const { memberRole } = useProjectMyMembership();
|
||||
|
||||
const params: any = {
|
||||
created_by: 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 (
|
||||
<WorkspaceAuthorizationLayout
|
||||
breadcrumbs={
|
||||
<div className="flex gap-2 items-center">
|
||||
<CheckCircle className="h-[18px] w-[18px] stroke-[1.5]" />
|
||||
<span className="text-sm font-medium">
|
||||
{viewDetails ? `${viewDetails.name} Issues` : "Workspace Issues"}
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
right={
|
||||
<div className="flex items-center gap-2">
|
||||
<WorkspaceIssuesViewOptions />
|
||||
<PrimaryButton
|
||||
className="flex items-center gap-2"
|
||||
onClick={() => {
|
||||
const e = new KeyboardEvent("keydown", { key: "c" });
|
||||
document.dispatchEvent(e);
|
||||
}}
|
||||
>
|
||||
<PlusIcon className="h-4 w-4" />
|
||||
Add Issue
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<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();
|
||||
}}
|
||||
/>
|
||||
<CreateUpdateViewModal
|
||||
isOpen={createViewModal !== null}
|
||||
handleClose={() => setCreateViewModal(null)}
|
||||
viewType="workspace"
|
||||
preLoadedData={createViewModal}
|
||||
user={user}
|
||||
/>
|
||||
<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)} />
|
||||
{error ? (
|
||||
<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">
|
||||
<SpreadsheetView
|
||||
spreadsheetIssues={viewIssues}
|
||||
mutateIssues={mutateIssues}
|
||||
handleIssueAction={handleIssueAction}
|
||||
disableUserActions={false}
|
||||
user={user}
|
||||
userAuth={memberRole}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</WorkspaceAuthorizationLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default WorkspaceViewCreatedIssue;
|
||||
213
web/pages/[workspaceSlug]/workspace-views/index.tsx
Normal file
213
web/pages/[workspaceSlug]/workspace-views/index.tsx
Normal file
|
|
@ -0,0 +1,213 @@
|
|||
import React, { useState } from "react";
|
||||
|
||||
import Link from "next/link";
|
||||
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
import useSWR from "swr";
|
||||
|
||||
// services
|
||||
import workspaceService from "services/workspace.service";
|
||||
// hooks
|
||||
import useUser from "hooks/use-user";
|
||||
// layouts
|
||||
import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
|
||||
// components
|
||||
import { CreateUpdateViewModal, DeleteViewModal, SingleViewItem } from "components/views";
|
||||
import { WorkspaceIssuesViewOptions } from "components/issues/workspace-views/workspace-issue-view-option";
|
||||
// ui
|
||||
import { EmptyState, Input, Loader, PrimaryButton } from "components/ui";
|
||||
// icons
|
||||
import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
|
||||
import { PlusIcon } from "lucide-react";
|
||||
import { PhotoFilterOutlined } from "@mui/icons-material";
|
||||
// image
|
||||
import emptyView from "public/empty-state/view.svg";
|
||||
// types
|
||||
import type { NextPage } from "next";
|
||||
import { IView } from "types";
|
||||
// constants
|
||||
import { WORKSPACE_VIEWS_LIST } from "constants/fetch-keys";
|
||||
// helper
|
||||
import { truncateText } from "helpers/string.helper";
|
||||
|
||||
const WorkspaceViews: NextPage = () => {
|
||||
const [query, setQuery] = useState("");
|
||||
|
||||
const [createUpdateViewModal, setCreateUpdateViewModal] = useState(false);
|
||||
const [selectedViewToUpdate, setSelectedViewToUpdate] = useState<IView | null>(null);
|
||||
|
||||
const [deleteViewModal, setDeleteViewModal] = useState(false);
|
||||
const [selectedViewToDelete, setSelectedViewToDelete] = useState<IView | null>(null);
|
||||
|
||||
const router = useRouter();
|
||||
const { workspaceSlug } = router.query;
|
||||
|
||||
const { user } = useUser();
|
||||
|
||||
const { data: workspaceViews } = useSWR(
|
||||
workspaceSlug ? WORKSPACE_VIEWS_LIST(workspaceSlug as string) : null,
|
||||
workspaceSlug ? () => workspaceService.getAllViews(workspaceSlug as string) : null
|
||||
);
|
||||
|
||||
const defaultWorkspaceViewsList = [
|
||||
{
|
||||
key: "all",
|
||||
label: "All Issues",
|
||||
href: `/${workspaceSlug}/workspace-views/all-issues`,
|
||||
},
|
||||
{
|
||||
key: "assigned",
|
||||
label: "Assigned",
|
||||
href: `/${workspaceSlug}/workspace-views/assigned`,
|
||||
},
|
||||
{
|
||||
key: "created",
|
||||
label: "Created",
|
||||
href: `/${workspaceSlug}/workspace-views/created`,
|
||||
},
|
||||
{
|
||||
key: "subscribed",
|
||||
label: "Subscribed",
|
||||
href: `/${workspaceSlug}/workspace-views/subscribed`,
|
||||
},
|
||||
];
|
||||
|
||||
const filteredDefaultOptions =
|
||||
query === ""
|
||||
? defaultWorkspaceViewsList
|
||||
: defaultWorkspaceViewsList?.filter((option) =>
|
||||
option.label.toLowerCase().includes(query.toLowerCase())
|
||||
);
|
||||
|
||||
const filteredOptions =
|
||||
query === ""
|
||||
? workspaceViews
|
||||
: workspaceViews?.filter((option) => option.name.toLowerCase().includes(query.toLowerCase()));
|
||||
|
||||
const handleEditView = (view: IView) => {
|
||||
setSelectedViewToUpdate(view);
|
||||
setCreateUpdateViewModal(true);
|
||||
};
|
||||
|
||||
const handleDeleteView = (view: IView) => {
|
||||
setSelectedViewToDelete(view);
|
||||
setDeleteViewModal(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<WorkspaceAuthorizationLayout
|
||||
breadcrumbs={
|
||||
<div className="flex gap-2 items-center">
|
||||
<span className="text-sm font-medium">Workspace Views</span>
|
||||
</div>
|
||||
}
|
||||
right={
|
||||
<div className="flex items-center gap-2">
|
||||
<WorkspaceIssuesViewOptions />
|
||||
|
||||
<PrimaryButton
|
||||
className="flex items-center gap-2"
|
||||
onClick={() => setCreateUpdateViewModal(true)}
|
||||
>
|
||||
<PlusIcon className="h-4 w-4" />
|
||||
New View
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<CreateUpdateViewModal
|
||||
isOpen={createUpdateViewModal}
|
||||
handleClose={() => {
|
||||
setCreateUpdateViewModal(false);
|
||||
setSelectedViewToUpdate(null);
|
||||
}}
|
||||
data={selectedViewToUpdate}
|
||||
viewType="workspace"
|
||||
user={user}
|
||||
/>
|
||||
<DeleteViewModal
|
||||
isOpen={deleteViewModal}
|
||||
data={selectedViewToDelete}
|
||||
setIsOpen={setDeleteViewModal}
|
||||
viewType="workspace"
|
||||
user={user}
|
||||
/>
|
||||
<div className="flex flex-col">
|
||||
<div className="h-full w-full flex flex-col overflow-hidden">
|
||||
<div className="flex items-center gap-2.5 w-full px-5 py-3 border-b border-custom-border-200">
|
||||
<MagnifyingGlassIcon className="h-4 w-4 text-custom-text-200" />
|
||||
<Input
|
||||
className="w-full bg-transparent text-xs leading-5 text-custom-text-200 placeholder:text-custom-text-400 !p-0 focus:outline-none"
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
placeholder="Search"
|
||||
mode="trueTransparent"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{filteredDefaultOptions &&
|
||||
filteredDefaultOptions.length > 0 &&
|
||||
filteredDefaultOptions.map((option) => (
|
||||
<div className="group hover:bg-custom-background-90 border-b border-custom-border-200">
|
||||
<Link href={option.href}>
|
||||
<a className="flex items-center justify-between relative rounded px-5 py-4 w-full">
|
||||
<div className="flex items-center justify-between w-full">
|
||||
<div className="flex items-center gap-4">
|
||||
<div
|
||||
className={`flex items-center justify-center h-10 w-10 rounded bg-custom-background-90 group-hover:bg-custom-background-100`}
|
||||
>
|
||||
<PhotoFilterOutlined className="!text-base !leading-6" />
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<p className="truncate text-sm leading-4 font-medium">
|
||||
{truncateText(option.label, 75)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{filteredOptions ? (
|
||||
filteredOptions.length > 0 ? (
|
||||
<div>
|
||||
{filteredOptions.map((view) => (
|
||||
<SingleViewItem
|
||||
key={view.id}
|
||||
view={view}
|
||||
viewType="workspace"
|
||||
handleEditView={() => handleEditView(view)}
|
||||
handleDeleteView={() => handleDeleteView(view)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<EmptyState
|
||||
title="Get focused with views"
|
||||
description="Views aid in saving your issues by applying various filters and grouping options."
|
||||
image={emptyView}
|
||||
primaryButton={{
|
||||
icon: <PlusIcon className="h-4 w-4" />,
|
||||
text: "New View",
|
||||
onClick: () => setCreateUpdateViewModal(true),
|
||||
}}
|
||||
/>
|
||||
)
|
||||
) : (
|
||||
<Loader className="space-y-1.5">
|
||||
<Loader.Item height="72px" />
|
||||
<Loader.Item height="72px" />
|
||||
<Loader.Item height="72px" />
|
||||
<Loader.Item height="72px" />
|
||||
<Loader.Item height="72px" />
|
||||
</Loader>
|
||||
)}
|
||||
</div>
|
||||
</WorkspaceAuthorizationLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default WorkspaceViews;
|
||||
205
web/pages/[workspaceSlug]/workspace-views/subscribed.tsx
Normal file
205
web/pages/[workspaceSlug]/workspace-views/subscribed.tsx
Normal file
|
|
@ -0,0 +1,205 @@
|
|||
import { 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";
|
||||
// layouts
|
||||
import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
|
||||
// components
|
||||
import { SpreadsheetView } from "components/core";
|
||||
import { WorkspaceViewsNavigation } from "components/workspace/views/workpace-view-navigation";
|
||||
import { WorkspaceIssuesViewOptions } from "components/issues/workspace-views/workspace-issue-view-option";
|
||||
import { CreateUpdateViewModal } from "components/views";
|
||||
import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
|
||||
// ui
|
||||
import { EmptyState, PrimaryButton } from "components/ui";
|
||||
// icons
|
||||
import { PlusIcon } from "@heroicons/react/24/outline";
|
||||
import { CheckCircle } from "lucide-react";
|
||||
// images
|
||||
import emptyView from "public/empty-state/view.svg";
|
||||
// fetch-keys
|
||||
import { WORKSPACE_VIEW_DETAILS, WORKSPACE_VIEW_ISSUES } from "constants/fetch-keys";
|
||||
// types
|
||||
import { IIssue } from "types";
|
||||
|
||||
const WorkspaceViewSubscribedIssue: React.FC = () => {
|
||||
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, workspaceViewId } = router.query;
|
||||
|
||||
const { user } = useUser();
|
||||
const { memberRole } = useProjectMyMembership();
|
||||
|
||||
const params: any = {
|
||||
subscriber: 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 (
|
||||
<WorkspaceAuthorizationLayout
|
||||
breadcrumbs={
|
||||
<div className="flex gap-2 items-center">
|
||||
<CheckCircle className="h-[18px] w-[18px] stroke-[1.5]" />
|
||||
<span className="text-sm font-medium">
|
||||
{viewDetails ? `${viewDetails.name} Issues` : "Workspace Issues"}
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
right={
|
||||
<div className="flex items-center gap-2">
|
||||
<WorkspaceIssuesViewOptions />
|
||||
<PrimaryButton
|
||||
className="flex items-center gap-2"
|
||||
onClick={() => {
|
||||
const e = new KeyboardEvent("keydown", { key: "c" });
|
||||
document.dispatchEvent(e);
|
||||
}}
|
||||
>
|
||||
<PlusIcon className="h-4 w-4" />
|
||||
Add Issue
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<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();
|
||||
}}
|
||||
/>
|
||||
<CreateUpdateViewModal
|
||||
isOpen={createViewModal !== null}
|
||||
handleClose={() => setCreateViewModal(null)}
|
||||
viewType="workspace"
|
||||
preLoadedData={createViewModal}
|
||||
user={user}
|
||||
/>
|
||||
<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)} />
|
||||
{error ? (
|
||||
<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">
|
||||
<SpreadsheetView
|
||||
spreadsheetIssues={viewIssues}
|
||||
mutateIssues={mutateIssues}
|
||||
handleIssueAction={handleIssueAction}
|
||||
disableUserActions={false}
|
||||
user={user}
|
||||
userAuth={memberRole}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</WorkspaceAuthorizationLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default WorkspaceViewSubscribedIssue;
|
||||
Loading…
Add table
Add a link
Reference in a new issue