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

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

Ext.define('UCAN.classification.src.classification', {
  extend: 'Ext.Panel',
  xtype: 'classification',

  flex: 1,
  scrollable: true,
  defaultListenerScope: this,
  config: {
    object: null,
    availableClassificationTree: null,
    hideClassifications: false,
    mandatoryCategories: [],
    translator: null,
    required: true,
    disabled: null
  },
  twoWayBindable: {
    object: true,
    availableClassificationTree: true,
    translator: true
  },

  viewModel: {
    stores: {
      chipviewClassification: {
        sorters: [
          {
            property: 'categoryId',
            direction: 'ASC'
          }
        ]
      }
    }
  },

  items: [
    {
      flex: 1,
      cls: 'ucan-classification-margin',
      layout: 'vbox',
      items: [
        {
          xtype: 'container',
          cls: 'js-ucan-classification-container-chipview',
          layout: 'vbox',
          flex: 1,
          items: [
            {
              xtype: 'button',
              alignSelf: 'start',
              cls: 'js-ucan-classification-button ucan-required-button',
              iconCls: 'x-fa fa-plus',
              handler: 'showClassificationPanel',
              bind: {
                text: '{translator.classification}'
              }
            },
            {
              xtype: 'chipview',
              cls: 'js-ucan-classification-chipview-classifications',
              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>'
            }
          ]
        }
      ]
    }
  ],
  etc: {
    classificationLoaded: false,
    mandatoryCategoriesLoaded: false,
    availableClassificationsLoaded: false
  },

  listeners: {
    updateClassification: 'onUpdateClassifications',
    floatingClassificationClosed: 'onFloatingClassificationClosed'
  },

  initialize: function() {
    this.etc.classificationLoaded = false;
    this.etc.mandatoryCategoriesLoaded = false;
    this.etc.availableClassificationsLoaded = false;
  },

  showClassificationPanel: function(button) {
    if (button.type === undefined) {
      if (button.getPressed()) {
        button.floatingClassification.destroy();
        button.setPressed(false);
      } else {
        button.setPressed(true);
        const classificationPanel = Ext.create('widget.floatingClassification', {
          availableClassificationTree: this.getAvailableClassificationTree(),
          objectClassifications: this.getObject().get('classifications'),
          translator: this.getTranslator(),
          ownerCmp: this
        });
        classificationPanel.showButton = button;
        classificationPanel.show();
        this.focusFloatingClassificationCombobox(classificationPanel);
        button.floatingClassification = classificationPanel;
      }
    } else {
      const floatingClassification = Ext.ComponentQuery.query('floatingClassification');
      if (floatingClassification.length > 0) {
        floatingClassification[0].destroy();
        const showPanelButton = SinkUtil.downClassFromView(this, 'js-ucan-classification-button');
        const classificationPanel = Ext.create('widget.floatingClassification', {
          availableClassificationTree: this.getAvailableClassificationTree(),
          objectClassifications: this.getObject().get('classifications'),
          width: showPanelButton.up().getSize().width,
          translator: this.getTranslator(),
          ownerCmp: this
        });
        classificationPanel.showButton = showPanelButton;
        classificationPanel.show();
        this.focusFloatingClassificationCombobox(classificationPanel);
        showPanelButton.floatingClassification = classificationPanel;
      } else {
        const classificationPanel = Ext.create('widget.floatingClassification', {
          availableClassificationTree: this.getAvailableClassificationTree(),
          objectClassifications: this.getObject().get('classifications'),
          width: button.currentTarget.parentElement.parentElement.parentElement.clientWidth,
          translator: this.getTranslator(),
          ownerCmp: this
        });
        classificationPanel.showButton = button;
        classificationPanel.show();
        this.focusFloatingClassificationCombobox(classificationPanel);
        button.floatingClassification = classificationPanel;
      }
    }
  },

  showClassificationPanelFromMandatory: function() {
    if (!this.getDisabled()) {
      this.showClassificationPanel(SinkUtil.downClassFromView(this, 'js-ucan-classification-button'));
    }
  },

  onRemoveClassification: function(_chipview, location) {
    if (!this.getDisabled()) {
      this.getChipviewClassification().remove(location.record);
      this.getObject().set('classifications',
          this.getObject().get('classifications').filter(classification => classification !== location.record.get('tagId')));
      if (!Ext.isEmpty(location.record.childNodes)) {
        location.record.childNodes.forEach(child => {
          this.getChipviewClassification().remove(child);
          this.getObject().set('classifications',
              this.getObject().get('classifications').filter(classification => classification !== child.get('tagId')));
        });
      }
      this.checkSetMandatoryCategories();
    }
    return false;
  },

  updateMandatoryCategories: function() {
    this.etc.mandatoryCategoriesLoaded = true;
    this.checkSetMandatoryCategories();
  },

  updateAvailableClassificationTree: function() {
    this.etc.availableClassificationsLoaded = true;
    this.checkSetObjectClassificationObjects();
  },

  onUpdateClassifications: function() {
    this.checkSetMandatoryCategories();
  },

  updateObject: function() {
    this.checkSetObjectClassificationObjects();
  },

  checkSetObjectClassificationObjects: function() {
    if (this.etc.availableClassificationsLoaded && !Ext.isEmpty(this.getObject())
        && !Ext.isEmpty(this.getAvailableClassificationTree())) {
      const classificationObjects = [];
      this.getObject().get('classifications').forEach(classificationId => {
        const classificationRecord = this.getAvailableClassificationTree().findNode('tagId', classificationId);
        if (!Ext.isEmpty(classificationRecord)) {
          classificationObjects.push(classificationRecord);
        }
      });
      this.getChipviewClassification().loadData(classificationObjects);
      this.etc.classificationLoaded = true;
      this.checkSetMandatoryCategories();
    }
  },

  checkSetMandatoryCategories: function() {
    if (this.etc.mandatoryCategoriesLoaded && this.etc.classificationLoaded) {
      const mandatoryCategories = this.getMandatoryCategories();
      if (!Ext.isEmpty(mandatoryCategories)) {
        let remainingMandatories = [...this.getMandatoryCategories().getRange()];
        this.getChipviewClassification().getRange().forEach(classification => {
          const mandatoryCategory = mandatoryCategories.findRecord('id', classification.get('categoryId'));
          if (!Ext.isEmpty(mandatoryCategory)) {
            remainingMandatories = remainingMandatories.filter(mandatory => mandatory.get('id') !== mandatoryCategory.get('id'));
            classification.set('mandatoryCls', 'ucan-classification-chipview-classifications-mandatory');
            this.removeMandatoryCategoryComponent(mandatoryCategory);
          }
        });
        remainingMandatories.forEach(remainingMandatoryCategory => this.addMandatoryCategoryComponent(remainingMandatoryCategory));
      }
    }
  },

  addMandatoryCategoryComponent: function(category) {
    if (Ext.isEmpty(
        SinkUtil.downClassFromView(this, 'js-ucan-classification-component-mandatory-category-' + category.get('id')))) {
      this.getClassificationChipview().add(Ext.create(
          'Ext.Component', {
            cls: 'js-ucan-classification-component-mandatory-category '
                + 'js-ucan-classification-component-mandatory-category-' + category.get('id') + ' '
                + 'ucan-classification-component-mandatory ucan-classification-minor-margin-right',
            html: category.get('description'),
            listeners: {
              click: {
                element: 'element',
                fn: 'showClassificationPanelFromMandatory'
              }
            }
          }));
    }
  },

  removeMandatoryCategoryComponent: function(category) {
    const component = this.getMandatoryCmp(category);
    if (!Ext.isEmpty(component)) {
      component.destroy();
    }
  },

  onFloatingClassificationClosed: function() {
    const classificationButton = SinkUtil.downClassFromView(this, 'js-ucan-classification-button');
    classificationButton.setPressed(false);
    classificationButton.floatingClassification = null;
  },

  focusFloatingClassificationCombobox: function(classificationPanel) {
    setTimeout(() => {
      SinkUtil.downClassFromView(classificationPanel, 'js-ucan-floating-classification-combobox').focus();
    }, 300);
  },

  hideDialog: function(dialog) {
    dialog.hide();
  },

  // GETTER

  getClassificationButton: function() {
    return SinkUtil.downClassFromView(this, 'js-ucan-classification-button');
  },

  getFloatingClassificationPanel: function() {
    return this.getClassificationButton().floatingClassification;
  },

  getClassificationChipview: function() {
    let chipview = SinkUtil.downClassFromView(this, 'js-ucan-classification-chipview-classifications');
    if (Ext.isEmpty(chipview)) {
      chipview = SinkUtil.downClassFromView(SinkUtil.downClassFromView(this, 'js-ucan-classification-button').floatingClassification,
          'js-ucan-classification-chipview-classifications');
    }
    return chipview;
  },

  getMandatoryCmp: function(category) {
    let component = SinkUtil.downClassFromView(this, 'js-ucan-classification-component-mandatory-category-' + category.get('id'));
    if (Ext.isEmpty(component)) {
      const floatingClassification = SinkUtil.downClassFromView(this, 'js-ucan-classification-button').floatingClassification;
      if (!Ext.isEmpty(floatingClassification)) {
        component = SinkUtil.downClassFromView(floatingClassification,
            'js-ucan-classification-component-mandatory-category-' + category.get('id'));
      }
    }
    return component;
  },

  getClassificationLabel: function() {
    return SinkUtil.downClassFromView(this, 'js-ucan-classification-label-classification');
  },

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

  updateDisabled: function(config) {
    SinkUtil.downClassFromView(this, 'js-ucan-classification-button').setDisabled(config);
    SinkUtil.downClassFromView(this, 'js-ucan-classification-chipview-classifications').setDisabled(config);
    SinkUtil.downClassFromView(this, 'js-ucan-classification-chipview-classifications').setClosable(!config);
  }
});