ucan-ext-js-kitchen-sink/packages/local/common-ux/src/entity/list/EntityListView.js

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

Ext.define('UCAN.common.entity.list.EntityListView', {
  extend: 'Ext.Panel',
  xtype: 'entityListView',
  cls: 'ucan-entity-list-view',

  config: {
    entityStore: null,
    selection: null,
    entityShowable: true,
    entityAddable: false,
    entityRemoveable: false,
    entityBaseRoute: '',
    entitiesBaseRoute: '',
    actions: [],
    quickFilters: [],
    columns: [],
    translator: null,
    entityAddAction: 'onAddEntity',
    entityRemoveAction: 'onRemoveEntity',
    gridCheckBox: false,
    stateId: '',
  },

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

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

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

              listeners: {
                keydown: function(cmp, event) {
                  const scope = this.up('entityListView');
                  scope.onFilterEntities(cmp, event);
                },
                clearicontap: function(cmp) {
                  const scope = this.up('entityListView');
                  scope.onClearSearchValue(cmp);
                }
              }
            },
            {
              xtype: 'button',
              itemId: 'entity-grid-filter-btn',
              cls: 'ucan-entity-list-view-filter-button',
              iconCls: 'x-fa fa-filter',
              handler: function() {
                const scope = this.up('entityListView');
                scope.onResetFilter();
              },
              disabled: true
            },
            // {
            //   xtype: 'button',
            //   cls: 'ucan-entity-list-view-sync-button',
            //   iconCls: 'x-fa fa-sync',
            //   handler: function() {
            //     const scope = this.up('entityListView');
            //     scope.onReloadStore();
            //   }
            // },
            {
              itemId: 'entity-grid-add-btn',
              xtype: 'button',
              cls: 'ucan-entity-list-view-add-button',
              //iconCls: 'x-fa fa-plus'
            },
            {
              itemId: 'entity-grid-remove-btn',
              xtype: 'button',
              cls: 'ucan-entity-list-view-remove-button',
              //iconCls: 'x-fa fa-trash',
              handler: function() {
                const scope = this.up('entityListView');
                scope.onRemoveEntity();
              },
              disabled: true
            },
            {
              xtype: 'button',
              iconCls: 'x-fa fa-bars',
              arrow: false,
              itemId: 'entity-action-container',
              menu: {
                shadow: false,
                items:[

                ]
              }
            },
            {
              xtype: 'spacer'
            },
            {
              xtype: 'segmentedbutton',
              allowDepress: true,
              itemId: 'grid-filter-container',
            }
          ]
        },
        {
          layout: 'vbox',
          xtype: 'container',
          itemId: 'entity-grid-container',
          cls: 'ucan-entity-list-view-grid-container',
          flex: 1,
          items: [
            {
              xtype: 'grid',
              itemId: 'entity-grid',
              flex: 1,
              // StateId cannot be empty because of internel extjs event registration
              stateId: 'DefaultGridStateId',
              stateful: true,

              plugins: {
                pagingtoolbar: true,
                gridfilters: true
              },

              listeners: {
                childdoubletap: function(component, location) {
                  const scope = this.up('entityListView');
                  scope.onOpenEntity(component, location);
                },
                childtouchstart: function(component, listener) {
                  const scope = this.up('entityListView');
                  scope.onNewTabEntity(component, listener);
                },
                select: function(component) {
                  const scope = this.up('entityListView');
                  scope.onUpdateSelection(component);
                },
                deselect: function(component) {
                  const scope = this.up('entityListView');
                  scope.onUpdateSelection(component);
                }
              },
              rowNumbers: false
            }
          ]
        }
      ]
    }
  ],

  // region Update Attributes

  updateQuickFilters: function(config) {
    if (!Ext.isEmpty(config)) {
      let quickFiltersContainer = this.queryById('grid-filter-container');
      config.forEach(btn => {
        var filter = {};
        filter[btn.filterProperty] = btn.filterValue;
        quickFiltersContainer.add(Ext.create({
          xtype: 'button',
          ui: '',
          handler: function(button) {
            const scope = button.up('entityListView');
            if(button.isPressed()) {
              scope.addFilter(btn.filterProperty,filter);
            } else {
              scope.removeFilter(btn.filterProperty);
            }
          },
          iconCls: btn.iconCls,
          bind: {
            text: btn.text
          },
        }));
      });
    }
  },

  updateActions: function(config) {
    let actionContainer = this.getActionContainer();
    if (!Ext.isEmpty(config)) {
      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-list-view-button-action';
        }
        actionContainer.getMenu().add(Ext.create({
          xtype: 'button',
          handler: btn.handler,
          iconCls: btn.iconCls,
          bind: {
            text: btn.text,
            disabled: btn.disabled,
            hidden: btn.hidden,
            cls: btn.cls,
          },
        }));
      });
    } else {
      actionContainer.setHidden(true);
    }
  },

  updateEntityStore: function(config) {
    const grid = this.getGrid();
    if (Ext.isEmpty()) {
      grid.setStore(config);
      config.on('filterchange', this.renderFilterBatch, this);
    }
    this.defaultFilter = Object.assign({}, config.getFilters().items[0]);
  },

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

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

  updateEntityShowable: function(config) {
    const grid = this.getGrid();
    if (!Ext.isEmpty(grid) && !Ext.isEmpty(config) && Ext.isString(config)) {
      grid.removeListener('childdoubletap', grid.events.childdoubletap.listeners[0].fn);
      grid.addListener('childdoubletap', 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);
  },

  updateGridCheckBox: function(config) {
    const grid = this.getGrid();
    if (!Ext.isEmpty(grid)) {
      grid.getSelectable().setCheckbox(config);
    }
  },

  updateStateId: function(config) {
    const grid = this.getGrid();
    grid.setStateId(config);
    grid.refresh();
  },

  // endregion

  // region Eventhandling

  onAddEntity: function() {
    window.location.replace(this.getEntityBaseRoute() + '0');
  },

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

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

  onNewTabEntity: function(cmp, listener) {
    if (
      listener.event.parentEvent.button === 1
      && this.getEntityShowable()
    ) {
      window.open(
        this.getEntityBaseRoute() + listener.record.data.id,
        '_blank'
      );
    }
  },

  onOpenEntity: function(component, location) {
    if (this.getEntityShowable()) {
      window.location.assign(this.getEntityBaseRoute() + location.record.data.id);
    }
  },

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

  onResetFilter: function() {
    const cmp = this.getSearchField();
    cmp.setValue('');
    const grid = cmp.up('entityListView').getGrid()
    const store = grid.getStore();
    let index = 0;
    store.getFilters().items.forEach( entry => {
      if(index != 0) {
        store.removeFilter(entry);
      }
      index++;
    });
    store.getFilters().items[0].ast = null;
    store.getFilters().items[0].refresh();
    let quickFiltersContainer = this.queryById('grid-filter-container');
    quickFiltersContainer.items.items.forEach( btn => {
      btn.setPressed(false);
    });
    this.onGoPage1();
  },

  onClearSearchValue: function(cmp) {
    cmp.setValue('');
    const store = cmp.up('entityListView').getGrid().getStore();
    store.removeFilter('search');
    this.onGoPage1();
  },

  onFilterEntities: function(cmp, event) {
    if (event.keyCode === event.ENTER) {
      const searchValue = cmp.getValue();
      const store = cmp.up('entityListView').getGrid().getStore();
      if (searchValue) {
        store.addFilter({
          property: 'search',
          value: searchValue,
        });
      } else {
        store.removeFilter('search');
      }
    }
  },

  onGoPage1: function() {
    const grid = this.getGrid();
    if (!Ext.isEmpty(grid)) {
      const paging = grid.findPlugin('pagingtoolbar');
      if (!Ext.isEmpty(paging)) {
        paging.setCurrentPage(1);
        paging.updateCurrentPage(1);
      }
    }
  },

  // endregion

  // region Util Functions

  renderFilterBatch: function(store, filter) {
    let length =0;
    if(store.getFilters().length != 0 && !Ext.isEmpty(store.getFilters().items[0].ast)) {
      length = store.getFilters().items[0].ast.on.length;
    }
    if(store.getFilters().length > 1) {
      length++;
    }
    if (length) {
      this.getFilterButton().setDisabled(false);
      this.getFilterButton().setBadgeText(length);
    } else {
      this.getFilterButton().setDisabled(true);
      this.getFilterButton().setBadgeText('');
    }
    return true;
  },

  createDeleteEntityDialog: function() {
    const grid = this.getGrid();
    const data = grid.getSelections();
    return Ext.create(
      'UCAN.common.entity.list.EntityDeleteDialog', {
        deleteSuccessRoute: this.getEntitiesBaseRoute(),
        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;
    }

  },

  // endregion

  // region Getter

  getGrid: function() {
    return this.queryById('entity-grid');
  },

  getGridContainer: function() {
    return this.queryById('entity-grid-container');
  },

  getActionContainer: function() {
    return this.queryById('entity-action-container');
  },

  getAddButton: function() {
    return this.queryById('entity-grid-add-btn');
  },

  getFilterButton: function() {
    return this.queryById('entity-grid-filter-btn');
  },

  getRemoveButton: function() {
    return this.queryById('entity-grid-remove-btn');
  },

  getSearchField: function() {
    return this.queryById('entity-grid-search-field');
  }

  // endregion

});