From 7a9900d8aed0c2d29ac92d78a464ea0d0f64de10 Mon Sep 17 00:00:00 2001 From: unknown Date: Mon, 19 Nov 2018 18:13:06 -0500 Subject: [PATCH 1/5] ui to allow editing uri filters --- assets/js/actions/targets.js | 10 +-- assets/js/containers/UriListItem.js | 87 +++++++++++++++++++++--- assets/js/reducers/targets.js | 2 +- assets/js/targets.js | 25 ++++++- assets/styles/shared/underlineinput.scss | 11 +-- assets/styles/shared/urilistitem.scss | 46 ++++++++++++- assets/styles/targets.scss | 6 +- 7 files changed, 158 insertions(+), 29 deletions(-) diff --git a/assets/js/actions/targets.js b/assets/js/actions/targets.js index bc68fd7..619215c 100644 --- a/assets/js/actions/targets.js +++ b/assets/js/actions/targets.js @@ -28,10 +28,11 @@ export const addUrl = url => ({ data: url }) -export const changeUrlField = (id, value) => ({ +export const changeUrlField = (id, what, value) => ({ type: ACTIONS.edit_url, data: { id, + what, value } }) @@ -90,13 +91,14 @@ export const createNewUrl = () => async (dispatch, getState) => { } } -export const setUrl = (id, value) => async (dispatch, getState) => { +export const setUrl = (value) => async (dispatch, getState) => { dispatch(setWorking(true)) try { await Ajax.patch({ - url: '/api/targets/' + id, + url: '/api/targets/' + value.id, data: { - url: value + ...value, + id: undefined } }) } catch (e) { diff --git a/assets/js/containers/UriListItem.js b/assets/js/containers/UriListItem.js index c499024..5f347de 100644 --- a/assets/js/containers/UriListItem.js +++ b/assets/js/containers/UriListItem.js @@ -7,24 +7,89 @@ import '../../styles/shared/urilistitem.scss' import { changeUrlField, setUrl, removeUrl } from '../actions/targets' const uriRegex = /(.+:\/\/)?(.+\.)*(.+\.).{1,}(:\d+)?(.+)?/i +const isbnRegex = /^(97(8|9))?\d{9}(\d|X)$/ class UriListItem extends React.Component { - render () { + constructor () { + super() + this.getView = this.getView.bind(this) + this.getEditing = this.getEditing.bind(this) + } + getView () { return (
  • - this.props.dispatch(changeUrlField(this.props.id, e.target.value))} - onBlur={(e) => this.props.dispatch(setUrl(this.props.id, e.target.value))} /> - this.props.dispatch(removeUrl(this.props.id))} /> +
    + Destination URL + {this.props.item.url} +
    +
    + Filters + {this.props.item.url} +
    + this.props.dispatch(removeUrl(this.props.item.id))} />
    • ) } + getEditing () { + return ( +
  • +
    +

    Editing: {this.props.url}

    + this.props.dispatch(removeUrl(this.props.item.id))} /> +
    +
    + this.props.dispatch(changeUrlField(this.props.item.id, 'uri', e.target.value))} + onBlur={(e) => this.props.dispatch(setUrl(this.props.item))} /> +

    Filters

    + this.props.dispatch(changeUrlField(this.props.item.id, 'title', e.target.value))} + onBlur={(e) => this.props.dispatch(setUrl(this.props.item))} /> + this.props.dispatch(changeUrlField(this.props.item.id, 'author', e.target.value))} + onBlur={(e) => this.props.dispatch(setUrl(this.props.item))} /> + this.props.dispatch(changeUrlField(this.props.item.id, 'publisher', e.target.value))} + onBlur={(e) => this.props.dispatch(setUrl(this.props.item))} /> + this.props.dispatch(changeUrlField(this.props.item.id, 'isbn', e.target.value))} + onBlur={(e) => this.props.dispatch(setUrl(this.props.item))} /> +
    +
    • + ) + } + render () { + return ( + this.props.editing ? this.getEditing() : this.getView() + ) + } } export default UriListItem diff --git a/assets/js/reducers/targets.js b/assets/js/reducers/targets.js index fd028ab..50de06e 100644 --- a/assets/js/reducers/targets.js +++ b/assets/js/reducers/targets.js @@ -26,7 +26,7 @@ const reducer = (state = {}, action) => { } case Actions.edit_url: urls = state.urls - urls.find(x => x.id === data.id).url = data.value + urls.find(x => x.id === data.id)[data.what] = data.value return { urls: urls } diff --git a/assets/js/targets.js b/assets/js/targets.js index 32c2ec0..21e2f75 100644 --- a/assets/js/targets.js +++ b/assets/js/targets.js @@ -18,9 +18,28 @@ class App extends React.Component { password: '' }, urls: [{ + id: 0, + url: 'http.c.co', + title: '', + author: '', + publisher: '', + isbn: '' + },{ id: 1, - url: 'http' + url: 'd.', + title: '', + author: '', + publisher: '', + isbn: '' + },{ + id: 2, + url: '', + title: '', + author: '', + publisher: '', + isbn: '' }], + editingUrl: 0, working: false } @@ -47,8 +66,8 @@ class App extends React.Component { return () + item={item} + editing={this.state.editingUrl === item.id} />) }) } render () { diff --git a/assets/styles/shared/underlineinput.scss b/assets/styles/shared/underlineinput.scss index 589ffda..378a33e 100644 --- a/assets/styles/shared/underlineinput.scss +++ b/assets/styles/shared/underlineinput.scss @@ -58,6 +58,13 @@ } } &:focus + .reacts-to, + &:active + .reacts-to { + .underline:before { + width: 100%; + left: 0; + } + } + &:focus + .reacts-to, &:active + .reacts-to, &.has-content + .reacts-to { label { @@ -66,10 +73,6 @@ line-height: 14px; color: $accent-2; } - .underline:before { - width: 100%; - left: 0; - } } &.invalid { color: $red; diff --git a/assets/styles/shared/urilistitem.scss b/assets/styles/shared/urilistitem.scss index 2f6f8c3..3e891f9 100644 --- a/assets/styles/shared/urilistitem.scss +++ b/assets/styles/shared/urilistitem.scss @@ -1,12 +1,52 @@ @import '../lib/vars'; .uri-list-item { - height: 60px; + min-height: 60px; line-height: 60px; - background: $background-1; + background: white; box-shadow: $shadow-0; + padding: 0 0 0 14px; - & > .button.icon { + .button.icon { margin: 7px 5px 3px 5px; } + + &.editing { + margin: 24px 8px; + line-height: initial; + padding: 10px 0 10px 14px; + border-radius: 3px; + + header { + h3 { + display: inline-block; + margin: 10px 0 0 0; + font-weight: normal; + } + } + .settings { + padding: 0 14px 0 0; + } + h4 { + margin: 30px 0 0 0; + font-weight: normal; + } + } + + .stack { + line-height: 25px; + padding: 5px 0; + + span { + display: inline-block; + width: 100%; + } + span.label { + font-size: 0.75rem; + color: $black-2; + } + span.value { + margin-top: -4px; + } + } } diff --git a/assets/styles/targets.scss b/assets/styles/targets.scss index 9c5d4b3..9283fe1 100644 --- a/assets/styles/targets.scss +++ b/assets/styles/targets.scss @@ -20,7 +20,7 @@ padding: 0 14px; margin: -14px 0 8px 0; } - header { + & > header { padding: 0 14px; h1 { @@ -37,10 +37,10 @@ } } .list { - margin: 14px; + margin: 20px 14px; padding: 0; list-style: none; - overflow: hidden; + // overflow: hidden; } &.working { & > .progress { From 793e6db2862ab9f3e060056e64b20edb22a5d87b Mon Sep 17 00:00:00 2001 From: unknown Date: Mon, 19 Nov 2018 18:28:15 -0500 Subject: [PATCH 2/5] ui functional, filters all added --- assets/js/actions/targets.js | 6 ++++++ assets/js/containers/UriListItem.js | 20 +++++++++++++------- assets/js/reducers/targets.js | 4 ++++ assets/js/targets.js | 4 ++-- assets/styles/shared/urilistitem.scss | 6 ++++++ 5 files changed, 31 insertions(+), 9 deletions(-) diff --git a/assets/js/actions/targets.js b/assets/js/actions/targets.js index 619215c..9c6fe56 100644 --- a/assets/js/actions/targets.js +++ b/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: { diff --git a/assets/js/containers/UriListItem.js b/assets/js/containers/UriListItem.js index 5f347de..477379a 100644 --- a/assets/js/containers/UriListItem.js +++ b/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 ( -
  • +
  • this.cancelEvent(e, this.props.item.id)}>
    Destination URL {this.props.item.url}
    Filters - {this.props.item.url} + {['publisher', 'title', 'author', 'isbn'].reduce((a, x) => a + (this.props.item[x] ? 1 : 0), 0) || 'None'}
    this.props.dispatch(removeUrl(this.props.item.id))} />
    • @@ -32,9 +38,9 @@ class UriListItem extends React.Component { } getEditing () { return ( -
  • -
    -

    Editing: {this.props.url}

    +
  • this.cancelEvent(e, false)}> +
    this.cancelEvent(e, null)}> +

    Editing: {this.props.item.url}

    this.props.dispatch(removeUrl(this.props.item.id))} />
    @@ -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))} />

    Filters

    { return { urls: urls } + case Actions.set_editing: + return { + editingUrl: data + } case Actions.error: return { error: data.message diff --git a/assets/js/targets.js b/assets/js/targets.js index 21e2f75..2eca2a8 100644 --- a/assets/js/targets.js +++ b/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 ( -
    +
    this.dispatch(setEditing(null))}>