decision-webui-dcm/src/modules/pages/database/database.ts

import { Vtape, Right, Htape, Vertical, Left, CenterAdapt } from 'ui';
import { shortcut, store } from '@core/core';
import { FilterXtype } from './filter/filter';
import { DatebaseModel, DatebaseModelXtype } from './database.model';
import { DATEBASE_FILTER_TYPE, OTHER_JDBC } from '@constants/constant';
import { connectionType } from '@constants/env';
import { DatebaseTypeXtype } from './database_type/database_type';
import { getAllDatabaseTypes } from '../../app.service';
import { ButtonGroup, MultiSelectItem, SearchEditor } from '@fui/core';
export const DatebaseXtype = 'dec.dcm.datebase';
@shortcut(DatebaseXtype)
@store(DatebaseModelXtype)
export class Datebase extends BI.Widget {
    filter: ButtonGroup;
    search: SearchEditor;
    datebaseType: ButtonGroup;
    typeFilterWidget: any;
    internalWidget: MultiSelectItem;
    pluginWidget: MultiSelectItem;
    allDatabaseTypes = getAllDatabaseTypes();


    store: DatebaseModel['store'];
    model: DatebaseModel['model'];

    watch = {
        search: (search: string) => {
            if (search) {
                this.store.setFilter('');
                this.store.setDatebaseTypes(this.allDatabaseTypes.filter(item => item.text.toLowerCase().includes(search.toLowerCase())));
            } else if (!this.model.filter) {
                this.store.setFilter(DATEBASE_FILTER_TYPE.COMMONLY);
            }
            this.search.setValue(search);
        },
        filter: (filter: string) => {
            this.filter.setValue(filter);
            this.typeFilterWidget.setVisible(filter === DATEBASE_FILTER_TYPE.ALL);
            if (filter) {
                this.store.setSearch('');
                this.filterDatebaseByType(filter);
            }
            this.store.setInternal(true);
            this.store.setPlugin(true);
        },
        datebaseTypes: () => {
            this.datebaseType.populate(this.renderDatebaseType());
        },
        'isInternal || isPlugin': () => {
            this.internalWidget.setSelected(this.model.isInternal);
            this.pluginWidget.setSelected(this.model.isPlugin);
            if (this.model.filter === DATEBASE_FILTER_TYPE.ALL) {
                let datebaseTypes = [];
                if (this.model.isInternal) {
                    datebaseTypes = [...datebaseTypes, ...this.allDatabaseTypes.filter(item => item.internal)];
                }
                if (this.model.isPlugin) {
                    datebaseTypes = [...datebaseTypes, ...this.allDatabaseTypes.filter(item => !item.internal)];
                }
                this.store.setDatebaseTypes(datebaseTypes.filter(item => item.type !== connectionType.JNDI && item.type !== OTHER_JDBC));
            }
        },
    }

    mounted() {
        this.store.setFilter(DATEBASE_FILTER_TYPE.COMMONLY);
        this.store.setDatebaseTypeSelected('');
    }

    render() {
        return {
            type: Vtape,
            vgap: 10,
            hgap: 10,
            items: [
                {
                    el: {
                        type: Vertical,
                        items: [
                            {
                                type: Right,
                                items: [
                                    {
                                        type: BI.SearchEditor.xtype,
                                        $value: 'database-type',
                                        width: 300,
                                        watermark: BI.i18nText('BI-Basic_Search'),
                                        ref: (_ref: SearchEditor) => {
                                            this.search = _ref;
                                        },
                                        listeners: [
                                            {
                                                eventName: BI.SearchEditor.EVENT_CHANGE,
                                                action: () => {
                                                    this.store.setSearch(this.search.getValue());
                                                },
                                            },
                                        ],
                                    },
                                ],
                            },
                        ],
                    },
                    height: 25,
                },
                {
                    type: Htape,
                    items: [
                        {
                            el: {
                                type: BI.ButtonGroup.xtype,
                                cls: 'bi-border-right',
                                layouts: [{
                                    type: Vertical,
                                }],
                                ref: (_ref: ButtonGroup) => {
                                    this.filter = _ref;
                                },
                                items: [
                                    {
                                        type: FilterXtype,
                                        text: BI.i18nText('Dec-Dcm_Connection_Commonly'),
                                        value: DATEBASE_FILTER_TYPE.COMMONLY,
                                        selected: true,
                                    },
                                    {
                                        type: FilterXtype,
                                        text: BI.i18nText('Dec-Dcm_Connection_All'),
                                        value: DATEBASE_FILTER_TYPE.ALL,
                                    },
                                    {
                                        type: FilterXtype,
                                        text: BI.i18nText('Dec-Dcm_Connection_Other'),
                                        value: DATEBASE_FILTER_TYPE.OTHER,
                                    },
                                ],
                            },
                            width: 200,
                        },
                        {
                            type: Vtape,
                            items: [
                                {
                                    el: {
                                        type: Htape,
                                        hgap: 20,
                                        invisible: true,
                                        items: [
                                            {
                                                type: BI.Label.xtype,
                                                width: 70,
                                                textAlign: 'left',
                                                text: BI.i18nText('Dec-Dcm_Connection_Type_Filter'),
                                                title: BI.i18nText('Dec-Dcm_Connection_Type_Filter'),
                                            },
                                            {
                                                type: BI.MultiSelectItem.xtype,
                                                width: 80,
                                                selected: this.model.isInternal,
                                                text: BI.i18nText('Dec-Dcm_Connection_Support_Inner'),
                                                title: BI.i18nText('Dec-Dcm_Connection_Support_Inner'),
                                                ref: (_ref: MultiSelectItem) => {
                                                    this.internalWidget = _ref;
                                                },
                                                handler: () => {
                                                    this.store.setInternal(!this.model.isInternal);
                                                },
                                            },
                                            {
                                                type: BI.MultiSelectItem.xtype,
                                                width: 80,
                                                selected: this.model.isPlugin,
                                                text: BI.i18nText('Dec-Dcm_Connection_Support_Plugin'),
                                                title: BI.i18nText('Dec-Dcm_Connection_Support_Plugin'),
                                                ref: (_ref: MultiSelectItem) => {
                                                    this.pluginWidget = _ref;
                                                },
                                                handler: () => {
                                                    this.store.setPlugin(!this.model.isPlugin);
                                                },
                                            },
                                            {
                                                type: BI.Label.xtype,
                                                cls: 'bi-tips',
                                                textAlign: 'left',
                                                text: BI.i18nText('Dec-Dcm_Connection_Filter_Tip'),
                                                title: BI.i18nText('Dec-Dcm_Connection_Filter_Tip'),
                                            },
                                        ],
                                        ref: (_ref: any) => {
                                            this.typeFilterWidget = _ref;
                                        },
                                    },
                                    height: 24,
                                },
                                {
                                    type: BI.ButtonGroup.xtype,
                                    hgap: 15,
                                    layouts: [{
                                        type: Left,
                                        scrolly: true,
                                    }],
                                    items: this.renderDatebaseType(),
                                    ref: (_ref: ButtonGroup) => {
                                        this.datebaseType = _ref;
                                    },
                                },
                            ],
                        },
                    ],
                },
            ],
        };
    }

    private renderDatebaseType() {
        if (this.model.datebaseTypes.length === 0) {
            return this.renderNoResult();
        }

        return this.model.datebaseTypes.map(item => {
            return {
                type: DatebaseTypeXtype,
                text: item.text,
                value: item.databaseType,
                keyword: this.model.search,
                databaseType: item.databaseType,
                iconUrl: item.iconUrl,
                title: item.text,
            };
        });
    }

    private renderNoResult() {
        return [{
            type: CenterAdapt,
            height: '100%',
            width: '100%',
            items: [{
                type: BI.Label.xtype,
                cls: 'bi-tips',
                text: BI.i18nText('Dec-Dcm_Connection_No_Search_Result'),
            }],
        }];
    }

    private filterDatebaseByType(filter: string) {
        switch (filter) {
            case DATEBASE_FILTER_TYPE.COMMONLY:
                this.store.setDatebaseTypes(this.allDatabaseTypes.filter(item => item.commonly));
                break;
            case DATEBASE_FILTER_TYPE.OTHER:
                this.store.setDatebaseTypes(this.allDatabaseTypes.filter(item => item.type === connectionType.JNDI || item.type === OTHER_JDBC));
                break;
            default:
                this.store.setDatebaseTypes(this.allDatabaseTypes.filter(item => item.type !== connectionType.JNDI && item.type !== OTHER_JDBC));
                break;
        }
    }
}