ui functional, filters all added

assets/js/actions/targets.js

@@ -8,6 +8,7 @@ const ACTIONS = {
   edit_url: 'edit_url',
   delete_url: 'delete_url',
   list_url: 'list_url',
+  set_editing: 'set_editing',
   error: 'error'
 }
 
@@ -28,6 +29,11 @@ export const addUrl = url => ({
   data: url
 })
 
+export const setEditing = id => ({
+  type: ACTIONS.set_editing,
+  data: id
+})
+
 export const changeUrlField = (id, what, value) => ({
   type: ACTIONS.edit_url,
   data: {

assets/js/containers/UriListItem.js

@@ -4,7 +4,7 @@ import React from 'react'
 import IconButton from '../components/IconButton'
 import UnderlineInput from '../components/UnderlineInput'
 import '../../styles/shared/urilistitem.scss'
-import { changeUrlField, setUrl, removeUrl } from '../actions/targets'
+import { changeUrlField, setUrl, removeUrl, setEditing } from '../actions/targets'
 
 const uriRegex = /(.+:\/\/)?(.+\.)*(.+\.).{1,}(:\d+)?(.+)?/i
 const isbnRegex = /^(97(8|9))?\d{9}(\d|X)$/
@@ -14,17 +14,23 @@ class UriListItem extends React.Component {
     super()
     this.getView = this.getView.bind(this)
     this.getEditing = this.getEditing.bind(this)
+    this.cancelEvent = this.cancelEvent.bind(this)
+  }
+  cancelEvent (e, id) {
+    e.stopPropagation()
+    if (id === false) return
+    this.props.dispatch(setEditing(id))
   }
   getView () {
     return (
-      <li className='uri-list-item flex-container'>
+      <li className='uri-list-item flex-container' onClick={(e) => this.cancelEvent(e, this.props.item.id)}>
         <div className='stack flex flex-container flex-vertical'>
           <span className='label'>Destination URL</span>
           <span className='value'>{this.props.item.url}</span>
         </div>
         <div className='stack flex flex-container flex-vertical'>
           <span className='label'>Filters</span>
-          <span className='value'>{this.props.item.url}</span>
+          <span className='value'>{['publisher', 'title', 'author', 'isbn'].reduce((a, x) => a + (this.props.item[x] ? 1 : 0), 0) || 'None'}</span>
         </div>
         <IconButton icon='delete' onClick={() => this.props.dispatch(removeUrl(this.props.item.id))} />
       </li>
@@ -32,9 +38,9 @@ class UriListItem extends React.Component {
   }
   getEditing () {
     return (
-      <li className='uri-list-item flex-container flex-vertical editing'>
+      <li className='uri-list-item flex-container flex-vertical editing' onClick={(e) => this.cancelEvent(e, false)}>
-        <header className='flex-container'>
+        <header className='flex-container' onClick={(e) => this.cancelEvent(e, null)}>
-          <h3 className='flex'>Editing: {this.props.url}</h3>
+          <h3 className='flex'>Editing: {this.props.item.url}</h3>
           <IconButton icon='delete' onClick={() => this.props.dispatch(removeUrl(this.props.item.id))} />
         </header>
         <div className='settings'>
@@ -45,7 +51,7 @@ class UriListItem extends React.Component {
             placeholder='Destination URL'
             value={'' + this.props.item.url}
             pattern={uriRegex}
-            onChange={(e) => this.props.dispatch(changeUrlField(this.props.item.id, 'uri', e.target.value))}
+            onChange={(e) => this.props.dispatch(changeUrlField(this.props.item.id, 'url', e.target.value))}
             onBlur={(e) => this.props.dispatch(setUrl(this.props.item))} />
           <h4>Filters</h4>
           <UnderlineInput

assets/js/reducers/targets.js

@@ -30,6 +30,10 @@ const reducer = (state = {}, action) => {
       return {
         urls: urls
       }
+    case Actions.set_editing:
+      return {
+        editingUrl: data
+      }
     case Actions.error:
       return {
         error: data.message

assets/js/targets.js

@@ -5,7 +5,7 @@ import ReactDOM from 'react-dom'
 import Progress from './components/Progress'
 import UriListItem from './containers/UriListItem'
 import reducer from './reducers/targets'
-import { fetchUrls, createNewUrl } from './actions/targets'
+import { fetchUrls, createNewUrl, setEditing } from './actions/targets'
 import '../styles/targets.scss'
 
 class App extends React.Component {
@@ -72,7 +72,7 @@ class App extends React.Component {
   }
   render () {
     return (
-      <div className='root-container flex-container'>
+      <div className='root-container flex-container' onClick={() => this.dispatch(setEditing(null))}>
         <aside className='nav nav-left'>
           <header>
             <h1>RoE</h1>

assets/styles/shared/urilistitem.scss

@@ -6,6 +6,10 @@
   background: white;
   box-shadow: $shadow-0;
   padding: 0 0 0 14px;
+  cursor: pointer;
+  transition: margin 0.15s $transition,
+              padding 0.15s $transition,
+              border-radius 0.15s $transition;
 
   .button.icon {
     margin: 7px 5px 3px 5px;
@@ -16,12 +20,14 @@
     line-height: initial;
     padding: 10px 0 10px 14px;
     border-radius: 3px;
+    cursor: default;
 
     header {
       h3 {
         display: inline-block;
         margin: 10px 0 0 0;
         font-weight: normal;
+        cursor: pointer;
       }
     }
     .settings {