add message status

This commit is contained in:
Peter Maquiran
2024-08-06 16:53:13 +01:00
parent 0e71b27de5
commit 95a6d01aae
6 changed files with 121 additions and 41 deletions
+28 -17
View File
@@ -41,27 +41,38 @@
<ion-content >
<div class="messages height-100 width-100 d-flex flex-column" #scrollMe>
<div class="messages height-100 width-100 d-flex flex-column" #scrollMe >
<div
*ngFor="let message of roomMessage$ | async" class="messages-list-item-wrapper"
[ngClass]="{'my-message': message.sender.wxUserId === sessionStore.user.UserId, 'other-message': message.sender.wxUserId !== sessionStore.user.UserId}">
*ngFor="let message of (roomMessage$ | async)" class="messages-list-item-wrapper"
[ngClass]="{'my-message': message.sender.wxUserId === sessionStore.user.UserId, 'other-message': message.sender.wxUserId !== sessionStore.user.UserId}"
>
<div class="message-container">
{{ message.message }}
<br>
<ion-icon *ngIf="message.messageStatus != 'send'" src="assets/images/clock-regular.svg"></ion-icon>
<ion-icon *ngIf="message.messageStatus == 'send'" src="assets/images/check-solid.svg"></ion-icon>
<div class="d-flex justify-content-between">
<div>
{{ message.message }}
</div>
<div>
<div class="message-item-options d-flex justify-content-end">
<fa-icon [matMenuTriggerFor]="beforeMenu" icon="chevron-down" class="message-options-icon cursor-pointer"></fa-icon>
<mat-menu #beforeMenu="matMenu" xPosition="before">
<button (click)="messageDelete({messageId: message.id })" class="menuButton">Apagar mensagem</button>
<button (click)="editMessage(message)" class="menuButton">Editar mensagem</button>
<button (click)="toggleEmojiPicker(message)" class="menuButton">Reagir mensagem</button>
</mat-menu>
</div>
</div>
<div class="message-item-options d-flex justify-content-end">
<fa-icon [matMenuTriggerFor]="beforeMenu" icon="chevron-down" class="message-options-icon cursor-pointer"></fa-icon>
<mat-menu #beforeMenu="matMenu" xPosition="before">
<button (click)="messageDelete({messageId: message.id })" class="menuButton">Apagar mensagem</button>
<button (click)="editMessage(message)" class="menuButton">Editar mensagem</button>
<button (click)="toggleEmojiPicker(message)" class="menuButton">Reagir mensagem</button>
</mat-menu>
</div>
<div style="text-align: end;">
<div *ngIf="message.messageStatus != 'send'" style="font-size: .6875rem;">A enviar</div>
<div *ngIf="message.messageStatus == 'send'" style="font-size: .6875rem;">Enviado</div>
</div>
<!-- Emoji Picker -->
<div *ngIf="selectedMessage === message" class="emoji-picker" [ngStyle]="{'bottom': '0', 'right': '0'}">
@@ -80,12 +91,12 @@
</div>
<!--
<ion-fab horizontal="end" vertical="bottom" slot="fixed">
<ion-fab-button *ngIf="scrollToBottomBtn" (click)="scrollToBottomClicked()" color="light" size="small">
<ion-fab-button *ngIf="scrollToBottomBtn" color="light" size="small">
<ion-icon name="chevron-down"></ion-icon>
</ion-fab-button>
</ion-fab>
</ion-fab> -->