From 1c8614efbe45edcc1b5e806c3aa470102c8afb21 Mon Sep 17 00:00:00 2001 From: Hugo Zilliox Date: Thu, 17 Aug 2017 15:20:19 +0200 Subject: [PATCH] new attributes are editable, translation added --- README.md | 3 +- assets/javascripts/issue_dynamic_edit.js | 195 ++++++++++++++++++++-- assets/stylesheets/issue_dynamic_edit.css | 106 +++++++++--- config/locales/en.yml | 5 + config/locales/fr.yml | 5 + init.rb | 4 +- lib/details_issue_hooks.rb | 73 +++++++- 7 files changed, 340 insertions(+), 51 deletions(-) create mode 100644 config/locales/en.yml create mode 100644 config/locales/fr.yml diff --git a/README.md b/README.md index c9c1ffd..82e735b 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # redmine_issue_dynamic_edit -Add new dropdown elements on detailed issue page to dynamically update issue's status, assignee and priority fields, directly in the details block of the issue. +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. ### Example @@ -18,5 +18,6 @@ This plugin uses [FontAwesome icons](http://fontawesome.io/) ### Changelog +* **v 0.3.0** : start date, due date, ratio and estimated time fields are now dynamically editable. Translation files added (en, fr). Log added in console when AJAX fails * **v 0.2.0** : fixed "conflict" when trying to add a note after an update from dropdowns. New method used, REST API is not required anymore * **v 0.1.0** : initial commit \ No newline at end of file diff --git a/assets/javascripts/issue_dynamic_edit.js b/assets/javascripts/issue_dynamic_edit.js index 4857b14..b41b654 100644 --- a/assets/javascripts/issue_dynamic_edit.js +++ b/assets/javascripts/issue_dynamic_edit.js @@ -12,6 +12,11 @@ var cssId = 'fontAwesome'; head.appendChild(link); } +/* Update height of progress bar because of dropdown */ +var dynamicEditSelectHeight = $('.dynamicEditSelect').height(); +var progressBarHeight = $('table.progress').height(); +$('table.progress').css({'marginTop' : (dynamicEditSelectHeight - progressBarHeight)/2 + "px" }); + /* Put new dropdown lists in the detailed info block */ if($('#statusListDropdown').length > 0) { var htmlCopy = $('#statusListDropdown').get(0).outerHTML; @@ -31,12 +36,63 @@ if($('#prioritiesListDropdown').length > 0) { $('.details .attributes .priority.attribute .value').html(htmlCopy); } -function issueDynamicUpdate(field_name, field_value, cssClass){ - $('.details .attributes .' + cssClass + '.attribute .value').append(' '); +if($('#doneRatioListDropdown').length > 0) { + var htmlCopy = $('#doneRatioListDropdown').get(0).outerHTML; + $('#doneRatioListDropdown').remove(); + $('.details .attributes .progress.attribute .percent').html(htmlCopy); +} + +if($('#EstimatedTimeInput').length > 0) { + var htmlCopy = $('#EstimatedTimeInput').get(0).outerHTML; + $('#EstimatedTimeInput').remove(); + $('.details .attributes .estimated-hours.attribute .value').html(htmlCopy); +} + +if($('#StartDateInput').length > 0) { + var htmlCopy = $('#StartDateInput').get(0).outerHTML; + $('#StartDateInput').remove(); + $('.details .attributes .start-date.attribute .value').html(htmlCopy); +} + +if($('#DueDateInput').length > 0) { + var htmlCopy = $('#DueDateInput').get(0).outerHTML; + $('#DueDateInput').remove(); + $('.details .attributes .due-date.attribute .value').html(htmlCopy); +} + +function issueDynamicUpdate(field_name, field_value, type, cssClass){ + + /* add spin notification */ + if(type == "progress") { // specific case for progress bar + $('.details .attributes .' + cssClass + '.attribute .percent').append(' '); + } else { + $('.details .attributes .' + cssClass + '.attribute .value').append(' '); + } + + /* update value displayed to "move" edit pen icon */ + $('.details .attributes .' + cssClass + '.attribute .selectedValue span').html(function(){ + if(type == "select") + { + return $('.details .attributes .' + cssClass + '.attribute .value select option:selected').html() + } else if (type == "input") + { + return $('.details .attributes .' + cssClass + '.attribute .value input').val() + } else if(type == "date") + { + return "XXXX/XX/XX"; + } + }); + + /* lost focus on element */ + if( type != "select") + { + $('.details .attributes .' + cssClass + '.attribute .value input').blur(); + } + var token = $("meta[name=csrf-token]").attr('content'); jQuery.ajax({ type: 'POST', - url: '/issues/bulk_update?back_url=%2Fissues&ids%5B%5D=' + _ISSUE_ID + '&issue%5B' + field_name + '%5D=' + field_value, + url: '/issues/bulk_update?back_url=%2F&ids%5B%5D=' + _ISSUE_ID + '&issue%5B' + field_name + '%5D=' + field_value, data: { "authenticity_token" : token }, crossDomain: true, async: false, @@ -44,38 +100,145 @@ function issueDynamicUpdate(field_name, field_value, cssClass){ xhr.setRequestHeader("authenticity_token", token); }, success: function(msg) { + /* data updated, remove spin and add success icon for 2sec */ setTimeout(function(){ - $('.details .attributes .' + cssClass + '.attribute .value .selectedValue span').html( - $('.details .attributes .' + cssClass + '.attribute .value select option:selected').html() - ); - $('.details .attributes .' + cssClass + '.attribute .value i.fa-spin').remove(); - $('.details .attributes .' + cssClass + '.attribute .value').append(' '); + $('.details .attributes .' + cssClass + '.attribute i.fa-spin').removeClass('fa-refresh fa-spin').addClass('fa-check statusOk'); setTimeout(function(){ - $('.details .attributes .' + cssClass + '.attribute .value i.fa-check').remove(); + $('.details .attributes .' + cssClass + '.attribute i.fa-check.statusOk').remove(); }, 2000); }, 500); + if(type == "progress") { // specific case for progress bar, we need to update the progress bar view + var progressBar = ""; + var percentTodo = 100 - parseInt(field_value); + progressBar += ""; + progressBar += ""; + progressBar += ""; + $('.details .attributes .' + cssClass + '.attribute table.progress').attr('class', 'progress progress-' + field_value).html(progressBar); + } else if( type == "date") { // specific case for start date and due date, we have to update min and max date allowed + if(field_name == "start_date") + { + $('body').find('#DueDateInput input').attr('min', field_value); + } else if (field_name == "due_date") + { + $('body').find('#StartDateInput input').attr('max', field_value); + } + } + // update other fields to avoid conflict $('#issue_lock_version').val(parseInt($('#issue_lock_version').val()) + 1 ); $('#last_journal_id').val(parseInt($('#last_journal_id').val()) + 1 ); - $('#issue_' + field_name + ' option').removeAttr('selected').filter('[value=' + field_value + ']').prop('selected', true); + if(type == "select") + { + $('#issue_' + field_name + ' option').removeAttr('selected').filter('[value=' + field_value + ']').prop('selected', true); + } else if (type == "input" || type == "date") + { + $('#issue_' + field_name).val(field_value); + } }, - error: function(xhr, msg, error) {} + error: function(xhr, msg, error) { + /* error and no update, info logged into console */ + console.log('%c -------- Error while updating the issue attribute dynamically -------- ', 'background: #ff0000; color: white; font-weight:900'); + console.log('%c xhr data: ', 'background: black; color: white;'); + console.log(xhr); + console.log('%c msg data: ', 'background: black; color: white;'); + console.log(msg); + 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(" Error (check console)"); + setTimeout(function(){ + $('.details .attributes .' + cssClass + '.attribute i.fa-times').remove(); + }, 2000); + } }); }; -/* Listeners foreach dropdown */ +/* Listeners foreach attribute */ + var domSelectStatus = $('body').find('#statusListDropdown select'); domSelectStatus.on('change', function(e){ - issueDynamicUpdate('status_id', domSelectStatus.val(), 'status'); + issueDynamicUpdate('status_id', domSelectStatus.val(), 'select', 'status'); }); /* end on change domSelectStatus */ var domSelectPriorities = $('body').find('#prioritiesListDropdown select'); domSelectPriorities.on('change', function(e){ - issueDynamicUpdate('priority_id', domSelectPriorities.val(), 'priority'); + issueDynamicUpdate('priority_id', domSelectPriorities.val(), 'select', 'priority'); }); /* end on change domSelectPriorities */ var domSelectUsers = $('body').find('#usersListDropdown select'); domSelectUsers.on('change', function(e){ - issueDynamicUpdate('assigned_to_id', domSelectUsers.val(), 'assigned-to'); - }); /* end on change domSelectUsers */ \ No newline at end of file + issueDynamicUpdate('assigned_to_id', domSelectUsers.val(), 'select', 'assigned-to'); + }); /* end on change domSelectUsers */ + + var domSelectRatio = $('body').find('#doneRatioListDropdown select'); + domSelectRatio.on('change', function(e){ + issueDynamicUpdate('done_ratio', domSelectRatio.val(), 'progress', 'progress'); + }); /* end on change domSelectUsers */ + + var domInputEstimatedTime = $('body').find('#EstimatedTimeInput input'); + $('#EstimatedTimeInput a.btn').on('click', function(e) + { + e.preventDefault(); + $('.estimated-hours .value .error').remove(); + var estimatedTime = parseFloat(domInputEstimatedTime.val()); + if(estimatedTime >= 0) + { + issueDynamicUpdate('estimated_hours', estimatedTime, 'input', 'estimated-hours'); + } else { + /* estimated time must be > 0 */ + $('.estimated-hours .value').append(' ' + _TXT_ERROR_POSITIVE_NUMBER + ''); + } + return false; + }); + + domInputEstimatedTime.on('keyup', function(e){ + $('.details .attributes .estimated-hours.attribute .selectedValue span').html( + $('.details .attributes .estimated-hours.attribute .value input').val() + ); + if (e.keyCode == 13) { + $('#EstimatedTimeInput a.btn').click(); + } + });/* end EstimatedTime */ + + var domInputStartDate = $('body').find('#StartDateInput input'); + $('#StartDateInput a.btn').on('click', function(e) + { + e.preventDefault(); + $('.start-date .value .error').remove(); + if(new Date(domInputStartDate.val()).getTime() <= new Date($('body').find('#DueDateInput input').val()).getTime()) + { + issueDynamicUpdate('start_date', domInputStartDate.val(), 'date', 'start-date'); + } else { + /* start date must be < due date */ + $('.start-date .value').append(' ' + _TXT_ERROR_START_DATE + ''); + } + return false; + }); + + domInputStartDate.on('keyup', function(e){ + if (e.keyCode == 13) { + $('#StartDateInput a.btn').click(); + } + });/* end StartDate */ + + var domInputDueDate = $('body').find('#DueDateInput input'); + $('#DueDateInput a.btn').on('click', function(e) + { + e.preventDefault(); + $('.due-date .value .error').remove(); + if(new Date($('body').find('#StartDateInput input').val()).getTime() <= new Date(domInputDueDate.val()).getTime()) + { + issueDynamicUpdate('due_date', domInputDueDate.val(), 'date', 'due-date'); + } else { + /* start date must be < due date */ + $('.due-date .value').append(' ' + _TXT_ERROR_DUE_DATE + ''); + } + return false; + }); + + domInputDueDate.on('keyup', function(e){ + if (e.keyCode == 13) { + $('#DueDateInput a.btn').click(); + } + });/* end StartDate */ \ No newline at end of file diff --git a/assets/stylesheets/issue_dynamic_edit.css b/assets/stylesheets/issue_dynamic_edit.css index 26bf5a6..59ac680 100644 --- a/assets/stylesheets/issue_dynamic_edit.css +++ b/assets/stylesheets/issue_dynamic_edit.css @@ -2,7 +2,77 @@ div.issue .attribute .value { overflow: visible; } -.value .dynamicEditSelect select { +/* Progress bar fix */ +table.progress { + margin-right: 10px; +} + +/* If you want to hide edit (pencil) icon, set opacity to 0 below : */ +.selectedValue { + position: absolute; + top: 2px; + right: 0; + left: 5px; + pointer-events: none; + opacity: 1; /* <---------------- */ +} + +.attribute:hover .selectedValue { + opacity: 0; +} + +.selectedValue .transparent { + opacity: 0; +} + +.attribute .error { + color: #e74c3c; + margin-left: 3px; +} + +/* Input Style */ +.dynamicEditInput { + position: relative; + border: 1px solid transparent; + border-radius: 3px; + padding: 4px; + margin-left: -5px; + padding-right: 0; + display: inline-block; +} + +.dynamicEditInput input { + border: 0px; + font: inherit; + color: inherit; + background: transparent; + padding: 0; +} + +.dynamicEditInput .selectedValue { + top:0; left:0; +} + +.attribute:hover .dynamicEditInput { + border-color: #e0e2e3; +} + +.attribute .btn-primary { + border-left: 1px solid #e0e2e3; + padding: 4px; + opacity: 0; + pointer-events: none; +} + +.attribute:hover .btn-primary { + pointer-events: auto; + opacity: 1; +} + +/* End Input Style */ + +/* Select Style */ +.dynamicEditSelect select { border-color: transparent; border: 0; border-bottom: 1px solid transparent; @@ -18,37 +88,20 @@ div.issue .attribute .value { padding-left:0; } -.value .dynamicEditSelect { +.dynamicEditSelect { padding-left: 5px; margin-left: -6px; /* padding + border */ display: inline-block; border: 1px solid transparent; border-radius: 3px; -} - -.value:hover .dynamicEditSelect { - border-color: #e0e2e3; -} - -.value .dynamicEditSelect { position:relative; } - -.value .dynamicEditSelect .selectedValue { - position: absolute; - top: 2px; - right: 0; - left: 5px; - background: white; - pointer-events: none; - opacity: 1; -} - -.value:hover .dynamicEditSelect .selectedValue { - opacity: 0; + +.attribute:hover .dynamicEditSelect { + border-color: #e0e2e3; } -.value .dynamicEditSelect i.dropdown { +.dynamicEditSelect i.dropdown { position:absolute; right: 5px; top: 50%; @@ -57,11 +110,12 @@ div.issue .attribute .value { opacity: 0; } -.value:hover .dynamicEditSelect i.dropdown { +.attribute:hover .dynamicEditSelect i.dropdown { opacity: 1; } -.value:hover .dynamicEditSelect select option[disabled="disabled"] +.dynamicEditSelect select option[disabled="disabled"] { display:none; -} \ No newline at end of file +} +/* End Select Style */ \ No newline at end of file diff --git a/config/locales/en.yml b/config/locales/en.yml new file mode 100644 index 0000000..95aeab2 --- /dev/null +++ b/config/locales/en.yml @@ -0,0 +1,5 @@ +en: + ide_txt_validation_btn : 'Validate the modification' + ide_txt_error_positive_number : 'It must be a positive number' + ide_txt_error_start_date : 'Start date must be anterior to due date' + ide_txt_error_due_date : 'Due date must be posterior to start date' \ No newline at end of file diff --git a/config/locales/fr.yml b/config/locales/fr.yml new file mode 100644 index 0000000..333dc65 --- /dev/null +++ b/config/locales/fr.yml @@ -0,0 +1,5 @@ +fr: + ide_txt_validation_btn : 'Valider la modification' + ide_txt_error_positive_number : 'Le nombre doit être positif' + ide_txt_error_start_date : "La date de début doit être antérieure à la date d'échéance" + ide_txt_error_due_date : "La date d'échéance doit être postérieure à la date de début" \ No newline at end of file diff --git a/init.rb b/init.rb index 5eaeb33..43cc11a 100644 --- a/init.rb +++ b/init.rb @@ -5,8 +5,8 @@ require 'details_issue_hooks' Redmine::Plugin.register :redmine_issue_dynamic_edit do name 'Redmine Dynamic edit Issue plugin' author 'Hugo Zilliox' - description 'Allows users to dynamically update issue\'s status, assignee and priority in detailed view using REST API' - version '0.2.0' + description 'Allows users to dynamically update issue attributes in detailed view' + version '0.3.0' url 'https://github.com/ilogeek/redmine_issue_dynamic_edit' author_url 'https://hzilliox.fr' end diff --git a/lib/details_issue_hooks.rb b/lib/details_issue_hooks.rb index 46aa163..99b4755 100644 --- a/lib/details_issue_hooks.rb +++ b/lib/details_issue_hooks.rb @@ -23,10 +23,14 @@ class DetailsIssueHooks < Redmine::Hook::ViewListener if (issue) if (User.current.allowed_to?(:edit_issues, project)) o = '' + # o << issue.to_json + + # Status dropdown + o << userCanChangeStatus.to_json statuses = issue.new_statuses_allowed_to(User.current) - if (!statuses.empty?) + if (userCanChangeStatus && !statuses.empty?) o << "" - o << "
#{issue.status}
" + o << "
#{issue.status}
" o << "" end + + # Users dropdown + # userCanChangeAssignee = User.current.allowed_to?(:edit_assigned_to, @project, :global => true) assignables = project.assignable_users if (!assignables.empty?) o << "" - o << "
#{issue.assigned_to}
" + o << "
#{issue.assigned_to}
" o << "" end + # Priorities dropdown priorities = IssuePriority.all if(!priorities.empty?) o << "" - o << "
#{issue.priority}
" + o << "
#{issue.priority}
" o << "" end + + # %done dropdown + percent = 0 + o << "" + o << "
#{issue.done_ratio}%
" + o << "" + + # Estimated_time dropdown + o << "" + o << "
#{issue.estimated_hours}
" + o << " " + o << "" + o << "" + + # Start date + o << "" + o << "
XXXX/XX/XX
" + o << " " + o << "" + o << "" + o << "" + + # Due date + o << "" + o << "
XXXX/XX/XX
" + o << " " + o << "" + o << "" + o << "" + end end o << "" return o