forked from github/plane
[WEB-1065] chore: workspace view and empty filter improvement (#4308)
* chore: workspace view layout improvement * fix: empty applied filters * chore: code refactor * chore: code refactor * fix: build errors --------- Co-authored-by: sriram veeraghanta <veeraghanta.sriram@gmail.com>
This commit is contained in:
parent
03065d2c1d
commit
e5681534d7
@ -1,35 +1,23 @@
|
|||||||
import { useCallback, useState } from "react";
|
import { useCallback, useState } from "react";
|
||||||
import { observer } from "mobx-react-lite";
|
import { observer } from "mobx-react-lite";
|
||||||
import Link from "next/link";
|
|
||||||
import { useRouter } from "next/router";
|
import { useRouter } from "next/router";
|
||||||
// hooks
|
// icons
|
||||||
import { List, PlusIcon, Sheet } from "lucide-react";
|
import { PlusIcon } from "lucide-react";
|
||||||
|
// types
|
||||||
import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions } from "@plane/types";
|
import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions } from "@plane/types";
|
||||||
import { Breadcrumbs, Button, LayersIcon, PhotoFilterIcon, Tooltip } from "@plane/ui";
|
// ui
|
||||||
|
import { Breadcrumbs, Button, LayersIcon } from "@plane/ui";
|
||||||
|
// components
|
||||||
import { BreadcrumbLink } from "@/components/common";
|
import { BreadcrumbLink } from "@/components/common";
|
||||||
import { DisplayFiltersSelection, FiltersDropdown, FilterSelection } from "@/components/issues";
|
import { DisplayFiltersSelection, FiltersDropdown, FilterSelection } from "@/components/issues";
|
||||||
// components
|
|
||||||
import { CreateUpdateWorkspaceViewModal } from "@/components/workspace";
|
import { CreateUpdateWorkspaceViewModal } from "@/components/workspace";
|
||||||
// ui
|
|
||||||
// icons
|
|
||||||
// types
|
|
||||||
// constants
|
// constants
|
||||||
import { EIssueFilterType, EIssuesStoreType, ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "@/constants/issue";
|
import { EIssueFilterType, EIssuesStoreType, ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "@/constants/issue";
|
||||||
import { EUserWorkspaceRoles } from "@/constants/workspace";
|
import { EUserWorkspaceRoles } from "@/constants/workspace";
|
||||||
|
// hooks
|
||||||
import { useLabel, useMember, useUser, useIssues } from "@/hooks/store";
|
import { useLabel, useMember, useUser, useIssues } from "@/hooks/store";
|
||||||
import { usePlatformOS } from "@/hooks/use-platform-os";
|
|
||||||
|
|
||||||
const GLOBAL_VIEW_LAYOUTS = [
|
export const GlobalIssuesHeader: React.FC = observer(() => {
|
||||||
{ key: "list", title: "List", link: "workspace-views", icon: List },
|
|
||||||
{ key: "spreadsheet", title: "Spreadsheet", link: "workspace-views/all-issues", icon: Sheet },
|
|
||||||
];
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
activeLayout: "list" | "spreadsheet";
|
|
||||||
};
|
|
||||||
|
|
||||||
export const GlobalIssuesHeader: React.FC<Props> = observer((props) => {
|
|
||||||
const { activeLayout } = props;
|
|
||||||
// states
|
// states
|
||||||
const [createViewModal, setCreateViewModal] = useState(false);
|
const [createViewModal, setCreateViewModal] = useState(false);
|
||||||
// router
|
// router
|
||||||
@ -46,7 +34,6 @@ export const GlobalIssuesHeader: React.FC<Props> = observer((props) => {
|
|||||||
const {
|
const {
|
||||||
workspace: { workspaceMemberIds },
|
workspace: { workspaceMemberIds },
|
||||||
} = useMember();
|
} = useMember();
|
||||||
const { isMobile } = usePlatformOS();
|
|
||||||
|
|
||||||
const issueFilters = globalViewId ? filters[globalViewId.toString()] : undefined;
|
const issueFilters = globalViewId ? filters[globalViewId.toString()] : undefined;
|
||||||
|
|
||||||
@ -116,65 +103,32 @@ export const GlobalIssuesHeader: React.FC<Props> = observer((props) => {
|
|||||||
<Breadcrumbs.BreadcrumbItem
|
<Breadcrumbs.BreadcrumbItem
|
||||||
type="text"
|
type="text"
|
||||||
link={
|
link={
|
||||||
<BreadcrumbLink
|
<BreadcrumbLink label={`All Issues`} icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />} />
|
||||||
label={`All ${activeLayout === "spreadsheet" ? "Issues" : "Views"}`}
|
|
||||||
icon={
|
|
||||||
activeLayout === "spreadsheet" ? (
|
|
||||||
<LayersIcon className="h-4 w-4 text-custom-text-300" />
|
|
||||||
) : (
|
|
||||||
<PhotoFilterIcon className="h-4 w-4 text-custom-text-300" />
|
|
||||||
)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
</Breadcrumbs>
|
</Breadcrumbs>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<div className="flex items-center gap-1 rounded bg-custom-background-80 p-1">
|
<>
|
||||||
{GLOBAL_VIEW_LAYOUTS.map((layout) => (
|
<FiltersDropdown title="Filters" placement="bottom-end">
|
||||||
<Link key={layout.key} href={`/${workspaceSlug}/${layout.link}`}>
|
<FilterSelection
|
||||||
<span>
|
layoutDisplayFiltersOptions={ISSUE_DISPLAY_FILTERS_BY_LAYOUT.my_issues.spreadsheet}
|
||||||
<Tooltip tooltipContent={layout.title} isMobile={isMobile}>
|
filters={issueFilters?.filters ?? {}}
|
||||||
<div
|
handleFiltersUpdate={handleFiltersUpdate}
|
||||||
className={`group grid h-[22px] w-7 place-items-center overflow-hidden rounded transition-all hover:bg-custom-background-100 ${
|
labels={workspaceLabels ?? undefined}
|
||||||
activeLayout === layout.key ? "bg-custom-background-100 shadow-custom-shadow-2xs" : ""
|
memberIds={workspaceMemberIds ?? undefined}
|
||||||
}`}
|
/>
|
||||||
>
|
</FiltersDropdown>
|
||||||
<layout.icon
|
<FiltersDropdown title="Display" placement="bottom-end">
|
||||||
size={14}
|
<DisplayFiltersSelection
|
||||||
strokeWidth={2}
|
layoutDisplayFiltersOptions={ISSUE_DISPLAY_FILTERS_BY_LAYOUT.my_issues.spreadsheet}
|
||||||
className={`${activeLayout === layout.key ? "text-custom-text-100" : "text-custom-text-200"}`}
|
displayFilters={issueFilters?.displayFilters ?? {}}
|
||||||
/>
|
handleDisplayFiltersUpdate={handleDisplayFilters}
|
||||||
</div>
|
displayProperties={issueFilters?.displayProperties ?? {}}
|
||||||
</Tooltip>
|
handleDisplayPropertiesUpdate={handleDisplayProperties}
|
||||||
</span>
|
/>
|
||||||
</Link>
|
</FiltersDropdown>
|
||||||
))}
|
</>
|
||||||
</div>
|
|
||||||
|
|
||||||
{activeLayout === "spreadsheet" && (
|
|
||||||
<>
|
|
||||||
<FiltersDropdown title="Filters" placement="bottom-end">
|
|
||||||
<FilterSelection
|
|
||||||
layoutDisplayFiltersOptions={ISSUE_DISPLAY_FILTERS_BY_LAYOUT.my_issues.spreadsheet}
|
|
||||||
filters={issueFilters?.filters ?? {}}
|
|
||||||
handleFiltersUpdate={handleFiltersUpdate}
|
|
||||||
labels={workspaceLabels ?? undefined}
|
|
||||||
memberIds={workspaceMemberIds ?? undefined}
|
|
||||||
/>
|
|
||||||
</FiltersDropdown>
|
|
||||||
<FiltersDropdown title="Display" placement="bottom-end">
|
|
||||||
<DisplayFiltersSelection
|
|
||||||
layoutDisplayFiltersOptions={ISSUE_DISPLAY_FILTERS_BY_LAYOUT.my_issues.spreadsheet}
|
|
||||||
displayFilters={issueFilters?.displayFilters ?? {}}
|
|
||||||
handleDisplayFiltersUpdate={handleDisplayFilters}
|
|
||||||
displayProperties={issueFilters?.displayProperties ?? {}}
|
|
||||||
handleDisplayPropertiesUpdate={handleDisplayProperties}
|
|
||||||
/>
|
|
||||||
</FiltersDropdown>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
{isAuthorizedUser && (
|
{isAuthorizedUser && (
|
||||||
<Button variant="primary" size="sm" prependIcon={<PlusIcon />} onClick={() => setCreateViewModal(true)}>
|
<Button variant="primary" size="sm" prependIcon={<PlusIcon />} onClick={() => setCreateViewModal(true)}>
|
||||||
New View
|
New View
|
||||||
|
@ -1,3 +1,4 @@
|
|||||||
|
import isEmpty from "lodash/isEmpty";
|
||||||
import isEqual from "lodash/isEqual";
|
import isEqual from "lodash/isEqual";
|
||||||
import { observer } from "mobx-react-lite";
|
import { observer } from "mobx-react-lite";
|
||||||
import { useRouter } from "next/router";
|
import { useRouter } from "next/router";
|
||||||
@ -104,14 +105,15 @@ export const GlobalViewsAppliedFiltersRoot = observer((props: Props) => {
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const areFiltersEqual = isEqual(appliedFilters, viewDetails?.filters);
|
const areFiltersEqual = isEqual(appliedFilters ?? {}, viewDetails?.filters ?? {});
|
||||||
|
|
||||||
const isAuthorizedUser = !!currentWorkspaceRole && currentWorkspaceRole >= EUserWorkspaceRoles.MEMBER;
|
const isAuthorizedUser = !!currentWorkspaceRole && currentWorkspaceRole >= EUserWorkspaceRoles.MEMBER;
|
||||||
|
|
||||||
const isDefaultView = DEFAULT_GLOBAL_VIEWS_LIST.map((view) => view.key).includes(globalViewId as TStaticViewTypes);
|
const isDefaultView = DEFAULT_GLOBAL_VIEWS_LIST.map((view) => view.key).includes(globalViewId as TStaticViewTypes);
|
||||||
|
|
||||||
// return if no filters are applied
|
// return if no filters are applied
|
||||||
if (!appliedFilters && areFiltersEqual) return null;
|
|
||||||
|
if (isEmpty(appliedFilters) && areFiltersEqual) return null;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex items-start justify-between gap-4 p-4">
|
<div className="flex items-start justify-between gap-4 p-4">
|
||||||
|
@ -1,3 +1,4 @@
|
|||||||
|
import isEmpty from "lodash/isEmpty";
|
||||||
import isEqual from "lodash/isEqual";
|
import isEqual from "lodash/isEqual";
|
||||||
import { observer } from "mobx-react-lite";
|
import { observer } from "mobx-react-lite";
|
||||||
import { useRouter } from "next/router";
|
import { useRouter } from "next/router";
|
||||||
@ -78,9 +79,10 @@ export const ProjectViewAppliedFiltersRoot: React.FC = observer(() => {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const areFiltersEqual = isEqual(appliedFilters, viewDetails?.filters);
|
const areFiltersEqual = isEqual(appliedFilters ?? {}, viewDetails?.filters ?? {});
|
||||||
|
|
||||||
// return if no filters are applied
|
// return if no filters are applied
|
||||||
if (!appliedFilters && areFiltersEqual) return null;
|
if (isEmpty(appliedFilters) && areFiltersEqual) return null;
|
||||||
|
|
||||||
const handleUpdateView = () => {
|
const handleUpdateView = () => {
|
||||||
if (!workspaceSlug || !projectId || !viewId || !viewDetails) return;
|
if (!workspaceSlug || !projectId || !viewId || !viewDetails) return;
|
||||||
|
@ -29,8 +29,8 @@ const GlobalViewIssuesPage: NextPageWithLayout = observer(() => {
|
|||||||
currentWorkspace?.name && defaultView?.label
|
currentWorkspace?.name && defaultView?.label
|
||||||
? `${currentWorkspace?.name} - ${defaultView?.label}`
|
? `${currentWorkspace?.name} - ${defaultView?.label}`
|
||||||
: currentWorkspace?.name && globalViewDetails?.name
|
: currentWorkspace?.name && globalViewDetails?.name
|
||||||
? `${currentWorkspace?.name} - ${globalViewDetails?.name}`
|
? `${currentWorkspace?.name} - ${globalViewDetails?.name}`
|
||||||
: undefined;
|
: undefined;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
@ -46,7 +46,7 @@ const GlobalViewIssuesPage: NextPageWithLayout = observer(() => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
GlobalViewIssuesPage.getLayout = function getLayout(page: ReactElement) {
|
GlobalViewIssuesPage.getLayout = function getLayout(page: ReactElement) {
|
||||||
return <AppLayout header={<GlobalIssuesHeader activeLayout="spreadsheet" />}>{page}</AppLayout>;
|
return <AppLayout header={<GlobalIssuesHeader />}>{page}</AppLayout>;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default GlobalViewIssuesPage;
|
export default GlobalViewIssuesPage;
|
||||||
|
@ -52,7 +52,7 @@ const WorkspaceViewsPage: NextPageWithLayout = observer(() => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
WorkspaceViewsPage.getLayout = function getLayout(page: ReactElement) {
|
WorkspaceViewsPage.getLayout = function getLayout(page: ReactElement) {
|
||||||
return <AppLayout header={<GlobalIssuesHeader activeLayout="list" />}>{page}</AppLayout>;
|
return <AppLayout header={<GlobalIssuesHeader />}>{page}</AppLayout>;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default WorkspaceViewsPage;
|
export default WorkspaceViewsPage;
|
||||||
|
Loading…
Reference in New Issue
Block a user