Skip to content

Commit

Permalink
Categories Loader Issue#57
Browse files Browse the repository at this point in the history
  • Loading branch information
Syed Asher Ahmed committed Mar 10, 2017
1 parent 2c705ae commit 2ff0939
Show file tree
Hide file tree
Showing 3 changed files with 117 additions and 28 deletions.
103 changes: 82 additions & 21 deletions imports/ui/components/categories/Categories.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import moment from 'moment';

import { Button, Table, Card, FontIcon, Dialog } from 'react-toolbox';
import { Link } from 'react-router'
import { ReactiveVar } from 'meteor/reactive-var'

import { Meteor } from 'meteor/meteor';
import { Categories } from '../../../api/categories/categories.js';
Expand All @@ -19,6 +20,7 @@ import dialogTheme from './dialogTheme';



let query = new ReactiveVar();
class CategoriesPage extends Component {

constructor(props) {
Expand All @@ -28,7 +30,8 @@ class CategoriesPage extends Component {
removeConfirmMessage: false,
openDialog: false,
selectedCategory: null,
action: null
action: null,
loading : false
};

}
Expand Down Expand Up @@ -97,19 +100,24 @@ class CategoriesPage extends Component {
}
removeCategory(){
const {_id, name, parent} = this.state.selectedCategory;
Meteor.call('categories.remove', {
category: {
_id,
name,
parent
}
}, (err, response) => {
if(err){
if(this.state.selectedCategory.owner) {
Meteor.call('categories.remove', {
category: {
_id,
name,
parent
}
}, (err, response) => {
if (err) {

}else{
} else {

}
});
}
});
}
else{
this.removeDefaultCategory();
}
// Close Popup
this.setState({
openDialog: false
Expand All @@ -119,15 +127,42 @@ class CategoriesPage extends Component {
removeSubcategory(e){
//e.stopPropagation();
//e.preventDefault();
Meteor.call('categories.removeFromParent', {
if(this.state.selectedCategory.owner) {
Meteor.call('categories.removeFromParent', {
category: {
name: this.state.selectedCategory.name
}
}, (err, response) => {
if (err) {

} else {

}
});
}
else{
this.removeDefaultCategory();
}
// Close Popup
this.setState({
openDialog: false
});
}


removeDefaultCategory(){
//e.stopPropagation();
//e.preventDefault();
Meteor.call('categories.removeDefault', {
category: {
name: this.state.selectedCategory.name
}
}, (err, response) => {
if(err){

}else{

console.log(err);
}
else{
query.set(Math.random());
}
});
// Close Popup
Expand All @@ -138,7 +173,8 @@ class CategoriesPage extends Component {

renderSubcategories(children, parent){
return children.map((name) => {
const category = Categories.findOne({name, parent});
const category = _.findWhere(this.props.children, {name, parent});
if (!category) return false;
return <span key={name}>
<div onClick={this.openPopup.bind(this, 'edit', category)}>
{name}
Expand Down Expand Up @@ -174,6 +210,17 @@ class CategoriesPage extends Component {
}
});


const addCategory =
<div className={theme.categoryNothing}>
<span className={theme.errorShow}>you do not have any categories</span>
<div className={theme.addCategoryBtn}>
<Button type='button' icon='add' raised primary onClick={this.openPopup.bind(this, 'add')} />
</div>
<span className={theme.errorShow}>add some to show</span>
</div>;


return (
<div style={{ flex: 1, display: 'flex', position: 'relative', overflowY: 'auto' }}>
<div className={theme.categoriesContent}>
Expand All @@ -188,11 +235,15 @@ class CategoriesPage extends Component {
theme={buttonTheme}/>
</div>
<Card theme={tableTheme}>
{this.props.categoriesLoading ? <Loader accent/> : this.props.categoriesExists ?
<Table
selectable={false}
heading={false}
model={model}
source={categories}/>

: addCategory
}
</Card>
</div>
{this.popupTemplate()}
Expand All @@ -206,11 +257,21 @@ CategoriesPage.propTypes = {
};

export default createContainer(() => {
Meteor.subscribe('categories');
Meteor.subscribe('categories', query.get());
const categoriesHandle = Meteor.subscribe('categories', query.get());
const categoriesLoading = !categoriesHandle.ready();
const categories = Categories.find({
parent: null
}, {sort: {createdAt: -1}}).fetch();
const children = Categories.find({
parent: {$exists: true}
}, {sort: {createdAt: -1}}).fetch();
const categoriesExists = !categoriesLoading && !!categories.length;

return {
categories: Categories.find({
parent: null
}, {sort: {createdAt: -1}}).fetch()
categories,
children,
categoriesLoading,
categoriesExists
};
}, CategoriesPage);
32 changes: 32 additions & 0 deletions imports/ui/components/categories/theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,38 @@
}
}
}
.categoryNothing{
margin: $unit * 5 0 $unit * 5 0;
.errorShow{
display: block;
text-align: center;
font-size: $font-size-big + 0.2;
text-transform: uppercase;
color: $color-text;
&:first-child{
margin-bottom: $unit * 3;
}
}
.addCategoryBtn{
text-align: center;
button{
border-radius: 50%;
width: $unit * 7.5;
height: $unit * 7.5;
padding: 0;
min-width: $unit * 7.5;
text-align: center;
margin-bottom: $unit * 2.5;
font-size: $font-size-big + 2.7;
span{
color: $color-primary-dark;
text-transform: lowercase;
padding-left: $unit - 0.1;
}
}
}
}

.dialogContent{
> div{
margin-bottom: $unit * 2;
Expand Down
10 changes: 3 additions & 7 deletions imports/ui/components/projects/Project.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,6 @@ class ProjectPage extends Component {
handleScroll(event) {
let infiniteState = event.nativeEvent;
if((infiniteState.srcElement.scrollTop + infiniteState.srcElement.offsetHeight) > (infiniteState.srcElement.scrollHeight -1)){
console.log('handleScroll');
let copyQuery = query.get();
copyQuery.limit = RECORDS_PER_PAGE * (pageNumber + 1);
query.set(copyQuery);
Expand Down Expand Up @@ -210,7 +209,7 @@ class ProjectPage extends Component {
selectable={false}
source={projects}
/>;
const something =
const addProject =
<div className={theme.projectNothing}>
<span className={theme.errorShow}>you do not have any projects</span>
<div className={theme.addProjectBtn}>
Expand All @@ -220,8 +219,7 @@ class ProjectPage extends Component {
</div>;
return (
<Card theme={tableTheme}>
{ this.props.projectsExists || projects.length ? table : something}
{ this.props.projectsLoading ? <div className={theme.loaderParent}><Loader primary spinner /></div> : ''}
{ this.props.projectsExists ? table : addProject}
</Card>
)
}
Expand Down Expand Up @@ -271,9 +269,7 @@ class ProjectPage extends Component {
theme={theme}
/>
</div>
<Card theme={tableTheme}>
{this.props.projectsLoading && this.props.projects.length < RECORDS_PER_PAGE ? <Loader primary /> : this.renderProjectTable()}
</Card>
{this.props.projectsLoading ? <Loader accent /> : this.renderProjectTable()}
{this.popupTemplate()}
</div>
</div>
Expand Down

0 comments on commit 2ff0939

Please sign in to comment.