mirror of
https://code.equilibrium.co.ao/ITO/doneit-web.git
synced 2026-04-18 20:47:54 +00:00
Peter Maquiran
274 lines
14 KiB
HTML
274 lines
14 KiB
HTML
<ion-header class="ion-no-border" >
|
|
<ion-toolbar class="header-toolbar">
|
|
<div class="main-header">
|
|
<div class="header-top">
|
|
<div class="left">
|
|
<button class="btn-no-color" (click)="close()">
|
|
<!-- <ion-icon slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon> -->
|
|
<fa-icon icon="chevron-left" class="header-top-btn font-awesome-1"></fa-icon>
|
|
</button>
|
|
</div>
|
|
<div class="middle-container" *ngIf="!showMessageOptions">
|
|
<div class="middle" >
|
|
<ion-label class="title">{{ RoomStore.room.roomName }}</ion-label>
|
|
<span *ngIf="RoomStore.roomStatus$ | async as roomStatus"><ion-icon *ngIf="roomStatus"
|
|
class="online" name="ellipse"></ion-icon></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <div (click)="ChatSystemService.getDmRoom(roomId).deleteAll()" >delete all</div> -->
|
|
<div class="middle-container-options" *ngIf="showMessageOptions">
|
|
<fa-icon (click)="deleteMessage(selectedMsgId)" icon="trash" class="middle-container-options-icons"></fa-icon>
|
|
<!-- <ion-icon name="trash"></ion-icon> -->
|
|
</div>
|
|
<div class="right" *ngIf="RoomStore.room.roomType == RoomTypeEnum.Group">
|
|
<button class="btn-no-color" (click)="openMessagesOptions()">
|
|
<ion-icon *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/theme/blue/icons-menu.svg"></ion-icon>
|
|
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' " src="assets/images/theme/gov/icons-menu.svg">
|
|
</ion-icon>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="header-bottom d-flex">
|
|
<div class="header-bottom-icon" *ngIf="RoomStore.room.roomType == RoomTypeEnum.Group">
|
|
<ion-icon *ngIf="ThemeService.currentTheme == 'default' " src="assets/icon/icons-user.svg"></ion-icon>
|
|
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' " src="assets/icon/theme/gov/icons-user.svg"></ion-icon>
|
|
</div>
|
|
|
|
<ion-list class="header-bottom-contacts" *ngIf="RoomStore.roomMembers$ | async as memberList" >
|
|
<ng-container *ngFor="let user of memberList; let i = index">
|
|
<span *ngIf="RoomStore.room.roomType == RoomTypeEnum.Group"> {{ user.wxFullName }}<ng-container *ngIf="i < memberList.length - 1">, </ng-container> </span>
|
|
</ng-container>
|
|
</ion-list>
|
|
</div>
|
|
|
|
</div>
|
|
</ion-toolbar>
|
|
</ion-header>
|
|
|
|
<ion-content >
|
|
|
|
<div class="messages height-100 width-100 d-flex flex-column" #scrollMe>
|
|
|
|
<div
|
|
*ngFor="let message of RoomStore.messages1[room.$id]; let messageIndex = index" class="messages-list-item-wrapper"
|
|
[ngClass]="{
|
|
'info-meeting': message.messageType == IMessageType.information && !message.ballon,
|
|
'info-ballon': message.ballon == true,
|
|
'my-message': message.messageType == IMessageType.normal && message?.sender?.wxUserId === SessionStore.user.UserId && !message.ballon,
|
|
'other-message': message.messageType == IMessageType.normal && message?.sender?.wxUserId !== SessionStore.user.UserId && !message.ballon
|
|
}"
|
|
>
|
|
|
|
<!-- Emoji Picker -->
|
|
<div *ngIf="selectedMessage === message" class="emoji-picker mr-20" [ngStyle]="{'bottom': '0', 'right': '0'}">
|
|
<span *ngFor="let emoji of emojis" (click)="addReaction(message, emoji)" class="emoji-icon">
|
|
{{ emoji }}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="message-container rotate-div" *ngIf="message.showMessage">
|
|
<div class="d-flex justify-content-between">
|
|
<div>
|
|
<div style="white-space: pre-line;">
|
|
{{ message.message }}
|
|
</div>
|
|
|
|
<div *ngFor="let attachment of message.attachments; let i = index">
|
|
<div *ngIf="attachment.source == MessageAttachmentFileSource.Webtrix">
|
|
|
|
<ion-icon src="assets/icon/webtrix.svg" class="file-icon font-25"></ion-icon>
|
|
<!-- <ion-label>{{ attachment.fileName}}</ion-label> -->
|
|
<!-- <ion-icon *ngIf="ThemeService.currentTheme == 'default' && attachment.type != 'webtrix' && !( msg.downloadLoader == true || msg.uploadingFile == true ) " class="icon-download" src="assets/icon/theme/default/icons-download.svg" slot="end"></ion-icon>
|
|
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' && attachment.type != 'webtrix' && !( msg.downloadLoader == true || msg.uploadingFile == true ) " class="icon-download" src="assets/icon/theme/gov/icons-download.svg" slot="end"></ion-icon>
|
|
<ion-icon *ngIf="( msg.downloadLoader == true || msg.uploadingFile == true )" class="icon-download" src="assets/gif/theme/{{ThemeService.currentTheme}}/Blocks-loader.svg" slot="end"></ion-icon> -->
|
|
|
|
</div>
|
|
|
|
<div *ngIf="attachment.fileType == MessageAttachmentFileType.Image">
|
|
<img
|
|
class="image-container"
|
|
*ngIf="message.oneShot != true && attachment.blobURl != true"
|
|
[src]="attachment.safeFile"
|
|
(load)="onImageLoad(message, messageIndex)"
|
|
(error)="onImageError()"
|
|
>
|
|
|
|
<img
|
|
class="image-container"
|
|
*ngIf="message.oneShot != true && attachment.blobURl"
|
|
[src]="attachment.safeFile|safehtml"
|
|
(load)="onImageLoad(message, messageIndex)"
|
|
(error)="onImageError()"
|
|
>
|
|
|
|
<div *ngIf="SessionStore.user.UserId == message.sender.wxUserId && message.oneShot == true">
|
|
Mandou uma mensagen com visualização única
|
|
</div>
|
|
|
|
<div *ngIf="SessionStore.user.UserId != message.sender.wxUserId && message.oneShot == true">
|
|
<!-- <div *ngIf="message.oneShot == true" class="cursor-pointer"> -->
|
|
<div (click)="viewOnce($event, message, i)">
|
|
Abrir a visualização única
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div *ngIf="attachment.fileType == MessageAttachmentFileType.Audio">
|
|
<audio [src]="attachment.safeFile|safehtml" preload="metadata" class="flex-grow-1" controls controlsList="nodownload noplaybackrate"></audio>
|
|
</div>
|
|
|
|
<div *ngIf="attachment.fileType == MessageAttachmentFileType.Doc" class="d-flex" (click)="openPreview(message)">
|
|
<fa-icon *ngIf="attachment.mimeType == 'application/pdf'" icon="file-pdf" class="pdf-icon"></fa-icon>
|
|
<fa-icon *ngIf="attachment.mimeType == 'application/word'" icon="file-word" class="word-icon">
|
|
</fa-icon>
|
|
<fa-icon *ngIf="attachment.mimeType == 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'" icon="file-word" class="word-icon"></fa-icon>
|
|
<fa-icon
|
|
*ngIf="attachment.mimeType == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'"
|
|
icon="file-word" class="excel-icon"></fa-icon>
|
|
<ion-icon *ngIf="attachment.mimeType == 'application/webtrix'" src="assets/icon/webtrix.svg">
|
|
</ion-icon>
|
|
<ion-icon *ngIf="attachment.mimeType == 'application/meeting'" src="assets/icon/webtrix.svg">
|
|
</ion-icon>
|
|
|
|
<ion-label>{{ attachment?.fileName || attachment?.description }}</ion-label>
|
|
</div>
|
|
</div>
|
|
|
|
</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 class="custom-menu d-block" #beforeMenu="matMenu" xPosition="before">
|
|
<button (click)="messageDelete(message)" class="menuButton d-block py-2 px-10">Apagar mensagem</button>
|
|
<button *ngIf="!message.hasAttachment" (click)="editMessage(message)" class="menuButton d-block py-2 px-10">Editar mensagem</button>
|
|
<button (click)="toggleEmojiPicker(message)" class="menuButton d-block py-2 px-10">Reagir mensagem</button>
|
|
</mat-menu>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
<div style="text-align: end;">
|
|
|
|
<div class="d-flex align-center justify-content-end" style="text-align: end;" *ngIf="RoomStore.totalMembers != 0 && SessionStore.user.UserId == message.sender.wxUserId">
|
|
<span class="font-14-em pr-1">{{ message.hour }}</span>
|
|
<ion-icon *ngIf="messageStatus(message) == 'enviar'" src="assets/images/clock-regular.svg"></ion-icon>
|
|
<ion-icon *ngIf="messageStatus(message) == 'enviado'" src="assets/images/check-solid.svg"></ion-icon>
|
|
<ion-icon *ngIf="messageStatus(message) == 'allReceived'" src="assets/images/check-double-solid.svg"></ion-icon>
|
|
<ion-icon *ngIf="messageStatus(message) == 'allViewed'" src="assets/images/check-double-solid -viewed.svg"></ion-icon>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="message-container rotate-div" *ngIf="message.isDeleted == true">
|
|
Mensagem foi eliminada
|
|
</div>
|
|
<div *ngIf="message.messageType == IMessageType.information && !message.ballon" class="text-center">
|
|
{{ message.message }}
|
|
</div>
|
|
<div *ngIf="message.ballon" class="text-center ballon">
|
|
{{ message.message }}
|
|
</div>
|
|
|
|
<!-- current emoji -->
|
|
<div class="rotate-div emoji-container" *ngIf="message.isDeleted != true && message.messageType != IMessageType.information && message.ballon != true">
|
|
<span *ngFor="let reaction of message.reactions" class="emoji-icon">
|
|
{{ reaction.reaction }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<!--
|
|
<ion-fab horizontal="end" vertical="bottom" slot="fixed">
|
|
<ion-fab-button *ngIf="scrollToBottomBtn" color="light" size="small">
|
|
<ion-icon name="chevron-down"></ion-icon>
|
|
</ion-fab-button>
|
|
</ion-fab> -->
|
|
|
|
|
|
|
|
<ion-fab horizontal="start" vertical="bottom" slot="fixed">
|
|
<div *ngFor="let user of RoomStore.userTyping$; let i = index">
|
|
{{ user }} <ng-container *ngIf="i == RoomStore.userTyping$.length - 1">... </ng-container>
|
|
</div>
|
|
</ion-fab>
|
|
|
|
|
|
<!-- <div *ngIf="userTyping$?.typingList?.typingList">
|
|
|
|
<div
|
|
*ngFor="let message of userTyping$.typingList.typingList " class="messages-list-item-wrapper"
|
|
>
|
|
{{ message.userName }}
|
|
</div>
|
|
</div>
|
|
-->
|
|
<!-- <div *ngIf="userTyping$" class="header-bottom-contacts" >
|
|
|
|
<div *ngFor="let typing of userTyping$; let i = index">
|
|
{{ typing.userName }}<div *ngIf="i < userTyping$.length - 1">, </div>
|
|
</div>
|
|
</div>
|
|
-->
|
|
|
|
</div>
|
|
</ion-content>
|
|
|
|
<ion-footer>
|
|
|
|
<!-- <div class="typing" *ngIf="ChatSystemService.getDmRoom(roomId).otherUserType == true">
|
|
<ngx-letters-avatar [avatarName]="ChatSystemService.getGroupRoom(roomId).name" [width]="30" [circular]="true"
|
|
fontFamily="Roboto"></ngx-letters-avatar>
|
|
está a escrever ...
|
|
</div> -->
|
|
<div class="width-100 pl-20 pr-20">
|
|
<span *ngIf="!lastAudioRecorded">{{durationDisplay}}</span>
|
|
<audio [src]="audioRecorded" class="d-flex width-100 mt-10 mb-10" *ngIf="lastAudioRecorded" controls
|
|
controlsList="nodownload noplaybackrate"></audio>
|
|
</div>
|
|
|
|
<div class="container width-100 d-flex">
|
|
<div>
|
|
<button *ngIf="!recording && !lastAudioRecorded && allowTyping" class="btn-no-color" (click)="openChatOptions()">
|
|
<ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="chat-icon-options"
|
|
src="assets/images/icons-add.svg"></ion-icon>
|
|
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="chat-icon-options"
|
|
src="assets/images/theme/gov/icons-add.svg"></ion-icon>
|
|
</button>
|
|
<button *ngIf="recording || lastAudioRecorded || !allowTyping" class="btn-no-color" (click)="deleteRecording()">
|
|
<fa-icon class="icon-size-27" icon="trash"></fa-icon>
|
|
</button>
|
|
</div>
|
|
<div class="width-70 message-container">
|
|
<div *ngIf="!recording && !lastAudioRecorded" class="type-message">
|
|
<ion-textarea *ngIf="allowTyping" autocomplete="on" autocorrect="on" spellcheck="true" clearOnEdit="true"
|
|
placeholder="Escrever uma mensagem" auto-grow class="message-input" rows="1"
|
|
[(ngModel)]="textField"
|
|
(ionChange)="sendTyping()"></ion-textarea>
|
|
</div>
|
|
<div *ngIf="recording" class="d-flex align-items-center justify-content-center">
|
|
<button (click)="stopRecording()" class="btn-no-color d-flex align-items-center justify-content-center">
|
|
<ion-icon class="icon-size-45" name="stop-circle-outline" color="danger"></ion-icon>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<button #recordbtn *ngIf="textField == '' && !lastAudioRecorded" (click)="startRecording()" class="btn-no-color">
|
|
<ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="chat-icon-send" src="assets/icon/theme/default/icons-chat-record-audio.svg"></ion-icon>
|
|
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="chat-icon-send" src="assets/icon/theme/gov/icons-chat-record-audio.svg"></ion-icon>
|
|
</button>
|
|
<button *ngIf="textField != ''" class="btn-no-color" (click)="sendMessage()">
|
|
<ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="chat-icon-send" src="assets/icon/theme/gov/icons-chat-send.svg"></ion-icon>
|
|
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="chat-icon-send" src="assets/icon/theme/gov/icons-chat-send.svg"></ion-icon>
|
|
</button>
|
|
<button *ngIf="textField == '' && lastAudioRecorded" class="btn-no-color" (click)="sendAudio(lastAudioRecorded)">
|
|
<ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="chat-icon-send" src="assets/icon/theme/gov/icons-chat-send.svg"></ion-icon>
|
|
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="chat-icon-send" src="assets/icon/theme/gov/icons-chat-send.svg"></ion-icon>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
</ion-footer>
|