Edit Last Comment

Justin_Workman

Have you ever made a typo on a comment and had to reload the whole work item form to make a simple spelling fix??  Or have you ever made a public comment but intended to make it private so you again have to reload the whole form to reenter the comment before saving the work item?  Me too!  So I built this little customization. It will allow you to edit the last comment on a work item before saving the work item.  You can click on the pencil and it will remove the comment from the action log and put the text of the comment back in the comment editor.   To install, just add the contents of custom.txt to your CustomSpace/custom.js file.  

Ryan_Lane

Great work, @Justin_Workman
I used your work as a basis for custom.editComment.js (attached .txt of file).  My version relies more heavily on the existing Kendo views for the action log and comment editor to make changes and trigger events during the edit process.  It also carries over settings like the IsPrivate flag from the comment to be edited.
Let me know what you think!
Edit:
- Minor update to fix tab/space indentation and consolidating the shift() call when removing the action log comment from the source array
- Removed an unneeded variable.
- Added sanity checks for action log type to better handle adding the edit button just in case additional tasks add to the action log, refreshing the grid and removing the button from the last comment.

Justin_Workman

@Ryan_Lane - Yours is MUCH better!  I really like the addition of the respecting the InPrivate flag!!

Ryan_Lane

@Justin_Workman - Thanks!

Brainstorming some more improvements that could be made on this.

1. The current clickable area (dark green background) is a little small so enlarging it to fill the cell height with some additional width will probably be my next step.

My custom grid tasks went through the same update a week or so ago after user feedback:
Previous Hover+Click:

New Hover+Click:


2.  Better tracking of the new comments so we can add the edit button consistently and not after have to worry about a grid refresh taking the edit button away before saving or applying the form.  Most likely with something like:
On Add button click:
    Add a unique non-enumerable value to the new actionLogSource array item so we can keep track of a custom value without worrying about it being submitted on save/apply.
AND
Bind to 'change' event in Action Log grid:
   Parse through acitonLogSource array for any items with that unique value and create a button in each relevant column.
OR
Update grid's column template to automatically add the edit button based on that unique value so every refresh is automatic.  This is how I handle keeping buttons consistent in grids.

Any ideas or suggestions would be much appreciated!

Steve_Wright

@Ryan_Lane @Justin_Workman This is good stuff and a very helpful discussion thread!

Justin_Workman

@Ryan_Lane - Definitely like the idea of expanding the clickable area!  Personally, I would probably go for the parsing through the array looking for the unique value, but if editing the grid template works for your other grid stuff try it here and see what happens!

Ryan_Lane

Thanks @Steve_Wright !

Quick update on my work so far.  I have expanded my custom grid tasks setup to handle Work Item Edit/New pages now so the Edit comment buttons and events are handled via that.

Some new features:
- No longer dependent on monitoring Add button click events.
- Buttons persist through Action Log updates/grid refreshes thanks to updating the column template.
- Highlighting and cursor changes on hover.
- An expanded clickable area.
- Localized 'Edit' title text.




To handle selecting and removing the right object from the source action log array I ended up with the following process:
1. Add onclick attribute to created button to pass clicked element to Grid Tasks callback handler:

2. Grid Tasks callback handler uses the clicked element to get the related row and then uses the related row to get the dataItem from the grid.  This data is then passed to the Edit task's callback function.
(gridTaskBuilder.js:246):

3. The Edit task callback function then finds the appropriate comment to process from the actionLogSource array and now passes on the contents and events to the comment editor.
(custom.editComment.js:55):


Any thoughts or ideas? Thanks!

Edit:
- Minor update to custom.editComment.js to remove second setting of actionLogComment since _.findWhere already sets it.

Quick question too while I'm at it.  Since the Action Log view model can be found via a couple of different ways which method do you think would work best?
I currently find it via the kendoBindingTarget of the comment editor's source element:

actionLogVm = commentBoxEditor.element.get(0).kendoBindingTarget.source<span>,</span>

But it can also be found via the Action Log grid's dataSource:

actionLogVm = data.gridData.dataSource.transport.data.parent(),

Ryan_Lane

Hello!
Small update after a bit of user testing.  Due to users almost immediately overwriting unsaved comments and losing comments in the process I have added a confirmation dialog if the comment box is not empty.

Example below:
1. "New Comment" is added to Action Log.
2. "Unsaved Comment" is left in the Comment Editor.
3. "New Comment" edit button is clicked in the Action Log.
4. The following warning dialog appears with OK/Cancel options:
    OK: Overwrite the Comment Editor content and 'Is Private' values.
    Cancel: Cancel edit and leave Comment Editor as-is.


EDIT: The dialog wording is a bit awkward so maybe something more like the following: 
"Your comment has not been added to the Action Log, editing pending comment will discard the unadded comment."
Thoughts?

EDIT EDIT: 
- custom.editComment.js has been renamed to custom.wiGridTasks.js.
- Updated comment box value check to commentBoxEditor.value() vs actionLogVm.commentBoxHTML since commentBoxHTML is empty if the comment box content is the same as a previous comment.