add new owner feature uncompleted

This commit is contained in:
tiago.kayaya
2022-01-24 19:09:26 +01:00
parent e65b91ab08
commit c6ec2abc1f
11 changed files with 659 additions and 261 deletions
@@ -0,0 +1,17 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { SetRoomOwnerPage } from './set-room-owner.page';
const routes: Routes = [
{
path: '',
component: SetRoomOwnerPage
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class SetRoomOwnerPageRoutingModule {}
@@ -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 { SetRoomOwnerPageRoutingModule } from './set-room-owner-routing.module';
import { SetRoomOwnerPage } from './set-room-owner.page';
import { PipesModule } from 'src/app/pipes/pipes.module';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
PipesModule,
SetRoomOwnerPageRoutingModule
],
declarations: [SetRoomOwnerPage]
})
export class SetRoomOwnerPageModule {}
@@ -0,0 +1,44 @@
<ion-header class="ion-no-border">
<ion-toolbar class="header-toolbar">
<div class="main-header">
<div class="title-content width-100">
<div class="back-icon">
<button class="btn-no-color cursor-pointer" (click)="close()">
<ion-icon *ngIf="ThemeService.currentTheme == 'default' " slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' " slot="end" src='assets/images/theme/gov/icons-calendar-arrow-left.svg'></ion-icon>
</button>
</div>
<div class="div-title">
<ion-label class="title">Promover para Administrador</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 contacto" ></ion-searchbar>
</div>
</ion-toolbar>
</ion-header>
<ion-content>
<div class="main-content">
<ion-virtual-scroll [items]="members | 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">
<div class="cursor-pointer d-flex width-100" (click)="setRoomOwner(user)" (ionChange)="setRoomOwner(user)">
<p class="flex-1">{{user.name}}</p>
<ion-icon slot="end" class="{{user.status}}" name="ellipse"></ion-icon>
</div>
</div>
</ion-virtual-scroll>
</div>
</ion-content>
@@ -0,0 +1,164 @@
.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{
margin: 0px auto;
overflow: auto;
padding: 0 !important;
}
.back-icon{
width: 37px;
float: left;
font-size: 35px;
overflow: auto;
}
.div-title{
width: calc(100% - 45px);
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: var(--font-awesome);
}
}
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: 0px 20px 0px 20px !important;
overflow: auto;
align-items: center;
border-bottom: 1px solid #ebebeb;
}
.members-options{
margin: 0px 20px 0px 19px !important;
overflow: auto;
}
.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;
overflow: auto;
}
.members-checkbox ion-checkbox{
--border-color: var(--title-text-color);
--background-checked:var(--title-text-color);
float: left;
}
.item-checkbox ion-checkbox{
--border-color: var(--title-text-color);
--background-checked:var(--title-text-color);
float: left;
}
.item-checkbox p, .members-checkbox p{
display: block;
margin: 0 !important;
padding-left: 10px;
font-size: 15px;
color: var(--title-text-color);
float: left;
}
.item-checkbox ion-icon, .members-checkbox ion-icon{
font-size: 10px;
float: left;
color:#99e47b;
margin-left: 10px;
}
.online{
color:#99e47b !important;
}
.offline{
color:#cbced1 !important;
}
.away{
color:#ffd21f !important;
}
.invisible{
color:#cbced1 !important;
}
.busy{
color:#f5455c !important;
}
}
@@ -0,0 +1,24 @@
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { IonicModule } from '@ionic/angular';
import { SetRoomOwnerPage } from './set-room-owner.page';
describe('SetRoomOwnerPage', () => {
let component: SetRoomOwnerPage;
let fixture: ComponentFixture<SetRoomOwnerPage>;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [ SetRoomOwnerPage ],
imports: [IonicModule.forRoot()]
}).compileComponents();
fixture = TestBed.createComponent(SetRoomOwnerPage);
component = fixture.componentInstance;
fixture.detectChanges();
}));
it('should create', () => {
expect(component).toBeTruthy();
});
});
@@ -0,0 +1,80 @@
import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { ModalController, NavParams } from '@ionic/angular';
import { AuthService } from 'src/app/services/auth.service';
import { ChatService } from 'src/app/services/chat.service';
import { ThemeService } from 'src/app/services/theme.service'
import { ToastService } from 'src/app/services/toast.service';
@Component({
selector: 'app-set-room-owner',
templateUrl: './set-room-owner.page.html',
styleUrls: ['./set-room-owner.page.scss'],
})
export class SetRoomOwnerPage implements OnInit {
textSearch:string = "";
room:any;
members:any;
constructor(
private modalController: ModalController,
private http: HttpClient,
private chatService: ChatService,
private authService: AuthService,
private navParams: NavParams,
public ThemeService: ThemeService,
private toastService: ToastService,
) {
this.room = this.navParams.get('room');
this.members = this.navParams.get('members');
}
ngOnInit() {
console.log(this.room);
}
async close(){
this.modalController.dismiss();
}
onChange(event){
this.textSearch = event.detail.value;
}
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;
}
setRoomOwner(user:any){
console.log(user);
console.log(this.room);
let body = {
"roomId": this.room._id,
"userId": user._id
}
this.chatService.addGroupOwner(body).subscribe((res)=>{
console.log(res);
this.close();
}, (error) => {
this.toastService._badRequest('Não foi possível completar a ação, por favor tente novamente.');
});
}
}