Init api key menu item

Author: AramAlsabti

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "typescript.tsdk": "node_modules\\typescript\\lib"
+}

src/app/admin/admin-routing.module.ts

@@ -12,6 +12,10 @@ import { UserDetailComponent } from './users/user-detail/user-detail.component';
 import { UserEditComponent } from './users/user-edit/user-edit.component';
 import { UserListComponent } from './users/user-list/user-list.component';
 import { UsersComponent } from './users/users.component';
+import { ApiKeyComponent } from './api-key/api-key.component';
+import { ApiKeyListComponent } from './api-key/api-key-list/api-key-list.component';
+import { ApiKeyEditComponent } from './api-key/api-key-edit/api-key-edit.component';
+import { ApiKeyDetailComponent } from './api-key/api-key-detail/api-key-detail.component';
 
 
 const adminRoutes: Routes = [
@@ -44,6 +48,19 @@ const adminRoutes: Routes = [
             },
         ],
     },
+    {
+        path: 'api-key',
+        component: ApiKeyComponent,
+        children: [
+            { path: '', component: ApiKeyListComponent },
+            { path: 'new-api-key', component: ApiKeyEditComponent },
+            { path: ':api-key-id', component: ApiKeyDetailComponent },
+            {
+                path: ':api-key-id/edit-api-key',
+                component: ApiKeyEditComponent,
+            },
+        ],
+    },
 
 
 ];

src/app/admin/admin.module.ts

@@ -28,6 +28,11 @@ import { UsersComponent } from './users/users.component';
 import { MatSelectModule } from '@angular/material/select';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatSelectSearchModule } from '@shared/components/mat-select-search/mat-select-search.module';
+import { ApiKeyComponent } from './api-key/api-key.component';
+import { ApiKeyListComponent } from './api-key/api-key-list/api-key-list.component';
+import { ApiKeyTableComponent } from './api-key/api-key-list/api-key-table/api-key-table.component';
+import { ApiKeyEditComponent } from './api-key/api-key-edit/api-key-edit.component';
+import { ApiKeyDetailComponent } from './api-key/api-key-detail/api-key-detail.component';
 
 @NgModule({
   declarations: [
@@ -46,6 +51,11 @@ import { MatSelectSearchModule } from '@shared/components/mat-select-search/mat-
     OrganisationDetailComponent,
     OrganisationEditComponent,
     OrganisationListComponent,
+    ApiKeyComponent,
+    ApiKeyListComponent,
+    ApiKeyTableComponent,
+    ApiKeyEditComponent,
+    ApiKeyDetailComponent,
   ],
   imports: [
     AdminRoutingModule,
@@ -79,6 +89,10 @@ import { MatSelectSearchModule } from '@shared/components/mat-select-search/mat-
     OrganisationDetailComponent,
     OrganisationEditComponent,
     OrganisationListComponent,
+    ApiKeyComponent,
+    ApiKeyListComponent,
+    ApiKeyTableComponent,
+    ApiKeyEditComponent,
   ],
 })
 export class AdminModule {}

src/app/admin/api-key/api-key-detail/api-key-detail.component.html

@@ -0,0 +1 @@
+<p>api-key-detail works!</p>

src/app/admin/api-key/api-key-detail/api-key-detail.component.scss

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

src/app/admin/api-key/api-key-detail/api-key-detail.component.ts

@@ -0,0 +1 @@
+<p>api-key-edit works!</p>

src/app/admin/api-key/api-key-edit/api-key-edit.component.html

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

src/app/admin/api-key/api-key-edit/api-key-edit.component.scss

@@ -0,0 +1,11 @@
+<app-top-bar [title]="'NAV.API-KEY' | translate">
+</app-top-bar>
+<div class="container-fluid">
+  <div class="row">
+      <div class="col-12">
+          <div class="jumbotron--table">
+              <app-api-key-table></app-api-key-table>
+          </div>
+      </div>
+  </div>
+</div>