Create date box component

src/main/webapp/app/lecture/pdf-preview/pdf-preview-date-box/pdf-preview-date-box.component.html

@@ -0,0 +1,18 @@
+<div class="date-box">
+    <div class="checkbox-container">
+        <input type="checkbox" id="date-box-checkbox" />
+        <label for="date-box-checkbox">Hide forever</label>
+    </div>
+    <div class="button-container">
+        <button class="btn btn-primary" (click)="selectCalendar()">Select Date</button>
+        <button class="btn btn-primary" (click)="selectExercise()">Select Exercise</button>
+    </div>
+    @if (calendarSelected()) {
+        <div class="calendar-container">
+            <input type="date" class="form-control" />
+        </div>
+    }
+    @if (exerciseSelected()) {
+        <div class="exercise-container">Exercises</div>
+    }
+</div>

src/main/webapp/app/lecture/pdf-preview/pdf-preview-date-box/pdf-preview-date-box.component.scss

@@ -0,0 +1,30 @@
+.date-box {
+    display: flex;
+    flex-direction: column;
+    padding: 10px;
+
+    .checkbox-container {
+        margin-bottom: 10px;
+    }
+
+    .button-container {
+        display: flex;
+        gap: 10px;
+
+        button {
+            min-width: 100px;
+        }
+    }
+
+    .calendar-container {
+        margin-top: 15px;
+        width: 100%;
+        display: flex;
+        justify-content: center;
+    }
+
+    .exercise-container {
+        margin-top: 15px;
+        color: #333;
+    }
+}

src/main/webapp/app/lecture/pdf-preview/pdf-preview-date-box/pdf-preview-date-box.component.ts

@@ -0,0 +1,35 @@
+import { Component, input, signal } from '@angular/core';
+import { ArtemisSharedModule } from 'app/shared/shared.module';
+import { Lecture } from 'app/entities/lecture.model';
+
+@Component({
+    selector: 'jhi-pdf-preview-date-box-component',
+    templateUrl: './pdf-preview-date-box.component.html',
+    styleUrls: ['./pdf-preview-date-box.component.scss'],
+    standalone: true,
+    imports: [ArtemisSharedModule],
+})
+export class PdfPreviewDateBoxComponent {
+    // Inputs
+    lecture = input<Lecture>();
+
+    // Signals
+    calendarSelected = signal<boolean>(false);
+    exerciseSelected = signal<boolean>(false);
+
+    /**
+     * Toggles the visibility of the calendar.
+     */
+    selectCalendar(): void {
+        this.calendarSelected.set(true);
+        this.exerciseSelected.set(false);
+    }
+
+    /**
+     * Handles the "Select Exercise" button click.
+     */
+    selectExercise(): void {
+        this.calendarSelected.set(false);
+        this.exerciseSelected.set(true);
+    }
+}

src/main/webapp/app/lecture/pdf-preview/pdf-preview-thumbnail-grid/pdf-preview-thumbnail-grid.component.html

@@ -19,11 +19,20 @@
             @if (isAttachmentUnit()) {
                 <button
                     [id]="'hide-show-button-' + page"
+                    style="'opacity' : activeButtonIndex === page '1' : '0'"
                     [class]="'hide-show-btn btn ' + (hiddenPages()!.has(page) ? 'btn-success' : 'btn-secondary')"
                     (click)="toggleVisibility(page, $event)"
+                    [ngbPopover]="popContent"
+                    [autoClose]="'outside'"
+                    placement="right auto"
+                    container="body"
                 >
                     <fa-icon [icon]="hiddenPages()!.has(page) ? faEye : faEyeSlash"></fa-icon>
                 </button>
+
+                <ng-template #popContent>
+                    <jhi-pdf-preview-date-box-component [lecture]="lecture()" />
+                </ng-template>
             }
         </div>
     }

src/main/webapp/app/lecture/pdf-preview/pdf-preview-thumbnail-grid/pdf-preview-thumbnail-grid.component.scss

@@ -76,7 +76,7 @@ input[type='checkbox'] {
 }
 
 .hide-show-btn {
-    opacity: 0;
+    opacity: 1;
     position: absolute;
     bottom: -20px;
     left: 50%;

src/main/webapp/app/lecture/pdf-preview/pdf-preview-thumbnail-grid/pdf-preview-thumbnail-grid.component.ts

@@ -7,18 +7,21 @@ import { AlertService } from 'app/core/util/alert.service';
 import { PdfPreviewEnlargedCanvasComponent } from 'app/lecture/pdf-preview/pdf-preview-enlarged-canvas/pdf-preview-enlarged-canvas.component';
 import { clone } from 'lodash-es';
 import { faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
+import { PdfPreviewDateBoxComponent } from 'app/lecture/pdf-preview/pdf-preview-date-box/pdf-preview-date-box.component';
+import { Lecture } from 'app/entities/lecture.model';
 
 @Component({
     selector: 'jhi-pdf-preview-thumbnail-grid-component',
     templateUrl: './pdf-preview-thumbnail-grid.component.html',
     styleUrls: ['./pdf-preview-thumbnail-grid.component.scss'],
     standalone: true,
-    imports: [ArtemisSharedModule, PdfPreviewEnlargedCanvasComponent],
+    imports: [ArtemisSharedModule, PdfPreviewEnlargedCanvasComponent, PdfPreviewDateBoxComponent],
 })
 export class PdfPreviewThumbnailGridComponent implements OnChanges {
     pdfContainer = viewChild.required<ElementRef<HTMLDivElement>>('pdfContainer');
 
     // Inputs
+    lecture = input<Lecture>();
     currentPdfUrl = input<string>();
     appendFile = input<boolean>();
     hiddenPages = input<Set<number>>();
@@ -31,6 +34,7 @@ export class PdfPreviewThumbnailGridComponent implements OnChanges {
     selectedPages = signal<Set<number>>(new Set());
     originalCanvas = signal<HTMLCanvasElement | undefined>(undefined);
     newHiddenPages = signal(new Set<number>(this.hiddenPages()!));
+    activeButtonIndex = signal<number | null>(null);
 
     // Outputs
     isPdfLoading = output<boolean>();
@@ -128,12 +132,14 @@ export class PdfPreviewThumbnailGridComponent implements OnChanges {
      * @param event The event object triggered by the click action.
      */
     toggleVisibility(pageIndex: number, event: Event): void {
-        if (this.hiddenPages()!.has(pageIndex)) {
+        /**if (this.hiddenPages()!.has(pageIndex)) {
             this.hiddenPages()!.delete(pageIndex);
         } else {
             this.hiddenPages()!.add(pageIndex);
         }
         this.newHiddenPagesOutput.emit(this.hiddenPages()!);
+        **/
+        this.activeButtonIndex.set(pageIndex);
         event.stopPropagation();
     }
 

src/main/webapp/app/lecture/pdf-preview/pdf-preview.component.html

@@ -41,6 +41,7 @@ <h4>
         </div>
         @if (currentPdfUrl()) {
             <jhi-pdf-preview-thumbnail-grid-component
+                [lecture]="this.attachmentUnit()?.lecture"
                 [currentPdfUrl]="currentPdfUrl()"
                 [appendFile]="appendFile()"
                 [hiddenPages]="hiddenPages()"