Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Development: Use signals in lecture unit wizard #9708

Merged
merged 16 commits into from
Nov 24, 2024
Merged

Development: Use signals in lecture unit wizard #9708

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
c638460
Use signals for date-time-picker.component.ts
florian-glombik Nov 6, 2024
026a570
Introduce signal for easy retrieval of valid state
florian-glombik Nov 6, 2024
9b954b2
Fix tests for date-time-picker.component.ts
florian-glombik Nov 6, 2024
c9ca46b
Merge remote-tracking branch 'origin/develop' into develop
florian-glombik Nov 8, 2024
ad22a0c
Merge remote-tracking branch 'origin/develop' into develop
florian-glombik Nov 8, 2024
67b711c
Use signals in lecture wizard component
florian-glombik Nov 8, 2024
c4c0ace
Revert "Use signals for date-time-picker.component.ts"
florian-glombik Nov 8, 2024
18024c3
Remove changes only relevant to the actual add status bar PR
florian-glombik Nov 8, 2024
2aa328b
Remove unused constructors
florian-glombik Nov 8, 2024
893bc3c
Use signals in lecture attachment component
florian-glombik Nov 20, 2024
96490d9
Fix client tests
florian-glombik Nov 20, 2024
927398d
Address Coderabbit suggestions
florian-glombik Nov 20, 2024
a9cf798
Merge branch 'develop' into chore/lectures/use-signals-in-lecture-wiz…
florian-glombik Nov 20, 2024
7ec9610
Fix client tests
florian-glombik Nov 21, 2024
391651a
Merge branch 'develop' into chore/lectures/use-signals-in-lecture-wiz…
florian-glombik Nov 21, 2024
6763547
Merge branch 'develop' into chore/lectures/use-signals-in-lecture-wiz…
florian-glombik Nov 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 14 additions & 14 deletions src/main/webapp/app/lecture/lecture-attachments.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,29 +1,29 @@
<div class="row justify-content-center">
<div class="col-12">
@if (lecture) {
@if (lecture()) {
<div>
@if (showHeader) {
@if (showHeader()) {
<div>
<h2><span jhiTranslate="artemisApp.lecture.attachments.title"></span>: {{ lecture.title }} - {{ lecture.course?.shortName }}</h2>
<h2><span jhiTranslate="artemisApp.lecture.attachments.title"></span>: {{ lecture().title }} - {{ lecture().course?.shortName }}</h2>
<hr />
<div class="row">
<div class="col-6">
<dt><span jhiTranslate="artemisApp.lecture.startDate"></span></dt>
<dd>
<span>{{ lecture.startDate | artemisDate }}</span>
<span>{{ lecture().startDate | artemisDate }}</span>
</dd>
</div>
<div class="col-6">
<dt><span jhiTranslate="artemisApp.lecture.endDate"></span></dt>
<dd>
<span>{{ lecture.endDate | artemisDate }}</span>
<span>{{ lecture().endDate | artemisDate }}</span>
</dd>
</div>
</div>
<div class="row">
<div class="col-12">
<dt><span jhiTranslate="artemisApp.lecture.description"></span></dt>
<dd class="markdown-preview editor-outline-background" [innerHTML]="lecture.description | htmlForMarkdown"></dd>
<dd class="markdown-preview editor-outline-background" [innerHTML]="lecture().description | htmlForMarkdown"></dd>
</div>
</div>
<hr class="mt-2 mb-2" />
Expand Down Expand Up @@ -83,7 +83,7 @@ <h4 jhiTranslate="artemisApp.lecture.attachments.attachments"></h4>
<button
type="button"
class="btn btn-primary btn-sm me-1"
[routerLink]="['/course-management', lecture.course?.id, 'lectures', lecture.id, 'attachments', attachment.id]"
[routerLink]="['/course-management', lecture().course?.id, 'lectures', lecture().id, 'attachments', attachment.id]"
[ngbTooltip]="'entity.action.view' | artemisTranslate"
>
<fa-icon [icon]="faEye" />
Expand All @@ -92,15 +92,16 @@ <h4 jhiTranslate="artemisApp.lecture.attachments.attachments"></h4>
}
<button
[disabled]="attachmentToBeCreated?.id === attachment?.id"
type="submit"
type="button"
(click)="editAttachment(attachment)"
class="btn btn-primary btn-sm me-1"
>
<fa-icon [icon]="faPencilAlt" />
<span class="d-none d-md-inline" jhiTranslate="entity.action.edit"></span>
</button>
@if (lecture.isAtLeastInstructor) {
@if (lecture().isAtLeastInstructor) {
<button
type="button"
[disabled]="attachmentToBeCreated?.id === attachment?.id"
jhiDeleteButton
[entityTitle]="attachment?.name || ''"
Expand Down Expand Up @@ -130,8 +131,7 @@ <h4 jhiTranslate="artemisApp.lecture.attachments.attachments"></h4>
<div class="col-12">
@if (!attachmentToBeCreated.id) {
<h4 jhiTranslate="artemisApp.lecture.attachments.newAttachment"></h4>
}
@if (attachmentToBeCreated.id) {
} @else {
<h4 jhiTranslate="artemisApp.lecture.attachments.editAttachment"></h4>
}
</div>
Expand Down Expand Up @@ -198,11 +198,11 @@ <h4 jhiTranslate="artemisApp.lecture.attachments.editAttachment"></h4>
</div>
<div class="row">
<div class="col-12">
<button id="upload-attachment" type="submit" [disabled]="!isSubmitPossible" (click)="saveAttachment()" class="btn btn-primary me-2">
<button id="upload-attachment" type="button" [disabled]="!isSubmitPossible" (click)="saveAttachment()" class="btn btn-primary me-2">
<fa-icon [icon]="faPaperclip" />&nbsp;
<span jhiTranslate="entity.action.saveAttachment"></span>
</button>
<button type="submit" (click)="cancel()" class="btn btn-default">
<button type="button" (click)="cancel()" class="btn btn-default">
<fa-icon [icon]="faTimes" />&nbsp;<span jhiTranslate="entity.action.cancel"></span>
</button>
</div>
Expand All @@ -212,7 +212,7 @@ <h4 jhiTranslate="artemisApp.lecture.attachments.editAttachment"></h4>
@if (!attachmentToBeCreated) {
<div class="row">
<div class="col-12">
<button type="submit" (click)="addAttachment()" class="btn btn-primary" id="add-attachment">
<button type="button" (click)="addAttachment()" class="btn btn-primary" id="add-attachment">
<fa-icon [icon]="faPaperclip" />&nbsp;<span jhiTranslate="entity.action.addAttachment"></span>
</button>
</div>
Expand Down
59 changes: 31 additions & 28 deletions src/main/webapp/app/lecture/lecture-attachments.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Component, ElementRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { Component, ElementRef, OnDestroy, ViewChild, effect, inject, input, signal } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { HttpErrorResponse, HttpResponse } from '@angular/common/http';
import { Lecture } from 'app/entities/lecture.model';
Expand All @@ -16,7 +16,7 @@ import { LectureService } from 'app/lecture/lecture.service';
templateUrl: './lecture-attachments.component.html',
styleUrls: ['./lecture-attachments.component.scss'],
})
export class LectureAttachmentsComponent implements OnInit, OnDestroy {
export class LectureAttachmentsComponent implements OnDestroy {
protected readonly faSpinner = faSpinner;
protected readonly faTimes = faTimes;
protected readonly faTrash = faTrash;
Expand All @@ -28,11 +28,16 @@ export class LectureAttachmentsComponent implements OnInit, OnDestroy {
protected readonly allowedFileExtensions = ALLOWED_FILE_EXTENSIONS_HUMAN_READABLE;
protected readonly acceptedFileExtensionsFileBrowser = ACCEPTED_FILE_EXTENSIONS_FILE_BROWSER;

private readonly activatedRoute = inject(ActivatedRoute);
private readonly attachmentService = inject(AttachmentService);
private readonly lectureService = inject(LectureService);
private readonly fileService = inject(FileService);

@ViewChild('fileInput', { static: false }) fileInput: ElementRef;
@Input() lectureId: number | undefined;
@Input() showHeader = true;
lectureId = input.required<number>();
showHeader = input<boolean>(true);

lecture: Lecture;
lecture = signal<Lecture>(new Lecture());
attachments: Attachment[] = [];
attachmentToBeCreated?: Attachment;
attachmentBackup?: Attachment;
Expand All @@ -46,30 +51,28 @@ export class LectureAttachmentsComponent implements OnInit, OnDestroy {
private dialogErrorSource = new Subject<string>();
dialogError$ = this.dialogErrorSource.asObservable();

constructor(
protected activatedRoute: ActivatedRoute,
private attachmentService: AttachmentService,
private lectureService: LectureService,
private fileService: FileService,
) {}

ngOnInit() {
this.notificationText = undefined;
this.activatedRoute.parent!.data.subscribe(({ lecture }) => {
if (this.lectureId) {
this.lectureService.findWithDetails(this.lectureId).subscribe((lectureResponse: HttpResponse<Lecture>) => {
this.lecture = lectureResponse.body!;
this.loadAttachments();
constructor() {
effect(
() => {
this.notificationText = undefined;
this.activatedRoute.parent!.data.subscribe(({ lecture }) => {
if (this.lectureId) {
this.lectureService.findWithDetails(this.lectureId()).subscribe((lectureResponse: HttpResponse<Lecture>) => {
this.lecture.set(lectureResponse.body!);
this.loadAttachments();
});
} else {
this.lecture = lecture;
this.loadAttachments();
florian-glombik marked this conversation as resolved.
Show resolved Hide resolved
}
});
} else {
this.lecture = lecture;
this.loadAttachments();
}
});
},
{ allowSignalWrites: true },
);
}
florian-glombik marked this conversation as resolved.
Show resolved Hide resolved

loadAttachments(): void {
this.attachmentService.findAllByLectureId(this.lecture.id!).subscribe((attachmentsResponse: HttpResponse<Attachment[]>) => {
this.attachmentService.findAllByLectureId(this.lecture().id!).subscribe((attachmentsResponse: HttpResponse<Attachment[]>) => {
this.attachments = attachmentsResponse.body!;
this.attachments.forEach((attachment) => {
this.viewButtonAvailable[attachment.id!] = this.isViewButtonAvailable(attachment.link!);
florian-glombik marked this conversation as resolved.
Show resolved Hide resolved
Expand All @@ -91,7 +94,7 @@ export class LectureAttachmentsComponent implements OnInit, OnDestroy {

addAttachment(): void {
const newAttachment = new Attachment();
newAttachment.lecture = this.lecture;
newAttachment.lecture = this.lecture();
newAttachment.attachmentType = AttachmentType.FILE;
newAttachment.version = 0;
newAttachment.uploadDate = dayjs();
Expand Down Expand Up @@ -133,8 +136,8 @@ export class LectureAttachmentsComponent implements OnInit, OnDestroy {
this.attachmentService.create(this.attachmentToBeCreated!, this.attachmentFile!).subscribe({
next: (attachmentRes: HttpResponse<Attachment>) => {
this.attachments.push(attachmentRes.body!);
this.lectureService.findWithDetails(this.lecture.id!).subscribe((lectureResponse: HttpResponse<Lecture>) => {
this.lecture = lectureResponse.body!;
this.lectureService.findWithDetails(this.lecture().id!).subscribe((lectureResponse: HttpResponse<Lecture>) => {
this.lecture.set(lectureResponse.body!);
});
this.attachmentFile = undefined;
this.attachmentToBeCreated = undefined;
Expand Down
2 changes: 0 additions & 2 deletions src/main/webapp/app/lecture/wizard-mode/lecture-wizard-period.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,4 @@ export class LectureUpdateWizardPeriodComponent {
@Input() currentStep: number;
@Input() lecture: Lecture;
@Input() validateDatesFunction: () => void;

constructor() {}
}
2 changes: 0 additions & 2 deletions src/main/webapp/app/lecture/wizard-mode/lecture-wizard-title.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,4 @@ export class LectureUpdateWizardTitleComponent {
@Input() lecture: Lecture;

domainActionsDescription = [new FormulaAction()];

constructor() {}
}
18 changes: 8 additions & 10 deletions src/main/webapp/app/lecture/wizard-mode/lecture-wizard-units.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div>
<h1><span jhiTranslate="artemisApp.lecture.wizardMode.steps.unitsStepTitle"></span></h1>
<h2><span jhiTranslate="artemisApp.lecture.wizardMode.steps.unitsStepTitle"></span></h2>
<p><span jhiTranslate="artemisApp.lecture.wizardMode.steps.unitsStepMessage"></span></p>
<jhi-lecture-unit-management
[lectureId]="this.lecture.id"
Expand All @@ -12,16 +12,14 @@ <h1><span jhiTranslate="artemisApp.lecture.wizardMode.steps.unitsStepTitle"></sp
<div class="form-group w-100 d-flex justify-content-start">
<jhi-unit-creation-card [emitEvents]="true" (onUnitCreationCardClicked)="onCreateLectureUnit($event)" />
</div>
}
@if (isAnyUnitFormOpen()) {
} @else {
<div class="form-group">
@if (!isEditingLectureUnit) {
<h4><span jhiTranslate="artemisApp.lecture.wizardMode.newLectureUnit"></span></h4>
}
@if (isEditingLectureUnit) {
} @else {
<h4><span jhiTranslate="artemisApp.lecture.wizardMode.editLectureUnit"></span></h4>
}
@if (isTextUnitFormOpen) {
@if (isTextUnitFormOpen()) {
<jhi-text-unit-form
[isEditMode]="isEditingLectureUnit"
[hasCancelButton]="true"
Expand All @@ -30,7 +28,7 @@ <h4><span jhiTranslate="artemisApp.lecture.wizardMode.editLectureUnit"></span></
[formData]="textUnitFormData"
/>
}
@if (isVideoUnitFormOpen) {
@if (isVideoUnitFormOpen()) {
<jhi-video-unit-form
[isEditMode]="isEditingLectureUnit"
[hasCancelButton]="true"
Expand All @@ -39,7 +37,7 @@ <h4><span jhiTranslate="artemisApp.lecture.wizardMode.editLectureUnit"></span></
[formData]="videoUnitFormData"
/>
}
@if (isOnlineUnitFormOpen) {
@if (isOnlineUnitFormOpen()) {
<jhi-online-unit-form
[isEditMode]="isEditingLectureUnit"
[hasCancelButton]="true"
Expand All @@ -48,7 +46,7 @@ <h4><span jhiTranslate="artemisApp.lecture.wizardMode.editLectureUnit"></span></
[formData]="onlineUnitFormData"
/>
}
@if (isAttachmentUnitFormOpen) {
@if (isAttachmentUnitFormOpen()) {
<jhi-attachment-unit-form
[isEditMode]="isEditingLectureUnit"
[hasCancelButton]="true"
Expand All @@ -57,7 +55,7 @@ <h4><span jhiTranslate="artemisApp.lecture.wizardMode.editLectureUnit"></span></
[formData]="attachmentUnitFormData"
/>
}
@if (isExerciseUnitFormOpen) {
@if (isExerciseUnitFormOpen()) {
<jhi-create-exercise-unit
[shouldNavigateOnSubmit]="false"
(onExerciseUnitCreated)="onExerciseUnitCreated()"
Expand Down
48 changes: 24 additions & 24 deletions src/main/webapp/app/lecture/wizard-mode/lecture-wizard-units.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Component, Input, OnInit, ViewChild } from '@angular/core';
import { Component, Input, OnInit, ViewChild, computed, signal } 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';
Expand Down Expand Up @@ -33,11 +33,11 @@ export class LectureUpdateWizardUnitsComponent implements OnInit {
@ViewChild(LectureUnitManagementComponent, { static: false }) unitManagementComponent: LectureUnitManagementComponent;

isEditingLectureUnit: boolean;
isTextUnitFormOpen: boolean;
isExerciseUnitFormOpen: boolean;
isVideoUnitFormOpen: boolean;
isOnlineUnitFormOpen: boolean;
isAttachmentUnitFormOpen: boolean;
isTextUnitFormOpen = signal<boolean>(false);
isExerciseUnitFormOpen = signal<boolean>(false);
isVideoUnitFormOpen = signal<boolean>(false);
isOnlineUnitFormOpen = signal<boolean>(false);
isAttachmentUnitFormOpen = signal<boolean>(false);

currentlyProcessedTextUnit: TextUnit;
currentlyProcessedVideoUnit: VideoUnit;
Expand Down Expand Up @@ -71,33 +71,33 @@ export class LectureUpdateWizardUnitsComponent implements OnInit {

switch (type) {
case LectureUnitType.TEXT:
this.isTextUnitFormOpen = true;
this.isTextUnitFormOpen.set(true);
break;
case LectureUnitType.EXERCISE:
this.isExerciseUnitFormOpen = true;
this.isExerciseUnitFormOpen.set(true);
break;
case LectureUnitType.VIDEO:
this.isVideoUnitFormOpen = true;
this.isVideoUnitFormOpen.set(true);
break;
case LectureUnitType.ONLINE:
this.isOnlineUnitFormOpen = true;
this.isOnlineUnitFormOpen.set(true);
break;
case LectureUnitType.ATTACHMENT:
this.isAttachmentUnitFormOpen = true;
this.isAttachmentUnitFormOpen.set(true);
break;
florian-glombik marked this conversation as resolved.
Show resolved Hide resolved
}
}

isAnyUnitFormOpen(): boolean {
return this.isTextUnitFormOpen || this.isVideoUnitFormOpen || this.isOnlineUnitFormOpen || this.isAttachmentUnitFormOpen || this.isExerciseUnitFormOpen;
}
isAnyUnitFormOpen = computed(() => {
return this.isTextUnitFormOpen() || this.isVideoUnitFormOpen() || this.isOnlineUnitFormOpen() || this.isAttachmentUnitFormOpen() || this.isExerciseUnitFormOpen();
});

onCloseLectureUnitForms() {
this.isTextUnitFormOpen = false;
this.isVideoUnitFormOpen = false;
this.isOnlineUnitFormOpen = false;
this.isAttachmentUnitFormOpen = false;
this.isExerciseUnitFormOpen = false;
this.isTextUnitFormOpen.set(false);
this.isVideoUnitFormOpen.set(false);
this.isOnlineUnitFormOpen.set(false);
this.isAttachmentUnitFormOpen.set(false);
this.isExerciseUnitFormOpen.set(false);
}

createEditTextUnit(formData: TextUnitFormData) {
Expand Down Expand Up @@ -258,11 +258,11 @@ export class LectureUpdateWizardUnitsComponent implements OnInit {
this.currentlyProcessedOnlineUnit = lectureUnit as OnlineUnit;
this.currentlyProcessedAttachmentUnit = lectureUnit as AttachmentUnit;

this.isTextUnitFormOpen = lectureUnit.type === LectureUnitType.TEXT;
this.isVideoUnitFormOpen = lectureUnit.type === LectureUnitType.VIDEO;
this.isExerciseUnitFormOpen = lectureUnit.type === LectureUnitType.EXERCISE;
this.isOnlineUnitFormOpen = lectureUnit.type === LectureUnitType.ONLINE;
this.isAttachmentUnitFormOpen = lectureUnit.type === LectureUnitType.ATTACHMENT;
this.isTextUnitFormOpen.set(lectureUnit.type === LectureUnitType.TEXT);
this.isVideoUnitFormOpen.set(lectureUnit.type === LectureUnitType.VIDEO);
this.isExerciseUnitFormOpen.set(lectureUnit.type === LectureUnitType.EXERCISE);
this.isOnlineUnitFormOpen.set(lectureUnit.type === LectureUnitType.ONLINE);
this.isAttachmentUnitFormOpen.set(lectureUnit.type === LectureUnitType.ATTACHMENT);

switch (lectureUnit.type) {
case LectureUnitType.TEXT:
Expand Down
Loading