forked from fanruan/demo-tabledata-redis
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
173 lines
5.8 KiB
173 lines
5.8 KiB
import { shortcut, store } from '@core/core'; |
|
import { ListItem } from './list_item'; |
|
import { TableModelModel } from './table_list.model'; |
|
import { fineServletURL } from '@constants/env'; |
|
import { DatabaseIndex } from '../components/database_index/database_index'; |
|
|
|
@shortcut() |
|
@store(TableModelModel) |
|
export class TableList extends BI.Widget { |
|
static xtype = 'dec.dcm.connection.plugin.redis.table_list' |
|
|
|
store: TableModelModel['store'] |
|
model: TableModelModel['model'] |
|
|
|
databaseIndex: DatabaseIndex; |
|
buttonGroup: any; |
|
connectionTextValue: any; |
|
searchText: any; |
|
|
|
props = { |
|
database: '', |
|
value: { |
|
datasetData: { |
|
orderValue: 0, |
|
}, |
|
}, |
|
} |
|
|
|
watch = { |
|
connections: () => { |
|
this.connectionTextValue.populate(this.renderConnectionList()); |
|
const name = this.model.connections.length > 0 ? this.model.connections[0] : ''; |
|
this.connectionTextValue.setValue(name); |
|
this.store.setSelectedConnection(name); |
|
}, |
|
'selectedConnection || search || orderValue': () => { |
|
this.store.initTableList(); |
|
}, |
|
tables: (tables: string[]) => { |
|
this.buttonGroup.populate(this.renderTableList()); |
|
}, |
|
} |
|
|
|
render() { |
|
const { orderValue = 0 } = this.options.value.datasetData || {}; |
|
const inputType = typeof orderValue === 'string' ? 'formula' : 'int'; |
|
|
|
return { |
|
type: BI.VTapeLayout.xtype, |
|
hgap: 10, |
|
bgap: 5, |
|
items: [{ |
|
el: { |
|
type: BI.HTapeLayout.xtype, |
|
items: [{ |
|
type: BI.TextValueCombo.xtype, |
|
ref: (_ref: any) => { |
|
this.connectionTextValue = _ref; |
|
}, |
|
items: [], |
|
listeners: [{ |
|
eventName: BI.TextValueCombo.EVENT_CHANGE, |
|
action: () => { |
|
const name = this.connectionTextValue.getValue()[0]; |
|
this.store.setSelectedConnection(name); |
|
}, |
|
}], |
|
}, { |
|
el: { |
|
type: BI.IconButton.xtype, |
|
cls: 'redis-site-font', |
|
title: BI.i18nText('Plugin-Redis_Data_Connection'), |
|
handler: () => { |
|
window.location.href = `${fineServletURL}#management/connection`; |
|
}, |
|
}, |
|
width: 25, |
|
}, { |
|
el: { |
|
type: BI.IconButton.xtype, |
|
cls: 'redis-refresh-font', |
|
title: BI.i18nText('Plugin-Redis_Refresh'), |
|
handler: () => { |
|
this.store.initData(); |
|
}, |
|
}, |
|
width: 25, |
|
}], |
|
}, |
|
height: 25, |
|
}, { |
|
el: { |
|
type: BI.HTapeLayout.xtype, |
|
items: [{ |
|
el: { |
|
type: BI.Label.xtype, |
|
text: BI.i18nText('Plugin-Redis_Index'), |
|
textAlign: 'left', |
|
}, |
|
width: 24, |
|
}, { |
|
type: DatabaseIndex.xtype, |
|
value: orderValue, |
|
inputType, |
|
ref: (_ref: any) => { |
|
this.databaseIndex = _ref; |
|
}, |
|
width: 24, |
|
height: 22, |
|
}, { |
|
type: BI.TextEditor.xtype, |
|
height: 24, |
|
watermark: BI.i18nText('Plugin-Redis_Keys_Pattern'), |
|
ref: (_ref: any) => { |
|
this.searchText = _ref; |
|
}, |
|
}, { |
|
el: { |
|
type: BI.Button.xtype, |
|
minWidth: 50, |
|
text: BI.i18nText('Plugin-Redis_Keys_Pattern_Search'), |
|
handler: () => { |
|
this.store.setSearch(this.searchText.getValue(), this.databaseIndex.getValue()); |
|
}, |
|
}, |
|
width: 50, |
|
}], |
|
}, |
|
height: 25, |
|
}, { |
|
type: BI.VTapeLayout.xtype, |
|
items: [{ |
|
type: BI.ButtonGroup.xtype, |
|
chooseType: BI.Selection.None, |
|
layouts: [{ |
|
type: BI.VerticalLayout.xtype, |
|
}], |
|
items: [], |
|
ref: (_ref: any) => { |
|
this.buttonGroup = _ref; |
|
}, |
|
}], |
|
}], |
|
}; |
|
} |
|
|
|
private renderConnectionList() { |
|
return this.model.connections.map(item => { |
|
return { |
|
text: item, |
|
value: item, |
|
}; |
|
}); |
|
} |
|
|
|
private renderTableList() { |
|
return this.model.tables.map(item => { |
|
return { |
|
type: ListItem.xtype, |
|
text: item, |
|
value: item, |
|
}; |
|
}); |
|
} |
|
|
|
mounted() { |
|
this.store.initData(); |
|
} |
|
|
|
public getSelectedDatabase() { |
|
return this.model.selectedConnection; |
|
} |
|
}
|
|
|