Bugzilla – Attachment 55545 Details for
Bug 17297
Give librarians the ability to add messages to an item
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Help
|
New Account
|
Log In
[x]
|
Forgot Password
Login:
[x]
[patch]
Bug 17297 [POC] - Add React based item message editor
Bug-17297-POC---Add-React-based-item-message-edito.patch (text/plain), 10.55 KB, created by
Kyle M Hall
on 2016-09-13 17:08:34 UTC
(
hide
)
Description:
Bug 17297 [POC] - Add React based item message editor
Filename:
MIME Type:
Creator:
Kyle M Hall
Created:
2016-09-13 17:08:34 UTC
Size:
10.55 KB
patch
obsolete
>From 1f69a5058af06306c998891be5cea988e3e62602 Mon Sep 17 00:00:00 2001 >From: Kyle M Hall <kyle@bywatersolutions.com> >Date: Tue, 13 Sep 2016 16:08:07 +0000 >Subject: [PATCH] Bug 17297 [POC] - Add React based item message editor > >--- > koha-tmpl/intranet-tmpl/prog/css/staff-global.css | 100 +++++++++-------- > .../prog/en/modules/catalogue/moredetail.tt | 2 + > .../intranet-tmpl/prog/js/public/moredetail.js | 124 +++++++++++++++++++++ > 3 files changed, 180 insertions(+), 46 deletions(-) > create mode 100644 koha-tmpl/intranet-tmpl/prog/js/public/moredetail.js > >diff --git a/koha-tmpl/intranet-tmpl/prog/css/staff-global.css b/koha-tmpl/intranet-tmpl/prog/css/staff-global.css >index de0e492..6ac77e1 100644 >--- a/koha-tmpl/intranet-tmpl/prog/css/staff-global.css >+++ b/koha-tmpl/intranet-tmpl/prog/css/staff-global.css >@@ -65,12 +65,12 @@ h3 { > } > > h4 { >- font-size : 116%; >+ font-size : 116%; > font-weight : bold; > } > > h5 { >- font-size : 100%; >+ font-size : 100%; > font-weight : bold; > } > >@@ -561,15 +561,15 @@ div.yui-b fieldset.brief fieldset legend { > font-size : 85%; > } > >-fieldset.rows { >+fieldset.rows { > border-width : 1px; > border:2px solid #b9d8d9; > float : left; > font-size : 90%; > clear : left; >-margin: .9em 0 0 0; >+margin: .9em 0 0 0; > padding: 0; >-width: 100%; >+width: 100%; > } > > fieldset.rows.unselected { >@@ -578,17 +578,17 @@ fieldset.rows.unselected { > border: 0; > } > >-fieldset.rows legend { >+fieldset.rows legend { > margin-left: 1em; > font-weight: bold; > font-size : 110%; > } > >-fieldset.rows label, fieldset.rows span.label { >- float: left; >+fieldset.rows label, fieldset.rows span.label { >+ float: left; > font-weight : bold; >- width: 6em; >- margin-right: 1em; >+ width: 6em; >+ margin-right: 1em; > text-align: right; > } > >@@ -599,16 +599,16 @@ fieldset.rows fieldset { > padding : .3em; > } > >-.yui-b fieldset.rows label, .yui-b fieldset.rows span.label { >- width: 9em; >+.yui-b fieldset.rows label, .yui-b fieldset.rows span.label { >+ width: 9em; > } > > .yui-b fieldset.rows div.hint { > margin-left : 10.5em; > } > >-.yui-u fieldset.rows label, .yui-u fieldset.rows span.label { >- width: 10em; >+.yui-u fieldset.rows label, .yui-u fieldset.rows span.label { >+ width: 10em; > } > > .yui-u fieldset.rows div.hint { >@@ -617,20 +617,20 @@ fieldset.rows fieldset { > > fieldset.rows.left label, fieldset.rows.left span.label { > width : 8em; >- text-align : left; >+ text-align : left; > } > >-fieldset.rows ol { >-padding: 1em 1em 0 1em; >+fieldset.rows ol { >+padding: 1em 1em 0 1em; > list-style-type: none; > } > >-fieldset.rows li { >+fieldset.rows li { > float : left; > clear : left; > padding-bottom: 1em; > list-style-type: none; >-width: 100%; >+width: 100%; > } > > fieldset.rows.left li { >@@ -708,22 +708,22 @@ div.rows+div.rows { > div.rows { > float : left; > clear : left; >-margin: 0 0 0 0; >+margin: 0 0 0 0; > padding: 0; >-width: 100%; >+width: 100%; > } > > >-div.rows span.label { >- float: left; >+div.rows span.label { >+ float: left; > font-weight : bold; >- width: 9em; >- margin-right: 1em; >+ width: 9em; >+ margin-right: 1em; > text-align: left; > } > >-div.rows ol { >-padding: .5em 1em 0 0; >+div.rows ol { >+padding: .5em 1em 0 0; > list-style-type: none; > } > >@@ -738,7 +738,7 @@ clear : left; > padding-bottom: .2em; > padding-top: .1em; > list-style-type: none; >-width: 100%; >+width: 100%; > } > > a.cancel { >@@ -849,8 +849,8 @@ ol.bibliodetails span.label { > border-right : 1px solid #E8E8E8; > float : left; > font-weight: bold; >- width: 12em; >- margin-right: 1em; >+ width: 12em; >+ margin-right: 1em; > } > > div.listgroup { >@@ -869,6 +869,14 @@ div.listgroup input { > font-size: 80%; > } > >+div.listgroup ol li span.label i { >+ margin-right : .5em; >+} >+ >+div.listgroup ol li button,a { >+ margin-left : .5em; >+} >+ > div.sysprefs h3 { > margin : .2em 0 .2em .4em; > } >@@ -938,7 +946,7 @@ span.expired { > } > > div.help { >- margin: .9em 0 0 0; >+ margin: .9em 0 0 0; > } > > .blocker { >@@ -996,12 +1004,12 @@ div.first fieldset { > .dialog table td { > text-align : left; > } >- >+ > .dialog h2, .dialog h3, .dialog h4 { > margin : auto; > text-align : center; > } >- >+ > .dialog input { > background-color : #FFF; > border : 1px solid #bcbcbc; >@@ -1155,11 +1163,11 @@ div.note i.fa-exclamation { > div.results { > padding : .7em 0; > } >- >+ > .accesskey { > text-decoration : underline; > } >- >+ > label.required, > span.required { > color : #C00; >@@ -1293,7 +1301,7 @@ h1#logo a { > } > > #closewindow a { >- font-weight : bold; >+ font-weight : bold; > } > > .patroninfo+#menu { >@@ -1326,10 +1334,10 @@ li.email { > } > > .clearfix:after { >- content: "."; >- display: block; >- height: 0; >- clear: both; >+ content: "."; >+ display: block; >+ height: 0; >+ clear: both; > visibility: hidden; > } > >@@ -1570,7 +1578,7 @@ input.warning { > } > > #displayexample { >- padding: 5px; >+ padding: 5px; > margin-bottom: 10px; > background-color: #CCCCCC; > } >@@ -1689,7 +1697,7 @@ span.permissiondesc { > > .results_summary { > display: block; >- font-size : 85%; >+ font-size : 85%; > color: #707070; > padding : 0 0 .5em 0; > } >@@ -1795,10 +1803,10 @@ fieldset.rows+h3 {clear:both;padding-top:.5em;} > } > > .m880 { >- display:block; >- text-align:right; >- float:right; >- width:50%; >+ display:block; >+ text-align:right; >+ float:right; >+ width:50%; > padding-left:20px > } > >diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/moredetail.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/moredetail.tt >index 75dcebe..7760199 100644 >--- a/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/moredetail.tt >+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/moredetail.tt >@@ -15,6 +15,7 @@ > browser.show(); > //]]> > </script> >+<script type="text/javascript" src="[% interface %]/[% theme %]/js/app/moredetail.js"></script> > </head> > <body id="catalog_moredetail" class="catalog"> > [% USE KohaDates %] >@@ -199,6 +200,7 @@ > [% END %] > > </ol></div> >+ <div id="item-messages-[% ITEM_DAT.itemnumber %]" class="item-messages"></div> > <div class="listgroup"><h4>History</h4> > <ol class="bibliodetails"> > >diff --git a/koha-tmpl/intranet-tmpl/prog/js/public/moredetail.js b/koha-tmpl/intranet-tmpl/prog/js/public/moredetail.js >new file mode 100644 >index 0000000..1e6e122 >--- /dev/null >+++ b/koha-tmpl/intranet-tmpl/prog/js/public/moredetail.js >@@ -0,0 +1,124 @@ >+var React = require('react'); >+var ReactDOM = require('react-dom'); >+ >+var ItemMessages = React.createClass({ >+ propTypes: { >+ messages: React.PropTypes.array.isRequired >+ }, >+ getInitialState: function() { >+ return { messages: this.props.messages }; >+ }, >+ addMessage: function(message) { >+ this.setState(function(state) { >+ var newData = state.messages.slice(); >+ newData.push( message ); >+ return {messages: newData}; >+ }); >+ }, >+ removeMessage: function(index) { >+ this.setState(function(state) { >+ var newData = state.messages.slice(); >+ newData.splice(index, 1); >+ return {messages: newData}; >+ }); >+ }, >+ render: function () { >+ var item_messages = this; >+ return <div className="listgroup"> >+ <h4>Messages</h4> >+ <ol className="bibliodetails"> >+ {this.state.messages.map(function(message, index) { >+ return <ItemMessage key={message.id} message={message} index={index} onRemove={item_messages.removeMessage} /> >+ })} >+ <ItemMessageCreator onAdd={item_messages.addMessage}/> >+ </ol> >+ </div>; >+ } >+}); >+ >+var ItemMessage = React.createClass({ >+ propTypes: { >+ message: React.PropTypes.object.isRequired, >+ index: React.PropTypes.number.isRequired, >+ onRemove: React.PropTypes.func.isRequired, >+ }, >+ removeMessage: function() { >+ if ( confirm("Delete message the following message? : " + this.props.message.content ) ) { >+ this.props.onRemove(this.props.index); >+ } >+ }, >+ render: function () { >+ return <li> >+ <span className="label"> >+ <i className="fa fa-minus-circle" onClick={this.removeMessage}></i> >+ {this.props.message.type} >+ </span> >+ {this.props.message.content} >+ </li> >+ } >+}); >+ >+var ItemMessageCreator = React.createClass({ >+ propTypes: { >+ onAdd: React.PropTypes.func.isRequired, >+ }, >+ getInitialState: function () { >+ return { >+ content: "", >+ type: "", >+ }; >+ }, >+ addMessage: function() { >+ this.props.onAdd( >+ { >+ id: Math.random() * 100, >+ type: this.state.type, >+ content: this.state.content, >+ } >+ ); >+ }, >+ cancelMessage: function() { >+ this.setState( this.getInitialState ); >+ return false; >+ }, >+ handleTypeChange: function(e) { >+ this.setState({ type: e.target.value }); >+ }, >+ handleContentChange: function(e) { >+ this.setState({ content: e.target.value }); >+ }, >+ render: function () { >+ return <li> >+ <span className="label"> >+ <select value={this.state.type} onChange={this.handleTypeChange}> >+ <option value="test1">Test 1</option> >+ <option value="test2">Test 2</option> >+ <option value="test3">Test 3</option> >+ </select> >+ </span> >+ <input className="input-xlarge" type="text" value={this.state.content} onChange={this.handleContentChange} /> >+ <button className="submit" onClick={this.addMessage}> >+ <i className="fa fa-plus-circle"></i> >+ Add message >+ </button> >+ <a href="javascript:void(0);" onClick={this.cancelMessage}>Cancel</a> >+ </li> >+ } >+}); >+ >+$( document ).ready(function() { >+ var messages = [ >+ { id: 1, type: "Test 1", content: "Message 1" }, >+ { id: 2, type: "Test 2", content: "Message 2" }, >+ { id: 3, type: "Test 3", content: "Message 3" }, >+ { id: 4, type: "Test 4", content: "Message 4" }, >+ { id: 5, type: "Test 5", content: "Message 5" }, >+ ]; >+ >+ $('.item-messages').each(function() { >+ ReactDOM.render( >+ <ItemMessages messages={messages}/>, >+ this >+ ); >+ }); >+}); >-- >2.1.4
You cannot view the attachment while viewing its details because your browser does not support IFRAMEs.
View the attachment on a separate page
.
View Attachment As Diff
View Attachment As Raw
Actions:
View
|
Diff
|
Splinter Review
Attachments on
bug 17297
:
55544
|
55545
|
55546
|
60861
|
60862
|
60863
|
60926
|
60927
|
60928