Author: fdesbois Date: 2010-06-16 20:39:29 +0000 (Wed, 16 Jun 2010) New Revision: 540 Log: Evo #2332 : Clean previous code for comment popup in edition mode : use a proper ContactComment prototype class. Added: trunk/wao-ui/src/main/webapp/img/comment-unavailable-22px.png trunk/wao-ui/src/main/webapp/js/ContactComment.js Modified: trunk/wao-ui/src/main/java/fr/ifremer/wao/ui/pages/Contacts.java trunk/wao-ui/src/main/webapp/Contacts.tml trunk/wao-ui/src/main/webapp/js/wao.js Modified: trunk/wao-ui/src/main/java/fr/ifremer/wao/ui/pages/Contacts.java =================================================================== --- trunk/wao-ui/src/main/java/fr/ifremer/wao/ui/pages/Contacts.java 2010-06-16 19:12:34 UTC (rev 539) +++ trunk/wao-ui/src/main/java/fr/ifremer/wao/ui/pages/Contacts.java 2010-06-16 20:39:29 UTC (rev 540) @@ -61,6 +61,7 @@ import org.apache.tapestry5.RenderSupport; import org.apache.tapestry5.StreamResponse; import org.apache.tapestry5.annotations.Environmental; +import org.apache.tapestry5.annotations.IncludeJavaScriptLibrary; import org.apache.tapestry5.annotations.IncludeStylesheet; import org.apache.tapestry5.annotations.InjectComponent; import org.apache.tapestry5.annotations.Log; @@ -89,6 +90,7 @@ */ @RequiresAuthentication({UserRole.ADMIN, UserRole.COORDINATOR, UserRole.OBSERVER}) @IncludeStylesheet("context:css/contacts.css") + at IncludeJavaScriptLibrary("context:js/ContactComment.js") public class Contacts extends AbstractFilteredPage { @Inject @@ -729,20 +731,33 @@ @Log void afterRender() { - renderSupport.addScript("extraComment = new ExtraComment();"); + renderSupport.addScript("commentController = new ContactComment();"); } - public String getValidationComment() { + public String getContactComment() { String comment = null; - switch (user.getRole()) { - case ADMIN: - comment = contact.getCommentAdmin(); break; - case COORDINATOR: - comment = contact.getCommentCoordinator(); + if (isEditionMode()) { + comment = contact.getComment(); + } else { + switch (user.getRole()) { + case ADMIN: + comment = contact.getCommentAdmin(); break; + case COORDINATOR: + comment = contact.getCommentCoordinator(); + } } return comment == null ? "" : comment.replace("'", "\'"); } + public JSONObject getCommentData() { + JSONObject json = new JSONObject(); + json.put("id", contact.getId()); + json.put("edited", isEditionMode()); + json.put("unfinished", contact.getContactState().isUnfinishedState()); + json.put("comment", getContactComment()); + return json; + } + @Log void onSuccessFromCommentForm() { serviceContact.saveComment(contactId, user.getRole(), extraComment); Modified: trunk/wao-ui/src/main/webapp/Contacts.tml =================================================================== --- trunk/wao-ui/src/main/webapp/Contacts.tml 2010-06-16 19:12:34 UTC (rev 539) +++ trunk/wao-ui/src/main/webapp/Contacts.tml 2010-06-16 20:39:29 UTC (rev 540) @@ -259,29 +259,18 @@ </t:if> </p:dataInputDateCell> <p:commentCell> - <t:if t:test="editionMode"> - <!--<span t:type="ck/Tooltip" title="Commentaire" t:value="prop:commentTooltip" t:effect="appear">--> - <a href="#" onclick="openCommentWindow(windowComment, 'commentPopup', 'contact-comment', ${contact.contactState.isUnfinishedState()})"> - <img src="${asset:context:img/comment-22px.png}" id="commentImg" alt="Add comment" /> - </a> - <!--</span>--> - - <textarea t:type="textarea" t:id="comment" class="hidden contact-comment" value="contactEdited.comment" /> + <t:if t:test="editionMode"> - <div t:type="ck/Window" t:id="windowComment" show="false" modal="true" - title="literal:Ajouter un commentaire" width="500" height="215"> - <p> - <textarea id="commentPopup" cols="50" rows="7" /> - </p> - <p> </p> - <p class="aright"> - <a onclick="closeCommentWindow(windowComment, 'commentPopup', 'contact-comment', ${contact.contactState.isUnfinishedState()}, 'commentImg', '${asset:context:}')" class="save"> - <img src="${asset:context:img/save-22px.png}" alt="Save comment" title="Enregistrer le commentaire"/> - </a> - - </p> - </div> + <a onclick="commentController.openWindow(${commentData})" title="Ajouter un commentaire"> + <img id="commentImage" src="${asset:context:img/comment-22px.png}" alt="Ajout commentaire" /> + <img id="commentInvalidImage" class="hidden" src="${asset:context:img/comment-invalid-22px.png}" + alt="Commentaire non valide" title="Le commentaire est obligatoire pour un échec" /> + <img id="commentValidImage" class="hidden" src="${asset:context:img/comment-valid-22px.png}" + alt="Commentaire valide" title="Le commentaire a bien été ajouté" /> + </a> + <textarea t:type="textarea" t:id="comment" class="hidden" value="contactEdited.comment" /> + <p:else> <t:if t:test="contact.comment"> <span t:type="ck/Tooltip" title="Commentaire" t:value="prop:commentTooltip" t:effect="appear"> @@ -330,12 +319,14 @@ <input t:type="submitContext" t:id="unvalidateContact" class="ico22px unvalidate" value="Unvalidate" t:context="contact.topiaId" title="Enlever la validation du contact" /> </t:if> - <!--<a onclick="openContactCommentWindow('${validationComment}','${contact.id}');">--> - <a onclick="extraComment.openWindow('${validationComment}','${contact.id}');"> - <!--<a href="#" onclick="commentWindow.showCenter(true);">--> - <img src="${asset:context:img/comment-22px.png}" alt="Add comment" /> - </a> - <!--<t:contactValidationComment t:contact="contact" t:userRole="user.role" />--> + <t:if t:test="editionMode"> + <img src="${asset:context:img/comment-unavailable-22px.png}" alt="Add comment" /> + <p:else> + <a onclick="commentController.openWindow(${commentData});"> + <img src="${asset:context:img/comment-22px.png}" alt="Add comment" /> + </a> + </p:else> + </t:if> </t:if> </p:actionsCell> </div> @@ -345,12 +336,12 @@ title="literal:Ajouter un commentaire" t:width="550" t:height="230"> <form t:type="form" t:id="commentForm" action="tapestry"> <p> - <textarea t:type="textarea" t:id="extraComment" t:value="extraComment" cols="50" rows="7" /> + <textarea t:type="textarea" t:id="editComment" t:value="extraComment" cols="50" rows="7" /> <input t:type="hidden" t:id="hiddenContactId" t:value="contactId" /> </p> <p> </p> <p class="aright"> - <a onclick="extraComment.saveComment()" class="save"> + <a onclick="commentController.saveComment()" class="save"> <img src="${asset:context:img/save-22px.png}" alt="Save comment"/> </a> Added: trunk/wao-ui/src/main/webapp/img/comment-unavailable-22px.png =================================================================== (Binary files differ) Property changes on: trunk/wao-ui/src/main/webapp/img/comment-unavailable-22px.png ___________________________________________________________________ Added: svn:mime-type + application/octet-stream Added: trunk/wao-ui/src/main/webapp/js/ContactComment.js =================================================================== --- trunk/wao-ui/src/main/webapp/js/ContactComment.js (rev 0) +++ trunk/wao-ui/src/main/webapp/js/ContactComment.js 2010-06-16 20:39:29 UTC (rev 540) @@ -0,0 +1,85 @@ +/** + * This class is used to manage comment window for contacts. Two possible cases : + * - comment from current edition + * - direct comment for coordinator or admin + * The differences are in saveComment method. The openWindow method is used + * in template using a JSONObject from Java that contains comment data. + */ +ContactComment = Class.create({ + initialize: function() { + this.commentForm = $('commentForm'); + this.contactForm = $('contactsForm'); + + this.image = $('commentImage'); + this.invalidImage = $('commentInvalidImage'); + this.validImage = $('commentValidImage'); + + this.window = commentWindow; + }, + /** + * Open the commentWindow :: + * Use JSON to initialize data from template : + * - contact.edited : if a contact is currently in edition + * - contact.comment : comment value to initialize + * - contact.unfinished : if contact is in unfinished state + * - contact.id : id of the contact (used to save directly the contact) + */ + openWindow: function(contact) { + this.editionMode = contact.edited; + this.oldComment = contact.comment; + this.contactUnfinished = contact.unfinished; + + this.commentForm.editComment.setValue(this.oldComment); + this.commentForm.hiddenContactId.setValue(contact.id); + + this.window.showCenter(true); + }, + /** + * Save the comment :: + * If form is in edition, the comment will be push in existing input 'comment' + * otherwise the commentForm will be submitted to save the comment + */ + saveComment: function() { + + if (!this.editionMode) { + // Execute commentForm to save directly the comment + this.commentForm.submit(); + } else { + // Refresh edition form with comment + this.newComment = $F(this.commentForm.editComment); + this.refreshCommentImage(); + this.contactForm.comment.setValue(this.newComment); + } + + this.window.close(); + }, + /** + * Refresh the comment image (only in edition mode) :: + * Depends on contactUnfinished value to know if errors can occurs on comment + */ + refreshCommentImage: function() { + if (this.contactUnfinished && (!this.newComment || this.oldComment == this.newComment)) { + this.showImage(this.invalidImage); + this.hideImage(this.validImage); + this.hideImage(this.image); + } else if (this.oldComment != this.newComment) { + this.showImage(this.validImage); + this.hideImage(this.invalidImage); + this.hideImage(this.image); + } else { + this.showImage(this.image); + this.hideImage(this.validImage); + this.hideImage(this.invalidImage); + } + }, + showImage: function(image) { + if (image.hasClassName('hidden')) { + image.removeClassName('hidden'); + } + }, + hideImage: function(image) { + if (!image.hasClassName('hidden')) { + image.addClassName('hidden'); + } + } +}); \ No newline at end of file Modified: trunk/wao-ui/src/main/webapp/js/wao.js =================================================================== --- trunk/wao-ui/src/main/webapp/js/wao.js 2010-06-16 19:12:34 UTC (rev 539) +++ trunk/wao-ui/src/main/webapp/js/wao.js 2010-06-16 20:39:29 UTC (rev 540) @@ -22,34 +22,34 @@ * <http://www.gnu.org/licenses/gpl-3.0.html>. * #L% */ -function openCommentWindow(window, commentPopupId, commentHiddenClass) { - window.showCenter(true); - var hidden = $$('.' + commentHiddenClass)[0]; - var value = hidden.getValue(); -// Tapestry.debug("unfinishedstate : " + unfinishedState); -// if (unfinishedState) { -// value += "\nRaison de l'échec :\n"; +//function openCommentWindow(window, commentPopupId, commentHiddenClass) { +// window.showCenter(true); +// var hidden = $$('.' + commentHiddenClass)[0]; +// var value = hidden.getValue(); +//// Tapestry.debug("unfinishedstate : " + unfinishedState); +//// if (unfinishedState) { +//// value += "\nRaison de l'échec :\n"; +//// } +// $(commentPopupId).setValue(value); +//} +// +//function closeCommentWindow(window, commentPopupId, commentHiddenClass, unfinishedState, imgId, context) { +// var hidden = $$('.' + commentHiddenClass)[0]; +// var oldValue = hidden.getValue(); +// var newValue = $F(commentPopupId); +// // TODO-fdesbois-2010-06-16 : use hidden images directly in tml instead of using context + imgId in argument +// var img = $(imgId); +// if ((unfinishedState && !newValue) || (unfinishedState && oldValue == newValue)) { +// img.setAttribute('src', context + '/img/comment-invalid-22px.png'); +// img.setAttribute('title', 'Le commentaire est obligatoire pour un échec'); +// } else if (oldValue != newValue) { +// img.setAttribute('src', context + '/img/comment-valid-22px.png'); +// img.setAttribute('title', 'Le commentaire a bien été ajouté'); // } - $(commentPopupId).setValue(value); -} +// hidden.setValue(newValue); +// window.close(); +//} -function closeCommentWindow(window, commentPopupId, commentHiddenClass, unfinishedState, imgId, context) { - var hidden = $$('.' + commentHiddenClass)[0]; - var oldValue = hidden.getValue(); - var newValue = $F(commentPopupId); - // TODO-fdesbois-2010-06-16 : use hidden images directly in tml instead of using context + imgId in argument - var img = $(imgId); - if ((unfinishedState && !newValue) || (unfinishedState && oldValue == newValue)) { - img.setAttribute('src', context + '/img/comment-invalid-22px.png'); - img.setAttribute('title', 'Le commentaire est obligatoire pour un échec'); - } else if (oldValue != newValue) { - img.setAttribute('src', context + '/img/comment-valid-22px.png'); - img.setAttribute('title', 'Le commentaire a bien été ajouté'); - } - hidden.setValue(newValue); - window.close(); -} - /** * Method used to refresh userRole select from a response. The response contains * data to create the select options : @@ -148,19 +148,3 @@ } } } - -ExtraComment = Class.create({ - initialize: function() { - this.commentForm = $('commentForm'); - this.window = commentWindow; - }, - openWindow: function(comment, contactId) { - this.commentForm.extraComment.setValue(comment); - this.commentForm.hiddenContactId.setValue(contactId); - this.window.showCenter(true); - }, - saveComment: function() { - this.commentForm.submit(); - this.window.close(); - } -});