checkbox is added, checklist for creating group

server/db/services/user.service.js

@@ -115,7 +115,6 @@ let getAllContacts = (user)=>{
  }
  else
  {
- // console.log('user found: ', user)
  resolve(data);
  }
  }
@@ -159,13 +158,20 @@ let deleteContact = (mobile, contact)=>{
  // console.log('contact found: ', user)
  if (err)
  reject(err);
- else
- resolve(data);
+ else{
+ // send modified contact list
+ getAllContacts(mobile)
+ .then(function (data) {
+ resolve(data)
+ }, function(err) {
+ reject(err);
+ })
+ }
  });
  }
-  });
-  });
- };
+ });
+ });
+};
 // export service
 service.ifRegistered = ifRegistered;
 service.createUser = createUser;

server/routes/chatRoutes.js

@@ -9,7 +9,7 @@ router.get('/userslist',(req, res)=>{
  .then(function (data) {
  res.status(200).json(data);
  }, function(err) {
- console.log(err);
+ // console.log(err);
  // registration failed
  res.status(400).json(err);
  })
@@ -26,7 +26,7 @@ router.post('/addContact',(req, res)=>{
  res.status(200).json(data); // ok
  }
  }, function(err) {
- console.log(err);
+ // console.log(err);
  res.status(400).json(err);
  });
 
@@ -38,7 +38,7 @@ router.post('/getallcontacts',(req, res)=>{
  .then(function (data) {
  res.status(200).json(data);
  }, function(err) {
- console.log(err);
+ // console.log(err);
  // registration failed
  res.status(400).json(err);
  })
@@ -51,7 +51,7 @@ router.post('/getcontact',(req, res)=>{
  .then(function (data) {
  res.status(200).json(data);
  }, function(err) {
- console.log(err);
+ // console.log(err);
  res.status(400).json(err);
  })
 
@@ -63,7 +63,7 @@ router.post('/deletecontact',(req, res)=>{
  .then(function (data) {
  res.status(200).json(data);
  }, function(err) {
- console.log(err);
+ // console.log(err);
  res.status(400).json(err);
  })
 

src/app/contacts/contacts.component.html

@@ -1,11 +1,19 @@
-<mat-toolbar>Your Contacts</mat-toolbar>
+<form [formGroup]="form" (ngSubmit)="submit()">
+
+ <mat-toolbar>Your Contacts
+ <span class="spacer"></span>
+ <button mat-raised-button color="primary" type="submit">Create Group </button>
+</mat-toolbar>
+
 <mat-list *ngIf="contacts">
- <mat-list-item *ngFor="let data of contacts" style="width:100%">
- <span style="padding-right: 40px;">{{data.contact}}</span>
- <mat-icon aria-hidden="false" aria-label="icon" style="cursor: pointer;" (click)="startChat(data.contact, data.room)">chat</mat-icon>
+ <mat-list-item formArrayName="contacts" *ngFor="let contact of form.controls.contacts.controls; let i = index" style="width:100%">
+
+ <mat-checkbox [formControlName]='i' style="padding-right: 40px;" color="primary" >{{contacts[i].contact}}</mat-checkbox>
+
+ <mat-icon aria-hidden="false" aria-label="icon" style="cursor: pointer;" (click)="startChat(contacts[i].contact,contacts[i].contact)">chat</mat-icon>
  <span class="spacer"></span>
- <mat-icon aria-hidden="false" aria-label="icon" style="cursor: pointer;" (click)="deleteContact(data.contact)">delete</mat-icon>
+ <mat-icon aria-hidden="false" aria-label="icon" style="cursor: pointer;" (click)="deleteContact(contacts[i].contact, i)">delete</mat-icon>
+
  </mat-list-item>
 </mat-list>
 <mat-toolbar *ngIf="!contacts">It is lonely here.</mat-toolbar>
-

src/app/contacts/contacts.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { ChatService } from './../services/chat.service';
-import { MatList, MatListItem } from '@angular/material/list';
+import { FormBuilder, FormGroup, FormArray, FormControl, ValidatorFn } from '@angular/forms';
 import { LoginService } from '../services/login.service';
 import {Router} from '@angular/router';
 import { CookieService } from 'ngx-cookie-service';
@@ -12,49 +12,89 @@ import { CookieService } from 'ngx-cookie-service';
  styleUrls: ['./contacts.component.css']
 })
 export class ContactsComponent implements OnInit {
- private contacts: any ;
+ private contacts;
+ private form: FormGroup;
  private user: any = this.loginService.getLoggedUser();
 
  constructor(private chatService: ChatService, private loginService: LoginService,
- private router: Router, private cookieService: CookieService) {
+ private router: Router, private cookieService: CookieService, private fb: FormBuilder) {
 
- this.chatService.getAllContacts(this.user).subscribe(
- res => {
- if (res.status === 200) {
- this.contacts = res.body;
- // console.log(this.contacts);
- }
- },
- err => {
+ this.form = fb.group({
+ contacts: new FormArray([])
+ });
 
- console.log('Error:', err.error);
- });
- }
+ this.getContacts();
+ }
 
- startChat(contact, room) {
- // console.log(room);
- if ((typeof contact !== 'undefined') && (typeof room !== 'undefined')) {
- this.router.navigateByUrl('dashboard/private/' + contact + '/' + room);
- } else {
- alert('Not able to locate the room');
- }
+
+ // add check boxes
+private addCheckboxes() {
+ this.contacts.map((o, i) => { // data, index
+ const control = new FormControl(false); // initialized as unchecked
+ (this.form.controls.contacts as FormArray).push(control);
+ // console.log(o);
+ });
  }
 
- deleteContact(contact) {
+
+private submit() {
+
+ const selectedContactsIds = this.form.value.contacts
+ .map((v, i) => v ? this.contacts[i].contact : null)
+ .filter(v => v !== null);
+ console.log(selectedContactsIds);
+ }
+
+
+ // get contact list
+private getContacts() {this.chatService.getAllContacts(this.user).subscribe(
+ res => {
+ if (res.status === 200) {
+ this.contacts = res.body;
+ // console.log(this.contacts);
+ this.addCheckboxes();
+ }
+ },
+ err => {
+ console.log('Error:', err.error);
+ });
+ }
+
+
+ // delete contact function
+private deleteContact(contact, i) {
  this.chatService.deleteContact(this.user, contact).subscribe(
  res => {
  if (res.status === 200) {
- alert('Contact deleted');
- // this.router.navigateByUrl('/dashboard/contacts');
+ this.contacts = res.body;
+ (this.form.controls.contacts as FormArray).clear();
+ this.addCheckboxes();
  }
  },
  err => {
-
- console.log('Error:', err.error);
- alert('Error: ' + err.error);
+ if (err.status === 400) {
+ // no user left
+ delete this.contacts;
+ } else {
+ console.log('Error:', err.status);
+ alert('Error: ' + err.error);
+ }
  });
  }
 
+
+ // start the chat
+ private startChat(contact, room) {
+ // console.log(room);
+ if ((typeof contact !== 'undefined') && (typeof room !== 'undefined')) {
+ this.router.navigateByUrl('dashboard/private/' + contact + '/' + room);
+ } else {
+ alert('Not able to locate the room');
+ }
+}
+private checkType(data) {
+ return typeof data;
+}
  ngOnInit() {
  }
 

src/app/helpers/material.module.ts

@@ -5,14 +5,17 @@ import {MatSidenavModule} from '@angular/material/sidenav';
 import {MatIconModule} from '@angular/material/icon';
 import {MatListModule} from '@angular/material/list';
 import {MatDividerModule} from '@angular/material/divider';
+import {MatCheckboxModule} from '@angular/material';
 
 
 @NgModule({
 // tslint:disable-next-line: max-line-length
-imports: [MatButtonModule, MatToolbarModule, MatCardModule, MatFormFieldModule, MatInputModule, MatRadioModule, MatListModule, MatSidenavModule, MatIconModule, MatDividerModule],
+imports: [MatButtonModule, MatToolbarModule, MatCardModule, MatFormFieldModule, MatInputModule, MatRadioModule,
+ MatListModule, MatSidenavModule, MatIconModule, MatDividerModule, MatCheckboxModule],
 
 // tslint:disable-next-line: max-line-length
-exports: [MatButtonModule, MatToolbarModule, MatCardModule, MatFormFieldModule, MatInputModule, MatRadioModule, MatListModule, MatSidenavModule, MatIconModule, MatDividerModule],
+exports: [MatButtonModule, MatToolbarModule, MatCardModule, MatFormFieldModule, MatInputModule, MatRadioModule,
+ MatListModule, MatSidenavModule, MatIconModule, MatDividerModule, MatCheckboxModule],
 
 providers: [
 

src/app/users/users.component.html

@@ -1,4 +1,5 @@
-<mat-toolbar>List of All Registered Users</mat-toolbar>
+<mat-toolbar>List of All Registered Users
+</mat-toolbar>
 <mat-list *ngIf="users">
  <mat-list-item *ngFor="let user of users" style="width:100%">
  <span style="display: inline-block;width:100px;">{{user.mobile}}</span>

src/app/users/users.component.ts

@@ -34,7 +34,7 @@ const contactModel = { mobile : user, contact: contactNumber, room: roomName };
 
 this.chatService.addContact(contactModel).subscribe(
  res => {
- console.log('response', res);
+ // console.log('response', res);
  if (res.status === 200) {
  alert('contact added');
  // this.router.navigateByUrl('dashboard/private/' + contactModel.contact + '/' + contactModel.room);