IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web: Client: Data Import: translate AccountsPaging to ts

Browse Source
This commit is contained in:
Vladimir Khvan 2024-06-21 14:27:54 +05:00
parent 36fa51e531
commit 99a53fc435
5 changed files with 33 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/client/src/pages/PortalSettings/categories/data-import/components/AddEmailsStep/index.tsx
View File

@ -165,6 +165,7 @@ const AddEmailsStep = (props: AddEmailsStepProps) => {
t={t}
numberOfItems={users.withoutEmail.length}
setDataPortion={handleDataChange}
pagesPerPage={PAGE_SIZE}
/>
)}
</>

1
packages/client/src/pages/PortalSettings/categories/data-import/components/SelectUsersStep/index.tsx
View File

@ -167,6 +167,7 @@ const SelectUsersStep = (props: SelectUsersStepProps) => {
t={t}
numberOfItems={withEmailUsers.length}
setDataPortion={handleDataChange}
pagesPerPage={PAGE_SIZE}
/>
)}
</>

3
packages/client/src/pages/PortalSettings/categories/data-import/components/SelectUsersTypeStep/index.tsx
View File

@ -105,13 +105,14 @@ const SelectUsersTypeStep = (props: TypeSelectProps) => {
size={InputSize.base}
/>
<AccountsTable t={t} accountsData={filteredAccounts} />
<AccountsTable accountsData={filteredAccounts} />
{filteredUsers.length > PAGE_SIZE && filteredAccounts.length > 0 && (
<AccountsPaging
t={t}
numberOfItems={filteredUsers.length}
setDataPortion={handleDataChange}
pagesPerPage={PAGE_SIZE}
/>
)}

37
packages/client/src/pages/PortalSettings/categories/data-import/sub-components/AccountsPaging.js → packages/client/src/pages/PortalSettings/categories/data-import/sub-components/AccountsPaging.tsx
View File

@ -27,6 +27,7 @@
import { useState } from "react";
import styled from "styled-components";
import { Paging } from "@docspace/shared/components/paging";
import { AccountsPagingProps } from "../types";
const StyledPaging = styled(Paging)`
display: flex;
@ -35,14 +36,14 @@ const StyledPaging = styled(Paging)`
justify-content: center;
`;
const AccountsPaging = (props) => {
const { t, numberOfItems, setDataPortion } = props;
const AccountsPaging = (props: AccountsPagingProps) => {
const { t, numberOfItems, setDataPortion, pagesPerPage = 25 } = props;
const createPageItems = (count) => {
let pageItems = [];
for (let i = 0; i < count; i++) {
const createPageItems = (count: number) => {
const pageItems: { key: string; label: string; pageNumber: number }[] = [];
for (let i = 0; i < count; i += 1) {
pageItems.push({
key: i + 1 + "-page-of-" + count,
key: `${i + 1}-page-of-${count}`,
label: t("Common:PageOfTotalPage", { page: i + 1, totalPage: count }),
pageNumber: i,
});
@ -53,18 +54,18 @@ const AccountsPaging = (props) => {
const countItems = [
{
key: "25-items-per-page",
label: t("Common:CountPerPage", { count: 25 }),
count: 25,
label: t("Common:CountPerPage", { count: pagesPerPage }),
count: pagesPerPage,
},
{
key: "50-items-per-page",
label: t("Common:CountPerPage", { count: 50 }),
count: 50,
label: t("Common:CountPerPage", { count: pagesPerPage * 2 }),
count: pagesPerPage * 2,
},
{
key: "100-items-per-page",
label: t("Common:CountPerPage", { count: 100 }),
count: 100,
label: t("Common:CountPerPage", { count: pagesPerPage * 3 }),
count: pagesPerPage * 3,
},
];
@ -97,13 +98,17 @@ const AccountsPaging = (props) => {
}
};
const onSelectPage = (selectedPage) => {
const onSelectPage = (selectedPage: { pageNumber: number }) => {
const count = selectedPage.pageNumber * selectedCountItem.count;
setDataPortion(count, count + selectedCountItem.count);
setSelectedPageItems(pageItems[selectedPage.pageNumber]);
};
const onCountChange = (countItem) => {
const onCountChange = (countItem: {
key: string;
label: string;
count: number;
}) => {
setSelectedCountItem(countItem);
setDataPortion(0, countItem.count);
const tempPageItems = createPageItems(
@ -127,8 +132,8 @@ const AccountsPaging = (props) => {
nextAction={onSelectPageNextHandler}
selectedPageItem={selectedPageItem}
selectedCountItem={selectedCountItem}
disablePrevious={!Boolean(pageItems[selectedPageItem.pageNumber - 1])}
disableNext={!Boolean(pageItems[selectedPageItem.pageNumber + 1])}
disablePrevious={!pageItems[selectedPageItem.pageNumber - 1]}
disableNext={!pageItems[selectedPageItem.pageNumber + 1]}
/>
);
};

9
packages/client/src/pages/PortalSettings/categories/data-import/types/index.ts
View File

@ -135,7 +135,7 @@ export interface InjectedSelectUsersStepProps extends SelectUsersStepProps {
}
export interface AccountsTableProps {
t: TFunciton;
t?: TFunciton;
accountsData: TStore["importAccountsStore"]["withEmailUsers"];
}
@ -376,3 +376,10 @@ export interface InjectedTypeSelectRowContentProps
extends TypeSelectRowContentProps {
changeUserType: TStore["importAccountsStore"]["changeUserType"];
}
export interface AccountsPagingProps {
t: TFunciton;
numberOfItems: number;
setDataPortion: (leftBoundary: number, rightBoundary: number) => void;
pagesPerPage?: number;
}