docs/docs-web/src/main/webapp/src/partial/docs/settings.group.edit.html

<span class="fas fa-circle-notch fa-spin" ng-show="!group && isEdit()"></span>

<div ng-show="group || !isEdit()">
  <h2 ng-show="isEdit()" translate="settings.group.edit.edit_group_title" translate-values="{ name: group.name }"></h2>
  <h2 ng-show="!isEdit()" translate="settings.group.edit.add_group_title"></h2>

  <form class="form-horizontal" name="editGroupForm" novalidate>
    <div class="form-group" ng-class="{ 'has-error': !editGroupForm.name.$valid && editGroupForm.$dirty, success: editGroupForm.name.$valid }">
      <label class="col-sm-2 control-label" for="inputName">{{ 'settings.group.edit.name' | translate }}</label>
      <div class="col-sm-7">
        <input name="name" type="text" id="inputName" required class="form-control"
               ng-pattern="/^[a-zA-Z0-9_]*$/"
               ng-minlength="3" ng-maxlength="50" ng-attr-placeholder="{{ 'settings.group.edit.name' | translate }}" ng-model="group.name"/>
      </div>

      <div class="col-sm-3">
        <span class="help-block" ng-show="editGroupForm.name.$error.required && editGroupForm.$dirty">{{ 'validation.required' | translate }}</span>
        <span class="help-block" ng-show="editGroupForm.name.$error.minlength && editGroupForm.$dirty">{{ 'validation.too_short' | translate }}</span>
        <span class="help-block" ng-show="editGroupForm.name.$error.maxlength && editGroupForm.$dirty">{{ 'validation.too_long' | translate }}</span>
        <span class="help-block" ng-show="editGroupForm.name.$error.pattern && editGroupForm.$dirty">{{ 'validation.alphanumeric' | translate }}</span>
      </div>
    </div>

    <div class="form-group">
      <label class="col-sm-2 control-label" for="inputParent">{{ 'settings.group.edit.parent_group' | translate }}</label>

      <div class="col-sm-7">
        <input name="parent" type="text" id="inputParent" class="form-control" autocomplete="off"
               ng-attr-placeholder="{{ 'settings.group.edit.search_group' | translate }}" ng-model="group.parent"
               uib-typeahead="group for group in getGroupTypeahead($viewValue)"
               typeahead-wait-ms="200" typeahead-editable="false" />
      </div>
    </div>

    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <button type="submit" class="btn btn-primary" ng-click="edit()" ng-disabled="!editGroupForm.$valid">
          <span class="fas fa-pencil-alt"></span> {{ isEdit() ? 'save' : 'add' | translate }}
        </button>
        <button type="button" class="btn btn-danger" ng-click="remove()" ng-show="isEdit()">
          <span class="fas fa-trash"></span> {{ 'delete' | translate }}
        </button>
      </div>
    </div>
  </form>

  <div ng-show="isEdit()">
    <h3>{{ 'settings.group.edit.members' | translate }}</h3>
    <form class="form-horizontal" novalidate>
      <div class="form-group">
        <label class="col-sm-2 control-label" for="inputMember">{{ 'settings.group.edit.new_member' | translate }}</label>
        <div class="col-sm-7">
          <input name="member" type="text" id="inputMember" class="form-control" ng-model="member"
                 ng-attr-placeholder="{{ 'settings.group.edit.search_user' | translate }}"
                 uib-typeahead="user for user in getUserTypeahead($viewValue)" typeahead-on-select="addMember($item)"
                 typeahead-wait-ms="200" typeahead-editable="false" autocomplete="off" />
        </div>
      </div>

      <div class="form-group">
        <label class="col-sm-2 control-label">{{ 'settings.group.edit.members' | translate }}</label>
        <div class="col-sm-7">
          <span ng-repeat="member in group.members">
            <span class="btn btn-default"
               ng-click="removeMember(member)">
              {{ member }}
              <span class="fas fa-times"></span>
            </span>&nbsp;
          </span>
        </div>
      </div>
    </form>
  </div>
</div>