Add `rest.js` file to have a utilities JavaScript module that can be reused by any Patchwork JS files that make requests to the REST API. The comments for each function follow the Google JS Style guide [1] which is something that would be nice to have for better documented frontend code, especially for JS modules that export functions like rest.js. In particular, this patch provides the following function:
- `updateProperty`: make PATCH requests that partially update the 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. 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 REST API. Also, add functions that handle update & error messages for these PATCH requests that match the Django messages framework format and form error styling. These functions are internal to the module and aren't exposed outside of the `rest.js` file. Error and accompanying failed update messages are replaced by successful update messages and vice versa. Consecutive successful update messages add to a counter of updated objects. Consecutive error messages stack up. Signed-off-by: Raxel Gutierrez <ra...@google.com> Reviewed-by: Daniel Axtens <d...@axtens.net> --- htdocs/README.rst | 5 ++ htdocs/js/rest.js | 118 ++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 123 insertions(+) create mode 100644 htdocs/js/rest.js diff --git a/htdocs/README.rst b/htdocs/README.rst index 679bfcd9..d53619ad 100644 --- a/htdocs/README.rst +++ b/htdocs/README.rst @@ -122,6 +122,11 @@ 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. + + Part of Patchwork. + ``selectize.min.js`` Selectize is the hybrid of a ``textbox`` and ``<select>`` box. It's jQuery based and it has autocomplete and native-feeling keyboard navigation; useful diff --git a/htdocs/js/rest.js b/htdocs/js/rest.js new file mode 100644 index 00000000..7a4fecef --- /dev/null +++ b/htdocs/js/rest.js @@ -0,0 +1,118 @@ +/** + * Sends PATCH requests to update objects' properties using the REST API. + * @param {string} url Path to the REST API endpoint. + * @param {{field: string, value: string}} data + * field: Name of the property field to update. + * value: Value to update the property field to. + * @param {{error: string, success: string}} updateMessage + * error: Message when object update failed due to errors. + * success: Message when object update successful. + * @return {boolean} Whether the request was successful. + */ +async function updateProperty(url, data, updateMessage) { + const request = new Request(url, { + method: 'PATCH', + mode: "same-origin", + headers: { + // Get csrftoken using 'js-cookie' module + "X-CSRFToken": Cookies.get("csrftoken"), + "Content-Type": "application/json", + }, + body: JSON.stringify(data), + }); + + return await fetch(request) + .then(response => { + let message = updateMessage.success; + if (!response.ok) { + response.json().then(responseObject => { + // Add error messages from response body to page + // which can be an array of errors for a given key + for (const [key, value] of Object.entries(responseObject)) { + if (Array.isArray(value)) { + for (const error of value) { + handleErrorMessage(`${key} : ${error}`); + } + } else { + handleErrorMessage(`${key} : ${value}`); + } + } + }); + // Update message to be unsuccessful + message = updateMessage.error; + } + handleUpdateMessage(message, response.ok); + return response.ok + }).catch(error => { + handleErrorMessage(error); + return false + }); +} + +/** + * Populates update messages for API REST requests. + * @param {string} message Text for update message. + * @param {boolean} success Whether the request was successful. + */ +function handleUpdateMessage(message, success) { + // Replace error and failure update messages with success update message + const errorContainer = document.getElementById("errors"); + let messages = document.getElementsByClassName("messages")[0]; + if (success && errorContainer.firstChild != null) { + messages.replaceChildren(); + errorContainer.replaceChildren(); + } else if (!success) { + messages.replaceChildren(); + } + + // Increment counter of consecutive success update messages + if (messages.firstChild != null) { + const currentMessageCount = messages.firstChild.textContent.match('^([0-9]+)'); + // Number matched in message + if (currentMessageCount != null) { + const newMessageCount = parseInt(currentMessageCount) + 1; + message = newMessageCount + message.slice(1); + } else { + // No number matched in message + message = "1" + message.slice(1); + } + } + + // Create new message element and add to list + const messageElem = document.createElement("li"); + messageElem.setAttribute("class", "message"); + if (success) { + messageElem.classList.add("success"); + } else { + messageElem.classList.add("error"); + } + messageElem.textContent = message; + messages.replaceChildren(...[messageElem]); +} + +/** + * Populates error messages for API REST requests. + * @param {string} message Text for error message. + */ +function handleErrorMessage(message) { + let errorContainer = document.getElementById("errors"); + let errorHeader = document.getElementById("errors-header"); + let errorList = document.getElementsByClassName("error-list")[0]; + + // Create errors list and error header if container contents removed + if (errorList == null) { + errorHeader = document.createElement("p"); + errorList = document.createElement("ul"); + errorHeader.setAttribute("id", "errors-header") + errorHeader.textContent = "The following errors were encountered while making updates:"; + errorList.setAttribute("class", "error-list"); + errorContainer.appendChild(errorHeader); + errorContainer.appendChild(errorList); + } + + const error = document.createElement("li"); + error.textContent = message; + errorList.appendChild(error); +} + +export { updateProperty }; -- 2.33.0.rc1.237.g0d66db33f3-goog _______________________________________________ Patchwork mailing list Patchwork@lists.ozlabs.org https://lists.ozlabs.org/listinfo/patchwork
