[PATCH 0/3] rest: add rest.js to handle PATCH requests & respective responses
Raxel Gutierrez
raxel at google.com
Tue Aug 17 10:32:22 AEST 2021
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
More information about the Patchwork
mailing list