From 2ff0939997f329bf399515708809c8d6ee7ea9dd Mon Sep 17 00:00:00 2001 From: Syed Asher Ahmed Date: Fri, 10 Mar 2017 17:34:27 +0000 Subject: [PATCH 1/2] Categories Loader Issue#57 --- .../ui/components/categories/Categories.jsx | 103 ++++++++++++++---- imports/ui/components/categories/theme.scss | 32 ++++++ imports/ui/components/projects/Project.jsx | 10 +- 3 files changed, 117 insertions(+), 28 deletions(-) diff --git a/imports/ui/components/categories/Categories.jsx b/imports/ui/components/categories/Categories.jsx index 24530fc..9757bb9 100755 --- a/imports/ui/components/categories/Categories.jsx +++ b/imports/ui/components/categories/Categories.jsx @@ -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'; @@ -19,6 +20,7 @@ import dialogTheme from './dialogTheme'; +let query = new ReactiveVar(); class CategoriesPage extends Component { constructor(props) { @@ -28,7 +30,8 @@ class CategoriesPage extends Component { removeConfirmMessage: false, openDialog: false, selectedCategory: null, - action: null + action: null, + loading : false }; } @@ -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 @@ -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 @@ -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
{name} @@ -174,6 +210,17 @@ class CategoriesPage extends Component { } }); + + const addCategory = +
+ you do not have any categories +
+
+ add some to show +
; + + return (
@@ -188,11 +235,15 @@ class CategoriesPage extends Component { theme={buttonTheme}/>
+ {this.props.categoriesLoading ? : this.props.categoriesExists ? + + : addCategory + } {this.popupTemplate()} @@ -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); \ No newline at end of file diff --git a/imports/ui/components/categories/theme.scss b/imports/ui/components/categories/theme.scss index 4227930..a0699d4 100644 --- a/imports/ui/components/categories/theme.scss +++ b/imports/ui/components/categories/theme.scss @@ -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; diff --git a/imports/ui/components/projects/Project.jsx b/imports/ui/components/projects/Project.jsx index 8eec3e8..aee96ac 100644 --- a/imports/ui/components/projects/Project.jsx +++ b/imports/ui/components/projects/Project.jsx @@ -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); @@ -210,7 +209,7 @@ class ProjectPage extends Component { selectable={false} source={projects} />; - const something = + const addProject =
you do not have any projects
@@ -220,8 +219,7 @@ class ProjectPage extends Component {
; return ( - { this.props.projectsExists || projects.length ? table : something} - { this.props.projectsLoading ?
: ''} + { this.props.projectsExists ? table : addProject} ) } @@ -271,9 +269,7 @@ class ProjectPage extends Component { theme={theme} />
- - {this.props.projectsLoading && this.props.projects.length < RECORDS_PER_PAGE ? : this.renderProjectTable()} - + {this.props.projectsLoading ? : this.renderProjectTable()} {this.popupTemplate()} From 45e29adc1bebc7041b9668d624d364d88c82f1a9 Mon Sep 17 00:00:00 2001 From: Syed Asher Ahmed Date: Fri, 7 Apr 2017 15:43:20 +0000 Subject: [PATCH 2/2] Categories Loader after changes issue #57 --- imports/ui/components/categories/Categories.jsx | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/imports/ui/components/categories/Categories.jsx b/imports/ui/components/categories/Categories.jsx index 9757bb9..7599f5e 100755 --- a/imports/ui/components/categories/Categories.jsx +++ b/imports/ui/components/categories/Categories.jsx @@ -19,8 +19,6 @@ import dialogButtonTheme from './dialogButtonTheme'; import dialogTheme from './dialogTheme'; - -let query = new ReactiveVar(); class CategoriesPage extends Component { constructor(props) { @@ -162,7 +160,6 @@ class CategoriesPage extends Component { console.log(err); } else{ - query.set(Math.random()); } }); // Close Popup @@ -257,8 +254,8 @@ CategoriesPage.propTypes = { }; export default createContainer(() => { - Meteor.subscribe('categories', query.get()); - const categoriesHandle = Meteor.subscribe('categories', query.get()); + Meteor.subscribe('categories'); + const categoriesHandle = Meteor.subscribe('categories'); const categoriesLoading = !categoriesHandle.ready(); const categories = Categories.find({ parent: null