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

<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
        </ion-buttons>
        <ion-title>{{ 'addon.messages.messages' | translate }}</ion-title>
        <ion-buttons slot="end">
            <ion-button (click)="gotoSearch()" [attr.aria-label]="'addon.messages.searchcombined' | translate">
                <ion-icon name="fas-search" slot="icon-only" aria-hidden="true"></ion-icon>
            </ion-button>
            <ion-button (click)="gotoSettings()" [attr.aria-label]="'addon.messages.messagepreferences' | translate">
                <ion-icon name="fas-cog" slot="icon-only" aria-hidden="true"></ion-icon>
            </ion-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-toolbar>
</ion-header>
<ion-content class="core-expand-max">
    <core-split-view>
        <ion-refresher slot="fixed" [disabled]="!loaded || !currentListEl" (ionRefresh)="refreshData($event.target)">
            <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
        </ion-refresher>

        <core-loading [hideUntil]="loaded" [message]="loadingMessage">
            <ion-list>
                <ion-item class="ion-text-wrap addon-message-discussion" (click)="gotoContacts()"
                    [attr.aria-label]="'addon.messages.contacts' | translate" detail="true" button>
                    <ion-icon name="fas-address-book" slot="start" aria-hidden="true"></ion-icon>
                    <ion-label><h2>{{ 'addon.messages.contacts' | translate }}</h2></ion-label>
                    <ion-badge *ngIf="contactRequestsCount > 0" slot="end">{{contactRequestsCount}}</ion-badge>
                </ion-item>
                <!-- Favourite conversations. -->
                <ion-item-divider class="ion-text-wrap core-expandable" (click)="toggle(favourites)" sticky="true"
                    [attr.aria-label]="(favourites.expanded ? 'core.collapse' : 'core.expand') | translate"
                    [attr.aria-expanded]="favourites.expanded" role="heading button">
                    <ion-icon *ngIf="!favourites.expanded" name="fas-caret-right" slot="start" aria-hidden="true"></ion-icon>
                    <ion-icon *ngIf="favourites.expanded" name="fas-caret-down" slot="start" aria-hidden="true"></ion-icon>
                    <ion-label>{{ 'core.favourites' | translate }} ({{ favourites.count }})</ion-label>
                    <ion-badge slot="end" *ngIf="favourites.unread">{{ favourites.unread }}</ion-badge>
                </ion-item-divider>
                <div [hidden]="!favourites.conversations || !favourites.expanded || favourites.loading" #favlist>
                    <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 class="ion-text-wrap" *ngIf="favourites.conversations && favourites.conversations.length == 0">
                        <ion-label><p>{{ 'addon.messages.nofavourites' | translate }}</p></ion-label>
                    </ion-item>
                </div>
                <ion-item class="ion-text-center" *ngIf="favourites.loading">
                    <ion-label><ion-spinner></ion-spinner></ion-label>
                </ion-item>

                <!-- Group conversations. -->
                <ion-item-divider class="ion-text-wrap core-expandable" (click)="toggle(group)" sticky="true"
                    [attr.aria-label]="(group.expanded ? 'core.collapse' : 'core.expand') | translate"
                    [attr.aria-expanded]="group.expanded" role="heading button">
                    <ion-icon *ngIf="!group.expanded" name="fas-caret-right" slot="start" aria-hidden="true"></ion-icon>
                    <ion-icon *ngIf="group.expanded" name="fas-caret-down" slot="start" aria-hidden="true"></ion-icon>
                    <ion-label>{{ 'addon.messages.groupconversations' | translate }} ({{ group.count }})</ion-label>
                    <ion-badge slot="end" *ngIf="group.unread">{{ group.unread }}</ion-badge>
                </ion-item-divider>
                <div [hidden]="!group.conversations || !group.expanded || group.loading" #grouplist>
                    <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 class="ion-text-wrap" *ngIf="group.conversations && group.conversations.length == 0">
                        <ion-label><p>{{ 'addon.messages.nogroupconversations' | translate }}</p></ion-label>
                    </ion-item>
                </div>
                <ion-item class="ion-text-center" *ngIf="group.loading">
                    <ion-label><ion-spinner></ion-spinner></ion-label>
                </ion-item>

                <ion-item-divider class="ion-text-wrap core-expandable" (click)="toggle(individual)" sticky="true"
                    [attr.aria-label]="(individual.expanded ? 'core.collapse' : 'core.expand') | translate"
                    [attr.aria-expanded]="individual.expanded" role="heading button">
                    <ion-icon *ngIf="!individual.expanded" name="fas-caret-right" slot="start" aria-hidden="true"></ion-icon>
                    <ion-icon *ngIf="individual.expanded" name="fas-caret-down" slot="start" aria-hidden="true"></ion-icon>
                    <ion-label>{{ 'addon.messages.individualconversations' | translate }} ({{ individual.count }})</ion-label>
                    <ion-badge slot="end" *ngIf="individual.unread">{{ individual.unread }}</ion-badge>
                </ion-item-divider>
                <div [hidden]="!individual.conversations || !individual.expanded || individual.loading" #indlist>
                    <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 class="ion-text-wrap" *ngIf="individual.conversations && individual.conversations.length == 0">
                        <ion-label><p>{{ 'addon.messages.noindividualconversations' | translate }}</p></ion-label>
                    </ion-item>
                </div>
                <ion-item class="ion-text-center" *ngIf="individual.loading">
                    <ion-label><ion-spinner></ion-spinner></ion-label>
                </ion-item>

            </ion-list>
        </core-loading>
    </core-split-view>
</ion-content>

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

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

        <ion-label>
            <h2>
                <core-format-text [text]="conversation.name" contextLevel="system" [contextInstanceId]="0"></core-format-text>
                <ion-icon name="fas-user-slash" *ngIf="conversation.isblocked"
                    [title]="'addon.messages.contactblocked' | translate"></ion-icon>
                <ion-icon *ngIf="conversation.ismuted" name="fas-volume-mute"
                    [title]="'addon.messages.mutedconversation' | translate"></ion-icon>
            </h2>
            <p *ngIf="conversation.subname"><core-format-text [text]="conversation.subname" contextLevel="system"
                [contextInstanceId]="0"></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>
                <span *ngIf="!conversation.sentfromcurrentuser && conversation.type == typeGroup && conversation.members[0]"
                    class="addon-message-last-message-user">{{ conversation.members[0].fullname + ':' }}</span>
                <core-format-text clean="true" singleLine="true" [text]="conversation.lastmessage"
                    class="addon-message-last-message-text" contextLevel="system" [contextInstanceId]="0"></core-format-text>
            </p>
        </ion-label>
        <ion-note *ngIf="conversation.lastmessagedate > 0 || conversation.unreadcount" slot="end">
            <ion-badge *ngIf="conversation.unreadcount > 0">{{ conversation.unreadcount }}</ion-badge>
            <span *ngIf="conversation.lastmessagedate > 0">{{conversation.lastmessagedate | coreDateDayOrTime}}</span>
        </ion-note>
    </ion-item>
</ng-template>