From 9d3dc5fd2a35badb7d49224930b8f49b32efeb56 Mon Sep 17 00:00:00 2001 From: LiWeiYeh Date: Thu, 22 Dec 2022 13:46:55 +0100 Subject: [PATCH 1/7] placed properties in BaseAtomicComponent --- .../BaseAtomicComponent.class.ts | 10 +++++++ .../atomic-alphanumeric.component.ts | 26 +++++-------------- 2 files changed, 16 insertions(+), 20 deletions(-) diff --git a/src/app/shared/atomic-components/BaseAtomicComponent.class.ts b/src/app/shared/atomic-components/BaseAtomicComponent.class.ts index b3c694cc7..63204de0f 100644 --- a/src/app/shared/atomic-components/BaseAtomicComponent.class.ts +++ b/src/app/shared/atomic-components/BaseAtomicComponent.class.ts @@ -1,4 +1,5 @@ import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core'; +import { Resource } from '../interfacing/resource.interface'; @Component({ template: '', @@ -8,6 +9,15 @@ export abstract class BaseAtomicComponent implements OnInit, OnChanges { // TODO Refactor to combination of parent-propertyName. We need a link to the parent anyway property: T | Array | null = null; + @Input() + // The type of the T for Resource is not relevant nor to be determined here; therefore unknown + // We require a Resource, that implements the required methods (like patch) + // Most likely this is a top-level component for a specific application interface (e.g. ProjectComponent) + resource!: Resource; + + @Input() + propertyName!: string; + public data: Array = []; private _isUni: boolean = false; diff --git a/src/app/shared/atomic-components/atomic-alphanumeric/atomic-alphanumeric.component.ts b/src/app/shared/atomic-components/atomic-alphanumeric/atomic-alphanumeric.component.ts index 74f0fc5e4..eee83da81 100644 --- a/src/app/shared/atomic-components/atomic-alphanumeric/atomic-alphanumeric.component.ts +++ b/src/app/shared/atomic-components/atomic-alphanumeric/atomic-alphanumeric.component.ts @@ -1,8 +1,6 @@ -import { Component, Input, OnInit } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { BaseAtomicComponent } from '../BaseAtomicComponent.class'; import { FormControl } from '@angular/forms'; -import { debounceTime, distinctUntilChanged, map, tap } from 'rxjs'; -import { Resource } from '../../interfacing/resource.interface'; @Component({ selector: 'app-atomic-alphanumeric', @@ -10,29 +8,16 @@ import { Resource } from '../../interfacing/resource.interface'; styleUrls: ['./atomic-alphanumeric.component.css'], }) export class AtomicAlphanumericComponent extends BaseAtomicComponent implements OnInit { + // make generic and put in BaseAtomicComponent class formControl!: FormControl; newItemControl: FormControl = new FormControl('', { nonNullable: true, updateOn: 'blur' }); - @Input() - // The type of the T for Resource is not relevant nor to determine here; therefore unknow - // We require a Resource, that implements the required methods (like patch) - // Most likely this is a top-level component for a specific application interface (e.g. ProjectComponent) - resource!: Resource; // TODO move to the base class. It is needed for all atomic components - - @Input() - propertyName!: string; // TODO move to the base class. It is needed for all atomic components - override ngOnInit(): void { super.ngOnInit(); this.formControl = new FormControl(this.data[0], { nonNullable: false, updateOn: 'blur' }); - this.formControl.valueChanges - .pipe( - debounceTime(300), - distinctUntilChanged(), - map((x) => (x === '' ? null : x)), // transform empty string to null value - ) - .subscribe((x) => + this.formControl.valueChanges.subscribe( + (x) => this.resource .patch([ { @@ -42,6 +27,7 @@ export class AtomicAlphanumericComponent extends BaseAtomicComponent imp }, ]) .subscribe(), - ); + // .subscribe(() => this.resource.data$.subscribe((x: any) => console.log(x))), + ); } } From b52a7a2178eab3ddea37133e409eb364ad4828d6 Mon Sep 17 00:00:00 2001 From: LiWeiYeh Date: Thu, 22 Dec 2022 13:47:36 +0100 Subject: [PATCH 2/7] apply edit functionality for BigAlphanumeric isUni --- .../project-edit/project-edit.component.html | 2 ++ .../project-edit/project-edit.component.ts | 5 ++-- .../atomic-bigalphanumeric.component.html | 10 ++------ .../atomic-bigalphanumeric.component.ts | 25 ++++++++++++++++++- 4 files changed, 30 insertions(+), 12 deletions(-) diff --git a/src/app/project-administration/project-edit/project-edit.component.html b/src/app/project-administration/project-edit/project-edit.component.html index 5acc17a7e..49ca491b3 100644 --- a/src/app/project-administration/project-edit/project-edit.component.html +++ b/src/app/project-administration/project-edit/project-edit.component.html @@ -21,6 +21,8 @@
{{ data.Name }}
{ public data$!: Observable; public projectId!: string; - constructor(private route: ActivatedRoute, private service: BackendService) {} ngOnInit(): void { diff --git a/src/app/shared/atomic-components/atomic-bigalphanumeric/atomic-bigalphanumeric.component.html b/src/app/shared/atomic-components/atomic-bigalphanumeric/atomic-bigalphanumeric.component.html index c5486e079..d9bc8b819 100644 --- a/src/app/shared/atomic-components/atomic-bigalphanumeric/atomic-bigalphanumeric.component.html +++ b/src/app/shared/atomic-components/atomic-bigalphanumeric/atomic-bigalphanumeric.component.html @@ -3,7 +3,7 @@