Add user metadata details.

src/app/pages/users/user-details/user-details.component.html

@@ -0,0 +1,64 @@
+<!-- Begin page -->
+<div class="wrapper">
+  <app-sidebar></app-sidebar>
+
+  <!-- ============================================================== -->
+  <!-- Start Page Content here -->
+  <!-- ============================================================== -->
+
+  <div id="content">
+    <app-topbar></app-topbar>
+    <!-- Start Content-->
+    <div class="container-fluid" appMenuSelection>
+      <div class="card text-center">
+        <div class="card-header bg-dark text-white">
+          <strong>USER DETAILS</strong>
+        </div>
+        <div class="card-body">
+          <div class="row">
+            <div class="col-md-6">
+              <h4>Platform: </h4>
+              <ul class="list-group list-group-flush">
+                <li class="list-group-item">
+                  <p>Address: {{user.key.ethereum[1]}}</p>
+                </li>
+                <li class="list-group-item">
+                  <p>
+                    Selling: {{user.selling}}
+                  </p>
+                </li>
+                <li class="list-group-item">
+                  <p>Location: </p>
+                  <p>Latitude: {{user.location.latitude}}</p>
+                  <p>Longitude: {{user.location.longitude}}</p>
+                </li>
+                <li class="list-group-item">
+                  <p>Date registered: {{user.dateRegistered}}</p>
+                </li>
+              </ul>
+            </div>
+            <div class="col-md-6">
+              <h4>V Card: </h4>
+              <ul class="list-group list-group-flush">
+                <li class="list-group-item">
+                  <p>Name: {{parsedVcard['fn']}}</p>
+                </li>
+                <li class="list-group-item">
+                  <p>Version: {{parsedVcard['version']}}</p>
+                </li>
+                <li class="list-group-item">
+                  <p>Tel: {{parsedVcard['tel'][0]['meta']['TYP']}} : {{parsedVcard['tel'][0]['value'][0]}}</p>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <app-footer appMenuSelection></app-footer>
+  </div>
+  <!-- ============================================================== -->
+  <!-- End Page content -->
+  <!-- ============================================================== -->
+</div>
+

src/app/pages/users/user-details/user-details.component.spec.ts

@@ -0,0 +1,76 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UserDetailsComponent } from './user-details.component';
+import {ActivatedRouteStub, FooterStubComponent, SidebarStubComponent, TopbarStubComponent, UserServiceStub} from '../../../../testing';
+import {ActivatedRoute} from '@angular/router';
+import {HttpClient} from '@angular/common/http';
+import {HttpClientTestingModule, HttpTestingController} from '@angular/common/http/testing';
+import {UserService} from '../../../_services';
+
+
+describe('UserDetailsComponent', () => {
+  let component: UserDetailsComponent;
+  let fixture: ComponentFixture<UserDetailsComponent>;
+  let httpClient: HttpClient;
+  let httpTestingController: HttpTestingController;
+  let route: ActivatedRouteStub;
+
+  beforeEach(async () => {
+    route = new ActivatedRouteStub();
+    route.setParamMap({ id: 'test' });
+    await TestBed.configureTestingModule({
+      declarations: [
+        UserDetailsComponent,
+        FooterStubComponent,
+        SidebarStubComponent,
+        TopbarStubComponent
+      ],
+      imports: [HttpClientTestingModule],
+      providers: [
+        { provide: ActivatedRoute, useValue: route },
+        { provide: UserService, useClass: UserServiceStub }
+      ]
+    })
+    .compileComponents();
+    httpClient = TestBed.inject(HttpClient);
+    httpTestingController = TestBed.inject(HttpTestingController);
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UserDetailsComponent);
+    component = fixture.componentInstance;
+    component.user = {
+      dateRegistered: 1595537208,
+      key: {
+        ethereum: [
+          '0x51d3c8e2e421604e2b644117a362d589c5434739',
+          '0x9D7c284907acbd4a0cE2dDD0AA69147A921a573D'
+        ]
+      },
+      location: {
+        external: {},
+        latitude: '22.430670',
+        longitude: '151.002995'
+      },
+      selling: [
+        'environment',
+        'health',
+        'transport'
+      ],
+      vcard: {
+        fn: 'Test User',
+        tel: [{
+          meta: {TYP: 'CELL'},
+          value: ['25412345678']
+        }],
+        version: '3.0'
+      }
+    };
+    component.parsedVcard = component.user.vcard;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/users/user-details/user-details.component.ts

@@ -0,0 +1,45 @@
+import { Component, OnInit } from '@angular/core';
+import {ActivatedRoute, Params} from '@angular/router';
+import {User, Phone} from 'cic-client-meta';
+import {first} from 'rxjs/operators';
+import {User as UserModel} from '../../../_models';
+import {UserService} from '../../../_services';
+import {parse} from '../../../../assets/js/parse-vcard';
+
+@Component({
+  selector: 'app-user-details',
+  templateUrl: './user-details.component.html',
+  styleUrls: ['./user-details.component.scss']
+})
+export class UserDetailsComponent implements OnInit {
+  user: UserModel;
+  vcard: any;
+  parsedVcard: any;
+
+  constructor(
+    private route: ActivatedRoute,
+    private userService: UserService
+  ) {
+    this.route.paramMap.subscribe(
+      (params: Params) => {
+        this.getUser(params.get('id')).then();
+        // console.log(Phone.toKey(25412341234));
+        // console.log(User.toKey('0x9D7c284907acD0AA69147A9bd4a0cE2dD21a573D'));
+      }
+    );
+  }
+
+  ngOnInit(): void {
+  }
+
+  async getUser(address: string): Promise<void> {
+    this.userService.getUser(await User.toKey(address)).pipe(first()).subscribe(res => {
+      console.log(res);
+      this.user = res;
+      this.vcard = atob(res.vcard);
+      this.parsedVcard = parse(this.vcard);
+    }, error => {
+      console.log(error);
+    });
+  }
+}

src/app/pages/users/users-routing.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { UsersComponent } from './users.component';
+import {UserDetailsComponent} from './user-details/user-details.component';
+
+const routes: Routes = [
+  { path: '', component: UsersComponent },
+  { path: ':id', component: UserDetailsComponent }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class UsersRoutingModule { }

src/app/pages/users/users.component.html

@@ -0,0 +1,25 @@
+<!-- Begin page -->
+<div class="wrapper">
+  <app-sidebar></app-sidebar>
+
+  <!-- ============================================================== -->
+  <!-- Start Page Content here -->
+  <!-- ============================================================== -->
+
+  <div id="content">
+    <app-topbar></app-topbar>
+    <!-- Start Content-->
+    <div class="container-fluid" appMenuSelection>
+      <div class="container">
+        <div class="row mt-5">
+          <h2>Users</h2>
+        </div>
+      </div>
+    </div>
+    <app-footer appMenuSelection></app-footer>
+  </div>
+  <!-- ============================================================== -->
+  <!-- End Page content -->
+  <!-- ============================================================== -->
+</div>
+

src/app/pages/users/users.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UsersComponent } from './users.component';
+
+describe('UsersComponent', () => {
+  let component: UsersComponent;
+  let fixture: ComponentFixture<UsersComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ UsersComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UsersComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/users/users.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-users',
+  templateUrl: './users.component.html',
+  styleUrls: ['./users.component.scss']
+})
+export class UsersComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/pages/users/users.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { UsersRoutingModule } from './users-routing.module';
+import { UsersComponent } from './users.component';
+import { UserDetailsComponent } from './user-details/user-details.component';
+import {SharedModule} from '../../shared/shared.module';
+
+
+@NgModule({
+  declarations: [UsersComponent, UserDetailsComponent],
+  imports: [
+    CommonModule,
+    UsersRoutingModule,
+    SharedModule
+  ]
+})
+export class UsersModule { }