SearchKit - Use server-side preprocessing for editable fields

[civicrm-core.git] / ext / search_kit / ang / crmSearchAdmin / displays / colType / field.html

<div class="form-inline crm-search-admin-flex-row" ng-if=":: $ctrl.parent.canBeLink(col)">
  <label title="{{:: ts('Display as clickable link') }}" >
    <input type="checkbox" ng-checked="col.link" ng-click="$ctrl.parent.toggleLink(col)" >
    {{:: ts('Link') }}
  </label>
  <select class="form-control" ng-model="col.link.target" ng-if="col.link">
    <option value>{{:: ts('Open normally') }}</option>
    <option value="_blank">{{:: ts('New tab') }}</option>
    <option value="crm-popup">{{:: ts('Popup dialog') }}</option>
  </select>
  <crm-search-admin-link-select ng-if="col.link" link="col.link" on-change="$ctrl.parent.onChangeLink(col, before, after)" api-entity="$ctrl.apiEntity" api-params="$ctrl.apiParams" links=":: $ctrl.parent.getLinks(col.key)">
  </crm-search-admin-link-select>
</div>
<div class="form-inline crm-search-admin-flex-row">
  <label>
    <input type="checkbox" ng-checked="col.title" ng-click="col.title = col.title ? null : $ctrl.parent.getFieldLabel(col.key)" >
    {{:: ts('Tooltip') }}
  </label>
  <input class="form-control crm-flex-1" type="text" ng-model="col.title" ng-if="col.title" ng-model-options="{updateOn: 'blur'}" />
  <crm-search-admin-token-select ng-if="col.title" model="col" field="title" suffix=":label"></crm-search-admin-token-select>
</div>
<div class="form-inline">
  <label>
    <input type="checkbox" ng-checked="col.image" ng-click="$ctrl.parent.toggleImage(col)" >
    {{:: ts('Image') }}
  </label>
  <div class="crm-search-admin-flex-row" ng-if="col.image">
    <label>{{:: ts('Width') }}</label>
    <input type="number" min="1" class="form-control crm-flex-1" placeholder="Auto" ng-model="col.image.width">
    <label>{{:: ts('Height') }}</label>
    <input type="number" min="1" class="form-control crm-flex-1" placeholder="Auto" ng-model="col.image.height">
    <label>{{:: ts('Alt Text') }}</label>
    <input type="text" class="form-control crm-flex-2" ng-model="col.image.alt">
    <crm-search-admin-token-select api-entity="$ctrl.apiEntity" api-params="$ctrl.apiParams" model="col.image" field="alt"></crm-search-admin-token-select>
  </div>
</div>
<div class="form-inline crm-search-admin-flex-row">
  <label title="{{:: ts('Change the contents of this field, or combine multiple field values.') }}">
    <input type="checkbox" ng-checked="col.rewrite" ng-click="$ctrl.parent.toggleRewrite(col)" >
    {{:: ts('Rewrite') }}
  </label>
  <input type="text" class="form-control crm-flex-1" ng-if="col.rewrite" ng-model="col.rewrite" ng-model-options="{updateOn: 'blur'}">
  <crm-search-admin-token-select ng-if="col.rewrite" model="col" field="rewrite" suffix=":label"></crm-search-admin-token-select>
</div>
<div class="form-inline">
  <label ng-if="$ctrl.parent.canBeEditable(col)" title="{{:: ts('Users will be able to click to edit this field.') }}">
    <input type="checkbox" ng-checked="col.editable" ng-click="$ctrl.parent.toggleEditable(col)">
    {{:: ts('In-Place Edit') }}
  </label>
  <label ng-if="!$ctrl.parent.canBeEditable(col)" class="disabled" title="{{:: ts('Read-only or rewritten fields cannot be editable.') }}">
    <input type="checkbox" disabled>
    {{:: ts('In-Place Edit') }}
  </label>
</div>