ui/lib/nodes/addon/components/modal-edit-node-template/component.js

import Component from '@ember/component';
import ModalBase from 'shared/mixins/modal-base';
import layout from './template';
import {
  get, set, computed, observer, setProperties
} from '@ember/object';
import { inject as service } from '@ember/service';
import { loadScript, loadStylesheet, proxifyUrl } from 'shared/utils/load-script';
import { empty } from '@ember/object/computed';
import { all } from 'rsvp';

export default Component.extend(ModalBase, {
  growl:        service(),
  modalService: service('modal'),
  globalStore:  service(),

  layout,
  model:            null,
  driver:           null,
  onAdd:            null,

  loading:          true,
  editing:          false,
  cloning:          false,
  allNodeDrivers:   null,

  needReloadSchema: false,
  reloadingSchema:  false,
  schemaReloaded:   false,
  customDrivers:    null,

  showPicker:       empty('model.id'),

  didReceiveAttrs() {
    const opts          = get(this, 'modalService.modalOpts') || {};
    const originalModel = get(opts, 'nodeTemplate');
    let { driver }      = this;
    let override        = get(opts, 'driver');
    let newModel        = null;
    let editing         = false;
    let cloning         = false;

    if (get(opts, 'edit')) {
      newModel = originalModel.clone();
      editing  = true;
    } else if (get(opts, 'clone')) {
      newModel = originalModel.cloneForNew();
      editing  = true;
      cloning  = true;
    }


    if ( originalModel ) {
      setProperties(this, {
        model:   newModel,
        originalModel,
        editing,
        cloning,
      })
    } else {
      set(this, 'model', get(this, 'globalStore').createRecord({ type: 'nodeTemplate', }));
    }

    if ( override ) {
      driver = override;

      set(this, 'showPicker', false);
    }

    set(this, 'onAdd', get(opts, 'onAdd'));

    return get(this, 'globalStore').findAll('nodeDriver').then((allNodeDrivers) => {
      set(this, 'allNodeDrivers', allNodeDrivers);

      const active = get(this, 'availableDrivers');

      if ( !driver || !active.findBy('name', driver) ) {
        driver = get(active, 'firstObject.name');
      }

      set(this, 'driver', driver);

      return this.loadCustomUi().then(() => {
        set(this, 'loading', false);
      });
    }).catch((err) => {
      get(this, 'growl').fromError(err);

      this.sendAction('close');
    });
  },

  actions: {
    switchDriver(name) {
      set(this, 'driver', name);
    },

    saved() {
      const fn    = get(this, 'onAdd');
      const model = get(this, 'model');

      if ( fn ) {
        fn(model);
      }
    },

    hidePicker() {
      this.set('showPicker', false);
    },
  },

  reloadSchema: observer('needReloadSchema', function() {
    if ( !get(this, 'reloadingSchema') && get(this, 'needReloadSchema') ) {
      set(this, 'reloadingSchema', true);

      get(this, 'globalStore').findAll('schema', {
        url:         '/v3/schemas',
        forceReload: true
      }).then(() => {
        setProperties(this, {
          schemaReloaded: true,
          reloadSchema:   false,
        });
      });
    }
  }),

  availableDrivers: computed('allNodeDrivers.@each.state', 'schemaReloaded', function() {
    const out     = [];
    const drivers = get(this, 'allNodeDrivers').filterBy('state', 'active').sortBy('name');

    drivers.forEach((driver) => {
      const configName   = `${ get(driver, 'name') }Config`;
      const driverSchema = get(this, 'globalStore').getById('schema', configName.toLowerCase());

      if ( driverSchema ) {
        out.push(driver);
      } else {
        set(this, 'needReloadSchema', true);
      }
    });

    return out;
  }),

  availableDriversGroups: computed('availableDrivers.@each.state', function() {
    const { availableDrivers } = this;
    const group                = [];
    let groupIndex             = 0;

    availableDrivers.forEach((item, index) => {
      if (index % 5 === 0) {
        group.push([item]);
        groupIndex++;
      } else {
        group[groupIndex - 1].push(item);
      }
    });

    return group;
  }),

  driverObj: computed('driver', function() {
    return get(this, 'availableDrivers').filterBy('name', get(this, 'driver'))[0];
  }),

  // Loads the custom UI CSS/JS for drivers that have a uiUrl,
  loadCustomUi() {
    const promises = [];

    let customDrivers = (get(this, 'customDrivers') || []);

    get(this, 'availableDrivers').forEach((driver) => {
      const name = get(driver, 'name');
      const uiUrl = get(driver, 'uiUrl');

      if ( uiUrl ) {
        if (!customDrivers.includes(name)) {
          customDrivers.pushObject(name);
        }
        const jsUrl  = proxifyUrl(driver.uiUrl, this.get('app.proxyEndpoint'));
        const cssUrl = proxifyUrl(driver.uiUrl.replace(/\.js$/, '.css'), this.get('app.proxyEndpoint'));

        promises.push(loadScript(jsUrl, `driver-ui-js-${ name }`));
        promises.push(loadStylesheet(cssUrl, `driver-ui-css-${ name }`));
      }
    });

    set(this, 'customDrivers', customDrivers);

    return all(promises);
  },

});