+
+
diff --git a/webapp/src/ts/modules/trainings/training-content.component.ts b/webapp/src/ts/modules/trainings/training-content.component.ts
new file mode 100644
index 00000000000..226717eef2b
--- /dev/null
+++ b/webapp/src/ts/modules/trainings/training-content.component.ts
@@ -0,0 +1,214 @@
+import { Component, NgZone, OnDestroy, OnInit } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { combineLatest, Subscription } from 'rxjs';
+
+import { XmlFormsService } from '@mm-services/xml-forms.service';
+import { FormService } from '@mm-services/form.service';
+import { Selectors } from '@mm-selectors/index';
+import { GlobalActions } from '@mm-actions/global';
+import { GeolocationService } from '@mm-services/geolocation.service';
+import { TranslateService } from '@mm-services/translate.service';
+import { PerformanceService } from '@mm-services/performance.service';
+import { EnketoFormContext } from '@mm-services/enketo.service';
+
+@Component({
+ selector: 'training-content',
+ templateUrl: './training-content.component.html'
+})
+export class TrainingsContentComponent implements OnInit, OnDestroy {
+
+ private geoHandle:any;
+ private globalActions;
+ private trackRender;
+ private trackEditDuration;
+ private trackSave;
+ private trackMetadata = { action: '', form: '' };
+ formNoTitle = false;
+ form;
+ trainingCardFormId: null | string = null;
+ FORM_WRAPPER_ID = 'training-cards-form';
+ loadingContent;
+ contentError;
+ errorTranslationKey;
+ enketoError;
+ enketoStatus;
+ enketoSaving;
+ showConfirmExit;
+ subscription: Subscription = new Subscription();
+ isEmbedded = false;
+
+ constructor(
+ private ngZone: NgZone,
+ private store: Store,
+ private xmlFormsService: XmlFormsService,
+ private formService: FormService,
+ private geolocationService: GeolocationService,
+ private translateService: TranslateService,
+ private performanceService: PerformanceService,
+ ) {
+ this.globalActions = new GlobalActions(this.store);
+ }
+
+ ngOnInit() {
+ this.trackRender = this.performanceService.track();
+ this.reset();
+ this.subscribeToStore();
+ }
+
+ ngOnDestroy() {
+ this.subscription.unsubscribe();
+ this.geoHandle?.cancel();
+ // old code checked whether the component is reused before unloading the form
+ // this is because AngularJS created the new "controller" before destroying the old one
+ // in Angular, unless specific RouteReuseStrategies are employed, components are always
+ // destroyed before new ones are created
+ // see https://github.com/angular/angular/blob/10.2.x/packages/router/src/operators/activate_routes.ts#L37
+ // for Angular behavior
+ // see https://github.com/medic/cht-core/issues/2198#issuecomment-210202785 for AngularJS behavior
+ this.formService.unload(this.form);
+ this.globalActions.clearEnketoStatus();
+ }
+
+ private loadForm() {
+ this.ngZone.runOutsideAngular(() => this._loadForm());
+ }
+
+ private async _loadForm() {
+ try {
+ this.loadingContent = true;
+ this.geoHandle && this.geoHandle.cancel();
+ this.geoHandle = this.geolocationService.init();
+ const form = await this.xmlFormsService.get(this.trainingCardFormId);
+ await this.ngZone.run(() => this.renderForm(form));
+ } catch (error) {
+ this.setError(error);
+ console.error('Trainings Content Component :: Error fetching form.', error);
+ }
+ }
+
+ private async renderForm(formDoc) {
+ try {
+ const formContext = new EnketoFormContext(`#${this.FORM_WRAPPER_ID}`, 'training-card', formDoc);
+ formContext.isFormInModal = true; // ToDo fix this
+ formContext.valuechangeListener = this.resetFormError.bind(this);
+
+ this.form = await this.formService.render(formContext);
+ this.formNoTitle = !formDoc?.title; // ToDo fix this
+ this.loadingContent = false;
+ this.recordPerformancePostRender();
+ } catch (error) {
+ this.setError(error);
+ console.error('Trainings Content Component :: Error rendering form.', error);
+ }
+ }
+
+ private subscribeToStore() {
+ const reduxSubscription = combineLatest([
+ this.store.select(Selectors.getEnketoStatus),
+ this.store.select(Selectors.getEnketoSavingStatus),
+ this.store.select(Selectors.getEnketoError),
+ this.store.select(Selectors.getTrainingCardFormId),
+ this.store.select(Selectors.getTrainingCard),
+ ]).subscribe(([
+ enketoStatus,
+ enketoSaving,
+ enketoError,
+ trainingCardFormId,
+ trainingCard,
+ ]) => {
+ this.enketoStatus = enketoStatus;
+ this.enketoSaving = enketoSaving;
+ this.enketoError = enketoError;
+ this.showConfirmExit = trainingCard.showConfirmExit;
+
+ if (trainingCardFormId && trainingCardFormId !== this.trainingCardFormId) {
+ this.trainingCardFormId = trainingCardFormId;
+ this.loadForm();
+ }
+ });
+ this.subscription.add(reduxSubscription);
+ }
+
+ private reset() {
+ this.resetFormError();
+ this.contentError = false;
+ this.trainingCardFormId = null;
+ this.form = null;
+ this.loadingContent = true;
+ }
+
+ private resetFormError() {
+ if (this.enketoError) {
+ this.globalActions.setEnketoError(null);
+ }
+ }
+
+ setError(error) {
+ this.errorTranslationKey = error?.translationKey || 'training_cards.error.loading';
+ this.loadingContent = false;
+ this.contentError = true;
+ }
+
+ close() {
+ // TODO this.globalActions.setTrainingCard({ formId: null, isOpen: false, showConfirmExit: false, nextUrl: null });
+ // ToDo this.matDialogRef.close();
+ }
+
+ async saveForm() {
+ if (this.enketoSaving) {
+ console.debug('Attempted to call TrainingsContentComponent.saveForm more than once');
+ return;
+ }
+
+ this.recordPerformancePreSave();
+ this.globalActions.setEnketoSavingStatus(true);
+ this.resetFormError();
+
+ try {
+ const docs = await this.formService.save(this.trainingCardFormId, this.form, this.geoHandle);
+ console.debug('Saved form and associated docs', docs);
+ const snackText = await this.translateService.get('training_cards.form.saved');
+ this.globalActions.setSnackbarContent(snackText);
+ this.globalActions.setEnketoSavingStatus(false);
+ this.formService.unload(this.form);
+ this.recordPerformancePostSave();
+ this.close(); // ToDo fix
+
+ } catch (error) {
+ this.globalActions.setEnketoSavingStatus(false);
+ console.error('Trainings Content Component :: Error submitting form data.', error);
+ const friendlyMessage = await this.translateService.get('training_cards.error.save');
+ this.globalActions.setEnketoError(friendlyMessage);
+ }
+ }
+
+ private recordPerformancePostRender() {
+ this.trackMetadata.action = 'add';
+ this.trackMetadata.form = this.trainingCardFormId!;
+ this.trackRender?.stop({
+ name: [ 'enketo', this.trackMetadata.form, this.trackMetadata.action, 'render' ].join(':')
+ });
+ this.trackEditDuration = this.performanceService.track();
+ }
+
+ private recordPerformancePreSave() {
+ this.trackEditDuration?.stop({
+ name: [ 'enketo', this.trackMetadata.form, this.trackMetadata.action, 'user_edit_time' ].join(':'),
+ });
+ this.trackSave = this.performanceService.track();
+ }
+
+ private recordPerformancePostSave() {
+ this.trackSave?.stop({
+ name: [ 'enketo', this.trackMetadata.form, this.trackMetadata.action, 'save' ].join(':'),
+ });
+ }
+
+ confirmExit(confirm) {
+ if (this.contentError) {
+ this.close();
+ return;
+ }
+ this.showConfirmExit = confirm;
+ }
+}
diff --git a/webapp/src/ts/modules/trainings/trainings.component.html b/webapp/src/ts/modules/trainings/trainings.component.html
new file mode 100644
index 00000000000..6c8742eb771
--- /dev/null
+++ b/webapp/src/ts/modules/trainings/trainings.component.html
@@ -0,0 +1,34 @@
+
+
+
+
+
{{ errorTranslationKey | translate }}
+ {{ 'training_materials.page.no_selected' | translate }}
+
+
+
+
+
+
+
+
+
diff --git a/webapp/src/ts/modules/trainings/trainings.component.ts b/webapp/src/ts/modules/trainings/trainings.component.ts
new file mode 100644
index 00000000000..559d29088bc
--- /dev/null
+++ b/webapp/src/ts/modules/trainings/trainings.component.ts
@@ -0,0 +1,100 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { Store } from '@ngrx/store';
+import { Subscription } from 'rxjs';
+
+import { GlobalActions } from '@mm-actions/global';
+import { PerformanceService } from '@mm-services/performance.service';
+import { TrainingCardsService, TrainingMaterial } from '@mm-services/training-cards.service';
+import { Selectors } from '@mm-selectors/index';
+
+// const PAGE_SIZE = 50; // ToDo -- add pagination
+
+@Component({
+ templateUrl: './trainings.component.html'
+})
+export class TrainingsComponent implements OnInit, OnDestroy {
+ private globalActions: GlobalActions;
+ private trackInitialLoadPerformance;
+
+ selectedTrainingId;
+ subscriptions: Subscription = new Subscription();
+ trainingList: TrainingMaterial[] | null | undefined = null;
+ error = false;
+ moreTrainings = false;
+ loading = true;
+
+ constructor(
+ private readonly store: Store,
+ private route: ActivatedRoute,
+ private readonly performanceService: PerformanceService,
+ private readonly trainingCardsService: TrainingCardsService,
+ ) {
+ this.globalActions = new GlobalActions(this.store);
+ }
+
+ ngOnInit() {
+ this.trackInitialLoadPerformance = this.performanceService.track();
+ this.subscribeToRouteParams();
+ this.subscribeToStore();
+ }
+
+ ngOnDestroy() {
+ this.subscriptions.unsubscribe();
+ this.globalActions.unsetSelected();
+ }
+
+ private subscribeToStore() {
+ const trainingSubscription = this.store
+ .select(Selectors.getTrainingMaterials)
+ .subscribe(forms => this.getTrainings(forms));
+ this.subscriptions.add(trainingSubscription);
+ }
+
+ private subscribeToRouteParams() {
+ const routeSubscription = this.route.firstChild?.params.subscribe(params => {
+ this.selectedTrainingId = params?.id;
+ if (this.selectedTrainingId) {
+ this.globalActions.setTrainingCard({ formId: this.selectedTrainingId });
+ }
+ });
+ this.subscriptions.add(routeSubscription);
+ }
+
+ async getTrainings(forms) {
+ this.trainingList = await this.trainingCardsService.getAllAvailableTrainings(forms);
+ this.loading = false;
+ await this.recordInitialLoadPerformance();
+ }
+
+ /*private async prepareReports(reports, isContent=false) {
+ const userLineageLevel = await this.userLineageLevel;
+ return reports.map(report => {
+ const form = _find(this.forms, { code: report.form });
+ const subTitle = form ? form.title : report.form;
+ report.summary = isContent ? { ...report } : subTitle;
+ report.expanded = false;
+ report.icon = form && form.icon;
+ report.heading = this.getReportHeading(form, report);
+ report.lineage = report.subject && report.subject.lineage || report.lineage;
+ report.unread = !report.read;
+ if (Array.isArray(report.lineage)) {
+ report.lineage = this.extractLineageService.removeUserFacility(report.lineage, userLineageLevel);
+ }
+
+ return report;
+ });
+ }*/
+
+ private async recordInitialLoadPerformance() {
+ if (!this.trackInitialLoadPerformance) {
+ return;
+ }
+ await this.trackInitialLoadPerformance.stop({ name: 'training_materials_list:load', recordApdex: true });
+ this.trackInitialLoadPerformance = null;
+ }
+
+ trackBy(index, training) {
+ return training._id + training._rev + training.selected;
+ }
+}
diff --git a/webapp/src/ts/modules/trainings/trainings.routes.ts b/webapp/src/ts/modules/trainings/trainings.routes.ts
new file mode 100644
index 00000000000..a2d086a6468
--- /dev/null
+++ b/webapp/src/ts/modules/trainings/trainings.routes.ts
@@ -0,0 +1,25 @@
+import { Routes } from '@angular/router';
+
+import { AppRouteGuardProvider } from '../../app-route.guard.provider';
+import { TrainingsComponent } from '@mm-modules/trainings/trainings.component';
+import { TrainingsContentComponent } from '@mm-modules/trainings/training-content.component';
+
+export const routes: Routes = [
+ {
+ path: 'trainings',
+ component: TrainingsComponent,
+ data: { permissions: [ 'can_edit' ], tab: 'trainings' },
+ canActivate: [ AppRouteGuardProvider ],
+ children: [
+ {
+ path: '',
+ component: TrainingsContentComponent,
+ },
+ {
+ path: ':id',
+ component: TrainingsContentComponent,
+ data: { hideTraining: true },
+ },
+ ]
+ },
+];
diff --git a/webapp/src/ts/reducers/global.ts b/webapp/src/ts/reducers/global.ts
index e1c6f4c5651..c94c7124b9c 100644
--- a/webapp/src/ts/reducers/global.ts
+++ b/webapp/src/ts/reducers/global.ts
@@ -27,6 +27,7 @@ const initialState: GlobalState = {
trainingCard: { formId: null, isOpen: false, showConfirmExit: false, nextUrl: null },
sidebarMenu: { isOpen: false },
forms: null,
+ trainingMaterials: null,
lastChangedDoc: false,
loadingContent: false,
processingReportVerification: false,
@@ -77,6 +78,9 @@ const _globalReducer = createReducer(
on(Actions.setForms, (state, { payload: { forms } }) => {
return { ...state, forms };
}),
+ on(Actions.setTrainingMaterials, (state, { payload: { trainingMaterials } }) => {
+ return { ...state, trainingMaterials };
+ }),
on(Actions.clearFilters, (state, { payload: { skip } }) => {
const newValue = skip && state.filters[skip] ? { [skip]: state.filters[skip] } : {};
return { ...state, filters: newValue };
@@ -192,6 +196,7 @@ export interface GlobalState {
trainingCard: TrainingCardState;
sidebarMenu: SidebarMenuState;
forms: null | Record
+
+
+
+
+
+
+
+ {{ 'training_materials.page.no_trainings' | translate }}
+{{ 'training_materials.page.no_more_trainings' | translate }}
+ +