feat(pmp): edit repository in settings - front

refs #107

apps/pmp-web/src/assets/styles/_global.scss

@@ -1,2 +1,3 @@
+@import 'components/add-edit-repository-dialog';
 @import 'components/content-loader';
 @import 'components/spinner-wrapper';

apps/pmp-web/src/assets/styles/components/_add-edit-repository-dialog.scss

@@ -0,0 +1,3 @@
+.add-edit-repository-dialog {
+  max-width: 500px;
+}

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

@@ -3,6 +3,7 @@ import { Action } from '@ngrx/store';
 import {
   AddRepositoryPayload,
   DeleteRepositoryPayload,
+  EditRepositoryPayload,
   Repository
 } from '@pimp-my-pr/pmp-web/repository/domain';
 
@@ -16,7 +17,10 @@ export namespace fromRepositoryActions {
     AddRepositorySuccess = '[Repository] Add Repository Success',
     DeleteRepository = '[Repository] Delete Repository',
     DeleteRepositoryFail = '[Repository] Delete Repository Fail',
-    DeleteRepositorySuccess = '[Repository] Delete Repository Success'
+    DeleteRepositorySuccess = '[Repository] Delete Repository Success',
+    EditRepository = '[Repository] Edit Repository',
+    EditRepositoryFail = '[Repository] Edit Repository Fail',
+    EditRepositorySuccess = '[Repository] Edit Repository Success'
   }
 
   export class GetRepositoryCollection implements Action {
@@ -67,6 +71,22 @@ export namespace fromRepositoryActions {
     readonly type = Types.DeleteRepositorySuccess;
   }
 
+  export class EditRepository implements Action {
+    readonly type = Types.EditRepository;
+
+    constructor(public payload: EditRepositoryPayload) {}
+  }
+
+  export class EditRepositoryFail implements Action {
+    readonly type = Types.EditRepositoryFail;
+
+    constructor(public payload: HttpErrorResponse) {}
+  }
+
+  export class EditRepositorySuccess implements Action {
+    readonly type = Types.EditRepositorySuccess;
+  }
+
   export type CollectiveType =
     | GetRepositoryCollection
     | GetRepositoryCollectionFail
@@ -76,5 +96,8 @@ export namespace fromRepositoryActions {
     | AddRepositorySuccess
     | DeleteRepository
     | DeleteRepositoryFail
-    | DeleteRepositorySuccess;
+    | DeleteRepositorySuccess
+    | EditRepository
+    | EditRepositoryFail
+    | EditRepositorySuccess;
 }

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

@@ -52,6 +52,22 @@ export class RepositoryEffects {
     ofType(fromRepositoryActions.Types.DeleteRepositorySuccess),
     map(() => new fromRepositoryActions.GetRepositoryCollection())
   );
+  @Effect()
+  editRepository$ = this.dp.fetch(fromRepositoryActions.Types.EditRepository, {
+    run: (action: fromRepositoryActions.EditRepository) => {
+      return this.repositoryDataService
+        .editRepository(action.payload)
+        .pipe(map(() => new fromRepositoryActions.EditRepositorySuccess()));
+    },
+    onError: (action: fromRepositoryActions.EditRepository, error: HttpErrorResponse) => {
+      return new fromRepositoryActions.EditRepositoryFail(error);
+    }
+  });
+  @Effect()
+  editRepositorySuccess$ = this.actions$.pipe(
+    ofType(fromRepositoryActions.Types.EditRepositorySuccess),
+    map(() => new fromRepositoryActions.GetRepositoryCollection())
+  );
 
   constructor(
     private dp: DataPersistence<RepositoryPartialState>,

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

@@ -2,7 +2,8 @@ import { Injectable } from '@angular/core';
 import { select, Store } from '@ngrx/store';
 import {
   AddRepositoryPayload,
-  DeleteRepositoryPayload
+  DeleteRepositoryPayload,
+  EditRepositoryPayload
 } from '@pimp-my-pr/pmp-web/repository/domain';
 import { fromRepositoryActions } from './repository.actions';
 import { RepositoryPartialState } from './repository.reducer';
@@ -40,4 +41,12 @@ export class RepositoryFacade {
       fromRepositoryActions.Types.DeleteRepositoryFail
     );
   }
+
+  editRepository(data: EditRepositoryPayload): Observable<void> {
+    return this.actionStatusResolverService.resolve(
+      new fromRepositoryActions.EditRepository(data),
+      fromRepositoryActions.Types.EditRepositorySuccess,
+      fromRepositoryActions.Types.EditRepositoryFail
+    );
+  }
 }

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

@@ -2,6 +2,7 @@ import { HttpClient } from '@angular/common/http';
 import {
   AddRepositoryPayload,
   DeleteRepositoryPayload,
+  EditRepositoryPayload,
   Repository
 } from '@pimp-my-pr/pmp-web/repository/domain';
 import { IResponse } from '@pimp-my-pr/shared/domain';
@@ -13,7 +14,8 @@ export class RepositoryDataService {
   readonly endpoints = {
     getRepositoryCollection: urlFactory('/api/repository'),
     addRepository: urlFactory('/api/repository'),
-    deleteRepository: urlFactory<'id'>('/api/repository/:id', true)
+    deleteRepository: urlFactory<'id'>('/api/repository/:id', true),
+    editRepository: urlFactory<'id'>('/api/repository/:id', true)
   };
 
   constructor(private http: HttpClient) {}
@@ -31,4 +33,11 @@ export class RepositoryDataService {
   deleteRepository(data: DeleteRepositoryPayload): Observable<void> {
     return this.http.delete<void>(this.endpoints.deleteRepository.url({ id: data.repositoryId }));
   }
+
+  editRepository(data: EditRepositoryPayload): Observable<void> {
+    return this.http.put<void>(this.endpoints.editRepository.url({ id: data.repositoryId }), {
+      maxLines: data.maxLines,
+      maxWaitingTime: data.maxWaitingTime
+    });
+  }
 }

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

@@ -1,6 +1,8 @@
 export * from './lib/interfaces/repository.model';
+export * from './lib/interfaces/add-edit-repository-dialog-data.interface';
 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';
+export * from './lib/payloads/edit-repository.payload';

libs/pmp-web/repository/domain/src/lib/interfaces/add-edit-repository-dialog-data.interface.ts

@@ -0,0 +1,8 @@
+import { Repository } from './repository.model';
+
+export interface AddEditRepositoryDialogData {
+  submitMsg: string;
+  dialogTitle: string;
+  isEditMode: boolean;
+  repositoryToEdit?: Repository;
+}

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

@@ -0,0 +1,5 @@
+export interface EditRepositoryPayload {
+  repositoryId: string;
+  maxLines?: number;
+  maxWaitingTime?: number;
+}

libs/pmp-web/repository/repository-settings/feature/src/lib/containers/add-repository-dialog/add-repository-dialog.component.html → libs/pmp-web/repository/repository-settings/feature/src/lib/containers/add-edit-repository-dialog/add-edit-repository-dialog.component.html

@@ -1,7 +1,7 @@
-<h1 mat-dialog-title>Add repository</h1>
+<h1 mat-dialog-title>{{ dialogTitle }}</h1>
 <div mat-dialog-content>
   <form [formGroup]="form" class="form--container">
-    <mat-form-field>
+    <mat-form-field *ngIf="!isEditMode">
       <mat-label>Repository Url</mat-label>
       <input formControlName="repositoryUrl" matInput />
       <mat-error>
@@ -33,7 +33,13 @@ <h1 mat-dialog-title>Add repository</h1>
 </div>
 <div mat-dialog-actions>
   <button mat-button mat-dialog-close>Cancel</button>
-  <button mat-button color="primary" type="submit" [disabled]="form.invalid" (click)="submit()">
-    Add
+  <button
+    mat-button
+    color="primary"
+    type="submit"
+    [disabled]="form.invalid || !form.dirty"
+    (click)="submit()"
+  >
+    {{ submitMsg }}
   </button>
 </div>

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

@@ -0,0 +1,135 @@
+import { ChangeDetectionStrategy, Component, Inject, OnDestroy, OnInit } from '@angular/core';
+import { RepositoryFacade } from '@pimp-my-pr/pmp-web/repository/data-access';
+import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
+import { TimeUnit } from '@pimp-my-pr/shared/domain';
+import { untilDestroyed } from 'ngx-take-until-destroy';
+import { AddEditRepositoryDialogData, Repository } from '@pimp-my-pr/pmp-web/repository/domain';
+import { SnackbarService } from '@pimp-my-pr/pmp-web/shared/domain';
+import { AddEditRepositoryDialogService } from './add-edit-repository-dialog.service';
+
+@Component({
+  selector: 'pmp-add-repository-dialog',
+  templateUrl: './add-edit-repository-dialog.component.html',
+  styleUrls: ['./add-edit-repository-dialog.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class AddEditRepositoryDialogComponent implements OnInit, OnDestroy {
+  dialogTitle: string;
+  form: FormGroup;
+  isEditMode: boolean;
+  maxWaitingTimeFormControl: FormControl;
+  repositoryToEdit: Repository;
+  submitMsg: string;
+  timeUnitFormControl: FormControl;
+  TimeUnit = TimeUnit;
+
+  constructor(
+    @Inject(MAT_DIALOG_DATA) data: AddEditRepositoryDialogData,
+    private repoFacade: RepositoryFacade,
+    private fb: FormBuilder,
+    private dialogRef: MatDialogRef<AddEditRepositoryDialogComponent>,
+    private snackbarService: SnackbarService,
+    private addEditRepositoryDialogService: AddEditRepositoryDialogService
+  ) {
+    if (!!data) {
+      this.dialogTitle = data.dialogTitle;
+      this.isEditMode = data.isEditMode;
+      this.repositoryToEdit = data.repositoryToEdit;
+      this.submitMsg = data.submitMsg;
+    }
+  }
+
+  ngOnDestroy(): void {}
+
+  ngOnInit(): void {
+    this.initForm();
+    this.initializeMaxWaitingTimeDefinitionControls();
+  }
+
+  initForm(): void {
+    this.form = this.addEditRepositoryDialogService.initForm(
+      this.isEditMode,
+      this.repositoryToEdit
+    );
+    this.form
+      .get('maxWaitingTimeDefinition')
+      .get('timeUnit')
+      .setValue(TimeUnit.Hour);
+  }
+
+  initializeMaxWaitingTimeDefinitionControls(): void {
+    this.maxWaitingTimeFormControl = (this.form.controls.maxWaitingTimeDefinition as FormGroup)
+      .controls.maxWaitingTime as FormControl;
+    this.timeUnitFormControl = (this.form.controls.maxWaitingTimeDefinition as FormGroup).controls
+      .timeUnit as FormControl;
+
+    this.maxWaitingTimeFormControl.valueChanges
+      .pipe(untilDestroyed(this))
+      .subscribe(this.updateTimeUnitValidation);
+  }
+
+  submit(): void {
+    if (this.form.valid) {
+      const { repositoryUrl, maxLines } = this.form.value;
+      const maxWaitingTime = this.maxWaitingTimeFormControl.value
+        ? this.maxWaitingTimeFormControl.value * this.timeUnitFormControl.value
+        : null;
+      if (this.isEditMode) {
+        this.editRepository(maxLines, maxWaitingTime);
+      } else {
+        this.addRepository(repositoryUrl, maxLines, maxWaitingTime);
+      }
+    }
+  }
+
+  updateTimeUnitValidation = (maxWaitingTime: number) => {
+    if (maxWaitingTime && maxWaitingTime > 0) {
+      this.timeUnitFormControl.setValidators(Validators.required);
+      this.timeUnitFormControl.markAsTouched();
+      this.timeUnitFormControl.enable();
+    } else {
+      this.timeUnitFormControl.markAsUntouched();
+      this.timeUnitFormControl.disable();
+      this.timeUnitFormControl.clearValidators();
+    }
+
+    this.timeUnitFormControl.updateValueAndValidity();
+  };
+
+  private addRepository(repositoryUrl: string, maxLines: number, maxWaitingTime: number): void {
+    this.repoFacade
+      .addRepository({
+        repositoryUrl,
+        maxLines,
+        maxWaitingTime
+      })
+      .subscribe(
+        () => {
+          this.snackbarService.open('Repository has been added');
+          this.dialogRef.close();
+        },
+        error => {
+          this.snackbarService.open('Something went wrong. Repository was not added');
+        }
+      );
+  }
+
+  private editRepository(maxLines: number, maxWaitingTime: number): void {
+    this.repoFacade
+      .editRepository({
+        repositoryId: this.repositoryToEdit.id,
+        maxLines,
+        maxWaitingTime
+      })
+      .subscribe(
+        () => {
+          this.snackbarService.open('Repository has been updated');
+          this.dialogRef.close();
+        },
+        error => {
+          this.snackbarService.open('Something went wrong. Repository was not updated');
+        }
+      );
+  }
+}

libs/pmp-web/repository/repository-settings/feature/src/lib/containers/add-edit-repository-dialog/add-edit-repository-dialog.service.ts

@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Repository } from '@pimp-my-pr/pmp-web/repository/domain';
+
+@Injectable()
+export class AddEditRepositoryDialogService {
+  constructor(private fb: FormBuilder) {}
+
+  initForm(isEditMode: boolean, repositoryToEdit: Repository): FormGroup {
+    return this.fb.group({
+      repositoryUrl: ['', isEditMode ? null : Validators.required],
+      maxLines: [repositoryToEdit ? repositoryToEdit.maxLines : null],
+      maxWaitingTimeDefinition: this.fb.group({
+        maxWaitingTime: [repositoryToEdit ? repositoryToEdit.maxWaitingTime : ''],
+        timeUnit: [{ value: '' }]
+      })
+    });
+  }
+}