ucan-ext-js-kitchen-sink/packages/local/common-ux/src/entity/detail/EntityDetailListView.js

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

Ext.define('UCAN.common.entity.detail.EntityDetailListView', {
  extend: 'Ext.Panel',
  xtype: 'entityDetailListView',
  cls: 'js-ucan-entity-detail-list-view ucan-entity-detail-list-view',

  config: {
    entityStore: null,
    selection: null,
    entityAddable: false,
    entityRemoveable: false,
    actions: [],
    columns: [],
    grid: true,
    translator: null,
    entityAddAction: '',
    entityRemoveAction: '',
    gridLabel: ''
  },

  twoWayBindable: {
    entityStore: null,
    selection: null,
    actions: true,
    columns: true
  },
  publishes: ['entityStore', 'selection', 'columns', 'actions'],

  layout: 'hbox',
  scrollable: true,
  filters: {},

  items: [
    {
      height: '100%',
      width: '100%',
      layout: 'vbox',
      items: [
        {
          xtype: 'entityBasicHeader',
          headerContent: [
            {
              xtype: 'searchfield',
              cls: 'js-ucan-entity-detail-list-view-search-field ucan-entity-detail-list-view-search-field',
              autoComplete: true,

              listeners: {
                keydown: function(cmp, event) {
                  const scope = this.up('entityDetailListView');
                  scope.onFilterEntities(cmp, event);
                },
                clearicontap: function(cmp) {
                  const scope = this.up('entityDetailListView');
                  scope.onClearSearchValue(cmp);
                }
              }
            },
            {
              xtype: 'button',
              cls: 'js-ucan-entity-detail-list-view-filter-button ucan-entity-detail-list-view-filter-button',
              iconCls: 'x-fa fa-filter',
              handler: function() {
                const scope = this.up('entityDetailListView');
                scope.onResetFilter();
              },
              hidden: true
            },
            {
              xtype: 'button',
              cls: 'ucan-entity-detail-list-view-sync-button',
              iconCls: 'x-fa fa-sync',
              handler: function() {
                const scope = this.up('entityDetailListView');
                scope.onReloadStore();
              }
            },
            {
              cls: 'js-ucan-entity-detail-list-view-grid-filter-container',
            },
            {
              xtype: 'spacer'
            },
            {
              xtype: 'label',
              cls: 'js-ucan-entity-detail-list-view-label'
            },
            {
              xtype: 'spacer'
            },
            {
              itemId: 'entity-add-btn',
              xtype: 'button',
              cls: 'js-ucan-entity-detail-list-view-add-button ucan-entity-detail-list-view-add-button',
              iconCls: 'x-fa fa-plus'
            },
            {
              itemId: 'entity-del-btn',
              xtype: 'button',
              cls: 'js-ucan-entity-detail-list-view-remove-button ucan-entity-detail-list-view-remove-button',
              iconCls: 'x-fa fa-minus',
              handler: function() {
                const scope = this.up('entityDetailListView');
                scope.onRemoveEntity();
              },
              disabled: true
            },
            {
              xtype: 'button',
              iconCls: 'x-fa fa-bars',
              arrow: false,
              cls: 'js-ucan-entity-detail-list-view-header-container-action-button ucan-entity-detail-list-view-header-container-action-button',
              menu: {
                shadow: false,
                items:[]
              }
            }
          ]
        },
        {
          layout: 'vbox',
          cls: 'js-ucan-entity-detail-list-view-grid-container',
          flex: 1,
          items: []
        }
      ]
    }
  ],

  // region Update Attributes

  updateEntityStore: function(config) {
    const grid = this.getGrid();
    if (Ext.isEmpty()) {
      grid.setStore(config);
    }
  },

  updateActions: function(config) {
    if (!Ext.isEmpty(config)) {
      let actionButton = this.down('[cls~=js-ucan-entity-detail-list-view-header-container-action-button]');
      config.forEach(btn => {
        if (btn.disabled === undefined) {
          btn.disabled = false;
        }
        if (btn.hidden === undefined) {
          btn.hidden = false;
        }
        if (btn.cls === undefined) {
          btn.cls = 'ucan-entity-detail-list-view-button-action';
        }
        actionButton.getMenu().add(Ext.create({
          xtype: 'button',
          handler: btn.handler,
          iconCls: btn.iconCls,
          bind: {
            text: btn.bind.text,
            disabled: btn.bind.disabled,
            hidden: btn.bind.hidden,
            cls: btn.bind.cls,
          },
        }));
      });
    } else {
      this.down('[cls~=js-ucan-entity-detail-list-view-header-container-action-button]').setHidden(true);
    }
  },

  updateColumns: function(config) {
    const grid = this.getGrid();
    if (!Ext.isEmpty(grid)) {
      grid.setColumns(config);
    }
  },

  updateGrid: function(config) {
    const gridContainer = this.getGridContainer();
    gridContainer.removeAll();
    gridContainer.add(
        {
          xtype: 'grid',
          cls: 'js-ucan-entity-detail-list-view-grid',
          flex: 1,

          plugins: {
            pagingtoolbar: true,
            gridfilters: true,
            gridcellediting: {
              triggerEvent: 'doubletap'
            },
          },

          listeners: {
            select: function(component) {
              const scope = this.up('entityDetailListView');
              scope.onUpdateSelection(component);
            },
            deselect: function(component) {
              const scope = this.up('entityDetailListView');
              scope.onUpdateSelection(component);
            }
          },
          rowNumbers: false
        }
    );
    let grid = this.getGrid();
    grid.setStore(this.getEntityStore());
    grid.setColumns(this.getColumns());
  },

  updateGridLabel: function(config) {
    this.getGridLabel().setHtml('<h3 style="align-self: center">' + config + '</h3>');
  },

  updateEntityAddAction: function(config) {
    const addButton = this.getAddButton();
    addButton.setHandler(config);
  },

  updateEntityRemoveAction: function(config) {
    if (!Ext.isEmpty(config)) {
      const removeButton = this.getRemoveButton();
      removeButton.setHandler(config);
    }
  },

  updateTranslator: function(config) {
    const searchField = this.getSearchField();
    const addButton = this.getAddButton();
    const removeButton = this.getRemoveButton();
    searchField.setPlaceholder(config.get('search'));
    addButton.setText(config.get('add'));
    removeButton.setText(config.get('remove'));
  },

  updateEntityAddable: function(config) {
    const addButton = this.getAddButton();
    addButton.setHidden(!config);
  },

  updateEntityRemoveable: function(config) {
    const removeButton = this.getRemoveButton();
    removeButton.setHidden(!config);
  },

  // endregion

  // region Eventhandling

  onRemoveEntity: function() {
    const deleteEntityDialog = this.createDeleteEntityDialog();
    deleteEntityDialog.show();
  },

  onUpdateSelection: function(grid) {
    this.setSelection(grid.getSelection());
    this.deleteDisabled();
  },

  onReloadStore: function() {
    this.getEntityStore().reload();
  },

  onResetFilter: function() {
    const cmp = this.getSearchField();
    cmp.setValue('');
    this.filters = [];
    this.onFilterStore();
  },

  onClearSearchValue: function(cmp) {
    cmp.setValue('');
    this.removeFilter('search');
    this.onFilterStore();
  },

  onFilterEntities: function(cmp, event) {
    if (event.keyCode === event.ENTER) {
      const searchValue = cmp.getValue();
      if (searchValue) {
        this.addFilter('search', {
          search: searchValue
        });
      } else {
        this.removeFilter('search');
      }
      this.onFilterStore();
    }
  },

  onFilterStore: function() {
    const grid = this.getGrid();
    const store = this.getEntityStore();
    const keys = Object.keys(this.filters);
    if (!Ext.isEmpty(store)) {
      store.clearFilter();
      store.getProxy().extraParams = {};
      keys.forEach(item => {
        Ext.apply(store.getProxy().extraParams, this.filters[item]);
      });
      store.reload();
    }
    if (keys.length) {
      this.getFilterButton().setHidden(false);
      this.getFilterButton().setBadgeText(keys.length);
    } else {
      this.getFilterButton().setHidden(true);
      this.getFilterButton().setBadgeText('');
    }
    if (!Ext.isEmpty(grid)) {
      const paging = grid.findPlugin('pagingtoolbar');
      if (!Ext.isEmpty(paging)) {
        paging.setCurrentPage(1);
        paging.updateCurrentPage(1);
      }
    }
  },

  // endregion

  // region Util Functions

  createDeleteEntityDialog: function() {
    const grid = this.getGrid();
    const data = grid.getSelections();
    return Ext.create(
        'UCAN.common.entity.list.EntityDeleteDialog', {
          entities: data,
          translator: this.getTranslator()
        });
  },

  deleteDisabled: function() {
    const grid = this.getGrid();
    const removeButton = this.getRemoveButton();
    removeButton.setDisabled(Ext.isEmpty(grid.getSelection()));
  },

  highlightSearchData: function(val, record, dataIndex, cell, column) {
    const searchField = this.getSearchField();
    return CustodianApp.desktop.src.view.util.Renderer.highlightSearchData(
        val, record, dataIndex, cell, column, searchField.getValue()
    );
  },

  highlightSearchData: function(value, record, dataIndex, cell, column, searchValue, oldValue) {
    let arrayLength = 0;
    if (!Ext.isEmpty(column.secondRenderHelper)) {
      arrayLength = column.renderHelper(value);
      value = column.secondRenderHelper(value);
    } else if (!Ext.isEmpty(column.renderHelper)) {
      value = column.renderHelper(value);
      if (value === '') {
        value = oldValue;
      }
    }

    if (!Ext.isEmpty(searchValue) && value.includes(searchValue)) {
      let valueLength = value.length;
      let searchLength = searchValue.length;
      for (let x = 0; x < valueLength; x++) {
        if (value.charAt(x) === searchValue.charAt(0)) {
          let beforeMarked = value.substring(0, x);
          let marked = value.substring(x, x + searchLength);
          let afterMarked = value.substring(x + searchLength, valueLength + 1);
          let savedAfterMarked = afterMarked;
          if (!Ext.isEmpty(column.secondRenderHelper)) {
            return "<mark>" + arrayLength + "</mark>";
          } else if (!Ext.isEmpty(column.renderHelper)) {
            afterMarked = column.renderHelper(afterMarked);
          }
          return beforeMarked + "<mark>" + marked + "</mark>"
              + this.highlightSearchData(afterMarked, record, dataIndex, cell, column, searchValue, savedAfterMarked);
        }
      }
    }

    if (Ext.isEmpty(column.secondRenderHelper)) {
      return value;
    } else {
      return arrayLength;
    }

  },

  addFilter: function(name, filter) {
    this.filters[name] = filter;
    this.onFilterStore();
  },

  removeFilter: function(param) {
    delete this.filters[param];
    this.onFilterStore();
  },

  // endregion

  // region Getter

  getGrid: function() {
    return this.down('[cls~=js-ucan-entity-detail-list-view-grid]');
  },

  getGridContainer: function() {
    return this.down('[cls~=js-ucan-entity-detail-list-view-grid-container]');
  },

  getAddButton: function() {
    return this.down('[cls~=js-ucan-entity-detail-list-view-add-button]');
  },

  getFilterButton: function() {
    return this.down('[cls~=js-ucan-entity-detail-list-view-filter-button]');
  },

  getRemoveButton: function() {
    return this.down('[cls~=js-ucan-entity-detail-list-view-remove-button]');
  },

  getSearchField: function() {
    return this.down('[cls~=js-ucan-entity-detail-list-view-search-field]');
  },

  getGridLabel: function() {
    return this.down('[cls~=js-ucan-entity-detail-list-view-label]');
  }

  // endregion

});