feat(pmp): remove repository - front

refs #181

angular.json

@@ -1937,6 +1937,37 @@
           }
         }
       }
+    },
+    "pmp-web-shared-ui-generic-dialog": {
+      "projectType": "library",
+      "root": "libs/pmp-web/shared/ui-generic-dialog",
+      "sourceRoot": "libs/pmp-web/shared/ui-generic-dialog/src",
+      "prefix": "pimp-my-pr",
+      "architect": {
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "libs/pmp-web/shared/ui-generic-dialog/tsconfig.lib.json",
+              "libs/pmp-web/shared/ui-generic-dialog/tsconfig.spec.json"
+            ],
+            "exclude": ["**/node_modules/**", "!libs/pmp-web/shared/ui-generic-dialog/**"]
+          }
+        },
+        "test": {
+          "builder": "@nrwl/jest:jest",
+          "options": {
+            "jestConfig": "libs/pmp-web/shared/ui-generic-dialog/jest.config.js",
+            "tsConfig": "libs/pmp-web/shared/ui-generic-dialog/tsconfig.spec.json",
+            "setupFile": "libs/pmp-web/shared/ui-generic-dialog/src/test-setup.ts"
+          }
+        }
+      },
+      "schematics": {
+        "@nrwl/angular:component": {
+          "styleext": "scss"
+        }
+      }
     }
   },
   "cli": {

libs/pmp-web/repository/data-access/src/lib/+state/repository.actions.ts

@@ -1,6 +1,10 @@
 import { HttpErrorResponse } from '@angular/common/http';
 import { Action } from '@ngrx/store';
-import { AddRepositoryPayload, Repository } from '@pimp-my-pr/pmp-web/repository/domain';
+import {
+  AddRepositoryPayload,
+  DeleteRepositoryPayload,
+  Repository
+} from '@pimp-my-pr/pmp-web/repository/domain';
 
 export namespace fromRepositoryActions {
   export enum Types {
@@ -9,7 +13,10 @@ export namespace fromRepositoryActions {
     GetRepositoryCollectionSuccess = '[Repository] Get Repository Collection Success',
     AddRepository = '[Repository] Add Repository',
     AddRepositoryFail = '[Repository] Add Repository Fail',
-    AddRepositorySuccess = '[Repository] Add Repository Success'
+    AddRepositorySuccess = '[Repository] Add Repository Success',
+    DeleteRepository = '[Repository] Delete Repository',
+    DeleteRepositoryFail = '[Repository] Delete Repository Fail',
+    DeleteRepositorySuccess = '[Repository] Delete Repository Success'
   }
 
   export class GetRepositoryCollection implements Action {
@@ -44,11 +51,30 @@ export namespace fromRepositoryActions {
     readonly type = Types.AddRepositorySuccess;
   }
 
+  export class DeleteRepository implements Action {
+    readonly type = Types.DeleteRepository;
+
+    constructor(public payload: DeleteRepositoryPayload) {}
+  }
+
+  export class DeleteRepositoryFail implements Action {
+    readonly type = Types.DeleteRepositoryFail;
+
+    constructor(public payload: HttpErrorResponse) {}
+  }
+
+  export class DeleteRepositorySuccess implements Action {
+    readonly type = Types.DeleteRepositorySuccess;
+  }
+
   export type CollectiveType =
     | GetRepositoryCollection
     | GetRepositoryCollectionFail
     | GetRepositoryCollectionSuccess
     | AddRepository
     | AddRepositoryFail
-    | AddRepositorySuccess;
+    | AddRepositorySuccess
+    | DeleteRepository
+    | DeleteRepositoryFail
+    | DeleteRepositorySuccess;
 }

libs/pmp-web/repository/data-access/src/lib/+state/repository.effects.ts

@@ -36,6 +36,22 @@ export class RepositoryEffects {
     ofType(fromRepositoryActions.Types.AddRepositorySuccess),
     map(() => new fromRepositoryActions.GetRepositoryCollection())
   );
+  @Effect()
+  deleteRepository$ = this.dp.fetch(fromRepositoryActions.Types.DeleteRepository, {
+    run: (action: fromRepositoryActions.DeleteRepository) => {
+      return this.repositoryDataService
+        .deleteRepository(action.payload)
+        .pipe(map(() => new fromRepositoryActions.DeleteRepositorySuccess()));
+    },
+    onError: (action: fromRepositoryActions.DeleteRepository, error: HttpErrorResponse) => {
+      return new fromRepositoryActions.DeleteRepositoryFail(error);
+    }
+  });
+  @Effect()
+  deleteRepositorySuccess$ = this.actions$.pipe(
+    ofType(fromRepositoryActions.Types.DeleteRepositorySuccess),
+    map(() => new fromRepositoryActions.GetRepositoryCollection())
+  );
 
   constructor(
     private dp: DataPersistence<RepositoryPartialState>,

libs/pmp-web/repository/data-access/src/lib/+state/repository.facade.ts

@@ -1,6 +1,9 @@
 import { Injectable } from '@angular/core';
 import { select, Store } from '@ngrx/store';
-import { AddRepositoryPayload } from '@pimp-my-pr/pmp-web/repository/domain';
+import {
+  AddRepositoryPayload,
+  DeleteRepositoryPayload
+} from '@pimp-my-pr/pmp-web/repository/domain';
 import { fromRepositoryActions } from './repository.actions';
 import { RepositoryPartialState } from './repository.reducer';
 import { repositoryQuery } from './repository.selectors';
@@ -29,4 +32,12 @@ export class RepositoryFacade {
       fromRepositoryActions.Types.AddRepositoryFail
     );
   }
+
+  deleteRepository(data: DeleteRepositoryPayload): Observable<void> {
+    return this.actionStatusResolverService.resolve(
+      new fromRepositoryActions.DeleteRepository(data),
+      fromRepositoryActions.Types.DeleteRepositorySuccess,
+      fromRepositoryActions.Types.DeleteRepositoryFail
+    );
+  }
 }

libs/pmp-web/repository/data-access/src/lib/services/repository-data.service.ts

@@ -1,5 +1,9 @@
 import { HttpClient } from '@angular/common/http';
-import { AddRepositoryPayload, Repository } from '@pimp-my-pr/pmp-web/repository/domain';
+import {
+  AddRepositoryPayload,
+  DeleteRepositoryPayload,
+  Repository
+} from '@pimp-my-pr/pmp-web/repository/domain';
 import { IResponse } from '@pimp-my-pr/shared/domain';
 import { urlFactory } from '@valueadd/typed-urls';
 import { Observable } from 'rxjs';
@@ -8,7 +12,8 @@ import { map } from 'rxjs/operators';
 export class RepositoryDataService {
   readonly endpoints = {
     getRepositoryCollection: urlFactory('/api/repository'),
-    addRepository: urlFactory('/api/repository')
+    addRepository: urlFactory('/api/repository'),
+    deleteRepository: urlFactory<'id'>('/api/repository/:id', true)
   };
 
   constructor(private http: HttpClient) {}
@@ -22,4 +27,8 @@ export class RepositoryDataService {
   addRepository(data: AddRepositoryPayload): Observable<void> {
     return this.http.post<void>(this.endpoints.addRepository.url(), data);
   }
+
+  deleteRepository(data: DeleteRepositoryPayload): Observable<void> {
+    return this.http.delete<void>(this.endpoints.deleteRepository.url({ id: data.repositoryId }));
+  }
 }

libs/pmp-web/repository/domain/src/index.ts

@@ -3,3 +3,4 @@ export * from './lib/payloads/get-repository-collection.payload';
 export * from './lib/payloads/get-repository-statistics.payload';
 export * from './lib/payloads/get-reviewers-statistics-collection.payload';
 export * from './lib/payloads/add-repository.payload';
+export * from './lib/payloads/delete-repository.payload';

libs/pmp-web/repository/domain/src/lib/payloads/delete-repository.payload.ts

@@ -0,0 +1,3 @@
+export interface DeleteRepositoryPayload {
+  repositoryId: string;
+}

libs/pmp-web/repository/repository-settings/feature/src/lib/containers/repository-settings/repository-settings.component.html

@@ -4,6 +4,7 @@ <h1 class="page__title">Repository settings</h1>
   <mat-tab label="Manage">
     <ng-template matTabContent>
       <pimp-my-pr-repositories-settings-table
+        (deleteRepository)="onDeleteRespository($event)"
         [data]="repositoryCollection$ | async"
         [isLoading]="repositoryCollectionLoading$ | async"
       >

libs/pmp-web/repository/repository-settings/feature/src/lib/containers/repository-settings/repository-settings.component.ts

@@ -2,6 +2,8 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RepositoryFacade } from '@pimp-my-pr/pmp-web/repository/data-access';
 import { MatDialog } from '@angular/material';
 import { AddRepositoryDialogComponent } from '../add-repository-dialog/add-repository-dialog.component';
+import { Repository } from '@pimp-my-pr/pmp-web/repository/domain';
+import { GenericDialogComponent } from '@pimp-my-pr/pmp-web/shared/ui-generic-dialog';
 
 @Component({
   selector: 'pimp-my-pr-repository-settings',
@@ -12,10 +14,22 @@ import { AddRepositoryDialogComponent } from '../add-repository-dialog/add-repos
 export class RepositorySettingsComponent {
   repositoryCollection$ = this.repositoryFacade.repositoryCollection$;
   repositoryCollectionLoading$ = this.repositoryFacade.repositoryCollectionLoading$;
+
   constructor(private repositoryFacade: RepositoryFacade, private matDialog: MatDialog) {
     this.repositoryFacade.getRepositoryCollection();
   }
 
+  onDeleteRespository(repository: Repository): void {
+    this.matDialog
+      .open(GenericDialogComponent, { autoFocus: false })
+      .afterClosed()
+      .subscribe((shouldDelete: boolean) => {
+        if (shouldDelete) {
+          this.repositoryFacade.deleteRepository({ repositoryId: repository.id });
+        }
+      });
+  }
+
   openAddRepoDialog(): void {
     this.matDialog.open(AddRepositoryDialogComponent, {
       width: '350px' // Consider better way of setting width of dialogs

libs/pmp-web/repository/repository-settings/feature/src/lib/pmp-web-repository-repository-settings-feature.module.ts

@@ -22,6 +22,7 @@ import { PmpWebRepositoryRepositorySettingsUiModule } from '@pimp-my-pr/pmp-web/
 import { ReactiveFormsModule } from '@angular/forms';
 import { AddRepositoryDialogComponent } from './containers/add-repository-dialog/add-repository-dialog.component';
 import { ValidationMessagesModule } from '@valueadd/validation-messages';
+import { PmpWebSharedUiGenericDialogModule } from '@pimp-my-pr/pmp-web/shared/ui-generic-dialog';
 
 @NgModule({
   imports: [
@@ -44,7 +45,8 @@ import { ValidationMessagesModule } from '@valueadd/validation-messages';
     MatSnackBarModule,
     MatSelectModule,
     PmpWebRepositoryRepositorySettingsUiModule,
-    ValidationMessagesModule
+    ValidationMessagesModule,
+    PmpWebSharedUiGenericDialogModule
   ],
   declarations: [RepositorySettingsComponent, AddRepositoryDialogComponent],
   entryComponents: [AddRepositoryDialogComponent]

libs/pmp-web/repository/repository-settings/ui/src/lib/repositories-settings-table/repositories-settings-table.component.html

@@ -40,6 +40,18 @@
     </mat-cell>
   </ng-container>
 
+  <!-- Delete repository icon Column -->
+  <ng-container matColumnDef="delete">
+    <mat-header-cell *matHeaderCellDef>
+      <span>Delete repository</span>
+    </mat-header-cell>
+    <mat-cell *matCellDef="let element">
+      <button (click)="onDeleteRepository(element)" mat-icon-button>
+        <mat-icon>delete</mat-icon>
+      </button>
+    </mat-cell>
+  </ng-container>
+
   <mat-header-row *matHeaderRowDef="displayColumns"></mat-header-row>
   <mat-row *matRowDef="let row; columns: displayColumns"></mat-row>
 </mat-table>

libs/pmp-web/repository/repository-settings/ui/src/lib/repositories-settings-table/repositories-settings-table.component.scss

@@ -4,12 +4,6 @@
   bottom: 3rem;
 }
 
-mat-header-cell > span {
-  font-size: 14px;
-  font-weight: normal;
-  padding: 0 5px;
-}
-
 mat-header-cell > span > mat-icon {
   color: #000000;
 }
@@ -18,6 +12,10 @@ mat-cell {
   padding: 0 5px;
 }
 
+.mat-column-delete {
+  flex: 0.5;
+}
+
 .avatar-column {
   flex: unset;
   width: 62px;

libs/pmp-web/repository/repository-settings/ui/src/lib/repositories-settings-table/repositories-settings-table.component.ts

@@ -25,12 +25,19 @@ export class RepositoriesSettingsTableComponent {
   @Input()
   isLoading = false;
 
+  @Output()
+  deleteRepository = new EventEmitter<Repository>();
+
   @Output()
   navigateToItem = new EventEmitter<Repository>();
 
   @ViewChild(MatSort, { static: true })
   sort: MatSort;
 
   dataSource: MatTableDataSource<Repository>;
-  displayColumns = ['avatar', 'name', 'maxLines', 'maxWaitingTime'];
+  displayColumns = ['avatar', 'name', 'maxLines', 'maxWaitingTime', 'delete'];
+
+  onDeleteRepository(repository: Repository): void {
+    this.deleteRepository.emit(repository);
+  }
 }

libs/pmp-web/shared/core/src/lib/pmp-web-shared-core.module.ts

@@ -3,8 +3,15 @@ import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { PmpStoreModule } from './modules/pmp-store.module';
+import { ValidationModule } from './modules/validation.module';
 
 @NgModule({
-  imports: [BrowserModule, BrowserAnimationsModule, HttpClientModule, PmpStoreModule]
+  imports: [
+    BrowserModule,
+    BrowserAnimationsModule,
+    HttpClientModule,
+    PmpStoreModule,
+    ValidationModule
+  ]
 })
 export class PmpWebSharedCoreModule {}

libs/pmp-web/shared/domain/src/index.ts

@@ -0,0 +1 @@
+export * from './payloads/generic-dialog.payload';

libs/pmp-web/shared/domain/src/payloads/generic-dialog.payload.ts

@@ -0,0 +1,5 @@
+export interface GenericDialogPayload {
+  message?: string;
+  noOptionMsg?: string;
+  yesOptionMsg?: string;
+}

libs/pmp-web/shared/ui-generic-dialog/README.md

@@ -0,0 +1,7 @@
+# pmp-web-shared-ui-generic-dialog
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test pmp-web-shared-ui-generic-dialog` to execute the unit tests.

libs/pmp-web/shared/ui-generic-dialog/jest.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  name: 'pmp-web-shared-ui-generic-dialog',
+  preset: '../../../../jest.config.js',
+  coverageDirectory: '../../../../coverage/libs/pmp-web/shared/ui-generic-dialog',
+  snapshotSerializers: [
+    'jest-preset-angular/AngularSnapshotSerializer.js',
+    'jest-preset-angular/HTMLCommentSerializer.js'
+  ]
+};

libs/pmp-web/shared/ui-generic-dialog/src/index.ts

@@ -0,0 +1,3 @@
+export * from './lib/pmp-web-shared-ui-generic-dialog.module';
+
+export * from './lib/components/generic-dialog/generic-dialog.component';

libs/pmp-web/shared/ui-generic-dialog/src/lib/components/generic-dialog/generic-dialog.component.html

@@ -0,0 +1,11 @@
+<mat-dialog-content>
+  <span>{{ message }}</span>
+</mat-dialog-content>
+<mat-dialog-actions>
+  <button [mat-dialog-close]="false" mat-button type="button">
+    {{ noOptionMsg | uppercase }}
+  </button>
+  <button [mat-dialog-close]="true" color="primary" mat-button type="button">
+    {{ yesOptionMsg | uppercase }}
+  </button>
+</mat-dialog-actions>

libs/pmp-web/shared/ui-generic-dialog/src/lib/components/generic-dialog/generic-dialog.component.scss

@@ -0,0 +1,3 @@
+.mat-dialog-actions {
+  justify-content: flex-end;
+}

libs/pmp-web/shared/ui-generic-dialog/src/lib/components/generic-dialog/generic-dialog.component.ts

@@ -0,0 +1,20 @@
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA } from '@angular/material';
+import { GenericDialogPayload } from '@pimp-my-pr/pmp-web/shared/domain';
+
+@Component({
+  selector: 'pimp-my-pr-generic-dialog',
+  templateUrl: './generic-dialog.component.html',
+  styleUrls: ['./generic-dialog.component.scss']
+})
+export class GenericDialogComponent {
+  message: string;
+  noOptionMsg: string;
+  yesOptionMsg: string;
+
+  constructor(@Inject(MAT_DIALOG_DATA) data: GenericDialogPayload) {
+    this.message = data && data.message ? data.message : 'Are you sure?';
+    this.noOptionMsg = data && data.noOptionMsg ? data.noOptionMsg : 'Cancel';
+    this.yesOptionMsg = data && data.yesOptionMsg ? data.yesOptionMsg : 'Yes';
+  }
+}