Skip to content

Commit a259e2a

Browse files
leopuleoleopuleo
authored
fix: improve editor experience with page information (total entries count + current entries length) (#4397)
1 parent 8d8a301 commit a259e2a

File tree

19 files changed

+191
-21
lines changed

19 files changed

+191
-21
lines changed

‎packages/app-file-manager/src/components/BottomInfoBar/SupportedFileTypes.tsx

Lines changed: 30 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from "react";
1+
import React, { useCallback } from "react";
22
import { i18n } from "@webiny/app/i18n";
33
import mime from "mime/lite";
44

@@ -23,22 +23,45 @@ const getUniqueFilePlugins = (accept: string[]): string[] => {
2323

2424
export interface SupportedFileTypesProps {
2525
accept: string[];
26+
loading: boolean;
27+
totalCount: number;
28+
currentCount: number;
2629
}
2730

28-
const SupportedFileTypes = ({ accept }: SupportedFileTypesProps) => {
29-
if (!accept) {
31+
const SupportedFileTypes = ({
32+
accept,
33+
loading,
34+
totalCount,
35+
currentCount
36+
}: SupportedFileTypesProps) => {
37+
const getLabel = useCallback((count = 0): string => {
38+
return `${count} ${count === 1 ? "file" : "files"}`;
39+
}, []);
40+
41+
if (!accept || loading) {
3042
return null;
3143
}
3244

3345
if (accept.length === 0) {
34-
return <span>{t`Showing all file extensions.`}</span>;
46+
return (
47+
<span>
48+
{t`Showing {currentCount} out of {totalCountLabel} from all file extensions.`({
49+
currentCount,
50+
totalCountLabel: getLabel(totalCount)
51+
})}
52+
</span>
53+
);
3554
}
3655

3756
return (
3857
<span>
39-
{t`Showing the following file extensions: {files}.`({
40-
files: getUniqueFilePlugins(accept).join(", ")
41-
})}
58+
{t`Showing {currentCount} out of {totalCountLabel} from the following file extensions: {files}.`(
59+
{
60+
currentCount,
61+
totalCountLabel: getLabel(totalCount),
62+
files: getUniqueFilePlugins(accept).join(", ")
63+
}
64+
)}
4265
</span>
4366
);
4467
};

‎packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/FileManagerView.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -401,6 +401,9 @@ const FileManagerView = () => {
401401
<BottomInfoBar
402402
accept={view.accept}
403403
listing={view.isListLoadingMore}
404+
loading={view.isListLoading}
405+
totalCount={view.meta?.totalCount ?? 0}
406+
currentCount={view.files.length}
404407
/>
405408
<UploadStatus
406409
numberOfFiles={filesBeingUploaded}

‎packages/app-headless-cms/src/admin/components/ContentEntries/BottomInfoBar/BottomInfoBar.styled.tsx

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import styled from "@emotion/styled";
2+
3+
export const BottomInfoBarWrapper = styled("div")`
4+
font-size: 0.8rem;
5+
position: sticky;
6+
bottom: 0;
7+
height: 30px;
8+
color: var(--mdc-theme-text-secondary-on-background);
9+
border-top: 1px solid var(--mdc-theme-on-background);
10+
background: var(--mdc-theme-surface);
11+
width: 100%;
12+
transform: translateZ(0);
13+
overflow: hidden;
14+
display: flex;
15+
align-items: center;
16+
z-index: 1;
17+
`;
18+
19+
export const BottomInfoBarInner = styled("div")`
20+
padding: 0 10px;
21+
width: 100%;
22+
`;

‎packages/app-headless-cms/src/admin/components/ContentEntries/BottomInfoBar/BottomInfoBar.tsx

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import React from "react";
2+
import { ListMeta } from "./ListMeta";
3+
import { BottomInfoBarInner, BottomInfoBarWrapper } from "./BottomInfoBar.styled";
4+
5+
interface BottomInfoBarProps {
6+
loading: boolean;
7+
totalCount: number;
8+
currentCount: number;
9+
}
10+
11+
export const BottomInfoBar = (props: BottomInfoBarProps) => {
12+
return (
13+
<BottomInfoBarWrapper>
14+
<BottomInfoBarInner>
15+
<ListMeta
16+
loading={props.loading}
17+
totalCount={props.totalCount}
18+
currentCount={props.currentCount}
19+
/>
20+
</BottomInfoBarInner>
21+
</BottomInfoBarWrapper>
22+
);
23+
};

‎packages/app-headless-cms/src/admin/components/ContentEntries/BottomInfoBar/ListMeta.tsx

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React, { useCallback } from "react";
2+
3+
export interface ListMetaProps {
4+
loading: boolean;
5+
currentCount: number;
6+
totalCount: number;
7+
}
8+
9+
export const ListMeta = (props: ListMetaProps) => {
10+
const getLabel = useCallback((count = 0): string => {
11+
return `${count} ${count === 1 ? "entry" : "entries"}`;
12+
}, []);
13+
14+
if (props.loading) {
15+
return null;
16+
}
17+
18+
return <span>{`Showing ${props.currentCount} out of ${getLabel(props.totalCount)}.`}</span>;
19+
};

‎packages/app-headless-cms/src/admin/components/ContentEntries/BottomInfoBar/index.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from "./BottomInfoBar";

‎packages/app-headless-cms/src/admin/components/ContentEntries/LoadingMore/styled.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ export const Container = styled("div")`
44
position: absolute;
55
bottom: 0;
66
left: 0;
7+
z-index: 2;
78
display: flex;
89
justify-content: center;
910
align-items: center;

‎packages/app-headless-cms/src/admin/components/ContentEntries/Table/index.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { ForwardRefRenderFunction, useMemo } from "react";
22
import { Table as AcoTable } from "@webiny/app-aco";
33
import { useContentEntriesList, useModel } from "~/admin/hooks";
44
import { TableItem } from "~/types";
5+
import { TableContainer } from "./styled";
56

67
const BaseTable: ForwardRefRenderFunction<HTMLDivElement> = (_, ref) => {
78
const { model } = useModel();
@@ -12,7 +13,7 @@ const BaseTable: ForwardRefRenderFunction<HTMLDivElement> = (_, ref) => {
1213
}, [list.folders, list.records]);
1314

1415
return (
15-
<div ref={ref}>
16+
<TableContainer ref={ref}>
1617
<AcoTable<TableItem>
1718
data={data}
1819
nameColumnId={model.titleFieldId || "id"}
@@ -23,7 +24,7 @@ const BaseTable: ForwardRefRenderFunction<HTMLDivElement> = (_, ref) => {
2324
onSelectRow={list.onSelectRow}
2425
selected={list.selected}
2526
/>
26-
</div>
27+
</TableContainer>
2728
);
2829
};
2930

‎packages/app-headless-cms/src/admin/components/ContentEntries/Table/styled.tsx

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,5 @@
11
import styled from "@emotion/styled";
2-
import { css } from "emotion";
32

4-
import { ListItemGraphic as ListItemGraphicBase } from "@webiny/ui/List";
5-
6-
export const ListItemGraphic = styled(ListItemGraphicBase)`
7-
margin-right: 25px;
3+
export const TableContainer = styled.div`
4+
margin-bottom: 31px;
85
`;
9-
10-
export const menuStyles = css(`
11-
width: 200px;
12-
`);

‎packages/app-headless-cms/src/admin/views/contentEntries/Table/Main.tsx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import { useRouter } from "@webiny/react-router";
1515
import { ROOT_FOLDER } from "~/admin/constants";
1616
import { BulkActions } from "~/admin/components/ContentEntries/BulkActions";
1717
import { SelectAll } from "~/admin/components/ContentEntries/SelectAll";
18+
import { BottomInfoBar } from "~/admin/components/ContentEntries/BottomInfoBar";
1819

1920
interface MainProps {
2021
folderId?: string;
@@ -113,6 +114,11 @@ export const Main = ({ folderId: initialFolderId }: MainProps) => {
113114
onClick={list.listMoreRecords}
114115
/>
115116
</Scrollbar>
117+
<BottomInfoBar
118+
loading={list.isListLoading}
119+
totalCount={list.meta.totalCount}
120+
currentCount={list.records.length}
121+
/>
116122
<LoadingMore show={list.isListLoadingMore} />
117123
</>
118124
)}

‎packages/app-page-builder/src/admin/components/BottomInfoBar/BottomInfoBar.styled.tsx

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import styled from "@emotion/styled";
2+
3+
export const BottomInfoBarWrapper = styled("div")`
4+
font-size: 0.8rem;
5+
position: sticky;
6+
bottom: 0;
7+
height: 30px;
8+
color: var(--mdc-theme-text-secondary-on-background);
9+
border-top: 1px solid var(--mdc-theme-on-background);
10+
background: var(--mdc-theme-surface);
11+
width: 100%;
12+
transform: translateZ(0);
13+
overflow: hidden;
14+
display: flex;
15+
align-items: center;
16+
z-index: 1;
17+
`;
18+
19+
export const BottomInfoBarInner = styled("div")`
20+
padding: 0 10px;
21+
width: 100%;
22+
`;

‎packages/app-page-builder/src/admin/components/BottomInfoBar/BottomInfoBar.tsx

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import React from "react";
2+
import { ListMeta } from "./ListMeta";
3+
import { BottomInfoBarInner, BottomInfoBarWrapper } from "./BottomInfoBar.styled";
4+
5+
interface BottomInfoBarProps {
6+
loading: boolean;
7+
totalCount: number;
8+
currentCount: number;
9+
}
10+
11+
export const BottomInfoBar = (props: BottomInfoBarProps) => {
12+
return (
13+
<BottomInfoBarWrapper>
14+
<BottomInfoBarInner>
15+
<ListMeta
16+
loading={props.loading}
17+
totalCount={props.totalCount}
18+
currentCount={props.currentCount}
19+
/>
20+
</BottomInfoBarInner>
21+
</BottomInfoBarWrapper>
22+
);
23+
};

‎packages/app-page-builder/src/admin/components/BottomInfoBar/ListMeta.tsx

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React, { useCallback } from "react";
2+
3+
export interface ListMetaProps {
4+
loading: boolean;
5+
currentCount: number;
6+
totalCount: number;
7+
}
8+
9+
export const ListMeta = (props: ListMetaProps) => {
10+
const getLabel = useCallback((count = 0): string => {
11+
return `${count} ${count === 1 ? "page" : "pages"}`;
12+
}, []);
13+
14+
if (props.loading) {
15+
return null;
16+
}
17+
18+
return <span>{`Showing ${props.currentCount} out of ${getLabel(props.totalCount)}.`}</span>;
19+
};

‎packages/app-page-builder/src/admin/components/BottomInfoBar/index.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from "./BottomInfoBar";

‎packages/app-page-builder/src/admin/components/Table/LoadingMore/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export const LoadingMore = ({ show }: LoadingMoreProps) => {
2020
<LoaderContainer>
2121
<CircularProgress size={20} />
2222
</LoaderContainer>
23-
<Typography use={"body2"}>{t`Loading more entries...`}</Typography>
23+
<Typography use={"body2"}>{t`Loading more pages...`}</Typography>
2424
</Container>
2525
);
2626
};

‎packages/app-page-builder/src/admin/components/Table/LoadingMore/styled.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import styled from "@emotion/styled";
22

33
export const Container = styled("div")`
44
position: absolute;
5+
z-index: 2;
56
bottom: 0;
67
left: 0;
78
display: flex;

‎packages/app-page-builder/src/admin/components/Table/Table/Table.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import React, { ForwardRefRenderFunction, useMemo } from "react";
33
import { createFoldersData, createRecordsData, Table as AcoTable } from "@webiny/app-aco";
44
import { usePagesList } from "~/admin/views/Pages/hooks/usePagesList";
55

6+
import { TableContainer } from "./styled";
67
import { TableItem } from "~/types";
78

89
const BaseTable: ForwardRefRenderFunction<HTMLDivElement> = (_, ref) => {
@@ -13,7 +14,7 @@ const BaseTable: ForwardRefRenderFunction<HTMLDivElement> = (_, ref) => {
1314
}, [list.folders, list.records]);
1415

1516
return (
16-
<div ref={ref}>
17+
<TableContainer ref={ref}>
1718
<AcoTable<TableItem>
1819
data={data}
1920
loading={list.isListLoading}
@@ -23,7 +24,7 @@ const BaseTable: ForwardRefRenderFunction<HTMLDivElement> = (_, ref) => {
2324
selected={list.selected}
2425
namespace={"pb.page"}
2526
/>
26-
</div>
27+
</TableContainer>
2728
);
2829
};
2930

‎packages/app-page-builder/src/admin/components/Table/Table/styled.tsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import styled from "@emotion/styled";
2+
3+
export const TableContainer = styled.div`
4+
margin-bottom: 31px;
5+
`;

‎packages/app-page-builder/src/admin/views/Pages/Table/Main.tsx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import { Table } from "~/admin/components/Table/Table";
1919
import { MainContainer, Wrapper } from "./styled";
2020
import { usePagesPermissions } from "~/hooks/permissions";
2121
import { ROOT_FOLDER } from "~/admin/constants";
22+
import { BottomInfoBar } from "~/admin/components/BottomInfoBar";
2223

2324
const t = i18n.ns("app-page-builder/admin/views/pages/table/main");
2425

@@ -138,6 +139,11 @@ export const Main = ({ folderId: initialFolderId }: Props) => {
138139
onClick={list.listMoreRecords}
139140
/>
140141
</Scrollbar>
142+
<BottomInfoBar
143+
loading={list.isListLoading}
144+
totalCount={list.meta.totalCount}
145+
currentCount={list.records.length}
146+
/>
141147
<LoadingMore show={list.isListLoadingMore} />
142148
</>
143149
)}

0 commit comments

Comments
 (0)