TaskBoard/partials/boardItemViewModal.html

<div class="modal fade itemViewModal" tabindex="-1" role="dialog"
     aria-labelledby="itemViewLabel" aria-hidden="true"
     data-ng-controller="ItemViewBoardCtrl">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true" class="fa fa-times"></span>
                    <span class="sr-only">Close</span>
                </button>
                <h3 class="modal-title" id="itemViewLabel">{{ viewItem.title }}
                    <span data-ng-if="viewItem.points"> - {{ viewItem.points }}</span>
                </h3>
            </div>
            <div class="modal-body">
                <div class="view-item-details" style="background-color: {{ viewItem.color }}">
                    <p class="due-date" data-ng-if="viewItem.due_date" data-ng-class="{'dateNear': viewItem.dateNear, 'datePast': viewItem.datePast}">
                        Due: {{ viewItem.due_date }}
                    </p>
                    <div class="description" data-ng-bind-html="marked(viewItem.description)"></div>
                    <div class="col-md-4 text-center">
                        <p>Assigned To: <strong>{{ userNames[viewItem.assignee] }}</strong></p>
                    </div>
                    <div class="col-md-4 text-center">
                        <p data-ng-if="viewItem.category">Category: <strong>{{ categories[viewItem.category] }}</strong></p>
                    </div>
                    <div class="col-md-4 text-center">
                        <p>Current Column: <strong>{{ viewItem.laneName }}</strong></p>
                    </div>
                </div>
                <div class="view-item-actions">
                    <div class="text-center" data-ng-class="currentUser.isAdmin == 1 ? 'col-md-6' : 'col-md-12'">
                        <a class="btn btn-default" data-ng-class="{'disabled': viewItem.disabled}"
                           data-ng-click="editItem()">Edit Item</a>
                    </div>
                    <div data-ng-if="currentUser.isAdmin == 1" class="col-md-6 text-center">
                        <a class="btn btn-default" data-ng-class="{'disabled': viewItem.disabled}"
                           data-ng-click="deleteItem()">Delete Item</a>
                    </div>
                </div>
                <div class="view-item-attachments" data-ng-if="viewItem.ownAttachment.length">
                    <h4>Attachments</h4>
                    <div class="list-group">
                        <p class="list-group-item"
                           data-ng-repeat="attachment in viewItem.ownAttachment" data-ng-class-even="'alternate'">
                            {{ attachment.name }}
                            <span class="detail">
                                Uploaded by {{ userNames[attachment.userId] }} on {{ attachment.date }}
                            </span>
                            <span class="links pull-right" data-ng-show="attachmentDeleting[attachment.id]">
                                <span class="fa fa-refresh fa-spin"></span> Deleting...
                            </span>
                            <span class="links pull-right" data-ng-hide="attachmentDeleting[attachment.id]">
                                <a class="fa fa-eye" title="View"
                                   href="#/files/{{ attachment.id }}" target="uploadFile"></a>
                                <a class="fa fa-download" title="Download"
                                   href="api/uploads/{{ attachment.filename }}" download="{{ attachment.name }}"></a>
                                <a class="fa fa-trash-o" title="Remove"
                                   data-ng-if="currentUser.userId == attachment.user_id || currentUser.isAdmin == 1"
                                   data-ng-click="deleteAttachment(attachment.id)"></a>
                            </span>
                        </p>
                    </div>
                </div>
                <div class="view-item-attachment-form">
                    <h4>Add Attachment</h4>
                    <div class="form-group form-inline">
                        <input type="file" name="file" class="form-control"
                               data-file-upload="itemUpload" data-reset-flag="fileReset"
                               data-ng-disabled="viewItem.disabled">
                        <button type="submit" id="upload-attachment" class="btn btn-primary"
                                data-ng-class="{'disabled': viewItem.disabled}"
                                data-ng-click="addItemAttachment()">Upload</button>
                    </div>
                </div>
                <div class="view-item-comments" data-ng-if="viewItem.ownComment.length">
                    <h4>Comments
                        <span class="pull-right pull-up">
                            <select class="form-control" data-ng-model="comments.sorting"
                                    data-ng-change="sortingChanged()"
                                    data-ng-options="opt.id as opt.text for opt in comments.options">
                            </select>
                        </span>
                    </h4>
                    <div class="list-group">
                        <div class="list-group-item"
                             data-ng-repeat="comment in viewItem.ownComment | orderBy:'timestamp':comments.sorting"
                             data-ng-class-even="'alternate'">
                            <p class="comment">
                                {{ comment.text }}
                                <a class="fa fa-trash-o pull-right"
                                      data-ng-if="currentUser.userId == comment.user_id || currentUser.isAdmin == 1"
                                      data-ng-click="deleteComment(comment.id)"></a>
                            </p>
                            <p class="detail">Posted by {{ userNames[comment.user_id] }} on {{ comment.date }}</p>
                        </div>
                    </div>
                </div>
                <div class="view-item-comment-form">
                    <h4>Add Comment</h4>
                    <div class="form-group">
                        <textarea id="itemComment" class="form-control" rows="4" data-ng-model="comment.text"></textarea>
                        <button type="submit" id="add-comment" class="btn btn-primary pull-right"
                                data-ng-class="{ 'disabled': viewItem.disabled }"
                                data-ng-click="addItemComment(comment.text)">Submit Comment</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="sidebar" data-ng-class="{'toggle': toggle.sidebar}">
        <h3 class="modal-header showtab" data-ng-class="{'toggle': !toggle.sidebar}">
            <span class="fa fa-angle-double-right" data-ng-click="toggle.sidebar = !toggle.sidebar"></span>
        </h3>
        <h3 class="modal-header text-center">
            Activity
            <span class="fa fa-angle-double-left pull-right" data-ng-click="toggle.sidebar = !toggle.sidebar"></span>
        </h3>
        <div class="sidebar-content">
            <div class="action" data-ng-repeat="activity in viewItem.ownActivity | orderBy:'timestamp':true">
                <p>{{ activity.comment }}</p>
                <p class="detail">{{ activity.date }}</p>
            </div>
        </div>
    </div>
</div>