chips created to show subscriptions

angular.json

@@ -37,12 +37,13 @@
               "node_modules/@fortawesome/fontawesome-free/css/all.min.css"
             ],
             "scripts": [
-              "node_modules/jquery/dist/jquery.min.js",
-              "node_modules/bootstrap/dist/js/bootstrap.min.js",
+              "./node_modules/jquery/dist/jquery.min.js",
+              "./node_modules/bootstrap/dist/js/bootstrap.min.js",
               "./node_modules/chart.js/dist/Chart.js",
               "./node_modules/chart.js/dist/Chart.js",
               "./node_modules/hammerjs/hammer.min.js",
-              "./node_modules/apexcharts/dist/apexcharts.min.js"
+              "./node_modules/apexcharts/dist/apexcharts.min.js",
+              "./node_modules/hammerjs/hammer.min.js"
             ]
           },
           "configurations": {

src/app/app.module.ts

@@ -27,6 +27,11 @@ import { LogoutModalComponent } from './Modals/logout-modal/logout-modal.compone
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialogModule } from '@angular/material/dialog';
 import { NavbarModule, WavesModule, ButtonsModule } from 'angular-bootstrap-md'
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatFormFieldModule} from '@angular/material/form-field';
+import {MatIconModule} from '@angular/material/icon';
+
+import {MatChipsModule} from '@angular/material/chips';
 
 export function tokenGetter() {
   return localStorage.getItem("jwt");
@@ -62,6 +67,10 @@ export function tokenGetter() {
     NavbarModule,
     WavesModule,
     ButtonsModule,
+    MatChipsModule,
+    MatAutocompleteModule,
+    MatFormFieldModule,
+    MatIconModule,
     MDBBootstrapModule.forRoot(),
     JwtModule.forRoot({
       config: {

src/app/models/SubscriptionDto.ts

@@ -0,0 +1,5 @@
+export interface SubscriptionDto{
+  id: string;
+  path: string[];
+  userId: string;
+}

src/app/profile/profile.component.html

@@ -80,26 +80,31 @@ <h4 class="modal-title w-100 font-weight-bold">Subscriptions</h4>
           <span aria-hidden="true">&times;</span>
         </button>
       </div>
-      <table mdbTable #tableEl="mdbTable" class="z-depth-1">
-        <thead>
-          <tr>
-            <th class = "headers"  *ngFor="let head of subscriptionHeadElements; let i = index" scope="col">{{head}} </th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr mdbTableCol *ngFor="let el of usersTable; let i = index">
-            <th *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex" scope="row">{{el.name}}</th>
-            <td> <button (click) = "Subscription(el.id)" (click)="frame2.show()" mat-raised-button color="primary">Subscriptions</button></td>
-          </tr>
-        </tbody>
-        <tfoot class="grey lighten-5 w-100">
-          <tr>
-            <td colspan="4">
-              <mdb-table-pagination [tableEl]="tableEl" [searchDataSource]="usersTable"></mdb-table-pagination>
-            </td>
-          </tr>
-          </tfoot>
-      </table>
+      <mat-form-field class="example-chip-list">
+        <!-- <mat-label>Favorite Fruits</mat-label> -->
+        <mat-chip-list #chipList aria-label="Fruit selection">
+          <mat-chip
+            *ngFor="let fruit of fruits"
+            [selectable]="selectable"
+            [removable]="removable"
+            (removed)="remove(fruit)">
+            {{fruit}}
+            <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
+          </mat-chip>
+          <input
+            #fruitInput
+            [formControl]="fruitCtrl"
+            [matAutocomplete]="auto"
+            [matChipInputFor]="chipList"
+            [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
+            (matChipInputTokenEnd)="add($event)">
+        </mat-chip-list>
+        <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
+          <mat-option *ngFor="let fruit of filteredFruits | async" [value]="fruit">
+            {{fruit}}
+          </mat-option>
+        </mat-autocomplete>
+      </mat-form-field>
     </div>
   </div>
 </div>

src/app/profile/profile.component.ts

@@ -6,6 +6,17 @@ import { MdbTableDirective, MdbTablePaginationComponent } from 'angular-bootstra
 import { APIService } from 'src/app/services/api.service';
 import { UsersDto } from '../models/UsersDto';
 import { ModalModule, TooltipModule, PopoverModule, ButtonsModule } from 'angular-bootstrap-md'
+import { SubscriptionDto } from '../models/SubscriptionDto';
+import { Observable } from 'rxjs/internal/Observable';
+
+import {COMMA, ENTER} from '@angular/cdk/keycodes';
+import { ElementRef} from '@angular/core';
+
+import {MatAutocompleteSelectedEvent, MatAutocomplete} from '@angular/material/autocomplete';
+import {MatChipInputEvent} from '@angular/material/chips';
+
+
+import {map, startWith} from 'rxjs/operators';
 
 @Component({
   selector: 'app-profile',
@@ -21,11 +32,63 @@ export class ProfileComponent implements OnInit {
   headElements = ['Name', 'Role','Subscription', 'Status'];
   subscriptionHeadElements = ['Name','Edit'];
   usersTable: any = [];
+  subscriptionTable: any = [];
   UserForm: FormGroup;
   headingMessage: string = "";
   checkError = false;
+
+  visible = true;
+  selectable = true;
+  removable = true;
+  separatorKeysCodes: number[] = [ENTER, COMMA];
+  fruitCtrl = new FormControl();
+  filteredFruits: Observable<string[]>;
+  fruits: string[] = [];
+  allFruits: string[] = ['home/temperature', 'home/humidity', 'home/motion', 'home/light', 'home/fan'];
+
+  @ViewChild('fruitInput') fruitInput: ElementRef<HTMLInputElement>;
+  @ViewChild('auto') matAutocomplete: MatAutocomplete;
+
   constructor(private apiService: APIService, private cdRef: ChangeDetectorRef,private router: Router, private modal: ModalModule) {
+    this.filteredFruits = this.fruitCtrl.valueChanges.pipe(
+      startWith(null),
+      map((fruit: string | null) => fruit ? this._filter(fruit) : this.allFruits.slice()));
+  }
+  add(event: MatChipInputEvent): void {
+    const input = event.input;
+    const value = event.value;
+
+    // Add our fruit
+    if ((value || '').trim()) {
+      this.fruits.push(value.trim());
+    }
 
+    // Reset the input value
+    if (input) {
+      input.value = '';
+    }
+
+    this.fruitCtrl.setValue(null);
+  }
+
+  remove(fruit: string): void {
+    const index = this.fruits.indexOf(fruit);
+
+    if (index >= 0) {
+      this.fruits.splice(index, 1);
+    }
+  }
+
+  selected(event: MatAutocompleteSelectedEvent): void {
+    this.fruits.push(event.option.viewValue);
+    this.fruitInput.nativeElement.value = '';
+    this.fruitCtrl.setValue(null);
+  }
+
+  private _filter(value: string): string[] {
+    const filterValue = value.toLowerCase();
+
+    return this.allFruits.filter(fruit => fruit.toLowerCase().indexOf(filterValue) === 0);
   }
 
 
@@ -61,7 +124,13 @@ export class ProfileComponent implements OnInit {
 
   Subscription(id?: string){
     console.log(id);
+    this.apiService.getSubscriptionsByUserId(id).subscribe(data => {
+      let sub = data as SubscriptionDto;
+      this.fruits.push(... sub.path);
+    })
+
   }
 
 
+
 }

src/app/services/api.service.ts

@@ -46,6 +46,14 @@ export class APIService {
 
   getProfileByUserId: (userId: string | number) => {};
 
+
+  getSubscriptionsByUserId = (userId: string | number) : Observable<Object> => {
+    let endpoint = `${API_ENDPOINT}/users/${userId}/subscriptions`;
+    let config = this.getRequestConfiguration(true);
+    return this.http.get(endpoint,config);
+  };
+
+
   createUser = (data: UsersDto): Observable<Object> => {
     let endpoint = `${API_ENDPOINT}/users`;
     let body = JSON.stringify(data);