Feature/1908 - Dashboard redesign

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

@@ -55,6 +55,7 @@ import { LoginService } from './shared/services/login.service';
 import { SharedModule } from './shared/shared.module';
 import { UsersModule } from './users/users.module';
 import { SchedulerAction, asyncScheduler } from 'rxjs';
+import { ReportsModule } from './reports/reports.module';
 
 // Save ngrx store to localStorage dynamically
 function localStorageSyncReducer(reducer: ActionReducer<AppState>): ActionReducer<AppState> {
@@ -125,6 +126,7 @@ const metaReducers: Array<MetaReducer<AppState, Action>> = [localStorageSyncRedu
     InputTextareaModule,
     OverlayPanelModule,
     SharedModule,
+    ReportsModule,
   ],
   providers: [
     CookieService,

front-end/src/app/dashboard/dashboard.component.html

@@ -1,55 +1,43 @@
-<div class="grid">
-  <div class="col-12">
-    <p-panel header="Upcoming Reports"></p-panel>
+<div class="container">
+  <div class="side">
+    <div class="card" id="in-progress-card">
+      <div class="card-body">
+        <h1 class="card-title">In-progress reports</h1>
+        <div id="report-container">
+          <p class="card-text" #reportText *ngFor="let report of reports">{{ report.report_code_label }}</p>
+        </div>
+      </div>
+      <div class="card-footer">
+        <a (click)="dialogVisible = true">
+          <span>Start a different report</span><img alt="next page icon" src="/assets/img/next_arrow.svg" />
+        </a>
+      </div>
+    </div>
+    <div class="card" id="cash-on-hand-card">
+      <div class="card-body">
+        <h1 class="card-title">Cash on-hand</h1>
+        <p class="card-text"></p>
+      </div>
+      <div class="card-footer"></div>
+    </div>
   </div>
-</div>
-<div class="grid">
-  <div class="col-6">
-    <p-panel header="Recent Saved Reports"></p-panel>
-  </div>
-  <div class="col-6">
-    <p-panel header="Submitted Reports"></p-panel>
-  </div>
-</div>
-<div class="grid">
-  <div class="col-4">
-    <p-panel header="Tips for Treasurers">
-      <ul>
-        <li>
-          <a href="https://www.fec.gov/updates/?update_type=tips-for-treasurers#feed" target="_blank" rel="noopener"
-            >Tips for Treasurers</a
-          >
-        </li>
-      </ul>
-    </p-panel>
-  </div>
-  <div class="col-4">
-    <p-panel header="Helpful Resources">
-      <ul>
-        <li>
-          <a href="https://www.fec.gov/data/committee/cmte_id/" target="_blank" rel="noopener"
-            >My Profile Page on fec.gov</a
-          >
-        </li>
-        <li>
-          <a href="https://www.fec.gov/help-candidates-and-committees/" target="_blank" rel="noopener"
-            >Contribution limits in special elections</a
-          >
-        </li>
-        <li><a href="https://www.fec.gov/efiling" target="_blank">Electronic Filing</a></li>
-        <li>
-          <a href="https://www.fec.gov/help-candidates-and-committees/question-rad/" target="_blank" rel="noopener"
-            >Submit a Question to Your Assigned Analyst</a
-          >
-        </li>
-      </ul>
-    </p-panel>
-  </div>
-  <div class="col-4">
-    <p-panel header="Tips for Treasurers">
-      <ul>
-        <li><a href="https://www.fec.gov/updates/" target="_blank" rel="noopener">Latest Updates</a></li>
-      </ul>
-    </p-panel>
+  <div class="side">
+    <div class="card" id="recently-submitted-card">
+      <div class="card-body">
+        <h1 class="card-title">Recently submitted reports</h1>
+        <p class="card-text"></p>
+      </div>
+      <div class="card-footer">
+        <a routerLink="/reports">
+          <span>Manage reports</span><img alt="next page icon" src="/assets/img/next_arrow.svg" />
+        </a>
+      </div>
+    </div>
   </div>
 </div>
+
+<app-form-type-dialog
+  [noReports]="reports.length === 0"
+  (dialogClose)="dialogVisible = false"
+  [dialogVisible]="dialogVisible"
+></app-form-type-dialog>

front-end/src/app/dashboard/dashboard.component.scss

@@ -0,0 +1,145 @@
+a {
+  font-family: karla, sans-serif;
+  font-weight: bold;
+  font-size: 18px;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-left: 0;
+  margin-top: 32px;
+  padding-left: 0;
+}
+
+.card {
+  margin-bottom: 20px;
+}
+
+.card-body {
+  background-color: #e8e8e8;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+  padding: 8px 20px 0 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.card-text {
+  background-color: white;
+  border-radius: 4px;
+  align-self: center;
+  padding: 0 8px;
+}
+
+.card-footer {
+  display: flex;
+  justify-content: end;
+  background-color: #e8e8e8;
+  border: 0;
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+  padding: 0 20px 16px 20px;
+}
+
+#in-progress-card {
+  height: 404px;
+}
+
+#report-container {
+  height: 308px;
+  max-height: 308px;
+  overflow: auto;
+
+  .card-text {
+    height: 144px;
+    min-height: 100px;
+    max-height: 308px;
+
+    &:not(:last-child) {
+      margin-bottom: 20px;
+    }
+  }
+}
+
+#cash-on-hand-card {
+  height: 154px;
+
+  .card-text {
+    height: 86px !important;
+  }
+}
+
+#recently-submitted-card {
+  height: 578px;
+
+  .card-text {
+    height: 482px !important;
+  }
+}
+
+.card-title {
+  font-size: 24px;
+  font-family: 'gandhi-bold', serif;
+  color: #212121;
+  margin: 0;
+  padding-bottom: 8px;
+}
+
+a {
+  border-bottom: none;
+
+  span {
+    border-bottom: 2px dotted #112e51;
+  }
+  img {
+    padding-left: 5px;
+  }
+}
+
+.card,
+.card-body,
+.card-footer {
+  width: 512px;
+}
+
+.side {
+  width: 100%;
+}
+
+@media screen and (min-width: 992px) {
+  .card,
+  .card-body,
+  .card-footer {
+    width: 704px;
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .side {
+    width: fit-content;
+  }
+
+  .container {
+    flex-direction: row;
+  }
+
+  #recently-submitted-card {
+    margin-left: 20px;
+  }
+
+  .card,
+  .card-body,
+  .card-footer {
+    width: 454px;
+  }
+}
+
+@media screen and (min-width: 1400px) {
+  .card,
+  .card-body,
+  .card-footer {
+    width: 558px;
+  }
+}

front-end/src/app/dashboard/dashboard.component.spec.ts

@@ -1,29 +1,72 @@
-import { HttpClientTestingModule } from '@angular/common/http/testing';
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { RouterTestingModule } from '@angular/router/testing';
-import { PanelModule } from 'primeng/panel';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { DashboardComponent } from './dashboard.component';
+import { ReportService } from 'app/shared/services/report.service';
+import { testActiveReport } from 'app/shared/utils/unit-test.utils';
+import { ElementRef, QueryList } from '@angular/core';
+import { Subject } from 'rxjs';
 
 describe('DashboardComponent', () => {
   let component: DashboardComponent;
   let fixture: ComponentFixture<DashboardComponent>;
+  let reportService: ReportService;
 
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      imports: [HttpClientTestingModule, RouterTestingModule, PanelModule, BrowserAnimationsModule],
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
       declarations: [DashboardComponent],
-      providers: [],
+      providers: [{ provide: ReportService, useValue: jasmine.createSpyObj('ReportService', ['getAllReports']) }],
     }).compileComponents();
-  }));
+
+    reportService = TestBed.inject(ReportService);
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(DashboardComponent);
     component = fixture.componentInstance;
-    fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should call getAllReports on ngOnInit', async () => {
+    const reports = [testActiveReport];
+    (reportService.getAllReports as jasmine.Spy).and.returnValue(Promise.resolve(reports));
+    await component.ngOnInit();
+    expect(reportService.getAllReports).toHaveBeenCalled();
+    expect(component.reports).toEqual(reports);
+  });
+
+  it('should adjust height on ngAfterViewInit', () => {
+    spyOn(component, 'adjustHeight');
+    const changes = new Subject();
+    const elements = {
+      changes: changes.asObservable(),
+    };
+    component.elements = elements as unknown as QueryList<ElementRef>;
+    component.ngAfterViewInit();
+
+    changes.next({});
+    expect(component.adjustHeight).toHaveBeenCalled();
+  });
+
+  it('should adjust height of elements', () => {
+    const elements = [createElement()];
+    component.adjustHeight(elements);
+    expect(elements[0].nativeElement.style.height).toEqual('308px');
+
+    elements.push(createElement());
+    component.adjustHeight(elements);
+    expect(elements[0].nativeElement.style.height).toEqual('144px');
+
+    elements.push(createElement());
+    component.adjustHeight(elements);
+    expect(elements[0].nativeElement.style.height).toEqual('100px');
+  });
 });
+
+function createElement(): ElementRef<HTMLParagraphElement> {
+  const p = document.createElement('p');
+  p.className = 'card-text';
+  p.textContent = 'APRIL 15 QUARTERLY REPORT (Q1)';
+  return new ElementRef(p);
+}