-
Notifications
You must be signed in to change notification settings - Fork 12
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fix issue with next button observable used in selectable attributes f…
…orm. (#75) Co-authored-by: Vafeiadis Nikos <[email protected]>
- Loading branch information
Showing
8 changed files
with
144 additions
and
118 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
191 changes: 95 additions & 96 deletions
191
...ntation/components/selectable-presentation-form/selectable-presentation-form.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,137 +1,136 @@ | ||
| import { Component, OnInit, ChangeDetectorRef, Injector } from '@angular/core'; | ||
| import { catchError } from 'rxjs'; | ||
| import { PresentationDefinitionResponse } from '@core/models/presentation-definition-response'; | ||
| import { PresentationDefinitionService } from '@app/core/services/presentation-definition.service'; | ||
| import { FieldConstraint } from '../../models/FieldConstraint'; | ||
| import { DataService } from '@app/core/services/data.service'; | ||
| import { NavigateService } from '@app/core/services/navigate.service'; | ||
| import { FormSelectableField } from '@features/selectable-presentation/models/FormSelectableField'; | ||
| import { HelperCborSelectableService } from '../../services/helper-cbor-selectable.service'; | ||
| import { LocalStorageService } from '@app/core/services/local-storage.service'; | ||
| import {ChangeDetectorRef, Component, Injector, OnInit} from '@angular/core'; | ||
| import {catchError} from 'rxjs'; | ||
| import {PresentationDefinitionResponse} from '@core/models/presentation-definition-response'; | ||
| import {PresentationDefinitionService} from '@app/core/services/presentation-definition.service'; | ||
| import {FieldConstraint} from '../../models/FieldConstraint'; | ||
| import {DataService} from '@app/core/services/data.service'; | ||
| import {NavigateService} from '@app/core/services/navigate.service'; | ||
| import {FormSelectableField} from '@features/selectable-presentation/models/FormSelectableField'; | ||
| import {SelectableFormNextAction} from '../../services/selectable-form-next-action.service'; | ||
| import {LocalStorageService} from '@app/core/services/local-storage.service'; | ||
| import * as constants from '@core/constants/constants'; | ||
| import { Modification } from '@app/shared/elements/body-actions/models/modification'; | ||
| import { BodyActionsService } from '@app/shared/elements/body-actions/body-actions.service'; | ||
| import { Presentation } from '../../models/Presentation'; | ||
| import { AttestationSelectableModelService } from "@app/core/services/attestation-selectable-model.service"; | ||
| import { MsoMdocPresentationService } from "@app/core/services/mso-mdoc-presentation.service"; | ||
| import { MsoMdoc } from "@core/models/msoMdoc"; | ||
| import {Modification} from '@app/shared/elements/body-actions/models/modification'; | ||
| import {BodyActionsService} from '@app/shared/elements/body-actions/body-actions.service'; | ||
| import {Presentation} from '../../models/Presentation'; | ||
| import {AttestationSelectableModelService} from "@app/core/services/attestation-selectable-model.service"; | ||
| import {MsoMdocPresentationService} from "@app/core/services/mso-mdoc-presentation.service"; | ||
| import {MsoMdoc} from "@core/models/msoMdoc"; | ||
|
|
||
| @Component({ | ||
| selector: 'vc-create-a-scenario', | ||
| templateUrl: './selectable-presentation-form.component.html', | ||
| styleUrls: ['./selectable-presentation-form.component.scss'], | ||
| providers: [PresentationDefinitionService] | ||
| selector: 'vc-create-a-scenario', | ||
| templateUrl: './selectable-presentation-form.component.html', | ||
| styleUrls: ['./selectable-presentation-form.component.scss'], | ||
| providers: [PresentationDefinitionService] | ||
| }) | ||
| export class SelectablePresentationFormComponent implements OnInit { | ||
|
|
||
| formFields!: FormSelectableField[]; | ||
| requestGenerate = false; | ||
| buttonMode = 'none'; | ||
| formFields!: FormSelectableField[]; | ||
| buttonMode = 'none'; | ||
| attestationModel!: MsoMdoc; | ||
| draftPresentation!: Presentation; | ||
| presentationDefinitionText!: string; | ||
| selectedFields: FieldConstraint[] = []; | ||
| private readonly navigateService!: NavigateService; | ||
| private readonly helperCborSelectableService!: HelperCborSelectableService; | ||
| private readonly localStorageService!: LocalStorageService; | ||
| private readonly bodyActionsService!: BodyActionsService; | ||
| constructor ( | ||
| draftPresentation!: Presentation; | ||
| presentationDefinitionText!: string; | ||
| selectedFields: FieldConstraint[] = []; | ||
| private readonly navigateService!: NavigateService; | ||
| private readonly localStorageService!: LocalStorageService; | ||
| private readonly bodyActionsService!: BodyActionsService; | ||
|
|
||
| constructor( | ||
| private readonly selectableFormNextAction: SelectableFormNextAction, | ||
| private readonly presentationDefinitionService: PresentationDefinitionService, | ||
| private readonly attestationSelectableModelService: AttestationSelectableModelService, | ||
| private readonly msoMdocPresentationService: MsoMdocPresentationService, | ||
| private readonly dataService: DataService, | ||
| private readonly changeDetectorRef: ChangeDetectorRef, | ||
| private readonly injector: Injector, | ||
| ) { | ||
| this.navigateService = this.injector.get(NavigateService); | ||
| this.helperCborSelectableService = this.injector.get(HelperCborSelectableService); | ||
| this.localStorageService = this.injector.get(LocalStorageService); | ||
| this.bodyActionsService = this.injector.get(BodyActionsService); | ||
| ) { | ||
| this.navigateService = this.injector.get(NavigateService); | ||
| this.localStorageService = this.injector.get(LocalStorageService); | ||
| this.bodyActionsService = this.injector.get(BodyActionsService); | ||
|
|
||
| this.enableNextButton(); | ||
| } | ||
| } | ||
|
|
||
| ngOnInit (): void { | ||
| this.localStorageService.remove(constants.UI_PRESENTATION); | ||
| ngOnInit(): void { | ||
| this.localStorageService.remove(constants.UI_PRESENTATION); | ||
| this.initPresentationModel(); | ||
| // Init form from model | ||
| this.formFields = this.extractFormFieldsFromModel() | ||
| this.helperCborSelectableService.goNextStep$.subscribe(_ => { | ||
| this.generateCode(); | ||
| }); | ||
| } | ||
| this.selectableFormNextAction.subscribe(_ => { | ||
| this.generateCode(); | ||
| }); | ||
| } | ||
|
|
||
| initPresentationModel() { | ||
| this.attestationModel = this.attestationSelectableModelService.getModel(); | ||
| const presentationPurpose = this.attestationSelectableModelService.getPresentationPurpose(); | ||
| this.draftPresentation = this.msoMdocPresentationService.presentationOf(this.attestationModel, presentationPurpose, []) | ||
| } | ||
|
|
||
| generateCode () { | ||
| this.requestGenerate = true; | ||
| if (this.convertJSONtoString(this.draftPresentation)) { | ||
| this.buttonMode = 'loading'; | ||
| this.presentationDefinitionService.generateCode(this.convertJSONtoString(this.draftPresentation)) | ||
| .pipe( | ||
| catchError((error) => { | ||
| return error; | ||
| }) | ||
| ) | ||
| .subscribe((data) => { | ||
| this.buttonMode = 'none'; | ||
| this.requestGenerate = false; | ||
| this.dataService.setQRCode(data as PresentationDefinitionResponse); | ||
| this.navigateService.navigateTo('/cbor-selectable/verifiable'); | ||
| this.changeDetectorRef.detectChanges(); | ||
| }); | ||
| } else { | ||
| console.log('invalid JSON'); | ||
| } | ||
| } | ||
| handle (data: FormSelectableField) { | ||
| const value = data?.value; | ||
| if (!this.isExist(value.path[0])) { | ||
| this.selectedFields.push(value); | ||
| } else if (this.isExist(value.path[0])) { | ||
| this.selectedFields = this.selectedFields.filter((item: FieldConstraint) => { | ||
| return String(item.path) !== String(value.path[0]); | ||
| }); | ||
| } | ||
| generateCode() { | ||
| if (this.convertJSONtoString(this.draftPresentation)) { | ||
| this.buttonMode = 'loading'; | ||
| this.presentationDefinitionService.generateCode(this.convertJSONtoString(this.draftPresentation)) | ||
| .pipe( | ||
| catchError((error) => { | ||
| return error; | ||
| }) | ||
| ) | ||
| .subscribe((data) => { | ||
| this.buttonMode = 'none'; | ||
| this.dataService.setQRCode(data as PresentationDefinitionResponse); | ||
| this.navigateService.navigateTo('/cbor-selectable/verifiable'); | ||
| this.changeDetectorRef.detectChanges(); | ||
| }); | ||
| } else { | ||
| console.log('invalid JSON'); | ||
| } | ||
| } | ||
|
|
||
| handle(data: FormSelectableField) { | ||
| const value = data?.value; | ||
| if (!this.isExist(value.path[0])) { | ||
| this.selectedFields.push(value); | ||
| } else if (this.isExist(value.path[0])) { | ||
| this.selectedFields = this.selectedFields.filter((item: FieldConstraint) => { | ||
| return String(item.path) !== String(value.path[0]); | ||
| }); | ||
| } | ||
| // Update draft presentation with selected fields | ||
| this.draftPresentation.presentation_definition.input_descriptors[0].constraints.fields = this.selectedFields; | ||
| this.draftPresentation.presentation_definition.input_descriptors[0].constraints.fields = this.selectedFields; | ||
| // refresh PD text from model | ||
| this.presentationDefinitionText = this.convertJSONtoString(this.draftPresentation.presentation_definition); | ||
| this.enableNextButton(); | ||
| this.changeDetectorRef.detectChanges(); | ||
| } | ||
| this.presentationDefinitionText = this.convertJSONtoString(this.draftPresentation.presentation_definition); | ||
| this.enableNextButton(); | ||
| this.changeDetectorRef.detectChanges(); | ||
| } | ||
|
|
||
| convertJSONtoString (obj: object) { | ||
| return JSON.stringify(obj, null, '\t'); | ||
| } | ||
| convertJSONtoString(obj: object) { | ||
| return JSON.stringify(obj, null, '\t'); | ||
| } | ||
|
|
||
| isExist (path: string) { | ||
| const exists = this.selectedFields.filter((item) => item.path.includes(path)); | ||
| return exists.length > 0; | ||
| } | ||
| isExist(path: string) { | ||
| const exists = this.selectedFields.filter((item) => item.path.includes(path)); | ||
| return exists.length > 0; | ||
| } | ||
|
|
||
| enableNextButton () { | ||
| const modifyData: Modification = { | ||
| id: 'next_button', | ||
| disabled: this.selectedFields == undefined || this.selectedFields.length === 0 | ||
| }; | ||
| this.bodyActionsService.handelButton$.next(modifyData); | ||
| } | ||
| enableNextButton() { | ||
| const modifyData: Modification = { | ||
| id: 'next_button', | ||
| disabled: this.selectedFields == undefined || this.selectedFields.length === 0 | ||
| }; | ||
| this.bodyActionsService.handelButton$.next(modifyData); | ||
| } | ||
|
|
||
| extractFormFieldsFromModel(): FormSelectableField[] { | ||
| return this.attestationModel.attributes.map( (attr, index) => { | ||
| return this.attestationModel.attributes.map((attr, index) => { | ||
| return { | ||
| id: index, | ||
| label: attr.text, | ||
| value: this.msoMdocPresentationService.fieldConstraint(this.attestationModel, attr.value) | ||
| } | ||
| }) | ||
| } | ||
| trackByFn (_index: number, data: FormSelectableField) { | ||
| return data.id; | ||
| } | ||
|
|
||
| trackByFn(_index: number, data: FormSelectableField) { | ||
| return data.id; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
8 changes: 0 additions & 8 deletions
8
src/app/features/selectable-presentation/services/helper-cbor-selectable.service.ts
This file was deleted.
Oops, something went wrong.
8 changes: 4 additions & 4 deletions
8
...es/helper-cbor-selectable.service.spec.ts → ...lectable-form-next-action.service.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
34 changes: 34 additions & 0 deletions
34
src/app/features/selectable-presentation/services/selectable-form-next-action.service.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| import { Injectable } from '@angular/core'; | ||
| import {Subject, Subscription} from 'rxjs'; | ||
|
|
||
| @Injectable() | ||
| export class SelectableFormNextAction { | ||
|
|
||
| /** | ||
| * Next button subject that holds the action to be executed when next button is clicked | ||
| */ | ||
| private goNextStep$: Subject<string> = new Subject(); | ||
|
|
||
| /** | ||
| * An array to hold our subscriptions | ||
| */ | ||
| private subscriptions$: Array<Subscription> = new Array<Subscription>() | ||
|
|
||
| subscribe(observerOrNext: (value: string) => void) { | ||
| this.subscriptions$.push( | ||
| this.goNextStep$.subscribe(observerOrNext) | ||
| ) | ||
| } | ||
|
|
||
| next(goNext: string) { | ||
| this.goNextStep$.next(goNext) | ||
| } | ||
|
|
||
| /** | ||
| * Unsubscribes all subscriptions of goNextStep$ Subject | ||
| */ | ||
| clear() { | ||
| this.subscriptions$.forEach(subscription => subscription.unsubscribe()); | ||
| } | ||
|
|
||
| } |