~sirn/fanboi2

ref: a68873a108d20a6a49a1b6caf374bfb2cf6a94fe fanboi2/assets/app/javascripts/utils/forms.ts -rw-r--r-- 3.1 KiB
a68873a1Kridsada Thanabulpong Coding style cleanups and setup pre-commit hooks (#42) 3 years ago
                                                                                
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
import { create, h } from "virtual-dom";
import { ResourceError } from "./errors";
import { addClass, removeClass } from "./elements";

export let serializeForm = (form: HTMLFormElement): any => {
    let formData: { [key: string]: any } = {};

    let _insertField = (name: string, value: any) => {
        if (name) {
            formData[name] = value;
        }
    };

    for (let i = 0, len = form.elements.length; i < len; i++) {
        let field = form.elements[i];

        if (field instanceof HTMLInputElement) {
            switch (field.type) {
                case "file":
                case "button":
                    break;
                case "checkbox":
                case "radio":
                    if (field.checked) {
                        _insertField(field.name, field.value);
                    }
                    break;
                default:
                    _insertField(field.name, field.value);
                    break;
            }
        } else if (field instanceof HTMLSelectElement) {
            switch (field.type) {
                case "select-multiple":
                    let fieldData: string[] = [];
                    for (let n = 0, l = field.options.length; n < l; n++) {
                        if (field.options[n].selected) {
                            fieldData.push(field.options[0].value);
                        }
                    }
                    _insertField(field.name, fieldData);
                    break;
                default:
                    _insertField(field.name, field.value);
                    break;
            }
        } else if (field instanceof HTMLTextAreaElement) {
            _insertField(field.name, field.value);
        }
    }

    return formData;
};

export let attachErrors = (form: HTMLFormElement, error: ResourceError) => {
    let data = error.object;

    let _attachError = (fieldElement: Element, message: string): void => {
        let formItemElement = fieldElement.closest(".form-item");

        if (!!formItemElement) {
            let err = h("span", { className: "form-item-error" }, [message]);

            addClass(formItemElement, ["error"]);
            fieldElement.parentElement.insertBefore(
                create(err),
                fieldElement.nextSibling,
            );
        }
    };

    if (data.status == "params_invalid") {
        for (let field in <{ [key: string]: string[] }>data.message) {
            if (data.message.hasOwnProperty(field)) {
                _attachError(form[field], data.message[field]);
            }
        }
    } else {
        _attachError(form.querySelector("[data-form-anchor]"), data.message);
    }
};

export let detachErrors = (form: HTMLFormElement) => {
    let errorElements = form.querySelectorAll(".error");
    let msgElements = form.querySelectorAll(".form-item-error");

    for (let i = 0, len = errorElements.length; i < len; i++) {
        removeClass(errorElements[0], ["error"]);
    }

    for (let i = 0, len = msgElements.length; i < len; i++) {
        msgElements[0].parentElement.removeChild(msgElements[0]);
    }
};