# @cjsx React.DOM $ = require('jquery') Backbone = require('backbone') React = require('react') EditTag = require('./edit_tag') ModalTrigger = require('react-bootstrap/lib/ModalTrigger')
module.exports = React.createClass
displayName: 'Tags' componentDidMount: -> console.log '[views/tags] component did mount' @props.tags.on 'sync', @forceUpdate.bind(@, null) componentWillReceiveProps: (nextProps)-> console.log '[views/tags] component will receive props' nextProps.tags.on 'sync', @forceUpdate.bind(@, null) render: -> <div className="container carte-list"> <div className="row"> <div className="col-sm-12"> <ul className="nav nav-pills"> <li> <a href="#/"> <i className="glyphicon glyphicon-arrow-left" /> </a> </li> </ul> </div> </div> <div className="row"> { if @props.tags.fetching <div className="list-group col-sm-4"> <div className="list-group-item"> <i className="glyphicon glyphicon-refresh glyphicon-refresh-animate" /> </div> </div> else @props.tags.map (tag)-> <div className="list-group col-sm-4"> <div className="list-group-item"> <i className="glyphicon glyphicon-tag" /> {tag.get('name')} ( <a href={'#/?tags=' + encodeURIComponent(tag.get('name'))}> {tag.get('count')} </a> ) <span className="pull-right tools"> <ModalTrigger modal={<EditTag tag={tag} />}> <a href="javascript:void(0)"> <i className="glyphicon glyphicon-edit" /> </a> </ModalTrigger> </span> </div> </div> } </div> </div>