Adds save draft

modules/ui/src/app/mocks/profile.mock.ts

@@ -121,6 +121,27 @@ export const NEW_PROFILE_MOCK = {
   ],
 };
 
+export const NEW_PROFILE_MOCK_DRAFT = {
+  status: ProfileStatus.DRAFT,
+  name: 'New profile',
+  questions: [
+    { question: 'Email', answer: '' },
+    {
+      question: 'What type of device do you need reviewed?',
+      answer: '',
+    },
+    {
+      question: 'Are any of the following statements true about your device?',
+      answer: '',
+    },
+    {
+      question: 'What features does the device have?',
+      answer: [],
+    },
+    { question: 'Comments', answer: '' },
+  ],
+};
+
 export const RENAME_PROFILE_MOCK = {
   ...NEW_PROFILE_MOCK,
   name: 'Primary profile',

modules/ui/src/app/pages/risk-assessment/profile-form/profile-form.component.html

@@ -68,15 +68,14 @@
     [disabled]="
       !profileForm.valid || (profileForm.valid && profileForm.pristine)
     "
-    (click)="onSaveClick()">
+    (click)="onSaveClick(ProfileStatus.VALID)">
     Save Profile
   </button>
   <button
     mat-button
     class="save-draft-button"
-    [disabled]="
-      !nameControl.valid || (profileForm.valid && profileForm.pristine)
-    ">
+    [disabled]="isDraftDisabled"
+    (click)="onSaveClick(ProfileStatus.DRAFT)">
     Save Draft
   </button>
 </div>

modules/ui/src/app/pages/risk-assessment/profile-form/profile-form.component.spec.ts

@@ -19,12 +19,13 @@ import { ProfileFormComponent } from './profile-form.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import {
   NEW_PROFILE_MOCK,
+  NEW_PROFILE_MOCK_DRAFT,
   PROFILE_FORM,
   PROFILE_MOCK,
   PROFILE_MOCK_2,
   RENAME_PROFILE_MOCK,
 } from '../../../mocks/profile.mock';
-import { FormControlType } from '../../../model/profile';
+import { FormControlType, ProfileStatus } from '../../../model/profile';
 
 describe('ProfileFormComponent', () => {
   let component: ProfileFormComponent;
@@ -296,19 +297,51 @@ describe('ProfileFormComponent', () => {
     });
 
     describe('Draft button', () => {
-      it('should be enabled when valid profile name is present', () => {
-        const name: HTMLInputElement = compiled.querySelector(
-          '.form-name'
-        ) as HTMLInputElement;
-        name.value = 'name';
-        name.dispatchEvent(new Event('input'));
+      it('should be disabled when profile name is empty', () => {
+        component.nameControl.setValue('');
+        fixture.detectChanges();
+        const draftButton = compiled.querySelector(
+          '.save-draft-button'
+        ) as HTMLButtonElement;
+
+        expect(draftButton.disabled).toBeTrue();
+      });
+
+      it('should be disabled when profile name is not empty but other fields in wrong format', () => {
+        component.nameControl.setValue('New profile');
+        component.getControl('0').setValue('test');
+        fixture.detectChanges();
+        const draftButton = compiled.querySelector(
+          '.save-draft-button'
+        ) as HTMLButtonElement;
+
+        expect(draftButton.disabled).toBeTrue();
+      });
+
+      it('should be enabled when profile name is not empty; other fields are empty or in correct format', () => {
+        component.nameControl.setValue('New profile');
+        component.getControl('0').setValue('[email protected];[email protected], [email protected]');
         fixture.detectChanges();
         const draftButton = compiled.querySelector(
           '.save-draft-button'
         ) as HTMLButtonElement;
 
         expect(draftButton.disabled).toBeFalse();
       });
+
+      it('should emit new profile in draft status', () => {
+        component.nameControl.setValue('New profile');
+        fixture.detectChanges();
+        const emitSpy = spyOn(component.saveProfile, 'emit');
+        const draftButton = compiled.querySelector(
+          '.save-draft-button'
+        ) as HTMLButtonElement;
+        draftButton.click();
+
+        expect(emitSpy).toHaveBeenCalledWith({
+          ...NEW_PROFILE_MOCK_DRAFT,
+        });
+      });
     });
 
     describe('Save button', () => {
@@ -349,7 +382,7 @@ describe('ProfileFormComponent', () => {
       it('save profile should have rename field', () => {
         const emitSpy = spyOn(component.saveProfile, 'emit');
         fillForm(component);
-        component.onSaveClick();
+        component.onSaveClick(ProfileStatus.VALID);
 
         expect(emitSpy).toHaveBeenCalledWith(RENAME_PROFILE_MOCK);
       });
@@ -364,7 +397,7 @@ describe('ProfileFormComponent', () => {
       it('save profile should not have rename field', () => {
         const emitSpy = spyOn(component.saveProfile, 'emit');
         fillForm(component);
-        component.onSaveClick();
+        component.onSaveClick(ProfileStatus.VALID);
 
         expect(emitSpy).toHaveBeenCalledWith(NEW_PROFILE_MOCK);
       });

modules/ui/src/app/pages/risk-assessment/profile-form/profile-form.component.ts

@@ -75,6 +75,7 @@ export class ProfileFormComponent implements OnInit {
   private profile: Profile | null = null;
   private injector = inject(Injector);
   public readonly FormControlType = FormControlType;
+  public readonly ProfileStatus = ProfileStatus;
   profileForm: FormGroup = this.fb.group({});
   @ViewChildren(CdkTextareaAutosize)
   autosize!: QueryList<CdkTextareaAutosize>;
@@ -105,6 +106,23 @@ export class ProfileFormComponent implements OnInit {
     }
   }
 
+  get isDraftDisabled(): boolean {
+    return (
+      !this.nameControl.valid ||
+      this.fieldsHasError ||
+      (this.profileForm.valid && this.profileForm.pristine)
+    );
+  }
+
+  private get fieldsHasError(): boolean {
+    return this.profileFormat.some((field, index) => {
+      return (
+        this.getControl(index).hasError('invalid_format') ||
+        this.getControl(index).hasError('maxlength')
+      );
+    });
+  }
+
   get nameControl() {
     return this.getControl('name');
   }
@@ -191,11 +209,11 @@ export class ProfileFormComponent implements OnInit {
     this.triggerResize();
   }
 
-  onSaveClick() {
+  onSaveClick(status: ProfileStatus) {
     const response = this.buildResponseFromForm(
       this.profileFormat,
       this.profileForm,
-      ProfileStatus.VALID,
+      status,
       this.selectedProfile
     );
     this.saveProfile.emit(response);