refstack/refstack-ui/app/components/results/results.html

<h3>{{ctrl.pageHeader}}</h3>
<p>{{ctrl.pageParagraph}}</p>

<div class="result-filters">
    <h4>Filters</h4>
    <div class="row">
        <div class="col-md-3">
            <label for="cpid">Start Date</label>
            <p class="input-group">
                <input type="text" class="form-control"
                    uib-datepicker-popup="{{ctrl.format}}"
                    ng-model="ctrl.startDate" is-open="ctrl.startOpen"
                    close-text="Close" />
                <span class="input-group-btn">
                    <button type="button" class="btn btn-default" ng-click="ctrl.open($event, 'startOpen')">
                        <i class="glyphicon glyphicon-calendar"></i>
                    </button>
                </span>
            </p>
        </div>
        <div class="col-md-3">
            <label for="cpid">End Date</label>
            <p class="input-group">
                <input type="text" class="form-control"
                    uib-datepicker-popup="{{ctrl.format}}"
                    ng-model="ctrl.endDate" is-open="ctrl.endOpen"
                    close-text="Close" />
                <span class="input-group-btn">
                    <button type="button" class="btn btn-default" ng-click="ctrl.open($event, 'endOpen')">
                        <i class="glyphicon glyphicon-calendar"></i>
                    </button>
                </span>
            </p>
        </div>
        <div class="col-md-3"style="margin-top:24px;">
            <button type="submit" class="btn btn-primary" ng-click="ctrl.update()">Filter</button>
            <button type="submit" class="btn btn-primary btn-danger" ng-click="ctrl.clearFilters()">Clear</button>
        </div>
    </div>
</div>

<div cg-busy="{promise:ctrl.authRequest,message:'Loading'}"></div>
<div cg-busy="{promise:ctrl.resultsRequest,message:'Loading'}"></div>

<div ng-show="ctrl.data" class="results-table">
    <table ng-show="ctrl.data" class="table table-striped table-hover">
        <thead>
            <tr>
                <th ng-if="ctrl.isUserResults"></th>
                <th>Upload Date</th>
                <th>Test Run ID</th>
                <th ng-if="ctrl.isUserResults">Shared</th>
            </tr>
        </thead>

        <tbody>
            <tr ng-repeat-start="(index, result) in ctrl.data.results">
                <td ng-if="ctrl.isUserResults">
                    <a ng-if="!result.expanded"
                       class="glyphicon glyphicon-plus"
                       ng-click="result.expanded = true">
                    </a>
                    <a ng-if="result.expanded"
                       class="glyphicon glyphicon-minus"
                       ng-click="result.expanded = false">
                    </a>
                </td>
                <td>{{result.created_at}}</td>
                <td><a ui-sref="resultsDetail({testID: result.id})">{{result.id}}</a></td>
                <td ng-if="ctrl.isUserResults">
                    <span ng-show="result.meta.shared" class="glyphicon glyphicon-share"></span>
                </td>
            </tr>
            <tr ng-if="result.expanded" ng-repeat-end>
                <td></td>
                <td colspan="3">
                    <strong>Publicly Shared:</strong>
                    <span ng-if="result.meta.shared == 'true' && !result.sharedEdit">Yes</span>
                    <span ng-if="!result.meta.shared && !result.sharedEdit">
                        <em>No</em>
                    </span>
                    <select ng-if="result.sharedEdit"
                            ng-model="result.meta.shared"
                            class="form-inline">
                            <option value="true">Share</option>
                            <option value="">Unshare</option>
                    </select>
                    <a ng-if="!result.sharedEdit"
                       ng-click="result.sharedEdit = true"
                       title="Edit"
                       class="glyphicon glyphicon-pencil"></a>
                    <a ng-if="result.sharedEdit"
                       ng-click="ctrl.associateMeta(index,'shared',result.meta.shared)"
                       title="Save"
                       class="glyphicon glyphicon-floppy-disk"></a>
                    <br />

                    <strong>Associated Guideline:</strong>
                    <span ng-if="!result.meta.guideline && !result.guidelineEdit">
                        <em>None</em>
                    </span>
                    <span ng-if="result.meta.guideline && !result.guidelineEdit">
                        {{result.meta.guideline.slice(0, -5)}}
                    </span>
                    <select ng-if="result.guidelineEdit"
                            ng-model="result.meta.guideline"
                            ng-options="o as o.slice(0, -5) for o in ctrl.versionList"
                            class="form-inline">
                        <option value="">None</option>
                    </select>
                    <a ng-if="!result.guidelineEdit"
                       ng-click="ctrl.getVersionList();result.guidelineEdit = true"
                       title="Edit"
                       class="glyphicon glyphicon-pencil"></a>
                    <a ng-if="result.guidelineEdit"
                       ng-click="ctrl.associateMeta(index, 'guideline', result.meta.guideline)"
                       title="Save"
                       class="glyphicon glyphicon-floppy-disk">
                    </a>
                    <br />

                    <strong>Associated Target Program:</strong>
                    <span ng-if="!result.meta.target && !result.targetEdit">
                        <em>None</em>
                    </span>
                    <span ng-if="result.meta.target && !result.targetEdit">
                        {{ctrl.targetMappings[result.meta.target]}}</span>
                    <select ng-if="result.targetEdit"
                            ng-model="result.meta.target"
                            class="form-inline">
                        <option value="">None</option>
                        <option value="platform">OpenStack Powered Platform</option>
                        <option value="compute">OpenStack Powered Compute</option>
                        <option value="object">OpenStack Powered Object Storage</option>
                    </select>
                    <a ng-if="!result.targetEdit"
                       ng-click="result.targetEdit = true"
                       title="Edit"
                       class="glyphicon glyphicon-pencil">
                    </a>
                    <a ng-if="result.targetEdit"
                       ng-click="ctrl.associateMeta(index, 'target', result.meta.target)"
                       title="Save"
                       class="glyphicon glyphicon-floppy-disk">
                    </a>
                </td>
            </tr>
        </tbody>
    </table>

    <div class="pages">
        <uib-pagination
            total-items="ctrl.totalItems"
            ng-model="ctrl.currentPage"
            items-per-page="ctrl.itemsPerPage"
            max-size="ctrl.maxSize"
            class="pagination-sm"
            boundary-links="true"
            rotate="false"
            num-pages="ctrl.numPages"
            ng-change="ctrl.update()">
        </uib-pagination>
    </div>
</div>

<div ng-show="ctrl.showError" class="alert alert-danger" role="alert">
    <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
    <span class="sr-only">Error:</span>
    {{ctrl.error}}
</div>