Display unsupported formats as disabled options, minor fixes

src/app/core/constants/attestations.ts

@@ -135,9 +135,7 @@ export const SUPPORTED_ATTESTATIONS: { [id: string]: Attestation } = {
   "age_over_18": AGE_OVER_18_ATTESTATION,
 }
 
-export const SUPPORTED_FORMATS: { [id: string]: AttestationFormat } = {
-  "mso_mdoc": AttestationFormat.MSO_MDOC,
-  "vc+sd-jwt": AttestationFormat.SD_JWT_VC,
-  "jwt_vc_json": AttestationFormat.JWT_VC_JSON,
-}
+export const SUPPORTED_FORMATS: AttestationFormat[] = [
+  AttestationFormat.MSO_MDOC
+]
 

src/app/features/presentation-request-preparation/components/attestation/attestation.component.html

@@ -20,7 +20,7 @@
         <mat-label>-- format --</mat-label>
         <mat-select matNativeControl [(value)]="selectedFormat" [formControl]="formatControl" (selectionChange)="emit()">
           <ng-container *ngFor="let format of supportedFormats">
-            <mat-option [value]="format.key">{{ format.value }}</mat-option>
+            <mat-option [value]="format.key" disabled="{{format.disabled}}">{{ format.value }}</mat-option>
           </ng-container>
         </mat-select>
         <mat-error *ngIf="formatControl.hasError('required')">Please choose an format</mat-error>

src/app/features/presentation-request-preparation/components/attestation/attestation.component.ts

@@ -11,6 +11,7 @@ import {SUPPORTED_ATTESTATIONS, SUPPORTED_FORMATS} from "@core/constants/attesta
 import {MatExpansionModule} from "@angular/material/expansion";
 import {AttestationFormat} from "@core/models/attestation/AttestationFormat";
 import {AttestationSelection} from "@features/presentation-request-preparation/models/ScenarioSelection";
+import {FormatSelectOption} from "@features/presentation-request-preparation/components/attestation/model/format-select-option";
 
 @Component({
   selector: 'vc-scenario-attestation',
@@ -33,7 +34,7 @@ export class AttestationComponent {
   @Input() attestation!: ScenarioAttestation;
   @Output() attestationSelectionEvent = new EventEmitter<AttestationSelection>();
 
-  protected readonly supportedFormats: KeyValue<string, string>[] = this.formats(SUPPORTED_FORMATS)
+  protected readonly supportedFormats: FormatSelectOption[] = this.formatOptions()
 
   methodControl = new FormControl<AttributeSelectionMethod | null>(null, Validators.required);
   formatControl = new FormControl<AttestationFormat | null>(null, Validators.required);
@@ -49,15 +50,21 @@ export class AttestationComponent {
     }
   }
 
-  formats(formats: { [p: string]: AttestationFormat }) {
-    let result: KeyValue<string, string>[] = [];
-    Object.keys(formats).forEach((item) => {
+  formatOptions(): FormatSelectOption[] {
+    function enumKeys<O extends object, K extends keyof O = keyof O>(obj: O): K[] {
+      return Object.keys(obj).filter(k => !Number.isNaN(k)) as K[]
+    }
+
+    let result: FormatSelectOption[] = [];
+    for (const enumKey of enumKeys(AttestationFormat)) {
+      const format = AttestationFormat[enumKey];
       result.push({
-        key: item,
-        value: formats[item]
-      });
-    });
-    return result;
+        key: format,
+        value: format,
+        disabled: !SUPPORTED_FORMATS.includes(format)
+      })
+    }
+    return result
   }
 
   emit() {
@@ -72,4 +79,5 @@ export class AttestationComponent {
     return SUPPORTED_ATTESTATIONS[attestation.attestationType as string].name
   }
 
+  protected readonly frameElement = frameElement;
 }

src/app/features/presentation-request-preparation/components/attestation/model/format-select-option.ts

@@ -0,0 +1,5 @@
+export type FormatSelectOption = {
+  key: string,
+  value: string,
+  disabled: boolean
+}

src/app/features/presentation-request-preparation/components/selectable-attestation-attributes/selectable-attestation-attributes.component.html

@@ -29,6 +29,6 @@ <h3>Select attributes of the attestation to be included in the request</h3>
 </mat-dialog-content>
 
 <mat-dialog-actions align="end">
-  <button mat-button mat-dialog-close (click)="saveSelection()">Select</button>
+  <button mat-button mat-dialog-close (click)="saveSelection()" [disabled]="!isSomethingSelected()">Select</button>
   <button mat-button mat-dialog-close>Close</button>
 </mat-dialog-actions>

src/app/features/presentation-request-preparation/components/selectable-attestation-attributes/selectable-attestation-attributes.component.ts

@@ -1,4 +1,4 @@
-import {ChangeDetectorRef, Component, inject, OnInit} from '@angular/core';
+import {Component, inject, OnInit} from '@angular/core';
 import {MsoMdocPresentationService} from "@app/core/services/mso-mdoc-presentation.service";
 import {VerifierEndpointService} from "@core/services/verifier-endpoint.service";
 import {FieldConstraint, Filter} from "@core/models/presentation/FieldConstraint";
@@ -45,7 +45,6 @@ export class SelectableAttestationAttributesComponent implements OnInit {
 
   constructor(
     private readonly msoMdocPresentationService: MsoMdocPresentationService,
-    private readonly changeDetectorRef: ChangeDetectorRef,
     private dialogRef: MatDialogRef<InputDescriptor>
   ) {
   }
@@ -59,11 +58,12 @@ export class SelectableAttestationAttributesComponent implements OnInit {
       this.selectedFields = this.seed.constraints.fields
       this.draftInputDescriptor = this.seed
     } else {
-      this.initEmptyInputDecriptor();
+      this.initEmptyInputDescriptor();
     }
+    this.inputDescriptorText = this.convertJSONtoString(this.draftInputDescriptor);
   }
 
-  initEmptyInputDecriptor() {
+  initEmptyInputDescriptor() {
     switch (this.attestationFormat) {
       case AttestationFormat.MSO_MDOC:
         let msomdoc = MSO_MDOC_BY_TYPE[this.attestationType as string];
@@ -91,7 +91,6 @@ export class SelectableAttestationAttributesComponent implements OnInit {
     this.draftInputDescriptor.constraints.fields = this.selectedFields;
     // refresh descriptor text from model
     this.inputDescriptorText = this.convertJSONtoString(this.draftInputDescriptor);
-    this.changeDetectorRef.detectChanges();
   }
 
   convertJSONtoString(obj: object) {
@@ -142,6 +141,10 @@ export class SelectableAttestationAttributesComponent implements OnInit {
     }).length > 0
   }
 
+  isSomethingSelected(): boolean {
+    return this.selectedFields.length > 0;
+  }
+
   areEqualConstraints(one: FieldConstraint, other: FieldConstraint): boolean {
     function pathsAreEqual(a: string[], b: string[]): boolean {
       if (a === b) return true;