Lectures: Replace guided mode with status bar edit and create view (#9655)

Author: florian-glombik

jest.config.js

@@ -105,10 +105,10 @@ module.exports = {
     coverageThreshold: {
         global: {
             // TODO: in the future, the following values should increase to at least 90%
-            statements: 87.78,
-            branches: 73.93,
-            functions: 82.47,
-            lines: 87.83,
+            statements: 87.81,
+            branches: 73.97,
+            functions: 82.50,
+            lines: 87.86,
         },
     },
     coverageReporters: ['clover', 'json', 'lcov', 'text-summary'],

src/main/webapp/app/entities/attachment.model.ts

@@ -20,6 +20,4 @@ export class Attachment implements BaseEntity {
     lecture?: Lecture;
     exercise?: Exercise;
     attachmentUnit?: AttachmentUnit;
-
-    constructor() {}
 }

src/main/webapp/app/lecture/close-edit-lecture-dialog/close-edit-lecture-modal.component.html renamed to src/main/webapp/app/lecture/close-edit-lecture-modal/close-edit-lecture-modal.component.html

@@ -13,12 +13,12 @@ <h4 class="modal-title" jhiTranslate="artemisApp.lecture.dismissChangesModal.tit
     <ul>
         @if (hasUnsavedChangesInTitleSection) {
             <li>
-                <span jhiTranslate="artemisApp.lecture.wizardMode.steps.titleStepTitle"></span>
+                <span jhiTranslate="artemisApp.lecture.sections.title"></span>
             </li>
         }
         @if (hasUnsavedChangesInPeriodSection) {
             <li>
-                <span jhiTranslate="artemisApp.lecture.wizardMode.steps.periodStepTitle"></span>
+                <span jhiTranslate="artemisApp.lecture.sections.period"></span>
             </li>
         }
     </ul>

src/main/webapp/app/lecture/close-edit-lecture-dialog/close-edit-lecture-modal.component.ts renamed to src/main/webapp/app/lecture/close-edit-lecture-modal/close-edit-lecture-modal.component.ts

@@ -3,10 +3,10 @@ import { CanDeactivateFn } from '@angular/router';
 import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
 import { LectureUpdateComponent } from 'app/lecture/lecture-update.component';
 import { Observable, from, of } from 'rxjs';
-import { CloseEditLectureModalComponent } from 'app/lecture/close-edit-lecture-dialog/close-edit-lecture-modal.component';
+import { CloseEditLectureModalComponent } from 'app/lecture/close-edit-lecture-modal/close-edit-lecture-modal.component';
 
 export const hasLectureUnsavedChangesGuard: CanDeactivateFn<LectureUpdateComponent> = (component: LectureUpdateComponent): Observable<boolean> => {
-    if (!component.shouldDisplayDismissWarning || component.isShowingWizardMode) {
+    if (!component.shouldDisplayDismissWarning) {
         return of(true);
     }
 

src/main/webapp/app/lecture/hasLectureUnsavedChanges.guard.ts

@@ -78,7 +78,9 @@ export class LectureAttachmentsComponent implements OnDestroy {
     });
 
     private readonly statusChanges = toSignal(this.form.statusChanges ?? 'INVALID');
-    isFormValid = computed(() => this.statusChanges() === 'VALID' && this.isFileSelectionValid() && this.datePickerComponent()?.isValid());
+    isFormValid = computed(
+        () => !this.attachmentToBeUpdatedOrCreated() || (this.statusChanges() === 'VALID' && this.isFileSelectionValid() && this.datePickerComponent()?.isValid()),
+    );
 
     constructor() {
         effect(

src/main/webapp/app/lecture/lecture-attachments.component.ts

@@ -1,6 +1,6 @@
 <div>
-    <h2 id="artemisApp.lecture.wizardMode.steps.periodStepTitle"><span jhiTranslate="artemisApp.lecture.wizardMode.steps.periodStepTitle"></span></h2>
-    <p><span jhiTranslate="artemisApp.lecture.wizardMode.steps.periodStepMessage"></span></p>
+    <h3 id="artemisApp.lecture.sections.period"><span jhiTranslate="artemisApp.lecture.sections.period"></span></h3>
+    <p><span jhiTranslate="artemisApp.lecture.sections.periodDescription"></span></p>
     <div class="d-flex">
         <div class="form-group flex-grow-1">
             <jhi-date-time-picker

src/main/webapp/app/lecture/lecture-period/lecture-period.component.html

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, inject } from '@angular/core';
 import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
 import { Lecture } from 'app/entities/lecture.model';
 import { LectureService } from 'app/lecture/lecture.service';
@@ -24,6 +24,25 @@ import { IrisSettingsService } from 'app/iris/settings/shared/iris-settings.serv
     styleUrls: ['./lecture-unit-management.component.scss'],
 })
 export class LectureUnitManagementComponent implements OnInit, OnDestroy {
+    protected readonly faTrash = faTrash;
+    protected readonly faPencilAlt = faPencilAlt;
+    protected readonly faEye = faEye;
+    protected readonly faFileExport = faFileExport;
+    protected readonly faRepeat = faRepeat;
+    protected readonly faCheckCircle = faCheckCircle;
+    protected readonly faSpinner = faSpinner;
+
+    protected readonly LectureUnitType = LectureUnitType;
+    protected readonly ActionType = ActionType;
+
+    private readonly activatedRoute = inject(ActivatedRoute);
+    private readonly router = inject(Router);
+    private readonly lectureService = inject(LectureService);
+    private readonly alertService = inject(AlertService);
+    private readonly profileService = inject(ProfileService);
+    private readonly irisSettingsService = inject(IrisSettingsService);
+    protected readonly lectureUnitService = inject(LectureUnitService);
+
     @Input() showCreationCard = true;
     @Input() showCompetencies = true;
     @Input() emitEditEvents = false;
@@ -39,14 +58,13 @@ export class LectureUnitManagementComponent implements OnInit, OnDestroy {
     updateOrderSubject: Subject<any>;
     viewButtonAvailable: Record<number, boolean> = {};
 
-    updateOrderSubjectSubscription: Subscription;
-    navigationEndSubscription: Subscription;
+    private updateOrderSubjectSubscription: Subscription;
+    private navigationEndSubscription: Subscription;
+    private activatedRouteSubscription?: Subscription;
+    private profileInfoSubscription: Subscription;
 
-    readonly LectureUnitType = LectureUnitType;
-    readonly ActionType = ActionType;
     private dialogErrorSource = new Subject<string>();
     dialogError$ = this.dialogErrorSource.asObservable();
-    private profileInfoSubscription: Subscription;
     irisEnabled = false;
     lectureIngestionEnabled = false;
     routerEditLinksBase: { [key: string]: string } = {
@@ -56,40 +74,13 @@ export class LectureUnitManagementComponent implements OnInit, OnDestroy {
         [LectureUnitType.ONLINE]: 'online-units',
     };
 
-    // Icons
-    readonly faTrash = faTrash;
-    readonly faPencilAlt = faPencilAlt;
-    readonly faEye = faEye;
-    readonly faFileExport = faFileExport;
-    readonly faRepeat = faRepeat;
-    readonly faCheckCircle = faCheckCircle;
-    readonly faSpinner = faSpinner;
-
-    constructor(
-        private activatedRoute: ActivatedRoute,
-        private router: Router,
-        private lectureService: LectureService,
-        private alertService: AlertService,
-        public lectureUnitService: LectureUnitService,
-        private profileService: ProfileService,
-        private irisSettingsService: IrisSettingsService,
-    ) {}
-
-    ngOnDestroy(): void {
-        this.updateOrder();
-        this.updateOrderSubjectSubscription.unsubscribe();
-        this.dialogErrorSource.unsubscribe();
-        this.navigationEndSubscription.unsubscribe();
-        this.profileInfoSubscription?.unsubscribe();
-    }
-
     ngOnInit(): void {
         this.navigationEndSubscription = this.router.events.pipe(filter((value) => value instanceof NavigationEnd)).subscribe(() => {
             this.loadData();
         });
 
         this.updateOrderSubject = new Subject();
-        this.activatedRoute.parent!.params.subscribe((params) => {
+        this.activatedRouteSubscription = this.activatedRoute?.parent?.params.subscribe((params) => {
             this.lectureId ??= +params['lectureId'];
             if (this.lectureId) {
                 // TODO: the lecture (without units) is already available through the lecture.route.ts resolver, it's not really good that we load it twice
@@ -103,6 +94,15 @@ export class LectureUnitManagementComponent implements OnInit, OnDestroy {
         });
     }
 
+    ngOnDestroy(): void {
+        this.updateOrder();
+        this.updateOrderSubjectSubscription.unsubscribe();
+        this.dialogErrorSource.unsubscribe();
+        this.navigationEndSubscription.unsubscribe();
+        this.profileInfoSubscription?.unsubscribe();
+        this.activatedRouteSubscription?.unsubscribe();
+    }
+
     loadData() {
         this.isLoading = true;
         // TODO: we actually would like to have the lecture with all units! Posts and competencies are not required here

src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/lecture-unit-management.component.ts

@@ -1,6 +1,6 @@
 <div>
-    <h2><span jhiTranslate="artemisApp.lecture.wizardMode.steps.unitsStepTitle"></span></h2>
-    <p><span jhiTranslate="artemisApp.lecture.wizardMode.steps.unitsStepMessage"></span></p>
+    <h3><span jhiTranslate="artemisApp.lecture.sections.units"></span></h3>
+    <p><span jhiTranslate="artemisApp.lecture.sections.unitsDescription"></span></p>
     <jhi-lecture-unit-management
         [lectureId]="this.lecture.id"
         [emitEditEvents]="true"
@@ -15,9 +15,9 @@ <h2><span jhiTranslate="artemisApp.lecture.wizardMode.steps.unitsStepTitle"></sp
     } @else {
         <div class="form-group">
             @if (!isEditingLectureUnit) {
-                <h4><span jhiTranslate="artemisApp.lecture.wizardMode.newLectureUnit"></span></h4>
+                <h4><span jhiTranslate="artemisApp.lecture.newLectureUnit"></span></h4>
             } @else {
-                <h4><span jhiTranslate="artemisApp.lecture.wizardMode.editLectureUnit"></span></h4>
+                <h4><span jhiTranslate="artemisApp.lecture.editLectureUnit"></span></h4>
             }
             @if (isTextUnitFormOpen()) {
                 <jhi-text-unit-form

src/main/webapp/app/lecture/wizard-mode/lecture-wizard-units.component.html renamed to src/main/webapp/app/lecture/lecture-units/lecture-units.component.html

@@ -1,13 +1,13 @@
-import { Component, Input, OnInit, ViewChild, computed, signal } from '@angular/core';
+import { Component, Input, OnInit, ViewChild, computed, signal, viewChild } from '@angular/core';
 import { Lecture } from 'app/entities/lecture.model';
 import { TextUnit } from 'app/entities/lecture-unit/textUnit.model';
 import { VideoUnit } from 'app/entities/lecture-unit/videoUnit.model';
 import { OnlineUnit } from 'app/entities/lecture-unit/onlineUnit.model';
 import { AttachmentUnit } from 'app/entities/lecture-unit/attachmentUnit.model';
-import { TextUnitFormData } from 'app/lecture/lecture-unit/lecture-unit-management/text-unit-form/text-unit-form.component';
-import { VideoUnitFormData } from 'app/lecture/lecture-unit/lecture-unit-management/video-unit-form/video-unit-form.component';
-import { OnlineUnitFormData } from 'app/lecture/lecture-unit/lecture-unit-management/online-unit-form/online-unit-form.component';
-import { AttachmentUnitFormData } from 'app/lecture/lecture-unit/lecture-unit-management/attachment-unit-form/attachment-unit-form.component';
+import { TextUnitFormComponent, TextUnitFormData } from 'app/lecture/lecture-unit/lecture-unit-management/text-unit-form/text-unit-form.component';
+import { VideoUnitFormComponent, VideoUnitFormData } from 'app/lecture/lecture-unit/lecture-unit-management/video-unit-form/video-unit-form.component';
+import { OnlineUnitFormComponent, OnlineUnitFormData } from 'app/lecture/lecture-unit/lecture-unit-management/online-unit-form/online-unit-form.component';
+import { AttachmentUnitFormComponent, AttachmentUnitFormData } from 'app/lecture/lecture-unit/lecture-unit-management/attachment-unit-form/attachment-unit-form.component';
 import { LectureUnit, LectureUnitType } from 'app/entities/lecture-unit/lectureUnit.model';
 import { onError } from 'app/shared/util/global.utils';
 import { Attachment, AttachmentType } from 'app/entities/attachment.model';
@@ -23,15 +23,27 @@ import dayjs from 'dayjs/esm';
 import { ActivatedRoute } from '@angular/router';
 
 @Component({
-    selector: 'jhi-lecture-update-wizard-units',
-    templateUrl: './lecture-wizard-units.component.html',
+    selector: 'jhi-lecture-update-units',
+    templateUrl: './lecture-units.component.html',
 })
-export class LectureUpdateWizardUnitsComponent implements OnInit {
-    @Input() currentStep: number;
+export class LectureUpdateUnitsComponent implements OnInit {
     @Input() lecture: Lecture;
 
     @ViewChild(LectureUnitManagementComponent, { static: false }) unitManagementComponent: LectureUnitManagementComponent;
 
+    textUnitForm = viewChild(TextUnitFormComponent);
+    videoUnitForm = viewChild(VideoUnitFormComponent);
+    onlineUnitForm = viewChild(OnlineUnitFormComponent);
+    attachmentUnitForm = viewChild(AttachmentUnitFormComponent);
+    isUnitConfigurationValid = computed(() => {
+        return (
+            (this.textUnitForm()?.isFormValid() || !this.isTextUnitFormOpen()) &&
+            (this.videoUnitForm()?.isFormValid() || !this.isVideoUnitFormOpen()) &&
+            (this.onlineUnitForm()?.isFormValid() || !this.isOnlineUnitFormOpen()) &&
+            (this.attachmentUnitForm()?.isFormValid() || !this.isAttachmentUnitFormOpen())
+        );
+    });
+
     isEditingLectureUnit: boolean;
     isTextUnitFormOpen = signal<boolean>(false);
     isExerciseUnitFormOpen = signal<boolean>(false);