Web: Client: Added Paging on admins page
This commit is contained in:
parent
7435ee0c7b
commit
095b79dc31
@ -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 +1,2 @@
|
||||
export { default as SectionHeaderContent } from "./Header";
|
||||
export { default as SectionPagingContent } from "./Paging";
|
||||
|
@ -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));
|
||||
|
@ -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
45
yarn.lock
@ -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"
|
||||
|
Loading…
Reference in New Issue
Block a user