adding a care team widget.

backend/pkg/web/handler/dashboard/testing.json

@@ -12,6 +12,15 @@
       "width": 8,
       "height": 6,
       "item_type": "records-summary-widget"
+    },
+    {
+      "title_text": "Care Team",
+      "description_text": "Track key metrics for your chronic disease (eg. Diabetes). The data within this widget is not reflective of your health record, and is only present for demonstrational purposes.",
+      "x": 8,
+      "y": 0,
+      "width": 4,
+      "height": 6,
+      "item_type": "image-list-group-widget"
     }
   ]
 }

frontend/src/app/models/widget/dashboard-widget-config.ts

@@ -3,7 +3,7 @@ import * as _ from 'lodash';
 
 export class DashboardWidgetConfig {
   id?: string
-  item_type: "complex-line-widget" | "donut-chart-widget" | "dual-gauges-widget" | "grouped-bar-chart-widget" | "patient-vitals-widget" | "simple-line-chart-widget" | "table-widget" | "records-summary-widget"
+  item_type: "image-list-group-widget" | "complex-line-widget" | "donut-chart-widget" | "dual-gauges-widget" | "grouped-bar-chart-widget" | "patient-vitals-widget" | "simple-line-chart-widget" | "table-widget" | "records-summary-widget"
 
   title_text: string
   description_text: string

frontend/src/app/widgets/image-list-group-widget/image-list-group-widget.component.html

@@ -0,0 +1,35 @@
+<ng-container [ngTemplateOutlet]="loading ? showLoading : (!loading && isEmpty) ? showEmpty : showChart"></ng-container>
+
+<ng-template #showLoading>
+  <loading-widget></loading-widget>
+</ng-template>
+
+<ng-template #showEmpty>
+  <empty-widget></empty-widget>
+</ng-template>
+
+<ng-template #showChart>
+  <ul class="list-group">
+    <li class="list-group-item d-flex align-items-center">
+      <img src="../img/faces/face6.jpg" class="wd-30 rounded-circle mg-r-15" alt="">
+      <div>
+        <h6 class="tx-13 tx-inverse tx-semibold mg-b-0">Dr. Ester Howard</h6>
+        <span class="d-block tx-11 text-muted">Neurologist, UCSF</span>
+      </div>
+    </li>
+    <li class="list-group-item d-flex align-items-center">
+      <img src="../img/faces/face7.jpg" class="wd-30 rounded-circle mg-r-15" alt="">
+      <div>
+        <h6 class="tx-13 tx-inverse tx-semibold mg-b-0">Dr. Joel Mendez</h6>
+        <span class="d-block tx-11 text-muted">General Medicine, Kaiser</span>
+      </div>
+    </li>
+    <li class="list-group-item d-flex align-items-center">
+      <img src="../img/faces/face8.jpg" class="wd-30 rounded-circle mg-r-15" alt="">
+      <div>
+        <h6 class="tx-13 tx-inverse tx-semibold mg-b-0">Dr. Marianne Audrey</h6>
+        <span class="d-block tx-11 text-muted">orthopedic surgeon, UCSF</span>
+      </div>
+    </li>
+  </ul>
+</ng-template><!-- card -->

frontend/src/app/widgets/image-list-group-widget/image-list-group-widget.component.spec.ts

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

frontend/src/app/widgets/image-list-group-widget/image-list-group-widget.component.ts

@@ -0,0 +1,35 @@
+import { Component, OnInit } from '@angular/core';
+import {NgChartsModule} from 'ng2-charts';
+import {CommonModule} from '@angular/common';
+import {LoadingWidgetComponent} from '../loading-widget/loading-widget.component';
+import {EmptyWidgetComponent} from '../empty-widget/empty-widget.component';
+import {DashboardWidgetComponent} from '../dashboard-widget/dashboard-widget.component';
+import {DashboardWidgetConfig} from '../../models/widget/dashboard-widget-config';
+
+@Component({
+  standalone: true,
+  imports: [NgChartsModule, CommonModule, LoadingWidgetComponent, EmptyWidgetComponent],
+  selector: 'image-list-group-widget',
+  templateUrl: './image-list-group-widget.component.html',
+  styleUrls: ['./image-list-group-widget.component.scss']
+})
+export class ImageListGroupWidgetComponent extends DashboardWidgetComponent implements OnInit {
+
+  ngOnInit(): void {
+    //manually define the widget config, rather than pull from the configuration file
+    this.widgetConfig = {
+      id: 'image-list-group-widget',
+      item_type: 'image-list-group-widget',
+      description_text: 'Displays a summary of patient records',
+      width: 4,
+      height: 5,
+      title_text: 'Medical Records',
+      queries: []
+
+    } as DashboardWidgetConfig
+    super.ngOnInit();
+    this.loading = false
+    this.isEmpty = false
+  }
+
+}

frontend/src/app/widgets/widgets.module.ts

@@ -10,6 +10,7 @@ import { LoadingWidgetComponent } from './loading-widget/loading-widget.componen
 import { EmptyWidgetComponent } from './empty-widget/empty-widget.component';
 import {DashboardWidgetComponent} from './dashboard-widget/dashboard-widget.component';
 import { RecordsSummaryWidgetComponent } from './records-summary-widget/records-summary-widget.component';
+import { ImageListGroupWidgetComponent } from './image-list-group-widget/image-list-group-widget.component';
 @NgModule({
   imports: [
 
@@ -20,14 +21,14 @@ import { RecordsSummaryWidgetComponent } from './records-summary-widget/records-
     GroupedBarChartWidgetComponent,
     PatientVitalsWidgetComponent,
     RecordsSummaryWidgetComponent,
+    ImageListGroupWidgetComponent,
     SimpleLineChartWidgetComponent,
     TableWidgetComponent,
     LoadingWidgetComponent,
     EmptyWidgetComponent
 
   ],
-  declarations: [
-  ],
+  declarations: [],
   exports: [
     //standalone components
     ComplexLineWidgetComponent,
@@ -36,6 +37,7 @@ import { RecordsSummaryWidgetComponent } from './records-summary-widget/records-
     GroupedBarChartWidgetComponent,
     PatientVitalsWidgetComponent,
     RecordsSummaryWidgetComponent,
+    ImageListGroupWidgetComponent,
     SimpleLineChartWidgetComponent,
     TableWidgetComponent,
     LoadingWidgetComponent,
@@ -56,6 +58,7 @@ export function WidgetComponents():  Type<Object>[] {
     GroupedBarChartWidgetComponent,
     PatientVitalsWidgetComponent,
     RecordsSummaryWidgetComponent,
+    ImageListGroupWidgetComponent,
     SimpleLineChartWidgetComponent,
     TableWidgetComponent,
     LoadingWidgetComponent,