diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 5dfb7a7e9..def598b45 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -9,7 +9,11 @@ const routes: Routes = [ { path: '', loadChildren: () => import('./home/home.module').then( m => m.HomePageModule) - } + }, { + path: 'messages', + loadChildren: () => import('./shared/chat/messages/messages.module').then( m => m.MessagesPageModule) + } + ]; @NgModule({ imports: [ diff --git a/src/app/pages/chat/chat.page.html b/src/app/pages/chat/chat.page.html index 290779158..90c64b523 100644 --- a/src/app/pages/chat/chat.page.html +++ b/src/app/pages/chat/chat.page.html @@ -1,22 +1,6 @@ - - - + + - @@ -27,9 +11,10 @@
+ -
-

Chat

+
+

Chat

@@ -96,7 +81,7 @@
- NONE +
diff --git a/src/app/pages/chat/chat.page.scss b/src/app/pages/chat/chat.page.scss index 2d381ea85..43032bb06 100644 --- a/src/app/pages/chat/chat.page.scss +++ b/src/app/pages/chat/chat.page.scss @@ -1,4 +1,9 @@ - +ion-content{ + --background: transparent; + } + :host{ + background: #0782c9; + } .main-header{ width: 100%; /* 400px */ height: 100%; @@ -38,13 +43,15 @@ } } .main-content{ - width: 100%; /* 400px */ + width: 100%; height: 100%; font-family: Roboto; margin: 0 auto; background-color: #fff; overflow:auto; padding: 15px 20px 0 20px; + border-top-left-radius: 25px; + border-top-right-radius: 25px; .iconschatnew-group{ width: 30px; @@ -102,3 +109,25 @@ color: #000; } } + +@media only screen and (min-width: 1024px) { + .main-content{ + .aside-wrapper{ + border: 1px solid red; + justify-content: flex-start !important; + .aside-title{ + font-family: Roboto; + font-size: 25px; + text-align: left; + } + } + .aside{ + width: 340px; + } + .aside-content{ + display: flex !important; + background-color: white; + } + } + +} diff --git a/src/app/pages/chat/chat.page.ts b/src/app/pages/chat/chat.page.ts index 3a163d5f9..f23ded448 100644 --- a/src/app/pages/chat/chat.page.ts +++ b/src/app/pages/chat/chat.page.ts @@ -38,6 +38,10 @@ export class ChatPage implements OnInit { result:any; dmUsers:any; + desktopComponent: any = { + messages: false, + } + constructor( private http:HttpClient, private chatService: ChatService, @@ -49,9 +53,12 @@ export class ChatPage implements OnInit { this.headers = new HttpHeaders(); /* this.headers = this.headers.set('X-User-Id', 'GqjNWiLrGEHRna7Zn'); this.headers = this.headers.set('X-Auth-Token', 'SJwIgtlqfloPK696fpc2VBvyDluipuIHKB_0Q6-9ycJ'); */ - } - + closeAllDesktopComponent(){ + this.desktopComponent = { + messages: false, + } + } ngOnInit() { this.segment = "Contactos"; @@ -164,6 +171,14 @@ export class ChatPage implements OnInit { modal.onDidDismiss(); } async openMessages(dm:any){ + this.closeAllDesktopComponent(); + + let classs; + if( window.innerWidth <= 1024){ + classs = 'modal' + } else { + classs = 'chat-mobile-modal-to-Desktop' + } console.log(dm); const modal = await this.modalController.create({ diff --git a/src/app/pages/gabinete-digital/gabinete-digital.page.scss b/src/app/pages/gabinete-digital/gabinete-digital.page.scss index 33cf81731..b44ff407b 100644 --- a/src/app/pages/gabinete-digital/gabinete-digital.page.scss +++ b/src/app/pages/gabinete-digital/gabinete-digital.page.scss @@ -154,6 +154,7 @@ ion-content{ .main-content{ .aside-wrapper{ + border: 1px solid red; justify-content: flex-start !important; .aside-title{ font-family: Roboto; diff --git a/src/app/shared/chat/group-messages/group-contacts/group-contacts-routing.module.ts b/src/app/shared/chat/group-messages/group-contacts/group-contacts-routing.module.ts new file mode 100644 index 000000000..c998741ed --- /dev/null +++ b/src/app/shared/chat/group-messages/group-contacts/group-contacts-routing.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; + +import { GroupContactsPage } from './group-contacts.page'; + +const routes: Routes = [ + { + path: '', + component: GroupContactsPage + } +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule], +}) +export class GroupContactsPageRoutingModule {} diff --git a/src/app/shared/chat/group-messages/group-contacts/group-contacts.module.ts b/src/app/shared/chat/group-messages/group-contacts/group-contacts.module.ts new file mode 100644 index 000000000..1828ecb73 --- /dev/null +++ b/src/app/shared/chat/group-messages/group-contacts/group-contacts.module.ts @@ -0,0 +1,24 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { FormsModule } from '@angular/forms'; + +import { IonicModule } from '@ionic/angular'; + +import { GroupContactsPageRoutingModule } from './group-contacts-routing.module'; + +import { GroupContactsPage } from './group-contacts.page'; +import { SharedModule } from 'src/app/shared/shared.module'; +import { PipesModule } from 'src/app/pipes/pipes.module'; + +@NgModule({ + imports: [ + CommonModule, + FormsModule, + IonicModule, + SharedModule, + PipesModule, + GroupContactsPageRoutingModule + ], + declarations: [GroupContactsPage] +}) +export class GroupContactsPageModule {} diff --git a/src/app/shared/chat/group-messages/group-contacts/group-contacts.page.html b/src/app/shared/chat/group-messages/group-contacts/group-contacts.page.html new file mode 100644 index 000000000..f63a629a8 --- /dev/null +++ b/src/app/shared/chat/group-messages/group-contacts/group-contacts.page.html @@ -0,0 +1,59 @@ + + +
+
+
+ +
+
+ Contactos +
+ +
+
+ + +
+ +
+ + + + + + + + + + + + + +
+
+ Contactos selecção: + +
+ +

{{user.name}}

+ +
+ +
+ + + +
+ {{header}} +
+ +
+ +

{{user.name}}

+ +
+ + + +
+ diff --git a/src/app/shared/chat/group-messages/group-contacts/group-contacts.page.scss b/src/app/shared/chat/group-messages/group-contacts/group-contacts.page.scss new file mode 100644 index 000000000..829026a52 --- /dev/null +++ b/src/app/shared/chat/group-messages/group-contacts/group-contacts.page.scss @@ -0,0 +1,141 @@ +.header-toolbar{ + --background:transparent; + --opacity: 1; + + .main-header{ + width: 100%; /* 400px */ + height: 100%; + font-family: Roboto; + border-top-left-radius: 25px; + border-top-right-radius: 25px; + background-color: #fff; + overflow:hidden; + padding: 30px 20px 0px 20px; + color:#000; + transform: translate3d(0, 1px, 0); + + .div-icon{ + width: 40px; + float: right; + font-size: 35px; + overflow: auto; + padding: 1px; + } + .div-icon ion-icon{ + float: right; + padding-left: 20px; + } + .title-content{ + width: 360px; + margin: 0px auto; + overflow: auto; + padding: 0 !important; + } + + .back-icon{ + width: 37px; + float: left; + font-size: 35px; + overflow: auto; + + } + .div-title{ + width: 221px; + padding: 0!important; + float: left; + margin: 2.5px 0 0 5px; + } + .title{ + font-size: 25px; + } + } + } + .toolbar-search{ + --padding-top:0 !important; + --padding-bottom:0 !important; + --padding-start:0 !important; + --padding-end:0 !important; + + .search{ + border: 1px solid #ebebeb; + margin: 5px 20px 5px 20px; + border-radius: 5px; + } + .search ion-searchbar{ + /* border: 1px solid green; */ + width: 100%; + margin: 0 !important; + padding: 0 !important; + --border-radius: 5px; + --box-shadow: none; + overflow: auto; + --icon-color:#0d89d1; + } + + } + ion-content{ + --background:transparent; + } + .main-content{ + width: 100%; + height: 100%; + font-family: Roboto; + margin: 0 auto; + background-color: #fff; + overflow:auto; + padding: 0 0 0 0; + + .members-label{ + margin: 10px 20px 10px 20px !important; + /* font-size: 15px; */ + font-weight: bold; + } + + .members-checkbox{ + display: flex; + margin: .5px 20px .5px 20px !important; + overflow: auto; + align-items: center; + + } + + .item-divider{ + background: #ebebeb; + font-size: 15px; + margin: 10px 0 10px 0; + padding:5px 0 5px 20px; + + } + + .item-checkbox{ + display: flex; + margin: 10px 20px 10px 20px !important; + overflow: auto; + align-items: center; + + } + + .item-checkbox ion-checkbox, .members-checkbox ion-checkbox{ + --border-color: #0d89d1; + --background-checked:#0d89d1; + float: left; + } + + .item-checkbox p, .members-checkbox p{ + display: block; + margin: 0 !important; + width: 330px; + padding-left: 10px; + font-size: 15px; + color: #0d89d1; + float: left; + } + .item-checkbox ion-icon, .members-checkbox ion-icon{ + font-size: 10px; + float: left; + color:#99e47b; + margin-left: 10px; + } + } + + \ No newline at end of file diff --git a/src/app/shared/chat/group-messages/group-contacts/group-contacts.page.spec.ts b/src/app/shared/chat/group-messages/group-contacts/group-contacts.page.spec.ts new file mode 100644 index 000000000..dde2043a8 --- /dev/null +++ b/src/app/shared/chat/group-messages/group-contacts/group-contacts.page.spec.ts @@ -0,0 +1,24 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { IonicModule } from '@ionic/angular'; + +import { GroupContactsPage } from './group-contacts.page'; + +describe('GroupContactsPage', () => { + let component: GroupContactsPage; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ GroupContactsPage ], + imports: [IonicModule.forRoot()] + }).compileComponents(); + + fixture = TestBed.createComponent(GroupContactsPage); + component = fixture.componentInstance; + fixture.detectChanges(); + })); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/shared/chat/group-messages/group-contacts/group-contacts.page.ts b/src/app/shared/chat/group-messages/group-contacts/group-contacts.page.ts new file mode 100644 index 000000000..c1fdc3618 --- /dev/null +++ b/src/app/shared/chat/group-messages/group-contacts/group-contacts.page.ts @@ -0,0 +1,211 @@ +import { HttpClient, HttpHeaders } from '@angular/common/http'; +import { Component, OnInit } from '@angular/core'; +import { ModalController, NavParams } from '@ionic/angular'; +import * as _ from 'lodash'; +import { AuthService } from 'src/app/services/auth.service'; +import { ChatService } from 'src/app/services/chat.service'; +import { NewGroupPage } from '../../new-group/new-group.page'; +import { GroupMessagesPage } from '../group-messages.page'; + +@Component({ + selector: 'app-group-contacts', + templateUrl: './group-contacts.page.html', + styleUrls: ['./group-contacts.page.scss'], +}) +export class GroupContactsPage implements OnInit { + showLoader: boolean; + loggedUser: any; + users = []; + + contact: string[] = [" Ana M.", "Andre F.", "Bruno G.", "Catarina T", "Tiago"]; + + headers: HttpHeaders; + options:any; + listContacts: any[]; + contacts: any; + textSearch:string; + room:any; + members:any; + dm:any; + isGroupCreated:boolean; + groupName:string; + selectedUserList:any; + + constructor( + private modalController: ModalController, + private http: HttpClient, + private chatService: ChatService, + private authService: AuthService, + private navParams: NavParams, + ) + { + this.authService.userData$.subscribe((res:any)=>{ + this.loggedUser=res; + }); + this.textSearch=""; + this.dm=null; + this.room=null; + this.isGroupCreated = this.navParams.get('isCreated'); + this.groupName = this.navParams.get('name'); + this.room = this.navParams.get('room'); + this.members = this.navParams.get('members'); + } + + ngOnInit() { + this.loadUsers(); + console.log(this.groupName); + console.log(this.isGroupCreated); + } + + loadUsers(){ + this.options = { + headers: this.headers, + }; + this.chatService.getAllUsers().subscribe((res:any)=>{ + if(this.members){ + this.contacts = res.users.filter(f => !this.members.some(item => item._id === f._id)); + } + else{ + this.contacts = res.users.filter(data => data.username != this.loggedUser.me.username); + } + + this.users = this.contacts.sort((a,b) => { + if(a.name < b.name){ + return -1; + } + if(a.name > b.name){ + return 1; + } + return 0; + }); + console.log(this.users); + + this.showLoader = false; + }); + } + + separateLetter(record, recordIndex, records){ + if(recordIndex == 0){ + return record.name[0]; + } + + let first_prev = records[recordIndex - 1].name[0]; + let first_current = record.name[0]; + + if(first_prev != first_current){ + return first_current; + } + return null; + } + + doRefresh(event){ + + } + + async close(){ + this.modalController.dismiss(); + if(this.isGroupCreated){ + console.log('go to conversa'); + } + else{ + this.modalController.dismiss(); + console.log('go to new group page'); + const modal = await this.modalController.create({ + component: NewGroupPage, + componentProps: { + name:this.groupName, + duration:'', + }, + cssClass: 'new-group', + backdropDismiss: false, + }); + await modal.present(); + + } + + } + onChange(event){ + this.textSearch = event.detail.value; + } + clicked(){ + console.log('clicked'); + + } + selectedContact(user:any){ + /* this.groupName = this.room.name; */ + user.isChecked = !user.isChecked; + + + } + addContacts(room:any){ + console.log(room); + this.selectedUserList = this.users.filter(function(contact) { + return contact.isChecked == true; + }); + console.log( this.selectedUserList); + this.selectedUserList.forEach(user=>{ + let body ={ + "roomId":room._id, + "userId":user._id, + + } + this.chatService.addUserToGroup(body).subscribe(res=>{ + console.log(res['success']); + }); + }); + } + + createGroup(){ + if(!this.isGroupCreated){ + /* this.close(); */ + let body = { "name":this.groupName, } + this.chatService.addGroup(body).subscribe(res=>{ + console.log('group created'); + console.log(res['group']); + this.addContacts(res['group']); + this.openGroupMessages(res['group']); + + }); + + } + else{ + this.addContacts(this.room); + this.close(); + /* this.openGroupMessages(this.room); */ + /* this.chatService.getGroupInfo(this.room._id).subscribe(res=>{ + console.log(res); + + this.addContacts(res['group']); + this.openGroupMessages(res['group']); + }) */ + + } + } + + async newGroup(){ + this.close(); + const modal = await this.modalController.create({ + component: NewGroupPage, + cssClass: 'new-group', + backdropDismiss: false, + }); + await modal.present(); + modal.onDidDismiss(); + } + + async openGroupMessages(room:any){ + this.close(); + const modal = await this.modalController.create({ + component: GroupMessagesPage, + componentProps: { + room: room, + }, + cssClass: 'group-messages', + backdropDismiss: false + }); + + await modal.present(); + modal.onDidDismiss(); + } + +} diff --git a/src/app/shared/chat/group-messages/group-messages-routing.module.ts b/src/app/shared/chat/group-messages/group-messages-routing.module.ts new file mode 100644 index 000000000..708ec8d8f --- /dev/null +++ b/src/app/shared/chat/group-messages/group-messages-routing.module.ts @@ -0,0 +1,21 @@ +import { NgModule } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; + +import { GroupMessagesPage } from './group-messages.page'; + +const routes: Routes = [ + { + path: '', + component: GroupMessagesPage + }, { + path: 'group-contacts', + loadChildren: () => import('./group-contacts/group-contacts.module').then( m => m.GroupContactsPageModule) + } + +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule], +}) +export class GroupMessagesPageRoutingModule {} diff --git a/src/app/shared/chat/group-messages/group-messages.module.ts b/src/app/shared/chat/group-messages/group-messages.module.ts new file mode 100644 index 000000000..204590b92 --- /dev/null +++ b/src/app/shared/chat/group-messages/group-messages.module.ts @@ -0,0 +1,24 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { FormsModule } from '@angular/forms'; + +import { IonicModule } from '@ionic/angular'; + +import { GroupMessagesPageRoutingModule } from './group-messages-routing.module'; + +import { GroupMessagesPage } from './group-messages.page'; +import { SharedModule } from 'src/app/shared/shared.module'; +import { PopoverModule } from 'src/app/shared/popover/chat-popover/popover.modules'; + +@NgModule({ + imports: [ + CommonModule, + FormsModule, + IonicModule, + SharedModule, + PopoverModule, + GroupMessagesPageRoutingModule + ], + declarations: [GroupMessagesPage] +}) +export class GroupMessagesPageModule {} diff --git a/src/app/shared/chat/group-messages/group-messages.page.html b/src/app/shared/chat/group-messages/group-messages.page.html new file mode 100644 index 000000000..0f69171a8 --- /dev/null +++ b/src/app/shared/chat/group-messages/group-messages.page.html @@ -0,0 +1,76 @@ + + +
+
+ +
+ {{roomName}} +
+
+ +
+
+
+
+ +
+
+ + {{member.name}}, + +
+
+
+ + + + + + + + + + +
+ Esta conversa passou a grupo
+ A conversa original mantêm-se como chat individual +
+
+
+
+ {{msg.u.name}} + {{msg._updatedAt | date: 'HH:mm' }} +
+
+ {{msg.msg}} +
+
+
+ Alterou o assunto de para "{{msg.msg.split('-').join(' ')}}"
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/app/shared/chat/group-messages/group-messages.page.scss b/src/app/shared/chat/group-messages/group-messages.page.scss new file mode 100644 index 000000000..08390cfcc --- /dev/null +++ b/src/app/shared/chat/group-messages/group-messages.page.scss @@ -0,0 +1,174 @@ +@import '~src/function.scss'; +.header-toolbar{ + --background:transparent; + --opacity: 1; + + .main-header{ + width: 100%; /* 400px */ + height: 100%; + font-family: Roboto; + border-top-left-radius: 25px; + border-top-right-radius: 25px; + background-color: #fff; + overflow:hidden; + padding: 30px 20px 0px 20px; + color:#000; + transform: translate3d(0, 1px, 0); + + .header-top{ + width: 360px; + margin: 0px auto; + overflow: auto; + padding: 0 !important; + background: #fff; + .middle{ + padding: 0!important; + float: left; + width: 280px; + margin: 2.5px 0 0 5px; + } + .right{ + padding: 0!important; + float: right; + font-size: 25px; + color: #0782c9; + margin: 5px 0 0 0; + } + } + .header-bottom{ + width: 310px; + overflow: auto; + margin: 0 auto; + + .header-bottom-icon{ + width: 30px; + font-size: 25px; + float: left; + padding: 2px; + + } + .header-bottom-contacts{ + width: 275px; + font-size: 15px; + color: #797979; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + float: left; + padding: 5px; + margin: 1px; + } + } + + .title{ + font-size: 25px; + } + .div-icon{ + width: 40px; + float: right; + font-size: 35px; + overflow: auto; + padding: 1px; + } + .div-icon ion-icon{ + float: right; + padding-left: 20px; + } + } + } + ion-content{ + .welcome-text{ + /* width: 322px; */ + width: em(422px); + background: #ebebeb; + text-align: center; + font-size: 13px; + color: #797979; + padding: 10px; + margin: 0 auto; + line-height: 1.2rem; + margin: 20px 39px 25px; + border-radius: 8px; + } + .info-text{ + /* width: 322px; */ + width: em(422px); + background: #fef4c5; + text-align: center; + font-size: 13px; + color: #262420; + padding: 10px; + margin: 10px auto; + line-height: 1.2rem; + /* margin: 15px 0px 15px 0px; */ + border-radius: 8px; + } + .messages{ + font-size: 13px; + font-family: Roboto; + overflow: auto; + + .incoming-true, .incoming-false{ + width: 305px; + padding: 15px 20px; + border-radius: 10px; + } + + .incoming-true{ + margin: 10px 75px 10px 20px; + background: #ebebeb; + float: left; + } + } + .incoming-false{ + margin: 10px 20px 10px 75px; + background: #e4f4fe; + float: right; + } + .title{ + color: #0782c9; + + font-weight: bold; + margin-bottom: 5px; + + .time{ + color: #797979; + text-align: right; + float: right; + } + } + } + + ion-footer{ + .row{ + width: 380px; + margin: 0 auto; + } + + .chat-icon-options{ + display:block !important; + font-size: 25px; + float: right !important; + margin-top: 10px; + } + + .chat-icon-send{ + font-size: 45px; + margin: 0 auto; + margin-top: 4px; + } + + .type-message{ + display: flex; + border: 1px solid #ebebeb; + border-radius: 25px; + padding-left: 15px; + align-items: center; + overflow: auto; + + ion-textarea{ + margin: 0 !important; + align-self: center; + } + } + } \ No newline at end of file diff --git a/src/app/shared/chat/group-messages/group-messages.page.spec.ts b/src/app/shared/chat/group-messages/group-messages.page.spec.ts new file mode 100644 index 000000000..62c380096 --- /dev/null +++ b/src/app/shared/chat/group-messages/group-messages.page.spec.ts @@ -0,0 +1,24 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { IonicModule } from '@ionic/angular'; + +import { GroupMessagesPage } from './group-messages.page'; + +describe('GroupMessagesPage', () => { + let component: GroupMessagesPage; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ GroupMessagesPage ], + imports: [IonicModule.forRoot()] + }).compileComponents(); + + fixture = TestBed.createComponent(GroupMessagesPage); + component = fixture.componentInstance; + fixture.detectChanges(); + })); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/shared/chat/group-messages/group-messages.page.ts b/src/app/shared/chat/group-messages/group-messages.page.ts new file mode 100644 index 000000000..7c2a62965 --- /dev/null +++ b/src/app/shared/chat/group-messages/group-messages.page.ts @@ -0,0 +1,200 @@ +import { Component, OnInit } 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'; +import { ChatOptionsPopoverPage } from 'src/app/shared/popover/chat-options-popover/chat-options-popover.page'; +import { ChatPopoverPage } from 'src/app/shared/popover/chat-popover/chat-popover.page'; +import { ContactsPage } from '../new-group/contacts/contacts.page'; +import { NewGroupPage } from '../new-group/new-group.page'; +import { GroupContactsPage } from './group-contacts/group-contacts.page'; + +@Component({ + selector: 'app-group-messages', + templateUrl: './group-messages.page.html', + styleUrls: ['./group-messages.page.scss'], +}) +export class GroupMessagesPage implements OnInit { + showLoader: boolean; + isGroupCreated:boolean; + loggedUser: any; + message:any; + messages:any; + + + room:any; + roomName:any; + members:any; + contacts: string[] = [" Ana M.", "Andre F.", "Bruno G.", "Catarina T", "Tiago"]; + + constructor( + private menu: MenuController, + private modalController: ModalController, + private actionSheetController: ActionSheetController, + public popoverController: PopoverController, + private chatService: ChatService, + private navParams: NavParams, + private authService: AuthService, + ) { + this.isGroupCreated = true; + this.room = this.navParams.get('room'); + this.roomName = this.room.name.split('-').join(' '); + } + + ngOnInit() { + this.authService.userData$.subscribe((res:any)=>{ + this.loggedUser=res; + console.log(this.loggedUser); + }); + this.load(); + } + load(){ + this.getGroupContacts(); + this.loadGroupMessages(); + } + + close(){ + this.modalController.dismiss(); + } + + doRefresh(ev:any){ + this.load(); + ev.target.complete(); + } + + getGroupContacts(){ + this.showLoader = true; + //If group is private call getGroupMembers + if(this.room.t === 'p'){ + this.chatService.getGroupMembers(this.room._id).subscribe(res=>{ + console.log(res); + this.members = res['members']; + this.showLoader = false; + }); + } + //Otherwise call getChannelMembers for públic groups + else{ + this.chatService.getChannelMembers(this.room._id).subscribe(res=>{ + console.log(res); + this.members = res['members']; + this.showLoader = false; + }); + } + } + loadGroupMessages(){ + this.showLoader = true; + //If group is private call getGroupMembers + if(this.room.t === 'p'){ + this.chatService.getPrivateGroupMessages(this.room._id).subscribe(res=>{ + console.log(res); + let msgOnly = res['messages'].filter(data => data.t != 'au'); + this.messages = msgOnly.reverse(); + this.showLoader = false; + }); + } + //Otherwise call getChannelMembers for públic groups + else{ + this.chatService.getPublicGroupMessages(this.room._id).subscribe(res=>{ + console.log(res); + this.messages = res['messages'].reverse(); + }); + } + } + sendMessage(){ + + let body = { + "message": + { + "rid": this.room._id, "msg": this.message + } + } + + this.chatService.sendMessage(body).subscribe(res=> { + this.loadGroupMessages(); + }); + this.message = ""; + } + + async openOptions(ev: any) { + const popover = await this.popoverController.create({ + component: ChatPopoverPage, + cssClass: 'chat-popover', + event: ev, + componentProps: { + room: this.room, + }, + translucent: true + }); + await popover.present(); + popover.onDidDismiss().then(res=>{ + console.log(res); + if(res.data){ + this.roomName = res.data.name.split('-').join(' '); + console.log(this.roomName); + + this.load(); + /* this.modalController.dismiss(); */ + }; + + }); + } + async openChatOptions(ev: any) { + const popover = await this.popoverController.create({ + component: ChatOptionsPopoverPage, + cssClass: 'chat-options-popover', + event: ev, + componentProps: { + room: this.room, + }, + translucent: true + }); + return await popover.present(); + } + async addContacts(){ + console.log(this.members); + + const modal = await this.modalController.create({ + component: GroupContactsPage, + componentProps: { + isCreated: this.isGroupCreated, + room: this.room, + members: this.members, + name: this.room.name, + }, + cssClass: 'contacts', + backdropDismiss: false + }); + + await modal.present(); + + modal.onDidDismiss().then(()=>{ + this.load(); + }); + } + + /* async actionSheet() { + const actionSheet = await this.actionSheetController.create({ + cssClass: 'my-custom-class', + buttons: [{ + text: 'Sair do grupo', + handler: () => { + console.log('Delete clicked'); + } + }, { + text: 'Alterar nome do grupo1', + handler: () => { + console.log('Alterar nome do grupo'); + this.openChangeGroupName() + } + }, { + text: 'Apagar o grupo', + handler: () => { + console.log('Play clicked'); + } + }, + ] + }); + await actionSheet.present(); + } + */ + +} diff --git a/src/app/shared/chat/messages/contacts/contacts-routing.module.ts b/src/app/shared/chat/messages/contacts/contacts-routing.module.ts new file mode 100644 index 000000000..fb8c7a5ea --- /dev/null +++ b/src/app/shared/chat/messages/contacts/contacts-routing.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; + +import { ContactsPage } from './contacts.page'; + +const routes: Routes = [ + { + path: '', + component: ContactsPage + } +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule], +}) +export class ContactsPageRoutingModule {} diff --git a/src/app/shared/chat/messages/contacts/contacts.module.ts b/src/app/shared/chat/messages/contacts/contacts.module.ts new file mode 100644 index 000000000..8284984be --- /dev/null +++ b/src/app/shared/chat/messages/contacts/contacts.module.ts @@ -0,0 +1,24 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { FormsModule } from '@angular/forms'; + +import { IonicModule } from '@ionic/angular'; + +import { ContactsPageRoutingModule } from './contacts-routing.module'; + +import { ContactsPage } from './contacts.page'; +import { SharedModule } from 'src/app/shared/shared.module'; +import { PipesModule } from 'src/app/pipes/pipes.module'; + +@NgModule({ + imports: [ + CommonModule, + FormsModule, + IonicModule, + SharedModule, + PipesModule, + ContactsPageRoutingModule + ], + declarations: [ContactsPage] +}) +export class ContactsPageModule {} diff --git a/src/app/shared/chat/messages/contacts/contacts.page.html b/src/app/shared/chat/messages/contacts/contacts.page.html new file mode 100644 index 000000000..b2f8e9705 --- /dev/null +++ b/src/app/shared/chat/messages/contacts/contacts.page.html @@ -0,0 +1,46 @@ + + +
+
+
+ +
+
+ Nova Conversa +
+
+
+ + +
+ +
+ + + + + + + + + +
+ + + +
+ {{header}} +
+ +
+

{{user.name}}

+ + + + +
+ + + +
+ diff --git a/src/app/shared/chat/messages/contacts/contacts.page.scss b/src/app/shared/chat/messages/contacts/contacts.page.scss new file mode 100644 index 000000000..1eb104bdb --- /dev/null +++ b/src/app/shared/chat/messages/contacts/contacts.page.scss @@ -0,0 +1,136 @@ + +.header-toolbar{ + --background:transparent; + --opacity: 1; + + .main-header{ + width: 100%; /* 400px */ + height: 100%; + font-family: Roboto; + border-top-left-radius: 25px; + border-top-right-radius: 25px; + background-color: #fff; + overflow:hidden; + padding: 30px 20px 0px 20px; + color:#000; + transform: translate3d(0, 1px, 0); + + .div-icon{ + width: 40px; + float: right; + font-size: 35px; + overflow: auto; + padding: 1px; + } + .div-icon ion-icon{ + float: right; + padding-left: 20px; + } + .title-content{ + width: 360px; + margin: 0px auto; + overflow: auto; + padding: 0 !important; + } + + .back-icon{ + width: 37px; + float: left; + font-size: 35px; + overflow: auto; + + } + .div-title{ + width: 221px; + padding: 0!important; + float: left; + margin: 2.5px 0 0 5px; + } + .title{ + font-size: 25px; + } + } + } + .toolbar-search{ + --padding-top:0 !important; + --padding-bottom:0 !important; + --padding-start:0 !important; + --padding-end:0 !important; + + .search{ + border: 1px solid #ebebeb; + margin: 5px 20px 5px 20px; + border-radius: 5px; + height: auto; + padding: 0 !important; + } + .search ion-searchbar{ + /* border: 1px solid green; */ + width: 100%; + margin: 0 !important; + padding: 0 !important; + --border-radius: 5px; + --box-shadow: none; + overflow: hidden; + --icon-color:#0d89d1; + } + + } + ion-content{ + --background:transparent; + } + .main-content{ + width: 100%; + height: 100%; + font-family: Roboto; + margin: 0 auto; + background-color: #fff; + overflow:auto; + padding: 0 0 0 0; + + .item-divider{ + background: #ebebeb; + font-size: 15px; + margin: 10px 0 10px 0; + padding:5px 0 5px 20px; + + } + + .item-user{ + display: flex; + margin: 10px 20px 10px 20px !important; + overflow: auto; + align-items: center; + } + + .item-user p{ + display: block; + margin: 0 !important; + width: 90%; + font-size: 15px; + color: #0d89d1; + float: left; + } + .item-user .icon{ + width: 10%; + font-size: 10px; + display: block; + text-align: right; + overflow: auto; + } + .online{ + color:#99e47b; + } + .offline{ + color:#cbced1; + } + .away{ + color:#ffd21f; + } + .invisible{ + color:#cbced1; + } + .busy{ + color:#f5455c; + } + } \ No newline at end of file diff --git a/src/app/shared/chat/messages/contacts/contacts.page.spec.ts b/src/app/shared/chat/messages/contacts/contacts.page.spec.ts new file mode 100644 index 000000000..8f263232b --- /dev/null +++ b/src/app/shared/chat/messages/contacts/contacts.page.spec.ts @@ -0,0 +1,24 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { IonicModule } from '@ionic/angular'; + +import { ContactsPage } from './contacts.page'; + +describe('ContactsPage', () => { + let component: ContactsPage; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ContactsPage ], + imports: [IonicModule.forRoot()] + }).compileComponents(); + + fixture = TestBed.createComponent(ContactsPage); + component = fixture.componentInstance; + fixture.detectChanges(); + })); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/shared/chat/messages/contacts/contacts.page.ts b/src/app/shared/chat/messages/contacts/contacts.page.ts new file mode 100644 index 000000000..ff86e8d5b --- /dev/null +++ b/src/app/shared/chat/messages/contacts/contacts.page.ts @@ -0,0 +1,153 @@ +import { HttpClient, HttpHeaders } from '@angular/common/http'; +import { Component, OnInit } from '@angular/core'; +import { ModalController } from '@ionic/angular'; +import { AuthService } from 'src/app/services/auth.service'; +import { ChatService } from 'src/app/services/chat.service'; +import { GroupMessagesPage } from '../../group-messages/group-messages.page'; +import { MessagesPage } from '../messages.page'; + +@Component({ + selector: 'app-contacts', + templateUrl: './contacts.page.html', + styleUrls: ['./contacts.page.scss'], +}) +export class ContactsPage implements OnInit { + showLoader: boolean; + loggedUser: any; + users = []; + + headers: HttpHeaders; + options:any; + contacts:any; + textSearch:string; + room:any; + dm:any; + + constructor( + private modalController: ModalController, + private http: HttpClient, + private chatService: ChatService, + private authService: AuthService, + ) + { + this.authService.userData$.subscribe((res:any)=>{ + this.loggedUser=res; + }); + this.textSearch=""; + this.dm=null; + this.room=null; + } + + ngOnInit() { + this.loadUsers(); + + } + onChange(event){ + this.textSearch = event.detail.value; + } + + loadUsers(){ + this.options = { + headers: this.headers, + }; + this.chatService.getAllUsers().subscribe((res:any)=>{ + console.log(res.users); + this.contacts = res.users.filter(data => data.username != this.loggedUser.me.username); + this.users = this.contacts.sort((a,b) => { + if(a.name < b.name){ + return -1; + } + if(a.name > b.name){ + return 1; + } + return 0; + }); + this.showLoader = false; + }); + } + + separateLetter(record, recordIndex, records){ + if(recordIndex == 0){ + return record.name[0]; + } + + let first_prev = records[recordIndex - 1].name[0]; + let first_current = record.name[0]; + + if(first_prev != first_current){ + return first_current; + } + return null; + } + + doRefresh(event){ + } + + close(){ + this.modalController.dismiss(); + } + + clicked(){ + console.log('clicked'); + } + + createRoom(username:string){ + let body = { + username: username, + } + this.chatService.createRoom(body).subscribe(res => { + console.log(res); + this.room = res['room']; + this.getDirectMessage(this.room._id); + }); + } + getDirectMessage(roomId:any){ + console.log(roomId); + + this.chatService.getAllDirectMessages().subscribe(res=>{ + let result = res['ims'].filter(data => data._id == roomId); + this.dm = result[0]; + console.log(this.dm); + this.openModal(this.dm); + }); + } + async openModal(dm:any){ + this.close(); + console.log(dm); + + const modal = await this.modalController.create({ + component: MessagesPage, + cssClass: 'group-messages', + backdropDismiss: false, + componentProps: { + dm: dm, + }, + }); + await modal.present(); + modal.onDidDismiss(); + } + + async openMessages(username:string){ + /* this.close(); */ + + let dm:any; + //Create new room + this.createRoom(username); + //Get direct messages (dm) + /* this.getDirectMessage(this.room._id); */ + console.log(this.dm); + + + /* const modal = await this.modalController.create({ + component: MessagesPage, + cssClass: 'group-messages', + backdropDismiss: false, + componentProps: { + dm: dm, + }, + }); + await modal.present(); + modal.onDidDismiss(); */ + } + +} diff --git a/src/app/shared/chat/messages/messages-routing.module.ts b/src/app/shared/chat/messages/messages-routing.module.ts new file mode 100644 index 000000000..c00bd5ccb --- /dev/null +++ b/src/app/shared/chat/messages/messages-routing.module.ts @@ -0,0 +1,21 @@ +import { NgModule } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; + +import { MessagesPage } from './messages.page'; + +const routes: Routes = [ + { + path: '', + component: MessagesPage + }, { + path: 'contacts', + loadChildren: () => import('./contacts/contacts.module').then( m => m.ContactsPageModule) + } + +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule], +}) +export class MessagesPageRoutingModule {} diff --git a/src/app/shared/chat/messages/messages.module.ts b/src/app/shared/chat/messages/messages.module.ts new file mode 100644 index 000000000..c933f79fe --- /dev/null +++ b/src/app/shared/chat/messages/messages.module.ts @@ -0,0 +1,22 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { FormsModule } from '@angular/forms'; + +import { IonicModule } from '@ionic/angular'; + +import { MessagesPageRoutingModule } from './messages-routing.module'; + +import { MessagesPage } from './messages.page'; +import { SharedModule } from 'src/app/shared/shared.module'; + +@NgModule({ + imports: [ + CommonModule, + FormsModule, + IonicModule, + SharedModule, + MessagesPageRoutingModule + ], + declarations: [MessagesPage] +}) +export class MessagesPageModule {} diff --git a/src/app/shared/chat/messages/messages.page.html b/src/app/shared/chat/messages/messages.page.html new file mode 100644 index 000000000..e8f28dce2 --- /dev/null +++ b/src/app/shared/chat/messages/messages.page.html @@ -0,0 +1,82 @@ + + +
+
+ +
+ {{users.name}} + +
+
+ +
+
+
+
+ +
+
+ Adicionar contacto +
+
+
+ + + + + + + + + +
+ + +
+
+ {{msg.u.name}} + {{msg._updatedAt | date: 'HH:mm' }} +
+
+ {{msg.msg}} +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/app/shared/chat/messages/messages.page.scss b/src/app/shared/chat/messages/messages.page.scss new file mode 100644 index 000000000..72515a71d --- /dev/null +++ b/src/app/shared/chat/messages/messages.page.scss @@ -0,0 +1,223 @@ +@import '~src/function.scss'; +.header-toolbar{ + --background:transparent; + --opacity: 1; + + .main-header{ + width: 100%; /* 400px */ + height: 100%; + font-family: Roboto; + border-top-left-radius: 25px; + border-top-right-radius: 25px; + background-color: #fff; + overflow:hidden; + padding: 30px 20px 0px 20px; + color:#000; + transform: translate3d(0, 1px, 0); + + .header-top{ + width: 360px; + margin: 0px auto; + overflow: auto; + padding: 0 !important; + background: #fff; + .middle{ + padding: 0!important; + float: left; + width: 280px; + margin: 2.5px 0 0 5px; + display: flex; + align-items: center; + + } + .right{ + padding: 0!important; + float: right; + font-size: 25px; + color: #0782c9; + margin: 5px 0 0 0; + } + } + .header-bottom{ + width: 310px; + overflow: auto; + margin: 0 auto; + + .header-bottom-icon{ + width: 30px; + font-size: 25px; + float: left; + padding: 2px; + + } + .header-bottom-contacts{ + width: 275px; + font-size: 15px; + color: #797979; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + float: left; + padding: 5px; + margin: 1px; + } + } + + .title{ + font-size: 25px; + overflow: auto; + float: left; + } + .div-icon{ + width: 40px; + float: right; + font-size: 35px; + overflow: auto; + padding: 1px; + } + .div-icon ion-icon{ + float: right; + padding-left: 20px; + } + } + } + ion-content{ + .welcome-text{ + /* width: 322px; */ + width: em(422px); + background: #ebebeb; + text-align: center; + font-size: 13px; + color: #797979; + padding: 10px; + margin: 0 auto; + line-height: 1.2rem; + margin: 20px 39px 25px; + border-radius: 8px; + } + .messages{ + font-size: 13px; + font-family: Roboto; + overflow: auto; + + //set scroll do bottom + position: absolute; + top: 0; + left: 0; + overflow-x: hidden; + overflow-y: auto; + width: 100%; + height: 100%; + word-wrap: break-word; + -webkit-overflow-scrolling: touch; + + + .incoming-true, .incoming-false{ + width: 305px; + padding: 15px 20px; + border-radius: 10px; + } + + .incoming-true{ + margin: 10px 75px 10px 20px; + background: #ebebeb; + float: left; + } + } + .incoming-false{ + margin: 10px 20px 10px 75px; + background: #e4f4fe; + float: right; + } + .title{ + display: inline; + color: #0782c9; + font-weight: bold; + margin-bottom: 5px; + + .time{ + color: #797979; + text-align: right; + float: right; + } + } + } + + ion-footer{ + .row{ + width: 380px; + margin: 0 auto; + } + + .chat-icon-options{ + display:block !important; + font-size: 25px; + float: right !important; + margin-top: 10px; + } + + .chat-icon-send{ + font-size: 45px; + margin: 0 auto; + margin-top: 4px; + } + + .type-message{ + display: flex; + border: 1px solid #ebebeb; + border-radius: 25px; + padding-left: 15px; + align-items: center; + overflow: auto; + + ion-textarea{ + margin: 0 !important; + align-self: center; + } + } + + } + + .text-color-blue{ + font-size: 15px; + color: #0782c9; + font-weight: 500; + letter-spacing: normal; + } + .user-status-online{ + display: block; + float: left; + color:#99e47b; + padding-left: 10px; + } + .online{ + display: block; + float: left; + color:#99e47b; + padding-left: 10px; +} +.offline{ + color:#cbced1; + display: block; + float: left; + padding-left: 10px; +} +.away{ +color:#ffd21f; +display: block; + float: left; + padding-left: 10px; +} +.invisible{ + color:#cbced1; + display: block; + float: left; + padding-left: 10px; +} +.busy{ + color:#f5455c; + display: block; + float: left; + padding-left: 10px; +} + \ No newline at end of file diff --git a/src/app/shared/chat/messages/messages.page.spec.ts b/src/app/shared/chat/messages/messages.page.spec.ts new file mode 100644 index 000000000..826962a23 --- /dev/null +++ b/src/app/shared/chat/messages/messages.page.spec.ts @@ -0,0 +1,24 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { IonicModule } from '@ionic/angular'; + +import { MessagesPage } from './messages.page'; + +describe('MessagesPage', () => { + let component: MessagesPage; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ MessagesPage ], + imports: [IonicModule.forRoot()] + }).compileComponents(); + + fixture = TestBed.createComponent(MessagesPage); + component = fixture.componentInstance; + fixture.detectChanges(); + })); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/shared/chat/new-group/contacts/contacts-routing.module.ts b/src/app/shared/chat/new-group/contacts/contacts-routing.module.ts new file mode 100644 index 000000000..fb8c7a5ea --- /dev/null +++ b/src/app/shared/chat/new-group/contacts/contacts-routing.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; + +import { ContactsPage } from './contacts.page'; + +const routes: Routes = [ + { + path: '', + component: ContactsPage + } +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule], +}) +export class ContactsPageRoutingModule {} diff --git a/src/app/shared/chat/new-group/contacts/contacts.module.ts b/src/app/shared/chat/new-group/contacts/contacts.module.ts new file mode 100644 index 000000000..13749fd57 --- /dev/null +++ b/src/app/shared/chat/new-group/contacts/contacts.module.ts @@ -0,0 +1,22 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { FormsModule } from '@angular/forms'; + +import { IonicModule } from '@ionic/angular'; + +import { ContactsPageRoutingModule } from './contacts-routing.module'; + +import { ContactsPage } from './contacts.page'; +import { SharedModule } from 'src/app/shared/shared.module'; + +@NgModule({ + imports: [ + CommonModule, + FormsModule, + IonicModule, + SharedModule, + ContactsPageRoutingModule + ], + declarations: [ContactsPage] +}) +export class ContactsPageModule {} diff --git a/src/app/shared/chat/new-group/contacts/contacts.page.html b/src/app/shared/chat/new-group/contacts/contacts.page.html new file mode 100644 index 000000000..5120198ad --- /dev/null +++ b/src/app/shared/chat/new-group/contacts/contacts.page.html @@ -0,0 +1,53 @@ + + +
+
+
+ +
+
+ Contactos +
+ +
+
+ + +
+ +
+ + + + + + + + + +
+ + + + + +
+ {{header}} +
+ +
+ +

{{user.first}} {{user.last}}

+ +
+ + + +
+ + + diff --git a/src/app/shared/chat/new-group/contacts/contacts.page.scss b/src/app/shared/chat/new-group/contacts/contacts.page.scss new file mode 100644 index 000000000..c97008f82 --- /dev/null +++ b/src/app/shared/chat/new-group/contacts/contacts.page.scss @@ -0,0 +1,127 @@ + +.header-toolbar{ + --background:transparent; + --opacity: 1; + + .main-header{ + width: 100%; /* 400px */ + height: 100%; + font-family: Roboto; + border-top-left-radius: 25px; + border-top-right-radius: 25px; + background-color: #fff; + overflow:hidden; + padding: 30px 20px 0px 20px; + color:#000; + transform: translate3d(0, 1px, 0); + + .div-icon{ + width: 40px; + float: right; + font-size: 35px; + overflow: auto; + padding: 1px; + } + .div-icon ion-icon{ + float: right; + padding-left: 20px; + } + .title-content{ + width: 360px; + margin: 0px auto; + overflow: auto; + padding: 0 !important; + } + + .back-icon{ + width: 37px; + float: left; + font-size: 35px; + overflow: auto; + + } + .div-title{ + width: 221px; + padding: 0!important; + float: left; + margin: 2.5px 0 0 5px; + } + .title{ + font-size: 25px; + } + } +} +.toolbar-search{ + --padding-top:0 !important; + --padding-bottom:0 !important; + --padding-start:0 !important; + --padding-end:0 !important; + + .search{ + border: 1px solid #ebebeb; + margin: 5px 20px 5px 20px; + border-radius: 5px; + } + .search ion-searchbar{ + /* border: 1px solid green; */ + width: 100%; + margin: 0 !important; + padding: 0 !important; + --border-radius: 5px; + --box-shadow: none; + overflow: auto; + --icon-color:#0d89d1; + } + +} +ion-content{ + --background:transparent; +} +.main-content{ + width: 100%; + height: 100%; + font-family: Roboto; + margin: 0 auto; + background-color: #fff; + overflow:auto; + padding: 0 0 0 0; + + .item-divider{ + background: #ebebeb; + font-size: 15px; + margin: 10px 0 10px 0; + padding:5px 0 5px 20px; + + } + + .item-checkbox{ + display: flex; + margin: 10px 20px 10px 20px !important; + overflow: auto; + align-items: center; + + } + + .item-checkbox ion-checkbox{ + --border-color: #0d89d1; + --background-checked:#0d89d1; + float: left; + } + + .item-checkbox p{ + display: block; + margin: 0 !important; + width: 330px; + padding-left: 10px; + font-size: 15px; + color: #0d89d1; + float: left; + } + .item-checkbox ion-icon{ + font-size: 10px; + float: left; + color:#99e47b; + margin-left: 10px; + } + } + diff --git a/src/app/shared/chat/new-group/contacts/contacts.page.spec.ts b/src/app/shared/chat/new-group/contacts/contacts.page.spec.ts new file mode 100644 index 000000000..8f263232b --- /dev/null +++ b/src/app/shared/chat/new-group/contacts/contacts.page.spec.ts @@ -0,0 +1,24 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { IonicModule } from '@ionic/angular'; + +import { ContactsPage } from './contacts.page'; + +describe('ContactsPage', () => { + let component: ContactsPage; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ContactsPage ], + imports: [IonicModule.forRoot()] + }).compileComponents(); + + fixture = TestBed.createComponent(ContactsPage); + component = fixture.componentInstance; + fixture.detectChanges(); + })); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/shared/chat/new-group/contacts/contacts.page.ts b/src/app/shared/chat/new-group/contacts/contacts.page.ts new file mode 100644 index 000000000..b2d114651 --- /dev/null +++ b/src/app/shared/chat/new-group/contacts/contacts.page.ts @@ -0,0 +1,152 @@ +import { HttpClient, HttpHeaders } from '@angular/common/http'; +import { Component, OnInit } from '@angular/core'; +import { ModalController } from '@ionic/angular'; +import { GroupMessagesPage } from '../../group-messages/group-messages.page'; + +@Component({ + selector: 'app-contacts', + templateUrl: './contacts.page.html', + styleUrls: ['./contacts.page.scss'], +}) +export class ContactsPage implements OnInit { + showLoader: boolean; + users = []; + + contact: string[] = [" Ana M.", "Andre F.", "Bruno G.", "Catarina T", "Tiago"]; + + headers: HttpHeaders; + options:any; + + contacts: Contact[] = [ + { + first: 'Ana', + last: 'Manuel', + url: 'https://randomuser.me/api/portraits/med/women/54.jpg', + }, + { + first: 'Abdullah', + last: 'Hill', + url: 'https://randomuser.me/api/portraits/med/women/54.jpg', + }, + { + first: 'Batur', + last: 'Oymen', + url: 'https://randomuser.me/api/portraits/med/women/54.jpg', + }, + { + first: 'Bianca', + last: 'Costa', + url: 'https://randomuser.me/api/portraits/med/women/54.jpg', + }, + { + first: 'Zaya', + last: 'Mary', + url: 'https://randomuser.me/api/portraits/med/women/54.jpg', + }, + { + first: 'Tiago', + last: 'Kayaya', + url: 'https://randomuser.me/api/portraits/med/women/54.jpg', + } +]; + + constructor( + private modalController: ModalController, + private http: HttpClient, + ) + { + this.headers = new HttpHeaders(); + this.headers = this.headers.set('Access-Control-Allow-Origin' , '*'); + this.headers = this.headers.set('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, PUT'); + this.headers = this.headers.set('Accept','application/json'); + this.headers = this.headers.set('content-type','application/json'); + + + } + + ngOnInit() { + this.loadUsers(); + + } + + loadUsers(){ + this.options = { + headers: this.headers, + }; + /* this.http.get('https://randomuser.me/api/?results=100', this.options) + .subscribe(res => { + this.users = res['results'].sort((a,b) => { + if(a.name.first < b.name.first){ + return -1; + } + if(a.name.first > b.name.first){ + return 1; + } + return 0; + }); + console.log(res); + console.log(this.users); + }); */ + this.users = this.contacts.sort((a,b) => { + if(a.first < b.first){ + return -1; + } + if(a.first > b.first){ + return 1; + } + return 0; + }); + } + + separateLetter(record, recordIndex, records){ + /* if(recordIndex == 0){ + return record.name.first[0]; + } + + let first_prev = records[recordIndex - 1].name.first[0]; + let first_current = record.name.first[0]; + + if(first_prev != first_current){ + return first_current; + } + return null; */ + if(recordIndex == 0){ + return record.first[0]; + } + + let first_prev = records[recordIndex - 1].first[0]; + let first_current = record.first[0]; + + if(first_prev != first_current){ + return first_current; + } + return null; + } + + doRefresh(event){ + + } + close(){ + this.modalController.dismiss(); + } + onChange(event){ + + } + clicked(){ + console.log('clicked'); + + } + async groupMessages(){ + const modal = await this.modalController.create({ + component: GroupMessagesPage, + componentProps: {}, + cssClass: 'contacts', + backdropDismiss: false + }); + + await modal.present(); + + modal.onDidDismiss(); + } + +} diff --git a/src/app/shared/chat/new-group/group-chat/group-chat-routing.module.ts b/src/app/shared/chat/new-group/group-chat/group-chat-routing.module.ts new file mode 100644 index 000000000..d88c349d7 --- /dev/null +++ b/src/app/shared/chat/new-group/group-chat/group-chat-routing.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; + +import { GroupChatPage } from './group-chat.page'; + +const routes: Routes = [ + { + path: '', + component: GroupChatPage + } +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule], +}) +export class GroupChatPageRoutingModule {} diff --git a/src/app/shared/chat/new-group/group-chat/group-chat.module.ts b/src/app/shared/chat/new-group/group-chat/group-chat.module.ts new file mode 100644 index 000000000..a86458890 --- /dev/null +++ b/src/app/shared/chat/new-group/group-chat/group-chat.module.ts @@ -0,0 +1,22 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { FormsModule } from '@angular/forms'; + +import { IonicModule } from '@ionic/angular'; + +import { GroupChatPageRoutingModule } from './group-chat-routing.module'; + +import { GroupChatPage } from './group-chat.page'; +import { SharedModule } from 'src/app/shared/shared.module'; + +@NgModule({ + imports: [ + CommonModule, + FormsModule, + IonicModule, + SharedModule, + GroupChatPageRoutingModule + ], + declarations: [GroupChatPage] +}) +export class GroupChatPageModule {} diff --git a/src/app/shared/chat/new-group/group-chat/group-chat.page.html b/src/app/shared/chat/new-group/group-chat/group-chat.page.html new file mode 100644 index 000000000..4dfad122a --- /dev/null +++ b/src/app/shared/chat/new-group/group-chat/group-chat.page.html @@ -0,0 +1,17 @@ + + +
+
+ +
+ Novo Grupo +
+ +
+
+ + + + + + diff --git a/src/app/shared/chat/new-group/group-chat/group-chat.page.scss b/src/app/shared/chat/new-group/group-chat/group-chat.page.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/app/shared/chat/new-group/group-chat/group-chat.page.spec.ts b/src/app/shared/chat/new-group/group-chat/group-chat.page.spec.ts new file mode 100644 index 000000000..641898e82 --- /dev/null +++ b/src/app/shared/chat/new-group/group-chat/group-chat.page.spec.ts @@ -0,0 +1,24 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { IonicModule } from '@ionic/angular'; + +import { GroupChatPage } from './group-chat.page'; + +describe('GroupChatPage', () => { + let component: GroupChatPage; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ GroupChatPage ], + imports: [IonicModule.forRoot()] + }).compileComponents(); + + fixture = TestBed.createComponent(GroupChatPage); + component = fixture.componentInstance; + fixture.detectChanges(); + })); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/shared/chat/new-group/group-chat/group-chat.page.ts b/src/app/shared/chat/new-group/group-chat/group-chat.page.ts new file mode 100644 index 000000000..c34b5eec7 --- /dev/null +++ b/src/app/shared/chat/new-group/group-chat/group-chat.page.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-group-chat', + templateUrl: './group-chat.page.html', + styleUrls: ['./group-chat.page.scss'], +}) +export class GroupChatPage implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/app/shared/chat/new-group/new-group-routing.module.ts b/src/app/shared/chat/new-group/new-group-routing.module.ts new file mode 100644 index 000000000..42b9b7e24 --- /dev/null +++ b/src/app/shared/chat/new-group/new-group-routing.module.ts @@ -0,0 +1,25 @@ +import { NgModule } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; + +import { NewGroupPage } from './new-group.page'; + +const routes: Routes = [ + { + path: '', + component: NewGroupPage + }, + { + path: 'contacts', + loadChildren: () => import('./contacts/contacts.module').then( m => m.ContactsPageModule) + }, + { + path: 'group-chat', + loadChildren: () => import('./group-chat/group-chat.module').then( m => m.GroupChatPageModule) + } +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule], +}) +export class NewGroupPageRoutingModule {} diff --git a/src/app/shared/chat/new-group/new-group.module.ts b/src/app/shared/chat/new-group/new-group.module.ts new file mode 100644 index 000000000..97006324c --- /dev/null +++ b/src/app/shared/chat/new-group/new-group.module.ts @@ -0,0 +1,22 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { FormsModule } from '@angular/forms'; + +import { IonicModule } from '@ionic/angular'; + +import { NewGroupPageRoutingModule } from './new-group-routing.module'; + +import { NewGroupPage } from './new-group.page'; +import { SharedModule } from 'src/app/shared/shared.module'; + +@NgModule({ + imports: [ + CommonModule, + FormsModule, + IonicModule, + SharedModule, + NewGroupPageRoutingModule + ], + declarations: [NewGroupPage] +}) +export class NewGroupPageModule {} diff --git a/src/app/shared/chat/new-group/new-group.page.html b/src/app/shared/chat/new-group/new-group.page.html new file mode 100644 index 000000000..b53fdda69 --- /dev/null +++ b/src/app/shared/chat/new-group/new-group.page.html @@ -0,0 +1,39 @@ + + +
+
+
+ +
+
+ Novo Grupo +
+ +
+
+ + + + +
+
+ +
+
+ + Grupo Ultra-secreto +
+ +
+
+
+ +
+
+ +
+
+
+ +
+ diff --git a/src/app/shared/chat/new-group/new-group.page.scss b/src/app/shared/chat/new-group/new-group.page.scss new file mode 100644 index 000000000..428f62e08 --- /dev/null +++ b/src/app/shared/chat/new-group/new-group.page.scss @@ -0,0 +1,151 @@ +ion-content{ + --background:transparent; +} +.header-toolbar{ + --background:transparent; + --opacity: 1; +} +.div-top-header{ + width: 400px; + margin: 0 auto; + background-color: #0782c9; + overflow: auto; + padding-top: 15px; + border: 0!important; + + .div-search{ + font-size: 45px; + float: left; + margin: 0 0 0 10px + } + .div-logo{ + background: transparent; + width: 140px; + margin: 5px 0 0px 71px; + float: left; + } + .div-logo img{ + width: 100%; + } + .div-profile{ + font-size: 45px; + float: right; + margin-right: 10px; + } + + } + .main-header{ + width: 100%; /* 400px */ + height: 100%; + font-family: Roboto; + border-top-left-radius: 25px; + border-top-right-radius: 25px; + background-color: #fff; + overflow:hidden; + padding: 30px 20px 0px 20px; + color:#000; + transform: translate3d(0, 1px, 0); + + .title-content{ + width: 360px; + margin: 0px auto; + overflow: auto; + padding: 0 !important; + background: #fff; + + .left{ + width: 37px; + float: left; + font-size: 35px; + overflow: auto; + } + .middle{ + padding: 0!important; + float: left; + width: 221px; + margin: 2.5px 0 0 5px; + } + .right{ + padding: 0!important; + float: right; + font-size: 15px; + color: #0782c9; + margin: 8px 0 0 5px; + } + } + + .title{ + font-size: 25px; + } + .div-icon{ + width: 40px; + float: right; + font-size: 35px; + overflow: auto; + padding: 1px; + } + .div-icon ion-icon{ + float: right; + padding-left: 20px; + } + + + } + .main-content{ + width: 100%; /* 400px */ + height: 100%; + font-family: Roboto; + margin: 0 auto; + background-color: #fff; + overflow:auto; + padding: 15px 20px 0 20px; + + .item-container{ + width: 360px; + margin: 15px auto; + border: 1px solid #ebebeb; + border-radius: 5px; + padding-left: 10px; + } + + .item-container-no-border{ + display: flex; + width: 360px; + margin: 25px auto; + border-radius: 5px; + align-items: center; + } + + .item-container-no-border ion-label{ + padding-left: 10px; + font-size: 12px; + color: #000; + } + } + + .container-div{ + margin-bottom: 15px; + overflow: auto; + + .ion-item-class-2{ + width: 360px; + margin: 0px auto; + + .ion-icon-class{ + width: 45px; + height: 45px; + float: left; + padding: 10px; + font-size: 25px; + } + } + .ion-input-class{ + width: 315px; + height: 45px; + border: 1px solid #ebebeb; + border-radius: 5px; + padding-left: 5px; + padding-right: 10px; + float: left; + } + } diff --git a/src/app/shared/chat/new-group/new-group.page.spec.ts b/src/app/shared/chat/new-group/new-group.page.spec.ts new file mode 100644 index 000000000..2cb166ecd --- /dev/null +++ b/src/app/shared/chat/new-group/new-group.page.spec.ts @@ -0,0 +1,24 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { IonicModule } from '@ionic/angular'; + +import { NewGroupPage } from './new-group.page'; + +describe('NewGroupPage', () => { + let component: NewGroupPage; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ NewGroupPage ], + imports: [IonicModule.forRoot()] + }).compileComponents(); + + fixture = TestBed.createComponent(NewGroupPage); + component = fixture.componentInstance; + fixture.detectChanges(); + })); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/shared/chat/new-group/new-group.page.ts b/src/app/shared/chat/new-group/new-group.page.ts new file mode 100644 index 000000000..6774503b1 --- /dev/null +++ b/src/app/shared/chat/new-group/new-group.page.ts @@ -0,0 +1,187 @@ +import { analyzeAndValidateNgModules } from '@angular/compiler'; +import { Component, OnInit } from '@angular/core'; +import { ModalController, NavParams, PickerController, PopoverController } from '@ionic/angular'; +import { GroupDurationPage } from 'src/app/shared/popover/group-duration/group-duration.page'; +import { GroupContactsPage } from '../group-messages/group-contacts/group-contacts.page'; + +@Component({ + selector: 'app-new-group', + templateUrl: './new-group.page.html', + styleUrls: ['./new-group.page.scss'], +}) +export class NewGroupPage implements OnInit { + isGroupCreated:boolean; + showLoader: boolean; + displayDuration: any; + showDuration: boolean; + selectedDuration = ['','','']; + groupName:string; + + constructor( + private pickerController: PickerController, + private popoverController: PopoverController, + private modalController: ModalController, + private navParams: NavParams, + ) + { + this.isGroupCreated = false; + this.groupName = this.navParams.get('name'); + } + + ngOnInit() { + + } + _ionChange(event){ + this.showDuration = event.detail.checked; + } + close(){ + this.modalController.dismiss(); + } + + async addContacts(){ + this.close(); + + let name = this.groupName.split(' ').join('-'); + console.log(name); + + const modal = await this.modalController.create({ + component: GroupContactsPage, + componentProps: { + isCreated:this.isGroupCreated, + name: name, + duration:'', + }, + cssClass: 'contacts', + backdropDismiss: false + }); + + await modal.present(); + modal.onDidDismiss(); + } + + async setDuration(ev: any) { + const popover = await this.popoverController.create({ + component: GroupDurationPage, + cssClass: 'group-duration', + event: ev, + translucent: true + }); + return await popover.present(); + } + + async showPicker(){ + const picker = await this.pickerController.create({ + cssClass: '', + buttons: [ + { + text: 'Cancelar', role: 'cancel', cssClass: 'btn-cancel' + }, + { + text: 'Ok', + cssClass: 'btn-cancel', + handler:(value:any)=>{ + console.log('button done pressed'); + this.selectedDuration = [ + value.days.value, + value.hours.value, + value.minutes.value, + ] + console.log(this.selectedDuration); + if(value.days.value != null && value.hours.value != null && value.minutes.value != null){ + if(value.days.value > 0){ + if(value.days.value == 1){ + if(value.hours.value == 1){ + this.displayDuration = value.days.value + " day " + + value.hours.value + " hora " + + value.minutes.value + " minutos"; + } + else{ + this.displayDuration = value.days.value + " days " + + value.hours.value + " horas " + + value.minutes.value + " minutos"; + } + } + else{ + if(value.hours.value == 1){ + this.displayDuration = value.days.value + " days " + + value.hours.value + " hora " + + value.minutes.value + " minutos"; + } + else{ + this.displayDuration = value.days.value + " days " + + value.hours.value + " horas " + + value.minutes.value + " minutos"; + } + } + } + else{ + if(value.hours.value == 1){ + this.displayDuration = value.hours.value + " hora " + + value.minutes.value + " minutos"; + } + else{ + this.displayDuration = value.hours.value + " horas " + + value.minutes.value + " minutos"; + } + } + } + }, + }, + ], + columns: [ + { + name: 'days', + prefix: 'Dias', + options: [ + { text: '0', value: 0 }, + { text: '1', value: 1 }, + { text: '2', value: 2 }, + { text: '3', value: 3 }, + { text: '4', value: 4 }, + ] + }, + { + name: 'hours', + prefix: 'Horas', + options: [ + { text: '0', value: 0 }, + { text: '1', value: 1 }, + { text: '2', value: 2 }, + { text: '3', value: 3 }, + { text: '4', value: 4 }, + { text: '5', value: 5 }, + { text: '6', value: 6 }, + { text: '7', value: 7 }, + { text: '8', value: 8 }, + ] + }, + { + name: 'minutes', + prefix: 'Minutos', + selectedIndex: 3, + options: [ + { text: '0', value: 0 }, + { text: '5', value: 5 }, + { text: '10', value: 10 }, + { text: '15', value: 15 }, + { text: '20', value: 20 }, + { text: '25', value: 25 }, + { text: '30', value: 30 }, + { text: '35', value: 35 }, + { text: '45', value: 45 }, + { text: '50', value: 50 }, + { text: '55', value: 55 }, + ] + } + ] + }); + await picker.present(); + picker.onDidDismiss().then(async data =>{ + let day = await picker.getColumn('days'); + let hour = await picker.getColumn('hours'); + let minutes = await picker.getColumn('minutes'); + }); + + } + +} diff --git a/src/global.scss b/src/global.scss index 0bf20164c..665aa4d4b 100644 --- a/src/global.scss +++ b/src/global.scss @@ -315,3 +315,16 @@ td.monthview-secondary-with-event, td.monthview-secondary-with-event[_ngcontent- box-shadow: none !important; } } + +.chat-mobile-modal-to-Desktop{ + top: 75px; + left: 340px; + ion-backdrop{ + display: none; + } + .modal-wrapper{ + width: 100%; + height: 100%; + box-shadow: none !important; + } +}