fineui/src/widget/dynamicdatetime/dynamicdatetime.popup.js

import { shortcut, Widget, createWidget, toPix, i18nText, createItems, print, isNull, isEmptyObject, isEmptyString, getDate, checkDateVoid, extend } from "@/core";
import { DynamicDateCombo, DynamicDateHelper } from "../dynamicdate";
import { TextButton, Tab } from "@/base";
import { DateCalendarPopup } from "../date/calendar";
import { DynamicDateTimeCombo } from "./dynamicdatetime.combo";

@shortcut()
export class DynamicDateTimePopup extends Widget {
    static xtype = "bi.dynamic_date_time_popup"

    constants = {
        tabHeight: 40,
        buttonHeight: 24,
    }

    props = {
        baseCls: "bi-dynamic-date-time-popup",
        width: 272,
        supportDynamic: true,
    };

    static EVENT_CHANGE = "EVENT_CHANGE"
    static BUTTON_OK_EVENT_CHANGE = "BUTTON_OK_EVENT_CHANGE"
    static BUTTON_lABEL_EVENT_CHANGE = "BUTTON_lABEL_EVENT_CHANGE"
    static BUTTON_CLEAR_EVENT_CHANGE = "BUTTON_CLEAR_EVENT_CHANGE"
    static EVENT_BEFORE_YEAR_MONTH_POPUPVIEW = "EVENT_BEFORE_YEAR_MONTH_POPUPVIEW"

    _init() {
        super._init(...arguments);
        const opts = this.options;
        this.storeValue = {
            type: DynamicDateCombo.Static,
        };
        createWidget({
            element: this,
            type: "bi.vertical",
            items: [{
                el: this._getTabJson(),
            }, {
                el: {
                    type: "bi.grid",
                    items: [
                        [{
                            type: "bi.text_button",
                            cls: "bi-high-light bi-split-top",
                            textHeight: toPix(BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, 1),
                            shadow: true,
                            text: i18nText("BI-Basic_Clear"),
                            listeners: [{
                                eventName: TextButton.EVENT_CHANGE,
                                action: () => {
                                    this.fireEvent(DynamicDateTimePopup.BUTTON_CLEAR_EVENT_CHANGE);
                                },
                            }],
                        }, {
                            type: "bi.text_button",
                            cls: "bi-split-left bi-split-right bi-high-light bi-split-top",
                            textHeight: toPix(BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, 1),
                            shadow: true,
                            text: i18nText("BI-Multi_Date_Today"),
                            disabled: this._checkTodayValid(),
                            ref: _ref => {
                                this.todayButton = _ref;
                            },
                            listeners: [{
                                eventName: TextButton.EVENT_CHANGE,
                                action: () => {
                                    this.fireEvent(DynamicDateTimePopup.BUTTON_lABEL_EVENT_CHANGE);
                                },
                            }],
                        }, {
                            type: "bi.text_button",
                            cls: "bi-high-light bi-split-top",
                            textHeight: toPix(BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, 1),
                            shadow: true,
                            text: i18nText("BI-Basic_OK"),
                            listeners: [{
                                eventName: TextButton.EVENT_CHANGE,
                                action: () => {
                                    const type = this.dateTab.getSelect();
                                    if (type === DynamicDateCombo.Dynamic) {
                                        this.dynamicPane.checkValidation(true) && this.fireEvent(DynamicDateTimePopup.BUTTON_OK_EVENT_CHANGE);
                                    } else {
                                        this.fireEvent(DynamicDateTimePopup.BUTTON_OK_EVENT_CHANGE);
                                    }
                                },
                            }],
                        }]
                    ],
                    height: BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT,
                },
            }],
        });
        this.setValue(opts.value);
    }

    _getTabJson() {
        const o = this.options;
        
        return {
            type: "bi.tab",
            logic: {
                dynamic: true,
            },
            ref: _ref => {
                this.dateTab = _ref;
            },
            tab: {
                type: "bi.linear_segment",
                invisible: !o.supportDynamic,
                cls: "bi-split-bottom",
                height: this.constants.tabHeight,
                items: createItems([{
                    text: i18nText("BI-Multi_Date_YMD"),
                    value: DynamicDateCombo.Static,
                }, {
                    text: i18nText("BI-Basic_Dynamic_Title"),
                    value: DynamicDateCombo.Dynamic,
                }], {
                    textAlign: "center",
                }),
            },
            cardCreator: v => {
                switch (v) {
                case DynamicDateCombo.Dynamic:
                    return {
                        type: "bi.dynamic_date_card",
                        cls: "dynamic-date-pane",
                        listeners: [{
                            eventName: "EVENT_CHANGE",
                            action: () => {
                                this._setInnerValue(this.year, v);
                            },
                        }],
                        ref: _ref => {
                            this.dynamicPane = _ref;
                        },
                        min: this.options.min,
                        max: this.options.max,
                    };
                case DynamicDateCombo.Static:
                default:
                    return {
                        type: "bi.vertical",
                        items: [{
                            type: "bi.date_calendar_popup",
                            behaviors: o.behaviors,
                            min: this.options.min,
                            max: this.options.max,
                            ref: _ref => {
                                this.ymd = _ref;
                            },
                            listeners: [{
                                eventName: DateCalendarPopup.EVENT_BEFORE_YEAR_MONTH_POPUPVIEW,
                                action: () => {
                                    this.fireEvent(DynamicDateTimePopup.EVENT_BEFORE_YEAR_MONTH_POPUPVIEW);
                                },
                            }],
                        }, {
                            el: {
                                type: "bi.dynamic_date_time_select",
                                cls: "bi-split-top",
                                ref: _ref => {
                                    this.timeSelect = _ref;
                                },
                                height: 40,
                            },
                        }],
                    };
                }
            },
            listeners: [{
                eventName: Tab.EVENT_CHANGE,
                action: () => {
                    const v = this.dateTab.getSelect();
                    const date = DynamicDateHelper.getCalculation(this.dynamicPane.getValue());
                    switch (v) {
                    case DynamicDateCombo.Static:
                        this.ymd.setValue({
                            year: date.getFullYear(),
                            month: date.getMonth() + 1,
                            day: date.getDate(),
                        });
                        this.timeSelect.setValue();
                        this._setInnerValue();
                        break;
                    case DynamicDateCombo.Dynamic:
                    default:
                        if (this.storeValue && this.storeValue.type === DynamicDateCombo.Dynamic) {
                            this.dynamicPane.setValue(this.storeValue.value);
                        } else {
                            this.dynamicPane.setValue({
                                year: 0,
                            });
                        }
                        this._setInnerValue();
                        break;
                    }
                },
            }],
        };
    }

    _setInnerValue() {
        if (this.dateTab.getSelect() === DynamicDateCombo.Static) {
            this.todayButton.setValue(i18nText("BI-Multi_Date_Today"));
            this.todayButton.setEnable(!this._checkTodayValid());
        } else {
            let date = DynamicDateHelper.getCalculation(this.dynamicPane.getInputValue());
            date = print(date, "%Y-%X-%d");
            this.todayButton.setValue(date);
            this.todayButton.setEnable(false);
        }
    }

    _checkValueValid(value) {
        return isNull(value) || isEmptyObject(value) || isEmptyString(value);
    }

    _checkTodayValid() {
        const o = this.options;
        const today = getDate();
        
        return !!checkDateVoid(today.getFullYear(), today.getMonth() + 1, today.getDate(), o.min, o.max)[0];
    }

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

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

    setValue(v) {
        this.storeValue = v;
        v = v || {};
        const type = v.type || DynamicDateCombo.Static;
        const value = v.value || v;
        this.dateTab.setSelect(type);
        switch (type) {
        case DynamicDateCombo.Dynamic:
            this.dynamicPane.setValue(value);
            this._setInnerValue();
            break;
        case DynamicDateCombo.Static:
        default:
            if (this._checkValueValid(value)) {
                const date = getDate();
                this.ymd.setValue({
                    year: date.getFullYear(),
                    month: date.getMonth() + 1,
                    day: date.getDate(),
                });
                this.timeSelect.setValue();
                this.todayButton.setValue(i18nText("BI-Multi_Date_Today"));
            } else {
                this.ymd.setValue(value);
                this.timeSelect.setValue({
                    hour: value.hour,
                    minute: value.minute,
                    second: value.second,
                });
                this.todayButton.setValue(i18nText("BI-Multi_Date_Today"));
            }
            this.todayButton.setEnable(!this._checkTodayValid());
            break;
        }
    }

    getValue() {
        const type = this.dateTab.getSelect();
        
        return {
            type,
            value: type === DynamicDateTimeCombo.Static ? extend(this.ymd.getValue(), this.timeSelect.getValue()) : this.dynamicPane.getValue(),
        };
    }
}