onboard/static/scripts/form.js

import getCookie from "./get_cookie.js";

export default class Form {
    constructor(form, isNew=false) {
        if (typeof form === "string") {
            this.form = document.querySelector(`#${form}`)
        } else {
            this.form = form;
        }
        this.url = this.form.attributes.action.value;
        this.destroyButton = null
        if (isNew) {
            this.load()
        } else {
            if (this.form.querySelector("[name=destroy]")) {
                this.destroyButton = this.form.querySelector("[name=destroy]")
                this.destroyButton.addEventListener("click", this.destroy.bind(this))
            }
            if (this.form.querySelector("[name=edit]")) {
                this.editButton = this.form.querySelector("[name=edit]")
                this.editButton.addEventListener("click", this.edit.bind(this))
            }
        }
        this.form.addEventListener("submit", this.post.bind(this))
        this.form.addEventListener("change", this.change.bind(this))
    }

    load() {
        fetch(`${this.url}`)
            .then((response) => response.text())
            .then((html) => {
                this.form.innerHTML = html;
                if (this.form.querySelector("[name=destroy]")) {
                    this.destroyButton = this.form.querySelector("[name=destroy]")
                    this.destroyButton.addEventListener("click", this.destroy.bind(this))
                }
                if (this.form.querySelector("[name=edit]")) {
                    this.editButton = this.form.querySelector("[name=edit]")
                    this.editButton.addEventListener("click", this.edit.bind(this))
                }
            })
    }

    validate() {
        const inputs = new Set()
        this.form.querySelectorAll("input").forEach(input => {
            inputs.add(input.checkValidity())
        })

        let valid = (inputs.has(false)) ? false : true

        return valid
    }
    
    change(event) {
        if (event.target.type === "checkbox") {
            this.post(event)
        }
    }

    edit(event) {
        if (event) {
            event.preventDefault()
        }
        this.form.querySelector("[name=description]").type = 'text'
        let display = this.form.querySelector(".todo__description_display")
        display.classList.add('--hidden')
    }


    post(event) {
        if (event) {
            event.preventDefault()
        }

        // construct a new FormData object from the html form
        const formData = new FormData(this.form)

        // get the csrftoken
        const csrftoken = getCookie("csrftoken")

        const options = {
            method: "POST",
            body: new URLSearchParams(formData),
            mode: "same-origin",
        };

        // construct a new Request passing in the csrftoken
        const request = new Request(`${this.url}`, {
            headers: { "X-CSRFToken": csrftoken },
        })

        // finally make the post request and wait for the server to respond
        fetch(request, options)
            .then((response) => response.text())
            .then((html) => {
                var doc = new DOMParser().parseFromString(html, "text/html")
                this.url = doc.forms[0].attributes.action.value;
                this.form.innerHTML = html;

                if (this.form.querySelector("[name=destroy]")) {
                    this.destroyButton = this.form.querySelector("[name=destroy]")
                    this.destroyButton.addEventListener(
                        "click",
                        this.destroy.bind(this)
                    )
                }
                if (this.form.querySelector("[name=edit]")) {
                    this.editButton = this.form.querySelector("[name=edit]")
                    this.editButton.addEventListener("click", this.edit.bind(this))
                }
            })
            .catch((error) => {
                return error;
            })
    }

    destroy(event) {
        if (event) {
            event.preventDefault()
        }

        const confirmation = confirm(
            "Are you sure you would like to delete this entry?"
        )

        if (confirmation) {
            // get the csrftoken
            const csrftoken = getCookie("csrftoken")

            const options = {
                method: "POST",
                mode: "same-origin",
            };

            // construct a new Request passing in the csrftoken
            const request = new Request(`${this.destroyButton.dataset.url}`, {
                headers: { "X-CSRFToken": csrftoken },
            })

            // finally make the post request and wait for the server to respond
            fetch(request, options)
                .then((response) => response.text())
                .then((html) => {
                    this.form.innerHTML = html;
                    setTimeout(() => {
                        this.form.remove()
                    }, 3000)
                })
                .catch((error) => {
                    return error;
                })
        }
    }
}