SearchKit - Expose default display to the UI

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

<div id="bootstrap-theme" class="crm-search">
  <h1 crm-page-title>{{ $ctrl.entityTitle + ': ' + $ctrl.savedSearch.label }}</h1>
  <div crm-ui-debug="$ctrl.savedSearch"></div>

  <!--This warning will show if bootstrap is unavailable. Normally it will be hidden by the bootstrap .collapse class.-->
  <div class="messages warning no-popup collapse">
    <p>
      <i class="crm-i fa-exclamation-triangle" aria-hidden="true"></i>
      <strong>{{:: ts('Bootstrap theme not found.') }}</strong>
    </p>
    <p>{{:: ts('This screen may not work correctly without a bootstrap-based theme such as Shoreditch installed.') }}</p>
  </div>

  <form>
    <div class="crm-flex-box">
      <div class="nav-stacked">
        <input id="crm-saved-search-label" class="form-control" ng-model="$ctrl.savedSearch.label" type="text" required placeholder="{{:: ts('Untitled Search') }}" />
      </div>
      <div class="crm-flex-4 form-inline">
        <label for="crm-search-main-entity">{{:: ts('Search for') }}</label>
        <input id="crm-search-main-entity" class="form-control huge collapsible-optgroups" ng-model="$ctrl.savedSearch.api_entity" crm-ui-select="::{allowClear: false, data: mainEntitySelect}" ng-disabled="$ctrl.savedSearch.id" />

        <div class="form-group pull-right">

          <div class="btn-group" ng-if="$ctrl.afformEnabled && $ctrl.savedSearch.id">
            <button type="button" ng-click="$ctrl.openAfformMenu = true;" class="btn dropdown-toggle btn-primary-outline" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <i class="crm-i fa-list-alt"></i>
              {{ ($ctrl.afformCount !== undefined) ? ($ctrl.afformCount === 1 ? ts('1 Form') : ts('%1 Forms', {1: $ctrl.afformCount})) : ts('Forms...') }}
              <span class="caret"></span>
            </button>
            <ul class="dropdown-menu dropdown-menu-right" ng-if=":: $ctrl.openAfformMenu">
              <li ng-if=":: $ctrl.afformAdminEnabled">
                <a target="_blank" href="{{:: $ctrl.afformPath + '#/create/search/' + $ctrl.savedSearch.name }}">
                  <i class="fa fa-plus"></i> {{:: ts('Create form for search results table') }}
                </a>
              </li>
              <li ng-repeat="display in $ctrl.savedSearch.displays" ng-if="$ctrl.afformAdminEnabled && display.id">
                <a target="_blank" href="{{:: $ctrl.afformPath + '#/create/search/' + $ctrl.savedSearch.name + '.' + display.name }}">
                  <i class="fa fa-plus"></i> {{:: ts('Create form for %1', {1: display.label}) }}
                </a>
              </li>
              <li class="divider" role="separator" ng-if="$ctrl.afformAdminEnabled && $ctrl.afforms.length"></li>
              <li ng-if="!$ctrl.afforms" class="disabled">
                <a href>
                  <i class="crm-i fa-spinner fa-spin"></i>
                </a>
              </li>
              <li ng-repeat="afform in $ctrl.afforms" title="{{:: $ctrl.afformAdminEnabled ? ts('Edit form') : '' }}">
                <a target="_blank" ng-href="{{:: afform.link }}">
                  <i class="crm-i {{:: $ctrl.afformAdminEnabled ? 'fa-pencil-square-o' : 'fa-list-alt' }}"></i>
                  {{:: afform.title }}
                </a>
              </li>
            </ul>
          </div>

          <div class="btn-group" ng-if="$ctrl.savedSearch.id">
            <a ng-href="{{ $ctrl.searchDisplayPath + '#/display/' + $ctrl.savedSearch.name }}" target="_blank" class="btn btn-primary-outline" title="{{:: ts('View search results table') }}">
              <i class="crm-i fa-external-link"></i>
              {{:: ts('View') }}
            </a>
            <button type="button" ng-click="$ctrl.openDisplayMenu = true;" class="btn btn-primary-outline dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <span class="caret"></span>
            </button>
            <ul class="dropdown-menu dropdown-menu-right" ng-if=":: $ctrl.openDisplayMenu">
              <li title="{{:: ts('View search results table') }}">
                <a ng-href="{{ $ctrl.searchDisplayPath + '#/display/' + $ctrl.savedSearch.name }}" target="_blank">
                  <i class="crm-i fa-table"></i>
                  {{:: ts('Search results table') }}
                </a>
              </li>
              <li ng-repeat="display in $ctrl.savedSearch.displays" ng-if="display.id" ng-class="{disabled: display.acl_bypass}" title="{{:: display.acl_bypass ? ts('Display has permissions disabled') : ts('View display') }}">
                <a ng-href="{{ display.acl_bypass ? '' : $ctrl.searchDisplayPath + '#/display/' + $ctrl.savedSearch.name + '/' + display.name }}" target="_blank">
                  <i class="crm-i {{ display.acl_bypass ? 'fa-unlock' : $ctrl.displayTypes[display.type].icon }}"></i>
                  {{ display.label }}
                </a>
              </li>
            </ul>
          </div>

          <div class="btn-group">
            <button type="button" class="btn" ng-class="{'btn-primary': status === 'unsaved', 'btn-warning': status === 'saving', 'btn-success': status === 'saved'}" ng-disabled="status !== 'unsaved'" ng-click="$ctrl.save()">
              <i class="crm-i" ng-class="{'fa-check': status !== 'saving', 'fa-spin fa-spinner': status === 'saving'}"></i>
              <span ng-if="status === 'saved'">{{:: ts('Saved') }}</span>
              <span ng-if="status === 'unsaved'">{{:: ts('Save') }}</span>
              <span ng-if="status === 'saving'">{{:: ts('Saving...') }}</span>
            </button>
          </div>

        </div>

      </div>
    </div>
    <div class="crm-flex-box">
      <ul class="nav nav-pills nav-stacked" ng-include="'~/crmSearchAdmin/tabs.html'"></ul>
      <div class="crm-flex-4" ng-switch="controls.tab">
        <div ng-switch-when="compose">
          <div ng-include="'~/crmSearchAdmin/compose.html'"></div>
          <crm-search-admin-results-table search="$ctrl.savedSearch"></crm-search-admin-results-table>
        </div>
        <div ng-switch-when="group">
          <fieldset ng-include="'~/crmSearchAdmin/group.html'"></fieldset>
        </div>
        <div ng-switch-default>
          <div ng-repeat="display in $ctrl.savedSearch.displays" ng-if="controls.tab === ('display_' + $index)">
            <crm-search-admin-display display="display" saved-search="$ctrl.savedSearch"></crm-search-admin-display>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>