hino / app / components / app-input-combobox.js
app-input-combobox.js
Raw
import {
  not,
  notEmpty,
  and,
  or,
  readOnly,
  alias
} from '@ember/object/computed';

import Component from '@ember/component';
import { defineProperty } from '@ember/object';

export default Component.extend({
  classNames: ['validated-input'],
  classNameBindings: ['showErrorClass:has-error', 'isValid:has-success'],
  name: '',
  options: null,
  model: null,
  value: null,
  type: 'text',
  valuePath: '',
  placeholder: '',
  primaryValue: 'name',
  label: '',
  disable: false,
  isEditable: true,
  validation: null,
  showValidations: false,
  allowClear: false,
  didValidate: false,

  notValidating: not('validation.isValidating').readOnly(),
  hasContent: notEmpty('model').readOnly(),
  hasWarnings: notEmpty('validation.warnings').readOnly(),
  isValid: and('hasContent', 'validation.isTruelyValid').readOnly(),
  shouldDisplayValidations: or(
    'showValidations',
    'didValidate',
    'hasContent'
  ).readOnly(),

  showErrorClass: and(
    'notValidating',
    'showErrorMessage',
    'hasContent',
    'validation'
  ).readOnly(),
  showErrorMessage: and(
    'shouldDisplayValidations',
    'validation.isInvalid'
  ).readOnly(),
  showWarningMessage: and(
    'shouldDisplayValidations',
    'hasWarnings',
    'isValid'
  ).readOnly(),

  init() {
    this._super(...arguments);
    let valuePath = this.get('valuePath');
    defineProperty(
      this,
      'validation',
      readOnly(`modelAll.validations.attrs.${valuePath}`)
    );
    defineProperty(this, 'value', alias(`model.${valuePath}`));
  },

  actions: {
    onChangeCombo(propertyName, item) {
      this.set(propertyName, item);
      if (this.get('onChangeCombo')) {
        this.onChangeCombo(this.get('name'), propertyName, item);
      }
    },
  },

  focusOut() {
    this._super(...arguments);
    this.set('showValidations', true);
  }
});