Migrate/portfolio welcome step

src/app/doubtfire-angular.module.ts

@@ -164,6 +164,7 @@ import { HeaderComponent } from './common/header/header.component';
 import { UnitDropdownComponent } from './common/header/unit-dropdown/unit-dropdown.component';
 import { TaskDropdownComponent } from './common/header/task-dropdown/task-dropdown.component';
 import { SplashScreenComponent } from './home/splash-screen/splash-screen.component';
+import { PortfolioWelcomeStepComponent } from './projects/states/portfolio/directives/portfolio-welcome-step/portfolio-welcome-step.component';
 
 @NgModule({
   // Components we declare
@@ -221,6 +222,7 @@ import { SplashScreenComponent } from './home/splash-screen/splash-screen.compon
     UnitDropdownComponent,
     TaskDropdownComponent,
     SplashScreenComponent,
+    PortfolioWelcomeStepComponent,
   ],
   // Module Imports
   imports: [

src/app/doubtfire-angularjs.module.ts

@@ -96,7 +96,7 @@ import 'build/src/app/projects/states/portfolio/directives/portfolio-review-step
 import 'build/src/app/projects/states/portfolio/directives/portfolio-learning-summary-report-step/portfolio-learning-summary-report-step.js';
 import 'build/src/app/projects/states/portfolio/directives/portfolio-add-extra-files-step/portfolio-add-extra-files-step.js';
 import 'build/src/app/projects/states/portfolio/directives/portfolio-grade-select-step/portfolio-grade-select-step.js';
-import 'build/src/app/projects/states/portfolio/directives/portfolio-welcome-step/portfolio-welcome-step.js';
+
 import 'build/src/app/projects/states/portfolio/directives/portfolio-tasks-step/portfolio-tasks-step.js';
 import 'build/src/app/projects/states/portfolio/directives/directives.js';
 import 'build/src/app/projects/states/portfolio/portfolio.js';
@@ -280,6 +280,7 @@ import { PdfViewerPanelComponent } from './common/pdf-viewer-panel/pdf-viewer-pa
 import { StaffTaskListComponent } from './units/states/tasks/inbox/directives/staff-task-list/staff-task-list.component';
 import { StatusIconComponent } from './common/status-icon/status-icon.component';
 import { TaskPlagiarismCardComponent } from './projects/states/dashboard/directives/task-dashboard/directives/task-plagiarism-card/task-plagiarism-card.component';
+import { PortfolioWelcomeStepComponent } from './projects/states/portfolio/directives/portfolio-welcome-step/portfolio-welcome-step.component';
 import { TaskCommentService } from './api/models/doubtfire-model';
 import { FileDownloaderService } from './common/file-downloader/file-downloader';
 import { CheckForUpdateService } from './sessions/service-worker-updater/check-for-update.service';
@@ -395,6 +396,10 @@ DoubtfireAngularJSModule.directive(
   'taskPlagiarismCard',
   downgradeComponent({ component: TaskPlagiarismCardComponent })
 );
+DoubtfireAngularJSModule.directive(
+  'portfolioWelcomeStep',
+  downgradeComponent({ component: PortfolioWelcomeStepComponent })
+);
 
 // Global configuration
 

src/app/projects/states/portfolio/directives/directives.coffee

@@ -4,5 +4,4 @@ angular.module('doubtfire.projects.states.portfolio.directives', [
   'doubtfire.projects.states.portfolio.directives.portfolio-learning-summary-report-step'
   'doubtfire.projects.states.portfolio.directives.portfolio-review-step'
   'doubtfire.projects.states.portfolio.directives.portfolio-tasks-step'
-  'doubtfire.projects.states.portfolio.directives.portfolio-welcome-step'
 ])

src/app/projects/states/portfolio/directives/portfolio-welcome-step/portfolio-welcome-step.component.html

@@ -0,0 +1,29 @@
+<div class="card-wrapper">
+  <mat-card>
+    <mat-card-title> Portfolio Preparation </mat-card-title>
+    <mat-card-content>
+      <p>Preparing your portfolio involves 5 steps:</p>
+      <ol>
+        <li>Select your <strong>Grade</strong> you are applying for</li>
+        <li>Upload your <strong>Learning Summary Report</strong></li>
+        <li>Select the <strong>Tasks</strong> you want included</li>
+        <li>Upload any <strong>Other Resources</strong> you want to add</li>
+        <li><strong>Compile</strong> your resources into your portfolio and review</li>
+      </ol>
+      <p>
+        Once you have completed all of these steps, your portfolio will be prepared by {{ externalName.value }} and you
+        will be notified when it is ready. You can then check your work, and if you want to make any corrections repeat
+        thesesteps to create a new version of your portfolio.
+      </p>
+    </mat-card-content>
+    <mat-divider></mat-divider>
+    <mat-card-actions class="buttons">
+      <div>
+        <button mat-raised-button color="primary" (click)="advanceActiveTab(1)">
+          Next
+          <mat-icon>arrow_forward</mat-icon>
+        </button>
+      </div>
+    </mat-card-actions>
+  </mat-card>
+</div>

src/app/projects/states/portfolio/directives/portfolio-welcome-step/portfolio-welcome-step.component.scss

@@ -0,0 +1,7 @@
+.buttons {
+    display: flex;
+    justify-content: end;
+    -webkit-justify-content: flex-end;
+    align-items: flex-end;
+    -webkit-align-items: flex-end;
+  }

src/app/projects/states/portfolio/directives/portfolio-welcome-step/portfolio-welcome-step.component.ts

@@ -0,0 +1,21 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import { DoubtfireConstants } from 'src/app/config/constants/doubtfire-constants';
+
+@Component({
+  selector: 'portfolio-welcome-step',
+  templateUrl: 'portfolio-welcome-step.component.html',
+  styleUrls: ['portfolio-welcome-step.component.scss'],
+})
+export class PortfolioWelcomeStepComponent {
+  @Input() advanceActiveTabs: any;
+  constructor(private constants: DoubtfireConstants) {}
+  public externalName: BehaviorSubject<string> = new BehaviorSubject<string>('OnTrack');
+
+  public advanceActiveTab(input: any) {
+    return this.advanceActiveTabs(input);
+  }
+  ngOnInit(): void {
+    this.externalName = this.constants?.ExternalName;
+  }
+}

src/app/projects/states/portfolio/portfolio.tpl.html

@@ -6,7 +6,8 @@
       </tab-heading>
     </tab>
   </tabset><!--/tabs-->
-  <portfolio-welcome-step ng-if="activeTab == tabs.welcomeStep"></portfolio-welcome-step>
+  <portfolio-welcome-step ng-if="activeTab == tabs.welcomeStep" [advance-active-tabs]="advanceActiveTab">
+  </portfolio-welcome-step>
   <portfolio-grade-select-step ng-if="activeTab == tabs.gradeStep"></portfolio-grade-select-step>
   <portfolio-learning-summary-report-step ng-if="activeTab == tabs.summaryStep"></portfolio-learning-summary-report-step>
   <portfolio-tasks-step ng-if="activeTab == tabs.taskStep"></portfolio-tasks-step>