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)="gotoSearch()" [attr.aria-label]="'addon.messages.search' | translate">
                <ion-icon name="search"></ion-icon>
            </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 class="core-expand-max">
        <ion-refresher [enabled]="loaded" (ionRefresh)="refreshData($event)">
            <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
        </ion-refresher>

        <core-loading [hideUntil]="loaded" [message]="loadingMessage">
            <a ion-item text-wrap (click)="gotoContacts($event)" [attr.aria-label]="'addon.messages.contacts' | translate" class="addon-message-discussion">
                <ion-icon name="person" item-start></ion-icon>
                <h2>{{ 'addon.messages.contacts' | translate }}</h2>
                <ion-badge *ngIf="contactRequestsCount > 0" item-end>{{contactRequestsCount}}</ion-badge>
            </a>
            <ion-list>
                <!-- Favourite conversations. -->
                <ion-item-divider color="light" text-wrap *ngIf="favourites.conversations" (click)="toggle(favourites)" class="core-expandable">
                    <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 }})
                    <ion-badge item-end *ngIf="favourites.unread">{{ favourites.unread }}</ion-badge>
                </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)" [error]="favourites.loadMoreError"></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)" class="core-expandable">
                    <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.groupconversations' | translate }} ({{ group.count }})
                    <ion-badge item-end *ngIf="group.unread">{{ group.unread }}</ion-badge>
                </ion-item-divider>
                <div *ngIf="group.conversations && group.expanded">
                    <ng-container *ngTemplateOutlet="conversationsTemplate; context: {conversations: group.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]="group.canLoadMore" (action)="loadMoreConversations(group, $event)" [error]="group.loadMoreError"></core-infinite-loading>
                    <ion-item text-wrap *ngIf="group.conversations.length == 0">
                        <p>{{ 'addon.messages.nogroupconversations' | translate }}</p>
                    </ion-item>
                </div>

                <ion-item-divider color="light" text-wrap *ngIf="individual.conversations" (click)="toggle(individual)" class="core-expandable">
                    <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.individualconversations' | translate }} ({{ individual.count }})
                    <ion-badge item-end *ngIf="individual.unread">{{ individual.unread }}</ion-badge>
                </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)" [error]="individual.loadMoreError"></core-infinite-loading>
                    <ion-item text-wrap *ngIf="individual.conversations.length == 0">
                        <p>{{ 'addon.messages.noindividualconversations' | translate }}</p>
                    </ion-item>
                </div>
            </ion-list>
        </core-loading>
    </ion-content>
</core-split-view>

<!-- Template to render a list of conversations. -->
<ng-template #conversationsTemplate let-conversations="conversations">
    <a ion-item text-wrap *ngFor="let conversation of conversations" [title]="conversation.name" (click)="gotoConversation(conversation.id, conversation.userid)" [class.core-split-item-selected]="(conversation.id && conversation.id == selectedConversationId) || (conversation.userid && conversation.userid == selectedUserId)" class="addon-message-discussion" id="addon-message-conversation-{{ conversation.id ? conversation.id : 'user-' + conversation.userid }}">
        <!-- Group conversation image. -->
        <ion-avatar item-start *ngIf="conversation.type != typeIndividual">
            <img [src]="conversation.imageurl" [alt]="conversation.name" core-external-content onError="this.src='assets/img/group-avatar.png'">
        </ion-avatar>

        <!-- Avatar for individual conversations. -->
        <ion-avatar *ngIf="conversation.type == typeIndividual" core-user-avatar [user]="conversation.otherUser" [linkProfile]="false" [checkOnline]="conversation.showonlinestatus" item-start></ion-avatar>

        <h2>
            <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>
        </h2>
        <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>
        <p *ngIf="conversation.subname"><core-format-text [text]="conversation.subname"></core-format-text></p>
        <p class="addon-message-last-message">
            <span *ngIf="conversation.sentfromcurrentuser" class="addon-message-last-message-user">{{ 'addon.messages.you' | translate }}</span>
            <core-format-text *ngIf="conversation.type != typeIndividual && conversation.members[0]" [text]="conversation.members[0].fullname + ':'" class="addon-message-last-message-user"></core-format-text>
            <core-format-text clean="true" singleLine="true" [text]="conversation.lastmessage" class="addon-message-last-message-text"></core-format-text>
        </p>
    </a>
</ng-template>