Merge pull request #2084 from fecgov/feature/1513

feature/1513 - Convert Save/cancel into a component as we use the same format for all of the forms using the code form the already fixed Form 99 to now work for Form 1M as well

front-end/src/app/reports/f1m/main-form/main-form.component.html

@@ -435,34 +435,7 @@ <h4>Candidate #{{ i + 1 }}</h4>
       </ng-container>
     </ng-container>
   </form>
-  <div class="grid">
-    <div class="col-2">
-      <button pButton pRipple label="Back" (click)="goBack()" class="p-button-secondary"></button>
-    </div>
-    <div class="col-5"></div>
-    <div class="col-2 align-right">
-      <button
-        pButton
-        pRipple
-        appSingleClick
-        label="Save"
-        (click)="save()"
-        data-cy="save-and-end"
-        class="p-button-primary"
-      ></button>
-    </div>
-    <div class="col-3 align-right">
-      <button
-        pButton
-        pRipple
-        appSingleClick
-        label="Save and continue"
-        (click)="save('continue')"
-        data-cy="save-and-continue"
-        class="p-button-info"
-      ></button>
-    </div>
-  </div>
 </div>
+<app-save-cancel (save)="save($event)" (cancel)="goBack()"></app-save-cancel>
 
 <p-confirmDialog key="dialog" [style]="{ width: '450px' }"></p-confirmDialog>

front-end/src/app/reports/f99/main-form/main-form.component.html

@@ -80,19 +80,4 @@ <h3>Text Information</h3>
     <p-divider></p-divider>
   </form>
 </div>
-<div class="d-flex justify-content-between">
-  <div>
-    <button pButton pRipple label="Back" (click)="goBack()" class="p-button-secondary"></button>
-  </div>
-  <div>
-    <button pButton pRipple appSingleClick label="Save" (click)="save()" class="p-button-primary"></button>
-    <button
-      pButton
-      pRipple
-      appSingleClick
-      label="Save and continue"
-      (click)="save('continue')"
-      class="p-button-info ml-4"
-    ></button>
-  </div>
-</div>
+<app-save-cancel (save)="save($event)" (cancel)="goBack()"></app-save-cancel>

front-end/src/app/shared/components/save-cancel/save-cancel.component.html

@@ -0,0 +1,16 @@
+<div class="d-flex justify-content-between">
+  <div>
+    <button pButton pRipple label="Back" (click)="cancel.emit()" class="p-button-secondary"></button>
+  </div>
+  <div>
+    <button pButton pRipple appSingleClick label="Save" (click)="save.emit()" class="p-button-primary"></button>
+    <button
+      pButton
+      pRipple
+      appSingleClick
+      label="Save and continue"
+      (click)="save.emit('continue')"
+      class="p-button-info ml-4"
+    ></button>
+  </div>
+</div>

front-end/src/app/shared/components/save-cancel/save-cancel.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SaveCancelComponent } from './save-cancel.component';
+
+describe('SaveCancelComponent', () => {
+  let component: SaveCancelComponent;
+  let fixture: ComponentFixture<SaveCancelComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [SaveCancelComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SaveCancelComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

front-end/src/app/shared/components/save-cancel/save-cancel.component.ts

@@ -0,0 +1,10 @@
+import { Component, EventEmitter, Output } from '@angular/core';
+
+@Component({
+  selector: 'app-save-cancel',
+  templateUrl: './save-cancel.component.html',
+})
+export class SaveCancelComponent {
+  @Output() save = new EventEmitter<'continue' | undefined>();
+  @Output() cancel = new EventEmitter();
+}

front-end/src/app/shared/shared.module.ts

@@ -64,6 +64,7 @@ import { PaginatorModule } from 'primeng/paginator';
 import { DownloadTrayComponent } from './components/download-tray/download-tray.component';
 import { SidebarModule } from 'primeng/sidebar';
 import { InputNumberComponent } from './components/inputs/input-number/input-number.component';
+import { SaveCancelComponent } from './components/save-cancel/save-cancel.component';
 
 @NgModule({
   imports: [
@@ -138,6 +139,7 @@ import { InputNumberComponent } from './components/inputs/input-number/input-num
     TableComponent,
     DownloadTrayComponent,
     InputNumberComponent,
+    SaveCancelComponent,
   ],
   exports: [
     FecDatePipe,
@@ -180,6 +182,7 @@ import { InputNumberComponent } from './components/inputs/input-number/input-num
     TableComponent,
     DownloadTrayComponent,
     InputNumberComponent,
+    SaveCancelComponent,
   ],
   providers: [DatePipe, CurrencyPipe],
 })