storyboard-webclient/src/app/stories/template/list.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>
    </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 class="hidden-xs">
                        <a href="" ng-click="toggleFilter('created_at')">
                            Created
                            <i class="fa fa-caret-down"
                               ng-if="sortField == 'created_at' && sortDirection == 'desc'">
                            </i>
                            <i class="fa fa-caret-up"
                               ng-if="sortField == 'created_at' && sortDirection == 'asc'">
                            </i>
                        </a>
                    </th>
                    <th class="hidden-xs">
                        <a href="" ng-click="toggleFilter('updated_at')">
                            Updated
                            <i class="fa fa-caret-down"
                               ng-if="sortField == 'updated_at' && sortDirection == 'desc'">
                            </i>
                            <i class="fa fa-caret-up"
                               ng-if="sortField == 'updated_at' && sortDirection == 'asc'">
                            </i>
                        </a>
                    </th>
                    <th class="text-right">
                        <a href="" ng-click="toggleFilter('status')">
                            Status
                            <i class="fa fa-caret-down"
                               ng-if="sortField == 'status' && sortDirection == 'desc'">
                            </i>
                            <i class="fa fa-caret-up"
                               ng-if="sortField == 'status' && sortDirection == 'asc'">
                            </i>
                        </a>
                    </th>
                    <th></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>