set last message

This commit is contained in:
Peter Maquiran
2024-09-10 16:01:51 +01:00
parent f77592d0c4
commit 9fee233d91
23 changed files with 268 additions and 126 deletions
@@ -3,12 +3,11 @@
<div class="main-header">
<div class="title-content width-100">
<div class="back-icon">
<!-- <ion-icon *ngIf="ThemeService.currentTheme == 'default' " slot="end" src='assets/images/Theme/doneIt/icons-arrow-arrow-left.svg'></ion-icon>
<button class="btn-no-color cursor-pointer" >
<button class="btn-no-color cursor-pointer" (click)="dismiss()" >
<ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' " slot="end" src='assets/images/theme/{{ThemeService.currentTheme}}/icons-arrow-arrow-left.svg'></ion-icon>
<ion-icon *ngIf="ThemeService.currentTheme == 'default' " slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' " slot="end" src='assets/images/theme/gov/icons-calendar-arrow-left.svg'></ion-icon>
</button> -->
</button>
</div>
<div class="div-title">
<ion-label class="title">Editar Mensagem</ion-label>
@@ -18,34 +17,33 @@
</ion-toolbar>
</ion-header>
<ion-content>
<div class="main-content">
<div class="old-message-container d-flex justify-center">
<div class="old-message" style="white-space: pre-line;">{{ oldMessage }}</div>
</div>
<div class="main-content">
<div class="type-message mt-40-em">
<ion-textarea #messageInput clearOnEdit="true" placeholder="Escrever uma mensagem" class="message-input" rows="1" [(ngModel)]="message" (keyup.enter)="save()" ></ion-textarea>
</div>
<div class="old-message-container d-flex justify-center">
<div class="old-message" style="white-space: pre-line;">{{ oldMessage }}</div>
</div>
</ion-content>
<ion-footer class="ion-no-border">
<ion-toolbar class="footer-toolbar px-20">
<ion-buttons slot="start">
<button class="btn-ok" fill="clear" color="#fff" (click)="save()">
<ion-label>Enviar</ion-label>
</button>
</ion-buttons>
<ion-buttons slot="end">
<button class="btn-cancel" fill="clear" color="#061b52" (click)="dismiss()" >
<ion-label>Cancelar</ion-label>
</button>
</ion-buttons>
</ion-toolbar>
</ion-footer>
<div class="d-flex align-center mt-40-em mb-40-em mr-20">
<div class="type-message flex-1 ml-30 mr-20">
<ion-textarea
#messageInput
placeholder="Escrever uma mensagem"
class="message-input "
rows="1"
autoGrow="true"
[(ngModel)]="message"
(keyup.enter)="save()"
clearOnEdit="false"
></ion-textarea>
</div>
<button class="btn-no-color" (click)="save()">
<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>
@@ -64,14 +64,13 @@
overflow:auto;
padding: 0 0 0 0;
}
.type-message {
.type-message {
display: flex;
border: 1px solid #ebebeb;
border-radius: 25px;
margin: 0 30px 0 30px;
align-items: center;
overflow: auto;
}
@@ -88,7 +87,3 @@
display: inline;
padding: 10px 20px;
}
:host {
height: 400px;
}
@@ -1,5 +1,5 @@
import { Component, OnInit, Input, ViewChild, ElementRef } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { ModalController, PopoverController } from '@ionic/angular';
import { ThemeService } from 'src/app/services/theme.service'
@Component({
@@ -16,7 +16,7 @@ export class EditMessagePage implements OnInit {
oldMessage: string
constructor(
private modalController: ModalController,
public popoverController: PopoverController,
public ThemeService: ThemeService,
) {}
@@ -29,13 +29,11 @@ export class EditMessagePage implements OnInit {
}
dismiss() {
this.modalController.dismiss();
this.popoverController.dismiss();
}
save() {
// Implement your save logic here
console.log('Updated Message:', this.message);
this.modalController.dismiss({
this.popoverController.dismiss({
'message': this.message
});
}
@@ -60,6 +60,13 @@
}"
>
<!-- 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>
@@ -132,7 +139,7 @@
<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">
<mat-menu class="custom-menu" #beforeMenu="matMenu" xPosition="before">
<button (click)="messageDelete(message)" class="menuButton">Apagar mensagem</button>
<button *ngIf="!message.hasAttachment" (click)="editMessage(message)" class="menuButton">Editar mensagem</button>
<button (click)="toggleEmojiPicker(message)" class="menuButton">Reagir mensagem</button>
@@ -151,12 +158,6 @@
<ion-icon *ngIf="messageStatus(message) == 'allViewed'" src="assets/images/check-double-solid -viewed.svg"></ion-icon>
</div>
</div>
<!-- Emoji Picker -->
<div *ngIf="selectedMessage === message" class="emoji-picker" [ngStyle]="{'bottom': '0', 'right': '0'}">
<span *ngFor="let emoji of emojis" (click)="addReaction(message, emoji)" class="emoji-icon">
{{ emoji }}
</span>
</div>
</div>
<div class="message-container rotate-div" *ngIf="message.isDeleted == true">
@@ -1,4 +1,4 @@
import { AfterViewInit, Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { AfterViewInit, Component, ElementRef, HostListener, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { GestureController, ModalController, NavParams, PopoverController, Platform } from '@ionic/angular';
import { ViewDocumentPage } from 'src/app/modals/view-document/view-document.page';
import { ExpedientTaskModalPageNavParamsTask } from 'src/app/models/ExpedientTaskModalPage';
@@ -144,7 +144,7 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
isAdmin = true
RoomTypeEnum = RoomType
IMessageType = IMessageType
handleClickActive = true
constructor(
public popoverController: PopoverController,
@@ -219,6 +219,17 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
this.chatServiceService.getRoomById(this.roomId)
}
@HostListener('document:click', ['$event'])
handleClickOutside(event: Event) {
if (!this.handleClickActive) return;
const clickedInside = (event.target as HTMLElement).closest('.mat-menu-content');
if (!clickedInside) {
this.selectedMessage = null;
}
}
async getMessages() {
@@ -660,6 +671,7 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
ngOnDestroy() {
window.removeEventListener('scroll', this.scrollChangeCallback, true);
this.handleClickActive = false; // Disable the listener before component destruction
}
async sendMessage() {
@@ -901,7 +913,7 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
this.messages1[this.roomId].splice(index, 1);
}
}
async takePictureMobile() {
@@ -1131,7 +1143,8 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
file: result.value.files[0].data,
fileName: result.value.files[0].name,
source: MessageAttachmentSource.Device,
fileType: MessageAttachmentFileType.Doc
fileType: MessageAttachmentFileType.Doc,
description: result.value.files[0].name
}]
this.messages1[this.roomId].push(message)
@@ -1425,9 +1438,9 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
async editMessage(message: any) {
const modal = await this.modalController.create({
const modal = await this.popoverController.create({
component: EditMessagePage,
cssClass: '',
cssClass: 'edit-message',
componentProps: {
message: message.message,
roomId: this.roomId,
@@ -1448,11 +1461,11 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
});
}
toggleEmojiPicker(message: any) {
toggleEmojiPicker(message: MessageViewModal) {
if (this.selectedMessage === message) {
this.selectedMessage = null; // Close the picker if it's already open
} else {
this.selectedMessage = message; // Open the picker for the selected message
this.selectedMessage = message; // Open the picker for the selected message
}
}