fix visualisation of gestao documental in chat.

implemented delete DM messages
This commit is contained in:
tiago.kayaya
2022-01-06 20:52:50 +01:00
parent d22e602f13
commit 83ba2ebbd2
11 changed files with 233 additions and 71 deletions
@@ -92,13 +92,54 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
{{last ? scrollToBottom() : ''}} {{last ? scrollToBottom() : ''}}
</div> </div>
</div> </div>
<div *ngIf="msg.t != 'r' && msg.t != 'ul' && msg.t != 'ru' && msg.alias =='documento'" (press)="handlePress(msg._id)" class='message-container incoming-{{msg.u.username!=loggedUser.me.username}}'>
<div class="title">
<ion-label>{{msg.u.name}}</ion-label>
<span class="time">{{showDateDuration(msg._updatedAt)}}</span>
</div>
<div class="message">
<ion-label>{{msg.msg}}</ion-label>
<div *ngIf="msg.attachments" class="message-attachments">
<div *ngFor="let file of msg.attachments">
<div (click)="openPreview(msg)">
<img *ngIf="file.image_url" src="{{file.image_url}}" alt="image" >
</div>
<div>
<div>
<div class="file">
<!-- <canvas id="pdf_canvas"></canvas> -->
<div (click)="viewDocument(msg.file, file.title_link)" class="file-details add-ellipsis cursor-pointer" *ngIf="msg.file">
<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"></fa-icon>
<fa-icon *ngIf="msg.file.type == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'" icon="file-word" class="excel-icon"></fa-icon>
<ion-icon *ngIf="msg.file.type == 'application/webtrix'" src="assets/icon/webtrix.svg"></ion-icon>
</span>
<ion-label class="file-title">{{file.title}}</ion-label>
</div>
</div>
<div class="file-details-optional">
<ion-label *ngIf="msg.file">
<span *ngIf="file.description">{{file.description}}</span>
<span *ngIf="file.description && msg.file.type != 'application/webtrix'"></span>
<span *ngIf="msg.file.type != 'application/webtrix'">{{msg.file.type.replace('application/','').toUpperCase()}}</span>
</ion-label>
</div>
</div>
</div>
</div>
</div>
{{last ? scrollToBottom() : ''}}
</div>
</div>
<div *ngIf="msg.t == 'r'" class="info-text"> <div *ngIf="msg.t == 'r'" class="info-text">
<ion-label>Alterou o nome do grupo para "{{msg.msg.split('-').join(' ')}}"</ion-label><br /> <ion-label>Alterou o nome do grupo para "{{msg.msg.split('-').join(' ')}}"</ion-label><br />
{{last ? scrollToBottom() : ''}} {{last ? scrollToBottom() : ''}}
@@ -119,8 +160,8 @@
</div> </div>
{{last ? scrollToBottom() : ''}} {{last ? scrollToBottom() : ''}}
</div> </div>
<div *ngIf="msg.file" class="info-meeting"> <div *ngIf="msg.file">
<div *ngIf="msg.file.type == 'application/meeting'"> <div *ngIf="msg.file.type == 'application/meeting'" class="info-meeting">
<ion-label class="info-meeting-small">{{msg.u.name}} criou esta reunião</ion-label><br /> <ion-label class="info-meeting-small">{{msg.u.name}} criou esta reunião</ion-label><br />
<button (click)="goToEvent(msg.file.id)" class="btn-no-color info-meeting-normal"><ion-label class="info-meeting-normal">{{msg.file.subject}}</ion-label></button><br /> <button (click)="goToEvent(msg.file.id)" class="btn-no-color info-meeting-normal"><ion-label class="info-meeting-normal">{{msg.file.subject}}</ion-label></button><br />
<ion-label class="info-meeting-medium"><ion-icon name="calendar-outline"></ion-icon> De {{showDateDuration(msg.file.start_date)}} a {{showDateDuration(msg.file.end_date)}}</ion-label><br /> <ion-label class="info-meeting-medium"><ion-icon name="calendar-outline"></ion-icon> De {{showDateDuration(msg.file.start_date)}} a {{showDateDuration(msg.file.end_date)}}</ion-label><br />
+54 -2
View File
@@ -91,8 +91,60 @@
{{last ? scrollToBottom() : ''}} {{last ? scrollToBottom() : ''}}
</div> </div>
</div> </div>
<div *ngIf="msg.file" class="info-meeting">
<div *ngIf="msg.file.type == 'application/meeting'"> <div (press)="handlePress(msg._id)" class='message-container incoming-{{msg.u.username!=loggedUser.me.username}}' (click)="openPreview(msg)" *ngIf="msg.msg !=''">
<div class="title">
<ion-label>{{msg.u.name}}</ion-label>
<span class="time">{{showDateDuration(msg._updatedAt)}}</span>
</div>
<div>
<ion-label>{{msg.msg}}</ion-label>
{{last ? scrollToBottom() : ''}}
</div>
</div>
<div (press)="handlePress(msg._id)" class='message-container incoming-{{msg.u.username!=loggedUser.me.username}}' *ngIf="msg.alias =='documento'">
<div class="title">
<ion-label>{{msg.u.name}}</ion-label>
<span class="time">{{showDateDuration(msg._updatedAt)}}</span>
</div>
<div>
<div *ngIf="msg.attachments" class="message-attachments">
<div *ngFor="let file of msg.attachments let i = index">
<div *ngIf="file.image_url" (click)="openPreview(msg)">
<img src="{{file.image_url}}" alt="image">
</div>
<div>
<div>
<div class="file">
<!-- <canvas id="pdf_canvas"></canvas> -->
<div (click)="docIndex(i); viewDocument(msg.file, file.title_link)" class="file-details add-ellipsis cursor-pointer" *ngIf="msg.file">
<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"></fa-icon>
<fa-icon *ngIf="msg.file.type == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'" icon="file-word" class="excel-icon"></fa-icon>
<ion-icon *ngIf="msg.file.type == 'application/webtrix'" src="assets/icon/webtrix.svg"></ion-icon>
</span>
<ion-label class="file-title">{{file.title}}</ion-label>
</div>
</div>
<div class="file-details-optional">
<ion-label *ngIf="msg.file && msg.file != ''">
<span *ngIf="file.description">{{file.description}}</span>
<span *ngIf="file.description && msg.file.type != 'application/webtrix'"></span>
<span *ngIf="msg.file.type != 'application/webtrix'">{{msg.file.type.replace('application/','').toUpperCase()}}</span>
</ion-label>
</div>
</div>
</div>
</div>
</div>
{{last ? scrollToBottom() : ''}}
</div>
</div>
<div *ngIf="msg.file">
<div *ngIf="msg.file.type == 'application/meeting'" class="info-meeting">
<ion-label class="info-meeting-small">{{msg.u.name}} criou esta reunião</ion-label><br /> <ion-label class="info-meeting-small">{{msg.u.name}} criou esta reunião</ion-label><br />
<button (click)="goToEvent(msg.file.id)" class="btn-no-color info-meeting-normal"><ion-label class="info-meeting-normal">{{msg.file.subject}}</ion-label></button><br /> <button (click)="goToEvent(msg.file.id)" class="btn-no-color info-meeting-normal"><ion-label class="info-meeting-normal">{{msg.file.subject}}</ion-label></button><br />
<ion-label class="info-meeting-medium"><ion-icon name="calendar-outline"></ion-icon> De {{showDateDuration(msg.file.start_date)}} a {{showDateDuration(msg.file.end_date)}}</ion-label><br /> <ion-label class="info-meeting-medium"><ion-icon name="calendar-outline"></ion-icon> De {{showDateDuration(msg.file.start_date)}} a {{showDateDuration(msg.file.end_date)}}</ion-label><br />
@@ -365,10 +365,6 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
if (file.type == "application/webtrix") { if (file.type == "application/webtrix") {
this.openViewDocumentModal(file); this.openViewDocumentModal(file);
} }
else {
let fullUrl = "https://www.tabularium.pt" + url;
this.fileService.viewDocumentByUrl(fullUrl);
}
} }
docIndex(index: number) { docIndex(index: number) {
+1 -1
View File
@@ -190,7 +190,7 @@ export class ChatService {
let opts = { let opts = {
headers: this.headers, headers: this.headers,
} }
return this.http.post(environment.apiChatUrl+'im.close', body, this.options); return this.http.post(environment.apiChatUrl+'im.delete', body, this.options);
} }
createRoom(body:any){ createRoom(body:any){
@@ -435,6 +435,7 @@ export class FileService {
{ {
"rid": roomId, "rid": roomId,
"msg": "", "msg": "",
"alias": "documento",
"attachments": [{ "attachments": [{
"title": res.data.selected.Assunto, "title": res.data.selected.Assunto,
"description": res.data.selected.DocTypeDesc, "description": res.data.selected.DocTypeDesc,
@@ -91,6 +91,57 @@
{{last ? scrollToBottom() : ''}} {{last ? scrollToBottom() : ''}}
</div> </div>
</div> </div>
<div class="message-item incoming-{{msg.u.username!=loggedUser.me.username}} max-width-45" *ngIf="msg.t != 'r' && msg.t != 'ul' && msg.t != 'ru' && msg.alias =='documento'" >
<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)="deleteMessage(msg._id)" class="menuButton">Apagar mensagem</button>
</mat-menu>
</div>
<div class="title">
<ion-label>{{msg.u.name}}</ion-label>
<span class="time">{{showDateDuration(msg._updatedAt)}}</span>
</div>
<div class="message">
<ion-label>{{msg.msg}}</ion-label>
<div *ngIf="msg.attachments" class="message-attachments">
<div *ngFor="let file of msg.attachments">
<div (click)="openPreview(msg)">
<img *ngIf="file.image_url" src="{{file.image_url}}" alt="image">
</div>
<div>
<div>
<div class="file">
<!-- <canvas id="pdf_canvas"></canvas> -->
<div (click)="viewDocument(msg.file, file.title_link)" class="file-details add-ellipsis cursor-pointer" *ngIf="msg.file">
<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"></fa-icon>
<fa-icon *ngIf="msg.file.type == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'" icon="file-word" class="excel-icon"></fa-icon>
<ion-icon *ngIf="msg.file.type == 'application/webtrix'" src="assets/icon/webtrix.svg"></ion-icon>
</span>
<ion-label class="file-title">{{file.title}}</ion-label>
</div>
</div>
<div class="file-details-optional">
<ion-label *ngIf="msg.file">
<span *ngIf="file.description">{{file.description}}</span>
<span *ngIf="file.description && msg.file.type != 'application/webtrix'"></span>
<span *ngIf="msg.file.type != 'application/webtrix'">{{msg.file.type.replace('application/','').toUpperCase()}}</span>
</ion-label>
</div>
</div>
</div>
</div>
</div>
{{last ? scrollToBottom() : ''}}
</div>
</div>
<div *ngIf="msg.t == 'r'" class="info-text"> <div *ngIf="msg.t == 'r'" class="info-text">
<ion-label>Alterou o nome do grupo para "{{msg.msg.split('-').join(' ')}}"</ion-label><br /> <ion-label>Alterou o nome do grupo para "{{msg.msg.split('-').join(' ')}}"</ion-label><br />
{{last ? scrollToBottom() : ''}} {{last ? scrollToBottom() : ''}}
@@ -111,8 +162,8 @@
</div> </div>
{{last ? scrollToBottom() : ''}} {{last ? scrollToBottom() : ''}}
</div> </div>
<div *ngIf="msg.file" class="info-meeting"> <div *ngIf="msg.file" >
<div *ngIf="msg.file.type == 'application/meeting'"> <div *ngIf="msg.file.type == 'application/meeting'" class="info-meeting">
<ion-label class="info-meeting-small">{{msg.u.name}} criou esta reunião</ion-label><br /> <ion-label class="info-meeting-small">{{msg.u.name}} criou esta reunião</ion-label><br />
<button (click)="goToEvent(msg.file.id)" class="btn-no-color info-meeting-normal"><ion-label class="info-meeting-normal">{{msg.file.subject}}</ion-label></button><br /> <button (click)="goToEvent(msg.file.id)" class="btn-no-color info-meeting-normal"><ion-label class="info-meeting-normal">{{msg.file.subject}}</ion-label></button><br />
<ion-label class="info-meeting-medium"><ion-icon name="calendar-outline"></ion-icon> De {{showDateDuration(msg.file.start_date)}} a {{showDateDuration(msg.file.end_date)}}</ion-label><br /> <ion-label class="info-meeting-medium"><ion-icon name="calendar-outline"></ion-icon> De {{showDateDuration(msg.file.start_date)}} a {{showDateDuration(msg.file.end_date)}}</ion-label><br />
@@ -9,7 +9,7 @@
<div hidden class="right"> <div hidden class="right">
<button class="btn-no-color" (click)="_openMessagesOptions()"> <button class="btn-no-color" (click)="_openMessagesOptions()">
<ion-icon *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/icons-menu.svg"></ion-icon> <ion-icon *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/icons-menu.svg"></ion-icon>
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' " src="assets/images/icons-menu.svg"></ion-icon> <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " src="assets/images/theme/gov/icons-menu.svg"></ion-icon>
</button> </button>
</div> </div>
</div> </div>
@@ -51,13 +51,28 @@
</div> </div>
<div> <div>
<ion-label>{{msg.msg}}</ion-label> <ion-label>{{msg.msg}}</ion-label>
{{last ? scrollToBottom() : ''}}
</div>
</div>
<div class='message-item incoming-{{msg.u.username!=loggedUser.me.username}} max-width-45' *ngIf="msg.alias == 'documento'">
<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)="deleteMessage(msg._id)" class="menuButton">Apagar mensagem</button>
</mat-menu>
</div>
<div class="title">
<ion-label>{{msg.u.name}}</ion-label>
<span class="time">{{showDateDuration(msg._updatedAt)}}</span>
</div>
<div>
<!-- <ion-label>{{msg.msg}}</ion-label> -->
<div *ngIf="msg.attachments" class="message-attachments"> <div *ngIf="msg.attachments" class="message-attachments">
<div *ngFor="let file of msg.attachments"> <div *ngFor="let file of msg.attachments">
<div (click)="openPreview(msg)"> <div (click)="openPreview(msg)">
<!-- <img *ngIf="file.image_url" src="{{file.image_url}}" alt="image" (click)="imageSize(file.image_url)"> -->
<img *ngIf="file.image_url" src="{{file.image_url}}" alt="image"> <img *ngIf="file.image_url" src="{{file.image_url}}" alt="image">
</div> </div>
<!-- <div *ngIf="msg.file.type"> <div *ngIf="msg.file">
<div class="file"> <div class="file">
<div (click)="viewDocument(msg, file.title_link)" class="file-details add-ellipsis cursor-pointer" *ngIf="msg.file"> <div (click)="viewDocument(msg, file.title_link)" class="file-details add-ellipsis cursor-pointer" *ngIf="msg.file">
<span *ngIf="msg.file.type"> <span *ngIf="msg.file.type">
@@ -77,14 +92,15 @@
<span *ngIf="msg.file.type != 'application/webtrix'">{{msg.file.type.replace('application/','').toUpperCase()}}</span> <span *ngIf="msg.file.type != 'application/webtrix'">{{msg.file.type.replace('application/','').toUpperCase()}}</span>
</ion-label> </ion-label>
</div> </div>
</div> --> </div>
</div> </div>
</div> </div>
{{last ? scrollToBottom() : ''}} {{last ? scrollToBottom() : ''}}
</div> </div>
</div> </div>
<div *ngIf="msg.file" class="info-meeting"> <div *ngIf="msg.file" >
<div *ngIf="msg.file.type == 'application/meeting'"> <div class="info-meeting" *ngIf="msg.file.type == 'application/meeting'">
<ion-label class="info-meeting-small">{{msg.u.name}} criou esta reunião</ion-label><br /> <ion-label class="info-meeting-small">{{msg.u.name}} criou esta reunião</ion-label><br />
<button (click)="goToEvent(msg.file.id)" class="btn-no-color info-meeting-normal"><ion-label class="info-meeting-normal">{{msg.file.subject}}</ion-label></button><br /> <button (click)="goToEvent(msg.file.id)" class="btn-no-color info-meeting-normal"><ion-label class="info-meeting-normal">{{msg.file.subject}}</ion-label></button><br />
<ion-label class="info-meeting-medium"><ion-icon name="calendar-outline"></ion-icon> De {{showDateDuration(msg.file.start_date)}} a {{showDateDuration(msg.file.end_date)}}</ion-label><br /> <ion-label class="info-meeting-medium"><ion-icon name="calendar-outline"></ion-icon> De {{showDateDuration(msg.file.start_date)}} a {{showDateDuration(msg.file.end_date)}}</ion-label><br />
@@ -14,6 +14,7 @@
overflow: hidden; overflow: hidden;
} }
} }
.buttons{ .buttons{
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@@ -1,13 +1,10 @@
<ion-content class="container"> <ion-content class="container">
<div class="arrow-right" (click)="close()"> <div class="arrow-right">
<button class="btn-no-color"> <button class="btn-no-color" (click)="close()">
<ion-icon *ngIf="ThemeService.currentTheme == 'default' "slot="end" class="arrow-right-icon" src='assets/images/icons-arrow-arrow-right.svg'></ion-icon> <ion-icon src='assets/images/theme/gov/icons-calendar-arrow-right.svg'></ion-icon>
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' " slot="end" class="arrow-right-icon" src='assets/images/theme/gov/icons-calendar-arrow-right.svg'></ion-icon>
</button> </button>
</div> </div>
<div class="buttons"> <div class="buttons">
<button (click)="close()" full class="btn-cancel" shape="round" >Cancelar</button> <button (click)="closeChatRoom()" full class="btn-delete" shape="round" >Apagar conversa</button>
<div class="solid"></div>
<button hidden (click)="closeChatRoom()" full class="btn-delete" shape="round" >Apagar conversa</button>
</div> </div>
</ion-content> </ion-content>
@@ -1,50 +1,58 @@
.container{ .container{
--padding-top:20px !important; --padding-top:20px !important;
--padding-bottom:20px !important; --padding-bottom:20px !important;
--padding-start:20px !important; --padding-start:20px !important;
--padding-end:20px !important; --padding-end:20px !important;
} }
.arrow-right{ .arrow-right{
display: none; display: none;
margin-bottom: 20px; margin-bottom: 20px;
.arrow-right-icon{ .arrow-right-icon{
width: 37px; width: 37px;
float: right; float: right;
font-size: 35px; font-size: 35px;
overflow: hidden; overflow: hidden;
} }
} }
.buttons{ .buttons{
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-around; justify-content: space-around;
} }
.solid { .solid {
display: none; display: block;
width: 90%; width: 90%;
border-top: 1px solid #bbb; border-top: 1px solid #bbb;
margin: 0 auto !important; margin: 10px auto !important;
} }
/* .btn-ok, .btn-cancel, .btn-delete{
width: calc(50% - 10px) !important; @media only screen and (min-width: 701px) {
margin: 5px 5px 5px 5px !important; .arrow-right{
} */ display: flex;
@media only screen and (min-width: 701px) { justify-content: flex-end;
.arrow-right{ }
display: flex; .btn-cancel{
justify-content: flex-end; //display: none;
} width: 100% !important;
.btn-cancel{ margin-bottom: 10px !important;
display: none; }
width: 100% !important; .btn-cancel:hover, .btn-delete:hover{
margin-bottom: 10px !important; background-color: var(--button-hover);
} color: #fff !important;
.btn-delete{ }
width: 100% !important; .btn-ok{
margin-bottom: 10px !important; width: 100% !important;
margin-top: 10px !important; }
} .btn-delete{
/* .solid{ width: 100% !important;
display: block; margin-bottom: 10px !important;
} */ }
.solid{
display: block;
}
.mobile-only{
display: none !important;
}
} }
@@ -1,8 +1,7 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { ModalController, NavParams, PopoverController } from '@ionic/angular'; import { ModalController, NavParams, PopoverController } from '@ionic/angular';
import { ChatService } from 'src/app/services/chat.service'; import { ChatService } from 'src/app/services/chat.service';
import { ThemeService } from 'src/app/services/theme.service' import { ThemeService } from 'src/app/services/theme.service';
@Component({ @Component({
selector: 'app-messages-options', selector: 'app-messages-options',
@@ -18,7 +17,7 @@ export class MessagesOptionsPage implements OnInit {
private modalController: ModalController, private modalController: ModalController,
private chatService: ChatService, private chatService: ChatService,
private navParams: NavParams, private navParams: NavParams,
public ThemeService: ThemeService public ThemeService: ThemeService,
) )
{ {
this.roomId = this.navParams.get('roomId'); this.roomId = this.navParams.get('roomId');