feat: migrate portfolio-review-step

README.md

@@ -143,7 +143,6 @@ TODO:
 - [ ] ./src/app/projects/states/dashboard/directives/task-dashboard/task-dashboard.coffee
 - [ ] ./src/app/projects/states/dashboard/dashboard.coffee
 - [ ] ./src/app/projects/states/outcomes/outcomes.coffee
-- [ ] ./src/app/projects/states/portfolio/directives/portfolio-review-step/portfolio-review-step.coffee
 - [ ] ./src/app/projects/states/portfolio/directives/directives.coffee
 - [ ] ./src/app/projects/states/portfolio/directives/portfolio-learning-summary-report-step/portfolio-learning-summary-report-step.coffee
 - [ ] ./src/app/projects/states/portfolio/directives/portfolio-add-extra-files-step/portfolio-add-extra-files-step.coffee
@@ -200,7 +199,6 @@ TODO:
 - [ ] ./src/app/common/filters/filters.coffee
 - [ ] ./src/app/common/content-editable/content-editable.coffee
 - [ ] ./src/app/common/alert-list/alert-list.coffee
-- [ ] ./src/app/common/modals/confirmation-modal/confirmation-modal.coffee
 - [ ] ./src/app/common/modals/comments-modal/comments-modal.coffee
 - [ ] ./src/app/common/modals/modals.coffee
 - [ ] ./src/app/common/modals/csv-result-modal/csv-result-modal.coffee

src/app/doubtfire-angular.module.ts

@@ -267,6 +267,7 @@ const MY_DATE_FORMAT = {
   },
 };
 import { UnitStudentEnrolmentModalComponent } from './units/modals/unit-student-enrolment-modal/unit-student-enrolment-modal.component';
+import { PortfolioReviewStepComponent } from './projects/states/portfolio/directives/portfolio-review-step/portfolio-review-step.component';
 
 @NgModule({
   // Components we declare
@@ -389,6 +390,7 @@ import { UnitStudentEnrolmentModalComponent } from './units/modals/unit-student-
     TaskScormCardComponent,
     ScormExtensionCommentComponent,
     ScormExtensionModalComponent,
+    PortfolioReviewStepComponent,
   ],
   // Services we provide
   providers: [

src/app/doubtfire-angularjs.module.ts

@@ -70,7 +70,6 @@ import 'build/src/app/projects/states/dashboard/directives/directives.js';
 import 'build/src/app/projects/states/dashboard/directives/task-dashboard/task-dashboard.js';
 import 'build/src/app/projects/states/dashboard/dashboard.js';
 import 'build/src/app/projects/states/outcomes/outcomes.js';
-import 'build/src/app/projects/states/portfolio/directives/portfolio-review-step/portfolio-review-step.js';
 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';
@@ -224,6 +223,7 @@ import {GradeService} from './common/services/grade.service';
 import {TaskScormCardComponent} from './projects/states/dashboard/directives/task-dashboard/directives/task-scorm-card/task-scorm-card.component';
 import { UnitStudentEnrolmentModalService } from './units/modals/unit-student-enrolment-modal/unit-student-enrolment-modal.service';
 import { PrivacyPolicy } from './config/privacy-policy/privacy-policy';
+import { PortfolioReviewStepComponent } from './projects/states/portfolio/directives/portfolio-review-step/portfolio-review-step.component';
 
 export const DoubtfireAngularJSModule = angular.module('doubtfire', [
   'doubtfire.config',
@@ -495,3 +495,8 @@ DoubtfireAngularJSModule.directive(
   'fTaskVisualisation',
   downgradeComponent({ component: TaskVisualisationComponent })
 );
+
+DoubtfireAngularJSModule.directive(
+  'portfolioReviewStep',
+  downgradeComponent({component: PortfolioReviewStepComponent}),
+);

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

@@ -2,7 +2,6 @@ angular.module('doubtfire.projects.states.portfolio.directives', [
   'doubtfire.projects.states.portfolio.directives.portfolio-add-extra-files-step'
   'doubtfire.projects.states.portfolio.directives.portfolio-grade-select-step'
   '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-review-step/portfolio-review-step.component.html

@@ -0,0 +1,143 @@
+<div class="panel panel-default" *ngIf="isVisible">
+  <div class="panel-heading">
+    <h3 class="panel-title">Review Portfolio</h3>
+  </div>
+
+  <div class="panel-body portfolio-review-step">
+    <!-- Error Card -->
+    <div class="card border-danger mb-3" *ngIf="!(hasLSR && hasTasksSelected)">
+      <div class="card-header bg-danger text-white">
+        <i class="fa fa-warning"></i> There are issues with your portfolio
+      </div>
+      <div class="card-body">
+        <p *ngIf="!hasLSR">
+          Your portfolio <strong>must</strong> include a learning summary report. Upload this before
+          you schedule your portfolio to be compiled.
+        </p>
+        <p *ngIf="!hasTasksSelected">
+          Your portfolio <strong>must</strong> include tasks that you have completed. Please go back to the previous steps to select tasks to include in your portfolio.
+        </p>
+        <p *ngIf="unit?.ilos?.length">
+          Your portfolio <strong>must</strong> include tasks aligned to the unit's
+          <strong>{{ unit.ilos.length }} intended learning outcomes</strong>. Please indicate which
+          tasks you think align to the unit's learning outcomes before you schedule your portfolio
+          to be compiled.
+        </p>
+        <p *ngIf="!unit?.ilos?.length">
+          Your portfolio <strong>must</strong> include tasks that you have completed this teaching
+          period. Please indicate which tasks you would like to include in your portfolio before you
+          schedule your portfolio to be compiled.
+        </p>
+      </div>
+    </div>
+
+    <!-- Portfolio compiling status -->
+    <div class="card card-default" *ngIf="portfolioIsCompiling">
+      <div class="card-header">
+        <h4>Portfolio Processing</h4>
+      </div>
+      <div class="card-body">
+        <p>
+          Your portfolio compilation is scheduled with
+          {{ doubtfireConstants.ExternalName | async }}. This process will take some time, check
+          back soon to see if your portfolio is available.
+        </p>
+      </div>
+    </div>
+
+    <!-- File and Task Summary -->
+    <div *ngIf="canCompilePortfolio">
+      <p>
+        {{ doubtfireConstants.ExternalName | async }} will create your portfolio once you are happy
+        with your submissions so far.
+      </p>
+
+      <!-- Extra Files Section -->
+      <div *ngIf="extraFiles().length > 0">
+        <p>
+          You have attached
+          <strong
+            >{{ extraFiles().length }} extra file{{ extraFiles().length > 1 ? 's' : '' }}</strong
+          >
+          to your portfolio. You may add more files or remove
+          {{ extraFiles().length > 1 ? 'these' : 'this' }}
+          file{{ extraFiles().length > 1 ? 's' : '' }} in the previous step. Each file is listed in
+          order of attachment below:
+        </p>
+        <ol>
+          <li *ngFor="let file of extraFiles()">
+            <i class="fa fa-file-{{ file.kind }}-o"></i> {{ file.name }}
+          </li>
+        </ol>
+      </div>
+
+      <!-- Selected Tasks Section -->
+      <div *ngIf="selectedTasks().length > 0">
+        <p>
+          You have included
+          <strong
+            >{{ selectedTasks().length }} task{{ selectedTasks().length > 1 ? 's' : '' }}</strong
+          >
+          in your portfolio. If you wish to add or remove some of these tasks, please review the
+          <em>Select Tasks</em> step to adjust your alignments of each task to the unit's learning
+          outcomes. Each task will be attached in the order below:
+        </p>
+        <ol>
+          <li *ngFor="let task of selectedTasks()">
+            <span class="label label-info">{{ task.definition.abbreviation }}</span>
+            {{ task.definition.name }}
+          </li>
+        </ol>
+      </div>
+    </div>
+
+    <!-- Create Portfolio -->
+    <div class="card card-default" *ngIf="canCompilePortfolio">
+      <div class="card-header">
+        <h4>Create Your Portfolio</h4>
+      </div>
+      <div class="card-body">
+        <p>
+          Once you click Create Portfolio, the construction of your portfolio will be scheduled with
+          {{ doubtfireConstants.ExternalName | async }}. This process will take some time, and you
+          will be emailed when your portfolio is ready to review if you have enabled portfolio
+          notifications.
+        </p>
+        <p class="fw-bold">
+          If you would like to make any further changes after you have created your portfolio, you
+          will need to delete and recreate your portfolio.
+        </p>
+      </div>
+      <div class="card-footer">
+        <button class="btn btn-success w-100" (click)="toggleCompileProject()">
+          <i class="fa fa-book"></i> Create My Portfolio
+        </button>
+      </div>
+    </div>
+
+    <!-- Download/Delete Portfolio -->
+    <div class="card card-default" *ngIf="project?.portfolioAvailable">
+      <div class="card-header">
+        <h4>Download Portfolio</h4>
+      </div>
+      <div class="card-body">
+        This is the <strong>exact same document</strong> your assessor will see
+      </div>
+      <div class="card-footer d-flex justify-content-between">
+        <button class="btn btn-danger" (click)="deletePortfolio()">
+          <i class="fa fa-trash-o"></i> Delete Portfolio
+        </button>
+        <button class="btn btn-success" (click)="downloadPortfolio()">
+          <i class="fa fa-download"></i> Download Portfolio
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Footer Buttons -->
+  <div class="panel-footer clearfix">
+    <button class="btn btn-primary pull-left" (click)="goToPreviousStep()">
+      <i class="fa fa-arrow-left"></i> Back
+    </button>
+  </div>
+</div>

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

@@ -1,6 +1,8 @@
+// Fallback if globals aren’t loaded here
+$brand-primary: #337ab7 !default; // Bootstrap 3 default
+
 .project-portfolio-wizard .panel-body .portfolio-review-step {
   &.expanded {
-    // override with !important to override mixins in project-portfolio-wizard.scss
     margin: 0 auto !important;
     width: 100% !important;
     float: none !important;