~sirn/fanboi2

ref: 5b482cfc1bfb0bb1e89715cb57c7bac864391768 fanboi2/assets/app/javascripts/utils/forms.ts -rw-r--r-- 3.1 KiB
5b482cfcKridsada Thanabulpong 0.30.0 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
95
96
97
98
99
100
101
102
103
104
105
106
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]);
    }
}