Save Field Ng

Save Field Ng

<div ng-app="Example.saveField" ng-strict-di rg-shortcuts-app>
  <div class="ring-form" ng-controller="SaveFieldDemoCtrl">

    <div class="ring-form__group">
      <label class="ring-form__label">
        Input
      </label>

      <div class="ring-form__control">
        <rg-save-field value="data.email"
          on-save="save()">
          <input type="text"
            class="ring-input ring-input-size_md"
            ng-required="true"
            ng-pattern="/^[a-zA-Z][a-zA-Z0-9-_\.]*[@][a-zA-Z0-9-_\.]+$/"
            ng-model="data.email">
        </rg-save-field>
        <div class="ring-form__control__description">Enter valid email</div>
      </div>
    </div>

    <div class="ring-form__group">
      <label class="ring-form__label">
        Input
      </label>

      <div class="ring-form__control">
        <rg-save-field value="data.email" working-value="data.emailWorkingValue"
          on-save="save()">
          <input type="text"
            class="ring-input ring-input-size_md"
            ng-required="true"
            ng-pattern="/^[a-zA-Z][a-zA-Z0-9-_\.]*[@][a-zA-Z0-9-_\.]+$/"
            ng-model="data.emailWorkingValue">
        </rg-save-field>
        <div class="ring-form__control__description">value: {{data.email}}  working-value: {{data.emailWorkingValue}}</div>
      </div>
    </div>

    <div class="ring-form__group">
      <label class="ring-form__label">
        Textarea
      </label>

      <div class="ring-form__control">
        <rg-save-field value="data.longText"
          on-save="save()">
            <textarea type="text"
              class="ring-input ring-input-size_l"
              ng-required="true"
              ng-model="data.longText"></textarea>
        </rg-save-field>
      </div>
    </div>

    <div class="ring-form__group">
      <label class="ring-form__label">
        Textarea List Mode
      </label>

      <div class="ring-form__control">
        <rg-save-field value="data.longTextList"
          multiline="list"
          on-save="save()">
            <textarea type="text"
              name="myMultilineArea"
              class="ring-input ring-input-size_md"
              ng-model="data.longTextList"></textarea>
        </rg-save-field>
        <div class="ring-form__control__description">data.longTextList =
          {{data.longTextList}}
        </div>
      </div>
    </div>

    <div class="ring-form__group">
      <label class="ring-form__label">
        Number
      </label>

      <div class="ring-form__control">
        <rg-save-field value="data.num"
          on-save="save()">
          <input type="number"
            max="10"
            class="ring-input ring-input-size_xs"
            ng-model="data.num">
        </rg-save-field>
      </div>
    </div>

    <div class="ring-form__group">
      <label class="ring-form__label">
        Rejected Save
      </label>

      <div class="ring-form__control">
        <rg-save-field value="data.someText"
          on-save="invalidSave(value)">
          <input type="text"
            class="ring-input ring-input-size_md"
            ng-model="data.someText">
        </rg-save-field>
      </div>
    </div>

    <div class="ring-form__group">
      <label class="ring-form__label">
        Query Assist
      </label>

      <div class="ring-form__control">
        data.query={{data.query}}
        <rg-save-field value="data.query"
          on-save="save(value)">
          <rg-query-assist
            class="ring-input-size_l"
            x-data-source="queryAssistSource"
            query="data.query"
            on-apply="save"
            on-change="updateQueryAssistValue"
            placeholder="placeholder"
            hint="'Press ⇥ to complete first item'"
            hint-on-selection="'Press ↩ to complete selected item'"></rg-query-assist>
        </rg-save-field>
        <div class="ring-form__control__description">Currently there is a
          bug with "escape" shortcut
        </div>
      </div>
    </div>
  </div>

</div>

import angular from 'angular';
import SaveFieldNG from '@jetbrains/ring-ui/components/save-field-ng/save-field-ng';
import QueryAssistNG from '@jetbrains/ring-ui/components/query-assist-ng/query-assist-ng';
import '@jetbrains/ring-ui/components/input-size/input-size.scss';
import hubConfig from '@ring-ui/docs/components/hub-config';

angular.module('Example.saveField', [SaveFieldNG, QueryAssistNG]).
  config(['shortcutsProvider', 'rgSaveFieldShortcutsMode', function (shortcutsProvider, rgSaveFieldShortcutsMode) {
    shortcutsProvider.mode({
      id: 'ring-shortcuts',
      shortcuts: []
    });
    shortcutsProvider.mode(rgSaveFieldShortcutsMode);
  }]).
  controller('SaveFieldDemoCtrl', function ($scope, $q, $http) {
    $scope.data = {
      email: 'aa',
      longText: null,
      longTextList: ['one', 'two', 'three'],
      num: 10,
      someText: 'some text',
      query: 'login: guest'
    };

    var defer = $q.defer();
    defer.resolve();
    $scope.save = function () {
      console.log('data = ', $scope.data);
      return defer.promise;
    };

    $scope.invalidSave = function (currentValue) {
      if (currentValue.length < 7) {
        return $q.reject('Length of the string must be greater than 7! >> ' + currentValue);
      } else {
        return true;
      }
    };

    $scope.queryAssistSource = function ({query, caret, omitSuggestions}) {
      var config = {
        params: {
          fields: 'query,caret,styleRanges' + (omitSuggestions ? '' : ',suggestions'),
          query: query,
          caret: caret
        }
      };

      return $http.get(hubConfig.serverUri + '/api/rest/users/queryAssist', config).
        then(function (data) {
          return data.data;
        });
    };

    $scope.updateQueryAssistValue = function ({query}) {
      $scope.data.query = query;
    };
  });