Bugzilla – Attachment 60862 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]
[SIGNED-OFF] Bug 17297 [POC] - Add React based item message editor
SIGNED-OFF-Bug-17297-POC---Add-React-based-item-me.patch (text/plain), 10.77 KB, created by
Josef Moravec
on 2017-03-07 10:42:06 UTC
(
hide
)
Description:
[SIGNED-OFF] Bug 17297 [POC] - Add React based item message editor
Filename:
MIME Type:
Creator:
Josef Moravec
Created:
2017-03-07 10:42:06 UTC
Size:
10.77 KB
patch
obsolete
>From aacacd5f6ecdaac0c883730dac57dbfc77c6a6a5 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] [SIGNED-OFF] Bug 17297 [POC] - Add React based item message > editor > >Signed-off-by: Josef Moravec <josef.moravec@gmail.com> >--- > koha-tmpl/intranet-tmpl/prog/css/staff-global.css | 96 ++++++++-------- > .../prog/en/modules/catalogue/moredetail.tt | 2 + > .../intranet-tmpl/prog/js/public/moredetail.js | 124 +++++++++++++++++++++ > 3 files changed, 178 insertions(+), 44 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 6b22201..2dd6f47 100644 >--- a/koha-tmpl/intranet-tmpl/prog/css/staff-global.css >+++ b/koha-tmpl/intranet-tmpl/prog/css/staff-global.css >@@ -75,12 +75,12 @@ h3 { > } > > h4 { >- font-size : 116%; >+ font-size : 116%; > font-weight : bold; > } > > h5 { >- font-size : 100%; >+ font-size : 100%; > font-weight : bold; > } > >@@ -614,7 +614,7 @@ div.yui-b fieldset.brief fieldset legend { > margin-left: 20px; > } > >-fieldset.rows { >+fieldset.rows { > border-width : 1px; > border:2px solid #b9d8d9; > float : left; >@@ -622,7 +622,7 @@ font-size : 90%; > clear : left; > margin: .9em 0 0 0; > padding: 0; >-width: 100%; >+width: 100%; > } > > fieldset.rows.unselected { >@@ -631,17 +631,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; > } > >@@ -652,8 +652,8 @@ 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 td label, .yui-b fieldset.rows td span.label { >@@ -664,8 +664,8 @@ fieldset.rows fieldset { > 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 { >@@ -674,20 +674,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 { >@@ -783,17 +783,17 @@ 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; >+ margin-right: 1em; > text-align: left; > padding-top: 0; > } >@@ -802,8 +802,8 @@ div.rows span.label { > white-space: normal; > } > >-div.rows ol { >-padding: .5em 1em 0 0; >+div.rows ol { >+padding: .5em 1em 0 0; > list-style-type: none; > } > >@@ -818,7 +818,7 @@ clear : left; > padding-bottom: .2em; > padding-top: .1em; > list-style-type: none; >-width: 100%; >+width: 100%; > } > > a.cancel { >@@ -946,8 +946,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 { >@@ -966,6 +966,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; > } >@@ -1035,7 +1043,7 @@ span.expired { > } > > div.help { >- margin: .9em 0 0 0; >+ margin: .9em 0 0 0; > } > > .blocker { >@@ -1092,12 +1100,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; >@@ -1252,11 +1260,11 @@ div.note i.fa-exclamation { > div.results { > padding : .7em 0; > } >- >+ > .accesskey { > text-decoration : underline; > } >- >+ > label.required, > span.required { > color : #C00; >@@ -1388,7 +1396,7 @@ h1#logo a { > } > > #closewindow a { >- font-weight : bold; >+ font-weight : bold; > } > > .patroninfo+#menu { >@@ -1421,10 +1429,10 @@ li.email { > } > > .clearfix:after { >- content: "."; >- display: block; >- height: 0; >- clear: both; >+ content: "."; >+ display: block; >+ height: 0; >+ clear: both; > visibility: hidden; > } > >@@ -1664,7 +1672,7 @@ input.warning { > } > > #displayexample { >- padding: 5px; >+ padding: 5px; > margin-bottom: 10px; > background-color: #CCCCCC; > } >@@ -1781,7 +1789,7 @@ span.permissiondesc { > > .results_summary { > display: block; >- font-size : 85%; >+ font-size : 85%; > color: #707070; > padding : 0 0 .5em 0; > } >@@ -1886,10 +1894,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 b04fd39..75b3fff 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