js2ts: install_db.php

- jqValidateForm 구현
  - async-validator + 수작업
- common.js 없이 ventor -> 타겟 ts 직접

hwe/ts/util/jqValidateForm.ts

@@ -0,0 +1,69 @@
+import Schema, { Rules, Values } from "async-validator";
+import { isArray } from "lodash";
+import { mergeKVArray } from "./mergeKVArray";
+import $ from 'jquery';
+
+export class JQValidateForm {
+    public readonly validator: Schema;
+    public readonly inputs: JQuery<HTMLElement>;
+    constructor(public readonly target: JQuery<HTMLElement>, public readonly rule: Rules) {
+        this.validator = new Schema(rule);
+        this.inputs = target.find('input');
+    }
+
+    public clearErrMsg():void {
+        this.inputs.removeClass('is-invalid');
+        this.inputs.removeClass('is-valid');
+        this.target.find('.invalid-feedback').detach();
+    }
+
+    public installChangeHandler():this{
+        this.inputs.on('change', ()=>{
+            void this.validate();
+        });
+        return this;
+    }
+
+    public async validate(): Promise<undefined | Values> {
+        const rawValues = mergeKVArray(this.inputs.serializeArray());
+        const validateResult = await this.validator.validate(rawValues).catch(({ fields }) => {
+            this.clearErrMsg();
+            for(const key of Object.keys(fields)){
+                let $item: JQuery<HTMLElement>;
+                const errMsg = fields[key][0].message;
+                if(isArray(rawValues[key])){
+                    $item = $(`#db_form input[name='${key}[]']`);
+                }
+                else{
+                    $item = $(`#db_form input[name='${key}']`);
+                }
+                $item.addClass('is-invalid');
+
+                const $error = $(`<span>${errMsg}</span>`);
+
+                $error.addClass( "invalid-feedback" );
+
+                if ( $item.prop( "type" ) === "checkbox" ) {
+                    $error.insertAfter( $item.parent( "label" ) );
+                } else {
+                    $error.insertAfter( $item );
+                }
+            }
+
+            this.inputs.each(function(){
+                const name = (this as HTMLInputElement).name;
+                if(name in fields){
+                    return;
+                }
+                this.classList.add('is-valid');
+            });
+            return undefined;
+        });
+        if(validateResult === undefined){
+            return undefined;
+        }
+        this.clearErrMsg();
+        this.inputs.addClass('is-valid');
+        return validateResult;
+    }
+}

hwe/ts/util/mergeKVArray.ts

@@ -0,0 +1,35 @@
+import { isString } from "lodash";
+
+interface NameValuePair {
+    name: string,
+    value: string
+}
+
+export function mergeKVArray(array : NameValuePair[]):Record<string, string|string[]>{
+    const result:Record<string, string|string[]> = {};
+
+    for(const {name, value} of array){
+        if(!isString(name)){
+            throw new TypeError(`${name} is not string`);
+        }
+        if(!isString(value)){
+            throw new TypeError(`${value} is not string`);
+        }
+
+        if(name === '' || name === '[]'){
+            continue;
+        }
+        if(name.length > 2 && name.slice(-2) == '[]'){
+            const keyHead = name.slice(0, -2);
+            if(!(keyHead in result)){
+                result[keyHead] = [value];
+            }
+            else{
+                (result[keyHead] as string[]).push(value);
+            }
+            continue;
+        }
+        result[name] = value;
+    }
+    return result;
+}

hwe/ts/util/setAxiosXMLHttpRequest.ts

@@ -0,0 +1,6 @@
+import axios from "axios";
+
+export function setAxiosXMLHttpRequest(): void{
+    axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
+    //TODO: X-Requested-With 믿지 말자.
+}