peter/doneit-web
1
0
Fork 0
mirror of https://code.equilibrium.co.ao/ITO/doneit-web.git synced 2026-04-19 04:57:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

working in responsiveness

Browse Source
This commit is contained in:
tiago.kayaya
2021-03-11 16:21:09 +01:00
parent 304151f2fd
commit e4353b5d59
15 changed files with 191 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/pages/chat/chat-routing.module.ts
+3 -14
View File
@@ -9,20 +9,8 @@ const routes: Routes = [
{
path: '',
component: ChatPage,
children: [
{
path:'messages',
outlet:'message',
component: MessagesPage
},
{
path:'groups',
outlet:'group',
component: GroupMessagesPage
},
]
},
{
/* {
path: 'conversation',
loadChildren: () => import('./conversation/conversation.module').then( m => m.ConversationPageModule)
},
@@ -40,6 +28,7 @@ const routes: Routes = [
},
{
path: 'messages',
outlet:'message',
loadChildren: () => import('./messages/messages.module').then( m => m.MessagesPageModule)
},
{
@@ -50,7 +39,7 @@ const routes: Routes = [
path: 'test',
outlet:'test',
loadChildren: () => import('./test/test.module').then( m => m.TestPageModule)
}
} */
];
src/app/pages/chat/chat.module.ts
+9 -2
View File
@@ -9,6 +9,8 @@ import { ChatPageRoutingModule } from './chat-routing.module';
import { ChatPage } from './chat.page';
import { SharedModule } from 'src/app/shared/shared.module';
import { RouterModule } from '@angular/router';
import { MessagesPage } from './messages/messages.page';
import { GroupMessagesPage } from './group-messages/group-messages.page';
@NgModule({
imports: [
@@ -19,7 +21,12 @@ import { RouterModule } from '@angular/router';
ChatPageRoutingModule,
RouterModule,
],
declarations: [ChatPage],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
declarations: [
ChatPage,
MessagesPage,
GroupMessagesPage,
],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
entryComponents: [MessagesPage, GroupMessagesPage]
})
export class ChatPageModule {}
src/app/pages/chat/chat.page.html
+8 -39
View File
@@ -40,7 +40,7 @@
<div class="item-icon">
<ion-icon class="icon" slot="start" src="assets/images/icons-chat-chat-40.svg"></ion-icon>
</div>
<div [routerLink]="['/home/chat/messages']" class="item-content"><!-- (click)="openMessages(dm)" -->
<div (click)="openMessagesPage(dm._id)" class="item-content"><!-- (click)="openMessages(dm)" -->
<div class="item-title-time">
<div class="item-title">
<ion-label *ngFor="let user of dm.usernames">
@@ -56,30 +56,6 @@
</div>
</div>
</div>
<div class="item" >
<div class="item-icon">
<ion-icon class="icon" slot="start" src="assets/images/icons-chat-chat-40.svg"></ion-icon>
</div>
<div [routerLink]="['/home/chat', {
outlets:{
'test': ['test']
}
}]" class="item-content"><!-- (click)="openMessages(dm)" -->
<div class="item-title-time">
<div class="item-title">
<ion-label >
<span>
Tiago
</span>
</ion-label>
</div>
<div class="item-date">23/03/202 12:20</div>
</div>
<div class="item-description">
<ion-label>oI...</ion-label>
</div>
</div>
</div>
</ion-item-sliding>
</ion-item-group>
</ion-list>
@@ -90,7 +66,7 @@
<div class="item-icon">
<ion-icon class="icon" slot="start" src="assets/images/icons-chat-group-chat-40.svg"></ion-icon>
</div>
<div (click)="openGroupMessages(group)" class="item-content">
<div (click)="openGroupMessagesPage(group._id)" class="item-content">
<div class="item-title-time">
<div class="item-title">
<ion-label>{{group.name.split('-').join(' ')}}</ion-label>
@@ -106,23 +82,16 @@
</ion-item-group>
</ion-list>
<nav>
<
</nav>
</div>
</div>
</div>
<!-- Aside right -->
<div class="aside-content d-none flex-1 aside-content height-100 overflow-y-auto pt-25">
<!-- <app-messages class="d-flex flex-1 flex-column height-100" *ngIf="desktopComponent.showMessages"></app-messages>
<app-group-messages class="d-flex flex-1 flex-column height-100" *ngIf="desktopComponent.showGroupMessages"></app-group-messages> -->
<div>
<ion-router-outlet name="test"></ion-router-outlet>
</div>
<div>
<ion-router-outlet name="chat"></ion-router-outlet>
</div>
<div class="aside-content d-none flex-column height-100">
<!-- <ion-button (click)="openMessagesPage()">Messages</ion-button>
<ion-button (click)="openGroupMessagesPage('MduvQyrQBejb3xMrY')">Groups</ion-button>
<ion-button (click)="destroyComponent()">Destroy</ion-button> -->
<app-messages [roomId]="roomId" *ngIf="showMessages" #messagecontainer></app-messages>
<app-group-messages [roomId]="roomId" *ngIf="showGroupMessages" #messagecontainer></app-group-messages>
</div>
</div>
</ion-content>
src/app/pages/chat/chat.page.scss
+6 -5
View File
@@ -39,8 +39,8 @@ ion-content{
font-family: Roboto;
margin: 0 auto;
background-color: #fff;
overflow:auto;
padding: 30px 20px 0 20px;
//overflow:auto;
//padding: 30px 20px 0 20px;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
@@ -109,7 +109,7 @@ ion-content{
@media only screen and (min-width: 1024px) {
.main-content{
border: 1px solid blue;
overflow: auto;
.aside-wrapper{
width: 40%;
@@ -117,13 +117,14 @@ ion-content{
font-size: 25px;
}
}
.aside{
/* .aside{
width: 340px;
}
} */
.aside-content{
width: 60%;
display: flex !important;
background-color: white;
border: 1px solid green;
}
.item{
.item-icon{
src/app/pages/chat/chat.page.ts
+57 -1
View File
@@ -1,5 +1,14 @@
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import {
Component,
OnInit,
ViewChild,
ViewContainerRef,
ComponentFactoryResolver,
ComponentRef,
ComponentFactory,
Output
} from '@angular/core';
import { ModalController } from '@ionic/angular';
import { AuthService } from 'src/app/services/auth.service';
import { ChatService } from 'src/app/services/chat.service';
@@ -43,12 +52,23 @@ export class ChatPage implements OnInit {
showGroupMessages: false,
}
@ViewChild('messagecontainer', { read: ViewContainerRef }) entry: ViewContainerRef;
//@ViewChild('groupMessages') child:GroupMessagesPage;
componentRef: any;
roomId:any;
showMessages=false;
showGroupMessages=false;
@Output() getRoomInfo;
constructor(
private http:HttpClient,
private chatService: ChatService,
private modalController: ModalController,
private authService: AuthService,
private storage:Storage,
private resolver: ComponentFactoryResolver,
) {
this.headers = new HttpHeaders();
@@ -73,8 +93,44 @@ export class ChatPage implements OnInit {
this.load();
})
console.log(this.roomId);
}
destroyComponent() {
this.showMessages=false;
this.showGroupMessages=false;
}
openMessagesPage(rid) {
this.destroyComponent();
this.roomId = rid;
this.showMessages=true;
/* this.entry.clear();
const factory = this.resolver.resolveComponentFactory(MessagesPage);
this.componentRef = this.entry.createComponent(factory);
this.componentRef.instance.message = message; */
}
openGroupMessagesPage(rid) {
this.destroyComponent();
//console.log(this.child.roomId);
this.roomId = rid;
this.showGroupMessages=true;
console.log(rid);
/* this.showGroupMessages=true; */
/* this.entry.clear();
const factory = this.resolver.resolveComponentFactory(GroupMessagesPage);
this.componentRef = this.entry.createComponent(factory);
this.componentRef.instance.message = message;
let comp: GroupMessagesPage;
comp = this.componentRef;
comp.message = '123';
console.log(comp);
console.log('1'); */
}
onSegmentChange(){
this.load();
src/app/pages/chat/group-messages/group-messages.page.html
+2 -2
View File
@@ -4,7 +4,7 @@
<div class="header-top">
<app-btn-modal-dismiss></app-btn-modal-dismiss>
<div class="middle">
<ion-label class="title">{{roomName}}</ion-label>
<ion-label class="title">{{room.name}}</ion-label>
</div>
<div class="right">
<ion-icon (click)="openOptions()" src="assets/images/icons-menu.svg"></ion-icon>
@@ -32,7 +32,7 @@
</ion-refresher-content>
</ion-refresher>
<div class="welcome-text">
<ion-label>Esta conversa passou a grupo</ion-label><br />
<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 *ngFor="let msg of messages" class="messages">
src/app/pages/chat/group-messages/group-messages.page.ts
+48 -25
View File
@@ -1,4 +1,4 @@
import { Component, OnInit } from '@angular/core';
import { AfterViewChecked, Component, OnChanges, OnInit, Input, SimpleChanges, Output } from '@angular/core';
import { ActionSheetController, MenuController, ModalController, NavParams, PopoverController } from '@ionic/angular';
import { AuthService } from 'src/app/services/auth.service';
import { ChatService } from 'src/app/services/chat.service';
@@ -13,7 +13,7 @@ import { GroupContactsPage } from './group-contacts/group-contacts.page';
templateUrl: './group-messages.page.html',
styleUrls: ['./group-messages.page.scss'],
})
export class GroupMessagesPage implements OnInit {
export class GroupMessagesPage implements OnInit, OnChanges {
showLoader: boolean;
isGroupCreated:boolean;
loggedUser: any;
@@ -24,7 +24,8 @@ export class GroupMessagesPage implements OnInit {
room:any;
roomName:any;
members:any;
contacts: string[] = [" Ana M.", "Andre F.", "Bruno G.", "Catarina T", "Tiago"];
@Input() roomId:string;
constructor(
private menu: MenuController,
@@ -32,12 +33,15 @@ export class GroupMessagesPage implements OnInit {
private actionSheetController: ActionSheetController,
public popoverController: PopoverController,
private chatService: ChatService,
private navParams: NavParams,
/* private navParams: NavParams, */
private authService: AuthService,
) {
this.isGroupCreated = true;
this.room = this.navParams.get('room');
this.roomName = this.room.name.split('-').join(' ');
/* this.room = this.navParams.get('room'); */
/* this.roomName = this.room.name.split('-').join(' '); */
}
ngOnChanges(changes: SimpleChanges): void {
this.getRoomInfo();
}
ngOnInit() {
@@ -45,11 +49,8 @@ export class GroupMessagesPage implements OnInit {
this.loggedUser=res;
console.log(this.loggedUser);
});
this.load();
}
load(){
this.getGroupContacts();
this.loadGroupMessages();
this.getRoomInfo();
console.log(this.roomId);
}
close(){
@@ -57,15 +58,30 @@ export class GroupMessagesPage implements OnInit {
}
doRefresh(ev:any){
this.load();
this.getRoomInfo();
ev.target.complete();
}
get watch(){
this.getRoomInfo();
console.log('here watching');
return this.roomId;
}
getRoomInfo(){
this.showLoader = true;
this.chatService.getRoomInfo(this.roomId).subscribe(room=>{
this.room = room['room'];
this.getGroupContacts(this.room);
this.loadGroupMessages(this.room);
this.showLoader = false;
});
}
getGroupContacts(){
getGroupContacts(room:any){
this.showLoader = true;
//If group is private call getGroupMembers
if(this.room.t === 'p'){
this.chatService.getGroupMembers(this.room._id).subscribe(res=>{
if(room.t === 'p'){
this.chatService.getGroupMembers(this.roomId).subscribe(res=>{
console.log(res);
this.members = res['members'];
this.showLoader = false;
@@ -73,27 +89,33 @@ export class GroupMessagesPage implements OnInit {
}
//Otherwise call getChannelMembers for públic groups
else{
this.chatService.getChannelMembers(this.room._id).subscribe(res=>{
this.chatService.getChannelMembers(this.roomId).subscribe(res=>{
console.log(res);
this.members = res['members'];
this.showLoader = false;
});
}
}
loadGroupMessages(){
loadGroupMessages(room:any){
console.log('here'+room.t);
this.showLoader = true;
//If group is private call getGroupMembers
if(this.room.t === 'p'){
this.chatService.getPrivateGroupMessages(this.room._id).subscribe(res=>{
if(room.t === 'p'){
console.log('private');
this.chatService.getPrivateGroupMessages(this.roomId).subscribe(res=>{
console.log(res);
let msgOnly = res['messages'].filter(data => data.t != 'au');
this.messages = msgOnly.reverse();
console.log(res);
this.showLoader = false;
});
}
//Otherwise call getChannelMembers for públic groups
else{
this.chatService.getPublicGroupMessages(this.room._id).subscribe(res=>{
this.chatService.getPublicGroupMessages(this.roomId).subscribe(res=>{
console.log(res);
this.messages = res['messages'].reverse();
});
@@ -104,17 +126,18 @@ export class GroupMessagesPage implements OnInit {
let body = {
"message":
{
"rid": this.room._id, "msg": this.message
"rid": this.roomId, "msg": this.message
}
}
this.chatService.sendMessage(body).subscribe(res=> {
this.loadGroupMessages();
/* this.loadGroupMessages(); */
this.getRoomInfo();
});
this.message = "";
}
async openOptions(ev: any) {
/* async openOptions(ev: any) {
const popover = await this.popoverController.create({
component: ChatPopoverPage,
cssClass: 'chat-popover',
@@ -132,7 +155,7 @@ export class GroupMessagesPage implements OnInit {
console.log(this.roomName);
this.load();
/* this.modalController.dismiss(); */
//this.modalController.dismiss();
};
});
@@ -170,7 +193,7 @@ export class GroupMessagesPage implements OnInit {
this.load();
});
}
*/
/* async actionSheet() {
const actionSheet = await this.actionSheetController.create({
cssClass: 'my-custom-class',
src/app/pages/chat/messages/messages.page.html
+2
View File
@@ -57,6 +57,8 @@
</div>
</ion-content>
<ion-footer>
<ion-toolbar>
<ion-row align-items-center class="row">
src/app/pages/chat/messages/messages.page.scss
+9 -1
View File
@@ -2,6 +2,7 @@
.header-toolbar{
--background:transparent;
--opacity: 1;
border: 1px solid red;
.main-header{
width: 100%; /* 400px */
@@ -82,9 +83,13 @@
}
}
ion-content{
width: 100%;
height: 100%;
border: 1px solid red;
.welcome-text{
/* width: 322px; */
width: em(422px);
/* width: em(422px); */
width: 100%;
background: #ebebeb;
text-align: center;
font-size: 13px;
@@ -94,6 +99,7 @@
line-height: 1.2rem;
margin: 20px 39px 25px;
border-radius: 8px;
}
.messages{
font-size: 13px;
@@ -144,6 +150,8 @@
}
ion-footer{
width: 100%;
border: 1px solid red;
.row{
width: 380px;
margin: 0 auto;
src/app/pages/chat/messages/messages.page.ts
+21 -7
View File
@@ -1,4 +1,4 @@
import { AfterViewChecked, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { AfterViewChecked, Component, ElementRef, Input, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';
import { ModalController, NavParams, PopoverController } from '@ionic/angular';
import { Status } from 'src/app/models/chat/status.model';
import { AuthService } from 'src/app/services/auth.service';
@@ -12,7 +12,7 @@ import { ContactsPage } from '../new-group/contacts/contacts.page';
templateUrl: './messages.page.html',
styleUrls: ['./messages.page.scss'],
})
export class MessagesPage implements OnInit, AfterViewChecked {
export class MessagesPage implements OnInit, AfterViewChecked, OnChanges {
showLoader: boolean;
@ViewChild('scrollMe') private myScrollContainer: ElementRef;
@@ -25,15 +25,22 @@ export class MessagesPage implements OnInit, AfterViewChecked {
userPresence='';
dmUsers:any;
@Input() roomId:string;
constructor(
public popoverController: PopoverController,
private modalController: ModalController,
private navParams: NavParams,
/* private navParams: NavParams, */
private chatService: ChatService,
private authService: AuthService,
) {
this.dm = this.navParams.get('dm');
/* this.dm = this.navParams.get('dm'); */
}
ngOnChanges(changes: SimpleChanges): void {
console.log(this.roomId);
this.load();
//throw new Error('Method not implemented.');
}
ngOnInit() {
@@ -48,12 +55,16 @@ export class MessagesPage implements OnInit, AfterViewChecked {
/* setInterval(()=>{ */
this.load();
/* }, 9000); */
console.log(this.roomId);
}
load(){
this.loadMessages();
this.getChatMembers();
}
doRefresh(ev:any){
this.load();
ev.target.complete();
@@ -61,6 +72,7 @@ export class MessagesPage implements OnInit, AfterViewChecked {
ngAfterViewChecked() {
this.scrollToBottom();
console.log(this.roomId);
}
scrollToBottom(): void {
try {
@@ -76,7 +88,7 @@ export class MessagesPage implements OnInit, AfterViewChecked {
let body = {
"message":
{
"rid": this.dm._id, "msg": this.message
"rid": this.roomId, "msg": this.message
}
}
@@ -88,7 +100,7 @@ export class MessagesPage implements OnInit, AfterViewChecked {
loadMessages(){
this.showLoader = true;
this.chatService.getRoomMessages(this.dm._id).subscribe(res => {
this.chatService.getRoomMessages(this.roomId).subscribe(res => {
/* console.log(res); */
this.messages = res['messages'].reverse();
console.log(this.messages);
@@ -96,8 +108,10 @@ export class MessagesPage implements OnInit, AfterViewChecked {
})
}
getChatMembers(){
console.log(this.roomId);
this.showLoader = true;
this.chatService.getMembers(this.dm._id).subscribe(res=> {
this.chatService.getMembers(this.roomId).subscribe(res=> {
this.dmUsers = res['members'].filter(data => data.username != this.loggedUser.me.username)
console.log(res);
console.log(this.dmUsers);
src/app/pages/chat/test/test.page.html
+1 -1
View File
@@ -5,5 +5,5 @@
</ion-header>
<ion-content>
TESTE
</ion-content>