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

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

Ext.define('UCAN.common.entity.detail.EntityDetailAssociationView', {
  extend: 'UCAN.common.entity.detail.EntityDetailSectionPanelView',
  xtype: 'entityDetailAssociationView',
  cls: 'ucan-entity-detail-section-panel-view ' +
    'ucan-entity-detail-association-view',

  config: {
    associationStore: null,
    entityStore: null,
    selectedEntity: null,
    entityBaseRoute: '',
    removeable: true,
    removeText: '',
    removeTooltip: '',
    removeFailure: '',
    addable: true,
    addText: '',
    addTooltip: '',
    addFailure: '',
    infoText: ''
  },
  twoWayBindable: {
    associationStore: true,
    entityStore: true,
    selectedEntity: true,
    entityBaseRoute: true
  },
  publishes: [
    'associationStore',
    'entityStore',
    'selectedEntity',
    'entityBaseRoute',
    'removeable',
    'removeText',
    'removeTooltip',
    'removeFailure',
    'addable',
    'addText',
    'addTooltip',
    'addFailure',
    'infoText'
  ],
  layout: 'vbox',

  items: [
    {
      xtype: 'container',
      layout: 'hbox',
      items: [
        {
          xtype: 'combobox',
          itemId: 'entityDetailAssociationCombobox',
          flex: 7,
          typeAhead: true,
          minChars: 3,
          displayField: 'asString',
          valueField: 'id',
          forceSelection: true,
          queryParam: 'search',
          queryMode: 'remote',
          picker: 'floated',
          allQuery: '',
          floatedPicker: {
            navigationModel: {
              keyboard: true
            }
          },
          listeners: {
            beforequery: function (queryPlan) {
              // Set the latest request ID on the store
              if(queryPlan.query.length < 3) {
                queryPlan.cancel = true;
              } else {
                queryPlan.combo.getStore().latestRequestId = queryPlan.query;
              }

            }
          }
        },
        {
          xtype: 'button',
          itemId: 'entityDetailAssociationAddButton',
          cls: 'ucan-entity-detail-association-view-add-button',
          iconCls: 'x-fa fa-plus',
          handler: function(cmp) {
            const scope = this.up('entityDetailAssociationView');
            scope.onAddEntity(cmp);
          }
        }
      ]
    },
    {
      xtype: 'chipview',
      itemId: 'entityDetailAssociationChipView',
      cls: 'textFieldLikeChipView',
      flex: 1,
      displayField: 'name',
      valueField: 'id',
      displayTpl: '<span title="{asString}">{asString}</span>',
      disabled: false,
      itemCls: 'x-chip-adminChip',
      srollable: true,
      listeners: {
        initialize: function(cmp) {
          const scope = this.up('entityDetailAssociationView');
          scope.onAssociationChipViewInitialize(cmp);
        }
      },
      closeHandler: function(cmp, location) {
        const scope = this.up('entityDetailAssociationView');
        scope.onDeleteEntity(cmp, location);
      }
    },
    {
      xtype: 'displayfield',
      itemId: 'entityDetailAssociationInfoText',
      cls: 'entity-detail-association-info-text'
    },
  ],

  // region Update Attributes

  updateAddText: function(config) {
    const addButton = this.getAddButton();
    addButton.setText(config)
  },

  updateEntityStore: function(config) {
    const combobox = this.getComboBox();
    combobox.setStore(config);
    config.on('beforeload', function (store, operation) {
      // Generate a unique counter for each request
      operation.requestId = store.latestRequestId;
    }, this);
    config.on('load', this.onLoadEntityStore, this);
  },

  updateInfoText: function(config) {
    const infotext = this.getInfoText();
    infotext.setHtml(config)
  },

  updateSelectedEntity: function(config) {
    const combobox = this.getComboBox();
    combobox.setValue(config)
  },

  updateAddable: function(config) {
    const combobox = this.getComboBox();
    const addButton = this.getAddButton();
    combobox.setDisabled(!config);
    combobox.setHidden(!config);
    addButton.setDisabled(!config);
    addButton.setHidden(!config);
  },

  updateAddTooltip: function(config) {
    const combobox = this.getComboBox();
    combobox.setPlaceholder(config)
  },

  updateRemoveable: function(config) {
    const associationChipView = this.getChipView();
    associationChipView.setClosable(config)
  },

  updateAssociationStore: function(config) {
    const associationChipView = this.getChipView();
    associationChipView.setStore(config);
  },

  // endregion

  // region Eventhandling

  onLoadEntityStore: function(store, records, successful, operation) {
    if (operation.requestId === store.latestRequestId) {
      const assStore = this.getAssociationStore();
      // Filter the records
      const filteredRecords = Ext.Array.filter(records, function (record) {
        return Ext.isEmpty(assStore.findRecord('id', record.get('id')));
      });

      // Load the filtered records into the store
      store.loadData(filteredRecords);
    }
  },

  onAddEntity: function(component) {
    if (component.parent.items.items[0].getSelection() !== null) {
      this.getAssociationStore().add(
        this.valueCopy(component.parent.items.items[0].getSelection())
      );
      component.parent.items.items[0].setSelection(null);
      this.getAssociationStore().sync({
        failure: function() {
          Ext.toast(this.getBind().addFailure.value, 2000);
        },
        scope: this
      });
    }
  },

  onDeleteEntity: function(chipview, location) {
    this.getAssociationStore().remove(location.record);
    this.getAssociationStore().sync({
      failure: function() {
        Ext.toast(this.get('removeFailure'), 2000);
      },
      scope: this
    });
    return false;
  },

  onAssociationChipViewInitialize: function(chipview) {
    let me = this;
    chipview.el.on('dblclick', function(event, chipElement) {
      const chip = chipElement.parentNode.parentNode;
      const record = chipview.mapToRecord(chip);
      if(!Ext.isEmpty(me.getEntityBaseRoute())) {
        window.location.replace(me.getEntityBaseRoute() + record.data.id);
      }
    });
    chipview.el.on('auxclick', function(event, chipElement) {
      if (event.button === 1) {
        const chip = chipElement.parentNode.parentNode;
        const record = chipview.mapToRecord(chip);
        if(!Ext.isEmpty(me.getEntityBaseRoute())) {
          window.open(me.getEntityBaseRoute()  + record.data.id, '_blank');
        }
      }
    });
  },

  // endregion

  // region Util Functions

  valueCopy: function(entity) {
    const dataCopy = Object.assign({}, entity.data);
    delete dataCopy.id;
    const newEntity = Ext.create(entity.entityName, dataCopy);
    newEntity.set('id', entity.data.id);
    return newEntity;
  },

  filterChipviewCombobox: function(item) {
    return this.findExact('id', item.data.id) === -1;
  },

  disable: function() {
    this.getAddButton().disable();
    this.getComboBox().disable();
    this.getChipView().disable();
  },

  // endregion

  // region Getter

  getAddButton: function() {
    return this.queryById('entityDetailAssociationAddButton');
  },

  getChipView: function() {
    return this.queryById('entityDetailAssociationChipView');
  },

  getComboBox: function() {
    return this.queryById('entityDetailAssociationCombobox');
  },

  getInfoText: function() {
    return this.queryById('entityDetailAssociationInfoText');
  }

  // endregion
});