pwm/client/angular/src/modules/helpdesk/helpdesk-search-table.component.html

<!--
  ~ Password Management Servlets (PWM)
  ~ http://www.pwm-project.org
  ~
  ~ Copyright (c) 2006-2009 Novell, Inc.
  ~ Copyright (c) 2009-2020 The PWM Project
  ~
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~     http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<div class="peoplesearch-header">
    <div class="basic-search-container" ng-if="!$ctrl.advancedSearch">
        <h2 id="page-content-title" ng-if="!$ctrl.advancedSearch" translate="Title_Helpdesk">Help Desk</h2>
        <ias-search-box id="input" ng-model="$ctrl.query"
                        ng-model-options="{debounce: $ctrl.inputDebounce}"
                        placeholder="{{'Placeholder_Search' | translate}}" auto-focus>
        </ias-search-box>

        <ias-button id="advanced-search-icon" class="ias-icon-button" ng-click="$ctrl.enableAdvancedSearch()"
                    ng-if="$ctrl.advancedSearchEnabled"
                    ng-attr-title="{{ 'Title_AdvancedSearch' | translate }}">
            <ias-icon class="ias-selected" icon="search_advanced"></ias-icon>
        </ias-button>
    </div>
    <div class="advanced-search-container" ng-if="$ctrl.advancedSearch">
        <div class="attribute-row" ng-repeat="query in $ctrl.queries">
            <select ng-model="query.key" ng-change="$ctrl.onAdvancedSearchAttributeChanged(query)">
                <option ng-repeat="tag in $ctrl.advancedSearchTags" ng-attr-value="{{tag.attribute}}">{{tag.label}}</option>
            </select>

            <!--Show a drop-down if the attribute type is 'select'-->
            <select ng-model="query.value" ng-if="$ctrl.advancedSearchTags[query.key].type === 'select'"
                    ng-change="$ctrl.onAdvancedSearchValueChanged($event)" class="attribute-value">
                <option ng-attr-value="{{name}}"
                        ng-repeat="(name, label) in $ctrl.advancedSearchTags[query.key].options">{{label}}</option>
            </select>

            <!--Otherwise, just show a regular input field-->
            <input ng-model="query.value" ng-if="$ctrl.advancedSearchTags[query.key].type !== 'select'"
                   ng-change="$ctrl.onAdvancedSearchValueChanged($event)" class="attribute-value"
                   autocomplete="off" ng-model-options="{debounce: $ctrl.inputDebounce}">

            <ias-button class="ias-icon-button" ng-click="$ctrl.removeSearchTag($index)"
                        ng-attr-title="{{ 'Button_Remove' | translate }}">
                <ias-icon icon="close_thin"></ias-icon>
            </ias-button>
        </div>
        <ias-button id="add-attribute-row" class="ias-icon-button" ng-click="$ctrl.addSearchTag()"
                    ng-if="$ctrl.queries.length < $ctrl.advancedSearchMaxRows"
                    ng-attr-title="{{ 'Button_AddSearchAttribute' | translate }}">
            <ias-icon icon="new_thin"></ias-icon>
        </ias-button>
    </div>
    <span class="ias-fill"></span>
    <div class="ias-header">
        <ias-button id="view-tile-icon" class="ias-icon-button"
                    ng-click="$ctrl.gotoCardsView()"
                    ng-attr-title="{{ 'Title_HelpDeskCard' | translate }}">
            <ias-icon icon="view_tile_thin"></ias-icon>
        </ias-button>
        <ias-button id="view-list-icon" class="ias-icon-button ias-selected"
                    ng-disabled="true"
                    ng-attr-title="{{ 'Title_HelpDeskTable' | translate }}">
            <ias-icon icon="view_list_thin"></ias-icon>
        </ias-button>
        <div class="icon-divider vertical"></div>
        <ias-button class="ias-icon-button table-configuration-menu-toggle" ias-toggle="menu1"
                    ng-attr-title="{{ 'Title_Settings' | translate }}">
            <ias-icon icon="configure_thick"></ias-icon>
        </ias-button>
        <ias-menu name="menu1" ias-align="end end" class="ias-styles-root">
            <div class="ias-input-container">
                <div class="checkbox-button" ng-repeat="(key, value) in $ctrl.columnConfiguration">
                    <input type="checkbox" ng-model="value.visible" aria-label="Toggle column visibility" />
                    <ias-button class="toggle-column-btn" ng-click="value.visible = !value.visible; $event.stopImmediatePropagation();">{{value.label}}</ias-button>
                </div>
            </div>
        </ias-menu>
    </div>
</div>

<div class="search-info-container">
    <div class="search-info" ng-class="{'loading': !$ctrl.getMessage()}"
         ng-if="$ctrl.loading || $ctrl.searchMessage || $ctrl.errorMessage"
         ng-bind="$ctrl.getMessage() || ('Display_PleaseWait' | translate)">
    </div>
</div>

<div class="people-search-component-content">
    <table class="ias-table" ias-sort="$ctrl.sort" ng-show="$ctrl.searchResult.people.length">
        <thead>
        <tr>
            <th ng-repeat="(key, value) in $ctrl.columnConfiguration" ng-if="value.visible"
                ias-sort-on="key">{{value.label}}</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="person in $ctrl.searchResult.people | orderBy:$ctrl.sort"
            ng-click="$ctrl.selectPerson(person)">
            <td ng-repeat="(key, value) in $ctrl.columnConfiguration" ng-if="value.visible">
                <span ng-bind="person[key]"></span>
            </td>
            <td></td>
        </tr>
        </tbody>
    </table>
</div>