mirror of
https://code.equilibrium.co.ao/ITO/doneit-web.git
synced 2026-04-19 04:57:52 +00:00
add new components for chat in shared
This commit is contained in:
tiago.kayaya
@@ -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 {}
|
||||
@@ -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 {}
|
||||
@@ -0,0 +1,59 @@
|
||||
<ion-header class="ion-no-border">
|
||||
<ion-toolbar class="header-toolbar">
|
||||
<div class="main-header">
|
||||
<div class="title-content">
|
||||
<div class="back-icon">
|
||||
<ion-icon (click)="close()" slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
|
||||
</div>
|
||||
<div class="div-title">
|
||||
<ion-label class="title">Contactos</ion-label>
|
||||
</div>
|
||||
<app-btn-seguinte (click)="createGroup()"></app-btn-seguinte>
|
||||
</div>
|
||||
</div>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar class="toolbar-search">
|
||||
<div class="search">
|
||||
<ion-searchbar debounce="500" (ionChange)="onChange($event)" placeholder="Pesquisar por cantacto" ></ion-searchbar>
|
||||
</div>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content>
|
||||
<ion-refresher name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
|
||||
<ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
|
||||
<ion-refresher-content>
|
||||
</ion-refresher-content>
|
||||
</ion-refresher>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="main-content">
|
||||
<div *ngIf="members">
|
||||
<ion-label class="members-label">Contactos selecção:</ion-label>
|
||||
<ion-list class="members-list" *ngFor="let user of members">
|
||||
<div class="members-checkbox">
|
||||
<ion-checkbox checked color="primary"></ion-checkbox>
|
||||
<p>{{user.name}}</p>
|
||||
<ion-icon name="ellipse"></ion-icon>
|
||||
</div>
|
||||
</ion-list>
|
||||
</div>
|
||||
|
||||
<ion-virtual-scroll [items]="users | filter:textSearch: 'name'" approxItemHeight="70px" [headerFn]="separateLetter">
|
||||
|
||||
<div class="item-divider" *virtualHeader="let header">
|
||||
<ion-label>{{header}}</ion-label>
|
||||
</div>
|
||||
|
||||
<div *virtualItem="let user" class="item-checkbox">
|
||||
<ion-checkbox (ionChange)="selectedContact(user)" color="primary"></ion-checkbox>
|
||||
<p>{{user.name}}</p>
|
||||
<ion-icon name="ellipse"></ion-icon>
|
||||
</div>
|
||||
|
||||
</ion-virtual-scroll>
|
||||
|
||||
</div>
|
||||
</ion-content>
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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<GroupContactsPage>;
|
||||
|
||||
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();
|
||||
});
|
||||
});
|
||||
@@ -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();
|
||||
}
|
||||
|
||||
}
|
||||
@@ -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],
|
||||
})
|
||||
@@ -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 {}
|
||||
@@ -0,0 +1,76 @@
|
||||
<ion-header class="ion-no-border">
|
||||
<ion-toolbar class="header-toolbar">
|
||||
<div class="main-header">
|
||||
<div class="header-top">
|
||||
<app-btn-modal-dismiss></app-btn-modal-dismiss>
|
||||
<div class="middle">
|
||||
<ion-label class="title">{{roomName}}</ion-label>
|
||||
</div>
|
||||
<div class="right">
|
||||
<ion-icon (click)="openOptions()" src="assets/images/icons-menu.svg"></ion-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div (click)="addContacts()" class="header-bottom">
|
||||
<div class="header-bottom-icon">
|
||||
<ion-icon src="assets/icon/icons-user.svg"></ion-icon>
|
||||
</div>
|
||||
<div class="header-bottom-contacts">
|
||||
<ion-label *ngFor="let member of members" >
|
||||
{{member.name}},
|
||||
</ion-label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
|
||||
<ion-content>
|
||||
<ion-refresher name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
|
||||
<ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
|
||||
<ion-refresher-content>
|
||||
</ion-refresher-content>
|
||||
</ion-refresher>
|
||||
<div class="welcome-text">
|
||||
<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 *ngIf="msg.t != 'r'" class='incoming-{{msg.u.username!=loggedUser.me.username}}'>
|
||||
<div class="title">
|
||||
<ion-label>{{msg.u.name}}</ion-label>
|
||||
<span class="time">{{msg._updatedAt | date: 'HH:mm' }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<ion-label>{{msg.msg}}</ion-label>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="msg.t == 'r'" class="info-text">
|
||||
<ion-label>Alterou o assunto de para "{{msg.msg.split('-').join(' ')}}"</ion-label><br />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</ion-content>
|
||||
<ion-footer>
|
||||
<ion-toolbar>
|
||||
<ion-row align-items-center class="row">
|
||||
<ion-col size="1">
|
||||
<ion-label class="ion-no-padding" lines="none">
|
||||
<ion-icon (click)="openChatOptions()" class="chat-icon-options" src="assets/icon/icons-chat-options.svg"></ion-icon>
|
||||
</ion-label>
|
||||
</ion-col>
|
||||
<ion-col size="9">
|
||||
<ion-item class="ion-no-padding type-message" lines="none">
|
||||
<ion-textarea placeholder="Escrever uma mensagem" auto-grow class="message-input" rows="1" [(ngModel)]="message"></ion-textarea>
|
||||
<ion-icon slot="end" src="assets/icon/icons-chat-mic.svg"></ion-icon>
|
||||
</ion-item>
|
||||
</ion-col>
|
||||
<ion-col size="2">
|
||||
<!-- [disabled]="message === ''" -->
|
||||
<ion-label>
|
||||
<ion-icon (click)="sendMessage()" class="chat-icon-send" src="assets/icon/icons-chat-send.svg"></ion-icon>
|
||||
</ion-label>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-toolbar>
|
||||
</ion-footer>
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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<GroupMessagesPage>;
|
||||
|
||||
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();
|
||||
});
|
||||
});
|
||||
@@ -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();
|
||||
}
|
||||
*/
|
||||
|
||||
}
|
||||
@@ -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 {}
|
||||
@@ -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 {}
|
||||
@@ -0,0 +1,46 @@
|
||||
<ion-header class="ion-no-border">
|
||||
<ion-toolbar class="header-toolbar">
|
||||
<div class="main-header">
|
||||
<div class="title-content">
|
||||
<div class="back-icon">
|
||||
<ion-icon (click)="close()" slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
|
||||
</div>
|
||||
<div class="div-title">
|
||||
<ion-label class="title">Nova Conversa</ion-label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar class="toolbar-search">
|
||||
<div class="search">
|
||||
<ion-searchbar debounce="500" (ionChange)="onChange($event)" placeholder="Pesquisar por cantacto" ></ion-searchbar>
|
||||
</div>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content>
|
||||
<ion-refresher name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
|
||||
<ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
|
||||
<ion-refresher-content>
|
||||
</ion-refresher-content>
|
||||
</ion-refresher>
|
||||
<div class="main-content">
|
||||
|
||||
<ion-virtual-scroll [items]="users | filter:textSearch: 'name'" approxItemHeight="70px" [headerFn]="separateLetter">
|
||||
|
||||
<div class="item-divider" *virtualHeader="let header">
|
||||
<ion-label>{{header}}</ion-label>
|
||||
</div>
|
||||
|
||||
<div (click)="createRoom(user.username)" *virtualItem="let user" class="item-user">
|
||||
<p>{{user.name}}</p>
|
||||
<span class="icon">
|
||||
<ion-icon class="{{user.status}}" slot="end" name="ellipse"></ion-icon>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
|
||||
</ion-virtual-scroll>
|
||||
|
||||
</div>
|
||||
</ion-content>
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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<ContactsPage>;
|
||||
|
||||
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();
|
||||
});
|
||||
});
|
||||
@@ -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(); */
|
||||
}
|
||||
|
||||
}
|
||||
@@ -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],
|
||||
})
|
||||
@@ -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 {}
|
||||
@@ -0,0 +1,82 @@
|
||||
<ion-header class="ion-no-border">
|
||||
<ion-toolbar class="header-toolbar">
|
||||
<div class="main-header">
|
||||
<div class="header-top">
|
||||
<app-btn-modal-dismiss></app-btn-modal-dismiss>
|
||||
<div class="middle" *ngFor="let users of dmUsers">
|
||||
<ion-label class="title">{{users.name}}</ion-label>
|
||||
<span><ion-icon class="{{users.status}}" name="ellipse"></ion-icon></span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<ion-icon (click)="openMessagesOptions()" src="assets/images/icons-menu.svg"></ion-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-bottom" (click)="addContacts()">
|
||||
<div class="header-bottom-icon">
|
||||
<ion-icon src="assets/icon/icons-user.svg"></ion-icon>
|
||||
</div>
|
||||
<div class="header-bottom-contacts">
|
||||
<ion-label class="text-color-blue">Adicionar contacto</ion-label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content>
|
||||
<ion-refresher name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
|
||||
<ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
|
||||
<ion-refresher-content>
|
||||
</ion-refresher-content>
|
||||
</ion-refresher>
|
||||
<div class="messages" #scrollMe>
|
||||
<!-- <ion-infinite-scroll position="top" threshold="25%" (ionInfinite)="loadMoreMessages($event)">
|
||||
<ion-infinite-scroll-content loadindSpiniter="crescent" loadingText="Carregando...">
|
||||
|
||||
</ion-infinite-scroll-content>
|
||||
</ion-infinite-scroll> -->
|
||||
<!-- <div class="incoming">
|
||||
<div class="title">
|
||||
<ion-label>Secretário Assuntos sociais</ion-label>
|
||||
<span class="time">14:23</span>
|
||||
</div>
|
||||
<div>
|
||||
<img src='assets/images/1.jpg' tappable>
|
||||
<ion-label hidden >Investidura Filipe Nyusi</ion-label>
|
||||
</div>
|
||||
</div> -->
|
||||
<div *ngFor="let msg of messages" class='incoming-{{msg.u.username!=loggedUser.me.username}}'>
|
||||
<div class="title">
|
||||
<ion-label>{{msg.u.name}}</ion-label>
|
||||
<span class="time">{{msg._updatedAt | date: 'HH:mm' }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<ion-label>{{msg.msg}}</ion-label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</ion-content>
|
||||
<ion-footer>
|
||||
<ion-toolbar>
|
||||
<ion-row align-items-center class="row">
|
||||
<ion-col size="1">
|
||||
<ion-label class="ion-no-padding" lines="none">
|
||||
<ion-icon (click)="openChatOptions()" class="chat-icon-options" src="assets/icon/icons-chat-options.svg"></ion-icon>
|
||||
</ion-label>
|
||||
</ion-col>
|
||||
<ion-col size="9">
|
||||
<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>
|
||||
<ion-icon slot="end" src="assets/icon/icons-chat-mic.svg"></ion-icon>
|
||||
</ion-item>
|
||||
</ion-col>
|
||||
<ion-col size="2">
|
||||
<!-- [disabled]="message === ''" -->
|
||||
<ion-label>
|
||||
<ion-icon (click)="sendMessage()" class="chat-icon-send" src="assets/icon/icons-chat-send.svg"></ion-icon>
|
||||
</ion-label>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-toolbar>
|
||||
</ion-footer>
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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<MessagesPage>;
|
||||
|
||||
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();
|
||||
});
|
||||
});
|
||||
@@ -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 {}
|
||||
@@ -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 {}
|
||||
@@ -0,0 +1,53 @@
|
||||
<ion-header class="ion-no-border">
|
||||
<ion-toolbar class="header-toolbar">
|
||||
<div class="main-header">
|
||||
<div class="title-content">
|
||||
<div class="back-icon">
|
||||
<ion-icon (click)="close()" slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
|
||||
</div>
|
||||
<div class="div-title">
|
||||
<ion-label class="title">Contactos</ion-label>
|
||||
</div>
|
||||
<app-btn-seguinte (click)="groupMessages()"></app-btn-seguinte>
|
||||
</div>
|
||||
</div>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar class="toolbar-search">
|
||||
<div class="search">
|
||||
<ion-searchbar (ionChange)="onChange($event)" placeholder="Pesquisar por cantacto" ></ion-searchbar>
|
||||
</div>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content>
|
||||
<ion-refresher name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
|
||||
<ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
|
||||
<ion-refresher-content>
|
||||
</ion-refresher-content>
|
||||
</ion-refresher>
|
||||
<div class="main-content">
|
||||
|
||||
<!-- <ion-list>
|
||||
<ion-item *ngFor="let user of searchedItem">
|
||||
{{user.name}}
|
||||
</ion-item>
|
||||
</ion-list> -->
|
||||
|
||||
<ion-virtual-scroll [items]="users" approxItemHeight="70px" [headerFn]="separateLetter">
|
||||
|
||||
<div class="item-divider" *virtualHeader="let header">
|
||||
<ion-label>{{header}}</ion-label>
|
||||
</div>
|
||||
|
||||
<div *virtualItem="let user" class="item-checkbox">
|
||||
<ion-checkbox color="primary"></ion-checkbox>
|
||||
<p>{{user.first}} {{user.last}}</p>
|
||||
<ion-icon name="ellipse"></ion-icon>
|
||||
</div>
|
||||
|
||||
</ion-virtual-scroll>
|
||||
|
||||
</div>
|
||||
</ion-content>
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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<ContactsPage>;
|
||||
|
||||
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();
|
||||
});
|
||||
});
|
||||
@@ -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();
|
||||
}
|
||||
|
||||
}
|
||||
@@ -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 {}
|
||||
@@ -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 {}
|
||||
@@ -0,0 +1,17 @@
|
||||
<ion-header class="ion-no-border">
|
||||
<ion-toolbar class="header-toolbar">
|
||||
<div class="main-header">
|
||||
<div class="title-content">
|
||||
<app-btn-modal-dismiss></app-btn-modal-dismiss>
|
||||
<div class="middle">
|
||||
<ion-label class="title">Novo Grupo</ion-label>
|
||||
</div>
|
||||
<app-btn-seguinte></app-btn-seguinte>
|
||||
</div>
|
||||
</div>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content>
|
||||
|
||||
</ion-content>
|
||||
@@ -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<GroupChatPage>;
|
||||
|
||||
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();
|
||||
});
|
||||
});
|
||||
@@ -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() {
|
||||
}
|
||||
|
||||
}
|
||||
@@ -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 {}
|
||||
@@ -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 {}
|
||||
@@ -0,0 +1,39 @@
|
||||
<ion-header class="ion-no-border">
|
||||
<ion-toolbar class="header-toolbar">
|
||||
<div class="main-header">
|
||||
<div class="title-content">
|
||||
<div class="left">
|
||||
<ion-icon (click)="close()" slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
|
||||
</div>
|
||||
<div class="middle">
|
||||
<ion-label class="title">Novo Grupo</ion-label>
|
||||
</div>
|
||||
<app-btn-seguinte *ngIf="groupName" (click)="addContacts()"></app-btn-seguinte>
|
||||
</div>
|
||||
</div>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content>
|
||||
<div class="main-content">
|
||||
<div class="item-container">
|
||||
<ion-input [(ngModel)]="groupName" placeholder="Título"></ion-input>
|
||||
</div>
|
||||
<div *ngIf="false" class="item-container-no-border">
|
||||
<ion-checkbox (ionChange)="_ionChange($event)" color="primary"></ion-checkbox>
|
||||
<ion-label>Grupo Ultra-secreto</ion-label>
|
||||
</div>
|
||||
|
||||
<div *ngIf="showDuration" class="container-div">
|
||||
<div class="ion-item-class-2">
|
||||
<div class="ion-icon-class">
|
||||
<ion-icon slot="start" src="assets/images/icons-duration.svg"></ion-icon>
|
||||
</div>
|
||||
<div class="ion-input-class">
|
||||
<ion-input (click)="showPicker()" [(ngModel)]="displayDuration" placeholder="Duração"></ion-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</ion-content>
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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<NewGroupPage>;
|
||||
|
||||
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();
|
||||
});
|
||||
});
|
||||
@@ -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');
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user