community/device-mgt-core
1
0
Fork 0
mirror of https://repository.entgra.net/community/device-mgt-core.git synced 2025-10-06 02:01:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add infinite scroll to apps view in APPM store UI

Browse Source 
Additional changes,
- Remove padding from the footer in APPM UI
This commit is contained in:
Jayasanka 2019-10-28 16:03:26 +05:30
parent 05babca6ba
commit 2c6d8eb993
7 changed files with 92 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/Login.css
View File

@ -44,7 +44,7 @@
}
}
.background {
.login .background {
position: absolute;
height: 100%;
width: 100%;
@ -56,7 +56,7 @@
animation: spin 200s infinite linear;
}
.content {
.login .content {
position: relative;
z-index: 1;
}

2
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/Login.js vendored
View File

@ -31,7 +31,7 @@ class Login extends React.Component {
render() {
const config = this.props.context;
return (
<div>
<div className="login">
<div className="background">
</div>
<div className="content">

18
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/Dashboard.css
View File

@ -87,21 +87,3 @@
}
}
@media only screen and (min-width: 760px) {
@media screen and (max-width: 1030px) {
Footer{
margin-bottom: 43%;
}
}
}
@media only screen and (min-width: 1030px) {
Footer{
margin-bottom: 5%;
}
}

72
components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/AppList.js vendored
View File

@ -18,10 +18,13 @@
import React from "react";
import AppCard from "./AppCard";
import {Col, message, notification, Row, Result, Skeleton, Alert} from "antd";
import {Col, Row, Result, Pagination} from "antd";
import axios from "axios";
import {withConfigContext} from "../../context/ConfigContext";
import {handleApiError} from "../../js/Utils";
import InfiniteScroll from "react-infinite-scroller";
const limit = 10;
class AppList extends React.Component {
constructor(props) {
@ -29,16 +32,24 @@ class AppList extends React.Component {
this.state = {
apps: [],
loading: true,
hasMore: true,
loadMore: true,
forbiddenErrors: {
apps: false
}
},
totalAppCount: 0
}
}
componentDidMount() {
const {deviceType} = this.props;
this.props.changeSelectedMenuItem(deviceType);
this.fetchData(deviceType);
this.fetchData(0, limit, res => {
this.setState({
apps: res,
loading: false
});
});
}
@ -50,14 +61,19 @@ class AppList extends React.Component {
}
}
fetchData = (deviceType) => {
fetchData = (offset, limit, callbackFunction) => {
const {deviceType} = this.props;
const config = this.props.context;
const payload = {};
const payload = {
offset,
limit
};
if (deviceType === "web-clip") {
payload.appType = "WEB_CLIP";
} else {
payload.deviceType = deviceType;
}
this.setState({
loading: true
});
@ -69,13 +85,11 @@ class AppList extends React.Component {
if (res.status === 200) {
//todo remove this property check after backend improvement
let apps = (res.data.data.hasOwnProperty("applications")) ? res.data.data.applications : [];
this.setState({
apps: apps,
loading: false
})
callbackFunction(apps);
}
}).catch((error) => {
console.log(error);
handleApiError(error, "Error occurred while trying to load apps.", true);
if (error.hasOwnProperty("response") && error.response.status === 403) {
const {forbiddenErrors} = this.state;
@ -92,11 +106,44 @@ class AppList extends React.Component {
});
};
handlePaginationChange = (page, pageSize) => {
this.fetchData(page, pageSize);
};
handleInfiniteOnLoad = (count) => {
const offset = count * limit;
let apps = this.state.apps;
this.setState({
loading: true,
});
this.fetchData(offset, limit, res => {
if (res.length > 0) {
apps = apps.concat(res);
this.setState({
apps,
loading: false,
});
} else {
this.setState({
hasMore: false,
loading: false
});
}
});
};
render() {
const {apps, loading, forbiddenErrors} = this.state;
const {apps, loading, forbiddenErrors, totalAppCount, hasMore} = this.state;
return (
<Skeleton loading={loading} active>
<div>
<InfiniteScroll
initialLoad={false}
pageStart={0}
loadMore={this.handleInfiniteOnLoad}
hasMore={!loading && hasMore}
useWindow={true}>
<Row gutter={16}>
{(forbiddenErrors.apps) && (
<Result
@ -122,7 +169,8 @@ class AppList extends React.Component {
</Col>
))}
</Row>
</Skeleton>
</InfiniteScroll>
</div>
);
}
}

4
components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/Login.css
View File

@ -44,7 +44,7 @@
}
}
.background {
.login .background {
position: absolute;
height: 100%;
width: 100%;
@ -56,7 +56,7 @@
animation: spin 200s infinite linear;
}
.content {
.login .content {
position: relative;
z-index: 1;
}

2
components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/Login.js vendored
View File

@ -30,7 +30,7 @@ class Login extends React.Component {
render() {
const config = this.props.context;
return (
<div>
<div className="login">
<div className="background">
</div>
<div className="content">

17
components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/Dashboard.css
View File

@ -88,20 +88,3 @@
}
}
@media only screen and (min-width: 760px) {
@media screen and (max-width: 1030px) {
Footer{
margin-bottom: 45%;
}
}
}
@media only screen and (min-width: 1030px) {
Footer{
margin-bottom: 5%;
}
}