fineui/src/widget/dynamicdate/dynamicdate.card.js

import { shortcut, Widget, i18nText, createItems, each, isNotNull, map, has, bind, last, extend, checkDateVoid, isNull, isNotEmptyString, parseDateTime, any } from "@/core";
import { ButtonGroup, Bubbles } from "@/base";
import { MultiSelectItem } from "@/case";
import { DynamicDateHelper } from "./dynamicdate.caculate";

@shortcut()
export class DynamicDateCard extends Widget {
    static xtype = "bi.dynamic_date_card";
    
    static TYPE = {
        YEAR: 1,
        QUARTER: 2,
        MONTH: 3,
        WEEK: 4,
        DAY: 5,
        WORK_DAY: 6,
    };
    static OFFSET = {
        CURRENT: 1,
        BEGIN: 2,
        END: 3,
    };

    props = {
        baseCls: "bi-dynamic-date-card",
    };

    render() {
        this.position = DynamicDateCard.OFFSET.CURRENT;
        
        return {
            type: "bi.vertical",
            items: [{
                el: {
                    type: "bi.label",
                    text: i18nText("BI-Multi_Date_Relative_Current_Time"),
                    textAlign: "left",
                    lgap: 10,
                },
                tgap: 10,
                bgap: 5,
            }, {
                type: "bi.button_group",
                ref: _ref => {
                    this.checkgroup = _ref;
                },
                chooseType: ButtonGroup.CHOOSE_TYPE_MULTI,
                lgap: 4,
                value: [DynamicDateCard.TYPE.YEAR],
                items: createItems([{
                    text: i18nText("BI-Basic_Year"),
                    value: DynamicDateCard.TYPE.YEAR,
                }, {
                    text: i18nText("BI-Basic_Single_Quarter"),
                    value: DynamicDateCard.TYPE.QUARTER,
                }, {
                    text: i18nText("BI-Basic_Month"),
                    value: DynamicDateCard.TYPE.MONTH,
                }, {
                    text: i18nText("BI-Basic_Week"),
                    value: DynamicDateCard.TYPE.WEEK,
                }, {
                    text: i18nText("BI-Basic_Day"),
                    value: DynamicDateCard.TYPE.DAY,
                }], {
                    type: "bi.multi_select_item",
                    logic: {
                        dynamic: true,
                    },
                    iconWrapperWidth: 26,
                }),
                layouts: [{
                    type: "bi.left",
                    rgap: 4,
                }],
                listeners: [{
                    eventName: ButtonGroup.EVENT_CHANGE,
                    action: () => {
                        const value = this.checkgroup.getValue();
                        if (value.length !== 0) {
                            this.workDayBox.setSelected(false);
                        }

                        const plainValue = {};
                        each(this.resultPane.getAllButtons(), (idx, button) => {
                            const value = button.getValue();
                            if (isNotNull(value.dateType)) {
                                plainValue[value.dateType] = {
                                    value: value.value,
                                    offset: value.offset,
                                };
                            }
                        });
                        this.resultPane.populate(this._getParamJson(map(this.checkgroup.getValue(), (idx, v) => {
                            const obj = {
                                dateType: v,
                            };
                            if (has(plainValue, v)) {
                                obj.value = plainValue[v].value;
                                obj.offset = plainValue[v].offset;
                            }
                            
                            return obj;
                        })));
                        this.position = DynamicDateCard.OFFSET.CURRENT;
                        this.fireEvent("EVENT_CHANGE");
                    },
                }],
            }, {
                type: "bi.vertical_adapt",
                lgap: 2,
                items: [{
                    el: {
                        type: "bi.multi_select_item",
                        iconWrapperWidth: 26,
                        ref: _ref => {
                            this.workDayBox = _ref;
                        },
                        logic: {
                            dynamic: true,
                        },
                        text: i18nText("BI-Basic_Work_Day"),
                        value: DynamicDateCard.TYPE.WORK_DAY,
                        listeners: [{
                            eventName: MultiSelectItem.EVENT_CHANGE,
                            action: () => {
                                if (this.workDayBox.isSelected()) {
                                    this.checkgroup.setValue();
                                }
                                this.resultPane.populate(this.workDayBox.isSelected() ? this._getParamJson([{
                                    dateType: DynamicDateCard.TYPE.WORK_DAY,
                                }]) : []);
                                this.position = DynamicDateCard.OFFSET.CURRENT;
                                this.fireEvent("EVENT_CHANGE");
                            },
                        }],
                    },
                }],
                ref: _ref => {
                    this.workDay = _ref;
                },
            }, {
                type: "bi.button_group",
                items: this._getParamJson([{
                    dateType: DynamicDateCard.TYPE.YEAR,
                }]),
                ref: _ref => {
                    this.resultPane = _ref;
                },
                layouts: [{
                    type: "bi.vertical",
                    bgap: 10,
                    hgap: 10,
                }],
            }],
        };
    }

    _getParamJson(values, positionValue) {
        const items = map(values, (idx, value) => {
            return {
                el: {
                    type: "bi.dynamic_date_param_item",
                    validationChecker: bind(this._checkDate, this),
                    dateType: value.dateType,
                    value: value.value,
                    offset: value.offset,
                    listeners: [{
                        eventName: "EVENT_CHANGE",
                        action: () => {
                            this.fireEvent("EVENT_CHANGE");
                        },
                    }, {
                        eventName: "EVENT_INPUT_CHANGE",
                        action () {
                            Bubbles.hide("dynamic-date-error");
                        },
                    }],
                },
                tgap: idx === 0 ? 5 : 0,
            };
        });

        if (values.length === 1 && values[0].dateType === DynamicDateCard.TYPE.DAY) {
            const comboItems = this._getText(DynamicDateCard.TYPE.MONTH);
            comboItems[0].text = i18nText("BI-Basic_Empty");
            items.push({
                type: "bi.text_value_combo",
                height: BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT,
                items: comboItems,
                container: null,
                value: positionValue || DynamicDateCard.OFFSET.CURRENT,
                ref: _ref => {
                    this.textValueCombo = _ref;
                },
                listeners: [{
                    eventName: "EVENT_CHANGE",
                    action: () => {
                        this.position = this.textValueCombo.getValue()[0];
                        this.textValueCombo.setValue(this.position);
                        this.fireEvent("EVENT_CHANGE");
                    },
                }],
            });
        } else {
            if (values.length !== 0 && last(values).dateType !== DynamicDateCard.TYPE.DAY && last(values).dateType !== DynamicDateCard.TYPE.WORK_DAY) {
                items.push({
                    type: "bi.text_value_combo",
                    height: BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT,
                    container: null,
                    items: this._getText(last(values).dateType),
                    value: positionValue || DynamicDateCard.OFFSET.CURRENT,
                    ref: _ref => {
                        this.textValueCombo = _ref;
                    },
                    listeners: [{
                        eventName: "EVENT_CHANGE",
                        action: () => {
                            this.position = this.textValueCombo.getValue()[0];
                            this.textValueCombo.setValue(this.position);
                            this.fireEvent("EVENT_CHANGE");
                        },
                    }],
                });
            }
        }

        return items;
    }

    _checkDate(obj) {
        const o = this.options;
        const date = DynamicDateHelper.getCalculation(extend(this._getValue(), this._digestDateTypeValue(obj)));

        return !checkDateVoid(date.getFullYear(), date.getMonth() + 1, date.getDate(), o.min, o.max)[0];
    }

    _getText(lastValue) {
        switch (lastValue) {
        case DynamicDateCard.TYPE.YEAR:
            return [{
                text: i18nText("BI-Basic_Current_Day"),
                value: DynamicDateCard.OFFSET.CURRENT,
            }, {
                text: i18nText("BI-Basic_Year_Begin"),
                value: DynamicDateCard.OFFSET.BEGIN,
            }, {
                text: i18nText("BI-Basic_Year_End"),
                value: DynamicDateCard.OFFSET.END,
            }];
        case DynamicDateCard.TYPE.QUARTER:
            return [{
                text: i18nText("BI-Basic_Current_Day"),
                value: DynamicDateCard.OFFSET.CURRENT,
            }, {
                text: i18nText("BI-Basic_Quarter_Begin"),
                value: DynamicDateCard.OFFSET.BEGIN,
            }, {
                text: i18nText("BI-Basic_Quarter_End"),
                value: DynamicDateCard.OFFSET.END,
            }];
        case DynamicDateCard.TYPE.MONTH:
            return [{
                text: i18nText("BI-Basic_Current_Day"),
                value: DynamicDateCard.OFFSET.CURRENT,
            }, {
                text: i18nText("BI-Basic_Month_Begin"),
                value: DynamicDateCard.OFFSET.BEGIN,
            }, {
                text: i18nText("BI-Basic_Month_End"),
                value: DynamicDateCard.OFFSET.END,
            }];
        case DynamicDateCard.TYPE.WEEK:
        default:
            return [{
                text: i18nText("BI-Basic_Current_Day"),
                value: DynamicDateCard.OFFSET.CURRENT,
            }, {
                text: i18nText("BI-Basic_Week_Begin"),
                value: DynamicDateCard.OFFSET.BEGIN,
            }, {
                text: i18nText("BI-Basic_Week_End"),
                value: DynamicDateCard.OFFSET.END,
            }];
        }
    }

    _createValue(type, v) {
        return {
            dateType: type,
            value: Math.abs(v),
            offset: v > 0 ? 1 : 0,
        };
    }

    _digestDateTypeValue(value) {
        const valueMap = {};
        switch (value.dateType) {
        case DynamicDateCard.TYPE.YEAR:
            valueMap.year = (value.offset === 0 ? -value.value : +value.value);
            break;
        case DynamicDateCard.TYPE.QUARTER:
            valueMap.quarter = (value.offset === 0 ? -value.value : +value.value);
            break;
        case DynamicDateCard.TYPE.MONTH:
            valueMap.month = (value.offset === 0 ? -value.value : +value.value);
            break;
        case DynamicDateCard.TYPE.WEEK:
            valueMap.week = (value.offset === 0 ? -value.value : +value.value);
            break;
        case DynamicDateCard.TYPE.DAY:
            valueMap.day = (value.offset === 0 ? -value.value : +value.value);
            break;
        case DynamicDateCard.TYPE.WORK_DAY:
            valueMap.workDay = (value.offset === 0 ? -value.value : +value.value);
            break;
        default:
            break;
        }
        if (isNull(value.dateType)) {
            valueMap.position = this.position || DynamicDateCard.OFFSET.CURRENT;
        }
        
        return valueMap;
    }

    setMinDate(minDate) {
        if (isNotEmptyString(this.options.min)) {
            this.options.min = minDate;
        }
    }

    setMaxDate(maxDate) {
        if (isNotEmptyString(this.options.max)) {
            this.options.max = maxDate;
        }
    }

    setValue(v) {
        v = v || {};
        this.position = v.position || DynamicDateCard.OFFSET.CURRENT;
        const values = [];
        const valuesItems = [];
        if (isNotNull(v.year)) {
            values.push(DynamicDateCard.TYPE.YEAR);
            valuesItems.push(this._createValue(DynamicDateCard.TYPE.YEAR, v.year));
        }
        if (isNotNull(v.quarter)) {
            values.push(DynamicDateCard.TYPE.QUARTER);
            valuesItems.push(this._createValue(DynamicDateCard.TYPE.QUARTER, v.quarter));
        }
        if (isNotNull(v.month)) {
            values.push(DynamicDateCard.TYPE.MONTH);
            valuesItems.push(this._createValue(DynamicDateCard.TYPE.MONTH, v.month));
        }
        if (isNotNull(v.week)) {
            values.push(DynamicDateCard.TYPE.WEEK);
            valuesItems.push(this._createValue(DynamicDateCard.TYPE.WEEK, v.week));
        }
        if (isNotNull(v.day)) {
            values.push(DynamicDateCard.TYPE.DAY);
            valuesItems.push(this._createValue(DynamicDateCard.TYPE.DAY, v.day));
        }
        if (isNotNull(v.workDay)) {
            values.push(DynamicDateCard.TYPE.WORK_DAY);
            valuesItems.push(this._createValue(DynamicDateCard.TYPE.WORK_DAY, v.workDay));
        }
        this.checkgroup.setValue(values);
        this.workDayBox.setSelected(isNotNull(v.workDay));
        this.resultPane.populate(this._getParamJson(valuesItems, v.position));
    }

    _getValue() {
        const valueMap = {};
        const selectValues = this.checkgroup.getValue();
        const buttons = this.resultPane.getAllButtons();
        if (selectValues.length !== 0) {
            each(buttons, (idx, button) => {
                const value = button.getValue();
                extend(valueMap, this._digestDateTypeValue(value));
            });
        }
        if (this.workDayBox.isSelected()) {
            const value = buttons[0].getValue();
            valueMap.workDay = (value.offset === 0 ? -value.value : +value.value);
        }

        return valueMap;
    }

    _getErrorText() {
        const o = this.options;
        const start = parseDateTime(o.min, "%Y-%X-%d");
        const end = parseDateTime(o.max, "%Y-%X-%d");

        return i18nText("BI-Basic_Date_Range_Error",
            start.getFullYear(),
            start.getMonth() + 1,
            start.getDate(),
            end.getFullYear(),
            end.getMonth() + 1,
            end.getDate()
        );
    }

    getValue() {
        return this.checkValidation() ? this._getValue() : {};
    }

    getInputValue() {
        return this._getValue();
    }

    checkValidation(show) {
        const buttons = this.resultPane.getAllButtons();
        let errorText;
        let invalid = any(buttons, (idx, button) => button.checkValidation && !button.checkValidation());
        if (invalid) {
            errorText = i18nText("BI-Please_Input_Natural_Number");
        } else {
            invalid = !this._checkDate(this._getValue());
            errorText = this._getErrorText();
        }
        invalid && show && Bubbles.show("dynamic-date-error", errorText, this.resultPane);

        return !invalid;
    }
}