contactcats/ang/crmContactcats/crmContactCategorySettings.html

<div ng-if="!$ctrl.catmap">
  Loading...
</div>
<form ng-if="$ctrl.catmap" crm-ui-id-scope>
  <button ng-click="$ctrl.catmap.unshift({groupID: '', name:''})"><i class="crm-i fa-plus"></i> Add category</button>
  <ol class="crm-catmap">
    <li ng-repeat="(idx, row) in $ctrl.catmap">
      <select ng-if="row.groupID === '' || row.groupID > 0"
        crm-ui-select="{placeholder:'Select group',allowClear:false}" ng-model="$ctrl.catmap[idx].groupID"
        style="width: 18rem">
        <option ng-repeat="(grpIdx, grp) in $ctrl.getGroupsFor(idx)" value="{{grp.id}}">{{grp.title}}</option>
      </select>
      <div ng-if="row.groupID !== '' && row.groupID == 0" style="width: 18rem;display: inline-block;">
        Default
      </div>
      <div class=name-input-wrapper>
        <label crm-ui-for="name{{idx}}">Label</label>
        <input crm-ui-id="name{{idx}}" type=text ng-model="$ctrl.catmap[idx].name"
          ng-keydown="$ctrl.nameKeydown($event, idx)" />
        <div class="hint description">
          {{ts('Use the Up/Down arrow keys to re-order')}}
        </div>
      </div>
      <div>
        <button ng-click="$ctrl.deleteRow(idx)"><i class="fa-trash crm-i"></i> Delete</button>
      </div>
    </li>
  </ol>
  <p>
    <button ng-click="$ctrl.save()"><i class="crm-i fa-save"></i> Save</button>
  </p>
  <div ng-if="$ctrl.saved" class="help">Categories saved. Contacts will be updated shortly (when the next Scheduled
    Job run
    happens).</div>
</form>