diff --git a/src/app/component/grid-items/grid-items.component.css b/src/app/component/grid-items/grid-items.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/component/grid-items/grid-items.component.html b/src/app/component/grid-items/grid-items.component.html new file mode 100644 index 0000000..928f9a5 --- /dev/null +++ b/src/app/component/grid-items/grid-items.component.html @@ -0,0 +1,17 @@ +
+ hi there! + + +
+
{{ el }}
+
+ + +
diff --git a/src/app/component/grid-items/grid-items.component.spec.ts b/src/app/component/grid-items/grid-items.component.spec.ts new file mode 100644 index 0000000..f6a199c --- /dev/null +++ b/src/app/component/grid-items/grid-items.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { GridItemsComponent } from './grid-items.component'; + +describe('GridItemsComponent', () => { + let component: GridItemsComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [GridItemsComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(GridItemsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/component/grid-items/grid-items.component.ts b/src/app/component/grid-items/grid-items.component.ts new file mode 100644 index 0000000..dfcc010 --- /dev/null +++ b/src/app/component/grid-items/grid-items.component.ts @@ -0,0 +1,33 @@ +import {Component, ElementRef, OnInit, ViewChild} from '@angular/core'; +import {Scroller, ScrollerModule} from 'primeng/scroller'; +import {NgClass, NgForOf, NgStyle} from '@angular/common'; + +@Component({ + selector: 'app-grid-items', + imports: [ + ScrollerModule, + NgClass, + NgForOf, + NgStyle + ], + styles: [ + `:host ::ng-deep { + .p-scroller-viewport { + flex: none; + } + }` + ], + templateUrl: './grid-items.component.html', + styleUrl: './grid-items.component.css' +}) +export class GridItemsComponent implements OnInit { + @ViewChild('container') containerRef!: ElementRef; + + private readonly FONT_SIZE_PX = 14; + items!: string[][]; + widthTest: string = '300px'; + + ngOnInit() { + this.items = Array.from({ length: 1000 }).map((_, i) => Array.from({ length: 1000 }).map((_j, j) => `Item #${i}_${j}`)); + } +} diff --git a/src/app/views/cards/cards.component.html b/src/app/views/cards/cards.component.html index e1e2b12..46aa1c2 100644 --- a/src/app/views/cards/cards.component.html +++ b/src/app/views/cards/cards.component.html @@ -1,60 +1,55 @@
- @if (initialized) { + @if (this.initialized) { - -
- @for (card of options.items; track card.id) { - - -
-
- - Card -
+ +
+ + +
+
+ + Card
- - {{ card.name }} - Card subtitle - -
- - -
- -

- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae - numquam deserunt - quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate - neque - quas! -

- - } +
+ + {{ card.name }} + Card subtitle + +
+ + +
+ +

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae + numquam deserunt + quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate + neque + quas! +

+
} @else { - hold on im pogging rn + hold on im poggin }
diff --git a/src/app/views/cards/cards.component.ts b/src/app/views/cards/cards.component.ts index d6e86c4..9ac4d69 100644 --- a/src/app/views/cards/cards.component.ts +++ b/src/app/views/cards/cards.component.ts @@ -1,22 +1,22 @@ // noinspection DuplicatedCode -import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core'; +import {AfterViewInit, Component, ElementRef, ViewChild} from '@angular/core'; import {Scroller, ScrollerLazyLoadEvent} from 'primeng/scroller'; -import {Card as CardModel, CardService, PageDeck} from '../../openapi'; -import {BehaviorSubject, catchError, debounceTime, of, Subject, switchMap} from 'rxjs'; +import {Card as CardModel, CardService} from '../../openapi'; +import {catchError, debounceTime, of, Subject, switchMap} from 'rxjs'; import {Button} from 'primeng/button'; import {Card} from 'primeng/card'; import {PrimeTemplate} from 'primeng/api'; -import {VirtualScrollDirective} from '../../directives/virtual-scroll.directive'; +import {NgForOf} from '@angular/common'; @Component({ selector: 'app-cards', imports: [ + Scroller, Button, Card, PrimeTemplate, - Scroller, - VirtualScrollDirective + NgForOf ], templateUrl: './cards.component.html', styleUrl: './cards.component.css' @@ -29,21 +29,21 @@ export class CardsComponent implements AfterViewInit { private readonly FONT_SIZE_PX = 14; - private pageSubject = new BehaviorSubject(0); + private pageSubject = new Subject(); private resizeObserver!: ResizeObserver; - pageSize: number = 5; page: number = 0; - // noinspection PointlessArithmeticExpressionJS Card height + ( margin top/bottom) (rem) - rowHeight: number = 36 + (0.5 * 2); - itemWidth: number = 24; // Card width (rem) - cards: CardModel[] = []; - lazyLoading: boolean = false; + pageSize: number = 5; + itemHeight: number = 36 + (0.5 * 2); + itemWidth: number = 24; + itemHeightInPx: number = this.itemHeight * this.FONT_SIZE_PX; + itemWidthInPx: number = this.itemWidth * this.FONT_SIZE_PX; + cardRows: CardModel[][] = []; + lazyLoading: boolean = true; + initialized: boolean = false; itemsPerRow!: number; rowsInPage!: number; - itemSize: number = this.rowHeight; - numberOfToleratedItems: number = 5; - initialized: boolean = false; + lastResponseSize?: number; ngAfterViewInit(): void { this.setupResizeObserver(); @@ -65,54 +65,38 @@ export class CardsComponent implements AfterViewInit { ) .subscribe(cards => { this.lazyLoading = false; + + if (!this.lastResponseSize) { + this.lastResponseSize = cards.length; + } + if (!this.initialized) { this.initialized = true; } - this.cards = [ - ...this.cards, - ...cards - ] + this.cardRows[this.page] = cards + console.log(cards.length); }) + + } private setupResizeObserver(): void { this.resizeObserver = new ResizeObserver(entries => { for (const entry of entries) { - this.calculateRowsInPage(entry.contentRect.height); - this.calculateItemsPerRow(entry.contentRect.width); - - const itemsInViewPort = this.itemsPerRow * this.rowsInPage; - this.pageSize = itemsInViewPort; - this.numberOfToleratedItems = itemsInViewPort; + this.rowsInPage = Math.ceil(entry.contentRect.height / this.itemHeightInPx); + this.itemsPerRow = Math.floor(entry.contentRect.width / this.itemWidthInPx); + this.pageSize = this.itemsPerRow; } }); this.resizeObserver.observe(this.containerRef.nativeElement); } - private calculateItemsPerRow(containerWidth: number): void { - const newItemsPerRow = Math.floor(containerWidth / (this.itemWidth * this.FONT_SIZE_PX)) || 1; - - if (newItemsPerRow !== this.itemsPerRow) { - this.itemsPerRow = newItemsPerRow; - } - this.updateVirtualScrollerSettings(); - } - - private calculateRowsInPage(containerHeight: number) { - this.rowsInPage = Math.ceil(containerHeight / (this.rowHeight * this.FONT_SIZE_PX)); - } - - private updateVirtualScrollerSettings(): void { - this.itemSize = (this.rowHeight * this.FONT_SIZE_PX) / this.itemsPerRow; - } - onLazyLoad(event: ScrollerLazyLoadEvent) { - if (!event || event.last % this.pageSize !== 0) { - return; - } + console.log(`kinda pogging rn cuz ${JSON.stringify(event)}`) this.pageSubject.next(++this.page); } + protected readonly JSON = JSON; }