#121: Implement the UI to connect manage the certificate of the PKI/ …

…Added Button-OperationService-certificateService

pkiintergration-fe/package.json

@@ -61,6 +61,9 @@
       "name": "pkiintergration-fe",
       "contextPath": "pkiintergration-fe",
       "key": "pkiintergration-fe-application-key",
+      "icon": {
+        "class": "c8y-icon-duocolor c8y-icon-cumulocity-iot"
+      },
       "upgrade": true,
       "rightDrawer": true,
       "breadcrumbs": false,

pkiintergration-fe/src/modules/pki-managed-certificates/create-certificate/create-certificate.component.ts

@@ -1,5 +1,5 @@
-import { Component, OnInit } from '@angular/core';
-import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
+import { Component } from '@angular/core';
+import { BsModalRef } from 'ngx-bootstrap/modal';
 @Component({
   selector: 'app-create-certificate',
   templateUrl: './create-certificate.component.html'

pkiintergration-fe/src/modules/pki-managed-certificates/navi.factory.ts

@@ -1,5 +1,4 @@
 import { Injectable } from '@angular/core';
-import { Router } from '@angular/router';
 import { NavigatorNode, NavigatorNodeFactory, _ } from '@c8y/ngx-components';
 
 @Injectable()

pkiintergration-fe/src/modules/pki-managed-certificates/pki-managed-certificates.component.html

@@ -1,4 +1,31 @@
 <c8y-title translate>Managed Certificates - PKI</c8y-title>
-<c8y-action-bar-item [placement]="'right'">
-  <a class="btn btn-link" (click)="createCertificate()"> <i [c8yIcon]="'plus-circle'"></i> {{ 'Add certificate' }} </a>
+
+<c8y-action-bar-item itemClass="navbar-form" placement="right">
+  <div class="dropdown" dropdown >
+    <button
+      type="button"
+      title="dropdown-toggle"
+      dropdownToggle
+      class="btn btn-default dropdown-toggle c8y-dropdown"
+    >
+      <span>Add Certificate</span> <span class="caret"></span>
+    </button>
+    <ul class="dropdown-menu" *dropdownMenu>
+      <li>
+        <button type="button">
+          <i c8yicon="cogs" class="dlt-c8y-icon-cogs"></i>
+          with Cumulocity
+        </button>
+      </li>
+      <li>
+        <button type="button" (click)="createCertificate()">
+          <i c8yIcon="trash" class="dlt-c8y-icon-trash" ></i>
+          With a connected Device
+        </button>
+      </li>
+
+    </ul>
+  </div>
 </c8y-action-bar-item>
+
+

pkiintergration-fe/src/modules/pki-managed-certificates/pki-managed-certificates.component.ts

@@ -2,19 +2,23 @@ import { Component, OnInit } from '@angular/core';
 import { BsModalService } from 'ngx-bootstrap/modal';
 import { FetchClient } from '@c8y/client';
 import { CreateCertificateComponent } from './create-certificate/create-certificate.component';
+import { AlertService } from '@c8y/ngx-components';
+import { CreateCertificateService } from '@services/create-certificate.service';
 @Component({
   selector: 'app-pki-managed-certificates',
   templateUrl: './pki-managed-certificates.component.html'
 })
 export class PkiManagedCertificatesComponent {
   data: any;
 
-  constructor(private fetchClient: FetchClient, private modalService: BsModalService) {}
+  constructor(
+    private fetchClient: FetchClient, 
+    private modalService: BsModalService,
+    private alertService: AlertService,
+    private certificateService: CreateCertificateService,
+    ) {}
 
-  async ngOnInit() {
-    const response = await this.fetchClient.fetch('/certificates');
-    this.data = await response.json();
-  }
+
 
   createCertificate() {
     this.modalService.show(CreateCertificateComponent, {

pkiintergration-fe/src/services/create-certificate.service.ts

@@ -0,0 +1,21 @@
+import { Injectable } from '@angular/core';
+import { FetchClient } from '@c8y/client';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class CreateCertificateService {
+  private options = {
+    method: 'GET',
+    headers: { 'Content-Type': 'application/json' }
+  };
+
+  constructor(private fetchClient: FetchClient) {}
+  async getCertificate() {
+    //Dummy service, there are not available from Backend
+    const response = await this.fetchClient.fetch('service/certificates', this.options);
+    if (response.status !== 200) {
+      throw Error('Wrong status code');
+    }
+  }
+}