Enhanced design by a lot

Author: Plugrol

EEDU-Frontend/src/app/common/abstract-list/abstract-list.component.ts

@@ -25,6 +25,7 @@ export interface ListItemInfo<T> {
     title: (value: T) => string;
     icon?: (value: T) => string;
     chips?: (value: T) => string[];
+    content?: Type<ListItemContent<T>>;
 }
 
 export interface GeneralListInfo<T> {
@@ -41,7 +42,6 @@ export class AbstractList<T> {
 
     public readonly itemInfo: InputSignal<ListItemInfo<T> | null> = input<ListItemInfo<T> | null>(null);
 
-    public readonly componentContent: InputSignal<Type<ListItemContent<T>> | null> = input<Type<ListItemContent<T>> | null>(null);
     public readonly generalListInfo: InputSignal<GeneralListInfo<T> | null> = input<GeneralListInfo<T> | null>(null);
     public readonly selectionType: InputSignal<SelectionType> = input<SelectionType>(SelectionType.SINGLE);
     public readonly height: InputSignal<number | undefined> = input<number | undefined>();
@@ -73,11 +73,11 @@ export class AbstractList<T> {
     protected get hasChips(): boolean { return !!this.itemInfo()!.chips; }
 
     protected get hasContent(): boolean {
-        return !!this.componentContent();
+        return !!this.itemInfo()?.content;
     }
 
     protected get content(): Type<any> {
-        return this.componentContent()!;
+        return this.itemInfo()!.content!;
     }
 
     protected get partiallySelected(): boolean {

EEDU-Frontend/src/app/common/abstract-list/checkboxes/single-check-box.component.ts

@@ -5,26 +5,21 @@ import {NgIf} from "@angular/common";
 import {MatCheckbox} from "@angular/material/checkbox";
 
 @Component({
-    selector: 'single-checkbox',
-    template: `
+    selector: 'single-checkbox', template: `
         <a matListItemTitle>
             <mat-checkbox
                 *ngIf="show()"
                 [checked]="checked()"
                 (click)="$event.stopPropagation()"
                 (change)="onToggle.emit()"
                 (keydown)="keyboardEvent.emit($event)">
+                <a class="title">
+                    <mat-icon class="icon" *ngIf="icon()">{{ icon() }}</mat-icon>
+                    {{ title() }}
+                </a>
             </mat-checkbox>
-            <mat-icon class="icon" *ngIf="icon()">{{ icon() }}</mat-icon>
-            <a class="title">{{ title() }}</a>
         </a>
-    `,
-    imports: [
-        MatCheckbox,
-        NgIf,
-        MatListItemTitle,
-        MatIcon
-    ]
+    `, styles: '.title { user-select: none }', imports: [MatCheckbox, NgIf, MatListItemTitle, MatIcon]
 })
 export class SingleCheckBoxComponent {
     @Output() public readonly keyboardEvent: EventEmitter<KeyboardEvent> = new EventEmitter<KeyboardEvent>;

EEDU-Frontend/src/app/entity/entity-list/entity-list.component.html

@@ -6,19 +6,40 @@
         <mat-icon class="empty-list-icon">folder_open</mat-icon>
         <button (click)="openCreateDialog()" mat-flat-button>Create first entry</button>
     </div>
+
     <list
         #list
         *ngIf="loaded && values.length > 0"
-        [height]="435"
+        [height]="480"
         [itemInfo]="itemInfo()"
-        [selectionType]="SelectionType.MULTIPLE" [values]="values">
+        [selectionType]="SelectionType.MULTIPLE"
+        [values]="pagedValues">
         <div style="margin-left: auto">
             <button (click)="deletePressed.emit(list.selected)" *ngIf="list.selected.length > 0" mat-icon-button>
                 <mat-icon>delete</mat-icon>
             </button>
             <button (click)="openCreateDialog()" mat-icon-button>
                 <mat-icon>add</mat-icon>
             </button>
+            <button mat-icon-button>
+                <mat-icon>filter_list</mat-icon>
+            </button>
         </div>
     </list>
+
+    <div *ngIf="loaded && pagedValues.length > 10" class="scrollable-button">
+        <p class="mat-caption">You can scroll here</p>
+        <mat-icon >keyboard_double_arrow_down</mat-icon>
+    </div>
+
+    <div *ngIf="paginatorRequired" class="paginator-tools">
+        <mat-checkbox [checked]="!paginatorEnabled" (click)="togglePaginator()">Disable Paginator</mat-checkbox>
+        <mat-paginator
+            [disabled]="!paginatorEnabled"
+            [length]="values.length"
+            [pageSize]="pageSize"
+            [pageSizeOptions]="[5, 10, 25]"
+            (page)="onPageChange($event)">
+        </mat-paginator>
+    </div>
 </div>

EEDU-Frontend/src/app/entity/entity-list/entity-list.component.scss

@@ -1,6 +1,5 @@
 .container {
-    height: 500px;
-    border-bottom: solid 1px rgba(50, 50, 50, 0.1);
+    height: 605px;
 
     mat-progress-bar {
         width: 50%;
@@ -30,6 +29,21 @@
         }
     }
 
+    .paginator-tools {
+        border-top: solid 1px rgba(50, 50, 50, 0.1);;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    .scrollable-button
+    {
+        text-align: center;
+        position: absolute;
+        bottom: 80px;
+        left: 50%;
+        transform: translateX(-50%);
+    }
 }
 
 

EEDU-Frontend/src/app/entity/entity-list/entity-list.component.spec.ts

@@ -3,8 +3,8 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { EntityListComponent } from './entity-list.component';
 
 describe('EntityListComponent', () => {
-  let component: EntityListComponent;
-  let fixture: ComponentFixture<EntityListComponent>;
+  let component: EntityListComponent<any>;
+  let fixture: ComponentFixture<EntityListComponent<any>>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({

EEDU-Frontend/src/app/entity/entity-list/entity-list.component.ts

@@ -7,10 +7,12 @@ import {MatButton, MatIconButton} from "@angular/material/button";
 import {EntityService} from "../entity-service";
 import {MatDialog} from "@angular/material/dialog";
 import {ComponentType} from "@angular/cdk/overlay";
+import {MatPaginator, PageEvent} from "@angular/material/paginator";
+import {MatCheckbox} from "@angular/material/checkbox";
 
 @Component({
     selector: 'app-entity-list',
-    imports: [MatIcon, AbstractList, NgIf, MatProgressBar, MatIconButton, MatButton],
+    imports: [MatIcon, AbstractList, NgIf, MatProgressBar, MatIconButton, MatButton, MatPaginator, MatCheckbox],
     templateUrl: './entity-list.component.html',
     styleUrl: './entity-list.component.scss'
 })
@@ -19,16 +21,55 @@ export class EntityListComponent<T extends { id: any }> implements AfterViewInit
     @Output() public readonly deletePressed: EventEmitter<T[]> = new EventEmitter<T[]>;
     public readonly service: InputSignal<EntityService<any, T, any, any> | null> = input<EntityService<any, T, any, any> | null>(null)
     public readonly itemInfo: InputSignal<ListItemInfo<T> | null> = input<ListItemInfo<T> | null>(null);
+
     protected readonly SelectionType: typeof SelectionType = SelectionType;
 
+    private _paginatorEnabled: boolean = true;
+    private _values: readonly T[] = [];
+    private _pageIndex: number = 0;
+    private _pageSize: number = 10;
+
+    private _pagedValues: readonly T[] = [];
+
     public constructor(private readonly _matDialog: MatDialog, private readonly cdr: ChangeDetectorRef) {}
 
-    private _values: readonly T[] = [];
+    protected get paginatorEnabled(): boolean {
+        return this._paginatorEnabled;
+    }
+    protected get paginatorRequired(): boolean
+    {
+        return this._values.length > 10;
+    }
+
+    protected togglePaginator(): void {
+        this._paginatorEnabled = !this._paginatorEnabled;
+        this.updatePagedValues();
+    }
 
     protected get values(): readonly T[] {
         return this._values;
     }
 
+    protected get pagedValues(): readonly T[] {
+        return this._pagedValues;
+    }
+
+    protected get pageIndex(): number {
+        return this._pageIndex;
+    }
+
+    protected set pageIndex(value: number) {
+        this._pageIndex = value;
+    }
+
+    protected get pageSize(): number {
+        return this._pageSize;
+    }
+
+    protected set pageSize(value: number) {
+        this._pageSize = value;
+    }
+
     protected get loaded(): boolean {
         return this.service()?.fetched || false;
     }
@@ -39,11 +80,30 @@ export class EntityListComponent<T extends { id: any }> implements AfterViewInit
         }
         this.service()?.value$.subscribe((value: T[]): void => {
             this._values = value;
+            this.updatePagedValues();
             this.cdr.detectChanges();
         })
     }
 
     public openCreateDialog(): void {
-        this._matDialog.open(this.service()?.createDialogType as ComponentType<T>, {width: '600px'});
+        this._matDialog.open(this.service()?.createDialogType as ComponentType<any>, {width: '600px'});
+    }
+
+    protected onPageChange(event: PageEvent) {
+        this.pageIndex = event.pageIndex;
+        this.pageSize = event.pageSize;
+        this.updatePagedValues();
+    }
+
+    private updatePagedValues(): void {
+        if(!this.paginatorEnabled)
+        {
+            this._pagedValues = this._values;
+            return;
+        }
+
+        const startIndex: number = this.pageIndex * this.pageSize;
+        const endIndex: number = startIndex + this.pageSize;
+        this._pagedValues = this._values.slice(startIndex, endIndex);
     }
 }

EEDU-Frontend/src/app/entity/entity-service.ts

@@ -7,45 +7,19 @@ import {ComponentType} from "@angular/cdk/overlay";
 export abstract class EntityService<P, T extends { id: P }, G, C> {
 
     private readonly _subject: BehaviorSubject<T[]> = new BehaviorSubject<T[]>([]);
-    private _fetched: boolean = false
-
-    protected constructor(
-        private readonly _http: HttpClient,
-        private readonly _location: string,
-        private readonly _createDialog: typeof AbstractSimpleCreateEntity,
-    ) {}
-
-    public get createDialogType(): ComponentType<any> {
-        return this._createDialog as ComponentType<any>;
-    }
-
-    public abstract translate(obj: G): T;
-
-    protected get BACKEND_URL(): string {
-        return `${environment.backendUrl}/${this._location}`;
-    }
 
-    public create(models: C[]): Observable<T[]> {
-        const url: string = `${this.BACKEND_URL}/create`;
-        return this.http.post<G[]>(url, this.toPackets(models), {withCredentials: true}).pipe(this.translateValue, tap((response: T[]): void => this.pushCreated(response)));
-    }
-
-    public get(id: P): Observable<T> {
-        const url: string = `${this.BACKEND_URL}/get/${id}`;
-        return this.http.get<G>(url).pipe(// this will be a part of my flashback of why I have gone crazy
-            map((response: G): G[] => [response]), this.translateValue, map((response: any[]): any => response[0])
-        );
-    }
+    protected constructor(private readonly _http: HttpClient, private readonly _location: string, private readonly _createDialog: ComponentType<AbstractSimpleCreateEntity>,) {}
 
-    public delete(id: P[]): Observable<void> {
-        const url: string = `${this.BACKEND_URL}/delete/${id}`;
-        return this.http.delete(url, {withCredentials: true}).pipe(map((): void => { this.postDelete(id); }));
-    }
+    private _fetched: boolean = false
 
     public get fetched(): boolean {
         return this._fetched;
     }
 
+    public get createDialogType(): ComponentType<AbstractSimpleCreateEntity> {
+        return this._createDialog;
+    }
+
     public get translateValue(): OperatorFunction<G[], T[]> {
         return map((response: G[]): T[] => response.map((item: G): T => this.translate(item)));
     }
@@ -54,10 +28,6 @@ export abstract class EntityService<P, T extends { id: P }, G, C> {
         return this.value$.value;
     }
 
-    protected get http(): HttpClient {
-        return this._http;
-    }
-
     public get value$(): BehaviorSubject<T[]> {
         if (!this.fetched) {
             this.fetchAll.subscribe();
@@ -73,6 +43,40 @@ export abstract class EntityService<P, T extends { id: P }, G, C> {
         }));
     }
 
+    protected get BACKEND_URL(): string {
+        return `${environment.backendUrl}/${this._location}`;
+    }
+
+    protected get http(): HttpClient {
+        return this._http;
+    }
+
+    public abstract translate(obj: G): T;
+
+    public create(models: C[]): Observable<T[]> {
+        const url: string = `${this.BACKEND_URL}/create`;
+        return this.http.post<G[]>(url, this.toPackets(models), {withCredentials: true}).pipe(this.translateValue, tap((response: T[]): void => this.pushCreated(response)));
+    }
+
+    public get(id: P): Observable<T> {
+        const url: string = `${this.BACKEND_URL}/get/${id}`;
+        return this.http.get<G>(url).pipe(// this will be a part of my flashback of why I have gone crazy
+            map((response: G): G[] => [response]), this.translateValue, map((response: any[]): any => response[0]));
+    }
+
+    public delete(id: P[]): Observable<void> {
+        const url: string = `${this.BACKEND_URL}/delete/${id}`;
+        return this.http.delete(url, {withCredentials: true}).pipe(map((): void => { this.postDelete(id); }));
+    }
+
+    public clearCache(): void {
+        this._fetched = false;
+    }
+
+    public update(): void {
+        this.value$.next([...this.value]);
+    }
+
     protected toPackets(models: C[]): any[] {
         return models.map((model: C): any => {
             if (typeof model === 'object' && model !== null && 'toPacket' in model) {
@@ -90,12 +94,4 @@ export abstract class EntityService<P, T extends { id: P }, G, C> {
     protected postDelete(id: P[]): void {
         this.value$.next(this.value.filter(((value: T): boolean => !id.includes(value.id))));
     }
-
-    public clearCache(): void {
-        this._fetched = false;
-    }
-
-    public update(): void {
-        this.value$.next([...this.value]);
-    }
 }

EEDU-Frontend/src/app/management/lazy-loaded-accordion/lazy-loaded-accordion.component.html

@@ -1,7 +1,7 @@
 <mat-tab-group style="margin: 8px;">
     <mat-tab *ngFor="let tab of tabs()" [label]="tab.label">
         <ng-template mat-tab-label>
-            <mat-icon class="course-component-icon">{{ tab.icon }}</mat-icon>
+            <mat-icon class="component-icon">{{ tab.icon }}</mat-icon>
             {{ tab.label }}
         </ng-template>
         <ng-template matTabContent>

EEDU-Frontend/src/app/management/lazy-loaded-accordion/lazy-loaded-accordion.component.scss

@@ -1,4 +1,4 @@
-.course-component-icon
+.component-icon
 {
     margin-right: 8px;
 }