meanTorrent/modules/messages/client/views/box.client.view.html

<section ng-controller="MessageController as vm" ng-init="vm.init();">
    <div class="row margin-top-20">
        <div class="col-sm-12 messages-list">

            <div class="row margin-bottom-20">
                <div class="col-xs-12 col-md-9">
                    <h4>{{'MESSAGES_BOX' | translate}}
                        <small ng-show="vm.unreadCountData.countAll>0"> - (<span
                                class="badge badge_info">{{vm.unreadCountData.countAll}}</span> {{'MESSAGES_FIELD.NEW_MSG' | translate}})
                        </small>
                    </h4>
                </div>
                <div class="col-xs-12 col-md-3">
                    <input class="form-control" type="text" ng-model="vm.search" placeholder="Search"
                           ng-change="vm.buildPager()"/>
                </div>
            </div>

            <div class="margin-bottom-20">
                <div class="btn-group message-type-group">
                    <label class="btn btn-default"
                           ng-repeat="t in vm.messageConfig.type.value"
                           ng-model="vm.messageType" uib-btn-radio="'{{t.value}}'"
                           ng-click="vm.onTypeBtnClick(); vm.buildPager();">
                        {{'MESSAGE_TYPE_'+t.name | translate}}
                        <span class="message-dot" ng-if="vm.getNewMessageCount(t.value)>0">{{vm.getNewMessageCount(t.value)}}</span>
                    </label>
                </div>
            </div>

            <div class="alert alert-warning" ng-if="vm.messageType=='server'" role="alert" style="padding: 20px 50px;">
                <span translate="MESSAGE_SERVER_TOOLTIP"
                      translate-values="{count: vm.messageConfig.serverMessageLimitCount, days: vm.messageConfig.serverMessageLimitDays}"></span>
            </div>

            <div class="pagination-div-top">
                <div class="row">
                    <div class="col-sm-12 col-md-7">
                        <ul uib-pagination boundary-links="true" max-size="8" items-per-page="vm.itemsPerPage" total-items="vm.filterLength"
                            ng-model="vm.currentPage"
                            ng-change="vm.pageChanged()"
                            first-text="{{ 'PAGE_TEXT_FIRST' | translate}}" previous-text="{{ 'PAGE_TEXT_PREVIOUS' | translate}}"
                            next-text="{{ 'PAGE_TEXT_NEXT' | translate}}" last-text="{{ 'PAGE_TEXT_LAST' | translate}}">
                        </ul>
                    </div>
                </div>
            </div>

            <div class="table-responsive margin-top-50 margin-bottom-50 padding-top-40 padding-bottom-50 text-center" ng-if="!vm.pagedItems">
                <h4>{{ 'MESSAGES_IS_EMPTY' | translate }}</h4>
            </div>
            <div class="table-responsive" ng-if="vm.pagedItems">
                <table class="table table-hover tb-v-middle">
                    <thead>
                        <tr>
                            <th>{{ 'MESSAGES_FIELD.LIST_TITLE' | translate}}</th>
                            <th class="text-center">{{ 'MESSAGES_FIELD.LIST_REPLIES' | translate}}</th>
                            <th class="text-center">{{ 'MESSAGES_FIELD.LIST_TYPE' | translate}}</th>
                            <th class="text-center">{{ 'MESSAGES_FIELD.LIST_SENDAT' | translate}}</th>
                            <th class="text-center">{{ 'MESSAGES_FIELD.LIST_SELECT' | translate}}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="message-item" ng-repeat="m in vm.pagedItems" ng-click="vm.showMessage($event, m);">
                            <td class="width-400">
                                <img class="message-avatar" ng-src="{{m.from_user.profileImageURL}}" ng-if="m.type=='user'">
                                <span class="message-avatar glyphicon glyphicon-cog server-message-avatar" ng-if="m.type=='server'"></span>
                                <i class="fa fa-envelope message-avatar server-message-avatar" ng-if="m.type!='user' && m.type!='server'"></i>

                                <span class="message-title" ng-class="vm.isUnread(m)? 'unread' : 'read'" ng-if="m.type!='server'"
                                      ng-bind="m.title"></span>
                                <span class="message-title" ng-class="vm.isUnread(m)? 'unread' : 'read'" ng-if="m.type=='server'"
                                      translate="SERVER_MESSAGE.{{m.title}}"></span>

                                <p class="message-info" ng-if="m.type=='user'">
                                    <span user-info="m.from_user"
                                          info-name></span> {{'MESSAGES_FIELD.INFO_SEND_TO' | translate}}
                                    <span user-info="m.to_user"
                                          info-name></span> {{'MESSAGES_FIELD.INFO_SEND_AT' | translate}} {{m.createdat | date: 'yyyy-MM-dd HH:mm:ss' }}
                                    <span ng-show="m._replies.length">, {{'MESSAGES_FIELD.LAST_REPLY_AT' | translate}} {{m.updatedat | date: 'yyyy-MM-dd HH:mm:ss' }}</span>
                                </p>

                                <p class="message-info" ng-if="m.type!='user' && m.type!='server'">
                                    <span user-info="m.from_user"
                                          info-name></span> {{'MESSAGES_FIELD.INFO_SEND_AT' | translate}} {{m.createdat | date: 'yyyy-MM-dd HH:mm:ss' }}
                                </p>

                                <p class="message-info" ng-if="m.type=='server'">
                                    {{'MESSAGES_FIELD.SERVER_SEND' | translate}} {{'MESSAGES_FIELD.INFO_SEND_AT' | translate}} {{m.createdat | date: 'yyyy-MM-dd HH:mm:ss' }}
                                </p>
                            </td>
                            <td class="td-v-middle text-center">
                                <span ng-class="vm.isUnread(m)? 'unread' : 'read'" ng-if="m.type=='user'">{{m._replies.length}}</span>
                                <span ng-class="vm.isUnread(m)? 'unread' : 'read'" ng-if="m.type!='user'">-</span>
                            </td>
                            <td class="td-v-middle text-center">
                                <span ng-class="vm.isUnread(m)? 'unread' : 'read'">{{'MESSAGE_TYPE_' + m.type.toUpperCase() | translate}}</span>
                            </td>
                            <td class="td-v-middle text-center">
                                <span ng-class="vm.isUnread(m)? 'unread' : 'read'">{{m.createdat | life}}</span>
                            </td>
                            <td class="td-v-middle text-center" ng-click="$event.stopPropagation();">
                                <input type="checkbox" class="tcheckbox" ng-model="vm.selected[m._id]"
                                       id="checkbox_{{m._id}}" ng-if="m.type=='user' || m.type=='server'">
                                </label>
                                <span ng-class="vm.isUnread(m)? 'unread' : 'read'" ng-if="m.type!='user' && m.type!='server'">-</span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div class="pagination-div-bottom">
                <ul uib-pagination boundary-links="true" max-size="8" items-per-page="vm.itemsPerPage" total-items="vm.filterLength"
                    ng-model="vm.currentPage"
                    ng-change="vm.pageChanged()"
                    first-text="{{ 'PAGE_TEXT_FIRST' | translate}}" previous-text="{{ 'PAGE_TEXT_PREVIOUS' | translate}}"
                    next-text="{{ 'PAGE_TEXT_NEXT' | translate}}" last-text="{{ 'PAGE_TEXT_LAST' | translate}}">
                </ul>
                <div class="pull-right margin-top-20">
                    <button class="btn btn-success btn-width-100" ng-click="vm.deleteSelected()">{{ 'BUTTON_MESSAGE_DELETE' | translate }}</button>
                </div>
            </div>
        </div>
    </div>

    <div id="popupSlide" side-overlay="right" side-class="popup-side-overlay" side-opened="vm.onPopupMessageOpen();"
         side-closed="vm.onPopupMessageClose();" side-close-on-esc side-close-on-outside-click>
        <div class="message-popup message-item" ng-class="{'not-user-message':  vm.selectedMessage.type!='user'}">
            <div>
                <img class="message-avatar" ng-src="{{vm.selectedMessage.from_user.profileImageURL}}" ng-if="vm.selectedMessage.type=='user'">
                <span class="message-avatar glyphicon glyphicon-cog server-message-avatar" ng-if="vm.selectedMessage.type=='server'"></span>
                <i class="fa fa-envelope message-avatar server-message-avatar"
                   ng-if="vm.selectedMessage.type!='user' && vm.selectedMessage.type!='server'"></i>

                <div class="title-info">
                    <span class="message-title" ng-class="vm.isUnread(vm.selectedMessage)? 'unread' : 'read'"
                          ng-if="vm.selectedMessage.type!='server'"
                          ng-bind="vm.selectedMessage.title"></span>
                    <span class="message-title" ng-class="vm.isUnread(vm.selectedMessage)? 'unread' : 'read'"
                          ng-if="vm.selectedMessage.type=='server'"
                          translate="SERVER_MESSAGE.{{vm.selectedMessage.title}}"></span>

                    <p class="message-info" ng-if="vm.selectedMessage.type=='user'">
                        <span user-info="vm.selectedMessage.from_user"
                              info-name></span> {{'MESSAGES_FIELD.INFO_SEND_TO' | translate}}
                        <span user-info="vm.selectedMessage.to_user"
                              info-name></span> {{'MESSAGES_FIELD.INFO_SEND_AT' | translate}} {{vm.selectedMessage.createdat | date: 'yyyy-MM-dd HH:mm:ss' }}
                    </p>

                    <p class="message-info" ng-if="vm.selectedMessage.type!='user' && vm.selectedMessage.type!='server'">
                        <span user-info="vm.selectedMessage.from_user"
                              info-name></span> {{'MESSAGES_FIELD.INFO_SEND_AT' | translate}} {{vm.selectedMessage.createdat | date: 'yyyy-MM-dd HH:mm:ss' }}
                    </p>

                    <p class="message-info" ng-if="vm.selectedMessage.type=='server'">
                        {{'MESSAGES_FIELD.SERVER_SEND' | translate}} {{'MESSAGES_FIELD.INFO_SEND_AT' | translate}} {{vm.selectedMessage.createdat | date: 'yyyy-MM-dd HH:mm:ss' }}
                    </p>
                </div>
            </div>

            <li class="status-divider"></li>
            <div class="message-content" ng-bind-html="vm.getContentMarked(vm.selectedMessage);" ng-if="vm.selectedMessage.type!='server'"></div>
            <div class="message-content" ng-bind-html="vm.getServerNoticeContentMarked(vm.selectedMessage);" ng-if="vm.selectedMessage.type=='server'"></div>

            <div class="message-reply" ng-if="vm.selectedMessage._replies.length>0">
                <li class="status-divider"></li>

                <div class="reply-item" ng-repeat="r in vm.selectedMessage._replies">
                    <img class="reply-avatar" ng-src="{{r.from_user.profileImageURL}}">

                    <div class="reply-info">
                        <div class="message-content" ng-bind-html="vm.getContentMarked(r);"></div>

                        <p class="message-info">
                            <span user-info="r.from_user" info-name></span> | {{r.createdat | date: 'yyyy-MM-dd HH:mm:ss' }}
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <div class="bottom-control" ng-class="{'not-user-message':  vm.selectedMessage.type!='user'}">
            <div ng-show="vm.selectedMessage.type=='user'">
            <textarea class="form-control reply-textarea" id="reply-content" name="reply-content"
                      ng-model="vm.replyContent" data-hidden-buttons="cmdPreview" ng-keydown="vm.onReplyKeyDown($event);"
                      mt-markdown-editor="reply-content" maxlength="{{vm.inputLengthConfig.messageBoxReplyLength}}"
                      emoji-dropup></textarea>
            </div>
            <div>
                <button class="btn btn-default btn-width-100" ng-click="vm.hideMessage();">{{ 'BUTTON_MESSAGE_CLOSE' | translate }}</button>
                <button class="btn btn-default btn-width-100" ng-click="vm.delete(vm.selectedMessage);"
                        ng-if="vm.selectedMessage.type=='user'">{{ 'BUTTON_MESSAGE_DELETE' | translate }}
                </button>
                <button class="btn btn-success btn-width-100 pull-right" ng-disabled="!vm.replyContent"
                        ng-click="vm.replyMessage(vm.selectedMessage);"
                        ng-if="vm.selectedMessage.type=='user'">{{ 'BUTTON_MESSAGE_REPLY' | translate }}
                </button>
            </div>
        </div>
    </div>
</section>