storyboard-webclient/src/app/stories/template/list.html

160 lines
6.9 KiB
HTML

<!--
~ Copyright (c) 2014 Hewlett-Packard Development Company, L.P.
~
~ 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="container-fluid"
ng-controller="SearchCriteriaController"
ng-init="init(resourceTypes, defaultCriteria)"
search-results
search-resource="Story"
search-criteria="criteria"
search-sort-field="sortField"
search-sort-direction="sortDirection">
<div class="row">
<div class="col-xs-12">
<view-title>Stories</view-title>
<button class="btn btn-primary btn-sm pull-bottom-right"
ng-click="newStory()">
<i class="fa fa-plus"></i>
<span class="hidden-xs">Create Story</span>
</button>
<h1 class="no-border no-margin-bottom">
<i class="fa fa-sb-story"></i> Stories
</h1>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="form-group has-feedback has-feedback-no-label">
<div id="search-criteria"
tag-complete="criteria as criteria.title for criteria in searchForCriteria($viewValue)"
tag-complete-tags="criteria"
tag-complete-label-field="title"
tag-complete-option-template-url="'app/search/template/typeahead_criteria_item.html'"
tag-complete-tag-template-url="'app/search/template/criteria_tag_item.html'"
tag-complete-loading="loadingCriteria = isLoading"
tag-complete-on-select="addCriteria(tag)"
tag-remove-callback="rewriteQueryString()"
placeholder="Search Stories">
</div>
<span class="form-control-feedback text-muted">
<i class="fa fa-search"
ng-hide="loadingCriteria"></i>
<i class="fa fa-sync fa-spin"
ng-show="loadingCriteria"></i>
</span>
<result-set-pager
class="form-control-static text-muted pull-right"
total="searchTotal"
offset="searchOffset"
limit="searchLimit"
on-next-page="nextPage()"
on-previous-page="previousPage()"
on-page-size="updatePageSize(pageSize)"
></result-set-pager>
</div>
<div class="align-bottom">
Columns:
<span class="form-control-static" id="query">
<button class="btn btn-xs btn-default" ng-click="dropdownControl('open')" dropdown-toggle>
<i class="fas fa-sort-alpha-down"></i>
</button>
<div class = "dropdown-menu dropdown-menu-left" role="menu">
<li ng-repeat="(type, value) in queryFilters">
<input ng-click="columnControl(type)" type="checkbox"
ng-checked=chosenCriteria.includes(type)
class="form-check-input"
id="{{ type }}"/>
<label class="form-check-label" for="{{ type }}">{{ value }}</label>
</li>
<div class="row text-center">
<div class="col-xs-8">
<button class="btn btn-sm btn-primary" ng-click="dropdownControl('close')">
Close
</button>
</div>
</div>
</div>
</span>
</div>
</div>
</div>
<div class="row"
ng-if="criteria.length == 0">
<div class="col-xs-12 text-muted text-center">
<hr/>
<em>What would you like to search by?</em>
</div>
</div>
<div class="row" ng-if="criteria.length > 0">
<div class="col-xs-12">
<table class="table table-condensed table-striped">
<thead>
<tr>
<th>
<a href="" ng-click="toggleFilter('title')">
Story
<i class="fa fa-caret-down"
ng-if="sortField == 'title' && sortDirection == 'desc'">
</i>
<i class="fa fa-caret-up"
ng-if="sortField == 'title' && sortDirection == 'asc'">
</i>
</a>
</th>
<th ng-repeat="column in chosenCriteria">
<a href="" ng-click="toggleFilter(column)">
{{queryFilters[column]}}
<i class="fa fa-caret-down"
ng-if="sortField == column && sortDirection == 'desc'">
</i>
<i class="fa fa-caret-up"
ng-if="sortField == column && sortDirection == 'asc'">
</i>
</a>
</th>
</tr>
</thead>
<tbody ng-if="searchResults.length != 0 && !isSearching">
<tr ng-repeat="story in searchResults"
ng-include="'app/search/template/story_search_item.html'">
</tr>
</tbody>
<tbody ng-if="hasValidCriteria && searchResults.length == 0 && !isSearching">
<td class="text-center text-muted" colspan="5">
<em>No stories found.</em>
</td>
</tbody>
<tbody ng-if="!hasValidCriteria">
<td class="text-center text-muted" colspan="5">
<em>Your search criteria are not valid for this item.</em>
</td>
</tbody>
<tbody ng-if="isSearching">
<td colspan="5" class="text-center">
<small class="fa fa-spin fa-lg fa-sync text-muted">
</small>
</td>
</tbody>
</table>
</div>
</div>
</div>