This commit is contained in:
soupette 2018-06-18 12:19:22 +02:00
parent 372842ef5c
commit da865168e8
11 changed files with 45 additions and 29 deletions

View File

@ -3,11 +3,11 @@
justify-content: space-around;
width: 100%;
> div {
border: 6px solid #f3f3f3; /* Light grey */
border-top: 6px solid #3498db; /* Blue */
border: 4px solid #f3f3f3; /* Light grey */
border-top: 4px solid #555555 !important; /* Blue */
border-radius: 50%;
width: 50px;
height: 50px;
width: 26px;
height: 26px;
animation: spin 2s linear infinite;
}
}

View File

@ -7,7 +7,7 @@
> div {
margin: auto;
border: 6px solid #f3f3f3; /* Light grey */
border-top: 6px solid #3498db; /* Blue */
border-top: 6px solid #1C91E7; /* Blue */
border-radius: 50%;
width: 50px;
height: 50px;

View File

@ -72,10 +72,11 @@ export function deleteSeveralDataSuccess() {
};
}
export function getData(currentModel, source) {
export function getData(currentModel, source, setUpdatingParams = false) {
return {
type: GET_DATA,
currentModel,
setUpdatingParams,
source,
};
}

View File

@ -87,7 +87,7 @@ export class ListPage extends React.Component {
}
if (search !== this.props.location.search) {
this.getData(this.props);
this.getData(this.props, true);
}
if (prevProps.listPage.filtersUpdated !== filtersUpdated) {
@ -120,7 +120,7 @@ export class ListPage extends React.Component {
* Function to fetch data
* @param {Object} props
*/
getData = props => {
getData = (props, setUpdatingParams = false) => {
const source = getQueryParameters(props.location.search, 'source');
const _limit = toInteger(getQueryParameters(props.location.search, '_limit')) || 10;
const _page = toInteger(getQueryParameters(props.location.search, '_page')) || 1;
@ -130,7 +130,7 @@ export class ListPage extends React.Component {
const filters = generateFiltersFromSearch(props.location.search);
this.props.setParams(params, filters);
this.props.getData(props.match.params.slug, source);
this.props.getData(props.match.params.slug, source, setUpdatingParams);
};
/**
@ -306,9 +306,9 @@ export class ListPage extends React.Component {
};
showLoaders = () => {
const { listPage: { isLoading, records } } = this.props;
const { listPage: { isLoading, records, updatingParams } } = this.props;
return isLoading && get(records, this.getCurrentModelName()) === undefined;
return updatingParams || isLoading && get(records, this.getCurrentModelName()) === undefined;
}
render() {

View File

@ -43,10 +43,10 @@ const initialState = fromJS({
_sort: '',
_q: '',
}),
// records: List([]),
records: fromJS({}),
showFilter: false,
showWarningDeleteAll: false,
updatingParams: false,
});
function listPageReducer(state = initialState, action) {
@ -86,17 +86,25 @@ function listPageReducer(state = initialState, action) {
}
return v;
});
})
.update('updatingParams', () => true);
case GET_DATA:
return state
.update('isLoading', () => true)
.update('currentModel', () => action.currentModel);
.update('currentModel', () => action.currentModel)
.update('updatingParams', v => {
if (action.setUpdatingParams) {
return true;
}
return v;
});
case GET_DATA_SUCCEEDED:
return state
.update('entriesToDelete', () => List([]))
.updateIn(['count', state.get('currentModel')], () => action.data[0].count)
.update('isLoading', () => false)
.updateIn(['records', state.get('currentModel')], () => List(action.data[1]));
.updateIn(['records', state.get('currentModel')], () => List(action.data[1]))
.update('updatingParams', () => false);
case ON_CHANGE:
return state.updateIn(['appliedFilters', action.index, action.key], () => action.value);
case ON_CLICK_REMOVE:

View File

@ -1,9 +1 @@
{
"product": {
"attributes": {
"description": {
"appearance": "WYSIWYG"
}
}
}
}
{}

View File

@ -7,6 +7,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import { get } from 'lodash';
import cn from 'classnames';
import LoadingIndicator from 'components/LoadingIndicator';
import Input from 'components/InputsIndex';
@ -28,7 +29,7 @@ class EditForm extends React.Component { // eslint-disable-line react/prefer-sta
render() {
if (this.props.showLoaders) {
return (
<div className={styles.editForm}>
<div className={cn(styles.editForm, this.props.showLoaders && styles.loadIndicatorContainer)}>
<LoadingIndicator />
</div>
);

View File

@ -13,3 +13,11 @@
margin-bottom: 2.1rem;
background: #F6F6F6;
}
.loadIndicatorContainer {
display: flex;
flex-direction: column;
justify-content: space-around;
min-height: 209px;
padding-top: 88px;
}

View File

@ -72,7 +72,7 @@ function List({ data, deleteData, noButton, onButtonClick, settingType, showLoad
)}
</div>
</div>
<div className={cn(styles.ulContainer, showLoaders && styles.loadingContainer)}>
<div className={cn(styles.ulContainer, showLoaders && styles.loadingContainer, showLoaders && settingType === 'roles' && styles.loadingContainerRole )}>
{showLoaders ? <LoadingIndicator /> : (
<ul className={noButton ? styles.listPadded : ''}>
{map(object, item => (

View File

@ -39,6 +39,12 @@
.loadingContainer {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 150px;
justify-content: space-around;
min-height: 162px;
padding-top: 20px;
}
.loadingContainerRole {
min-height: 142px !important;
padding-top: 0;
}