ucan-ext-js-kitchen-sink/packages/local/classification/src/floatingClassification.js

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

Ext.define('UCAN.classification.src.floatingClassification', {
  extend: 'Ext.Dialog',
  alias: 'widget.floatingClassification',

  config: {
    availableClassificationTree: null,
    objectClassifications: null,
    translator: null
  },
  twoWayBindable: {
    objectClassifications: true
  },

  height: '50%',
  width: '50%',
  floated: true,
  scrollable: true,
  closable: false,
  viewModel: true,
  defaultListenerScope: this,
  focusable: true,
  tabIndex: 1,
  cls: 'ucan-classification-padding-white',
  alreadyChecked: false,
  maskTapHandler: 'hideDialog',
  modal: true,
  layout: 'vbox',
  items: [
    {
      layout: 'hbox',
      items: [
        {
          xtype: 'chipview',
          flex: 10,
          cls: 'js-ucan-classification-chipview-classifications',
          closable: true,
          selectable: false,
          shadow: false,
          maxWidth: '90%',
          displayTpl: '{name} ({category})',
          bind: {
            store: '{chipviewClassification}'
          },
          valueField: 'id',
          closeHandler: 'onRemoveClassification',
          itemTpl: '<div class="' + Ext.baseCSSPrefix + 'body-el {mandatoryCls}">' +
              '<div class="{_chipIconCls}" style="{_chipIconStyle}"></div>' +
              '<div class="' + Ext.baseCSSPrefix + 'text-el">' +
              '{_chipText}' +
              '</div>' +
              '<div class="' + Ext.baseCSSPrefix + 'close-el ' + Ext.baseCSSPrefix + 'font-icon"></div>' +
              '</div>'
        },
        {
          xtype: 'spacer'
        },
        {
          xtype: 'button',
          iconCls: 'x-fa fa-times',
          alignSelf: 'end',
          handler: function(button) {
            button.up('classification').fireEvent('floatingClassificationClosed', this);
            button.up('dialog').close();
          }
        }
      ]
    },
    {
      xtype: 'classificationCombobox',
      cls: 'js-ucan-floating-classification-combobox ucan-floating-classification-combobox',
      displayField: 'name',
      itemTpl: '<span>{key} {name} <span class="ucan-floating-classification-text-category"><b>{categoryType}</b>&nbsp;{categoryName}</span></span>',
      valueField: 'id',
      remoteFilter: true,
      autoComplete: true,
      typeAhead: true,
      minChars: 99999,
      anyMatch: true,
      queryMode: 'local',
      allQuery: '',
      floatedPicker: {
        navigationModel: {
          keyboard: false
        }
      },
      listeners: {
        change: 'onFilterClassifications',
        action: 'onSelectClassification',
        select: 'onPickClassification'
      }
    },
    {
      xtype: 'label',
      cls: 'js-ucan-floating-classification-label-classifications-select ucan-classification-margin-top'
    },
    {
      xtype: 'tree',
      cls: 'js-ucan-floating-classification-tree ucan-floating-classification-tree ucan-floating-classification-tree-hide-icons ucan-floating-classification-tree-decreased-padding',
      flex: 1,
      columnResize: false,
      rootVisible: false,
      hideHeaders: true,
      height: '100%',
      viewModel: true,
      listeners: {
        childtap: 'onChildTap'
      },
      selectOnExpander: false,
      columns: [
        {
          xtype: 'treecolumn',
          dataIndex: 'name',
          flex: 3,
          cell: {
            xtype: 'treecell',
            checkable: true,
            encodeHtml: false,
            enableTri: false,
            checkOnTriTap: false,
            autoCheckChildren: false,
            listeners: {
              beforecheckchange: 'checkControl',
              checkchange: 'toggleClassification'
            },
            tpl: '<span>{key} {name} <span class="ucan-floating-classification-text-category"><b>{categoryType}</b>&nbsp;{categoryName}</span></span>'
          }
        }
      ]
    },
    {
      layout: 'hbox',
      items: [
        {
          xtype: 'button',
          cls: 'ucan-floating-classification-button-apply-selection',
          bind: {
            text: '{translator.apply_selection}'
          },
          handler: function(button) {
            button.up('classification').fireEvent('floatingClassificationClosed', this);
            button.up('dialog').close();
          }
        },
        {
          xtype: 'spacer'
        }
      ]
    }
  ],

  etc: {
    availableClassificationListStore: null
  },

  onFilterClassifications: function(field) {
    if (!field.getStore().isLoading()) {
      field.getStore().filterBy(function(record) {
        const filterValue = field.getRawValue().toLowerCase();
        const key = record.get('key');
        const name = record.get('name');
        return (Ext.isEmpty(key) ? false : key.toLowerCase().includes(filterValue)) || name.toLowerCase().includes(filterValue);
      });
    }
    field.expand();
    return false;
  },

  onSelectClassification: function(field) {
    const record = field.getStore().first();
    this.addRecordToClassification(record);
    field.clearValue();
    this.updateAvailableClassificationListStoreFilter();
    if (this.xtype === 'classificationCombobox') {
      this.up('floatingClassification').focus();
    } else if (this.xtype === 'floatingClassification') {
      this.focus();
    }
    this.up('classification').fireEvent('updateClassification');
    return false;
  },

  onPickClassification: function(field, record) {
    if (Ext.isEmpty(record.isEntered)) {
      field.clearValue();
      this.addRecordToClassification(record);
    }
  },

  addRecordToClassification: function(record) {
    this.addRecordWithParentNodes(record);
    this.updateAvailableClassificationListStoreFilter();
    this.up('classification').fireEvent('updateClassification');
  },

  checkControl: function() {
    this.alreadyChecked = true;
  },

  updateAvailableClassificationTree: function(config) {
    this.getClassificationTree().setStore(config);
    this.getClassificationTree().expandAll();
    config.getRange().forEach(node => {
      node.joined = [];
      if (this.getObjectClassifications().includes(node.get('tagId'))) {
        node.set('checked', true);
      } else {
        node.set('checked', false);
      }
    })
    if (!Ext.isEmpty(this.etc.availableClassificationListStore)) {
      this.etc.availableClassificationListStore.clearData();
    }
    this.etc.availableClassificationListStore = Ext.create('Ext.data.Store', {
      data: config.getRange(),
      filters: [
        {
          property: 'tagId',
          value: this.getObjectClassifications(),
          operator: 'notin'
        }
      ]
    });
    this.getClassificationCombobox().setStore(this.etc.availableClassificationListStore);
  },

  onChildTap: function(grid, location) {
    if (!this.alreadyChecked) {
      location.cell.onCheckTap();
    }
    this.alreadyChecked = false;
  },

  toggleClassification: function(_component, checked, record) {
    if (checked) { // add classification
      this.addRecordWithParentNodes(record);
    } else { // remove classification
      this.getObjectClassificationStore().remove(record);
      let newClassifications = SinkUtil.removeFromArray(this.getObjectClassifications(), record.get('tagId'));
      record.cascade(function(child) {
        child.set('checked', false);
        this.getObjectClassificationStore().remove(child);
        newClassifications = SinkUtil.removeFromArray(newClassifications, child.get('tagId'));
      }.bind(this));
      const classifiableObject = this.up('classification').getObject();
      classifiableObject.set('classifications', newClassifications);
      if (Ext.isEmpty(newClassifications)) {
        classifiableObject.set('catalogueId', null);
      }
    }
    this.updateAvailableClassificationListStoreFilter();
    this.up('classification').fireEvent('updateClassification');
  },

  addRecordWithParentNodes: function(record) {
    let node = record;
    while (node.get('type') !== 'catalogue' && node.get('id') !== 'root') {
      this.checkNodeMultiClassification(node);
      node.set('checked', true);
      this.getObjectClassificationStore().add(node);
      const classifiableObject = this.up('classification').getObject();
      classifiableObject.set('classifications',
          SinkUtil.addToArray(classifiableObject.get('classifications'), node.get('tagId')));
      classifiableObject.set('catalogueId', node.get('catalogueId'));
      node = node.parentNode;
    }
  },

  checkNodeMultiClassification(node) {
    if (!node.get('multi')) {
      this.getAvailableClassificationTree().query('categoryId', node.get('categoryId')).items.forEach(record => {
        record.set('checked', false);
        this.getObjectClassificationStore().remove(record);
        const classifiableObject = this.up('classification').getObject();
        classifiableObject.set('classifications',
            SinkUtil.removeFromArray(classifiableObject.get('classifications'), record.get('tagId')));
        if (Ext.isEmpty(classifiableObject.get('classifications'))) {
          classifiableObject.set('catalogueId', null);
        }
      });
    }
  },

  updateAvailableClassificationListStoreFilter: function() {
    this.etc.availableClassificationListStore.clearFilter();
    this.etc.availableClassificationListStore.filter(
        [
          {
            property: 'tagId',
            value: this.up('classification').getObject().get('classifications'),
            operator: 'notin'
          }
        ]
    );
  },

  updateTranslator: function(config) {
    this.getClassificationCombobox().setLabel(config.get('classification_search'));
    this.getClassificationSelectLabel().setHtml(config.get('classifications_select'))
  },

  onModalMaskTap: function(e) {
    this.up('classification').fireEvent('floatingClassificationClosed', this);
    return this.callParent([e]);
  },

  showClassificationPanelFromMandatory: function() {
    // do nothing since already in floating classification panel
  },

  onRemoveClassification: function(_chipview, location) {
    this.toggleClassification(_chipview, false, location.record);
    return false;
  },

  // GETTER

  getClassificationTree: function() {
    return SinkUtil.downClassFromView(this, 'js-ucan-floating-classification-tree');
  },

  getClassificationCombobox: function() {
    return SinkUtil.downClassFromView(this, 'js-ucan-floating-classification-combobox');
  },

  getClassificationSelectLabel: function() {
    return SinkUtil.downClassFromView(this, 'js-ucan-floating-classification-label-classifications-select');
  },

  getObjectClassificationStore: function() {
    return this.getViewModel().get('chipviewClassification');
  }
});