Dialog of Add, Remove + Member list in chat
This commit is contained in:
parent
95c08668f7
commit
22b137931d
2 changed files with 121 additions and 5 deletions
|
|
@ -2,6 +2,11 @@
|
|||
<div class="chat-header">
|
||||
<p class="username" *ngIf="room !== 'general'">{{room}}</p>
|
||||
<p class="username" *ngIf="room === 'general'">General</p>
|
||||
<div class="pull-right">
|
||||
<input *ngIf="room !== 'general' && typeRoom === true" class="btn btn-sm btn-primary" name="button-change-private" (click)="addMember()" type="submit" value="+">
|
||||
<input *ngIf="room !== 'general' && typeRoom === true" class="btn btn-sm btn-primary" name="button-change-private" (click)="removeMember()" type="submit" value="-">
|
||||
<input *ngIf="room !== 'general' && typeRoom === true" class="btn btn-sm btn-primary" name="button-change-private" (click)="listMembers()" type="submit" value="Members">
|
||||
</div>
|
||||
</div>
|
||||
<div #scrollContainer class="chat-body" >
|
||||
<ul #ulMessages id="messages">
|
||||
|
|
|
|||
|
|
@ -3,6 +3,9 @@ import {ChatInfo, ChatService} from "../services/chat/chat.service";
|
|||
import {DatePipe} from "@angular/common";
|
||||
import {environment} from "../../environments/environment";
|
||||
import {MessageService} from "../services/message/message.service";
|
||||
import {MatDialog} from "@angular/material/dialog";
|
||||
import {AddMemberDialogComponent} from "../add-member-dialog/add-member-dialog.component";
|
||||
import {RemoveMemberDialogComponent} from "../remove-member-dialog/remove-member-dialog.component";
|
||||
|
||||
@Component({
|
||||
selector: 'app-message',
|
||||
|
|
@ -18,13 +21,16 @@ export class MessageComponent implements OnInit, OnChanges {
|
|||
// @ts-ignore
|
||||
@Input() room: string;
|
||||
|
||||
// @ts-ignore
|
||||
@Input() typeRoom: boolean;
|
||||
|
||||
// @ts-ignore
|
||||
@ViewChild('ulMessages') ulMsg: ElementRef;
|
||||
|
||||
// @ts-ignore
|
||||
@ViewChild('scrollContainer') scrollContainer: ElementRef;
|
||||
|
||||
constructor(private chatservice: ChatService, private pipe: DatePipe, private messageservice: MessageService) {
|
||||
constructor(private chatservice: ChatService, private pipe: DatePipe, private messageservice: MessageService, public dialog: MatDialog) {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
|
|
@ -42,11 +48,21 @@ export class MessageComponent implements OnInit, OnChanges {
|
|||
this.chatServiceOnNewMessage(this.room);
|
||||
}
|
||||
else{
|
||||
let dataMessage;
|
||||
if(this.typeRoom === true){
|
||||
dataMessage = {
|
||||
member: this.username,
|
||||
roomName: this.room,
|
||||
}
|
||||
}
|
||||
else{
|
||||
dataMessage = {
|
||||
sender: this.username,
|
||||
receiver: this.room,
|
||||
}
|
||||
}
|
||||
this.chatservice.setUrl(environment.urlCPR);
|
||||
this.messageservice.sendMessage(environment.urlCPR,"conversations/getConv",{
|
||||
sender: this.username,
|
||||
receiver: this.room,
|
||||
}).subscribe(data => {
|
||||
this.messageservice.sendMessage(environment.urlCPR,"conversations/getConv",dataMessage).subscribe(data => {
|
||||
if (data.status !== 'ok') {
|
||||
console.log(data.data.reason);
|
||||
} else {
|
||||
|
|
@ -110,4 +126,99 @@ export class MessageComponent implements OnInit, OnChanges {
|
|||
this.msg = '';
|
||||
}
|
||||
}
|
||||
|
||||
addMember(){
|
||||
let dataMessage;
|
||||
if(this.typeRoom === true){
|
||||
dataMessage = {
|
||||
member: this.username,
|
||||
roomName: this.room,
|
||||
}
|
||||
}
|
||||
else{
|
||||
dataMessage = {
|
||||
sender: this.username,
|
||||
receiver: this.room,
|
||||
}
|
||||
}
|
||||
this.messageservice.sendMessage(environment.urlCPR, "conversations/getConv", dataMessage).subscribe(data => {
|
||||
if (data.status !== 'ok') {
|
||||
console.log(data.data.reason);
|
||||
} else {
|
||||
this.roomId = data.data._id;
|
||||
const dialogRef = this.dialog.open(AddMemberDialogComponent, {
|
||||
width: '50%',
|
||||
data: {owner: this.username, conversationid: this.roomId}
|
||||
});
|
||||
dialogRef.afterClosed().subscribe(data2 => {
|
||||
console.log(data2);
|
||||
this.listMembers();
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
removeMember(){
|
||||
let dataMessage;
|
||||
if(this.typeRoom === true){
|
||||
dataMessage = {
|
||||
member: this.username,
|
||||
roomName: this.room,
|
||||
}
|
||||
}
|
||||
else{
|
||||
dataMessage = {
|
||||
sender: this.username,
|
||||
receiver: this.room,
|
||||
}
|
||||
}
|
||||
this.messageservice.sendMessage(environment.urlCPR, "conversations/getConv", dataMessage).subscribe(data => {
|
||||
if (data.status !== 'ok') {
|
||||
console.log(data.data.reason);
|
||||
} else {
|
||||
this.roomId = data.data._id;
|
||||
const dialogRef = this.dialog.open(RemoveMemberDialogComponent, {
|
||||
width: '50%',
|
||||
data: {owner: this.username, conversationid: this.roomId}
|
||||
});
|
||||
dialogRef.afterClosed().subscribe(data2 => {
|
||||
console.log(data2);
|
||||
this.listMembers();
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
listMembers(){
|
||||
let dataMessage;
|
||||
if(this.typeRoom === true){
|
||||
dataMessage = {
|
||||
member: this.username,
|
||||
roomName: this.room,
|
||||
}
|
||||
}
|
||||
else{
|
||||
dataMessage = {
|
||||
sender: this.username,
|
||||
receiver: this.room,
|
||||
}
|
||||
}
|
||||
this.messageservice.sendMessage(environment.urlCPR, "conversations/getConv", dataMessage).subscribe(data => {
|
||||
if (data.status !== 'ok') {
|
||||
console.log(data.data.reason);
|
||||
} else {
|
||||
this.roomId = data.data._id;
|
||||
this.messageservice.sendMessage(environment.urlCPR, "conversations/getMembers", {conversationid: this.roomId}).subscribe(data2 => {
|
||||
if (data2.status !== 'ok') {
|
||||
console.log(data2.data.reason);
|
||||
} else {
|
||||
if(typeof data2.data[0] !== 'undefined'){
|
||||
this.ulMsg.nativeElement.insertAdjacentHTML('beforeend', '<li><span class="text-danger">Membres: '+data2.data[0].members+'</span></li>');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Reference in a new issue