diff --git a/README.md b/README.md index 3e5b0546e5..852d8f2e5d 100644 --- a/README.md +++ b/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 diff --git a/src/app/doubtfire-angular.module.ts b/src/app/doubtfire-angular.module.ts index c714ff0e5a..70840c2a24 100644 --- a/src/app/doubtfire-angular.module.ts +++ b/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: [ diff --git a/src/app/doubtfire-angularjs.module.ts b/src/app/doubtfire-angularjs.module.ts index d9dc6955d5..fade69440d 100644 --- a/src/app/doubtfire-angularjs.module.ts +++ b/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}), +); diff --git a/src/app/projects/states/portfolio/directives/directives.coffee b/src/app/projects/states/portfolio/directives/directives.coffee index 8ce9be0be3..26e14132fd 100644 --- a/src/app/projects/states/portfolio/directives/directives.coffee +++ b/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' ]) diff --git a/src/app/projects/states/portfolio/directives/portfolio-review-step/portfolio-review-step.coffee b/src/app/projects/states/portfolio/directives/portfolio-review-step/portfolio-review-step.coffee deleted file mode 100644 index 4c8ca4ac9d..0000000000 --- a/src/app/projects/states/portfolio/directives/portfolio-review-step/portfolio-review-step.coffee +++ /dev/null @@ -1,49 +0,0 @@ -angular.module('doubtfire.projects.states.portfolio.directives.portfolio-review-step', []) - -# -# Step for students to view their portfolio and optionally delete it -# -.directive('portfolioReviewStep', -> - restrict: 'E' - replace: true - templateUrl: 'projects/states/portfolio/directives/portfolio-review-step/portfolio-review-step.tpl.html' - controller: ($scope, alertService, newProjectService, DoubtfireConstants, ConfirmationModal, fileDownloaderService) -> - - # Get the confugurable, external name of Doubtfire - $scope.externalName = DoubtfireConstants.ExternalName - - # Watch when portfolio value is changed to reassess - $scope.$watch 'project.portfolioAvailable', -> - $scope.hasLSR = $scope.projectHasLearningSummaryReport() - $scope.hasTasksSelected = $scope.selectedTasks().length > 0 - $scope.portfolioIsCompiling = $scope.project.compilePortfolio - $scope.canCompilePortfolio = (not $scope.portfolioIsCompiling) and $scope.hasTasksSelected and $scope.hasLSR and not $scope.project.portfolioAvailable - - # - # Compile portfolio - # - $scope.toggleCompileProject = -> - $scope.project.compilePortfolio = not $scope.project.compilePortfolio - - newProjectService.update($scope.project).subscribe( - (response) -> - $scope.portfolioIsCompiling = true - $scope.canCompilePortfolio = false - $scope.project.portfolioStatus = 0.5 - ) - # - # PDF Local Funcs - # - $scope.deletePortfolio = -> - doDelete = -> - $scope.project.deletePortfolio().subscribe( (response) -> - $scope.project.portfolioAvailable = false - $scope.project.portfolioStatus = 0 - alertService.message( "Portfolio has been deleted!", 5000) - ) - ConfirmationModal.show("Delete Portfolio?", 'Are you sure you want to delete your portfolio? You will need to recreate your porfolio again if you do so.', doDelete) - - # Download the pdf - $scope.downloadPortfolio = -> - fileDownloaderService.downloadFile($scope.project.portfolioUrl(true), "#{$scope.project.student.username}-portfolio.pdf") -) diff --git a/src/app/projects/states/portfolio/directives/portfolio-review-step/portfolio-review-step.component.html b/src/app/projects/states/portfolio/directives/portfolio-review-step/portfolio-review-step.component.html new file mode 100644 index 0000000000..6e6f09dfd7 --- /dev/null +++ b/src/app/projects/states/portfolio/directives/portfolio-review-step/portfolio-review-step.component.html @@ -0,0 +1,143 @@ +
+
+

Review Portfolio

+
+ +
+ +
+
+ There are issues with your portfolio +
+
+

+ Your portfolio must include a learning summary report. Upload this before + you schedule your portfolio to be compiled. +

+

+ Your portfolio must include tasks that you have completed. Please go back to the previous steps to select tasks to include in your portfolio. +

+

+ Your portfolio must include tasks aligned to the unit's + {{ unit.ilos.length }} intended learning outcomes. Please indicate which + tasks you think align to the unit's learning outcomes before you schedule your portfolio + to be compiled. +

+

+ Your portfolio must 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. +

+
+
+ + +
+
+

Portfolio Processing

+
+
+

+ 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. +

+
+
+ + +
+

+ {{ doubtfireConstants.ExternalName | async }} will create your portfolio once you are happy + with your submissions so far. +

+ + +
+

+ You have attached + {{ extraFiles().length }} extra file{{ extraFiles().length > 1 ? 's' : '' }} + 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: +

+
    +
  1. + {{ file.name }} +
    2. +
+
+ + +
+

+ You have included + {{ selectedTasks().length }} task{{ selectedTasks().length > 1 ? 's' : '' }} + in your portfolio. If you wish to add or remove some of these tasks, please review the + Select Tasks step to adjust your alignments of each task to the unit's learning + outcomes. Each task will be attached in the order below: +

+
    +
  1. + {{ task.definition.abbreviation }} + {{ task.definition.name }} +
    2. +
+
+
+ + +
+
+

Create Your Portfolio

+
+
+

+ 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. +

+

+ If you would like to make any further changes after you have created your portfolio, you + will need to delete and recreate your portfolio. +

+
+
+ +
+
+ + +
+
+

Download Portfolio

+
+
+ This is the exact same document your assessor will see +
+
+ + +
+
+
+ + +
+ +
+
diff --git a/src/app/projects/states/portfolio/directives/portfolio-review-step/portfolio-review-step.scss b/src/app/projects/states/portfolio/directives/portfolio-review-step/portfolio-review-step.component.scss similarity index 79% rename from src/app/projects/states/portfolio/directives/portfolio-review-step/portfolio-review-step.scss rename to src/app/projects/states/portfolio/directives/portfolio-review-step/portfolio-review-step.component.scss index 1a35a9a0c3..a5a8c53c2e 100644 --- a/src/app/projects/states/portfolio/directives/portfolio-review-step/portfolio-review-step.scss +++ b/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; diff --git a/src/app/projects/states/portfolio/directives/portfolio-review-step/portfolio-review-step.component.ts b/src/app/projects/states/portfolio/directives/portfolio-review-step/portfolio-review-step.component.ts new file mode 100644 index 0000000000..96c24afb5d --- /dev/null +++ b/src/app/projects/states/portfolio/directives/portfolio-review-step/portfolio-review-step.component.ts @@ -0,0 +1,132 @@ +import { Component, Input, OnInit, Inject, DoCheck } from '@angular/core'; +import { AlertService } from 'src/app/common/services/alert.service'; +import { DoubtfireConstants } from 'src/app/config/constants/doubtfire-constants'; +import { FileDownloaderService } from 'src/app/common/file-downloader/file-downloader.service'; +import { ProjectService } from 'src/app/api/services/project.service'; +import { confirmationModal } from 'src/app/ajs-upgraded-providers'; +import {Injector} from '@angular/core'; +import { Project } from 'src/app/api/models/project'; +@Component({ + selector: 'portfolio-review-step', + templateUrl: './portfolio-review-step.component.html', + styleUrls: ['./portfolio-review-step.component.scss'], +}) +export class PortfolioReviewStepComponent implements OnInit, DoCheck { + @Input() project!: Project; + @Input() unit!: Unit; + private $scope: unknown; + + hasLSR = false; + hasTasksSelected = false; + portfolioIsCompiling = false; + canCompilePortfolio = false; + private lastActiveTab: unknown; + + // Expose scope variables for template access + get activeTab() { + return (this.$scope as { activeTab?: unknown })?.activeTab; + } + + get tabs() { + return (this.$scope as { tabs?: unknown })?.tabs; + } + + get isVisible() { + return (this.$scope as { activeTab?: unknown; tabs?: { reviewStep?: unknown } })?.activeTab === (this.$scope as { tabs?: { reviewStep?: unknown } })?.tabs?.reviewStep; + } + + constructor( + public doubtfireConstants: DoubtfireConstants, + private alertService: AlertService, + private projectService: ProjectService, + private fileDownloaderService: FileDownloaderService, + private injector: Injector, + @Inject(confirmationModal) private confirmationModalService: { + show: (title: string, message: string, action: () => void) => void; + }, + ) { + this.$scope = this.injector.get('$scope', null); + } + + ngOnInit(): void { + this.evaluatePortfolioState(); + } + + evaluatePortfolioState(): void { + this.hasLSR = this.projectHasLearningSummaryReport(); + this.hasTasksSelected = this.selectedTasks().length > 0; + this.portfolioIsCompiling = !!this.project.compilePortfolio; + this.canCompilePortfolio = + !this.portfolioIsCompiling && + this.hasTasksSelected && + this.hasLSR && + !this.project.portfolioAvailable; + } + + toggleCompileProject(): void { + this.project.compilePortfolio = !this.project.compilePortfolio; + + this.projectService.update(this.project).subscribe(() => { + this.portfolioIsCompiling = true; + this.canCompilePortfolio = false; + this.project.portfolioStatus = 0.5; + }); + } + + deletePortfolio(): void { + this.confirmationModalService.show( + 'Delete Portfolio?', + 'Are you sure you want to delete your portfolio? You will need to recreate your portfolio again if you do so.', + () => { + this.project.deletePortfolio().subscribe(() => { + this.project.portfolioAvailable = false; + this.project.portfolioStatus = 0; + this.alertService.message('Portfolio has been deleted!', 5000); + }); + } + ); + } + + downloadPortfolio(): void { + const username = this.project.student?.username || 'portfolio'; + this.fileDownloaderService.downloadFile( + this.project.portfolioUrl(true), + `${username}-portfolio.pdf` + ); + } + + extraFiles(): unknown[] { + return this.project.portfolioFiles?.filter((file: { idx: number }) => file.idx !== 0) || []; + } + + selectedTasks(): unknown[] { + if (!this.project.tasks) return []; + const tasksToInclude = this.project.tasks.filter((task: unknown) => (task as { includeInPortfolio: boolean }).includeInPortfolio); + return tasksToInclude; + } + + projectHasLearningSummaryReport(): boolean { + return this.project?.portfolioFiles?.filter((file: {idx: number}) => file.idx === 0).length > 0; + } + + goToPreviousStep(): void { + if (typeof (this.$scope as { advanceActiveTab?: (step: number) => void })?.advanceActiveTab === 'function') { + (this.$scope as { advanceActiveTab: (step: number) => void }).advanceActiveTab(-1); + } + } + + refreshPortfolioState(): void { + this.evaluatePortfolioState(); + } + + ngDoCheck(): void { + // Check if the active tab has changed and refresh state when this tab becomes visible + const currentActiveTab = this.activeTab; + if (currentActiveTab !== this.lastActiveTab) { + this.lastActiveTab = currentActiveTab; + if (this.isVisible) { + this.evaluatePortfolioState(); + } + } + } +} diff --git a/src/app/projects/states/portfolio/directives/portfolio-review-step/portfolio-review-step.tpl.html b/src/app/projects/states/portfolio/directives/portfolio-review-step/portfolio-review-step.tpl.html deleted file mode 100644 index ba23ed6f53..0000000000 --- a/src/app/projects/states/portfolio/directives/portfolio-review-step/portfolio-review-step.tpl.html +++ /dev/null @@ -1,110 +0,0 @@ -
-
-

{{activeTab.title}}

-
-
-
-
-

There are issues with your portfolio

-
-
-

- Your portfolio must include a learning summary report. Upload this before you schedule your - portfolio to be compiled. -

-

-

- Your portfolio must include tasks aligned to the unit's - {{unit.ilos.length}} intended learning outcomes. Please indicate which tasks you think align - to the unit's learning outcomes before you schedule your portfolio to be compiled. -

-

- Your portfolio must include tasks that you have completed this teaching period. Please - indicate which tasks you you would like to include in your portfolio before you schedule your portfolio to be - compiled. -

-
-
- -
-
-

Portfolio Processing

-
-
-

- Your portfolio compilation is scheduled with {{externalName.value}}. This process will take some time, check - back soon to see if your portfolio is available. -

-
-
- -
-

{{externalName.value}} will create your portfolio once you are happy with your submissions so far.

-
-

- You have attached {{extraFiles().length}} extra file{{extraFiles().length > 1 ? 's' : ''}} - 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: -

-
    -
  1. {{file.name}}
    2. -
-
-
-

- You have included {{selectedTasks().length}} tasks in your portfolio. If you wish to add or - remove some of these tasks, please review the Select Tasks step to adjust your alignments of each - task to the unit's learning outcomes. Each task will be attached in the order below: -

-
    -
  1. - - {{task.definition.name}} -
    2. -
-
-
-
-
-

Create Your Portfolio

-
-
-

- Once you click Create Portfolio, the construction of your portfolio will be scheduled with - {{externalName.value}}. This process will take some time, and you will be emailed when your portfolio is ready - to review if you have enabled portfolio notifications. -

-

- If you would like to make any further changes after you have created your portfolio, you will need to delete - and recreate your portfolio. -

-
-
- -
-
- -
-
-

Download Portfolio

-
-
This is the exact same document your assessor will see
-
- - -
-
-
-
- -
-
diff --git a/src/app/projects/states/portfolio/portfolio.tpl.html b/src/app/projects/states/portfolio/portfolio.tpl.html index 1c009b47ab..376dedb0e1 100644 --- a/src/app/projects/states/portfolio/portfolio.tpl.html +++ b/src/app/projects/states/portfolio/portfolio.tpl.html @@ -11,5 +11,5 @@ - +