fineui/src/widget/datetimepane/datetimepane.js

import {
    VTapeLayout,
    CenterLayout,
    shortcut,
    Widget,
    createItems,
    i18nText,
    isNull,
    isEmptyObject,
    isEmptyString,
    isNotEmptyObject,
    getDate
} from "@/core";
import { LinearSegment } from "@/case";
import { Tab, TextButton, ButtonGroup } from "@/base";
import { StaticDateTimePaneCard } from "./card.static.datetimepane";
import { DynamicDateCard, DynamicDateCombo, DynamicDateHelper } from "../dynamicdate";
import { DynamicDatePane } from "../datepane";

@shortcut()
export class DynamicDateTimePane extends Widget {
    static xtype = "bi.dynamic_date_time_pane";

    static EVENT_CHANGE = "EVENT_CHANGE";
    static EVENT_BEFORE_YEAR_MONTH_POPUPVIEW = "EVENT_BEFORE_YEAR_MONTH_POPUPVIEW";

    static Static = 1;
    static Dynamic = 2;

    props = {
        baseCls: "bi-dynamic-date-pane",
        minDate: "1900-01-01",
        maxDate: "2099-12-31",
        supportDynamic: true,
    };

    render() {
        const o = this.options;

        return {
            type: VTapeLayout.xtype,
            items: [
                {
                    el: {
                        type: LinearSegment.xtype,
                        invisible: !o.supportDynamic,
                        cls: "bi-split-bottom",
                        height: 30,
                        items: createItems(
                            [
                                {
                                    text: i18nText("BI-Multi_Date_YMD"),
                                    value: DynamicDateTimePane.Static,
                                },
                                {
                                    text: i18nText("BI-Basic_Dynamic_Title"),
                                    value: DynamicDateTimePane.Dynamic,
                                }
                            ],
                            {
                                textAlign: "center",
                            }
                        ),
                        listeners: [
                            {
                                eventName: ButtonGroup.EVENT_CHANGE,
                                action: () => {
                                    const value = this.switcher.getValue()[0];
                                    let date;
                                    this.dateTab.setSelect(value);
                                    switch (value) {
                                    case DynamicDateTimePane.Static:
                                        date = DynamicDateHelper.getCalculation(this.dynamicPane.getValue());
                                        this.ymd.setValue({
                                            year: date.getFullYear(),
                                            month: date.getMonth() + 1,
                                            day: date.getDate(),
                                        });
                                        break;
                                    case DynamicDateTimePane.Dynamic:
                                        this.dynamicPane.setValue({
                                            year: 0,
                                        });
                                        break;
                                    default:
                                        break;
                                    }
                                    this.fireEvent(DynamicDateTimePane.EVENT_CHANGE);
                                },
                            }
                        ],
                        ref: _ref => {
                            this.switcher = _ref;
                        },
                    },
                    height: o.supportDynamic ? 30 : 0,
                },
                {
                    type: Tab.xtype,
                    ref: _ref => {
                        this.dateTab = _ref;
                    },
                    showIndex: DynamicDateTimePane.Static,
                    cardCreator: v => {
                        switch (v) {
                        case DynamicDateTimePane.Static:
                            return {
                                type: StaticDateTimePaneCard.xtype,
                                min: o.minDate,
                                max: o.maxDate,
                                behaviors: o.behaviors,
                                listeners: [
                                    {
                                        eventName: "EVENT_CHANGE",
                                        action: () => {
                                            this.fireEvent(DynamicDateTimePane.EVENT_CHANGE);
                                        },
                                    },
                                    {
                                        eventName: "EVENT_BEFORE_YEAR_MONTH_POPUPVIEW",
                                        action: () => {
                                            this.fireEvent(DynamicDateTimePane.EVENT_BEFORE_YEAR_MONTH_POPUPVIEW);
                                        },
                                    }
                                ],
                                ref: _ref => {
                                    this.ymd = _ref;
                                },
                            };
                        case DynamicDateTimePane.Dynamic:
                        default:
                            return {
                                type: VTapeLayout.xtype,
                                items: [
                                    {
                                        type: DynamicDateCard.xtype,
                                        min: o.minDate,
                                        max: o.maxDate,
                                        ref: _ref => {
                                            this.dynamicPane = _ref;
                                        },
                                    },
                                    {
                                        el: {
                                            type: CenterLayout.xtype,
                                            items: [
                                                {
                                                    type: TextButton.xtype,
                                                    cls: "bi-high-light bi-border-top",
                                                    shadow: true,
                                                    text: i18nText("BI-Basic_Clear"),
                                                    textHeight: 23,
                                                    listeners: [
                                                        {
                                                            eventName: TextButton.EVENT_CHANGE,
                                                            action: () => {
                                                                this.setValue();
                                                                this.fireEvent(DynamicDatePane.EVENT_CHANGE);
                                                            },
                                                        }
                                                    ],
                                                },
                                                {
                                                    type: TextButton.xtype,
                                                    cls: "bi-border-left bi-high-light bi-border-top",
                                                    textHeight: 23,
                                                    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(
                                                                                DynamicDatePane.EVENT_CHANGE
                                                                            );
                                                                } else {
                                                                    this.fireEvent(DynamicDatePane.EVENT_CHANGE);
                                                                }
                                                            },
                                                        }
                                                    ],
                                                }
                                            ],
                                        },
                                        height: 24,
                                    }
                                ],
                            };
                        }
                    },
                }
            ],
        };
    }

    created() {
        this.setValue(this.options.value);
    }

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

    _checkValue(v) {
        switch (v.type) {
        case DynamicDateCombo.Dynamic:
            return isNotEmptyObject(v.value);
        case DynamicDateCombo.Static:
        default:
            return true;
        }
    }

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

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

    setValue(v) {
        v = v || {};
        const type = v.type || DynamicDateTimePane.Static;
        const value = v.value || v;
        this.switcher.setValue(type);
        this.dateTab.setSelect(type);
        switch (type) {
        case DynamicDateTimePane.Dynamic:
            this.dynamicPane.setValue(value);
            break;
        case DynamicDateTimePane.Static:
        default:
            if (this._checkValueValid(value)) {
                const date = getDate();
                this.ymd.setValue({
                    year: date.getFullYear(),
                    month: date.getMonth() + 1,
                });
            } else {
                this.ymd.setValue(value);
            }
            break;
        }
    }

    getValue() {
        return {
            type: this.dateTab.getSelect(),
            value: this.dateTab.getValue(),
        };
    }
}