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

Web: Client: Added Paging on admins page

Browse Source
This commit is contained in:
Alexey Kostenko 2021-05-30 16:00:05 +03:00
parent 7435ee0c7b
commit 095b79dc31
5 changed files with 216 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

156
web/ASC.Web.Client/src/components/pages/Settings/Layout/Section/Paging/index.js Normal file
View File

@ -0,0 +1,156 @@
import React, { useCallback, useMemo } from "react";
import { isMobile } from "react-device-detect";
import Paging from "@appserver/components/paging";
import Loaders from "@appserver/common/components/Loaders";
import { inject, observer } from "mobx-react";
import { withTranslation } from "react-i18next";
const SectionPagingContent = ({
fetchPeople,
filter,
setIsLoading,
selectedCount,
isLoaded,
t,
}) => {
const onNextClick = useCallback(
(e) => {
if (!filter.hasNext()) {
e.preventDefault();
return;
}
console.log("Next Clicked", e);
const newFilter = filter.clone();
newFilter.page++;
setIsLoading(true);
fetchPeople(newFilter).finally(() => setIsLoading(false));
},
[filter, fetchPeople, setIsLoading]
);
const onPrevClick = useCallback(
(e) => {
if (!filter.hasPrev()) {
e.preventDefault();
return;
}
console.log("Prev Clicked", e);
const newFilter = filter.clone();
newFilter.page--;
setIsLoading(true);
fetchPeople(newFilter).finally(() => setIsLoading(false));
},
[filter, fetchPeople, setIsLoading]
);
const onChangePageSize = useCallback(
(pageItem) => {
console.log("Paging onChangePageSize", pageItem);
const newFilter = filter.clone();
newFilter.page = 0;
newFilter.pageCount = pageItem.key;
setIsLoading(true);
fetchPeople(newFilter).finally(() => setIsLoading(false));
},
[filter, fetchPeople, setIsLoading]
);
const onChangePage = useCallback(
(pageItem) => {
console.log("Paging onChangePage", pageItem);
const newFilter = filter.clone();
newFilter.page = pageItem.key;
setIsLoading(true);
fetchPeople(newFilter).finally(() => setIsLoading(false));
},
[filter, fetchPeople, setIsLoading]
);
const countItems = useMemo(
() => [
{
key: 25,
label: t("CountPerPage", { count: 25 }),
},
{
key: 50,
label: t("CountPerPage", { count: 50 }),
},
{
key: 100,
label: t("CountPerPage", { count: 100 }),
},
],
[t]
);
const pageItems = useMemo(() => {
if (filter.total < filter.pageCount) return [];
const totalPages = Math.ceil(filter.total / filter.pageCount);
return [...Array(totalPages).keys()].map((item) => {
return {
key: item,
label: t("PageOfTotalPage", { page: item + 1, totalPage: totalPages }),
};
});
}, [filter.total, filter.pageCount, t]);
const emptyPageSelection = {
key: 0,
label: t("PageOfTotalPage", { page: 1, totalPage: 1 }),
};
const emptyCountSelection = {
key: 0,
label: t("CountPerPage", { count: 25 }),
};
const selectedPageItem =
pageItems.find((x) => x.key === filter.page) || emptyPageSelection;
const selectedCountItem =
countItems.find((x) => x.key === filter.pageCount) || emptyCountSelection;
//console.log("SectionPagingContent render", filter);
return isLoaded ? (
!filter || filter.total < filter.pageCount ? (
<></>
) : (
<Paging
previousLabel={t("PreviousPage")}
nextLabel={t("NextPage")}
pageItems={pageItems}
onSelectPage={onChangePage}
countItems={countItems}
onSelectCount={onChangePageSize}
displayItems={false}
disablePrevious={!filter.hasPrev()}
disableNext={!filter.hasNext()}
disableHover={isMobile}
previousAction={onPrevClick}
nextAction={onNextClick}
openDirection="top"
selectedPageItem={selectedPageItem} //FILTER CURRENT PAGE
selectedCountItem={selectedCountItem} //FILTER PAGE COUNT
/>
)
) : (
<Loaders.Filter />
);
};
export default inject(({ auth, setup }) => ({
isLoaded: auth.isLoaded,
fetchPeople: setup.updateListAdmins,
filter: setup.security.accessRight.filter,
setIsLoading: setup.setIsLoading,
}))(withTranslation("Settings")(observer(SectionPagingContent)));

1
web/ASC.Web.Client/src/components/pages/Settings/Layout/Section/index.js
View File

@ -1 +1,2 @@
export { default as SectionHeaderContent } from "./Header";
export { default as SectionPagingContent } from "./Paging";

12
web/ASC.Web.Client/src/components/pages/Settings/Layout/index.js
View File

@ -1,6 +1,6 @@
import React, { useEffect } from "react";
import { ArticleHeaderContent, ArticleBodyContent } from "./Article";
import { SectionHeaderContent } from "./Section";
import { SectionHeaderContent, SectionPagingContent } from "./Section";
import { inject, observer } from "mobx-react";
import PageLayout from "@appserver/common/components/PageLayout";
const Layout = ({
@ -8,6 +8,7 @@ const Layout = ({
setCurrentProductId,
language,
children,
addUsers,
}) => {
useEffect(() => {
currentProductId !== "settings" && setCurrentProductId("settings");
@ -28,14 +29,21 @@ const Layout = ({
</PageLayout.SectionHeader>
<PageLayout.SectionBody>{children}</PageLayout.SectionBody>
{addUsers && (
<PageLayout.SectionPaging>
<SectionPagingContent />
</PageLayout.SectionPaging>
)}
</PageLayout>
);
};
export default inject(({ auth }) => {
export default inject(({ auth, setup }) => {
const { language, settingsStore } = auth;
const { addUsers } = setup.headerAction;
return {
language,
setCurrentProductId: settingsStore.setCurrentProductId,
addUsers,
};
})(observer(Layout));

5
web/ASC.Web.Client/src/store/SettingsSetupStore.js
View File

@ -21,6 +21,7 @@ class SettingsSetupStore {
owner: {},
filter: Filter.getDefault(),
selectorIsOpen: false,
isLoading: false,
},
};
@ -39,6 +40,10 @@ class SettingsSetupStore {
makeAutoObservable(this);
}
setIsLoading = (isLoading) => {
this.security.accessRight.isLoading = isLoading;
};
setOptions = (options) => {
this.security.accessRight.options = options;
};

45
yarn.lock
View File

@ -1392,7 +1392,7 @@
resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
"@emotion/is-prop-valid@0.8.8", "@emotion/is-prop-valid@^0.8.6", "@emotion/is-prop-valid@^0.8.8":
"@emotion/is-prop-valid@0.8.8", "@emotion/is-prop-valid@^0.8.2", "@emotion/is-prop-valid@^0.8.6", "@emotion/is-prop-valid@^0.8.8":
version "0.8.8"
resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==
@ -8558,6 +8558,26 @@ fragment-cache@^0.2.1:
dependencies:
map-cache "^0.2.2"
framer-motion@^4.1.17:
version "4.1.17"
resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-4.1.17.tgz#4029469252a62ea599902e5a92b537120cc89721"
integrity sha512-thx1wvKzblzbs0XaK2X0G1JuwIdARcoNOW7VVwjO8BUltzXPyONGAElLu6CiCScsOQRI7FIk/45YTFtJw5Yozw==
dependencies:
framesync "5.3.0"
hey-listen "^1.0.8"
popmotion "9.3.6"
style-value-types "4.1.4"
tslib "^2.1.0"
optionalDependencies:
"@emotion/is-prop-valid" "^0.8.2"
framesync@5.3.0:
version "5.3.0"
resolved "https://registry.yarnpkg.com/framesync/-/framesync-5.3.0.tgz#0ecfc955e8f5a6ddc8fdb0cc024070947e1a0d9b"
integrity sha512-oc5m68HDO/tuK2blj7ZcdEBRx3p1PjrgHazL8GYEpvULhrtGIFbQArN6cQS2QhW8mitffaB+VYzMjDqBxxQeoA==
dependencies:
tslib "^2.1.0"
fresh@0.5.2:
version "0.5.2"
resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
@ -9235,6 +9255,11 @@ he@^1.2.0:
resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
hey-listen@^1.0.8:
version "1.0.8"
resolved "https://registry.yarnpkg.com/hey-listen/-/hey-listen-1.0.8.tgz#8e59561ff724908de1aa924ed6ecc84a56a9aa68"
integrity sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==
highlight.js@^10.1.1, highlight.js@~10.7.0:
version "10.7.2"
resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.7.2.tgz#89319b861edc66c48854ed1e6da21ea89f847360"
@ -13069,6 +13094,16 @@ polished@^4.0.5:
dependencies:
"@babel/runtime" "^7.13.17"
popmotion@9.3.6:
version "9.3.6"
resolved "https://registry.yarnpkg.com/popmotion/-/popmotion-9.3.6.tgz#b5236fa28f242aff3871b9e23721f093133248d1"
integrity sha512-ZTbXiu6zIggXzIliMi8LGxXBF5ST+wkpXGEjeTUDUOCdSQ356hij/xjeUdv0F8zCQNeqB1+PR5/BB+gC+QLAPw==
dependencies:
framesync "5.3.0"
hey-listen "^1.0.8"
style-value-types "4.1.4"
tslib "^2.1.0"
popper.js@^1.14.4, popper.js@^1.14.7:
version "1.16.1"
resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
@ -15817,6 +15852,14 @@ style-to-object@0.3.0, style-to-object@^0.3.0:
dependencies:
inline-style-parser "0.1.1"
style-value-types@4.1.4:
version "4.1.4"
resolved "https://registry.yarnpkg.com/style-value-types/-/style-value-types-4.1.4.tgz#80f37cb4fb024d6394087403dfb275e8bb627e75"
integrity sha512-LCJL6tB+vPSUoxgUBt9juXIlNJHtBMy8jkXzUJSBzeHWdBu6lhzHqCvLVkXFGsFIlNa2ln1sQHya/gzaFmB2Lg==
dependencies:
hey-listen "^1.0.8"
tslib "^2.1.0"
styled-components@^5.2.1:
version "5.3.0"
resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.0.tgz#e47c3d3e9ddfff539f118a3dd0fd4f8f4fb25727"