Merge branch 'feature/chat' of https://bitbucket.org/equilibriumito/gabinete-digital into feature/chat

src/app/pages/chat/chat.page.scss

@@ -20,7 +20,7 @@ ion-content{
     }
     .div-icon{
       display: flex;
-      width: 50%;
+      width: fit-content;
       float: right;
       font-size: 35px;
       overflow: auto;
@@ -32,7 +32,7 @@ ion-content{
       padding-left: 20px;
     }
   }
-  
+
 
 .main-content{
   font-family: Roboto;
@@ -104,9 +104,9 @@ ion-content{
     color: #000;
   }
 }
-@media only screen and (min-width: 1024px) {
+@media only screen and (min-width: 801px) {
   .main-content{
-   
+
 
     .aside-wrapper{
       width: 35%;
@@ -131,7 +131,7 @@ ion-content{
         width: 90%;
       }
     }
-    
+
   }
 
 }

src/app/pages/chat/chat.page.ts

@@ -103,7 +103,6 @@ export class ChatPage implements OnInit {
     ){
       this.loggedUserChat = authService.ValidatedUserChat['data'];
       this.headers = new HttpHeaders();
-      this.loadMessage();
     }
 
   ngOnInit() {
@@ -140,16 +139,16 @@ hideRefreshButton(){
 }
 
 
-loadMessage(){
+/* loadMessage(){
   this.chatService.messages.subscribe(msg => {
     console.log("Response from websocket: " + msg);
   });
-}
-sendMsg() {
+} */
+/* sendMsg() {
   console.log("new message from client to websocket: ", this.message);
   this.chatService.messages.next(this.message);
   this.message.msg = "";
-}
+} */
 
 
   /* Fim websockets functions */
@@ -168,11 +167,9 @@ sendMsg() {
     this.showEmptyComponent=true;
   }
   openGroupContactsPage(data){
-    console.log(data);
     this.groupRoomId = data;
-    console.log(this.groupRoomId);
     this.closeAllDesktopComponents();
-    if(window.innerWidth <= 1024){
+    if(window.innerWidth < 801){
 
     }
     else{
@@ -180,8 +177,8 @@ sendMsg() {
     }
   }
   openMessagesPage(rid) {
-    if( window.innerWidth <= 1024){
-      //this.openMessagesModal(rid);
+    if( window.innerWidth < 801){
+      this.openMessagesModal(rid);
     }
     else{
       this.closeAllDesktopComponents();
@@ -194,7 +191,7 @@ sendMsg() {
     console.log('OK');
     this.closeAllDesktopComponents();
 
-    if( window.innerWidth <= 1024){
+    if( window.innerWidth < 801){
       this.selectContact();
     }
     else{
@@ -203,7 +200,7 @@ sendMsg() {
     }
   }
   openNewGroupPage() {
-    if( window.innerWidth <= 1024){
+    if( window.innerWidth < 801){
       this.newGroup();
     }
     else{
@@ -213,7 +210,7 @@ sendMsg() {
   }
 
   openEditGroupPage(rid) {
-    if( window.innerWidth <= 1024){
+    if( window.innerWidth < 801){
       this.editGroup(rid);
     }
     else{
@@ -225,7 +222,7 @@ sendMsg() {
   openGroupMessagesPage(rid) {
     console.log(rid);
 
-    if( window.innerWidth <= 1024){
+    if( window.innerWidth < 801){
       this.openGroupMessagesModal(rid);
     }
     else{

src/app/pages/chat/group-messages/group-messages.page.html

@@ -37,7 +37,7 @@
     <ion-label>Esta conversa passou a grupo</ion-label><br />
     <ion-label>A conversa original mantêm-se como chat individual</ion-label>
   </div>
-  <div *ngFor="let msg of messages" class="messages">
+  <div *ngFor="let msg of messages" class="messages" #scrollMe>
     <div *ngIf="msg.t != 'r'" class='incoming-{{msg.u.username!=loggedUser.me.username}}'>
       <div class="title">
         <ion-label>{{msg.u.name}}</ion-label>
@@ -90,7 +90,7 @@
     <div class="width-80">
       <ion-item class="ion-no-padding type-message" lines="none">
         <ion-textarea clearOnEdit="true" placeholder="Escrever uma mensagem" auto-grow class="message-input" rows="1" [(ngModel)]="message"></ion-textarea>
-        <button class="btn-no-color" (click)="notImplemented()">
+        <button hidden class="btn-no-color" (click)="notImplemented()">
           <ion-icon slot="end" src="assets/icon/icons-chat-mic.svg"></ion-icon>
         </button>
       </ion-item>

src/app/pages/chat/messages/messages.page.html

@@ -82,7 +82,7 @@
     <div class="width-70">
       <ion-item class="ion-no-padding ion-no-margin type-message" lines="none">
         <ion-textarea clearOnEdit="true" placeholder="Escrever uma mensagem" auto-grow class="message-input" rows="1" [(ngModel)]="message"></ion-textarea>
-        <button class="btn-no-color" (click)="notImplemented()">
+        <button hidden class="btn-no-color" (click)="notImplemented()">
          <!--  <ion-icon slot="end" src="assets/icon/icons-chat-mic.svg"></ion-icon> -->
         </button>
       </ion-item>

src/app/pages/chat/messages/messages.page.ts

@@ -49,8 +49,8 @@ export class MessagesPage implements OnInit, AfterViewChecked {
     /* setInterval(()=>{ */
       this.load();
     /* }, 9000); */
-    this.el = document.getElementById("scrollToBottom");
-    this.el.scrollTop = this.el.scrollHeight - this.el.scrollTop;
+    /* this.el = document.getElementById("scrollToBottom");
+    this.el.scrollTop = this.el.scrollHeight - this.el.scrollTop; */
 
   }
 
@@ -61,10 +61,12 @@ export class MessagesPage implements OnInit, AfterViewChecked {
   close(){
     this.modalController.dismiss();
   }
+
   load(){
     this.loadMessages();
     this.getChatMembers();
   }
+
   doRefresh(ev:any){
     this.load();
     ev.target.complete();
@@ -78,7 +80,6 @@ export class MessagesPage implements OnInit, AfterViewChecked {
     try {
       this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight;
     } catch(err) { }
-
   }
 
   sendMessage(){

src/app/services/chat.service.ts

@@ -20,8 +20,8 @@ export class ChatService {
   X_User_Id:any;
   X_Auth_Token:any;
 
-  SERVER_URL = 'wss://www.tabularium.pt/websocket';
-  public messages: Subject<any>;
+  //SERVER_URL = 'wss://www.tabularium.pt/websocket';
+  //public messages: Subject<any>;
   loggedUserChat:any;
   bindOnMessage: any;
 
@@ -31,7 +31,7 @@ export class ChatService {
     private authService: AuthService,
     private storage: Storage,
     private storageService:StorageService,
-    private wsService: WebsocketService,
+    //private wsService: WebsocketService,
     )
     {
       this.loggedUserChat = authService.ValidatedUserChat;
@@ -42,13 +42,13 @@ export class ChatService {
         headers: this.headers,
       };
 
-      this.messages = <Subject<any>>this.wsService.connect(this.SERVER_URL).map((response: MessageEvent): any => {
+      /* this.messages = <Subject<any>>this.wsService.connect(this.SERVER_URL).map((response: MessageEvent): any => {
           let data = JSON.parse(response.data);
           console.log(data);
           return (JSON.stringify(data));
-        });
+        }); */
     }
-    
+
     getAllChannels(){
       return this.http.get(environment.apiChatUrl+'channels.list', this.options);
     }
@@ -62,17 +62,17 @@ export class ChatService {
     getRoomInfo(roomId:any){
       let params = new HttpParams();
       params = params.set("roomId", roomId);
-      let opts = { 
-        headers: this.headers, 
-        params: params 
+      let opts = {
+        headers: this.headers,
+        params: params
       }
       return this.http.get(environment.apiChatUrl+'rooms.info', opts);
-      
+
     }
     customsRooms(params:any){
-      let opts = { 
-        headers: this.headers, 
-        params: params 
+      let opts = {
+        headers: this.headers,
+        params: params
       }
       return this.http.get(environment.apiChatUrl+'rooms.get', opts);
     }
@@ -96,22 +96,22 @@ export class ChatService {
 
       let params = new HttpParams();
       params = params.set("roomId", roomId);
-    
-      let opts = { 
-        headers: this.headers, 
-        params: params 
+
+      let opts = {
+        headers: this.headers,
+        params: params
       }
       return this.http.get(environment.apiChatUrl+'im.history', opts);
     }
 
     sendMessage(body:any){
-      let opts = { 
+      let opts = {
         headers: this.headers,
       }
       return this.http.post(environment.apiChatUrl+'chat.sendMessage', body, opts);
     }
     leaveRoom(body:any){
-      let opts = { 
+      let opts = {
         headers: this.headers,
       }
       return this.http.post(environment.apiChatUrl+'rooms.leave', body, opts);
@@ -121,15 +121,15 @@ export class ChatService {
 
       let params = new HttpParams();
       params = params.set("roomId", roomId);
-    
-      let opts = { 
-        headers: this.headers, 
-        params: params 
+
+      let opts = {
+        headers: this.headers,
+        params: params
       }
       return this.http.get(environment.apiChatUrl+'im.members', opts);
     }
     removeChatRoom(body:any){
-      let opts = { 
+      let opts = {
         headers: this.headers,
       }
       return this.http.post(environment.apiChatUrl+'im.close', body, this.options);
@@ -140,10 +140,10 @@ export class ChatService {
     getDirectMessage(roomId:string){
       let params = new HttpParams();
       params = params.set("roomId", roomId);
-    
-      let opts = { 
-        headers: this.headers, 
-        params: params 
+
+      let opts = {
+        headers: this.headers,
+        params: params
       }
       return this.http.get(environment.apiChatUrl+'im.messages', opts);
     }
@@ -156,10 +156,10 @@ export class ChatService {
       let params = new HttpParams();
       let url=environment.apiChatUrl+'groups.members';
       params = params.set("roomId", roomId);
-    
-      let opts = { 
-        headers: this.headers, 
-        params: params 
+
+      let opts = {
+        headers: this.headers,
+        params: params
       }
       return this.http.get(url, opts);
     }
@@ -167,10 +167,10 @@ export class ChatService {
       let params = new HttpParams();
       let url=environment.apiChatUrl+'channels.members';
       params = params.set("roomId", roomId);
-    
-      let opts = { 
-        headers: this.headers, 
-        params: params 
+
+      let opts = {
+        headers: this.headers,
+        params: params
       }
       return this.http.get(url, opts);
     }
@@ -179,20 +179,20 @@ export class ChatService {
 
       let params = new HttpParams();
       params = params.set("roomId", roomId);
-    
-      let opts = { 
-        headers: this.headers, 
-        params: params 
+
+      let opts = {
+        headers: this.headers,
+        params: params
       }
       return this.http.get(environment.apiChatUrl+'groups.history', opts);
     }
     getPublicGroupMessages(roomId:any){
       let params = new HttpParams();
       params = params.set("roomId", roomId);
-    
-      let opts = { 
-        headers: this.headers, 
-        params: params 
+
+      let opts = {
+        headers: this.headers,
+        params: params
       }
       return this.http.get(environment.apiChatUrl+'channels.history', opts);
     }
@@ -209,7 +209,7 @@ export class ChatService {
       return this.http.post(environment.apiChatUrl+'channels.leave', body, this.options);
     }
     removeChannelMember(body:any){
-      let opts = { 
+      let opts = {
         headers: this.headers,
       }
       return this.http.post(environment.apiChatUrl+'channels.kick', body, opts);
@@ -226,10 +226,10 @@ export class ChatService {
     getGroupInfo(roomId:any){
       let params = new HttpParams();
       params = params.set("roomId", roomId);
-    
-      let opts = { 
-        headers: this.headers, 
-        params: params 
+
+      let opts = {
+        headers: this.headers,
+        params: params
       }
       return this.http.get(environment.apiChatUrl+'groups.info', opts);
     }
@@ -237,7 +237,7 @@ export class ChatService {
       return this.http.post(environment.apiChatUrl+'groups.rename', body, this.options);
     }
     removeGroupMember(body:any){
-      let opts = { 
+      let opts = {
         headers: this.headers,
       }
       return this.http.post(environment.apiChatUrl+'groups.kick', body, opts);

src/app/services/websocket.service.ts

@@ -25,7 +25,7 @@ export class WebsocketService {
     let ws = new WebSocket(url);
 
     console.log(ws);
-    
+
 
     let observable = Rx.Observable.create((obs: Rx.Observer<MessageEvent>) => {
       ws.onmessage = obs.next.bind(obs);

src/app/shared/chat/group-messages/group-messages.page.html

@@ -36,8 +36,8 @@
     <ion-label> {{message}} Esta conversa passou a grupo</ion-label><br />
     <ion-label>A conversa original mantêm-se como chat individual</ion-label>
   </div>
-  <div class="messages">
-    <div class="container-width-100" *ngFor="let msg of messages">
+  <div class="messages" #scrollMe>
+    <div class="container-width-100" *ngFor="let msg of messages" #scrollMe>
       <div *ngIf="msg.t != 'r'" class='incoming-{{msg.u.username!=loggedUser.me.username}} max-width-45'>
         <div class="title">
           <ion-label>{{msg.u.name}}</ion-label>
@@ -68,7 +68,7 @@
     <div class="width-80">
       <ion-item class="ion-no-padding type-message" lines="none">
         <ion-textarea clearOnEdit="true" placeholder="Escrever uma mensagem" auto-grow class="message-input" rows="1" [(ngModel)]="message"></ion-textarea>
-        <button class="btn-no-color" (click)="notImplemented()">
+        <button hidden class="btn-no-color">
           <ion-icon slot="end" src="assets/icon/icons-chat-mic.svg"></ion-icon>
         </button>
       </ion-item>

src/app/shared/chat/group-messages/group-messages.page.scss

@@ -10,7 +10,7 @@
         padding: 30px 20px 0px 20px;
         color:#000;
         //transform: translate3d(0, 1px, 0);
-        
+
         .header-top{
           width: 100%;
           overflow: auto;
@@ -52,7 +52,7 @@
             margin: 1px;
           }
         }
-    
+
         .title{
           font-size: 25px;
         }
@@ -66,7 +66,7 @@
         .div-icon ion-icon{
           float: right;
           padding-left: 20px;
-        } 
+        }
     }
  }
  ion-content{
@@ -159,9 +159,9 @@
  .container{
    justify-content: center;
    justify-content: space-evenly;
-   
+
  }
- 
+
  .chat-icon-options{
    display:block !important;
    font-size: 25px;
@@ -183,10 +183,15 @@
    align-items: center;
    overflow: auto;
 
+
    ion-textarea{
+     width: fit-content;
+     display: block;
      margin: 0 !important;
      align-self: center;
+     //border: 1px solid red;
+     //overflow: auto;
    }
  }
- 
+
 }

src/app/shared/chat/group-messages/group-messages.page.ts

@@ -1,4 +1,4 @@
-import { Component, OnChanges, OnInit, Input, SimpleChanges, Output, EventEmitter} from '@angular/core';
+import { Component, OnChanges, OnInit, Input, SimpleChanges, Output, EventEmitter, ViewChild, ElementRef, AfterViewChecked} from '@angular/core';
 import { ActionSheetController, AnimationController, MenuController, ModalController, PopoverController } from '@ionic/angular';
 import { AlertService } from 'src/app/services/alert.service';
 import { AuthService } from 'src/app/services/auth.service';
@@ -14,11 +14,11 @@ import { GroupContactsPage } from './group-contacts/group-contacts.page';
   templateUrl: './group-messages.page.html',
   styleUrls: ['./group-messages.page.scss'],
 })
-export class GroupMessagesPage implements OnInit, OnChanges {
+export class GroupMessagesPage implements OnInit, OnChanges, AfterViewChecked {
   showLoader: boolean;
   isGroupCreated:boolean;
   loggedUser: any;
-  message:any;
+  message:any="";
   leaveStatus:any;
   messages:any;
 
@@ -34,6 +34,8 @@ export class GroupMessagesPage implements OnInit, OnChanges {
   @Output() openGroupContacts:EventEmitter<any> = new EventEmitter<any>();
   @Output() openEditGroupPage:EventEmitter<any> = new EventEmitter<any>();
 
+  @ViewChild('scrollMe') private myScrollContainer: ElementRef;
+
   constructor(
     private menu: MenuController,
     private modalController: ModalController,
@@ -49,6 +51,7 @@ export class GroupMessagesPage implements OnInit, OnChanges {
   }
   ngOnChanges(changes: SimpleChanges): void {
     this.getRoomInfo();
+    this.scrollToBottom();
   }
 
   ngOnInit() {
@@ -57,8 +60,16 @@ export class GroupMessagesPage implements OnInit, OnChanges {
     console.log(this.roomId);
   }
 
-  notImplemented(){
-    this.alertService.presentAlert('Funcionalidade em desenvolvimento');
+  ngAfterViewChecked() {
+    this.scrollToBottom();
+  }
+
+  scrollToBottom(): void {
+    try {
+      this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight;
+    } catch(err) { }
+    finally {
+    }
   }
 
   openGroupContactsPage(){
@@ -73,6 +84,7 @@ export class GroupMessagesPage implements OnInit, OnChanges {
     this.getRoomInfo();
     ev.target.complete();
   }
+
   get watch(){
     this.getRoomInfo();
     console.log('here watching');

src/app/shared/chat/messages/messages.page.html

@@ -48,7 +48,6 @@
 
 
 <ion-footer>
-  FOOter
   <div class="container width-100 d-flex">
     <div>
       <button class="btn-no-color" (click)="openSendMessageOptions()">
@@ -58,7 +57,7 @@
     <div class="width-80">
       <ion-item class="ion-no-padding type-message" lines="none">
         <ion-textarea clearOnEdit="true" placeholder="Escrever uma mensagem" auto-grow class="message-input" rows="1" [(ngModel)]="message"></ion-textarea>
-        <button class="btn-no-color" (click)="notImplemented()">
+        <button hidden class="btn-no-color" (click)="notImplemented()">
           <ion-icon slot="end" src="assets/icon/icons-chat-mic.svg"></ion-icon>
         </button>
       </ion-item>

src/app/shared/chat/messages/messages.page.ts

@@ -45,15 +45,14 @@ export class MessagesPage implements OnInit, AfterViewChecked, OnChanges {
    /*  this.dm = this.navParams.get('dm'); */
   }
   ngOnChanges(changes: SimpleChanges): void {
-    console.log(this.roomId);
-    this.load();
+    //this.load();
 
     //throw new Error('Method not implemented.');
   }
 
   ngOnInit() {
 
-    //this.scrollToBottom();
+    this.scrollToBottom();
 
     /* setInterval(()=>{ */
       this.load();
@@ -80,20 +79,17 @@ export class MessagesPage implements OnInit, AfterViewChecked, OnChanges {
   }
 
   ngAfterViewChecked() {
-    //this.scrollToBottom();
-    console.log(this.roomId);
+    this.scrollToBottom();
   }
-  /* scrollToBottom(): void {
-    const loader = this.toastService.loading()
 
+  scrollToBottom(): void {
     try {
       this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight;
     } catch(err) { }
     finally {
-      loader.remove()
     }
+  }
 
-  } */
   loadMoreMessages(ev:any){
 
   }