add implementation

This commit is contained in:
Peter Maquiran
2023-09-11 21:57:14 +01:00
parent 680f57313f
commit c04fc2a15f
12 changed files with 529 additions and 140 deletions
@@ -42,14 +42,14 @@
</div>
<div class="messages-list-item-wrapper container-width-100" *ngFor="let msg of ChatSystemService.getGroupRoom(roomId).messages; let last = last">
<div class="message-item incoming-{{msg.u.username!=sessionStore.user.UserName}} max-width-45" *ngIf="msg.t != 'r' && msg.t != 'ul' && msg.t != 'au' && msg.t != 'ru' && msg.msg !=''" >
<div class="message-item-options d-flex justify-content-end">
<div class="message-item incoming-{{msg.u.username!=sessionStore.user.UserName}} max-width-45" *ngIf="msg.t != 'r' && msg.t != 'ul' && msg.t != 'au' && msg.t != 'ru' && msg.msg !=''" [class.dateLabel]="msg.dateLabel">
<div class="message-item-options d-flex justify-content-end" *ngIf="!msg.dateLabel">
<fa-icon [matMenuTriggerFor]="beforeMenu" icon="chevron-down" class="message-options-icon cursor-pointer"></fa-icon>
<mat-menu #beforeMenu="matMenu" xPosition="before">
<button (click)="deleteMessage(msg._id)" class="menuButton">Apagar mensagem</button>
</mat-menu>
</div>
<div class="title d-flex">
<div class="title d-flex" *ngIf="!msg.dateLabel">
<ion-label>{{msg.u.name}}</ion-label>
<span class="time">{{msg.duration}}</span>
</div>
@@ -61,7 +61,7 @@
<span *ngIf="msg.online == true && !msg.manualRetry && msg.viewed == 0" class="enviado pl-10"> Enviado</span>
<!-- <ion-icon *ngIf="msg.messageSend == false && !msg.manualRetry" src="assets/images/clock-regular.svg"></ion-icon> -->
<!-- <ion-icon *ngIf="msg.messageSend == true && msg.received.length == 0 && msg.viewed.length == 0" src="assets/images/check-solid.svg"></ion-icon> -->
<!-- <ion-icon *ngIf="msg.messageSend == true && msg.received.length == 0 && msg.viewed.length == 0" src="assets/images/check-solid.svg"></ion-icon> -->
<!-- <ion-icon *ngIf="msg.messageSend && msg.received.length >= 1 && msg.viewed.length == 0" src="assets/images/check-double-solid.svg"></ion-icon> -->
<!-- <ion-icon *ngIf="msg.viewed.length >= 1" src="assets/images/check-double-solid -viewed.svg"></ion-icon> -->
<span class="lido pl-10" *ngIf="msg.viewed.length >= 1" > Lido</span>
@@ -107,7 +107,7 @@
<span *ngIf="msg.online == true && !msg.manualRetry && msg.viewed == 0" class="enviado pl-10"> Enviado</span>
<!-- <ion-icon *ngIf="msg.messageSend == false && !msg.manualRetry" src="assets/images/clock-regular.svg"></ion-icon> -->
<!-- <ion-icon *ngIf="msg.messageSend == true && msg.received.length == 0 && msg.viewed.length == 0" src="assets/images/check-solid.svg"></ion-icon> -->
<!-- <ion-icon *ngIf="msg.messageSend == true && msg.received.length == 0 && msg.viewed.length == 0" src="assets/images/check-solid.svg"></ion-icon> -->
<!-- <ion-icon *ngIf="msg.messageSend && msg.received.length >= 1 && msg.viewed.length == 0" src="assets/images/check-double-solid.svg"></ion-icon> -->
<!-- <ion-icon *ngIf="msg.viewed.length >= 1" src="assets/images/check-double-solid -viewed.svg"></ion-icon> -->
<span class="lido pl-10" *ngIf="msg.viewed.length >= 1" >Lido</span>
@@ -120,7 +120,7 @@
<div (click)="openPreview(msg)" class="file-details add-ellipsis cursor-pointer" *ngIf="msg.file">
<div *ngIf="!msg.attachments[0].image_url">
<ion-item class="add-attachment-bg-color" shape="round" lines="none" type="button">
<ion-icon *ngIf="msg.attachments[0].type != 'webtrix'" name="document" class="file-icon"></ion-icon>
<ion-icon *ngIf="msg.attachments[0].type == 'webtrix'" src="assets/icon/webtrix.svg" class="file-icon"></ion-icon>
<ion-label>{{ file.title}}</ion-label>
@@ -164,7 +164,7 @@
<span *ngIf="msg.online == true && !msg.manualRetry && msg.viewed == 0" class="enviado pl-10"> Enviado</span>
<!-- <ion-icon *ngIf="msg.messageSend == false && !msg.manualRetry" src="assets/images/clock-regular.svg"></ion-icon> -->
<!-- <ion-icon *ngIf="msg.messageSend == true && msg.received.length == 0 && msg.viewed.length == 0" src="assets/images/check-solid.svg"></ion-icon> -->
<!-- <ion-icon *ngIf="msg.messageSend == true && msg.received.length == 0 && msg.viewed.length == 0" src="assets/images/check-solid.svg"></ion-icon> -->
<!-- <ion-icon *ngIf="msg.messageSend && msg.received.length >= 1 && msg.viewed.length == 0" src="assets/images/check-double-solid.svg"></ion-icon> -->
<!-- <ion-icon *ngIf="msg.viewed.length >= 1" src="assets/images/check-double-solid -viewed.svg"></ion-icon> -->
<span class="lido pl-10" *ngIf="msg.viewed.length >= 1" > Lido</span>
@@ -328,4 +328,13 @@
padding: 6px;
border-radius: 10px;
cursor: pointer;
}
}
.dateLabel {
background: #ebebeb !important;
float: unset !important;
margin: 0px auto !important;
width: 110px;
text-align: center;
}
+17 -16
View File
@@ -33,21 +33,22 @@
<ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
<ion-refresher-content>
</ion-refresher-content>
</ion-refresher>
</ion-refresher>
<div class="messages" #scrollMe>
<ion-list>
<div class="messages-list-item-wrapper container-width-100"
*ngFor="let msg of ChatSystemService.getDmRoom(roomId).messages; index as i; let last = last">
<div class='message-item incoming-{{msg.u.username!=sessionStore.user.UserName}} max-width-45' *ngIf="msg.msg !=''">
<div class="message-item-options d-flex justify-content-end">
*ngFor="let msg of ChatSystemService.getDmRoom(roomId).messages; index as i; let last = last" >
<div class='message-item incoming-{{msg.u.username!=sessionStore.user.UserName}} max-width-45' *ngIf="msg.msg !=''" [class.dateLabel]="msg.dateLabel">
<div class="message-item-options d-flex justify-content-end" *ngIf="!msg.dateLabel">
<fa-icon [matMenuTriggerFor]="beforeMenu" icon="chevron-down" class="message-options-icon cursor-pointer">
</fa-icon>
<mat-menu #beforeMenu="matMenu" xPosition="before">
<button (click)="deleteMessage(msg._id, msg)" class="menuButton">Apagar mensagem</button>
</mat-menu>
</div>
<div class="title d-flex">
<div class="title d-flex" *ngIf="!msg.dateLabel">
<ion-label >{{msg.u.name}}</ion-label>
<span class="time">{{msg.duration}}</span>
</div>
@@ -57,11 +58,11 @@
<ion-label *ngIf="msg.delate == true" class="flex-0">Apagou a mensagem</ion-label>
<ion-label class="float-status-all float-status" *ngIf="msg.u.username==sessionStore.user.UserName">
<span *ngIf="msg.online == true && !msg.manualRetry && msg.viewed == 0" class="enviado pl-10"> Enviado</span>
<!-- <ion-icon *ngIf="msg.messageSend == false && !msg.manualRetry" src="assets/images/clock-regular.svg"></ion-icon> -->
<!-- <ion-icon *ngIf="msg.messageSend == true && msg.received.length == 0 && msg.viewed.length == 0" src="assets/images/check-solid.svg"></ion-icon> -->
<!-- <ion-icon *ngIf="msg.messageSend == true && msg.received.length == 0 && msg.viewed.length == 0" src="assets/images/check-solid.svg"></ion-icon> -->
<!-- <ion-icon *ngIf="msg.messageSend && msg.received.length >= 1 && msg.viewed.length == 0" src="assets/images/check-double-solid.svg"></ion-icon> -->
<!-- <ion-icon *ngIf="msg.viewed.length >= 1" src="assets/images/check-double-solid -viewed.svg"></ion-icon> -->
<span class="lido pl-10" *ngIf="msg.viewed.length >= 1" > Lido</span>
@@ -102,10 +103,10 @@
</div>
<img *ngIf="msg.attachments[0].image_url" src={{msg.attachments[0].image_url}} alt="image">
<ion-label class="float-status-all float-status" *ngIf="msg.u.username==sessionStore.user.UserName">
<span *ngIf="msg.online == true && !msg.manualRetry && msg.viewed == 0" class="enviado pl-10"> Enviado</span>
<!-- <ion-icon *ngIf="msg.messageSend == false && !msg.manualRetry" src="assets/images/clock-regular.svg"></ion-icon> -->
<!-- <ion-icon *ngIf="msg.messageSend == true && msg.received.length == 0 && msg.viewed.length == 0" src="assets/images/check-solid.svg"></ion-icon> -->
<!-- <ion-icon *ngIf="msg.messageSend == true && msg.received.length == 0 && msg.viewed.length == 0" src="assets/images/check-solid.svg"></ion-icon> -->
<!-- <ion-icon *ngIf="msg.messageSend && msg.received.length >= 1 && msg.viewed.length == 0" src="assets/images/check-double-solid.svg"></ion-icon> -->
<!-- <ion-icon *ngIf="msg.viewed.length >= 1" src="assets/images/check-double-solid -viewed.svg"></ion-icon> -->
<span class="lido pl-10" *ngIf="msg.viewed.length >= 1" > Lido</span>
@@ -118,7 +119,7 @@
<div *ngIf="!msg.attachments[0].image_url">
<ion-item class="add-attachment-bg-color" shape="round" lines="none" type="button">
<ion-icon *ngIf="msg.attachments[0].type != 'webtrix'" name="document" class="file-icon"></ion-icon>
<ion-icon *ngIf="msg.attachments[0].type == 'webtrix'" src="assets/icon/webtrix.svg" class="file-icon"></ion-icon>
<ion-label>{{ file.title}}</ion-label>
@@ -130,7 +131,7 @@
</div>
<div *ngIf="msg.attachments[0].image_url">
<span *ngIf="msg.file.type">
<fa-icon *ngIf="msg.file.type == 'application/pdf'" icon="file-pdf" class="pdf-icon"></fa-icon>
<fa-icon *ngIf="msg.file.type == 'application/word'" icon="file-word" class="word-icon">
@@ -166,13 +167,13 @@
<ion-label *ngIf="msg.file">
<span *ngIf="file.description">{{file.description}}</span>
<span *ngIf="file.description && msg.file.type != 'application/webtrix'"></span>
</ion-label>
<ion-label class="float-status-all float-status" *ngIf="msg.u.username==sessionStore.user.UserName">
<span *ngIf="msg.online == true && !msg.manualRetry && msg.viewed == 0" class="enviado pl-10"> Enviado</span>
<!-- <ion-icon *ngIf="msg.messageSend == false && !msg.manualRetry" src="assets/images/clock-regular.svg"></ion-icon> -->
<!-- <ion-icon *ngIf="msg.messageSend == true && msg.received.length == 0 && msg.viewed.length == 0" src="assets/images/check-solid.svg"></ion-icon> -->
<!-- <ion-icon *ngIf="msg.messageSend == true && msg.received.length == 0 && msg.viewed.length == 0" src="assets/images/check-solid.svg"></ion-icon> -->
<!-- <ion-icon *ngIf="msg.messageSend && msg.received.length >= 1 && msg.viewed.length == 0" src="assets/images/check-double-solid.svg"></ion-icon> -->
<!-- <ion-icon *ngIf="msg.viewed.length >= 1" src="assets/images/check-double-solid -viewed.svg"></ion-icon> -->
<span class="lido pl-10" *ngIf="msg.viewed.length >= 1" > Lido</span>
@@ -210,7 +211,7 @@
</div>
</ion-list>
</ion-list>
</div>
@@ -409,4 +409,13 @@ ion-footer {
.lido, .enviado {
font-size: rem(11);
}
}
.dateLabel {
background: #ebebeb !important;
float: unset !important;
margin: 0px auto !important;
width: 110px;
text-align: center;
}