Skip to content

Commit

Permalink
Development: Use signals in lecture unit wizard (#9708)
Browse files Browse the repository at this point in the history
  • Loading branch information
@florian-glombik
florian-glombik authored Nov 24, 2024
1 parent 9efdb06 commit 0005657
Show file tree
Hide file tree
Showing 8 changed files with 108 additions and 107 deletions.
28 changes: 14 additions & 14 deletions src/main/webapp/app/lecture/lecture-attachments.component.html
View file
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
65 changes: 36 additions & 29 deletions src/main/webapp/app/lecture/lecture-attachments.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
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';
import dayjs from 'dayjs/esm';
import { Subject } from 'rxjs';
import { Subject, Subscription } from 'rxjs';
import { FileService } from 'app/shared/http/file.service';
import { Attachment, AttachmentType } from 'app/entities/attachment.model';
import { AttachmentService } from 'app/lecture/attachment.service';
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<number>();
showHeader = input<boolean>(true);

lecture: Lecture;
lecture = signal<Lecture>(new Lecture());
attachments: Attachment[] = [];
attachmentToBeCreated?: Attachment;
attachmentBackup?: Attachment;
Expand All @@ -46,30 +51,31 @@ 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();
private routeDataSubscription?: Subscription;

constructor() {
effect(
() => {
this.notificationText = undefined;
this.routeDataSubscription?.unsubscribe(); // in case the subscription was already defined
this.routeDataSubscription = 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.set(lecture);
this.loadAttachments();
}
});
} else {
this.lecture = lecture;
this.loadAttachments();
}
});
},
{ allowSignalWrites: true },
);
}

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!);
Expand All @@ -79,6 +85,7 @@ export class LectureAttachmentsComponent implements OnInit, OnDestroy {

ngOnDestroy(): void {
this.dialogErrorSource.unsubscribe();
this.routeDataSubscription?.unsubscribe();
}

isViewButtonAvailable(attachmentLink: string): boolean {
Expand All @@ -91,7 +98,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 +140,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
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
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
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
Loading

0 comments on commit 0005657

Please sign in to comment.