ucan-ext-js-kitchen-sink
Version:
my-ext-gen-app description for Ext JS app MyExtGenApp
344 lines (337 loc) • 10.7 kB
JavaScript
Ext.define('UCAN.shareComponent.src.FloatingShareContainer', {
extend: 'Ext.container.Container',
alias: 'widget.floatingShareContainer',
config: {
availableAccounts: null,
availableGroups: null,
selectedShare: 'groups',
translator: null,
segmentedButtonStyle: 'space'
},
twoWayBindable: {
availableAccounts: true,
availableGroups: true,
myGroups: true,
myAccountsGroups: true,
selectedShare: true
},
publishes: ['availableAccounts', 'availableGroups', 'selectedShare', 'translator', 'segmentedButtonStyle'],
reference: 'floatingShare',
cls: 'js-ucan-floating-share-container ucan-floating-share-container',
minWidth: '500px',
minHeight: '500px',
floated: true,
closable: false,
focusable: true,
viewModel: true,
shadow: true,
border: true,
tabIndex: 1,
layout: 'vbox',
listeners: {
focusleave: 'destroyContainer'
},
items: [
{
xtype: 'segmentedbutton',
defaultUI: 'mainNavButton',
allowMultiple: false,
allowDepress: false,
cls: 'js-ucan-floating-share-container-segmented-button-selected-share',
items: [
{
cls: 'js-ucan-floating-share-container-button-groups',
handler: 'onShowGroups',
pressed: true,
value: 'groups',
bind: {
text: '{translator.groups}'
}
},
{
cls: 'js-ucan-floating-share-container-button-users',
handler: 'onShowUsers',
pressed: false,
value: 'accounts',
bind: {
text: '{translator.users}'
}
}
]
},
{
xtype: 'formpanel',
items: [
{
xtype: 'radiogroup',
itemId: 'radioFilters',
cls: 'radio-group-filters',
listeners: {
change: 'onSwitchFilter'
},
viewModel: {
formulas: {
groupsDisabled: function() {
return Ext.ComponentQuery.query('[cls~=js-ucan-floating-share-container-segmented-button-selected-share]')[0].getValue()
=== 'accounts';
}
}
},
items: [
{
name: 'rb',
value: 'my-directories',
labelWidth: 'auto',
bind: {
label: '{translator.my_directories}'
}
},
{
name: 'rb',
value: 'my-groups',
checked: true,
labelWidth: 'auto',
cls: 'ucan-radio-filters-margin-left',
bind: {
label: '{translator.my_groups}',
disabled: '{groupsDisabled}'
}
},
{
name: 'rb',
value: 'all',
cls: 'ucan-radio-filters-margin-left',
labelWidth: 'auto',
bind: {
label: '{translator.all}'
}
}
]
}
]
},
{
xtype: 'searchfield',
cls: 'js-ucan-floating-share-container-searchfield',
listeners: {
change: 'filterShares'
},
bind: {
placeholder: '{translator.shares_filter}'
}
},
{
flex: 1,
xtype: 'container',
cls: 'js-ucan-floating-share-container-container-selected-share',
layout: 'card',
items: [
{
xtype: 'grid',
infinite: true,
height: '100%',
cls: 'js-ucan-floating-share-container-grid-available-accounts',
columnMenu: UCAN.shareComponent.src.Util.getTranslatedGridColumnMenuConfiguration('floatingShare'),
columnsMenuItem: UCAN.shareComponent.src.Util.getTranslatedGridColumnMenuItemConfiguration('floatingShare'),
plugins: {
listpaging: {
autoPaging: true
}
},
bind: {
loadingText: '{translator.loading_data}',
emptyText: '{translator.empty_text}'
},
columns: [
{
dataIndex: 'id',
flex: 1,
bind: {
text: '{translator.id}'
},
listeners: {
tap: 'onColumnTap'
}
},
{
dataIndex: 'firstName',
flex: 2,
bind: {
text: '{translator.first_name}'
},
listeners: {
tap: 'onColumnTap'
}
},
{
dataIndex: 'lastName',
flex: 2,
bind: {
text: '{translator.last_name}'
},
listeners: {
tap: 'onColumnTap'
}
},
{
bind: {
text: '{translator.rights}'
},
cell: {
xtype: 'widgetcell',
viewModel: {
formulas: {
readPress: function(get) {
const record = get('cell.record');
return record.get('read');
},
writePress: function(get) {
const record = get('cell.record');
return record.get('write');
}
}
},
publishes: 'record',
reference: 'cell',
widget: {
xtype: 'container',
layout: 'hbox',
items: [
{
xtype: 'button',
handler: 'toggleRead',
iconCls: 'x-fa fa-eye',
cls: 'js-ucan-floating-share-container-button-read',
enableToggle: true,
bind: {
pressed: '{readPress}',
tooltip: '{translator.read_access_toggle}'
}
},
{
xtype: 'button',
handler: 'toggleWrite',
iconCls: 'x-fa fa-pen-square',
cls: 'js-ucan-floating-share-container-button-write',
enableToggle: true,
bind: {
pressed: '{writePress}',
tooltip: '{translator.write_access_toggle}'
}
}
]
}
}
}
]
},
{
xtype: 'grid',
infinite: true,
minHeight: '300px',
cls: 'js-ucan-floating-share-container-grid-available-groups',
columnMenu: UCAN.shareComponent.src.Util.getTranslatedGridColumnMenuConfiguration('floatingShare'),
columnsMenuItem: UCAN.shareComponent.src.Util.getTranslatedGridColumnMenuItemConfiguration('floatingShare'),
plugins: {
listpaging: {
autoPaging: true
}
},
columns: [
{
dataIndex: 'id',
flex: 1,
bind: {
text: '{translator.id}'
},
listeners: {
tap: 'onColumnTap'
}
},
{
dataIndex: 'name',
flex: 2,
bind: {
text: '{translator.group_name}'
},
listeners: {
tap: 'onColumnTap'
}
},
{
bind: {
text: '{translator.rights}'
},
cell: {
xtype: 'widgetcell',
publishes: 'record',
reference: 'cell',
viewModel: {
formulas: {
readPress: function(get) {
const record = get('cell.record');
return record.get('read');
},
writePress: function(get) {
const record = get('cell.record');
return record.get('write');
}
}
},
widget: {
xtype: 'container',
layout: 'hbox',
items: [
{
xtype: 'button',
handler: 'toggleRead',
iconCls: 'x-fa fa-eye',
cls: 'js-ucan-floating-share-container-button-read',
enableToggle: true,
bind: {
pressed: '{readPress}',
tooltip: '{translator.read_access_toggle}'
}
},
{
xtype: 'button',
handler: 'toggleWrite',
iconCls: 'x-fa fa-pen-square',
cls: 'js-ucan-floating-share-container-button-write',
enableToggle: true,
bind: {
pressed: '{writePress}',
tooltip: '{translator.write_access_toggle}'
}
}
]
}
}
}
]
}
]
}
],
updateTranslator: function(config) {
const accountsGrid = this.down('[cls~=js-ucan-floating-share-container-grid-available-accounts]');
const groupsGrid = this.down('[cls~=js-ucan-floating-share-container-grid-available-groups]');
UCAN.shareComponent.src.Util.setAccountsGroupsGridTranslation(accountsGrid, groupsGrid, config);
},
updateSegmentedButtonStyle: function(config) {
this.down('[cls~=js-ucan-floating-share-container-segmented-button-selected-share]')
.setCls(
'js-ucan-floating-share-container-segmented-button-selected-share ucan-floating-share-container-segmented-button-selected-share-'
+ config);
},
updateSelectedShare: function(config) {
this.down('[cls~=js-ucan-floating-share-container-container-selected-share]').setActiveItem(config === 'groups' ? 1 : 0);
this.down('[cls~=js-ucan-floating-share-container-segmented-button-selected-share]').setValue(config);
},
updateAvailableAccounts: function(config) {
this.down('[cls~=js-ucan-floating-share-container-grid-available-accounts]').setStore(config);
},
updateAvailableGroups: function(config) {
this.down('[cls~=js-ucan-floating-share-container-grid-available-groups]').setStore(config);
}
});