Vmeda.Online/src/addon/messages/pages/group-conversations/group-conversations.html

<ion-header>
    <ion-navbar core-back-button>
        <ion-title>{{ 'addon.messages.messages' | translate }}</ion-title>
        <ion-buttons end>
            <button ion-button icon-only (click)="gotoContacts($event)" [attr.aria-label]="'addon.messages.contacts' | translate">
                <ion-icon name="person"></ion-icon> <!-- @todo: Display number of pending requests. -->
            </button>
            <button ion-button icon-only (click)="gotoSettings($event)" [attr.aria-label]="'addon.messages.messagepreferences' | translate">
                <ion-icon name="cog"></ion-icon>
            </button>
            <!-- Add an empty context menu so discussion page can add items in split view, otherwise the menu disappears in some cases. -->
            <core-context-menu></core-context-menu>
        </ion-buttons>
    </ion-navbar>
</ion-header>
<core-split-view>
    <ion-content>
        <ion-refresher [enabled]="loaded" (ionRefresh)="refreshData($event)">
            <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
        </ion-refresher>

        <core-search-box *ngIf="search.enabled" (onSubmit)="searchMessage($event)" (onClear)="clearSearch($event)" [placeholder]=" 'addon.messages.message' | translate" autocorrect="off" spellcheck="false" lengthCheck="2" [disabled]="!loaded"></core-search-box>

        <core-loading [hideUntil]="loaded" [message]="loadingMessage">

            <!-- Search results. -->
            <ion-list *ngIf="search.showResults" no-margin>
                <ion-item-divider color="light">
                    <h2>{{ 'core.searchresults' | translate }}</h2>
                    <ion-note item-end>{{ search.results.length }}</ion-note>
                </ion-item-divider>

                <a ion-item text-wrap *ngFor="let result of search.results" [title]="result.fullname" (click)="gotoConversation(result.conversationid, result.userid, result.messageid)" [class.core-split-item-selected]="(result.conversationid && result.conversationid == selectedConversationId) || (result.userid && result.userid == selectedUserId)" detail-none>
                    <ion-avatar item-start>
                        <img src="{{result.profileimageurl}}" [alt]="'core.pictureof' | translate:{$a: result.fullname}" core-external-content onError="this.src='assets/img/user-avatar.png'">
                    </ion-avatar>
                    <h2>
                        <p>
                            <core-format-text [text]="result.fullname"></core-format-text>
                            <core-icon name="fa-ban" *ngIf="result.isblocked" [attr.aria-label]="'addon.messages.contactblocked' | translate"></core-icon>
                        </p>
                        <ion-note *ngIf="result.lastmessagedate > 0">
                            {{result.lastmessagedate | coreDateDayOrTime}}
                        </ion-note>
                    </h2>
                    <p><core-format-text clean="true" singleLine="true" [text]="result.lastmessage" class="addon-message-last-message"></core-format-text></p>
                </a>
            </ion-list>

            <!-- Conversations. -->
            <ion-list *ngIf="!search.showResults">
                <!-- Favourite conversations. -->
                <ion-item-divider color="light" text-wrap *ngIf="favourites.conversations" (click)="toggle(favourites)">
                    <core-icon *ngIf="!favourites.expanded" name="fa-caret-right" item-start></core-icon>
                    <core-icon *ngIf="favourites.expanded" name="fa-caret-down" item-start></core-icon>
                    {{ 'core.favourites' | translate }} ({{ favourites.count }})
                    <!-- @todo: Unread total of favourites (MDL-63913). -->
                </ion-item-divider>
                <div *ngIf="favourites.conversations && favourites.expanded">
                    <ng-container *ngTemplateOutlet="conversationsTemplate; context: {conversations: favourites.conversations}"></ng-container>
                    <!-- The infinite loading cannot be inside the ng-template, it fails because it doesn't find ion-content. -->
                    <core-infinite-loading [enabled]="favourites.canLoadMore" (action)="loadMoreConversations(favourites, $event)"></core-infinite-loading>
                    <ion-item text-wrap *ngIf="favourites.conversations.length == 0">
                        <p>{{ 'addon.messages.nofavourites' | translate }}</p>
                    </ion-item>
                </div>

                <!-- Group conversations. -->
                <ion-item-divider color="light" text-wrap *ngIf="group.conversations" (click)="toggle(group)">
                    <core-icon *ngIf="!group.expanded" name="fa-caret-right" item-start></core-icon>
                    <core-icon *ngIf="group.expanded" name="fa-caret-down" item-start></core-icon>
                    {{ 'addon.messages.groupmessages' | translate }} ({{ group.count }})
                    <!-- @todo: Unread total of group conversations (MDL-63913). -->
                </ion-item-divider>
                <div *ngIf="group.conversations && group.expanded">
                    <ng-container *ngTemplateOutlet="conversationsTemplate; context: {conversations: group.conversations, avatarOptional: true}"></ng-container>
                    <!-- The infinite loading cannot be inside the ng-template, it fails because it doesn't find ion-content. -->
                    <core-infinite-loading [enabled]="group.canLoadMore" (action)="loadMoreConversations(group, $event)"></core-infinite-loading>
                    <ion-item text-wrap *ngIf="group.conversations.length == 0">
                        <p>{{ 'addon.messages.nogroupmessages' | translate }}</p>
                    </ion-item>
                </div>

                <ion-item-divider color="light" text-wrap *ngIf="individual.conversations" (click)="toggle(individual)">
                    <core-icon *ngIf="!individual.expanded" name="fa-caret-right" item-start></core-icon>
                    <core-icon *ngIf="individual.expanded" name="fa-caret-down" item-start></core-icon>
                    {{ 'addon.messages.messages' | translate }} ({{ individual.count }})
                    <!-- @todo: Unread total of individual conversations (MDL-63913). -->
                </ion-item-divider>
                <div *ngIf="individual.conversations && individual.expanded">
                    <ng-container *ngTemplateOutlet="conversationsTemplate; context: {conversations: individual.conversations}"></ng-container>
                    <!-- The infinite loading cannot be inside the ng-template, it fails because it doesn't find ion-content. -->
                    <core-infinite-loading [enabled]="individual.canLoadMore" (action)="loadMoreConversations(individual, $event)"></core-infinite-loading>
                    <ion-item text-wrap *ngIf="individual.conversations.length == 0">
                        <p>{{ 'addon.messages.nomessages' | translate }}</p>
                    </ion-item>
                </div>
            </ion-list>

            <!-- Search didn't get any result. -->
            <core-empty-box *ngIf="(!search.results || search.results.length <= 0) && search.showResults" icon="search" [message]="'core.noresults' | translate"></core-empty-box>
        </core-loading>
    </ion-content>
</core-split-view>

<!-- Template to render a list of conversations. -->
<ng-template #conversationsTemplate let-conversations="conversations" let-avatarOptional="avatarOptional">
    <a ion-item text-wrap *ngFor="let conversation of conversations" [title]="conversation.name" detail-none (click)="gotoConversation(conversation.id, conversation.userid)" [class.core-split-item-selected]="(conversation.id && conversation.id == selectedConversationId) || (conversation.userid && conversation.userid == selectedUserId)" id="addon-message-conversation-{{ conversation.id ? conversation.id : 'user-' + conversation.userid }}">
        <ion-avatar item-start *ngIf="conversation.imageurl || !avatarOptional">
            <img src="{{conversation.imageurl}}" [alt]="conversation.name" core-external-content onError="this.src='assets/img/user-avatar.png'">
            <!-- @todo: Display connection status.
                <span *ngIf="conversation.showonlinestatus" class="core-primary-circle" [ngClass]='{"addon-message-contact-online": conversation.isonline}'></span> -->
        </ion-avatar>
        <h2>
            <p>
                <core-format-text [text]="conversation.name"></core-format-text>
                <core-icon name="fa-ban" *ngIf="conversation.isblocked" [attr.aria-label]="'addon.messages.contactblocked' | translate"></core-icon>
            </p>
            <ion-note *ngIf="conversation.lastmessagedate > 0 || conversation.unreadcount">
                <ion-badge *ngIf="conversation.unreadcount > 0">{{ conversation.unreadcount }}</ion-badge>
                <span *ngIf="conversation.lastmessagedate > 0">{{conversation.lastmessagedate | coreDateDayOrTime}}</span>
            </ion-note>
        </h2>
        <p><core-format-text *ngIf="conversation.subname" [text]="conversation.subname"></core-format-text></p>
        <p>
            <span *ngIf="conversation.sentfromcurrentuser">{{ 'addon.messages.you' | translate }}</span> <core-format-text clean="true" singleLine="true" [text]="conversation.lastmessage" class="addon-message-last-message"></core-format-text>
        </p>
    </a>
</ng-template>