import { ToastrService } from 'ngx-toastr'; import { Observable, Subject } from 'rxjs'; import { first, takeUntil } from 'rxjs/operators'; import * as uuid from 'uuid'; import { Component, OnDestroy, OnInit } from '@angular/core'; import { FormArray, FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms'; import { ActivatedRoute, Router } from '@angular/router'; import { ApiKeyService } from '../../store'; import { omit } from 'ramda'; @Component({ templateUrl: './detail.page.html' }) export class DetailPageComponent implements OnInit, OnDestroy { private componentDestroyed$: Subject<boolean> = new Subject<boolean>(); public form: FormGroup; public apiKeyFieldDisabled = true; public apiKeyFieldType = 'password'; public role: any; constructor( private apiKeyService: ApiKeyService, private formBuilder: FormBuilder, private activatedRoute: ActivatedRoute, private router: Router, private toastr: ToastrService, ) { } public generateKey(e: Event): void { e.preventDefault(); this.form.patchValue({ key: uuid.v4() }); this.apiKeyFieldDisabled = false; this.apiKeyFieldType = 'text'; } public ngOnInit(): void { this.apiKeyService.fetchOne(this.activatedRoute.snapshot.params.id) .pipe( takeUntil(this.componentDestroyed$) ).subscribe((role) => { this.role = { ...role, permissions: role.permissions.reduce((acc, permission) => ({ ...acc, [permission.permission]: true, }), {}) }; this.buildForm(); }); } public buildForm() { this.form = this.formBuilder.group({ name: ['', Validators.required], key: ['', Validators.required], permissions: [], }); this.form.patchValue(this.role); } public generateHeader(): string { return btoa(`${this.form.get('key').value}:`); } public submit(e: Event) { e.preventDefault(); this.apiKeyService.update( this.activatedRoute.snapshot.params.id, this.apiKeyFieldDisabled ? omit(['key'])(this.form.value) : this.form.value ) .pipe( first() ).subscribe(() => { this.toastr.success('Api key updated', 'Success'); }); } public delete(e: Event) { e.preventDefault(); this.apiKeyService.delete( this.activatedRoute.snapshot.params.id ) .pipe( first() ).subscribe(() => { this.router.navigate(['../'], { relativeTo: this.activatedRoute }); this.toastr.warning('Api key deleted', 'Success'); }); } public ngOnDestroy(): void { this.componentDestroyed$.next(true); this.componentDestroyed$.complete(); } }