ucan-ext-js-kitchen-sink/packages/local/shareComponent/src/ShareContainer.js

my-ext-gen-app description for Ext JS app MyExtGenApp

Ext.define('UCAN.shareComponent.src.ShareContainer', {
  extend: 'Ext.Container',
  alias: 'widget.shareContainer',

  flex: 1,
  scrollable: true,
  defaultListenerScope: this,
  config: {
    availableAccounts: null,
    availableGroups: null,
    allAccounts: null,
    associatedShares: null,
    translator: null,
    chipViewMaxWidth: 400,
    disableExpandButton: false,
    segmentedButtonStyle: 'space',
    owner: null
  },

  twoWayBindable: {
    associatedShares: true,
    disableExpandButton: true
  },
  height: 'max-content',
  viewModel: {
    stores: {
      associatedGroups: {},
      associatedAccounts: {}
    }
  },
  items: [
    {
      layout: 'vbox',
      flex: 1,
      items: [
        {
          xtype: 'displayfield',
          cls: 'js-ucan-share-container-displayfield-owner ucan-share-container-displayfield-owner',
          bind: {
            html: '{translator.owner}: {ownerString}'
          }
        },
        {
          layout: 'hbox',
          items: [
            {
              xtype: 'chipview',
              cls: 'js-ucan-share-container-chip-view-compact ucan-share-container-chip-view-compact',
              selectable: false,
              closable: true,
              closeHandler: 'removeShare',
              focusedCls: '',
              displayTpl: [
                '<tpl for=".">',
                '<div ',
                'class="ucan-share-container-chipview-chip">',
                '{name} ',
                '<tpl if="read"><i class="fas fa-eye"></i> </tpl><tpl if="write"><i class="fas fa-pen-square"></i> </tpl>',
                '</div>',
                '</tpl>',
                {
                  disableFormats: true
                }
              ],
              valueField: 'id'
            }
          ]
        },
        {
          cls: 'js-ucan-share-container-container-placeholder',
          layout: 'hbox',
          alignSelf: 'start',
          items: [
            {
              xtype: 'component',
              cls: 'ucan-share-container-component-placeholder',
              bind: {
                html: '{translator.accounts}'
              }
            },
            {
              xtype: 'component',
              cls: 'ucan-share-container-component-placeholder',
              bind: {
                html: '{translator.groups}'
              }
            },
            {
              xtype: 'spacer'
            }
          ]
        },
        {
          xtype: 'button',
          alignSelf: 'start',
          iconCls: 'x-fa fa-plus',
          text: 'Freigabe',
          cls: 'js-ucan-share-container-button-toggle-floating-share',
          handler: 'showShareContainer'
        }
      ]
    }
  ],

  onShowUsers: function() {
    if (!this.inAssociationGrid()) {
      const floatingShareContainer = Ext.ComponentQuery.query('[cls~=js-ucan-floating-share-container]')[0];
      SinkUtil.downClassFromView(floatingShareContainer, 'js-ucan-floating-share-container-container-selected-share').setActiveItem(0);
      SinkUtil.downClassFromView(floatingShareContainer, 'radio-group-filters').getItems().get(0).setChecked(1);
      const store = this.getCurrentShare();
      const searchValue = SinkUtil.downClassFromView(floatingShareContainer, 'js-ucan-floating-share-container-searchfield').getValue();
      const grid = SinkUtil.downClassFromView(floatingShareContainer, 'js-ucan-floating-share-container-grid-available-accounts');
      grid.setMasked(
          {
            xtype: 'loadmask',
            message: this.getTranslator().get('loading')
          }
      );
      grid.setStore(store);
      this.onFilterShares(searchValue, store, grid);
    }
  },

  onShowGroups: function() {
    if (!this.inAssociationGrid()) {
      const floatingShareContainer = Ext.ComponentQuery.query('[cls~=js-ucan-floating-share-container]')[0];
      SinkUtil.downClassFromView(floatingShareContainer, 'radio-group-filters').getItems().get(1).show();
      SinkUtil.downClassFromView(floatingShareContainer, 'radio-group-filters').getItems().get(1).setChecked(1);
      SinkUtil.downClassFromView(floatingShareContainer, 'js-ucan-floating-share-container-container-selected-share').setActiveItem(1);
      const store = this.getCurrentShare();
      const searchValue = SinkUtil.downClassFromView(floatingShareContainer, 'js-ucan-floating-share-container-searchfield').getValue();
      const grid = SinkUtil.downClassFromView(floatingShareContainer, 'js-ucan-floating-share-container-grid-available-groups');
      grid.setMasked(
          {
            xtype: 'loadmask',
            message: this.getTranslator().get('loading')
          }
      );
      grid.setStore(store);
      this.onFilterShares(searchValue, store, grid);
    }
  },

  showShareContainer: function(button) {
    if (button.getPressed()) {
      button.setPressed(false);
      const floatingShareContainerQuery = Ext.ComponentQuery.query('[cls~=js-ucan-floating-share-container]');
      if (!Ext.isEmpty(floatingShareContainerQuery)) {
        floatingShareContainerQuery.forEach(container => container.destroy());
      }
    } else {
      button.setPressed(true);
      const selectedShare = !Ext.isEmpty(this.down('[cls~=js-ucan-share-container-segmented-button-selected-share]'))
          ? this.down('[cls~=js-ucan-share-container-segmented-button-selected-share]').getValue() : 'groups';
      const sharePanel = Ext.create('widget.floatingShareContainer', {
        ownerCmp: this,
        availableAccounts: this.getAvailableAccounts(),
        availableGroups: this.getAvailableGroups(),
        translator: this.getTranslator(),
        segmentedButtonStyle: this.getSegmentedButtonStyle(),
        selectedShare: selectedShare
      });
      SinkUtil.downClassFromView(sharePanel, 'radio-group-filters').getItems().get(1).setHidden(selectedShare !== 'groups');
      SinkUtil.downClassFromView(sharePanel, 'radio-group-filters').getItems().get(0).setChecked(1);
      this.textFilterShares('');
      this.showButton = button;
      const position = button.element.getBox();
      const viewport = window.visualViewport;
      const alignment = this.calculateAlignmentForFloatingPanel(position, viewport);
      sharePanel.showBy(button, alignment);
      sharePanel.focus(button, 200);
    }
  },

  getRecordFromButton(button) {
    return button.up().up().getRecord();
  },

  getRecordIdFromButton(button) {
    return !Ext.isEmpty(this.getRecordFromButton(button)) ? this.getRecordFromButton(button).get('id') : null;
  },

  toggleRead: function(button) {
    const record = this.getRecordFromButton(button);
    if (record.get('id') !== this.getOwner()) {
      if (!button.isPressed()) { // remove read and write access
        record.set('read', false);
        record.set('write', false);
        this.getAssociatedShares().remove(record);
        this.getAssociatedObjects().remove(record);
        if (this.inAssociationGrid()) {
          this.getCurrentShare().remove(record);
        }
        this.fireEvent('readAccessRemove', record.get('id'), record.get('type'));
        button.up('container').query('button')[1].setPressed(false);
      } else { // add read access
        record.set('read', true);
        this.getAssociatedShares().add(record);
        this.getAssociatedObjects().add(record);
        this.fireEvent('readAccessAdd', record.get('id'), record.get('type'));
      }
    }
    this.getPlaceholderContainer().setHidden(this.getAssociatedShares().count() !== 0);
  },

  toggleWrite: function(button) {
    const record = this.getRecordFromButton(button);
    const associationRecordIndex = this.getAssociatedObjects().findBy(this.findShare(record.get('id'), record.get('type')));
    const associationRecord = this.getAssociatedObjects().getAt(associationRecordIndex);
    if (record.get('id') !== this.getOwner()) {
      if (!button.isPressed()) {
        this.removeWriteAccess(record, associationRecord);
      } else {
        this.addWriteAccess(record, associationRecord, button);
      }
    }
    this.getPlaceholderContainer().setHidden(this.getAssociatedShares().count() !== 0);
  },

  addWriteAccess: function(record, associationRecord, button) {
    record.set('write', true);
    record.set('read', true);
    this.getAssociatedShares().add(record);
    if (!Ext.isEmpty(associationRecord)) {
      associationRecord.set('write', true);
      associationRecord.set('read', true);
    } else {
      this.getAssociatedObjects().add(record);
    }
    this.fireEvent('writeAccessAdd', record.get('id'));
    button.up('container').down('button').setPressed(true);
  },

  removeWriteAccess: function(record, associationRecord) {
    record.set('write', false);
    this.getAssociatedShares().findRecord('id', record.get('id')).set('write', false);
    if (this.inAssociationGrid() && !this.associationIncludesId(this.getAssociatedShares(), record)) {
      this.getCurrentShare().remove(record);
    }
    if (!this.inAssociationGrid() && !this.associationIncludesId(this.getAssociatedShares(), record)) {
      this.getAssociatedObjects().remove(associationRecord);
    } else if (this.associationIncludesId(this.getAssociatedShares(), record)) {
      associationRecord.set('write', false);
    }
    this.fireEvent('writeAccessRemove', record.get('id'));
  },

  removeShare: function(_chipView, location) {
    const record = location.record;
    this.getAssociatedShares().remove(record);
    this.fireEvent('writeAccessRemove', record.get('id'));
    this.fireEvent('readAccessRemove', record.get('id'), record.get('type'));
    this.getPlaceholderContainer().setHidden(this.getAssociatedShares().count() !== 0);
    return false;
  },

  associationIncludesId: function(store, record) {
    return store.findBy(this.findShare(record.get('id'), record.get('type'))) !== -1;
  },

  associationIncludesIdReadWrite: function(store, record, readWrite) {
    return store.findBy(this.findShareWithReadWrite(record.get('id'), record.get('type'), readWrite)) !== -1;
  },

  addRecordFromAssociation: function(button, readWrite) {
    const record = this.getRecordFromButton(button);
    if (!this.inAssociationGrid() && !this.getCurrentAssociationStore().contains(record)) {
      const value = this.down('[cls~=js-ucan-share-container-segmented-button-selected-share]').getValue();
      if (value === 'groups') {
        this.getAssociatedGroups().add(record);
      } else if (value === 'accounts') {
        this.getAssociatedAccounts().add(record);
      }
      this.getAssociatedObjects().add({
        name: record.get('name'),
        customId: record.get('customId'),
        id: record.get('id'),
        read: readWrite === 'read',
        write: readWrite === 'write'
      });
    } else if (this.getCurrentAssociationStore().contains(record)) {
      const existingObjectIndex = this.getAssociatedObjects().findBy(this.findShare(record.get('id'), record.get('type')));
      const existingObject = this.getAssociatedObjects().getAt(existingObjectIndex);
      if (readWrite === 'read') {
        existingObject.set('read', !existingObject.get('read'));
      } else if (readWrite === 'write') {
        existingObject.set('write', !existingObject.get('write'));
        existingObject.set('read', !existingObject.get('write'));
      }
    }
  },

  destroyContainer: function(_panel, event) {
    const button = this.showButton;
    const floatingShareContainerQuery = Ext.ComponentQuery.query('[cls~=js-ucan-floating-share-container]');
    if (Ext.isEmpty(event.toComponent) || Ext.isEmpty(event.toComponent.getCls())) {
      button.floatingShareContainer = undefined;
      if (!Ext.isEmpty(floatingShareContainerQuery)) {
        floatingShareContainerQuery.forEach(container => container.destroy());
      }
      button.setPressed(false);
    } else if (Ext.isEmpty(event.toComponent.getCls()[0].match(/js-ucan-share-container-button-(groups|accounts)/g))) {
      if (event.toComponent.getItemId() !== button.getItemId()) {
        button.floatingShareContainer = undefined;
        if (!Ext.isEmpty(floatingShareContainerQuery)) {
          floatingShareContainerQuery.forEach(container => container.destroy());
        }
        button.setPressed(false);
      } else {
        button.floatingShareContainer = undefined;
        if (!Ext.isEmpty(floatingShareContainerQuery)) {
          floatingShareContainerQuery.forEach(container => container.destroy());
        }
      }
    }
  },

  onSwitchFilter: function(field) {
    const value = field.getValue();
    const floatingShareContainerQuery = Ext.ComponentQuery.query('[cls~=js-ucan-floating-share-container]');
    if (!Ext.isEmpty(floatingShareContainerQuery)) {
      const floatingShareContainer = floatingShareContainerQuery[0];
      const button = floatingShareContainer.down(
          '[cls~=js-ucan-floating-share-container-segmented-button-selected-share]').getValue();
      if (button === 'groups') {
        const grid = SinkUtil.downClassFromView(floatingShareContainer, 'js-ucan-floating-share-container-grid-available-groups');
        this.addFilter(grid, button, value);
        this.getAvailableGroups().reload();
      } else {
        const grid = SinkUtil.downClassFromView(floatingShareContainer, 'js-ucan-floating-share-container-grid-available-accounts');
        this.addFilter(grid, button, value);
        this.getAvailableAccounts().reload();
      }
    }
  },

  addFilter: function(grid, groupAccount, filterValue) {
    grid.setMasked(
        {
          xtype: 'loadmask',
          message: this.getTranslator().get('loading')
        }
    );
    Ext.apply(grid.getStore().getProxy().extraParams, {
      filters: Ext.JSON.encode([{
        property: groupAccount,
        value: filterValue,
        operator: 'EQUALS'
      }])
    });
  },

  filterShares: function(field) {
    const val = field.getValue();
    this.textFilterShares(val);
  },

  textFilterShares: function(value) {
    const grid = this.getCurrentShareGrid(),
        store = this.getCurrentShare();
    grid.setMasked(
        {
          xtype: 'loadmask',
          message: this.getTranslator().get('loading')
        }
    );
    store.removeAll();
    this.onFilterShares(value, store, grid);
  },

  onFilterShares(search, store, grid) {
    store.getProxy().abort();
    if (Ext.isEmpty(search)) {
      Ext.apply(store.getProxy().extraParams, {
        search: ''
      });
    } else {
      Ext.apply(store.getProxy().extraParams, {
        search: search
      });
    }
    store.loadPage(1, {
      callback: function(success) {
        if (success) {
          grid.setMasked(false);
        } else {
          grid.setMasked({
            xtype: 'loadmask',
            message: this.getTranslator().get('loading')
          });
        }
      },
      scope: this
    });
  },

  getCurrentShare: function() {
    const floatingShareContainerQuery = Ext.ComponentQuery.query('[cls~=js-ucan-floating-share-container]');
    if (!Ext.isEmpty(floatingShareContainerQuery)) {
      const value = floatingShareContainerQuery[0].down(
          '[cls~=js-ucan-floating-share-container-segmented-button-selected-share]').getValue();
      if (value === 'accounts') {
        return this.getAvailableAccounts();
      } else if (value === 'groups') {
        return this.getAvailableGroups();
      }
    }
  },

  getCurrentShareGrid: function() {
    const floatingShareContainer = Ext.ComponentQuery.query('[cls~=js-ucan-floating-share-container]')[0];
    if (!Ext.isEmpty(floatingShareContainer)) {
      const value = floatingShareContainer.down('[cls~=js-ucan-floating-share-container-segmented-button-selected-share]').getValue();
      if (value === 'accounts') {
        return SinkUtil.downClassFromView(floatingShareContainer, 'js-ucan-floating-share-container-grid-available-accounts');
      } else if (value === 'groups') {
        return SinkUtil.downClassFromView(floatingShareContainer, 'js-ucan-floating-share-container-grid-available-groups');
      }
    }
  },

  inAssociationGrid: function() {
    return Ext.isEmpty(Ext.ComponentQuery.query('[cls~=js-ucan-floating-share-container]'));
  },

  getCurrentAssociationStore: function() {
    const segmentedButton = this.down('[cls~=js-ucan-share-container-segmented-button-selected-share]');
    if (!Ext.isEmpty(segmentedButton)) {
      const value = segmentedButton.getValue();
      if (value === 'accounts') {
        return this.getAssociatedAccounts();
      } else if (value === 'groups') {
        return this.getAssociatedGroups();
      }
    }
  },

  getAssociatedAccounts: function() {
    return this.down('[cls~=js-ucan-share-container-grid-accounts]').getStore();
  },

  getAssociatedGroups: function() {
    return this.down('[cls~=js-ucan-share-container-grid-groups]').getStore();
  },

  getAssociatedObjects: function() {
    return this.down('[cls~=js-ucan-share-container-chip-view-compact]').getStore();
  },

  getPlaceholderContainer: function() {
    return SinkUtil.downClassFromView(this, 'js-ucan-share-container-container-placeholder');
  },

  addGroupAssociation: function(group, groupAssociations, rw) {
    groupAssociations.add(group);
    const existingGroup = this.getAvailableGroups().findRecord('id', group.get('id'));
    if (!Ext.isEmpty(existingGroup)) {
      existingGroup.set(rw, true);
    }
    const myExistingGroup = this.getMyGroups().findRecord('id', group.get('id'));
    if (!Ext.isEmpty(myExistingGroup)) {
      myExistingGroup.set(rw, true);
    }
  },

  addAccountAssociation: function(account, accountAssociations, rw) {
    accountAssociations.add(account);
    const existingAccount = this.getAvailableAccounts().findRecord('id', account.get('id'));
    if (!Ext.isEmpty(existingAccount)) {
      existingAccount.set(rw, true);
    }
    const myExistingAccount = this.getMyAccountsGroups().findRecord('id', account.get('id'));
    if (!Ext.isEmpty(myExistingAccount)) {
      myExistingAccount.set(rw, true);
    }
  },

  updateAssociatedShares: function(config) {
    const placeholderContainer = this.getPlaceholderContainer();
    this.getAssociatedShares().on('load', function(store) {
      store.clearFilter();
      const owner = store.findRecord('id', this.getOwner());
      if (!Ext.isEmpty(owner)) {
        this.getViewModel().set('ownerString', owner.get('firstName') + ' ' + owner.get('lastName'));
      }
      store.filter([
        {
          property: 'id',
          value: this.getOwner(),
          operator: '!='
        }]);
      placeholderContainer.setHidden(store.count() !== 0);
    }, this, {single: true});
    this.down('[cls~=js-ucan-share-container-chip-view-compact]').setStore(this.getAssociatedShares());
  },

  updateTranslator: function(config) {
    this.down('[cls~=js-ucan-share-container-button-toggle-floating-share]').setTooltip(config.get('share_show_all'));
  },

  updateDisableExpandButton: function(config) {
    this.down('[cls~=js-ucan-share-container-button-toggle-floating-share]').setDisabled(config);
  },

  updateChipViewMaxWidth: function(config) {
    this.down('[cls~=js-ucan-share-container-chip-view-compact]').setMaxWidth(config);
  },

  calculateAlignmentForFloatingPanel: function(position, viewport) {
    const cx = viewport.width / 2;
    const cy = viewport.height / 2;
    if (position.x <= cx && position.y > cy) {
      // top left
      return 'bl-tr';
    } else if (position.x > cx && position.y > cy) {
      // top right
      return 'br-tl';
    } else if (position.x > cx && position.y <= cy) {
      // bottom right
      return 'tr-tl';
    } else if (position.x <= cx && position.y <= cy) {
      // bottom left
      return 'tl-tr';
    }
  },

  findShare: function(id, type) {
    return record => record.get('id') === id && record.get('type') === type;
  },

  findShareWithReadWrite: function(id, type, readWrite) {
    return record => record.get('id') === id && record.get('type') === type && record.get(readWrite) === true;
  },

  onColumnTap: function(column, event) {
    if (!(Ext.isEmpty(column.sortState) && column.getSorter().getDirection() === 'DESC')) {
      const grid = column.getGrid();
      grid.setMasked({
        xtype: 'loadmask',
        message: this.getTranslator().get('loading')
      });
      grid.getStore().on('load', function() {
        grid.setMasked(false);
      }, {single: true});
    }
  }
});