github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: empty state loaders and filter cancel state update for modules and cycles (#3653)

Browse Source
This commit is contained in:
guru_sainath 2024-02-13 20:58:44 +05:30 committed by GitHub
parent 571b89632c
commit 25a2816a76
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
12 changed files with 244 additions and 211 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
web/components/issues/issue-layouts/filters/applied-filters/roots/cycle-root.tsx
View File

@ -36,22 +36,34 @@ export const CycleAppliedFiltersRoot: React.FC = observer(() => {
const handleRemoveFilter = (key: keyof IIssueFilterOptions, value: string | null) => {
if (!workspaceSlug || !projectId || !cycleId) return;
if (!value) {
updateFilters(workspaceSlug, projectId, EIssueFilterType.FILTERS, {
updateFilters(
workspaceSlug,
projectId,
EIssueFilterType.FILTERS,
{
[key]: null,
});
},
cycleId
);
return;
}
let newValues = issueFilters?.filters?.[key] ?? [];
newValues = newValues.filter((val) => val !== value);
updateFilters(workspaceSlug, projectId, EIssueFilterType.FILTERS, {
updateFilters(
workspaceSlug,
projectId,
EIssueFilterType.FILTERS,
{
[key]: newValues,
});
},
cycleId
);
};
const handleClearAllFilters = () => {
if (!workspaceSlug || !projectId) return;
if (!workspaceSlug || !projectId || !cycleId) return;
const newFilters: IIssueFilterOptions = {};
Object.keys(userFilters ?? {}).forEach((key) => {
newFilters[key as keyof IIssueFilterOptions] = null;

24
web/components/issues/issue-layouts/filters/applied-filters/roots/module-root.tsx
View File

@ -33,24 +33,36 @@ export const ModuleAppliedFiltersRoot: React.FC = observer(() => {
});
const handleRemoveFilter = (key: keyof IIssueFilterOptions, value: string | null) => {
if (!workspaceSlug || !projectId) return;
if (!workspaceSlug || !projectId || !moduleId) return;
if (!value) {
updateFilters(workspaceSlug, projectId, EIssueFilterType.FILTERS, {
updateFilters(
workspaceSlug,
projectId,
EIssueFilterType.FILTERS,
{
[key]: null,
});
},
moduleId
);
return;
}
let newValues = issueFilters?.filters?.[key] ?? [];
newValues = newValues.filter((val) => val !== value);
updateFilters(workspaceSlug, projectId, EIssueFilterType.FILTERS, {
updateFilters(
workspaceSlug,
projectId,
EIssueFilterType.FILTERS,
{
[key]: newValues,
});
},
moduleId
);
};
const handleClearAllFilters = () => {
if (!workspaceSlug || !projectId) return;
if (!workspaceSlug || !projectId || !moduleId) return;
const newFilters: IIssueFilterOptions = {};
Object.keys(userFilters ?? {}).forEach((key) => {
newFilters[key as keyof IIssueFilterOptions] = null;

20
web/components/issues/issue-layouts/roots/all-issue-layout-root.tsx
View File

@ -1,4 +1,4 @@
import React, { useCallback, useMemo } from "react";
import React, { Fragment, useCallback, useMemo } from "react";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
import useSWR from "swr";
@ -181,8 +181,11 @@ export const AllIssueLayoutRoot: React.FC = observer(() => {
return <SpreadsheetLayoutLoader />;
}
if (issueIds.length === 0) {
return (
<div className="relative flex h-full w-full flex-col overflow-hidden">
<div className="relative h-full w-full overflow-auto">
<GlobalViewsAppliedFiltersRoot globalViewId={globalViewId} />
{issueIds.length === 0 ? (
<EmptyState
image={emptyStateImage}
title={(workspaceProjectIds ?? []).length > 0 ? currentViewDetails.title : "No project"}
@ -213,13 +216,8 @@ export const AllIssueLayoutRoot: React.FC = observer(() => {
}
disabled={!isEditingAllowed}
/>
);
}
return (
<div className="relative flex h-full w-full flex-col overflow-hidden">
<GlobalViewsAppliedFiltersRoot globalViewId={globalViewId} />
<div className="relative h-full w-full overflow-auto">
) : (
<Fragment>
<SpreadsheetView
displayProperties={issueFilters?.displayProperties ?? {}}
displayFilters={issueFilters?.displayFilters ?? {}}
@ -230,9 +228,11 @@ export const AllIssueLayoutRoot: React.FC = observer(() => {
canEditProperties={canEditProperties}
viewId={globalViewId}
/>
</div>
{/* peek overview */}
<IssuePeekOverview />
</Fragment>
)}
</div>
</div>
);
});

19
web/components/issues/issue-layouts/roots/archived-issue-layout-root.tsx
View File

@ -1,4 +1,4 @@
import React from "react";
import React, { Fragment } from "react";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
import useSWR from "swr";
@ -40,22 +40,23 @@ export const ArchivedIssueLayoutRoot: React.FC = observer(() => {
return <ListLayoutLoader />;
}
if (issues?.groupedIssueIds?.length === 0) {
return (
<div className="relative h-full w-full overflow-y-auto">
<ProjectArchivedEmptyState />
</div>
);
}
if (!workspaceSlug || !projectId) return <></>;
return (
<div className="relative flex h-full w-full flex-col overflow-hidden">
<ArchivedIssueAppliedFiltersRoot />
{issues?.groupedIssueIds?.length === 0 ? (
<div className="relative h-full w-full overflow-y-auto">
<ProjectArchivedEmptyState />
</div>
) : (
<Fragment>
<div className="relative h-full w-full overflow-auto">
<ArchivedIssueListLayout />
</div>
<IssuePeekOverview is_archived />
</Fragment>
)}
</div>
);
});

25
web/components/issues/issue-layouts/roots/cycle-layout-root.tsx
View File

@ -1,4 +1,4 @@
import React, { useState } from "react";
import React, { Fragment, useState } from "react";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
import useSWR from "swr";
@ -69,8 +69,14 @@ export const CycleLayoutRoot: React.FC = observer(() => {
);
}
if (issues?.groupedIssueIds?.length === 0) {
return (
<>
<TransferIssuesModal handleClose={() => setTransferIssuesModal(false)} isOpen={transferIssuesModal} />
<div className="relative flex h-full w-full flex-col overflow-hidden">
{cycleStatus === "completed" && <TransferIssues handleClick={() => setTransferIssuesModal(true)} />}
<CycleAppliedFiltersRoot />
{issues?.groupedIssueIds?.length === 0 ? (
<div className="relative h-full w-full overflow-y-auto">
<CycleEmptyState
workspaceSlug={workspaceSlug.toString()}
@ -79,17 +85,8 @@ export const CycleLayoutRoot: React.FC = observer(() => {
activeLayout={activeLayout}
/>
</div>
);
}
return (
<>
<TransferIssuesModal handleClose={() => setTransferIssuesModal(false)} isOpen={transferIssuesModal} />
<div className="relative flex h-full w-full flex-col overflow-hidden">
{cycleStatus === "completed" && <TransferIssues handleClick={() => setTransferIssuesModal(true)} />}
<CycleAppliedFiltersRoot />
) : (
<Fragment>
<div className="h-full w-full overflow-auto">
{activeLayout === "list" ? (
<CycleListLayout />
@ -105,6 +102,8 @@ export const CycleLayoutRoot: React.FC = observer(() => {
</div>
{/* peek overview */}
<IssuePeekOverview />
</Fragment>
)}
</div>
</>
);

19
web/components/issues/issue-layouts/roots/draft-issue-layout-root.tsx
View File

@ -55,22 +55,25 @@ export const DraftIssueLayoutRoot: React.FC = observer(() => {
);
}
if (issues?.groupedIssueIds?.length === 0) {
return (
<div className="relative h-full w-full overflow-y-auto">
<ProjectDraftEmptyState />
</div>
);
}
return (
<div className="relative flex h-full w-full flex-col overflow-hidden">
<DraftIssueAppliedFiltersRoot />
{issues?.groupedIssueIds?.length === 0 ? (
<div className="relative h-full w-full overflow-y-auto">
<ProjectDraftEmptyState />
</div>
) : (
<div className="relative h-full w-full overflow-auto">
{activeLayout === "list" ? <DraftIssueListLayout /> : activeLayout === "kanban" ? <DraftKanBanLayout /> : null}
{activeLayout === "list" ? (
<DraftIssueListLayout />
) : activeLayout === "kanban" ? (
<DraftKanBanLayout />
) : null}
{/* issue peek overview */}
<IssuePeekOverview />
</div>
)}
</div>
);
});

18
web/components/issues/issue-layouts/roots/module-layout-root.tsx
View File

@ -1,4 +1,4 @@
import React from "react";
import React, { Fragment } from "react";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
import useSWR from "swr";
@ -63,8 +63,11 @@ export const ModuleLayoutRoot: React.FC = observer(() => {
);
}
if (issues?.groupedIssueIds?.length === 0) {
return (
<div className="relative flex h-full w-full flex-col overflow-hidden">
<ModuleAppliedFiltersRoot />
{issues?.groupedIssueIds?.length === 0 ? (
<div className="relative h-full w-full overflow-y-auto">
<ModuleEmptyState
workspaceSlug={workspaceSlug.toString()}
@ -73,13 +76,8 @@ export const ModuleLayoutRoot: React.FC = observer(() => {
activeLayout={activeLayout}
/>
</div>
);
}
return (
<div className="relative flex h-full w-full flex-col overflow-hidden">
<ModuleAppliedFiltersRoot />
) : (
<Fragment>
<div className="h-full w-full overflow-auto">
{activeLayout === "list" ? (
<ModuleListLayout />
@ -95,6 +93,8 @@ export const ModuleLayoutRoot: React.FC = observer(() => {
</div>
{/* peek overview */}
<IssuePeekOverview />
</Fragment>
)}
</div>
);
});

16
web/components/issues/issue-layouts/roots/project-layout-root.tsx
View File

@ -1,4 +1,4 @@
import { FC } from "react";
import { FC, Fragment } from "react";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
import useSWR from "swr";
@ -48,18 +48,14 @@ export const ProjectLayoutRoot: FC = observer(() => {
return <>{activeLayout && <ActiveLoader layout={activeLayout} />}</>;
}
if (issues?.groupedIssueIds?.length === 0) {
return (
<div className="relative h-full w-full overflow-y-auto">
<ProjectEmptyState />
</div>
);
}
return (
<div className="relative flex h-full w-full flex-col overflow-hidden">
<ProjectAppliedFiltersRoot />
{issues?.groupedIssueIds?.length === 0 ? (
<ProjectEmptyState />
) : (
<Fragment>
<div className="relative h-full w-full overflow-auto bg-custom-background-90">
{/* mutation loader */}
{issues?.loader === "mutation" && (
@ -82,6 +78,8 @@ export const ProjectLayoutRoot: FC = observer(() => {
{/* peek overview */}
<IssuePeekOverview />
</Fragment>
)}
</div>
);
});

18
web/components/issues/issue-layouts/roots/project-view-layout-root.tsx
View File

@ -1,4 +1,4 @@
import React, { useMemo } from "react";
import React, { Fragment, useMemo } from "react";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
import useSWR from "swr";
@ -79,18 +79,16 @@ export const ProjectViewLayoutRoot: React.FC = observer(() => {
);
}
if (issues?.groupedIssueIds?.length === 0) {
return (
<div className="relative h-full w-full overflow-y-auto">
<ProjectViewEmptyState />
</div>
);
}
return (
<div className="relative flex h-full w-full flex-col overflow-hidden">
<ProjectViewAppliedFiltersRoot />
{issues?.groupedIssueIds?.length === 0 ? (
<div className="relative h-full w-full overflow-y-auto">
<ProjectViewEmptyState />
</div>
) : (
<Fragment>
<div className="relative h-full w-full overflow-auto">
{activeLayout === "list" ? (
<ProjectViewListLayout issueActions={issueActions} />
@ -107,6 +105,8 @@ export const ProjectViewLayoutRoot: React.FC = observer(() => {
{/* peek overview */}
<IssuePeekOverview />
</Fragment>
)}
</div>
);
});

5
web/store/issue/archived/issue.store.ts
View File

@ -67,10 +67,11 @@ export class ArchivedIssues extends IssueHelperStore implements IArchivedIssues
const orderBy = displayFilters?.order_by;
const layout = displayFilters?.layout;
const archivedIssueIds = this.issues[projectId] ?? [];
const archivedIssueIds = this.issues[projectId];
if (!archivedIssueIds) return undefined;
const _issues = this.rootIssueStore.issues.getIssuesByIds(archivedIssueIds);
if (!_issues) return undefined;
if (!_issues) return [];
let issues: TGroupedIssues | TSubGroupedIssues | TUnGroupedIssues | undefined = undefined;

5
web/store/issue/draft/issue.store.ts
View File

@ -78,10 +78,11 @@ export class DraftIssues extends IssueHelperStore implements IDraftIssues {
const orderBy = displayFilters?.order_by;
const layout = displayFilters?.layout;
const draftIssueIds = this.issues[projectId] ?? [];
const draftIssueIds = this.issues[projectId];
if (!draftIssueIds) return undefined;
const _issues = this.rootIssueStore.issues.getIssuesByIds(draftIssueIds);
if (!_issues) return undefined;
if (!_issues) return [];
let issues: TGroupedIssues | TSubGroupedIssues | TUnGroupedIssues | undefined = undefined;

18
yarn.lock
View File

@ -5012,7 +5012,7 @@ fault@^2.0.0:
dependencies:
format "^0.2.0"
fflate@^0.4.1:
fflate@^0.4.8:
version "0.4.8"
resolved "https://registry.yarnpkg.com/fflate/-/fflate-0.4.8.tgz#f90b82aefbd8ac174213abb338bd7ef848f0f5ae"
integrity sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA==
@ -7171,12 +7171,18 @@ postcss@^8.4.21, postcss@^8.4.23, postcss@^8.4.29:
picocolors "^1.0.0"
source-map-js "^1.0.2"
posthog-js@^1.88.4:
version "1.96.1"
resolved "https://registry.yarnpkg.com/posthog-js/-/posthog-js-1.96.1.tgz#4f9719a24e4e14037b0e72d430194d7cdb576447"
integrity sha512-kv1vQqYMt2BV3YHS+wxsbGuP+tz+M3y1AzNhz8TfkpY1HT8W/ONT0i0eQpeRr9Y+d4x/fZ6M4cXG5GMvi9lRCA==
posthog-js@^1.105.0:
version "1.105.8"
resolved "https://registry.yarnpkg.com/posthog-js/-/posthog-js-1.105.8.tgz#934602f0c7a5e522a25828062b5841ad8780756f"
integrity sha512-zKZKNVLLQQgkJyY3DnzHHTasu6x4xM4MOvH7UbMz6BmrgUPboS6/3akgz+WKD+JV6qFj68bm80iJw0Jtj+pt8Q==
dependencies:
fflate "^0.4.1"
fflate "^0.4.8"
preact "^10.19.3"
preact@^10.19.3:
version "10.19.4"
resolved "https://registry.yarnpkg.com/preact/-/preact-10.19.4.tgz#735d331d5b1bd2182cc36f2ba481fd6f0da3fe3b"
integrity sha512-dwaX5jAh0Ga8uENBX1hSOujmKWgx9RtL80KaKUFLc6jb4vCEAc3EeZ0rnQO/FO4VgjfPMfoLFWnNG8bHuZ9VLw==
prebuild-install@^7.1.1:
version "7.1.1"