storyboard-webclient/src/app/projects/template/detail.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">
    <div class="row">
        <div ng-include
             class="col-xs-12"
             src="'/inline/project_detail.html'"
             ng-hide="showEditForm">
        </div>
        <div ng-include
             src="'/inline/project_detail_form.html'"
             ng-show="showEditForm">
        </div>
        <div ng-include src="'/inline/story_list.html'"></div>
    </div>
</div>


<!-- Template for the header and description -->
<script type="text/ng-template" id="/inline/project_detail.html">
    <h1>
        <span ng-show="project.name">
            {{project.name}}
        </span>
        <em ng-hide="project.name" class="text-muted">
            No title
        </em>
        <small ng-show="isLoggedIn">
            <a href="" ng-click="toggleEditMode()" permission="is_superuser">
                <i class="fa fa-pencil"></i>
            </a>
        </small>
    </h1>
    <p>
        <span ng-show="project.description"
              class="honor-carriage-return">{{project.description}}
        </span>
        <em ng-hide="project.description" class="text-muted">
            No description provided
        </em>
    </p>
</script>


<!-- Template for the header and description -->
<script type="text/ng-template" id="/inline/project_detail_form.html">
    <br/>
    <form name="projectForm">
        <div class="form-group"
             ng-class="{'has-error': projectForm.name.$invalid}">
            <input id="name"
                   name="name"
                   type="text"
                   class="form-control"
                   ng-model="project.name"
                   required
                   ng-pattern="PROJECT_NAME_REGEX"
                   maxlength="50"
                   ng-minlength="3"
                   ng-disabled="isUpdating"
                   placeholder="Project Name">
            </input>
            <div class="help-block text-danger"
                 ng-show="projectForm.name.$invalid">
                 <span ng-show="projectForm.name.$error.required">
                     A project name is required.
                 </span>
                 <span ng-show="projectForm.name.$error.pattern">
                     A project name must begin with a letter, and may only
                     contain letters, numbers, forward slashes, periods, and
                     dashes. It should not start or end with a separator and
                     must not contain two or more sequential separators.
                 </span>
                 <span ng-show="projectForm.name.$error.minlength">
                     A project name must have at least 3 characters.
                 </span>
            </div>
        </div>
        <div class="form-group"
             ng-class="{'has-error': projectForm.description.$invalid}">
            <textarea name="description"
                      placeholder="Enter a project description here"
                      class="form-control"
                      rows="3"
                      msd-elastic
                      required
                      ng-disabled="isUpdating"
                      ng-model="project.description">
            </textarea>

            <div ng-show="projectForm.description.$error.required"
                 class="help-block text-danger">
                A project description is required.
            </div>
        </div>

        <div class="clearfix">
            <div class="pull-right">
                <div class="btn" ng-show="isUpdating">
                    <i class="fa fa-spinner fa-lg fa-spin"></i>
                </div>
                <button type="button"
                        class="btn btn-primary"
                        ng-click="update()"
                        ng-disabled="!projectForm.$valid">
                    Save
                </button>
                <button type="button"
                        class="btn btn-default"
                        ng-click="cancel()">
                    Cancel
                </button>
            </div>
        </div>
    </form>
    <hr/>
</script>

<!-- Template for the task list -->
<script type="text/ng-template" id="/inline/story_list.html">
    <div ng-controller="ProjectStoryListController">
        <div class="col-xs-12">
            <a href=""
               class="btn btn-link pull-right"
               ng-click="newStory()"
               ng-show="isLoggedIn">
                <i class="fa fa-plus"></i>
                Add story
            </a>
            <ul class="nav nav-tabs clearfix">
                <li ng-class="{'active': filter == 'active'}">
                    <a href=""
                       ng-click="setFilter('active')">Active</a>
                </li>
                <li ng-class="{'active': filter == 'merged'}">
                    <a href=""
                       ng-click="setFilter('merged')">Merged</a>
                </li>
                <li ng-class="{'active': filter == 'invalid'}">
                    <a href=""
                       ng-click="setFilter('invalid')">Invalid</a>
                </li>
            </ul>
            <table class="table table-striped"
                   ng-hide="isSearching || stories.length == 0">
                <tbody>
                <tr ng-repeat="story in stories"
                    ng-controller="StoryListItemController"
                    ng-include="'app/stories/template/story_list_item.html'">
                </tr>
                </tbody>
            </table>

            <div ng-show="isSearching">
                <hr/>
                <p class="text-center">
                    <i class="fa fa-refresh fa-spin fa-lg"></i>
                </p>
            </div>

            <p ng-show="!isSearching && stories.length == 0"
               class="text-center text-warning">
                <br/>
                <em> We were unable to find any stories.
                    Perhaps you would like to create one?</em>
            </p>
        </div>
    </div>
</script>