contactcats/ang/crmContactcats/crmContactCategorySettings.html

<div ng-if="$ctrl.categoryDefinitions === null">
  Loading...
</div>
<form ng-if="$ctrl.categoryDefinitions"
      ng-show="$ctrl.view === 'list'"
      crm-ui-id-scope>

  <!-- I can see use of
    presentation order/grouping
    short title, "amazing"
    longer title/description. "regular givers who..."
  -->

  <ol class="crm-catmap {{$ctrl.moveIdx !== null ? 'moving' : ''}}" >
    <li ng-repeat="(idx, row) in $ctrl.categoryDefinitions" class="{{idx === $ctrl.moveIdx ? 'being-moved' : ''}} {{row.deleted ? 'deleted' : ''}}">
      <!-- higher idx : {{idx}}  moveIdx {{$ctrl.moveIdx}} -->
      <div class="crm-contact-cats-move-target" ng-show="(idx === 0 && $ctrl.moveIdx > 0)" >
        <button ng-click="$ctrl.moveTo(0)" >{{ts('Move to here')}}</button>
      </div>
      <div class=panel>
      <div class=panel-body>
        <span style="color: {{row.color ? row.color : 'inherit'}};" >
          <i ng-if="row.icon" class="crm-i {{row.icon}}" ></i>
          {{row.label}}
        </span>

          <!-- button group? -->
          <span>
            <button ng-if="$ctrl.moveIdx === null && !row.deleted" ng-click="$ctrl.edit(idx)" >
              <i class="fa-pencil crm-i"></i> {{ts('Edit')}}
            </button>
            <button ng-if="$ctrl.moveIdx === null && !row.deleted" ng-click="$ctrl.deleteCategory(idx)">
              <i class="fa-trash crm-i"></i> {{ts('Delete')}}
            </button>
            <button ng-if="$ctrl.moveIdx === null && row.deleted" ng-click="row.deleted = false;">
              <i class="fa-trash crm-i"></i> {{ts('Un-Delete')}}
            </button>
            <button ng-if="$ctrl.moveIdx === null && !row.deleted" ng-click="$ctrl.moveIdx = idx" >
              <i class="fa-pencil crm-i"></i> {{ts('Move')}}
            </button>
            <button ng-if="$ctrl.moveIdx !== null && idx === $ctrl.moveIdx" ng-click="$ctrl.moveIdx = null" >
              <i class="fa-pencil crm-i"></i> {{ts('Cancel Move')}}
            </button>
          </span>
      </div>
      </div>
      <!-- lower idx : {{idx}}  moveIdx {{$ctrl.moveIdx}} -->
      <div class="crm-contact-cats-move-target" ng-show="($ctrl.moveIdx < idx) || (idx +1 < $ctrl.moveIdx)" >
        <button ng-click="$ctrl.moveTo(idx+1)" >{{ts('Move to here')}}</button>
      </div>
    </li>
  </ol>

  <p>
    <button ng-click="$ctrl.edit(-1)"><i class="crm-i fa-add"></i> Add new category</button>
  </p>



  <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>


<form ng-show="$ctrl.view === 'edit'"
      crm-ui-id-scope>
  <div>
    <h2 ng-if="$ctrl.categoryDefinitions.length > $ctrl.categoryToEdit.idx">{{ts('Edit category %1', {1 : $ctrl.categoryDefinitions[$ctrl.categoryToEdit.idx].label })}}</h2>
    <h2 ng-if="$ctrl.categoryDefinitions.length == $ctrl.categoryToEdit.idx">{{ts('Add new category')}}</h2>
                                                                                            
    <div crm-ui-field="{name: 'cc.label', title: ts('Category label'), required: 1}" >
      <input
          crm-ui-id="ci.label"
          name="label"
          ng-model="$ctrl.categoryToEdit.label"
          class="crm-form-text"
          placeholder="{{ts('0123 Super lovely supporters')}}"
          style="width: 100%"
      />
    </div>

    <div crm-ui-field="{name: 'cc.color', title: ts('Color')}" >
      <input
          crm-ui-id="ci.color"
          name="color"
          type="color"
          ng-model="$ctrl.categoryToEdit.color"
          class="crm-form-color"
      />
    </div>

    <div crm-ui-field="{name: 'cc.icon', title: ts('Icon')}" >
      <input
          crm-ui-id="cc.icon"
          crm-ui-icon-picker
          ng-model="$ctrl.categoryToEdit.icon"
          />
    </div>

    <div crm-ui-field="{name: 'cc.description', title: ts('Description')}" >
      <input
          crm-ui-id="ci.description"
          name="description"
          ng-model="$ctrl.categoryToEdit.description"
          class="crm-form-textarea"
          style="width: 100%"
      />
    </div>

    <div crm-ui-field="{name: 'cc.search_type', title: ts('How are contacts identified?')}" >
      <select
          crm-ui-id="ci.search_type"
          name="search_type"
          ng-model="$ctrl.categoryToEdit.search_type"
          ng-change="$ctrl.fixSearchData()"
      >
        <option value="search" >{{ts('Search Kit search')}}</option>
        <option value="group" >{{ts('Group')}}</option>
        <!-- future? <option value="sql_template" >{{ts('SQL template')}}</option> -->
      </select>
    </div>

    <!-- fields for search kit -->
    <div ng-if="$ctrl.categoryToEdit.search_type === 'search'" crm-ui-field="{name:'cc.saved_search_id', title: ts('Search Kit search')}" >
      <input crm-ui-id='cc.saved_search_id' crm-entityref="{entity: 'SavedSearch', select: {allowClear:false}}"
             ng-model="$ctrl.categoryToEdit.search_data.saved_search_id" />
    </div>

    <!-- fields for groups -->
    <div ng-if="$ctrl.categoryToEdit.search_type === 'group'" crm-ui-field="{name:'cc.group_id', title: ts('Group')}" >
      <input crm-ui-id='cc.group_id' crm-entityref="{entity: 'Group', select: {allowClear:false}}"
             ng-model="$ctrl.categoryToEdit.search_data.group_id" />
    </div>


    <!-- type=button means when you hit Enter in an input above this button is skipped while it looks for the first submit button. -->
    <button type=button ng-click="$ctrl.view = 'list'" >Cancel</button>
    <button ng-click="$ctrl.updateEditedThing()" >Done</button>

  </div>
</form>

<!-- <pre>{{ $ctrl.categoryToEdit }}</pre> -->