This series is based against `master` and aims to introduce a new rest.js module to the codebase so that frontend requests to the REST API can be made to retrieve information and make changes. The file aims to shift the codebase towards a more modern and dynamic approach focused on client-side rendering. In particular, this patch series provides the PATCH method to make partial updates to objects in the database. The series is used by the unaddressed/addressed comments series [1], which I will be sending a revision of tomorrow. The series provides an example of what callers look like for the new rest.js file. Also, the comments series has earlier revisions of the second and third patches in this series.
[1] https://lists.ozlabs.org/pipermail/patchwork/2021-August/007074.html Raxel Gutierrez (3): messages: clean up messages and errors containers static: add JS Cookie library to get csrftoken for client-side requests static: add rest.js to handle PATCH requests & respective responses htdocs/README.rst | 9 ++ htdocs/css/style.css | 26 ++++- htdocs/js/js.cookie.min.js | 2 + htdocs/js/rest.js | 107 ++++++++++++++++++ patchwork/templates/patchwork/list.html | 10 +- .../templates/patchwork/partials/errors.html | 10 ++ patchwork/templates/patchwork/submission.html | 2 + patchwork/templates/patchwork/user-link.html | 2 +- templates/base.html | 23 ++-- 9 files changed, 168 insertions(+), 23 deletions(-) create mode 100644 htdocs/js/js.cookie.min.js create mode 100644 htdocs/js/rest.js create mode 100644 patchwork/templates/patchwork/partials/errors.html Range-diff: -: -------- > 1: bb6a78c0 messages: clean up messages and errors containers -: -------- > 2: 3f657c15 static: add JS Cookie library to get csrftoken for client-side requests 1: abee581c ! 3: ed2f4e16 static: add rest.js to handle PATCH requests & respective responses @@ Commit message fields of an object given it's REST API endpoint specified by the caller. Also, the caller can specify the field(s) to modify and the associated content for update messages in the case of both failed - successful requests that render to the current webpage. + successful requests that render to the current webpage. The caller + receives whether the request was successful or not. The `rest.js` module can be further expanded to support and provide functions that allow for other requests (e.g. GET, POST, PUT) to the @@ Commit message Error and accompanying failed update messages are replaced by successful update messages and vice versa. Consecutive successful update messages - add to counter of updated objects. Consecutive error messages stack up. - - ## htdocs/README.rst ## -@@ htdocs/README.rst: js - :GitHub: https://github.com/js-cookie/js-cookie/ - :Version: 3.0.0 - -+``rest.js.`` -+ -+ Utility module for REST API requests to be used by other Patchwork js files -+ (fetch requests, handling update & error messages). -+ -+ Part of Patchwork. -+ - ``selectize.min.js`` - - Selectize is the hybrid of a ``textbox`` and ``<select>`` box. It's jQuery + add to a counter of updated objects. Consecutive error messages stack up. ## htdocs/js/rest.js (new) ## @@ @@ htdocs/js/rest.js (new) + handleErrorMessages(key + ": " + value); + } + } -+ // Update message to be unsuccessful -+ message = updateMessage.none; -+ success = false; + }); ++ // Update message to be unsuccessful ++ message = updateMessage.none; ++ success = false; + } + handleUpdateMessages(message, success); + return response.ok @@ htdocs/js/rest.js (new) + * Populates update messages for API REST requests. + * @param {string} messageContent Text for update message. + */ -+function handleUpdateMessages(messageContent, success=true) { ++function handleUpdateMessages(messageContent, success) { + // Replace error and failure update messages with success update message -+ const errorList = document.getElementsByClassName("error-list")[0]; + const errorContainer = document.getElementById("errors"); -+ let messages = document.getElementById("messages"); -+ if (success && errorList != null) { ++ let messages = document.getElementsByClassName("messages")[0]; ++ if (success && errorContainer.firstChild != null) { ++ messages.replaceChildren(); + errorContainer.replaceChildren(); ++ } else if (!success) { + messages.replaceChildren(); + } + -+ // Create messages container if it doesn't exist -+ if (messages == null) { -+ messages = document.createElement("div"); -+ messages.setAttribute("id", "messages"); -+ $(messages).insertAfter("nav"); -+ } else { -+ // Increment counter of consecutive success update messages -+ if (messages.firstChild != null) { -+ const newMessageCount = parseInt(messages.firstChild.textContent.slice(0,1)) + 1 -+ messageContent = newMessageCount + messageContent.slice(1); -+ } ++ // Increment counter of consecutive success update messages ++ if (messages.firstChild != null) { ++ const newMessageCount = parseInt(messages.firstChild.textContent.slice(0,1)) + 1 ++ messageContent = newMessageCount + messageContent.slice(1); + } + + // Create new message element and add to list -+ const message = document.createElement("div"); ++ const message = document.createElement("li"); + message.setAttribute("class", "message"); ++ if (success) { ++ message.classList.add("class", "success"); ++ } else { ++ message.classList.add("class", "error"); ++ } + message.textContent = messageContent; + messages.replaceChildren(...[message]); +} @@ htdocs/js/rest.js (new) + * @param {string} errorMessage Text for error message. + */ +function handleErrorMessages(errorMessage) { -+ // Replace success update message with error and failure update messages -+ const messages = document.getElementById("messages"); -+ messages.replaceChildren() -+ + let errorContainer = document.getElementById("errors"); + let errorHeader = document.getElementById("errors-header"); + let errorList = document.getElementsByClassName("error-list")[0]; -+ // Create errors container if it doesn't exist -+ if (errorContainer == null) { -+ errorContainer = document.createElement("div"); -+ } ++ + // Create errors list and error header if container contents removed + if (errorList == null) { + errorHeader = document.createElement("p"); + errorList = document.createElement("ul"); -+ errorContainer.setAttribute("id", "errors") + errorHeader.setAttribute("id", "errors-header") -+ errorHeader.textContent = "The following errors were encountered while updating comments:"; ++ errorHeader.textContent = "The following errors were encountered while making updates:"; + errorList.setAttribute("class", "error-list"); + errorContainer.appendChild(errorHeader); + errorContainer.appendChild(errorList); + } + -+ const contentContainer = document.getElementById("main-content"); + const error = document.createElement("li"); -+ + error.textContent = errorMessage; + errorList.appendChild(error); -+ contentContainer.prepend(errorContainer); +} + +export { updateProperty }; - - ## templates/base.html ## -@@ - </div> - </div> - </nav> -+ - {% if messages %} -+ {# TODO(raxel): Change to always have messages container #} - <div id="messages"> - {% for message in messages %} - {# TODO(stephenfin): Make use of message.tags when completely #} -@@ - </div> - {% endif %} - <div id="main-content" class="container-fluid"> -+ {# TODO(raxel): Change to always have errors container #} - {% block body %} - {% endblock %} - </div> -- 2.33.0.rc1.237.g0d66db33f3-goog _______________________________________________ Patchwork mailing list Patchwork@lists.ozlabs.org https://lists.ozlabs.org/listinfo/patchwork
