app/include/fields.js

'use strict'
/**

 * Copyright (c) 2017~2021, OBCon Inc.

 * All rights reserved.

 */
  
/**

 * @file

 * @copyright 2017~2021, OBCon Inc.

 * @author gye hyun james kim [pnuskgh@gmail.com]

 */
 
let moment = require('moment');
 
class Fields {
    //--- To-Do. Field 설정(module.fieldDesc)을 참조하여 field를 화면에 표시
    //---     현재는 사용하지 않음
    display(moduleName, fieldName, item, options={

        // type: 'string',        len: 8,

        // allowNull: false,

        // defaultValue: 'HTTP',        

        // validate: {},                             

        // title: 'Method',            

        // strType: 'string',           

        // enum: [  

        //     ['HTTP', 'HTTP/HTTPS'],                                                         //--- 브라우저부터의 요청

        //     ['GET', 'GET'], ['POST', 'POST'], ['PUT', 'PUT'], ['DELETE', 'DELETE']          //--- Open API로부터의 요청

        // ]     

    }) {
        let html = [];

        return html.join('');
    }

    get layout() {
        let MARGIN_BOTTOM = 10;
        return {
            fieldStyle: 'margin-bottom: ' + MARGIN_BOTTOM + 'px;',
            fieldRequire: '<span style="color: blue; ' + config.theme.font.size + '"> (*)</span>'
        };
    }

    get date() {
        return {
            format: this.dateFormat.bind(this),
            viewDuration: this._dateViewDuration.bind(this)
        };
    }

    dateFormat(argDate, format='YYYY-MM-DD HH:mm:ss') {
        if (argDate == null) {
            return '';
        }
        let strDate = moment(argDate).format(format);
        return (strDate == 'Invalid date') ? '':strDate;
    }

    _dateViewDuration(label, id, type='text', size=6, value='', options={}) {
        return this.show(label, id, type, size, value, options);
    }

    get string() {
        if (config.theme.version == '2.00') {
            //--- 실행되지 않음
            //--- 현재 2.00 버전을 사용하는 고객사는 한 곳도 없음
            return {
                viewDetail: this._stringViewDetail_200.bind(this),
                viewDetailFull: this._stringViewDetailFull_200.bind(this),
                viewBlank: this._stringViewBlank_200.bind(this),
                viewBlankLine: this._stringViewBlankLine_200.bind(this),
                viewUpdate: this._stringViewUpdate_200.bind(this),
                viewUpdateFull: this._stringViewUpdateFull_200.bind(this),
                viewSelect: this._stringViewSelect_200.bind(this),
                searchSelect: this._stringSearchSelect_200.bind(this),
                getSelectValue: this.getSelectValue.bind(this)
            };
        } else {
            if (config.theme.defaultName == 'default_2022') {
                return {
                    viewDetail: this._stringViewDetail_100_2022.bind(this),
                    viewDetailFull: this._stringViewDetailFull_100_2022.bind(this),
                    viewBlank: this._stringViewBlank_100_2022.bind(this),
                    viewBlankLine: this._stringViewBlankLine_100_2022.bind(this),
                    viewUpdate: this._stringViewUpdate_100_2022.bind(this),
                    viewUpdateFull: this._stringViewUpdateFull_100_2022.bind(this),
                    viewSelect: this._stringViewSelect_100_2022.bind(this),
                    searchSelect: this._stringSearchSelect_100_2022.bind(this),
                    getSelectValue: this.getSelectValue.bind(this)
                };
            } else {
                //--- 실행되지 않음
                //--- default_2022 을 사용하지 않는 곳이 한 곳도 없음
                return {
                    viewDetail: this._stringViewDetail_100.bind(this),
                    viewDetailFull: this._stringViewDetailFull_100.bind(this),
                    viewBlank: this._stringViewBlank_100.bind(this),
                    viewBlankLine: this._stringViewBlankLine_100.bind(this),
                    viewUpdate: this._stringViewUpdate_100.bind(this),
                    viewUpdateFull: this._stringViewUpdateFull_100.bind(this),
                    viewSelect: this._stringViewSelect_100.bind(this),
                    searchSelect: this._stringSearchSelect_100.bind(this),
                    getSelectValue: this.getSelectValue.bind(this)
                };
            }
        }
    }

    _stringViewDetail_100(title, name, value, theme, type='text', size=6) {
        let content = '';

        content = content + '<div class="input-group col-xs-' + size + ' col-sm-' + size + ' col-md-' + size + ' col-lg-' + size + '" style="' + fields.layout.fieldStyle + '">';
        content = content + '    <div class="input-group-prepend" style="width: 30%;">';
        content = content + '        <label class="input-group-text" style="' + theme.font.size + ' width: 100%;" for="' + name + '">' + title + '</label>';
        content = content + '    </div>';
        content = content + '    <input type="' + type + '" value="' + utils.Null(value) + '" class="form-control" style="' + theme.font.size +'" id="' + name + '" name="' + name + '" readonly>';
        content = content + '</div>';
        return content;
    }

    _stringViewDetailFull_100(title, name, value, theme, type='text', row=10) {
        let content = '';

        if (type == 'textarea') {
            content = content + '<div class="input-group col-xs-12 col-sm-12 col-md-12 col-lg-12" style="' + fields.layout.fieldStyle + '">';
            content = content + '    <div class="input-group-prepend" style="width: 14.5%;">';
            content = content + '        <label class="input-group-text" style="' + theme.font.size + ' width: 100%;" for="' + name + '">' + title + '</label>';
            content = content + '    </div>';
            content = content + '    <textarea class="form-control" style="' + theme.font.size + '" id="' + name + '" name="' + name + '" rows="' + row + '" readonly>';
            content = content + utils.Null(value);
            content = content + '</textarea>';
            content = content + '</div>';
        } else {
            content = content + '<div class="input-group col-xs-12 col-sm-12 col-md-12 col-lg-12" style="' + fields.layout.fieldStyle + '">';
            content = content + '    <div class="input-group-prepend" style="width: 14.5%;">';
            content = content + '        <label class="input-group-text" style="' + theme.font.size + ' width: 100%;" for="' + name + '">' + title + '</label>';
            content = content + '    </div>';
            content = content + '    <input type="' + type + '" value="' + utils.Null(value) + '" class="form-control" style="' + theme.font.size +'" id="' + name + '" name="' + name + '" readonly>';
            content = content + '</div>';
        }
        return content;
    }

    _stringViewBlank_100(size=6, id="") {
        let content = '';

        if (id == "") {
            content = content + '<div class="input-group col-xs-' + size + ' col-sm-' + size + ' col-md-' + size + ' col-lg-' + size + '" style="' + fields.layout.fieldStyle + '">';
        } else {
            content = content + '<div class="input-group col-xs-' + size + ' col-sm-' + size + ' col-md-' + size + ' col-lg-' + size + '" style="' + fields.layout.fieldStyle + '" id="' + id + '">';
        }
        content = content + '    &nbsp;';
        content = content + '</div>';
        return content;
    }

    _stringViewBlankLine_100(gap=20) {
        let content = '';

        content = content + '<div class="input-group col-xs-12 col-sm-12 col-md-12 col-lg-12" style="height: ' + gap + 'px;">';
        content = content + '    &nbsp;';
        content = content + '</div>';
        return content;
    }

    _stringViewUpdate_100(title, name, value, theme, type='text', size=6, isRequire=false) {
        let content = '';

        content = content + '<div class="input-group col-xs-' + size + ' col-sm-' + size + ' col-md-' + size + ' col-lg-' + size + '" style="' + fields.layout.fieldStyle + '">';
        content = content + '    <div class="input-group-prepend" style="width: 30%;">';
        content = content + '        <label class="input-group-text" style="' + theme.font.size + ' width: 100%;" for="' + name + '">' + title + ((isRequire) ? fields.layout.fieldRequire:'') + '</label>';
        content = content + '    </div>';
        content = content + '    <input type="' + type + '" value="' + utils.Null(value) + '" class="form-control" style="' + theme.font.size + '" id="' + name + '" name="' + name + '">';
        content = content + '</div>';
        return content;
    }

    _stringViewUpdateFull_100(title, name, value, theme, type='text', isRequire=false, row=10) {
        let content = '';

        if (type == 'textarea') {
            content = content + '<div class="input-group col-xs-12 col-sm-12 col-md-12 col-lg-12" style="' + fields.layout.fieldStyle + '">';
            content = content + '    <div class="input-group-prepend" style="width: 14.5%;">';
            content = content + '        <label class="input-group-text" style="' + theme.font.size + ' width: 100%;" for="' + name + '">' + title + ((isRequire) ? fields.layout.fieldRequire:'') + '</label>';
            content = content + '    </div>';
            content = content + '    <textarea class="form-control" style="' + theme.font.size + '" id="' + name + '" name="' + name + '" rows="' + row + '">';
            content = content + utils.Null(value);
            content = content + '</textarea>';
            content = content + '</div>';
        } else {
            content = content + '<div class="input-group col-xs-12 col-sm-12 col-md-12 col-lg-12" style="' + fields.layout.fieldStyle + '">';
            content = content + '    <div class="input-group-prepend" style="width: 14.5%;">';
            content = content + '        <label class="input-group-text" style="' + theme.font.size + ' width: 100%;" for="' + name + '">' + title + ((isRequire) ? fields.layout.fieldRequire:'') + '</label>';
            content = content + '    </div>';
            content = content + '    <input type="' + type + '" value="' + utils.Null(value) + '" class="form-control" style="' + theme.font.size + '" id="' + name + '" name="' + name + '">';
            content = content + '</div>';
        }
        return content;
    }

    _stringViewSelect_100(title, name, value, data, theme, type='text', size=6) {
        let content = '';

        content = content + '<div class="input-group col-xs-' + size + ' col-sm-' + size + ' col-md-' + size + ' col-lg-' + size + '" style="' + fields.layout.fieldStyle + '">';
        content = content + '    <div class="input-group-prepend" style="width: 30%;">';
        content = content + '        <label class="input-group-text" style="' + theme.font.size + ' width: 100%;" for="' + name + '">' + title + '</label>';
        content = content + '    </div>';
        content = content + '    <select class="custom-select" style="' + theme.font.size + '" id="' + name + '" name="' + name + '">';
        data.forEach((opt => {
            if (value == opt[0]) {
                content = content + '        <option value="' + opt[0] + '" selected>' + this.getSelectValue(opt[0], data) + '</option>';
            } else {
                content = content + '        <option value="' + opt[0] + '">' + this.getSelectValue(opt[0], data) + '</option>';
            }
        }).bind(this));
        content = content + '    </select>';
        content = content + '</div>';
        return content;
    }

    _stringSearchSelect_100(title, name, value, data, theme, type='text', size=3, allowAll=false) {
        let content = '';

        content = content + '<div class="input-group col-xs-' + size + ' col-sm-' + size + ' col-md-' + size + ' col-lg-' + size + '">';
        content = content + '    <div class="input-group-prepend" style="width: 30%;">';
        content = content + '        <label class="input-group-text" style="' + theme.font.size + ' width: 100%;" for="' + name + '">' + title + '</label>';
        content = content + '    </div>';
        content = content + '    <select class="custom-select" style="' + theme.font.size + '" id="' + name + '" name="' + name + '">';
        if (allowAll) {
            content = content + '        <option value="">--전체 선택--</option>';
        }
        data.forEach((opt => {
            if (value == opt[0]) {
                content = content + '        <option value="' + opt[0] + '" selected>' + this.getSelectValue(opt[0], data) + '</option>';
            } else {
                content = content + '        <option value="' + opt[0] + '">' + this.getSelectValue(opt[0], data) + '</option>';
            }
        }).bind(this));
        content = content + '    </select>';
        content = content + '</div>';
        return content;
    }

    _getValue(value, type) {
        let displayValue = ((typeof(value) == 'undefined') || (value == null)) ? '':value;
        switch (utils.typeof(displayValue)) {
        case 'date':
            if (displayValue != '') {
                switch (type) {
                case 'date':
                    displayValue = moment(displayValue).format('YYYY-MM-DD');
                    break;
                case 'datetime':
                    displayValue = moment(displayValue).format('YYYY-MM-DD HH:mm:ss');
                    break;
                }
            }
            break;
        case 'boolean':
            displayValue = (displayValue) ? 'true':'false'
            break;
        }
        return displayValue;
    }

    _stringViewDetail_100_2022(title, name, value, theme, type='text', size=6) {
        const displayValue = this._getValue(value, type);
        let content = '';
        content = content + `<div class="col-xs-${size} col-sm-${size} col-md-${size} col-lg-${size} col-xl-${size} col-xxl-${size}" style="${fields.layout.fieldStyle}">`;
        content = content + '<div class="input-group" style="zzheight: 39px;">';
        content = content + '    <label class="form-label input-group-text" style="' + theme.font.size + ' width: 30%; margin: 0;" for="' + name + '">' + title + '</label>';
        if (type == 'color') {
            content = content + '    <input type="' + type + '" value="' + displayValue + '" class="form-control" style="' + theme.font.size + ' height: 35px;" id="' + name + '" name="' + name + '" readonly>';
        } else {
            content = content + '    <input type="' + type + '" value="' + displayValue + '" class="form-control" style="' + theme.font.size +'" id="' + name + '" name="' + name + '" readonly>';
        }
        content = content + '</div>';
        content = content + '</div>';
        return content;
    }

    _stringViewDetailFull_100_2022(title, name, value, theme, type='text', row=10) {
        const displayValue = this._getValue(value, type);
        let content = '';
        if (type == 'textarea') {
            content = content + '<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12" style="' + fields.layout.fieldStyle + '">';
            content = content + '<div class="input-group">';
            content = content + '        <label class="form-label input-group-text" style="' + theme.font.size + ' width: 14.5%; margin: 0;" for="' + name + '">' + title + '</label>';
            content = content + '    <textarea class="form-control" style="' + theme.font.size + '" id="' + name + '" name="' + name + '" rows="' + row + '" readonly>';
            content = content + displayValue;
            content = content + '</textarea>';
            content = content + '</div>';
            content = content + '</div>';
        } else {
            content = content + '<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12" style="' + fields.layout.fieldStyle + '">';
            content = content + '<div class="input-group">';
            content = content + '        <label class="input-group-text" style="' + theme.font.size + ' width: 14.5%; margin: 0;" for="' + name + '">' + title + '</label>';
            content = content + '    <input type="' + type + '" value="' + displayValue + '" class="form-control" style="' + theme.font.size +'" id="' + name + '" name="' + name + '" readonly>';
            content = content + '</div>';
            content = content + '</div>';
        }
        return content;
    }

    _stringViewBlank_100_2022(size=6, id="") {
        let content = '';
        if (id == "") {
            content = content + '<div class="col-xs-' + size + ' col-sm-' + size + ' col-md-' + size + ' col-lg-' + size + '" style="' + fields.layout.fieldStyle + '">';
        } else {
            content = content + '<div class="col-xs-' + size + ' col-sm-' + size + ' col-md-' + size + ' col-lg-' + size + '" style="' + fields.layout.fieldStyle + '" id="' + id + '">';
        }
        content = content + '    &nbsp;';
        content = content + '</div>';
        return content;
    }

    _stringViewBlankLine_100_2022(gap=20) {
        let content = '';

        content = content + '<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="height: ' + gap + 'px;">';
        content = content + '    &nbsp;';
        content = content + '</div>';
        return content;
    }

    _stringViewUpdate_100_2022(title, name, value, theme, type='text', size=6, isRequire=false) {
        const displayValue = this._getValue(value, type);
        let content = '';
        content = content + `<div class="col-xs-${size} col-sm-${size} col-md-${size} col-lg-${size} col-xl-${size} col-xxl-${size}" style="${fields.layout.fieldStyle}">`;
        content = content + '<div class="input-group">';
        content = content + '        <label class="input-group-text" style="' + theme.font.size + ' width: 30%; margin: 0;" for="' + name + '">' + title + ((isRequire) ? fields.layout.fieldRequire:'') + '</label>';
        // content = content + '    </div>';
        if (type == 'color') {
            content = content + '    <input type="' + type + '" value="' + displayValue + '" class="form-control" style="' + theme.font.size + ' height: 35px;" id="' + name + '" name="' + name + '">';
        } else {
            content = content + '    <input type="' + type + '" value="' + displayValue + '" class="form-control" style="' + theme.font.size + '" id="' + name + '" name="' + name + '">';
        }
        content = content + '</div>';
        content = content + '</div>';
        return content;
    }

    _stringViewUpdateFull_100_2022(title, name, value, theme, type='text', isRequire=false, row=10) {
        const displayValue = this._getValue(value, type);
        let content = '';
        if (type == 'textarea') {
            content = content + `<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12" style="${fields.layout.fieldStyle}">`;
            content = content + '<div class="input-group">';
            content = content + '    <label class="input-group-text" style="' + theme.font.size + ' width: 14.5%;" for="' + name + '">' + title + ((isRequire) ? fields.layout.fieldRequire:'') + '</label>';
            content = content + '    <textarea class="form-control" style="' + theme.font.size + '" id="' + name + '" name="' + name + '" rows="' + row + '">';
            content = content + displayValue;
            content = content + '</textarea>';
            content = content + '</div>';
            content = content + '</div>';
        } else {
            content = content + `<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12" style="${fields.layout.fieldStyle}">`;
            content = content + '<div class="input-group">';
            content = content + '    <label class="input-group-text" style="' + theme.font.size + ' width: 14.5%;" for="' + name + '">' + title + ((isRequire) ? fields.layout.fieldRequire:'') + '</label>';
            content = content + '    <input type="' + type + '" value="' + displayValue + '" class="form-control" style="' + theme.font.size + '" id="' + name + '" name="' + name + '">';
            content = content + '</div>';
            content = content + '</div>';
        }
        return content;
    }

    _stringViewSelect_100_2022(title, name, value, data, theme, type='text', size=6) {
        const displayValue = this._getValue(value, type);
        let content = '';
        content = content + `<div class="col-xs-${size} col-sm-${size} col-md-${size} col-lg-${size} col-xl-${size} col-xxl-${size}" style="${fields.layout.fieldStyle}">`;
        content = content + '<div class="input-group">';
        content = content + '    <label class="input-group-text" style="' + theme.font.size + ' width: 30%;" for="' + name + '">' + title + '</label>';
        content = content + '    <select class="form-control form-select" style="' + theme.font.size + ' width: 70%;" id="' + name + '" name="' + name + '">';
        data.forEach((opt => {
            if ((displayValue == opt[0]) || (value == opt[0])) {
                content = content + '        <option value="' + opt[0] + '" selected>' + this.getSelectValue(opt[0], data) + '</option>';
            } else {
                content = content + '        <option value="' + opt[0] + '">' + this.getSelectValue(opt[0], data) + '</option>';
            }
        }).bind(this));
        content = content + '    </select>';
        content = content + '</div>';
        content = content + '</div>';
        return content;
    }

    _stringSearchSelect_100_2022(title, name, value, data, theme, type='text', size=3, allowAll=false) {
        const displayValue = this._getValue(value, type);
        let content = '';
        content = content + `<div class="col-xs-${size} col-sm-${size} col-md-${size} col-lg-${size} col-xl-${size} col-xxl-${size}">`;
        content = content + '<div class="input-group mb-1" style="height: 39px;">';
        content = content + '    <label class="form-label input-group-text" style="' + theme.font.size + ' width: 30%; margin: 0;" for="' + name + '">' + title + '</label>';
        content = content + '    <select class="form-control form-select zzcustom-select" style="' + theme.font.size + ' width: 70%; height: 39px;" id="' + name + '" name="' + name + '">';
        if (allowAll) {
            content = content + '        <option value="">--전체 선택--</option>';
        }
        data.forEach((opt => {
            if ((displayValue == opt[0]) || (value == opt[0])) {
                content = content + '        <option value="' + opt[0] + '" selected>' + this.getSelectValue(opt[0], data) + '</option>';
            } else {
                content = content + '        <option value="' + opt[0] + '">' + this.getSelectValue(opt[0], data) + '</option>';
            }
        }).bind(this));
        content = content + '    </select>';
        content = content + '</div>';
        content = content + '</div>';
        return content;
    }

    show(label, id, type='text', size=6, value='', options={

        // readonly: false,

        // require: false,

        // allowAll: false,                                    //--- 향후 삭제할 것

        // options: [ [ 'value', 'label' ] ],

        // rows: 5,                                            //--- textarea 필드에서 rows

        // isDuration: false,

    }) {
        let content = [];
        let attrs = [];

        if ((typeof(options.readonly) != 'undefined') && (options.readonly == true)) {
            attrs.push('readonly');
        }
        if ((typeof(options.require) != 'undefined') && (options.require == true)) {
            label = `${label}<span class="obcon-col-label-require">(*)</span>`;
        }

        if (size != null) {
            content.push(`<div class="col-xs-${size} col-sm-${size} col-md-${size} col-lg-${size} col-xl-${size} col-xxl-${size}">`);
        }
        content.push('    <div class="input-group mb-1">');
        switch (type) {
        case 'select':
            content.push(this._showLabel(label, id, `form-label input-group-text obcon-col obcon-col${size}-label`));
            content.push(`    <select id="${id}" name="${id}" class="form-control form-select obcon-col obcon-col${size}-field" zzaria-label="example">`);

            let flagAll = true;
            options.options.forEach((opt => {
                if (value == opt[0]) {
                    flagAll = false;
                }
            }).bind(this));
    
            if ((typeof(options.allowAll) != 'undefined') && (options.allowAll == true)) {
                content.push(`        <option value="" ${(flagAll) ? 'selected':''}>--전체 선택--</option>`);
            }

            options.options.forEach((opt => {
                content.push(`        <option value="${opt[0]}" ${(value == opt[0]) ? 'selected':''}>${opt[1]}</option>`);
            }).bind(this));
            content.push('    </select>');
            break;       
        case 'textarea':
            content.push(this._showLabel(label, id, `form-label input-group-text obcon-col obcon-col${size}-label-textarea align-middle`));
            content.push(`<textarea id="${id}" name="${id}" rows="${options.rows}" class="form-control obcon-col${size}-field-textarea" ${attrs.join(' ')}>${utils.Null(value)}</textarea>`);
            break;
        case 'datetime-local':
        case 'date':
            if (options.isDuration) {
                attrs.push('datetimeonly');
                content.push(this._showLabel((label == null) ? null:label[0], `${id}Fr`, `form-label input-group-text obcon-col obcon-col${size}-label`));
                content.push(this._showFieldInput(`${id}Fr`, type, `form-control obcon-col obcon-col-date`, value[0], attrs));
                content.push(' ~ ');
                content.push(this._showLabel((label == null) ? null:label[1], `${id}To`, `form-label input-group-text obcon-col obcon-col${size}-label`));
                content.push(this._showFieldInput(`${id}To`, type, `form-control obcon-col obcon-col-date`, value[1], attrs));
            } else {
                content.push(this._showLabel(label, id, `form-label input-group-text obcon-col obcon-col${size}-label`));
                content.push(this._showFieldInput(id, type, `form-control obcon-col obcon-col${size}-field`, value, attrs));
            }
            break;
        case 'text':
        default:
            content.push(this._showLabel(label, id, `form-label input-group-text obcon-col obcon-col${size}-label`));
            content.push(this._showFieldInput(id, type, `form-control obcon-col obcon-col${size}-field`, value, attrs));
            break;
        }
        content.push('    </div>');
        if (size != null) {
            content.push('</div>');
        }
        return content.join('');
    }
    
    _showLabel(label, id, classes) {
        return (label == null) ? '':`<label class="${classes}" for="${id}">${label}</label>`
    }

    _showFieldInput(id, type, classes, value, attrs) {
       return `<input id="${id}" name="${id}" type="${type}" class="${classes}" value="${utils.Null(value)}" ${attrs.join(' ')}>`;
    }

    _stringViewDetail_200(title, name, value, theme, type='text', size=6) {
        return this.show(title, name, type, size, value, { readonly: true });
    }

    _stringViewDetailFull_200(title, name, value, theme, type='text', rows=10) {
        if (type == 'textarea') {
            return this.show(title, name, type, 12, value, { rows: rows, readonly: true });
        } else {
            return this.show(title, name, type, 12, value, { readonly: true });
        }
    }

    _stringViewBlank_200(size=6, id=null) { 
        return `<div class="col-xs-${size} col-sm-${size} col-md-${size} col-lg-${size} col-xl-${size} col-xxl-${size}"></div>`;
    }

    _stringViewBlankLine_200(gap=3) {
        return `<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12 mb-${gap}"></div>`;
    }

    _stringViewUpdate_200(title, name, value, theme, type='text', size=6, isRequire=false) {
        return this.show(title, name, type, size, value, { require: isRequire });
    }

    _stringViewUpdateFull_200(title, name, value, theme, type='text', isRequire=false, rows=10) {
        if (type == 'textarea') {
            return this.show(title, name, type, 12, value, { rows: rows, require: isRequire });
        } else {
            return this.show(title, name, type, 12, value, { require: isRequire });
        }
    }

    _stringViewSelect_200(title, name, value, data, theme, type='text', size=6) {
        return this.show(title, name, 'select', size, value, { options: data });
    }

    _stringSearchSelect_200(title, name, value, data, theme, type='text', size=3, allowAll=false) {
        return this.show(title, name, 'select', size, value, { options: data, allowAll: allowAll });
    }

    getSelectValue(value, data) {
        const displayValue = this._getValue(value, '');
        let rtValue = '';
        data.forEach(opt => {
            if ((displayValue == opt[0]) || (value == opt[0])) {
                rtValue = opt[1];
            }
        });
        return rtValue;
    }

    get disp() {
        return {
            contentTitle: this.displayContentTitle.bind(this),
            contentTitleButton: this.displayContentTitleButton.bind(this),
            contentTitleButton2: this.displayContentTitleButton2.bind(this),

            contentError: this.displayContentError.bind(this),

            contentMenuButton: this.displayContentMenuButton.bind(this),

            contentTabMenu: this.displayContentTabMenu.bind(this),

            contentTableButton: this.displayContentTableButton.bind(this)
        };
    }

    _showSettingAndHelp(settings=null, helps=null) {
        let content = [];

        // settings = [
        //     {
        //         name: '설정 이름',
        //         target: '설정 타겟 이름'
        //     }
        // ];
        if (utils.isArray(settings)) {
            if (settings.length == 0) {
            } else if (settings.length == 1) {
                content.push(`    <i id="linkSetting" class="bi-gear text-success" role="button" data-bs-toggle="modal" data-bs-target="#${settings[0].target}"></i>&nbsp;`);
            } else {
                content.push('<span class="dropdown">');
                content.push('  <i id="linkSetting" class="bi-gear text-success zzdropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>');
                content.push('  <ul class="dropdown-menu" aria-labelledby="linkSetting">');
                settings.forEach(setting => {
                    content.push(`    <li data-bs-toggle="modal" data-bs-target="#${setting.target}">&nbsp;&nbsp;${setting.name}</li>`);
                });
                content.push('  </ul>');
                content.push('</span>');
            }
        }

        //--- To-Do : 도움말 파일을 생성 한다.
        //            ${module}_${action}_${순서}_${라벨}_${service}_${theme}.md    //--- service별 theme별 도움말
        //            ${module}_${action}_${순서}_${라벨}_${service}_default.md     //--- service별 도움말
        //            ${module}_${action}_${순서}_${라벨}_default_${theme}.md       //--- theme별 도움말
        //            ${module}_${action}_${순서}_${라벨}.md                        //--- 디폴트 도움말
        //            Action이 호출되면 도움말 파일을 검색하여 있는 경우 해당 파일을 도움말 링크에 표시하도록 한다.
        // helps = [
        //     {
        //         name: '도움말 이름',
        //         url: '도움말 URL'
        //     }
        // ]; 
        if (utils.isArray(helps)) {
            if (helps.length == 0) {
            } else if (helps.length == 1) {
                content.push(`    <i id="linkHelp" class="bi-question-square text-success" role="button" onclick="nsOBCon.env.showHelp('${helps[0]}');"></i>`);
            } else {
                content.push('<span class="dropdown">');
                content.push('  <i id="linkHelp" class="bi-question-square text-success zzdropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>');
                content.push('  <ul class="dropdown-menu" aria-labelledby="linkHelp">');
                helps.forEach(help => {
                    content.push(`    <li onclick="nsOBCon.env.showHelp('${help}');">&nbsp;&nbsp;${help.name}</li>`);
                });
                content.push('  </ul>');
                content.push('</span>');
            }
        }
        return content.join('');
    }

    displayContentTitle(title, settings=null, helps=null) {
        let content = [];

        // if (settings == null) {
        //     settings = [ { name: '설정', target: 'pageSetting' } ];
        // }
        // if (helps == null) {
        //     helps = [ { name: '도움말', action: 'linkHelp();' } ];
        // }

        content.push('<div id="contentTitle" class="d-flex">');
        content.push(`  <div class="p-2 bd-highlight">${title}</div>`);
  
        content.push('  <div class="p-2 bd-highlight ms-auto">');
        content.push('    <div id="progressSpinner" class="spinner-border spinner-border-sm text-success" role="status"></div>&nbsp;');
        content.push(this._showSettingAndHelp(settings, helps));
        content.push('  </div>');
        content.push('</div>');
        return content.join('');
    }

    displayContentTitleButton(title, buttons, settings=null, helps=null) {
        let content = [];

        // if (settings == null) { 
        //     settings = [ { name: '설정', target: 'pageSetting' } ];     
        // }
        // if (helps == null) {
        //     helps = [ { name: '도움말', action: 'linkHelp();' } ];
        // }

        content.push('<div id="contentTitle" class="d-flex">');
        content.push(`  <div class="p-2 bd-highlight">${title}</div>`);

        content.push('&nbsp;&nbsp;&nbsp;');   
        buttons.forEach(btn => {   
            if (typeof(btn.id) == 'undefined') {
                content.push(`<button type="button" class="btn btn-secondary btn-sm mb-1 obcon-title-button" onclick="${btn.action}">${btn.name}</button>&nbsp;`);
            } else {
                content.push(`<button type="button" class="btn btn-secondary btn-sm mb-1 obcon-title-button" id="${btn.id}" onclick="${btn.action}">${btn.name}</button>&nbsp;`);
            }
        });              
  
        content.push('  <div class="p-2 bd-highlight ms-auto">');
        content.push('    <div id="progressSpinner" class="spinner-border spinner-border-sm text-success" role="status"></div>&nbsp;');
        content.push(this._showSettingAndHelp(settings, helps));
        content.push('  </div>');
        content.push('</div>');  
        return content.join('');    
    }           
   
    displayContentTitleButton2(title, buttons, settings=null, helps=null, msgSave) {
        let content = [];   

        content.push('<div id="contentTitle" class="d-flex">');
        content.push(`  <div class="p-2 bd-highlight">${title}</div>`);

        content.push('&nbsp;&nbsp;&nbsp;');
        buttons.forEach(btn => {
            if (typeof(btn.id) == 'undefined') {
                content.push(`<button type="button" class="btn btn-secondary btn-sm mb-1 obcon-title-button" onclick="${btn.action}">${btn.name}</button>&nbsp;`);
            } else {
                content.push(`<button type="button" class="btn btn-secondary btn-sm mb-1 obcon-title-button" id="${btn.id}" onclick="${btn.action}">${btn.name}</button>&nbsp;`);
            }
        });    
        content.push('  <div class="p-2 bd-highlight ms-auto">');
        content.push('    <div id="progressSpinner" class="spinner-border spinner-border-sm text-success" role="status"></div>&nbsp;');
        content.push(this._showSettingAndHelp(settings, helps));
        content.push('  </div>');


        content.push('<div class="ps-3 pt-2 pb-2 input-group-prepend col-xs-3 col-sm-3 col-md-3 col-lg-3 col-xl-3 col-xxl-3">');
        content.push(`    <label class="input-group-text obcon-col" id="textApply" style="font-size: 13px; display: block; padding-top: 5px !important; ">${msgSave}</label>`);
        content.push('</div>');
        content.push('</div>');
        return content.join('');
    }

    displayContentError() { 
        let content = [];

        content.push('<div id="contentError" class="alert alert-danger alert-dismissible fade hide visually-hidden" role="alert">');
        content.push('<i class="bi-exclamation-triangle" role="button"></i>');
        // content.push('<i class="bi-exclamation-diamond" role="button"></i>');
        // content.push('<i class="bi-exclamation-octagon" role="button"></i>');
        // content.push('<i class="bi-bell" role="button"></i>');
        content.push('A simple danger alert—check it out!');
        content.push('<span class="badge bg-danger">Error</span>');
        content.push('<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>');
        content.push('</div>');
        return content.join('');
    }

    displayContentMenuButton(buttons, menu=null, isGroup=true) {
        let content = [];

        if (menu == null) {  
            if (isGroup) {
                content.push('<div class="btn-group mb-1" role="group">');
                buttons.forEach(btn => {
                    if (typeof(btn.id) == 'undefined') {
                        content.push(`    <button type="button" class="btn btn-secondary obcon-button" onclick="${btn.action}">${btn.name}</button>`);
                    } else {
                        content.push(`    <button type="button" class="btn btn-secondary obcon-button" id="${btn.id}" onclick="${btn.action}">${btn.name}</button>`);
                    }
                });
                content.push('</div>')
            } else {   
                buttons.forEach(btn => {
                    if (typeof(btn.id) == 'undefined') {
                        content.push(`<button type="button" class="btn btn-secondary mb-1 obcon-button" onclick="${btn.action}">${btn.name}</button>&nbsp;`);
                    } else {
                        content.push(`<button type="button" class="btn btn-secondary mb-1 obcon-button" id="${btn.id}" onclick="${btn.action}">${btn.name}</button>&nbsp;`);
                    }
                });    
            }
        } else {
            content.push('<div class="btn-group mb-1" role="group">');
            content.push('    <div class="dropdown">');
            content.push(`        <button type="button" class="btn btn-secondary dropdown-toggle obcon-button" id="${menu.id}" data-bs-toggle="dropdown" aria-expanded="false">${menu.name}</button>`);
            content.push(`        <ul class="dropdown-menu" aria-labelledby="${menu.id}">`);
            buttons.forEach(btn => {
                if (btn.name == '---') {
                    content.push('<div class="dropdown-divider"></div>');
                } else {
                    content.push(`            <li onclick="${btn.action}">&nbsp;&nbsp;${btn.name}</li>`);
                }
            });
            content.push('        </ul>');
            content.push('    </div>');          
            content.push('</div>');
        }
        return content.join('');
    }

    displayContentTabMenu(options) {
        let content = [];

        content.push(`<ul class="nav nav-tabs" id="${options.id}" role="tablist">`);
        options.tabs.forEach(tab => {
            content.push('  <li class="nav-item">');
            content.push(`    <a class="nav-link ${tab.active ? 'active':''}" id="${tab.id}-tab" data-toggle="tab" href="#${tab.id}"`);
            content.push(`       role="tab" aria-controls="${tab.id}" aria-selected="${tab.active ? 'true':'false'}">${tab.name}</a>`);
            content.push('  </li>');
        });
        content.push('</ul>');
        return content.join('');
    }

    displayContentTableButton(buttons, menu=null) {
        let content = [];

        if (menu == null) { 
            buttons.forEach(btn => {
                content.push('<button type="button" class="btn btn-outline-secondary btm-sm text-nowrap"');
                content.push(`        onclick="${btn.action}">${btn.name}</button>`);    
            });
        } else {
            content.push('<div class="dropdown">');
            content.push(`  <button type="button" class="btn btn-outline-secondary btm-sm text-nowrap dropdown-toggle" id="${menu.id}" data-bs-toggle="dropdown" aria-expanded="false">${menu.name}</button>`);
            content.push(`  <ul class="dropdown-menu" aria-labelledby="${menu.id}">`);
            buttons.forEach(btn => {
                content.push(`    <li onclick="${btn.action}">&nbsp;&nbsp;${btn.name}</li>`);
            });
            content.push('  </ul>');
            content.push('</div>');          
        }
        return content.join('');
    }
}

module.exports = Fields;