mirror of
https://code.equilibrium.co.ao/ITO/doneit-web.git
synced 2026-04-18 20:47:54 +00:00
implement change group name
This commit is contained in:
tiago.kayaya
@@ -0,0 +1,17 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
import { EditGroupPage } from './edit-group.page';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: EditGroupPage
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule],
|
||||
})
|
||||
export class EditGroupPageRoutingModule {}
|
||||
@@ -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 { EditGroupPageRoutingModule } from './edit-group-routing.module';
|
||||
|
||||
import { EditGroupPage } from './edit-group.page';
|
||||
import { SharedModule } from 'src/app/shared/shared.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
IonicModule,
|
||||
SharedModule,
|
||||
EditGroupPageRoutingModule
|
||||
],
|
||||
declarations: [EditGroupPage]
|
||||
})
|
||||
export class EditGroupPageModule {}
|
||||
@@ -0,0 +1,40 @@
|
||||
<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">Alterar Nome do grupo</ion-label>
|
||||
</div>
|
||||
<app-btn-seguinte *ngIf="groupName" (click)="changeGroupName()"></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 { EditGroupPage } from './edit-group.page';
|
||||
|
||||
describe('EditGroupPage', () => {
|
||||
let component: EditGroupPage;
|
||||
let fixture: ComponentFixture<EditGroupPage>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ EditGroupPage ],
|
||||
imports: [IonicModule.forRoot()]
|
||||
}).compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(EditGroupPage);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
}));
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,170 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { ModalController, NavParams, PickerController } from '@ionic/angular';
|
||||
import { ChatService } from 'src/app/services/chat.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-edit-group',
|
||||
templateUrl: './edit-group.page.html',
|
||||
styleUrls: ['./edit-group.page.scss'],
|
||||
})
|
||||
export class EditGroupPage implements OnInit {
|
||||
showLoader: boolean;
|
||||
displayDuration: any;
|
||||
showDuration: boolean;
|
||||
selectedDuration = ['','',''];
|
||||
groupName:string;
|
||||
room:any;
|
||||
|
||||
constructor(
|
||||
private modalController: ModalController,
|
||||
private pickerController: PickerController,
|
||||
private chatService: ChatService,
|
||||
private navParams: NavParams,
|
||||
) {
|
||||
this.room = this.navParams.get('room');
|
||||
this.groupName = this.room.name.split('-').join(' ');
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
console.log(this.room);
|
||||
}
|
||||
|
||||
close(){
|
||||
this.modalController.dismiss();
|
||||
}
|
||||
|
||||
changeGroupName(){
|
||||
if(this.groupName.trim().length > 1){
|
||||
let name = this.groupName.split(' ').join('-');
|
||||
let body = {
|
||||
"roomId": this.room._id,
|
||||
"name": name,
|
||||
}
|
||||
this.chatService.renameGroup(body).subscribe(res=>{
|
||||
console.log(res);
|
||||
});
|
||||
this.close();
|
||||
}
|
||||
else{
|
||||
console.log("Invalid name!");
|
||||
}
|
||||
}
|
||||
_ionChange(event){
|
||||
this.showDuration = event.detail.checked;
|
||||
}
|
||||
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