Merge branch 'application-mgt-new' into 'master'

Add infinite scroll to apps view in APPM store UI

See merge request entgra/carbon-device-mgt!363
feature/appm-store/pbac
Dharmakeerthi Lasantha 5 years ago
commit 62c900a6d9

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

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

@ -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%;
}
}

@ -18,10 +18,13 @@
import React from "react"; import React from "react";
import AppCard from "./AppCard"; import AppCard from "./AppCard";
import {Col, message, notification, Row, Result, Skeleton, Alert} from "antd"; import {Col, Row, Result} from "antd";
import axios from "axios"; import axios from "axios";
import {withConfigContext} from "../../context/ConfigContext"; import {withConfigContext} from "../../context/ConfigContext";
import {handleApiError} from "../../js/Utils"; import {handleApiError} from "../../js/Utils";
import InfiniteScroll from "react-infinite-scroller";
const limit = 10;
class AppList extends React.Component { class AppList extends React.Component {
constructor(props) { constructor(props) {
@ -29,16 +32,24 @@ class AppList extends React.Component {
this.state = { this.state = {
apps: [], apps: [],
loading: true, loading: true,
hasMore: true,
loadMore: true,
forbiddenErrors: { forbiddenErrors: {
apps: false apps: false
} },
totalAppCount: 0
} }
} }
componentDidMount() { componentDidMount() {
const {deviceType} = this.props; const {deviceType} = this.props;
this.props.changeSelectedMenuItem(deviceType); 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 config = this.props.context;
const payload = {}; const payload = {
offset,
limit
};
if (deviceType === "web-clip") { if (deviceType === "web-clip") {
payload.appType = "WEB_CLIP"; payload.appType = "WEB_CLIP";
} else { } else {
payload.deviceType = deviceType; payload.deviceType = deviceType;
} }
this.setState({ this.setState({
loading: true loading: true
}); });
@ -69,10 +85,7 @@ class AppList extends React.Component {
if (res.status === 200) { if (res.status === 200) {
//todo remove this property check after backend improvement //todo remove this property check after backend improvement
let apps = (res.data.data.hasOwnProperty("applications")) ? res.data.data.applications : []; let apps = (res.data.data.hasOwnProperty("applications")) ? res.data.data.applications : [];
this.setState({ callbackFunction(apps);
apps: apps,
loading: false
})
} }
}).catch((error) => { }).catch((error) => {
@ -92,26 +105,53 @@ class AppList extends React.Component {
}); });
}; };
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() { render() {
const {apps, loading, forbiddenErrors} = this.state; const {apps, loading, forbiddenErrors, hasMore} = this.state;
return ( return (
<Skeleton loading={loading} active> <div>
<InfiniteScroll
initialLoad={false}
pageStart={0}
loadMore={this.handleInfiniteOnLoad}
hasMore={!loading && hasMore}
useWindow={true}>
<Row gutter={16}> <Row gutter={16}>
{(forbiddenErrors.apps) && ( {(forbiddenErrors.apps) && (
<Result <Result
status="403" status="403"
title="403" title="403"
subTitle="You don't have permission to view apps." subTitle="You don't have permission to view apps."
// extra={<Button type="primary">Back Home</Button>}
/> />
)} )}
{!((forbiddenErrors.apps)) && apps.length === 0 && ( {!(forbiddenErrors.apps) && apps.length === 0 && (
<Result <Result
status="404" status="404"
title="No apps, yet." title="No apps, yet."
subTitle="No apps available, yet! When the administration uploads, apps will show up here." subTitle="No apps available, yet! When the administration uploads, apps will show up here."
// extra={<Button type="primary">Back Home</Button>}
/> />
)} )}
{apps.map(app => ( {apps.map(app => (
@ -122,7 +162,8 @@ class AppList extends React.Component {
</Col> </Col>
))} ))}
</Row> </Row>
</Skeleton> </InfiniteScroll>
</div>
); );
} }
} }

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

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

@ -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%;
}
}
Loading…
Cancel
Save