r2js/r2admin

View on GitHub
assets/js/scripts/fields/relation.js

Summary

Maintainability
C
1 day
Test Coverage
import $ from 'jquery';
import debug from 'debug';
import 'selectize';

global.jQuery = $;
const log = debug('r2admin:field:relation');

const select2nested = (data, valueField, displayField, isMultiple, prefix, initPrefix = '-') => {
  let r = [];
  let getPrefix = prefix;
  if (!getPrefix) {
    getPrefix = isMultiple ? '' : `${initPrefix} `;
  }

  for (const d in data) { // eslint-disable-line
    if (data.hasOwnProperty(d) && data[d][displayField]) { // eslint-disable-line
      r.push({ [valueField]: data[d][valueField], [displayField]: `${getPrefix}${data[d][displayField]}` });

      if (data[d].children) {
        const addPrefix = isMultiple ? `${getPrefix}${data[d][displayField]} / ` : initPrefix + getPrefix;
        r = r.concat(
          select2nested(data[d].children, valueField, displayField, isMultiple, addPrefix)
        );
      }
    }
  }

  return r;
};

const select = (el) => {
  const data = el.data();
  const { ref, display, value, qtype, placeholder } = data;
  const isMultiple = el.attr('multiple') === 'multiple';
  const { sort = display } = data;

  if (!display) {
    return log(`${ref}, data-display not found`);
  }

  return el.selectize({
    placeholder,
    valueField: '_id',
    labelField: display,
    searchField: display,
    score: () => () => 1,
    load(q, cb) {
      if (!q.length) {
        return cb();
      }

      return $.get(`/admin/${ref}/search`, { term: q }, (res) => {
        cb(res.data);
      }, 'json');
    },
    onInitialize() {
      const self = this;
      const q = { limit: 100, sort };

      if (qtype === 'fullArrayTree') {
        $.get(`/admin/${ref}/search`, Object.assign({}, { qType: 'fullArrayTree' }), (res) => {
          const nested = select2nested(res.data, '_id', display, isMultiple);
          const getValue = value.split(',');
          const vals = [];
          self.clearOptions();
          nested.forEach((item) => {
            self.addOption(item);
            if (getValue.includes(item._id)) {
              vals.push(item._id);
            }
          });

          if (vals.length) {
            self.setValue(vals);
          }
        }, 'json');
      } else {
        if (value) {
          const getIds = Object.assign({}, q, { ids: value });
          $.get(`/admin/${ref}/search`, getIds, (res) => {
            self.clear();
            const vals = [];
            res.data.forEach((item) => {
              self.updateOption(item._id, item); // eslint-disable-line
              vals.push(item._id); // eslint-disable-line
            });

            if (vals.length) {
              self.setValue(vals);
            }
          }, 'json');
        }

        $.get(`/admin/${ref}/search`, q, (res) => {
          if (!value) {
            self.clear();
          }

          res.data.forEach((item) => {
            self.addOption(item);
          });
        }, 'json');
      }
    },
    onFocus() {
      el.parent().addClass('fl-has-focus');
    },
    onBlur() {
      el.parent().removeClass('fl-has-focus');
    },
    onChange(elValue) {
      if (!elValue || !elValue.length) {
        return el.parent().removeClass('fl-is-active');
      }

      return el.parent().addClass('fl-is-active');
    },
  });
};

export default () => {
  $('.f-relation').each(function () {
    select($(this));
  });
};