fix category edition/creation

This commit is contained in:
Sacha Greif 2016-04-15 09:17:04 +09:00
parent fb677e1929
commit d9bdd36073
10 changed files with 134 additions and 50 deletions

View file

@ -21,7 +21,6 @@ boilerplate-generator@1.0.7
caching-compiler@1.0.3
caching-html-compiler@1.0.5
callback-hook@1.0.7
cfs:http-methods@0.0.32
check@1.1.3
chuangbo:cookie@1.1.0
chuangbo:marked@0.3.5_1
@ -74,7 +73,6 @@ meteorhacks:meteorx@1.4.1
meteorhacks:picker@1.0.3
meteorhacks:subs-manager@1.6.4
meteorhacks:unblock@1.1.0
meteorspark:util@0.2.0
minifier-css@1.1.10
minifier-js@1.1.10
minimongo@1.0.13
@ -145,10 +143,9 @@ standard-minifier-css@1.0.5
standard-minifier-js@1.0.5
standard-minifiers@1.0.5
std:accounts-ui@1.1.12
tap:i18n@1.8.0
templating@1.1.8
templating-tools@1.0.3
tmeasday:check-npm-versions@0.3.0
tmeasday:check-npm-versions@0.3.1
tmeasday:publish-counts@0.7.3
tracker@1.0.12
twitter@1.1.8

View file

@ -38,6 +38,9 @@ class CategoriesEditForm extends Component{
collection={Categories}
currentUser={this.context.currentUser}
methodName="categories.edit"
successCallback={(category)=>{
Messages.flash("Category edited.", "success");
}}
labelFunction={fieldName => Telescope.utils.getFieldLabel(fieldName, Categories)}
/>
<hr/>

View file

@ -1,20 +1,84 @@
import React, { PropTypes, Component } from 'react';
import { Button, DropdownButton, MenuItem } from 'react-bootstrap';
import { Button, DropdownButton, MenuItem, Modal } from 'react-bootstrap';
import Router from "../router.js"
import Core from "meteor/nova:core";
const ModalTrigger = Core.ModalTrigger;
const ContextPasser = Core.ContextPasser;
// note: cannot use ModalTrigger component because of https://github.com/react-bootstrap/react-bootstrap/issues/1808
class CategoriesList extends Component {
renderNew() {
const CategoriesNewForm = Telescope.components.CategoriesNewForm;
constructor() {
super();
this.openCategoryEditModal = this.openCategoryEditModal.bind(this);
this.openCategoryNewModal = this.openCategoryNewModal.bind(this);
this.closeModal = this.closeModal.bind(this);
this.state = {
openModal: false
}
}
openCategoryNewModal() {
// new category modal has number 0
this.setState({openModal: 0});
}
openCategoryEditModal(index) {
// edit category modals are numbered from 1 to n
this.setState({openModal: index+1});
}
closeModal() {
this.setState({openModal: false});
}
renderCategoryEditModal(category, index) {
const CategoriesEditForm = Telescope.components.CategoriesEditForm;
return (
<ModalTrigger title="New Category" component={<MenuItem className="dropdown-item post-category"><Button bsStyle="primary">New Category</Button></MenuItem>}>
<CategoriesNewForm/>
</ModalTrigger>
<Modal key={index} show={this.state.openModal === index+1} onHide={this.closeModal}>
<Modal.Header closeButton>
<Modal.Title>Edit Category</Modal.Title>
</Modal.Header>
<Modal.Body>
<ContextPasser currentUser={this.context.currentUser} closeCallback={this.closeModal}>
<CategoriesEditForm category={category}/>
</ContextPasser>
</Modal.Body>
</Modal>
)
}
renderCategoryNewModal() {
const CategoriesNewForm = Telescope.components.CategoriesNewForm;
return (
<Modal show={this.state.openModal === 0} onHide={this.closeModal}>
<Modal.Header closeButton>
<Modal.Title>New Category</Modal.Title>
</Modal.Header>
<Modal.Body>
<ContextPasser currentUser={this.context.currentUser} closeCallback={this.closeModal}>
<CategoriesNewForm/>
</ContextPasser>
</Modal.Body>
</Modal>
)
}
renderCategoryNewButton() {
return <MenuItem className="dropdown-item post-category"><Button bsStyle="primary" onClick={this.openCategoryNewModal}>New Category</Button></MenuItem>;
// const CategoriesNewForm = Telescope.components.CategoriesNewForm;
// return (
// <ModalTrigger title="New Category" component={<MenuItem className="dropdown-item post-category"><Button bsStyle="primary">New Category</Button></MenuItem>}>
// <CategoriesNewForm/>
// </ModalTrigger>
// )
}
render() {
const Category = Telescope.components.Category;
@ -26,16 +90,23 @@ class CategoriesList extends Component {
const currentCategorySlug = currentRoute.queryParams.cat;
return (
<DropdownButton
bsStyle="default"
className="categories btn-secondary"
title="Categories"
id="categories-dropdown"
>
<MenuItem href={Router.path("posts.list")} eventKey={0} className="dropdown-item post-category">All Categories</MenuItem>
{categories && categories.length > 0 ? categories.map((category, index) => <Category key={index} category={category} index={index} currentCategorySlug={currentCategorySlug}/>) : null}
{Users.is.admin(this.context.currentUser) ? this.renderNew() : null}
</DropdownButton>
<div>
<DropdownButton
bsStyle="default"
className="categories btn-secondary"
title="Categories"
id="categories-dropdown"
>
<MenuItem href={Router.path("posts.list")} eventKey={0} className="dropdown-item post-category">All Categories</MenuItem>
{categories && categories.length > 0 ? categories.map((category, index) => <Category key={index} category={category} index={index} currentCategorySlug={currentCategorySlug} openModal={_.partial(this.openCategoryEditModal, index)}/>) : null}
{Users.is.admin(this.context.currentUser) ? this.renderCategoryNewButton() : null}
</DropdownButton>
<div>
{/* modals cannot be inside DropdownButton component (see GH issue) */}
{categories && categories.length > 0 ? categories.map((category, index) => this.renderCategoryEditModal(category, index)) : null}
{this.renderCategoryNewModal()}
</div>
</div>
)
}

View file

@ -10,11 +10,12 @@ class Category extends Component {
renderEdit() {
const {Icon, CategoriesEditForm} = Telescope.components;
return (
<ModalTrigger title="Edit Category" component={<a className="edit-category-link"><Icon name="edit"/></a>}>
<CategoriesEditForm category={this.props.category}/>
</ModalTrigger>
)
return <a onClick={this.props.openModal} className="edit-category-link"><Icon name="edit"/></a>;
// return (
// <ModalTrigger title="Edit Category" component={<a className="edit-category-link"><Icon name="edit"/></a>}>
// <CategoriesEditForm category={this.props.category}/>
// </ModalTrigger>
// )
}
render() {
@ -43,6 +44,7 @@ Category.propTypes = {
category: React.PropTypes.object,
index: React.PropTypes.number,
currentCategorySlug: React.PropTypes.string,
openModal: React.PropTypes.func
}
Category.contextTypes = {

View file

@ -21,8 +21,8 @@ Package.onUse(function (api) {
// third-party packages
'tmeasday:check-npm-versions@0.3.0',
'std:accounts-ui@1.1.19',
'tmeasday:check-npm-versions@0.3.1',
'std:accounts-ui@1.1.12',
'utilities:react-list-container@0.1.8',
'kadira:dochead@1.4.0'
]);

View file

@ -0,0 +1,28 @@
import React, { PropTypes, Component } from 'react';
class ContextPasser extends Component {
getChildContext() {
return {
closeCallback: this.props.closeCallback,
currentUser: this.props.currentUser // pass on currentUser
};
}
render() {
return this.props.children;
}
}
ContextPasser.propTypes = {
closeCallback: React.PropTypes.func,
currentUser: React.PropTypes.object
};
ContextPasser.childContextTypes = {
closeCallback: React.PropTypes.func,
currentUser: React.PropTypes.object
};
export default ContextPasser;
module.exports = ContextPasser;

View file

@ -1,26 +1,8 @@
import React, { PropTypes, Component } from 'react';
import ContextPasser from './ContextPasser.jsx'
import { Modal } from 'react-bootstrap';
// import Modal from 'react-modal';
class ContextPasser extends Component {
getChildContext() {
return {
closeCallback: this.props.closeCallback,
currentUser: this.props.currentUser // pass on currentUser
};
}
render() {
return this.props.children;
}
}
ContextPasser.childContextTypes = {
closeCallback: React.PropTypes.func,
currentUser: React.PropTypes.object
};
class ModalTrigger extends Component {
constructor() {

View file

@ -1,7 +1,8 @@
import Messages from "./messages.js";
import ModalTrigger from "./components/ModalTrigger.jsx";
import ContextPasser from "./components/ContextPasser.jsx";
import FlashContainer from "./containers/FlashContainer.jsx";
import AppComposer from "./containers/AppComposer.jsx";
import CurrentUserContainer from "./containers/CurrentUserContainer.jsx";
export default {Messages, ModalTrigger, AppComposer, FlashContainer, CurrentUserContainer};
export default {Messages, ModalTrigger, ContextPasser, AppComposer, FlashContainer, CurrentUserContainer};

View file

@ -12,7 +12,7 @@ Package.onUse(function(api) {
api.use([
'ecmascript',
'check',
'tmeasday:check-npm-versions@0.3.0',
'tmeasday:check-npm-versions@0.3.1',
'aldeed:simple-schema@1.5.3',
'aldeed:collection2@2.8.0',
'utilities:smart-methods@0.1.3'

View file

@ -10,8 +10,8 @@ Package.onUse(function (api) {
api.versionsFrom(['METEOR@1.0']);
api.use([
'nova:lib@0.26.0-nova',
'tap:i18n@1.8.0'
'nova:lib@0.26.0-nova'
// 'tap:i18n@1.8.0'
]);
api.use(["session"], "client");