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">
      <div class="group-input-wrapper">
        <select
          ng-if="row.groupID === '' || row.groupID > 0"
          crm-ui-select="{placeholder:'Select group',allowClear:false,label:'Group'}"
          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>
      <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>