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 { observer } from "mobx-react-lite";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
// hooks
|
||||
import { List, PlusIcon, Sheet } from "lucide-react";
|
||||
// icons
|
||||
import { PlusIcon } from "lucide-react";
|
||||
// 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 { DisplayFiltersSelection, FiltersDropdown, FilterSelection } from "@/components/issues";
|
||||
// components
|
||||
import { CreateUpdateWorkspaceViewModal } from "@/components/workspace";
|
||||
// ui
|
||||
// icons
|
||||
// types
|
||||
// constants
|
||||
import { EIssueFilterType, EIssuesStoreType, ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "@/constants/issue";
|
||||
import { EUserWorkspaceRoles } from "@/constants/workspace";
|
||||
// hooks
|
||||
import { useLabel, useMember, useUser, useIssues } from "@/hooks/store";
|
||||
import { usePlatformOS } from "@/hooks/use-platform-os";
|
||||
|
||||
const GLOBAL_VIEW_LAYOUTS = [
|
||||
{ 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;
|
||||
export const GlobalIssuesHeader: React.FC = observer(() => {
|
||||
// states
|
||||
const [createViewModal, setCreateViewModal] = useState(false);
|
||||
// router
|
||||
@ -46,7 +34,6 @@ export const GlobalIssuesHeader: React.FC<Props> = observer((props) => {
|
||||
const {
|
||||
workspace: { workspaceMemberIds },
|
||||
} = useMember();
|
||||
const { isMobile } = usePlatformOS();
|
||||
|
||||
const issueFilters = globalViewId ? filters[globalViewId.toString()] : undefined;
|
||||
|
||||
@ -116,44 +103,12 @@ export const GlobalIssuesHeader: React.FC<Props> = observer((props) => {
|
||||
<Breadcrumbs.BreadcrumbItem
|
||||
type="text"
|
||||
link={
|
||||
<BreadcrumbLink
|
||||
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" />
|
||||
)
|
||||
}
|
||||
/>
|
||||
<BreadcrumbLink label={`All Issues`} icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />} />
|
||||
}
|
||||
/>
|
||||
</Breadcrumbs>
|
||||
</div>
|
||||
<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) => (
|
||||
<Link key={layout.key} href={`/${workspaceSlug}/${layout.link}`}>
|
||||
<span>
|
||||
<Tooltip tooltipContent={layout.title} isMobile={isMobile}>
|
||||
<div
|
||||
className={`group grid h-[22px] w-7 place-items-center overflow-hidden rounded transition-all hover:bg-custom-background-100 ${
|
||||
activeLayout === layout.key ? "bg-custom-background-100 shadow-custom-shadow-2xs" : ""
|
||||
}`}
|
||||
>
|
||||
<layout.icon
|
||||
size={14}
|
||||
strokeWidth={2}
|
||||
className={`${activeLayout === layout.key ? "text-custom-text-100" : "text-custom-text-200"}`}
|
||||
/>
|
||||
</div>
|
||||
</Tooltip>
|
||||
</span>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{activeLayout === "spreadsheet" && (
|
||||
<>
|
||||
<FiltersDropdown title="Filters" placement="bottom-end">
|
||||
<FilterSelection
|
||||
@ -174,7 +129,6 @@ export const GlobalIssuesHeader: React.FC<Props> = observer((props) => {
|
||||
/>
|
||||
</FiltersDropdown>
|
||||
</>
|
||||
)}
|
||||
{isAuthorizedUser && (
|
||||
<Button variant="primary" size="sm" prependIcon={<PlusIcon />} onClick={() => setCreateViewModal(true)}>
|
||||
New View
|
||||
|
@ -1,3 +1,4 @@
|
||||
import isEmpty from "lodash/isEmpty";
|
||||
import isEqual from "lodash/isEqual";
|
||||
import { observer } from "mobx-react-lite";
|
||||
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 isDefaultView = DEFAULT_GLOBAL_VIEWS_LIST.map((view) => view.key).includes(globalViewId as TStaticViewTypes);
|
||||
|
||||
// return if no filters are applied
|
||||
if (!appliedFilters && areFiltersEqual) return null;
|
||||
|
||||
if (isEmpty(appliedFilters) && areFiltersEqual) return null;
|
||||
|
||||
return (
|
||||
<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 { observer } from "mobx-react-lite";
|
||||
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
|
||||
if (!appliedFilters && areFiltersEqual) return null;
|
||||
if (isEmpty(appliedFilters) && areFiltersEqual) return null;
|
||||
|
||||
const handleUpdateView = () => {
|
||||
if (!workspaceSlug || !projectId || !viewId || !viewDetails) return;
|
||||
|
@ -46,7 +46,7 @@ const GlobalViewIssuesPage: NextPageWithLayout = observer(() => {
|
||||
});
|
||||
|
||||
GlobalViewIssuesPage.getLayout = function getLayout(page: ReactElement) {
|
||||
return <AppLayout header={<GlobalIssuesHeader activeLayout="spreadsheet" />}>{page}</AppLayout>;
|
||||
return <AppLayout header={<GlobalIssuesHeader />}>{page}</AppLayout>;
|
||||
};
|
||||
|
||||
export default GlobalViewIssuesPage;
|
||||
|
@ -52,7 +52,7 @@ const WorkspaceViewsPage: NextPageWithLayout = observer(() => {
|
||||
});
|
||||
|
||||
WorkspaceViewsPage.getLayout = function getLayout(page: ReactElement) {
|
||||
return <AppLayout header={<GlobalIssuesHeader activeLayout="list" />}>{page}</AppLayout>;
|
||||
return <AppLayout header={<GlobalIssuesHeader />}>{page}</AppLayout>;
|
||||
};
|
||||
|
||||
export default WorkspaceViewsPage;
|
||||
|
Loading…
Reference in New Issue
Block a user