fineui/src/widget/yearmonthinterval/yearmonthinterval.js

import {
    shortcut,
    HorizontalFillLayout,
    createWidget,
    i18nText,
    print,
    parseDateTime,
    checkDateVoid,
    isNotNull,
    checkDateLegal
} from "@/core";
import { Single, Label, Bubbles } from "@/base";
import { DynamicYearMonthCombo } from "../yearmonth/combo.yearmonth";

@shortcut()
export class YearMonthInterval extends Single {
    static xtype = "bi.year_month_interval";

    static EVENT_VALID = "EVENT_VALID";
    static EVENT_ERROR = "EVENT_ERROR";
    static EVENT_CHANGE = "EVENT_CHANGE";
    static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW";

    constants = {
        width: 25,
        lgap: 15,
        offset: -15,
        timeErrorCls: "time-error",
    };
    props = {
        extraCls: "bi-year-month-interval",
        minDate: "1900-01-01",
        maxDate: "2099-12-31",
        supportDynamic: true,
        height: 24,
    };

    render() {
        const o = this.options;
        o.value = o.value || {};
        this.left = this._createCombo(o.value.start, o.watermark?.start);
        this.right = this._createCombo(o.value.end, o.watermark?.end);

        return {
            type: HorizontalFillLayout.xtype,
            columnSize: ["fill", "", "fill"],
            items: [
                {
                    el: this.left,
                },
                {
                    el: {
                        type: Label.xtype,
                        height: o.height,
                        hgap: 5,
                        text: "-",
                        ref: _ref => {
                            this.label = _ref;
                        },
                    },
                },
                {
                    el: this.right,
                }
            ],
        };
    }

    _createCombo(v, watermark) {
        const o = this.options;
        const combo = createWidget({
            type: DynamicYearMonthCombo.xtype,
            supportDynamic: o.supportDynamic,
            height: o.height,
            minDate: o.minDate,
            maxDate: o.maxDate,
            behaviors: o.behaviors,
            value: v,
            watermark,
            listeners: [
                {
                    eventName: DynamicYearMonthCombo.EVENT_BEFORE_POPUPVIEW,
                    action: () => {
                        this.fireEvent(YearMonthInterval.EVENT_BEFORE_POPUPVIEW);
                    },
                }
            ],
        });
        combo.on(DynamicYearMonthCombo.EVENT_ERROR, () => {
            this._clearTitle();
            Bubbles.hide("error");
            this.element.removeClass(this.constants.timeErrorCls);
            this.fireEvent(YearMonthInterval.EVENT_ERROR);
        });

        combo.on(DynamicYearMonthCombo.EVENT_VALID, () => {
            this._checkValid();
        });

        combo.on(DynamicYearMonthCombo.EVENT_FOCUS, () => {
            this._checkValid();
        });

        combo.on(DynamicYearMonthCombo.EVENT_CONFIRM, () => {
            Bubbles.hide("error");
            const smallDate = this.left.getKey(),
                bigDate = this.right.getKey();
            if (
                this.left.isStateValid() &&
                this.right.isStateValid() &&
                this._check(smallDate, bigDate) &&
                this._compare(smallDate, bigDate)
            ) {
                this._setTitle(i18nText("BI-Time_Interval_Error_Text"));
                this.element.addClass(this.constants.timeErrorCls);
                this.fireEvent(YearMonthInterval.EVENT_ERROR);
            } else {
                this._clearTitle();
                this.element.removeClass(this.constants.timeErrorCls);
                this.fireEvent(YearMonthInterval.EVENT_CHANGE);
            }
        });

        return combo;
    }

    _dateCheck(date) {
        return (
            print(parseDateTime(date, "%Y-%x"), "%Y-%x") === date ||
            print(parseDateTime(date, "%Y-%X"), "%Y-%X") === date
        );
    }

    _checkVoid(obj) {
        const o = this.options;

        return !checkDateVoid(obj.year, obj.month, 1, o.minDate, o.maxDate)[0];
    }

    _check(smallDate, bigDate) {
        const smallObj = smallDate.match(/\d+/g),
            bigObj = bigDate.match(/\d+/g);

        let smallDate4Check = "";
        if (isNotNull(smallObj)) {
            smallDate4Check = `${smallObj[0] || ""}-${smallObj[1] || 1}`;
        }

        let bigDate4Check = "";
        if (isNotNull(bigObj)) {
            bigDate4Check = `${bigObj[0] || ""}-${bigObj[1] || 1}`;
        }

        return (
            this._dateCheck(smallDate4Check) &&
            checkDateLegal(smallDate4Check) &&
            this._checkVoid({
                year: smallObj[0],
                month: smallObj[1] || 1,
                day: 1,
            }) &&
            this._dateCheck(bigDate4Check) &&
            checkDateLegal(bigDate4Check) &&
            this._checkVoid({
                year: bigObj[0],
                month: bigObj[1] || 1,
                day: 1,
            })
        );
    }

    _compare(smallDate, bigDate) {
        smallDate = print(parseDateTime(smallDate, "%Y-%X"), "%Y-%X");
        bigDate = print(parseDateTime(bigDate, "%Y-%X"), "%Y-%X");

        return isNotNull(smallDate) && isNotNull(bigDate) && smallDate > bigDate;
    }

    _setTitle(v) {
        this.setTitle(v);
    }

    _clearTitle() {
        this.setTitle("");
    }

    _checkValid() {
        Bubbles.hide("error");
        const smallDate = this.left.getKey(),
            bigDate = this.right.getKey();
        if (
            this.left.isValid() &&
            this.right.isValid() &&
            this._check(smallDate, bigDate) &&
            this._compare(smallDate, bigDate)
        ) {
            this._setTitle(i18nText("BI-Time_Interval_Error_Text"));
            this.element.addClass(this.constants.timeErrorCls);
            Bubbles.show("error", i18nText("BI-Time_Interval_Error_Text"), this, {
                offsetStyle: "center",
            });
            this.fireEvent(YearMonthInterval.EVENT_ERROR);
        } else {
            this._clearTitle();
            this.element.removeClass(this.constants.timeErrorCls);
        }
    }

    setMinDate(minDate) {
        const o = this.options;
        o.minDate = minDate;
        this.left.setMinDate(minDate);
        this.right.setMinDate(minDate);
    }

    setMaxDate(maxDate) {
        const o = this.options;
        o.maxDate = maxDate;
        this.left.setMaxDate(maxDate);
        this.right.setMaxDate(maxDate);
    }

    setValue(date) {
        date = date || {};
        this.left.setValue(date.start);
        this.right.setValue(date.end);

        this._checkValid();
    }

    getValue() {
        return { start: this.left.getValue(), end: this.right.getValue() };
    }
}