From c065f683df33446c290ea23e62455f29a01e1d3b Mon Sep 17 00:00:00 2001 From: Monica Williams Date: Wed, 11 Jan 2017 17:06:51 -0800 Subject: [PATCH 1/9] got search bar working with unarchive page after moving it out into its own file --- .../BoardShowPage/MenuSideBar/SearchBar.js | 24 +++++++++++++++ .../BoardShowPage/MenuSideBar/Unarchive.js | 30 +++++++++++++++---- 2 files changed, 48 insertions(+), 6 deletions(-) create mode 100644 browser/components/BoardShowPage/MenuSideBar/SearchBar.js diff --git a/browser/components/BoardShowPage/MenuSideBar/SearchBar.js b/browser/components/BoardShowPage/MenuSideBar/SearchBar.js new file mode 100644 index 00000000..58631642 --- /dev/null +++ b/browser/components/BoardShowPage/MenuSideBar/SearchBar.js @@ -0,0 +1,24 @@ +import React, { Component } from 'react' +// take search bar contents from unarchive +// make a component in this file +// check that the content rendered is correct +// set props to the state +// export +// replace search contents with search bar +// test + + +const SearchBar = ( props ) => { + // TODO: create HTML class for search bar + return + + +} + +module.exports = SearchBar diff --git a/browser/components/BoardShowPage/MenuSideBar/Unarchive.js b/browser/components/BoardShowPage/MenuSideBar/Unarchive.js index 9ef55388..0fcb14da 100644 --- a/browser/components/BoardShowPage/MenuSideBar/Unarchive.js +++ b/browser/components/BoardShowPage/MenuSideBar/Unarchive.js @@ -7,6 +7,7 @@ import ConfirmationLink from '../../ConfirmationLink' import Icon from '../../Icon' import Button from '../../Button' import commands from '../../../commands' +import SearchBar from './SearchBar' export default class Unarchive extends Component { @@ -18,16 +19,16 @@ export default class Unarchive extends Component { constructor(props){ super(props) this.state = { - searchTerm: '', - display: 'Cards' + display: 'Cards', + value: 'hi' } this.setSearchTerm = this.setSearchTerm.bind(this) this.toggleDisplay = this.toggleDisplay.bind(this) } setSearchTerm(event){ - const searchTerm = event.target.value - this.setState({searchTerm: searchTerm}) + const value = event.target.value + this.setState({value: value}) } toggleDisplay(){ @@ -35,6 +36,11 @@ export default class Unarchive extends Component { this.setState( { display: display }) +// TODO: check whether this should be a function declaration + // handleInput( event ){ + // const value + // this.setState({ value: event.target.value }) + // } } render(){ @@ -44,7 +50,8 @@ export default class Unarchive extends Component { : return (
- {toggleButtonText} - + */} + + {toggleButtonText} + {toggleDisplayStatus}
) From 15cc7fe5191e771961ec9c8f7a8f5455a353f9ba Mon Sep 17 00:00:00 2001 From: Monica Williams Date: Wed, 11 Jan 2017 17:56:38 -0800 Subject: [PATCH 2/9] moved labels pane into its own module and started implementing search bar within --- .../components/BoardShowPage/MenuSideBar/Unarchive.js | 2 +- browser/components/BoardShowPage/MenuSideBar/index.js | 11 ++++++----- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/browser/components/BoardShowPage/MenuSideBar/Unarchive.js b/browser/components/BoardShowPage/MenuSideBar/Unarchive.js index 0fcb14da..5c777b96 100644 --- a/browser/components/BoardShowPage/MenuSideBar/Unarchive.js +++ b/browser/components/BoardShowPage/MenuSideBar/Unarchive.js @@ -20,7 +20,7 @@ export default class Unarchive extends Component { super(props) this.state = { display: 'Cards', - value: 'hi' + value: '' } this.setSearchTerm = this.setSearchTerm.bind(this) this.toggleDisplay = this.toggleDisplay.bind(this) diff --git a/browser/components/BoardShowPage/MenuSideBar/index.js b/browser/components/BoardShowPage/MenuSideBar/index.js index a12dd2ab..cae0f7c1 100644 --- a/browser/components/BoardShowPage/MenuSideBar/index.js +++ b/browser/components/BoardShowPage/MenuSideBar/index.js @@ -10,6 +10,7 @@ import List from '../List' import Unarchive from './Unarchive' import InviteByEmailPopover from '../../InviteByEmailPopover' import Avatar from '../../Avatar' +import LabelsPane from './LabelsPane' import './index.sass' // panes @@ -293,11 +294,11 @@ const SettingsPane = ({board, onClose, gotoPane, goBack}) =>
Settings Label TBD
- -const LabelsPane = ({board, onClose, gotoPane, goBack}) => - -
Labels Panel
- +// TODO: how to use the labelspane component +// const LabelsPane = ({board, onClose, gotoPane, goBack}) => + // + //
Labels Panel
+ // const DownloadBoardButton = (props) => { From 2742fb25e6744b6285e9ae6a67e616c3599a6f0d Mon Sep 17 00:00:00 2001 From: Monica Williams Date: Thu, 12 Jan 2017 11:30:07 -0800 Subject: [PATCH 3/9] pushing up file we worked on --- .../BoardShowPage/MenuSideBar/LabelsPane.js | 79 +++++++++++++++++++ 1 file changed, 79 insertions(+) create mode 100644 browser/components/BoardShowPage/MenuSideBar/LabelsPane.js diff --git a/browser/components/BoardShowPage/MenuSideBar/LabelsPane.js b/browser/components/BoardShowPage/MenuSideBar/LabelsPane.js new file mode 100644 index 00000000..93161d47 --- /dev/null +++ b/browser/components/BoardShowPage/MenuSideBar/LabelsPane.js @@ -0,0 +1,79 @@ +import React, { Component } from 'react' +import SearchBar from './SearchBar' +import Pane from './index' + + +export default class LabelsPane extends Component { + + static PropTypes = { + board: React.PropTypes.object.isRequired, + onClose: React.PropTypes.func.isRequired, + + } + + constructor(props){ + super(props) + this.state = { + display: 'Cards', + value: '' + } + this.setSearchTerm = this.setSearchTerm.bind(this) + this.toggleDisplay = this.toggleDisplay.bind(this) + this.goToPane = this.goToPane.bind(this) + this.goBack = this.goBack.bind(this) + + + } + + setSearchTerm(event){ + const value = event.target.value + this.setState({value: value}) + } + + goToPane(pane) { + if (!(pane in this.props.panes)) + throw new Error(`cannot go to pane ${pane} it was not defined in panes prop`) + return event => { + if (event) event.preventDefault() + this.setState({ + pane: pane + }) + } + } + + goBack(){ + //TODO: this needs to go back to the More Pane; look above + this.props.goToPane('Main Label Pane')() + } + + render(){ + const { board } = this.props + // TODO: component for displaying search results + return( +
+ +
Labels Panel
+ + +
+ ) + } +} +// const LabelsPane = ({board, onClose, gotoPane, goBack}) => +// +//
Labels Panel
+// +// +module.exports = LabelsPane From 512849961c102cf0f57a5d53f30f93e4800dd884 Mon Sep 17 00:00:00 2001 From: dratech Date: Thu, 12 Jan 2017 11:54:49 -0800 Subject: [PATCH 4/9] search box complete --- .../BoardShowPage/MenuSideBar/LabelsPane.js | 83 +++++-------------- .../BoardShowPage/MenuSideBar/SearchBar.js | 14 ++-- .../BoardShowPage/MenuSideBar/Unarchive.js | 8 +- 3 files changed, 33 insertions(+), 72 deletions(-) diff --git a/browser/components/BoardShowPage/MenuSideBar/LabelsPane.js b/browser/components/BoardShowPage/MenuSideBar/LabelsPane.js index 93161d47..3a00c114 100644 --- a/browser/components/BoardShowPage/MenuSideBar/LabelsPane.js +++ b/browser/components/BoardShowPage/MenuSideBar/LabelsPane.js @@ -1,79 +1,40 @@ import React, { Component } from 'react' +// import Pane from './Pane' ???? +//where does Board come from? +// import boardStore from '../../../stores/boardStore' import SearchBar from './SearchBar' -import Pane from './index' - export default class LabelsPane extends Component { - static PropTypes = { + static propTypes = { board: React.PropTypes.object.isRequired, - onClose: React.PropTypes.func.isRequired, - + onClose: React.PropTypes.func.isRequired } constructor(props){ super(props) this.state = { - display: 'Cards', - value: '' - } - this.setSearchTerm = this.setSearchTerm.bind(this) - this.toggleDisplay = this.toggleDisplay.bind(this) - this.goToPane = this.goToPane.bind(this) - this.goBack = this.goBack.bind(this) - - - } + //states for this component + searchTerm: '', - setSearchTerm(event){ - const value = event.target.value - this.setState({value: value}) - } - - goToPane(pane) { - if (!(pane in this.props.panes)) - throw new Error(`cannot go to pane ${pane} it was not defined in panes prop`) - return event => { - if (event) event.preventDefault() - this.setState({ - pane: pane - }) } + // bind properties like this: + this.setSearchTerm = this.setSearchTerm.bind(this) } - - goBack(){ - //TODO: this needs to go back to the More Pane; look above - this.props.goToPane('Main Label Pane')() + setSearchTerm(event) { + this.setState({ + searchTerm: event.target.value + }) } - - render(){ + render() { const { board } = this.props - // TODO: component for displaying search results - return( -
- -
Labels Panel
- - -
- ) + + return } } -// const LabelsPane = ({board, onClose, gotoPane, goBack}) => -// -//
Labels Panel
-// -// -module.exports = LabelsPane diff --git a/browser/components/BoardShowPage/MenuSideBar/SearchBar.js b/browser/components/BoardShowPage/MenuSideBar/SearchBar.js index 58631642..a2301b7d 100644 --- a/browser/components/BoardShowPage/MenuSideBar/SearchBar.js +++ b/browser/components/BoardShowPage/MenuSideBar/SearchBar.js @@ -1,11 +1,11 @@ import React, { Component } from 'react' -// take search bar contents from unarchive -// make a component in this file -// check that the content rendered is correct -// set props to the state -// export -// replace search contents with search bar -// test +// Xtake search bar contents from unarchive +// Xmake a component in this file +// Xcheck that the content rendered is correct +// XXset props to the state +// Xexport +// Xreplace search contents with search bar +// Xtest const SearchBar = ( props ) => { diff --git a/browser/components/BoardShowPage/MenuSideBar/Unarchive.js b/browser/components/BoardShowPage/MenuSideBar/Unarchive.js index 5c777b96..87f5c55b 100644 --- a/browser/components/BoardShowPage/MenuSideBar/Unarchive.js +++ b/browser/components/BoardShowPage/MenuSideBar/Unarchive.js @@ -20,15 +20,15 @@ export default class Unarchive extends Component { super(props) this.state = { display: 'Cards', - value: '' + searchTerm: '' } this.setSearchTerm = this.setSearchTerm.bind(this) this.toggleDisplay = this.toggleDisplay.bind(this) } setSearchTerm(event){ - const value = event.target.value - this.setState({value: value}) + const searchTerm = event.target.value + this.setState({searchTerm}) } toggleDisplay(){ @@ -64,7 +64,7 @@ export default class Unarchive extends Component { type="text" className="BoardShowPage-MenuSideBar-ArchivedItems-SearchBox" placeholder="Placeholder for searching unarchive." - value={this.state.value} + value={this.state.searchTerm} onChange={this.setSearchTerm} /> Date: Fri, 13 Jan 2017 11:39:07 -0800 Subject: [PATCH 5/9] pushing up for rita --- .../BoardShowPage/Card/LabelMenu.js | 431 +++++++++--------- browser/components/BoardShowPage/LabelMain.js | 231 ++++++++++ .../BoardShowPage/MenuSideBar/SearchBar.js | 24 - 3 files changed, 447 insertions(+), 239 deletions(-) create mode 100644 browser/components/BoardShowPage/LabelMain.js diff --git a/browser/components/BoardShowPage/Card/LabelMenu.js b/browser/components/BoardShowPage/Card/LabelMenu.js index 3790c337..a6e2e244 100644 --- a/browser/components/BoardShowPage/Card/LabelMenu.js +++ b/browser/components/BoardShowPage/Card/LabelMenu.js @@ -1,15 +1,16 @@ import React, {Component} from 'react' -import CardLabel from './CardBadges/CardLabel' -import ColorBox from '../ColorBox' -import Link from '../../Link' -import Form from '../../Form' -import Icon from '../../Icon' -import Button from '../../Button' -import ConfirmationButton from '../../ConfirmationButton' +// import CardLabel from './CardBadges/CardLabel' +// import ColorBox from '../ColorBox' +// import Link from '../../Link' +// import Form from '../../Form' +// import Icon from '../../Icon' +// import Button from '../../Button' +// import ConfirmationButton from '../../ConfirmationButton' import ActionsMenu from '../../ActionsMenu' -import ActionsMenuPane from '../../ActionsMenuPane' +// import ActionsMenuPane from '../../ActionsMenuPane' import boardStore from '../../../stores/boardStore' -import commands from '../../../commands' +// import commands from '../../../commands' +import { MainLabelPanel, CreateLabelPanel } from '../LabelMain' import './LabelMenu.sass' export default class LabelMenu extends Component { @@ -17,7 +18,7 @@ export default class LabelMenu extends Component { static propTypes = { card: React.PropTypes.object.isRequired, board: React.PropTypes.object.isRequired, - // onClose: React.PropTypes.func.isRequired + onClose: React.PropTypes.func.isRequired } constructor(props){ @@ -52,208 +53,208 @@ export default class LabelMenu extends Component { } } -class MainLabelPanel extends Component { - - - editLabel(labelId, event){ - event.preventDefault() - this.props.editLabel(labelId) - this.props.goToPane('Create Label Pane')() - } - - - addOrRemoveLabel(labelId, event) { - event.preventDefault() - commands.addOrRemoveLabel(this.props.card.id, labelId) - } - - render() { - const { card, board } = this.props - const boardLabels = board.labels.map( label => { - const checked = card.label_ids.includes(label.id) - return - }) - - return -
- {boardLabels} -
-
- - Create Label - -
- - } -} - - -const LabelRow = (props) => { - const {label, onClick, onEdit, checked} = props - - return
-
- -
- -
-} - -class CreateLabelPanel extends Component { - - constructor(props) { - super(props) - this.state = {} - - if (props.state.editingLabel === null){ - this.state.labelText = '' - this.state.labelColor = '#98A0A4' - } else { - const label = this.labelBeingEdited(props) - this.state.labelText = label.text - this.state.labelColor = label.color - } - - this.deleteLabel = this.deleteLabel.bind(this) - this.changeColor = this.changeColor.bind(this) - this.createOrEditLabel = this.createOrEditLabel.bind(this) - this.handleChange = this.handleChange.bind(this) - this.goBack = this.goBack.bind(this) - } - - labelBeingEdited(props=this.props){ - return this.isEditing(props) && - props.board.labels.find(label => label.id === props.state.editingLabel) - } - - isEditing(props=this.props){ - return typeof props.state.editingLabel === 'number' - } - - goBack(){ - this.props.goToPane('Main Label Pane')() - } - - deleteLabel(event) { - if (event) event.preventDefault() - commands.deleteLabel(this.props.board.id, this.props.state.editingLabel).then(this.goBack) - } - - changeColor(event) { - if (event) event.preventDefault() - this.setState({labelColor: event.target.attributes.color.value}) - } - - createOrEditLabel(event){ - if (event) event.preventDefault() - this.isEditing() ? this.updateLabel() : this.createLabel() - } - - updateLabel(){ - commands.updateLabel( - this.props.board.id, - this.props.state.editingLabel, - { - text: this.state.labelText, - color: this.state.labelColor - } - ) - .then(this.goBack) - } - - createLabel(){ - commands.createLabel(this.props.board.id, { - text: this.state.labelText, - color:this.state.labelColor, - cardId: this.props.card.id, - }).then(this.goBack) - } - - handleChange(event) { - this.setState({labelText: event.target.value}) - } - - render() { - const labelBeingEdited = this.labelBeingEdited() - const header = this.isEditing() ? "Edit Label" : "Create Label" - - const colorBoxes = colors.map(color => { - const checked = (this.state.labelColor===color) ? true : false - return
- -
- }) - - const deleteButton = this.isEditing() ? - - Delete - : null - - return -
- -
{colorBoxes}
-
-
- - {deleteButton} -
-
- - } -} - -const colors = [ - "#0079bf", - "#d8a359", - "#70a95d", - "#bc6858", - "#9d7cae", - "#d478a4", - "#6cc885", - "#30bbd3", - "#98a0a4" -] +// class MainLabelPanel extends Component { +// +// +// editLabel(labelId, event){ +// event.preventDefault() +// this.props.editLabel(labelId) +// this.props.goToPane('Create Label Pane')() +// } +// +// +// addOrRemoveLabel(labelId, event) { +// event.preventDefault() +// commands.addOrRemoveLabel(this.props.card.id, labelId) +// } +// +// render() { +// const { card, board } = this.props +// const boardLabels = board.labels.map( label => { +// const checked = card.label_ids.includes(label.id) +// return +// }) +// +// return +//
+// {boardLabels} +//
+//
+// +// Create Label +// +//
+// +// } +// } + + +// const LabelRow = (props) => { +// const {label, onClick, onEdit, checked} = props +// +// return
+//
+// +//
+// +//
+// } +// +// class CreateLabelPanel extends Component { +// +// constructor(props) { +// super(props) +// this.state = {} +// +// if (props.state.editingLabel === null){ +// this.state.labelText = '' +// this.state.labelColor = '#98A0A4' +// } else { +// const label = this.labelBeingEdited(props) +// this.state.labelText = label.text +// this.state.labelColor = label.color +// } +// +// this.deleteLabel = this.deleteLabel.bind(this) +// this.changeColor = this.changeColor.bind(this) +// this.createOrEditLabel = this.createOrEditLabel.bind(this) +// this.handleChange = this.handleChange.bind(this) +// this.goBack = this.goBack.bind(this) +// } +// +// labelBeingEdited(props=this.props){ +// return this.isEditing(props) && +// props.board.labels.find(label => label.id === props.state.editingLabel) +// } +// +// isEditing(props=this.props){ +// return typeof props.state.editingLabel === 'number' +// } +// +// goBack(){ +// this.props.goToPane('Main Label Pane')() +// } +// +// deleteLabel(event) { +// if (event) event.preventDefault() +// commands.deleteLabel(this.props.board.id, this.props.state.editingLabel).then(this.goBack) +// } +// +// changeColor(event) { +// if (event) event.preventDefault() +// this.setState({labelColor: event.target.attributes.color.value}) +// } +// +// createOrEditLabel(event){ +// if (event) event.preventDefault() +// this.isEditing() ? this.updateLabel() : this.createLabel() +// } +// +// updateLabel(){ +// commands.updateLabel( +// this.props.board.id, +// this.props.state.editingLabel, +// { +// text: this.state.labelText, +// color: this.state.labelColor +// } +// ) +// .then(this.goBack) +// } +// +// createLabel(){ +// commands.createLabel(this.props.board.id, { +// text: this.state.labelText, +// color:this.state.labelColor, +// cardId: this.props.card.id, +// }).then(this.goBack) +// } +// +// handleChange(event) { +// this.setState({labelText: event.target.value}) +// } +// +// render() { +// const labelBeingEdited = this.labelBeingEdited() +// const header = this.isEditing() ? "Edit Label" : "Create Label" +// +// const colorBoxes = colors.map(color => { +// const checked = (this.state.labelColor===color) ? true : false +// return
+// +//
+// }) +// +// const deleteButton = this.isEditing() ? +// +// Delete +// : null +// +// return +//
+// +//
{colorBoxes}
+//
+//
+// +// {deleteButton} +//
+//
+// +// } +// } +// +// const colors = [ +// "#0079bf", +// "#d8a359", +// "#70a95d", +// "#bc6858", +// "#9d7cae", +// "#d478a4", +// "#6cc885", +// "#30bbd3", +// "#98a0a4" +// ] diff --git a/browser/components/BoardShowPage/LabelMain.js b/browser/components/BoardShowPage/LabelMain.js new file mode 100644 index 00000000..d3bfa31c --- /dev/null +++ b/browser/components/BoardShowPage/LabelMain.js @@ -0,0 +1,231 @@ +import React, {Component} from 'react' +import CardLabel from './Card/CardBadges/CardLabel' +import ColorBox from './ColorBox' +import Link from '../Link' +import Form from '../Form' +import Icon from '../Icon' +import Button from '../Button' +import ConfirmationButton from '../ConfirmationButton' +import ActionsMenuPane from '../ActionsMenuPane' +import boardStore from '../../stores/boardStore' +import commands from '../../commands' +import './Card/LabelMenu.sass' + +export default class MainLabelPanel extends Component { + + static propTypes = { + card: React.PropTypes.object.isRequired, + board: React.PropTypes.object.isRequired, + onClose: React.PropTypes.func.isRequired, + + } + + // constructor(props){ + // super(props) + // this.state = { + // editingLabel: null + // } + // this.editLabel = this.editLabel.bind(this) + // } + + editLabel(labelId, event){ + event.preventDefault() + this.props.editLabel(labelId) + this.props.goToPane('Create Label Pane')() + } + + + addOrRemoveLabel(labelId, event) { + event.preventDefault() + commands.addOrRemoveLabel(this.props.card.id, labelId) + } + + render() { + const { card, board } = this.props + const boardLabels = board.labels.map( label => { + const checked = card.label_ids.includes(label.id) + return + }) + + return +
+ {boardLabels} +
+
+ + Create Label + +
+ + } +} + +const LabelRow = (props) => { + const {label, onClick, onEdit, checked} = props + + return
+
+ +
+ +
+} + +export class CreateLabelPanel extends Component { + + constructor(props) { + super(props) + this.state = {} + + if (props.state.editingLabel === null){ + this.state.labelText = '' + this.state.labelColor = '#98A0A4' + } else { + const label = this.labelBeingEdited(props) + this.state.labelText = label.text + this.state.labelColor = label.color + } + + this.deleteLabel = this.deleteLabel.bind(this) + this.changeColor = this.changeColor.bind(this) + this.createOrEditLabel = this.createOrEditLabel.bind(this) + this.handleChange = this.handleChange.bind(this) + this.goBack = this.goBack.bind(this) + } + + labelBeingEdited(props=this.props){ + return this.isEditing(props) && + props.board.labels.find(label => label.id === props.state.editingLabel) + } + + isEditing(props=this.props){ + return typeof props.state.editingLabel === 'number' + } + + goBack(){ + this.props.goToPane('Main Label Pane')() + } + + deleteLabel(event) { + if (event) event.preventDefault() + commands.deleteLabel(this.props.board.id, this.props.state.editingLabel).then(this.goBack) + } + + changeColor(event) { + if (event) event.preventDefault() + this.setState({labelColor: event.target.attributes.color.value}) + } + + createOrEditLabel(event){ + if (event) event.preventDefault() + this.isEditing() ? this.updateLabel() : this.createLabel() + } + + updateLabel(){ + commands.updateLabel( + this.props.board.id, + this.props.state.editingLabel, + { + text: this.state.labelText, + color: this.state.labelColor + } + ) + .then(this.goBack) + } + + createLabel(){ + commands.createLabel(this.props.board.id, { + text: this.state.labelText, + color:this.state.labelColor, + cardId: this.props.card.id, + }).then(this.goBack) + } + + handleChange(event) { + this.setState({labelText: event.target.value}) + } + + render() { + const labelBeingEdited = this.labelBeingEdited() + const header = this.isEditing() ? "Edit Label" : "Create Label" + + const colorBoxes = colors.map(color => { + const checked = (this.state.labelColor===color) ? true : false + return
+ +
+ }) + + const deleteButton = this.isEditing() ? + + Delete + : null + + return +
+ +
{colorBoxes}
+
+
+ + {deleteButton} +
+
+ + } +} + +const colors = [ + "#0079bf", + "#d8a359", + "#70a95d", + "#bc6858", + "#9d7cae", + "#d478a4", + "#6cc885", + "#30bbd3", + "#98a0a4" +] diff --git a/browser/components/BoardShowPage/MenuSideBar/SearchBar.js b/browser/components/BoardShowPage/MenuSideBar/SearchBar.js index a2301b7d..e69de29b 100644 --- a/browser/components/BoardShowPage/MenuSideBar/SearchBar.js +++ b/browser/components/BoardShowPage/MenuSideBar/SearchBar.js @@ -1,24 +0,0 @@ -import React, { Component } from 'react' -// Xtake search bar contents from unarchive -// Xmake a component in this file -// Xcheck that the content rendered is correct -// XXset props to the state -// Xexport -// Xreplace search contents with search bar -// Xtest - - -const SearchBar = ( props ) => { - // TODO: create HTML class for search bar - return - - -} - -module.exports = SearchBar From b47e2c66dfeae775f304603c950f3e9882b9cc72 Mon Sep 17 00:00:00 2001 From: dratech Date: Fri, 13 Jan 2017 13:48:15 -0800 Subject: [PATCH 6/9] WIP --- .../BoardShowPage/Card/LabelMenu.js | 412 +++++++-------- browser/components/BoardShowPage/LabelMain.js | 470 +++++++++--------- .../components/BoardShowPage/LabelsPane.js | 30 ++ .../BoardShowPage/MenuSideBar/LabelsPane.js | 80 +-- .../BoardShowPage/MenuSideBar/SearchBar.js | 22 + 5 files changed, 542 insertions(+), 472 deletions(-) create mode 100644 browser/components/BoardShowPage/LabelsPane.js diff --git a/browser/components/BoardShowPage/Card/LabelMenu.js b/browser/components/BoardShowPage/Card/LabelMenu.js index a6e2e244..c21c4e93 100644 --- a/browser/components/BoardShowPage/Card/LabelMenu.js +++ b/browser/components/BoardShowPage/Card/LabelMenu.js @@ -18,7 +18,7 @@ export default class LabelMenu extends Component { static propTypes = { card: React.PropTypes.object.isRequired, board: React.PropTypes.object.isRequired, - onClose: React.PropTypes.func.isRequired + // TODO: onClose: React.PropTypes.func.isRequired } constructor(props){ @@ -53,208 +53,208 @@ export default class LabelMenu extends Component { } } -// class MainLabelPanel extends Component { -// -// -// editLabel(labelId, event){ -// event.preventDefault() -// this.props.editLabel(labelId) -// this.props.goToPane('Create Label Pane')() -// } -// -// -// addOrRemoveLabel(labelId, event) { -// event.preventDefault() -// commands.addOrRemoveLabel(this.props.card.id, labelId) -// } -// -// render() { -// const { card, board } = this.props -// const boardLabels = board.labels.map( label => { -// const checked = card.label_ids.includes(label.id) -// return -// }) -// -// return -//
-// {boardLabels} -//
-//
-// -// Create Label -// -//
-// -// } -// } - - -// const LabelRow = (props) => { -// const {label, onClick, onEdit, checked} = props -// -// return
-//
-// -//
-// -//
-// } -// -// class CreateLabelPanel extends Component { -// -// constructor(props) { -// super(props) -// this.state = {} -// -// if (props.state.editingLabel === null){ -// this.state.labelText = '' -// this.state.labelColor = '#98A0A4' -// } else { -// const label = this.labelBeingEdited(props) -// this.state.labelText = label.text -// this.state.labelColor = label.color -// } -// -// this.deleteLabel = this.deleteLabel.bind(this) -// this.changeColor = this.changeColor.bind(this) -// this.createOrEditLabel = this.createOrEditLabel.bind(this) -// this.handleChange = this.handleChange.bind(this) -// this.goBack = this.goBack.bind(this) -// } -// -// labelBeingEdited(props=this.props){ -// return this.isEditing(props) && -// props.board.labels.find(label => label.id === props.state.editingLabel) -// } -// -// isEditing(props=this.props){ -// return typeof props.state.editingLabel === 'number' -// } -// -// goBack(){ -// this.props.goToPane('Main Label Pane')() -// } -// -// deleteLabel(event) { -// if (event) event.preventDefault() -// commands.deleteLabel(this.props.board.id, this.props.state.editingLabel).then(this.goBack) -// } -// -// changeColor(event) { -// if (event) event.preventDefault() -// this.setState({labelColor: event.target.attributes.color.value}) -// } -// -// createOrEditLabel(event){ -// if (event) event.preventDefault() -// this.isEditing() ? this.updateLabel() : this.createLabel() -// } -// -// updateLabel(){ -// commands.updateLabel( -// this.props.board.id, -// this.props.state.editingLabel, -// { -// text: this.state.labelText, -// color: this.state.labelColor -// } -// ) -// .then(this.goBack) -// } -// -// createLabel(){ -// commands.createLabel(this.props.board.id, { -// text: this.state.labelText, -// color:this.state.labelColor, -// cardId: this.props.card.id, -// }).then(this.goBack) -// } -// -// handleChange(event) { -// this.setState({labelText: event.target.value}) -// } -// -// render() { -// const labelBeingEdited = this.labelBeingEdited() -// const header = this.isEditing() ? "Edit Label" : "Create Label" -// -// const colorBoxes = colors.map(color => { -// const checked = (this.state.labelColor===color) ? true : false -// return
-// -//
-// }) -// -// const deleteButton = this.isEditing() ? -// -// Delete -// : null -// -// return -//
-// -//
{colorBoxes}
-//
-//
-// -// {deleteButton} -//
-//
-// -// } -// } -// -// const colors = [ -// "#0079bf", -// "#d8a359", -// "#70a95d", -// "#bc6858", -// "#9d7cae", -// "#d478a4", -// "#6cc885", -// "#30bbd3", -// "#98a0a4" -// ] +class MainLabelPanel extends Component { + + + editLabel(labelId, event){ + event.preventDefault() + this.props.editLabel(labelId) + this.props.goToPane('Create Label Pane')() + } + + + addOrRemoveLabel(labelId, event) { + event.preventDefault() + commands.addOrRemoveLabel(this.props.card.id, labelId) + } + + render() { + const { card, board } = this.props + const boardLabels = board.labels.map( label => { + const checked = card.label_ids.includes(label.id) + return + }) + + return +
+ {boardLabels} +
+
+ + Create Label + +
+ + } +} + + +const LabelRow = (props) => { + const {label, onClick, onEdit, checked} = props + + return
+
+ +
+ +
+} + +class CreateLabelPanel extends Component { + + constructor(props) { + super(props) + this.state = {} + + if (props.state.editingLabel === null){ + this.state.labelText = '' + this.state.labelColor = '#98A0A4' + } else { + const label = this.labelBeingEdited(props) + this.state.labelText = label.text + this.state.labelColor = label.color + } + + this.deleteLabel = this.deleteLabel.bind(this) + this.changeColor = this.changeColor.bind(this) + this.createOrEditLabel = this.createOrEditLabel.bind(this) + this.handleChange = this.handleChange.bind(this) + this.goBack = this.goBack.bind(this) + } + + labelBeingEdited(props=this.props){ + return this.isEditing(props) && + props.board.labels.find(label => label.id === props.state.editingLabel) + } + + isEditing(props=this.props){ + return typeof props.state.editingLabel === 'number' + } + + goBack(){ + this.props.goToPane('Main Label Pane')() + } + + deleteLabel(event) { + if (event) event.preventDefault() + commands.deleteLabel(this.props.board.id, this.props.state.editingLabel).then(this.goBack) + } + + changeColor(event) { + if (event) event.preventDefault() + this.setState({labelColor: event.target.attributes.color.value}) + } + + createOrEditLabel(event){ + if (event) event.preventDefault() + this.isEditing() ? this.updateLabel() : this.createLabel() + } + + updateLabel(){ + commands.updateLabel( + this.props.board.id, + this.props.state.editingLabel, + { + text: this.state.labelText, + color: this.state.labelColor + } + ) + .then(this.goBack) + } + + createLabel(){ + commands.createLabel(this.props.board.id, { + text: this.state.labelText, + color:this.state.labelColor, + cardId: this.props.card.id, + }).then(this.goBack) + } + + handleChange(event) { + this.setState({labelText: event.target.value}) + } + + render() { + const labelBeingEdited = this.labelBeingEdited() + const header = this.isEditing() ? "Edit Label" : "Create Label" + + const colorBoxes = colors.map(color => { + const checked = (this.state.labelColor===color) ? true : false + return
+ +
+ }) + + const deleteButton = this.isEditing() ? + + Delete + : null + + return +
+ +
{colorBoxes}
+
+
+ + {deleteButton} +
+
+ + } +} + +const colors = [ + "#0079bf", + "#d8a359", + "#70a95d", + "#bc6858", + "#9d7cae", + "#d478a4", + "#6cc885", + "#30bbd3", + "#98a0a4" +] diff --git a/browser/components/BoardShowPage/LabelMain.js b/browser/components/BoardShowPage/LabelMain.js index d3bfa31c..3f1fd414 100644 --- a/browser/components/BoardShowPage/LabelMain.js +++ b/browser/components/BoardShowPage/LabelMain.js @@ -1,231 +1,239 @@ -import React, {Component} from 'react' -import CardLabel from './Card/CardBadges/CardLabel' -import ColorBox from './ColorBox' -import Link from '../Link' -import Form from '../Form' -import Icon from '../Icon' -import Button from '../Button' -import ConfirmationButton from '../ConfirmationButton' -import ActionsMenuPane from '../ActionsMenuPane' -import boardStore from '../../stores/boardStore' -import commands from '../../commands' -import './Card/LabelMenu.sass' - -export default class MainLabelPanel extends Component { - - static propTypes = { - card: React.PropTypes.object.isRequired, - board: React.PropTypes.object.isRequired, - onClose: React.PropTypes.func.isRequired, - - } - - // constructor(props){ - // super(props) - // this.state = { - // editingLabel: null - // } - // this.editLabel = this.editLabel.bind(this) - // } - - editLabel(labelId, event){ - event.preventDefault() - this.props.editLabel(labelId) - this.props.goToPane('Create Label Pane')() - } - - - addOrRemoveLabel(labelId, event) { - event.preventDefault() - commands.addOrRemoveLabel(this.props.card.id, labelId) - } - - render() { - const { card, board } = this.props - const boardLabels = board.labels.map( label => { - const checked = card.label_ids.includes(label.id) - return - }) - - return -
- {boardLabels} -
-
- - Create Label - -
- - } -} - -const LabelRow = (props) => { - const {label, onClick, onEdit, checked} = props - - return
-
- -
- -
-} - -export class CreateLabelPanel extends Component { - - constructor(props) { - super(props) - this.state = {} - - if (props.state.editingLabel === null){ - this.state.labelText = '' - this.state.labelColor = '#98A0A4' - } else { - const label = this.labelBeingEdited(props) - this.state.labelText = label.text - this.state.labelColor = label.color - } - - this.deleteLabel = this.deleteLabel.bind(this) - this.changeColor = this.changeColor.bind(this) - this.createOrEditLabel = this.createOrEditLabel.bind(this) - this.handleChange = this.handleChange.bind(this) - this.goBack = this.goBack.bind(this) - } - - labelBeingEdited(props=this.props){ - return this.isEditing(props) && - props.board.labels.find(label => label.id === props.state.editingLabel) - } - - isEditing(props=this.props){ - return typeof props.state.editingLabel === 'number' - } - - goBack(){ - this.props.goToPane('Main Label Pane')() - } - - deleteLabel(event) { - if (event) event.preventDefault() - commands.deleteLabel(this.props.board.id, this.props.state.editingLabel).then(this.goBack) - } - - changeColor(event) { - if (event) event.preventDefault() - this.setState({labelColor: event.target.attributes.color.value}) - } - - createOrEditLabel(event){ - if (event) event.preventDefault() - this.isEditing() ? this.updateLabel() : this.createLabel() - } - - updateLabel(){ - commands.updateLabel( - this.props.board.id, - this.props.state.editingLabel, - { - text: this.state.labelText, - color: this.state.labelColor - } - ) - .then(this.goBack) - } - - createLabel(){ - commands.createLabel(this.props.board.id, { - text: this.state.labelText, - color:this.state.labelColor, - cardId: this.props.card.id, - }).then(this.goBack) - } - - handleChange(event) { - this.setState({labelText: event.target.value}) - } - - render() { - const labelBeingEdited = this.labelBeingEdited() - const header = this.isEditing() ? "Edit Label" : "Create Label" - - const colorBoxes = colors.map(color => { - const checked = (this.state.labelColor===color) ? true : false - return
- -
- }) - - const deleteButton = this.isEditing() ? - - Delete - : null - - return -
- -
{colorBoxes}
-
-
- - {deleteButton} -
-
- - } -} - -const colors = [ - "#0079bf", - "#d8a359", - "#70a95d", - "#bc6858", - "#9d7cae", - "#d478a4", - "#6cc885", - "#30bbd3", - "#98a0a4" -] +// import React, {Component} from 'react' +// import CardLabel from './Card/CardBadges/CardLabel' +// import ColorBox from './ColorBox' +// import Link from '../Link' +// import Form from '../Form' +// import Icon from '../Icon' +// import Button from '../Button' +// import ConfirmationButton from '../ConfirmationButton' +// import ActionsMenuPane from '../ActionsMenuPane' +// import boardStore from '../../stores/boardStore' +// import commands from '../../commands' +// import './Card/LabelMenu.sass' +// +// export default class MainLabelPanel extends Component { +// +// static propTypes = { +// card: React.PropTypes.object.isRequired, +// board: React.PropTypes.object.isRequired, +// // TODO: onClose: React.PropTypes.func.isRequired +// +// } +// +// +// //TODO: translate this constructor taken from LabelMenu for these components +// constructor(props){ +// super(props) +// this.state = { +// null: null +// } +// this.editLabel = this.editLabel.bind(this) +// } +// +// editLabel(labelId){ +// this.setState({editingLabel: labelId}) +// } +// +// +// +// editLabel(labelId, event){ +// event.preventDefault() +// this.props.editLabel(labelId) +// this.props.goToPane('Create Label Pane')() +// } +// +// +// addOrRemoveLabel(labelId, event) { +// event.preventDefault() +// commands.addOrRemoveLabel(this.props.card.id, labelId) +// } +// +// render() { +// const { card, board } = this.props +// const boardLabels = board.labels.map( label => { +// const checked = card.label_ids.includes(label.id) +// return +// }) +// +// return +//
+// {boardLabels} +//
+//
+// +// Create Label +// +//
+// +// } +// } +// +// const LabelRow = (props) => { +// const {label, onClick, onEdit, checked} = props +// +// return
+//
+// +//
+// +//
+// } +// +// export class CreateLabelPanel extends Component { +// +// constructor(props) { +// super(props) +// this.state = {} +// +// if (props.state.editingLabel === null){ +// this.state.labelText = '' +// this.state.labelColor = '#98A0A4' +// } else { +// const label = this.labelBeingEdited(props) +// this.state.labelText = label.text +// this.state.labelColor = label.color +// } +// +// this.deleteLabel = this.deleteLabel.bind(this) +// this.changeColor = this.changeColor.bind(this) +// this.createOrEditLabel = this.createOrEditLabel.bind(this) +// this.handleChange = this.handleChange.bind(this) +// this.goBack = this.goBack.bind(this) +// } +// +// labelBeingEdited(props=this.props){ +// return this.isEditing(props) && +// props.board.labels.find(label => label.id === props.state.editingLabel) +// } +// +// isEditing(props=this.props){ +// return typeof props.state.editingLabel === 'number' +// } +// +// goBack(){ +// this.props.goToPane('Main Label Pane')() +// } +// +// deleteLabel(event) { +// if (event) event.preventDefault() +// commands.deleteLabel(this.props.board.id, this.props.state.editingLabel).then(this.goBack) +// } +// +// changeColor(event) { +// if (event) event.preventDefault() +// this.setState({labelColor: event.target.attributes.color.value}) +// } +// +// createOrEditLabel(event){ +// if (event) event.preventDefault() +// this.isEditing() ? this.updateLabel() : this.createLabel() +// } +// +// updateLabel(){ +// commands.updateLabel( +// this.props.board.id, +// this.props.state.editingLabel, +// { +// text: this.state.labelText, +// color: this.state.labelColor +// } +// ) +// .then(this.goBack) +// } +// +// createLabel(){ +// commands.createLabel(this.props.board.id, { +// text: this.state.labelText, +// color:this.state.labelColor, +// cardId: this.props.card.id, +// }).then(this.goBack) +// } +// +// handleChange(event) { +// this.setState({labelText: event.target.value}) +// } +// +// render() { +// const labelBeingEdited = this.labelBeingEdited() +// const header = this.isEditing() ? "Edit Label" : "Create Label" +// +// const colorBoxes = colors.map(color => { +// const checked = (this.state.labelColor===color) ? true : false +// return
+// +//
+// }) +// +// const deleteButton = this.isEditing() ? +// +// Delete +// : null +// +// return +//
+// +//
{colorBoxes}
+//
+//
+// +// {deleteButton} +//
+//
+// +// } +// } +// +// const colors = [ +// "#0079bf", +// "#d8a359", +// "#70a95d", +// "#bc6858", +// "#9d7cae", +// "#d478a4", +// "#6cc885", +// "#30bbd3", +// "#98a0a4" +// ] diff --git a/browser/components/BoardShowPage/LabelsPane.js b/browser/components/BoardShowPage/LabelsPane.js new file mode 100644 index 00000000..6bbd157b --- /dev/null +++ b/browser/components/BoardShowPage/LabelsPane.js @@ -0,0 +1,30 @@ +import React, { Component, PropTypes } from 'react' +import CardLabel from './Card/CardBadges/CardLabel' + + +// This component is designed to be given to ActionsMenu +export default class LabelsPane extends Component { + + static propTypes = { + board: PropTypes.object.isRequired, + } + + render(){ + const { board } = this.props + + const labels = board.labels.map( label => { + return