redmine_plugins/redmine_issue_dynamic_edit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Title dynamic edition added (Github request #14)

Browse Source
This commit is contained in:
Hugo 2017-11-19 22:49:59 +01:00
parent 99fae0aa2c
commit 22b299665a
5 changed files with 58 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

@ -1,6 +1,6 @@
# redmine_issue_dynamic_edit
Add new dropdown elements on detailed issue page to dynamically update issue's status, assignee, priority, start and due dates, ratio and estimated time fields, directly in the details block of the issue without any page refresh (JIRA style).
Add new elements on detailed issue page to dynamically update issue's title, status, assignee, priority, start and due dates, ratio and estimated time fields, directly in the details block of the issue without any page refresh (JIRA style).
### Example
@ -19,6 +19,7 @@ This plugin uses [FontAwesome icons](http://fontawesome.io/)
### Changelog
* **v 0.4.5** : fixed Github issue #13 : CSS display for custom attributes, added Title dynamic edition (Github request #14)
* **v 0.4.4** : fixed Github issues #6, #12 : User can't update status until all required field are filled for this step of the issue
* **v 0.4.3** : partially fixed Github issue #12 : Read only attributes can't be edited anymore. Dynamic refresh for read only attributes when status changes
* **v 0.4.2** : fixed Github issue #10 : History list updated after modification

57
assets/javascripts/issue_dynamic_edit.js
View File

@ -77,6 +77,13 @@ function initEditFields()
$('.details .attributes .due-date.attribute .value').html() + '</span> <i class="fa fa-pencil fa-fw" aria-hidden="true"></i>' +
htmlCopy);
}
if($('#TitleInput').length > 0) {
var htmlCopy = $('#TitleInput').get(0).outerHTML;
$('#TitleInput').remove();
$('.subject h3').html('<span class="showValue">' + $('.subject h3').html() + '</span> <i class="fa fa-pencil fa-fw" aria-hidden="true"></i>' +
htmlCopy).addClass('value');
}
}
initEditFields();
@ -102,23 +109,19 @@ $('body.controller-issues.action-show').on('click', '.btn.close', function(e){
function issueDynamicUpdate(field_name, field_value, type, cssClass){
/* hide edit field */
$('.details .attributes .' + cssClass + '.attribute .value').removeClass('edited');
$('.details .' + cssClass + ' .value').removeClass('edited');
/* add spin notification */
if(type == "progress") { // specific case for progress bar
$('.details .attributes .' + cssClass + '.attribute .value').append(' <i class="fa fa-refresh fa-spin fa-fw"></i>');
} else {
$('.details .attributes .' + cssClass + '.attribute .value').append(' <i class="fa fa-refresh fa-spin fa-fw"></i>');
}
$('.details .' + cssClass + ' .value').append(' <i class="fa fa-refresh fa-spin fa-fw"></i>');
/* update value displayed */
$('.details .attributes .' + cssClass + '.attribute .showValue').html(function(){
$('.details .' + cssClass + ' .showValue').html(function(){
if(type == "select")
{
return $('.details .attributes .' + cssClass + '.attribute .value select option:selected').html()
return $('.details .' + cssClass + ' .value select option:selected').html()
} else if (type == "input")
{
return $('.details .attributes .' + cssClass + '.attribute .value input').val()
return $('.details .' + cssClass + ' .value input').val()
} else if(type == "date")
{
return "XXXX/XX/XX";
@ -128,7 +131,7 @@ function issueDynamicUpdate(field_name, field_value, type, cssClass){
/* lost focus on element */
if( type != "select")
{
$('.details .attributes .' + cssClass + '.attribute .value input').blur();
$('.details .' + cssClass + ' .value input').blur();
}
var token = $("meta[name=csrf-token]").attr('content');
@ -161,9 +164,9 @@ function issueDynamicUpdate(field_name, field_value, type, cssClass){
}
/* data updated, remove spin and add success icon for 2sec */
setTimeout(function(){
$('.details .attributes .' + cssClass + '.attribute i.fa-spin').removeClass('fa-refresh fa-spin').addClass('fa-times statusKo');
$('.details .' + cssClass + ' i.fa-spin').removeClass('fa-refresh fa-spin').addClass('fa-times statusKo');
setTimeout(function(){
$('.details .attributes .' + cssClass + '.attribute i.fa-times.statusKo').remove();
$('.details .' + cssClass + ' i.fa-times.statusKo').remove();
}, 2000);
}, 500);
} else {
@ -173,11 +176,8 @@ function issueDynamicUpdate(field_name, field_value, type, cssClass){
/* we update the details block */
$('div.issue.details').html($(parsed).find('div.issue.details').html());
if(type == "progress") { // specific case for progress bar
$('body').find('.details .attributes .' + cssClass + '.attribute .value').append(' <i class="fa fa-refresh fa-spin fa-fw"></i>');
} else {
$('body').find('.details .attributes .' + cssClass + '.attribute .value').append(' <i class="fa fa-refresh fa-spin fa-fw"></i>');
}
$('body').find('.details .' + cssClass + ' .value').append(' <i class="fa fa-refresh fa-spin fa-fw"></i>');
/* we init edit fields */
initEditFields();
initEditFieldListeners();
@ -192,9 +192,9 @@ function issueDynamicUpdate(field_name, field_value, type, cssClass){
/* data updated, remove spin and add success icon for 2sec */
setTimeout(function(){
$('.details .attributes .' + cssClass + '.attribute i.fa-spin').removeClass('fa-refresh fa-spin').addClass('fa-check statusOk');
$('.details .' + cssClass + ' i.fa-spin').removeClass('fa-refresh fa-spin').addClass('fa-check statusOk');
setTimeout(function(){
$('.details .attributes .' + cssClass + '.attribute i.fa-check.statusOk').remove();
$('.details .' + cssClass + ' i.fa-check.statusOk').remove();
}, 2000);
}, 500);
@ -213,9 +213,9 @@ function issueDynamicUpdate(field_name, field_value, type, cssClass){
console.log('%c error data: ', 'background: black; color: white;');;
console.log(error);
console.log('%c ---------------------------------------------------------- ', 'background: #ff0000; color: white; font-weight:900');
$('.details .attributes .' + cssClass + '.attribute i.fa-spin').removeClass('fa-refresh fa-spin').addClass('fa-times').html(" " + _TXT_ERROR_AJAX_CALL);
$('.details .' + cssClass + ' i.fa-spin').removeClass('fa-refresh fa-spin').addClass('fa-times').html(" " + _TXT_ERROR_AJAX_CALL);
setTimeout(function(){
$('.details .attributes .' + cssClass + '.attribute i.fa-times').remove();
$('.details .' + cssClass + ' i.fa-times').remove();
}, 2000);
}
});
@ -320,6 +320,21 @@ function initEditFieldListeners()
$('#DueDateInput a.btn.validate').click();
}
});/* end StartDate */
var domInputTitle = $('body').find('#TitleInput input');
$('#TitleInput a.btn.validate').on('click', function(e)
{
e.preventDefault();
issueDynamicUpdate('subject', domInputTitle.val(), 'input', 'subject');
return false;
});
domInputTitle.on('keyup', function(e){
if (e.keyCode == 13) {
$('#TitleInput a.btn.validate').click();
}
});/* end StartDate */
}
initEditFieldListeners();

20
assets/stylesheets/issue_dynamic_edit.css
View File

@ -1,6 +1,6 @@
/* prefix selector with body.controller-issues.action-show to avoid unwanted style on other page ? */
body.controller-issues.action-show div.issue .attribute .value, body.controller-issues.action-show div.issue .splitcontent {
body.controller-issues.action-show div.issue.details .value, body.controller-issues.action-show div.issue.details .splitcontent {
overflow: visible;
position: relative;
}
@ -19,7 +19,7 @@ body.controller-issues.action-show .attribute .error {
margin-left: 3px;
}
body.controller-issues.action-show .value .fa-pencil {
body.controller-issues.action-show .fa-pencil {
opacity: 0;
}
@ -51,22 +51,22 @@ body.controller-issues.action-show .edited .dynamicEdit {
pointer-events: auto;
}
body.controller-issues.action-show div.issue .attribute .value.edited .dynamicEdit {
body.controller-issues.action-show div.issue.details .value.edited .dynamicEdit {
opacity: 1;
}
body.controller-issues.action-show .attribute .btn-primary {
body.controller-issues.action-show div.issue.details .btn-primary {
padding: 4px;
color: white;
border-radius: 3px;
padding: 3px;
}
body.controller-issues.action-show .attribute .btn-primary.close {
body.controller-issues.action-show div.issue.details .btn-primary.close {
background: #c0392b;
}
body.controller-issues.action-show .attribute .btn-primary.validate {
body.controller-issues.action-show div.issue.details .btn-primary.validate {
background: #27ae60;
}
@ -88,11 +88,15 @@ body.controller-issues.action-show .dynamicEdit select option[disabled="disabled
display:none;
}
body.controller-issues.action-show div.issue .attributes {
body.controller-issues.action-show div.issue.details .attributes {
display: table;
width: 100%;
}
body.controller-issues.action-show div.issue .splitcontent {
body.controller-issues.action-show div.issue.details .splitcontent {
display: table-row;
}
div.issue div.subject h3 {
position:relative;
}

2
init.rb
View File

@ -6,7 +6,7 @@ Redmine::Plugin.register :redmine_issue_dynamic_edit do
name 'Redmine Dynamic edit Issue plugin'
author 'Hugo Zilliox'
description 'Allows users to dynamically update issue attributes in detailed view without refreshing the page (JIRA style)'
version '0.4.4'
version '0.4.5'
url 'https://github.com/ilogeek/redmine_issue_dynamic_edit'
author_url 'https://hzilliox.fr'
end

7
lib/details_issue_hooks.rb
View File

@ -140,6 +140,13 @@ class DetailsIssueHooks < Redmine::Hook::ViewListener
o << "//]]>\n"
o << "</script>"
end
# Title
o << "<span class='dynamicEdit' id='TitleInput'>"
o << " <input size=\"50\" value=\"#{issue.subject}\" type=\"text\">"
o << " <a href='#' class='btn btn-primary validate' aria-label='" + l(:ide_txt_validation_btn) + "'><i class='fa fa-check fa-fw' aria-hidden='true'></i></a>"
o << " <a href='#' class='btn btn-primary close' aria-label='" + l(:ide_txt_cancel_btn) + "'><i class='fa fa-times fa-fw' aria-hidden='true'></i></a>"
o << "</span>"
end
end