feat: added consent form tab

.github/workflows/main.yml

@@ -5,34 +5,33 @@ name: CI
 # Controls when the action will run. Triggers the workflow on push or pull request
 # events but only for the master branch
 on:
-  push:
-    branches: [ master ]
-  pull_request:
-    branches: [ master ]
+    push:
+        branches: [master]
+    pull_request:
+        branches: [master]
 
 # A workflow run is made up of one or more jobs that can run sequentially or in parallel
 jobs:
-  # This workflow contains a single job called "build"
-  build:
-    # The type of runner that the job will run on
-    runs-on: ubuntu-latest
+    # This workflow contains a single job called "build"
+    build:
+        # The type of runner that the job will run on
+        runs-on: ubuntu-latest
 
-    # Steps represent a sequence of tasks that will be executed as part of the job
-    steps:
-    # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
-    - uses: actions/checkout@v2
+        # Steps represent a sequence of tasks that will be executed as part of the job
+        steps:
+            # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
+            - uses: actions/checkout@v2
 
-
-    # Setup Node
-    - name: Setup Node
-      uses: actions/setup-node@v1
-      with:
-        node-version: '12.x'
+            # Setup Node
+            - name: Setup Node
+              uses: actions/setup-node@v1
+              with:
+                  node-version: '14'
 
-    # Install Dependencies
-    - name: Install Dependencies
-      run: npm install
-      
-    # Build
-    - name: Build
-      run: npm run build
+            # Install Dependencies
+            - name: Install Dependencies
+              run: npm install
+
+            # Build
+            - name: Build
+              run: npm run build

src/app/pages/admin/admin-dashboard/study-components/study-components.component.html

@@ -19,4 +19,9 @@
             <app-view-info-displays></app-view-info-displays>
         </div>
     </mat-tab>
+    <mat-tab label="Consent Forms">
+        <div class="p-4">
+            <app-view-consents></app-view-consents>
+        </div>
+    </mat-tab>
 </mat-tab-group>

src/app/pages/admin/admin-dashboard/study-components/view-consents/view-consents.component.html

@@ -0,0 +1,6 @@
+<div>
+    <app-view-components-table
+        [data]="consentsForTable | async"
+        (rowRun)="showConsent($event)"
+    ></app-view-components-table>
+</div>

src/app/pages/admin/admin-dashboard/study-components/view-consents/view-consents.component.spec.ts

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

src/app/pages/admin/admin-dashboard/study-components/view-consents/view-consents.component.ts

@@ -0,0 +1,48 @@
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { RouteNames, TaskType } from 'src/app/models/enums';
+import { Task } from 'src/app/models/Task';
+import { ReaderNavigationConfig } from 'src/app/pages/tasks/shared/base-reader';
+import { TaskService } from 'src/app/services/task.service';
+import { ViewComponentsTableModel } from '../shared/view-components-table/view-components-table.component';
+
+@Component({
+    selector: 'app-view-consents',
+    templateUrl: './view-consents.component.html',
+    styleUrls: ['./view-consents.component.scss'],
+})
+export class ViewConsentsComponent {
+    constructor(private taskService: TaskService, private router: Router) {}
+
+    get consentsForTable(): Observable<ViewComponentsTableModel<Task>> {
+        return this.taskService.tasks.pipe(
+            map((tasks) => (tasks ? tasks.filter((task) => task.taskType === TaskType.CONSENT) : [])),
+            map((tasks) => ({
+                tableConfig: [
+                    {
+                        columnHeader: 'Name',
+                        columnKey: 'name',
+                    },
+                    {
+                        columnHeader: 'Description',
+                        columnKey: 'description',
+                    },
+                ],
+                tableData: tasks,
+                msgOnEmpty: 'No consent forms to display',
+                tableTitle: '',
+            }))
+        );
+    }
+
+    showConsent(consent: Task) {
+        const infoDisplayConfig: ReaderNavigationConfig = {
+            metadata: consent.config,
+            mode: 'test',
+        };
+
+        this.router.navigate([`${RouteNames.CONSENT}`], { state: infoDisplayConfig });
+    }
+}

src/app/pages/admin/admin.module.ts

@@ -19,6 +19,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { CreateModifyStudyComponent } from './admin-dashboard/studies/create-modify-study/create-modify-study.component';
 import { ViewInfoDisplaysComponent } from './admin-dashboard/study-components/view-info-displays/view-info-displays.component';
 import { ViewComponentsTableComponent } from './admin-dashboard/study-components/shared/view-components-table/view-components-table.component';
+import { ViewConsentsComponent } from './admin-dashboard/study-components/view-consents/view-consents.component';
 
 @NgModule({
     declarations: [
@@ -35,6 +36,7 @@ import { ViewComponentsTableComponent } from './admin-dashboard/study-components
         DataTableComponent,
         ViewInfoDisplaysComponent,
         ViewComponentsTableComponent,
+        ViewConsentsComponent,
     ],
     imports: [
         CommonModule,

src/app/pages/shared/consent-component/consent-reader.component.ts

@@ -1,6 +1,6 @@
-import { Component, Input, Output, EventEmitter } from "@angular/core";
-import { Router } from "@angular/router";
-import { AbstractBaseReaderComponent } from "../../tasks/shared/base-reader";
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Router } from '@angular/router';
+import { AbstractBaseReaderComponent } from '../../tasks/shared/base-reader';
 
 class ConsentForm {
     img: string;
@@ -29,13 +29,13 @@ class ConsentForm {
 
 export class ConsentNavigationConfig {
     metadata: ConsentForm;
-    mode: "test" | "actual";
+    mode: 'test' | 'actual';
 }
 
 @Component({
-    selector: "app-consent",
-    templateUrl: "./consent-reader.component.html",
-    styleUrls: ["./consent-reader.component.scss"],
+    selector: 'app-consent',
+    templateUrl: './consent-reader.component.html',
+    styleUrls: ['./consent-reader.component.scss'],
 })
 export class ConsentReaderComponent implements AbstractBaseReaderComponent {
     @Input()
@@ -53,8 +53,6 @@ export class ConsentReaderComponent implements AbstractBaseReaderComponent {
     }
 
     onSubmit(response: boolean) {
-        if (this.readerMetadata.mode !== "test") {
-            this.emitConsent.next(response);
-        }
+        this.emitConsent.next(response);
     }
 }

src/app/pages/tasks/consent/consent-page/consent-page.component.ts

@@ -1,15 +1,15 @@
-import { Component, OnInit } from "@angular/core";
-import { Router } from "@angular/router";
-import { take } from "rxjs/operators";
-import { ParticipantRouteNames } from "src/app/models/enums";
-import { ConsentNavigationConfig } from "src/app/pages/shared/consent-component/consent-reader.component";
-import { ConfirmationService } from "src/app/services/confirmation/confirmation.service";
-import { TaskManagerService } from "src/app/services/task-manager.service";
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { take } from 'rxjs/operators';
+import { AdminRouteNames, ParticipantRouteNames, RouteNames } from 'src/app/models/enums';
+import { ConsentNavigationConfig } from 'src/app/pages/shared/consent-component/consent-reader.component';
+import { ConfirmationService } from 'src/app/services/confirmation/confirmation.service';
+import { TaskManagerService } from 'src/app/services/task-manager.service';
 
 @Component({
-    selector: "app-consent-page",
-    templateUrl: "./consent-page.component.html",
-    styleUrls: ["./consent-page.component.scss"],
+    selector: 'app-consent-page',
+    templateUrl: './consent-page.component.html',
+    styleUrls: ['./consent-page.component.scss'],
 })
 export class ConsentPageComponent implements OnInit {
     data: ConsentNavigationConfig;
@@ -25,27 +25,33 @@ export class ConsentPageComponent implements OnInit {
     ngOnInit(): void {}
 
     onEmitConsent(consent: boolean) {
-        if (consent) {
-            this.confirmationService
-                .openConfirmationDialog("Are you sure you want to accept?")
-                .pipe(take(1))
-                .subscribe((ok) => {
-                    if (ok) {
-                        this.taskManager.startAfterConsent();
-                    }
-                });
+        if (this.data.mode === 'actual') {
+            if (consent) {
+                this.confirmationService
+                    .openConfirmationDialog('Are you sure you want to accept?')
+                    .pipe(take(1))
+                    .subscribe((ok) => {
+                        if (ok) {
+                            this.taskManager.startAfterConsent();
+                        }
+                    });
+            } else {
+                this.confirmationService
+                    .openConfirmationDialog(
+                        'Are you sure you want to decline?',
+                        'You will not be allowed to register again'
+                    )
+                    .pipe(take(1))
+                    .subscribe((ok) => {
+                        if (ok) {
+                            this.router.navigate([
+                                `${ParticipantRouteNames.CROWDSOURCEPARTICIPANT_REGISTER_BASEROUTE}`,
+                            ]);
+                        }
+                    });
+            }
         } else {
-            this.confirmationService
-                .openConfirmationDialog(
-                    "Are you sure you want to decline?",
-                    "You will not be allowed to register again"
-                )
-                .pipe(take(1))
-                .subscribe((ok) => {
-                    if (ok) {
-                        this.router.navigate([`${ParticipantRouteNames.CROWDSOURCEPARTICIPANT_REGISTER_BASEROUTE}`]);
-                    }
-                });
+            this.router.navigate([`${AdminRouteNames.DASHBOARD_BASEROUTE}/${AdminRouteNames.COMPONENTS_SUBROUTE}`]);
         }
     }
 }