- Hello world! -
- PrimeNG Playground -
-
-
-
- {{msg}}
-
+
-
-
-
-
+;
+ @ViewChild(Scroller) virtualScroller!: Scroller;
- test() {
- const items = [];
-
- for (let i = 0; i < 1000 ; i++) {
- items[i] = `${i}`
- }
-
- return items;
+ constructor(private cardService: CardService) {
}
+
+ private scrollSubject = new Subject();
+ private resizeObserver!: ResizeObserver;
+
+ private readonly FONT_SIZE_PX = 14;
+
+ lastRequestResponseSize?: number;
+ pageSize: number = 5;
+ page: number = -1;
+ // noinspection PointlessArithmeticExpressionJS Card height + ( margin top + margin bottom) (rem)
+ rowHeight: number = 36 + (1 * 2);
+ itemWidth: number = 24; // Card width (rem)
+ cards: CardModel[] = [];
+ lazyLoading: boolean = false;
+ itemsPerRow!: number;
+ rowsInPage!: number;
+
+ ngOnInit() {
+ this.scrollSubject
+ .pipe(debounceTime(150))
+ .subscribe((lazyLoadEvent) => {
+ this.getPage(lazyLoadEvent.last);
+ });
+
+ this.scrollSubject.next({
+ first: 0,
+ last: 0
+ })
+ }
+
+ ngAfterViewInit(): void {
+ this.setupResizeObserver();
+ }
+
+ 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;
+
+ if (this.virtualScroller) {
+ this.virtualScroller.numItemsInViewport = itemsInViewPort;
+ this.virtualScroller.numToleratedItems = Math.floor(itemsInViewPort * 1.5);
+ }
+ }
+ });
+ 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 {
+ if (this.virtualScroller) {
+ this.virtualScroller.itemSize = (this.rowHeight * this.FONT_SIZE_PX);
+ }
+ }
+
+
+ getPage(lastIndexInPage: number): void {
+ console.log("piss")
+ if (this.lazyLoading) {
+ return;
+ }
+ console.log("piss2")
+ console.log(lastIndexInPage )
+
+ if (this.lastRequestResponseSize && this.lastRequestResponseSize > lastIndexInPage ) {
+ return;
+ }
+ console.log("piss3")
+
+ this.lazyLoading = true
+ this.page++;
+
+ this.cardService.getCards(
+ undefined,
+ this.page,
+ this.pageSize,
+ ).subscribe({
+ next: cards => {
+ console.log(`pageSize ${this.pageSize}`);
+ console.log(`response size ${cards.length}`);
+ this.cards = this.cards.concat(cards);
+ console.log(`total cards ${this.cards.length}`);
+ this.lazyLoading = false;
+ }
+ });
+ }
+
+ onLazyLoad(event: ScrollerLazyLoadEvent) {
+ this.scrollSubject.next(event);
+ }
+
}
diff --git a/src/app/directives/virtual-scroll.directive.spec.ts b/src/app/directives/virtual-scroll.directive.spec.ts
new file mode 100644
index 0000000..72ecd60
--- /dev/null
+++ b/src/app/directives/virtual-scroll.directive.spec.ts
@@ -0,0 +1,8 @@
+import { VirtualScrollDirective } from './virtual-scroll.directive';
+
+describe('VirtualScrollDirective', () => {
+ it('should create an instance', () => {
+ const directive = new VirtualScrollDirective();
+ expect(directive).toBeTruthy();
+ });
+});
diff --git a/src/app/directives/virtual-scroll.directive.ts b/src/app/directives/virtual-scroll.directive.ts
new file mode 100644
index 0000000..6ea66d5
--- /dev/null
+++ b/src/app/directives/virtual-scroll.directive.ts
@@ -0,0 +1,26 @@
+import {Directive, Input} from '@angular/core';
+import {ScrollerContentOptions} from 'primeng/scroller';
+
+interface CoolScrollerContentOptions extends ScrollerContentOptions {
+ items?: T[];
+}
+
+interface TableRowTemplateContext {
+ $implicit: T;
+ options: CoolScrollerContentOptions;
+}
+
+@Directive({
+ selector: 'ng-template[appVirtualScroll]'
+})
+export class VirtualScrollDirective{
+
+ @Input('appVirtualScroll') items!: T[];
+
+ static ngTemplateContextGuard(
+ _dir: VirtualScrollDirective,
+ _ctx: unknown
+ ): _ctx is TableRowTemplateContext {
+ return true;
+ }
+}
diff --git a/src/app/openapi/.openapi-generator-ignore b/src/app/openapi/.openapi-generator-ignore
new file mode 100644
index 0000000..7484ee5
--- /dev/null
+++ b/src/app/openapi/.openapi-generator-ignore
@@ -0,0 +1,23 @@
+# OpenAPI Generator Ignore
+# Generated by openapi-generator https://github.com/openapitools/openapi-generator
+
+# Use this file to prevent files from being overwritten by the generator.
+# The patterns follow closely to .gitignore or .dockerignore.
+
+# As an example, the C# client generator defines ApiClient.cs.
+# You can make changes and tell OpenAPI Generator to ignore just this file by uncommenting the following line:
+#ApiClient.cs
+
+# You can match any string of characters against a directory, file or extension with a single asterisk (*):
+#foo/*/qux
+# The above matches foo/bar/qux and foo/baz/qux, but not foo/bar/baz/qux
+
+# You can recursively match patterns against a directory, file or extension with a double asterisk (**):
+#foo/**/qux
+# This matches foo/bar/qux, foo/baz/qux, and foo/bar/baz/qux
+
+# You can also negate patterns with an exclamation (!).
+# For example, you can ignore all files in a docs folder with the file extension .md:
+#docs/*.md
+# Then explicitly reverse the ignore rule for a single file:
+#!docs/README.md
diff --git a/src/app/openapi/.openapi-generator/FILES b/src/app/openapi/.openapi-generator/FILES
new file mode 100644
index 0000000..2633287
--- /dev/null
+++ b/src/app/openapi/.openapi-generator/FILES
@@ -0,0 +1,16 @@
+.gitignore
+README.md
+api.base.service.ts
+api.module.ts
+api/api.ts
+api/card.service.ts
+api/deck-controller.service.ts
+configuration.ts
+encoder.ts
+git_push.sh
+index.ts
+model/card.ts
+model/deck.ts
+model/models.ts
+param.ts
+variables.ts
diff --git a/src/app/openapi/.openapi-generator/VERSION b/src/app/openapi/.openapi-generator/VERSION
new file mode 100644
index 0000000..5f84a81
--- /dev/null
+++ b/src/app/openapi/.openapi-generator/VERSION
@@ -0,0 +1 @@
+7.12.0
diff --git a/src/app/openapi/README.md b/src/app/openapi/README.md
new file mode 100644
index 0000000..7eca793
--- /dev/null
+++ b/src/app/openapi/README.md
@@ -0,0 +1,236 @@
+# @
+
+No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
+
+The version of the OpenAPI document: 0.0.1
+
+## Building
+
+To install the required dependencies and to build the typescript sources run:
+
+```console
+npm install
+npm run build
+```
+
+## Publishing
+
+First build the package then run `npm publish dist` (don't forget to specify the `dist` folder!)
+
+## Consuming
+
+Navigate to the folder of your consuming project and run one of next commands.
+
+_published:_
+
+```console
+npm install @ --save
+```
+
+_without publishing (not recommended):_
+
+```console
+npm install PATH_TO_GENERATED_PACKAGE/dist.tgz --save
+```
+
+_It's important to take the tgz file, otherwise you'll get trouble with links on windows_
+
+_using `npm link`:_
+
+In PATH_TO_GENERATED_PACKAGE/dist:
+
+```console
+npm link
+```
+
+In your project:
+
+```console
+npm link
+```
+
+__Note for Windows users:__ The Angular CLI has troubles to use linked npm packages.
+Please refer to this issue for a solution / workaround.
+Published packages are not effected by this issue.
+
+### General usage
+
+In your Angular project:
+
+```typescript
+// without configuring providers
+import { ApiModule } from '';
+import { HttpClientModule } from '@angular/common/http';
+
+@NgModule({
+ imports: [
+ ApiModule,
+ // make sure to import the HttpClientModule in the AppModule only,
+ // see https://github.com/angular/angular/issues/20575
+ HttpClientModule
+ ],
+ declarations: [ AppComponent ],
+ providers: [],
+ bootstrap: [ AppComponent ]
+})
+export class AppModule {}
+```
+
+```typescript
+// configuring providers
+import { ApiModule, Configuration, ConfigurationParameters } from '';
+
+export function apiConfigFactory (): Configuration {
+ const params: ConfigurationParameters = {
+ // set configuration parameters here.
+ }
+ return new Configuration(params);
+}
+
+@NgModule({
+ imports: [ ApiModule.forRoot(apiConfigFactory) ],
+ declarations: [ AppComponent ],
+ providers: [],
+ bootstrap: [ AppComponent ]
+})
+export class AppModule {}
+```
+
+```typescript
+// configuring providers with an authentication service that manages your access tokens
+import { ApiModule, Configuration } from '';
+
+@NgModule({
+ imports: [ ApiModule ],
+ declarations: [ AppComponent ],
+ providers: [
+ {
+ provide: Configuration,
+ useFactory: (authService: AuthService) => new Configuration(
+ {
+ basePath: environment.apiUrl,
+ accessToken: authService.getAccessToken.bind(authService)
+ }
+ ),
+ deps: [AuthService],
+ multi: false
+ }
+ ],
+ bootstrap: [ AppComponent ]
+})
+export class AppModule {}
+```
+
+```typescript
+import { DefaultApi } from '';
+
+export class AppComponent {
+ constructor(private apiGateway: DefaultApi) { }
+}
+```
+
+Note: The ApiModule is restricted to being instantiated once app wide.
+This is to ensure that all services are treated as singletons.
+
+### Using multiple OpenAPI files / APIs / ApiModules
+
+In order to use multiple `ApiModules` generated from different OpenAPI files,
+you can create an alias name when importing the modules
+in order to avoid naming conflicts:
+
+```typescript
+import { ApiModule } from 'my-api-path';
+import { ApiModule as OtherApiModule } from 'my-other-api-path';
+import { HttpClientModule } from '@angular/common/http';
+
+@NgModule({
+ imports: [
+ ApiModule,
+ OtherApiModule,
+ // make sure to import the HttpClientModule in the AppModule only,
+ // see https://github.com/angular/angular/issues/20575
+ HttpClientModule
+ ]
+})
+export class AppModule {
+
+}
+```
+
+### Set service base path
+
+If different than the generated base path, during app bootstrap, you can provide the base path to your service.
+
+```typescript
+import { BASE_PATH } from '';
+
+bootstrap(AppComponent, [
+ { provide: BASE_PATH, useValue: 'https://your-web-service.com' },
+]);
+```
+
+or
+
+```typescript
+import { BASE_PATH } from '';
+
+@NgModule({
+ imports: [],
+ declarations: [ AppComponent ],
+ providers: [ provide: BASE_PATH, useValue: 'https://your-web-service.com' ],
+ bootstrap: [ AppComponent ]
+})
+export class AppModule {}
+```
+
+### Using @angular/cli
+
+First extend your `src/environments/*.ts` files by adding the corresponding base path:
+
+```typescript
+export const environment = {
+ production: false,
+ API_BASE_PATH: 'http://127.0.0.1:8080'
+};
+```
+
+In the src/app/app.module.ts:
+
+```typescript
+import { BASE_PATH } from '';
+import { environment } from '../environments/environment';
+
+@NgModule({
+ declarations: [
+ AppComponent
+ ],
+ imports: [ ],
+ providers: [{ provide: BASE_PATH, useValue: environment.API_BASE_PATH }],
+ bootstrap: [ AppComponent ]
+})
+export class AppModule { }
+```
+
+### Customizing path parameter encoding
+
+Without further customization, only [path-parameters][parameter-locations-url] of [style][style-values-url] 'simple'
+and Dates for format 'date-time' are encoded correctly.
+
+Other styles (e.g. "matrix") are not that easy to encode
+and thus are best delegated to other libraries (e.g.: [@honoluluhenk/http-param-expander]).
+
+To implement your own parameter encoding (or call another library),
+pass an arrow-function or method-reference to the `encodeParam` property of the Configuration-object
+(see [General Usage](#general-usage) above).
+
+Example value for use in your Configuration-Provider:
+
+```typescript
+new Configuration({
+ encodeParam: (param: Param) => myFancyParamEncoder(param),
+})
+```
+
+[parameter-locations-url]: https://github.com/OAI/OpenAPI-Specification/blob/main/versions/3.1.0.md#parameter-locations
+[style-values-url]: https://github.com/OAI/OpenAPI-Specification/blob/main/versions/3.1.0.md#style-values
+[@honoluluhenk/http-param-expander]: https://www.npmjs.com/package/@honoluluhenk/http-param-expander
diff --git a/src/app/openapi/api.base.service.ts b/src/app/openapi/api.base.service.ts
new file mode 100644
index 0000000..7f6c429
--- /dev/null
+++ b/src/app/openapi/api.base.service.ts
@@ -0,0 +1,69 @@
+import { HttpHeaders, HttpParams, HttpParameterCodec } from '@angular/common/http';
+import { CustomHttpParameterCodec } from './encoder';
+import { Configuration } from './configuration';
+
+export class BaseService {
+ protected basePath = '';
+ public defaultHeaders = new HttpHeaders();
+ public configuration: Configuration;
+ public encoder: HttpParameterCodec;
+
+ constructor(basePath?: string|string[], configuration?: Configuration) {
+ this.configuration = configuration || new Configuration();
+ if (typeof this.configuration.basePath !== 'string') {
+ const firstBasePath = Array.isArray(basePath) ? basePath[0] : undefined;
+ if (firstBasePath != undefined) {
+ basePath = firstBasePath;
+ }
+
+ if (typeof basePath !== 'string') {
+ basePath = this.basePath;
+ }
+ this.configuration.basePath = basePath;
+ }
+ this.encoder = this.configuration.encoder || new CustomHttpParameterCodec();
+ }
+
+ protected canConsumeForm(consumes: string[]): boolean {
+ return consumes.indexOf('multipart/form-data') !== -1;
+ }
+
+ protected addToHttpParams(httpParams: HttpParams, value: any, key?: string): HttpParams {
+ // If the value is an object (but not a Date), recursively add its keys.
+ if (typeof value === 'object' && !(value instanceof Date)) {
+ return this.addToHttpParamsRecursive(httpParams, value, key);
+ }
+ return this.addToHttpParamsRecursive(httpParams, value, key);
+ }
+
+ protected addToHttpParamsRecursive(httpParams: HttpParams, value?: any, key?: string): HttpParams {
+ if (value === null || value === undefined) {
+ return httpParams;
+ }
+ if (typeof value === 'object') {
+ // If JSON format is preferred, key must be provided.
+ if (key != null) {
+ return httpParams.append(key, JSON.stringify(value));
+ }
+ // Otherwise, if it's an array, add each element.
+ if (Array.isArray(value)) {
+ value.forEach(elem => httpParams = this.addToHttpParamsRecursive(httpParams, elem, key));
+ } else if (value instanceof Date) {
+ if (key != null) {
+ httpParams = httpParams.append(key, value.toISOString());
+ } else {
+ throw Error("key may not be null if value is Date");
+ }
+ } else {
+ Object.keys(value).forEach(k => {
+ const paramKey = key ? `${key}.${k}` : k;
+ httpParams = this.addToHttpParamsRecursive(httpParams, value[k], paramKey);
+ });
+ }
+ return httpParams;
+ } else if (key != null) {
+ return httpParams.append(key, value);
+ }
+ throw Error("key may not be null if value is not object or array");
+ }
+}
diff --git a/src/app/openapi/api.module.ts b/src/app/openapi/api.module.ts
new file mode 100644
index 0000000..58d341f
--- /dev/null
+++ b/src/app/openapi/api.module.ts
@@ -0,0 +1,30 @@
+import { NgModule, ModuleWithProviders, SkipSelf, Optional } from '@angular/core';
+import { Configuration } from './configuration';
+import { HttpClient } from '@angular/common/http';
+
+
+@NgModule({
+ imports: [],
+ declarations: [],
+ exports: [],
+ providers: []
+})
+export class ApiModule {
+ public static forRoot(configurationFactory: () => Configuration): ModuleWithProviders {
+ return {
+ ngModule: ApiModule,
+ providers: [ { provide: Configuration, useFactory: configurationFactory } ]
+ };
+ }
+
+ constructor( @Optional() @SkipSelf() parentModule: ApiModule,
+ @Optional() http: HttpClient) {
+ if (parentModule) {
+ throw new Error('ApiModule is already loaded. Import in your base AppModule only.');
+ }
+ if (!http) {
+ throw new Error('You need to import the HttpClientModule in your AppModule! \n' +
+ 'See also https://github.com/angular/angular/issues/20575');
+ }
+ }
+}
diff --git a/src/app/openapi/api/api.ts b/src/app/openapi/api/api.ts
new file mode 100644
index 0000000..e5aa814
--- /dev/null
+++ b/src/app/openapi/api/api.ts
@@ -0,0 +1,5 @@
+export * from './card.service';
+import { CardService } from './card.service';
+export * from './deck-controller.service';
+import { DeckControllerService } from './deck-controller.service';
+export const APIS = [CardService, DeckControllerService];
diff --git a/src/app/openapi/api/card.service.ts b/src/app/openapi/api/card.service.ts
new file mode 100644
index 0000000..7327fa7
--- /dev/null
+++ b/src/app/openapi/api/card.service.ts
@@ -0,0 +1,193 @@
+/**
+ * dex API
+ *
+ *
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+/* tslint:disable:no-unused-variable member-ordering */
+
+import { Inject, Injectable, Optional } from '@angular/core';
+import { HttpClient, HttpHeaders, HttpParams,
+ HttpResponse, HttpEvent, HttpParameterCodec, HttpContext
+ } from '@angular/common/http';
+import { CustomHttpParameterCodec } from '../encoder';
+import { Observable } from 'rxjs';
+
+// @ts-ignore
+import { Card } from '../model/card';
+
+// @ts-ignore
+import { BASE_PATH, COLLECTION_FORMATS } from '../variables';
+import { Configuration } from '../configuration';
+import { BaseService } from '../api.base.service';
+
+
+
+@Injectable({
+ providedIn: 'root'
+})
+export class CardService extends BaseService {
+
+ constructor(protected httpClient: HttpClient, @Optional() @Inject(BASE_PATH) basePath: string|string[], @Optional() configuration?: Configuration) {
+ super(basePath, configuration);
+ }
+
+ /**
+ * Get a singular Card by its ID
+ * @param id
+ * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
+ * @param reportProgress flag to report request and response progress.
+ */
+ public getCardById(id: number, observe?: 'body', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable;
+ public getCardById(id: number, observe?: 'response', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable>;
+ public getCardById(id: number, observe?: 'events', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable>;
+ public getCardById(id: number, observe: any = 'body', reportProgress: boolean = false, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable {
+ if (id === null || id === undefined) {
+ throw new Error('Required parameter id was null or undefined when calling getCardById.');
+ }
+
+ let localVarHeaders = this.defaultHeaders;
+
+ const localVarHttpHeaderAcceptSelected: string | undefined = options?.httpHeaderAccept ?? this.configuration.selectHeaderAccept([
+ 'application/json'
+ ]);
+ if (localVarHttpHeaderAcceptSelected !== undefined) {
+ localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
+ }
+
+ const localVarHttpContext: HttpContext = options?.context ?? new HttpContext();
+
+ const localVarTransferCache: boolean = options?.transferCache ?? true;
+
+
+ let responseType_: 'text' | 'json' | 'blob' = 'json';
+ if (localVarHttpHeaderAcceptSelected) {
+ if (localVarHttpHeaderAcceptSelected.startsWith('text')) {
+ responseType_ = 'text';
+ } else if (this.configuration.isJsonMime(localVarHttpHeaderAcceptSelected)) {
+ responseType_ = 'json';
+ } else {
+ responseType_ = 'blob';
+ }
+ }
+
+ let localVarPath = `/api/cards/${this.configuration.encodeParam({name: "id", value: id, in: "path", style: "simple", explode: false, dataType: "number", dataFormat: "int64"})}`;
+ return this.httpClient.request('get', `${this.configuration.basePath}${localVarPath}`,
+ {
+ context: localVarHttpContext,
+ responseType: responseType_,
+ withCredentials: this.configuration.withCredentials,
+ headers: localVarHeaders,
+ observe: observe,
+ transferCache: localVarTransferCache,
+ reportProgress: reportProgress
+ }
+ );
+ }
+
+ /**
+ * Get the image of a Card by its ID
+ * @param id
+ * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
+ * @param reportProgress flag to report request and response progress.
+ */
+ public getCardImageById(id: number, observe?: 'body', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/octet-stream', context?: HttpContext, transferCache?: boolean}): Observable;
+ public getCardImageById(id: number, observe?: 'response', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/octet-stream', context?: HttpContext, transferCache?: boolean}): Observable>;
+ public getCardImageById(id: number, observe?: 'events', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/octet-stream', context?: HttpContext, transferCache?: boolean}): Observable>;
+ public getCardImageById(id: number, observe: any = 'body', reportProgress: boolean = false, options?: {httpHeaderAccept?: 'application/octet-stream', context?: HttpContext, transferCache?: boolean}): Observable {
+ if (id === null || id === undefined) {
+ throw new Error('Required parameter id was null or undefined when calling getCardImageById.');
+ }
+
+ let localVarHeaders = this.defaultHeaders;
+
+ const localVarHttpHeaderAcceptSelected: string | undefined = options?.httpHeaderAccept ?? this.configuration.selectHeaderAccept([
+ 'application/octet-stream'
+ ]);
+ if (localVarHttpHeaderAcceptSelected !== undefined) {
+ localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
+ }
+
+ const localVarHttpContext: HttpContext = options?.context ?? new HttpContext();
+
+ const localVarTransferCache: boolean = options?.transferCache ?? true;
+
+
+ let localVarPath = `/api/cards/${this.configuration.encodeParam({name: "id", value: id, in: "path", style: "simple", explode: false, dataType: "number", dataFormat: "int64"})}/image`;
+ return this.httpClient.request('get', `${this.configuration.basePath}${localVarPath}`,
+ {
+ context: localVarHttpContext,
+ responseType: "blob",
+ withCredentials: this.configuration.withCredentials,
+ headers: localVarHeaders,
+ observe: observe,
+ transferCache: localVarTransferCache,
+ reportProgress: reportProgress
+ }
+ );
+ }
+
+ /**
+ * Get a page of Cards with optional name query parameter
+ * @param name
+ * @param page
+ * @param pageSize
+ * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
+ * @param reportProgress flag to report request and response progress.
+ */
+ public getCards(name?: string, page?: number, pageSize?: number, observe?: 'body', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable>;
+ public getCards(name?: string, page?: number, pageSize?: number, observe?: 'response', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable>>;
+ public getCards(name?: string, page?: number, pageSize?: number, observe?: 'events', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable>>;
+ public getCards(name?: string, page?: number, pageSize?: number, observe: any = 'body', reportProgress: boolean = false, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable {
+ let localVarQueryParameters = new HttpParams({encoder: this.encoder});
+ localVarQueryParameters = this.addToHttpParams(localVarQueryParameters,
+ name, 'name');
+ localVarQueryParameters = this.addToHttpParams(localVarQueryParameters,
+ page, 'page');
+ localVarQueryParameters = this.addToHttpParams(localVarQueryParameters,
+ pageSize, 'pageSize');
+
+ let localVarHeaders = this.defaultHeaders;
+
+ const localVarHttpHeaderAcceptSelected: string | undefined = options?.httpHeaderAccept ?? this.configuration.selectHeaderAccept([
+ 'application/json'
+ ]);
+ if (localVarHttpHeaderAcceptSelected !== undefined) {
+ localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
+ }
+
+ const localVarHttpContext: HttpContext = options?.context ?? new HttpContext();
+
+ const localVarTransferCache: boolean = options?.transferCache ?? true;
+
+
+ let responseType_: 'text' | 'json' | 'blob' = 'json';
+ if (localVarHttpHeaderAcceptSelected) {
+ if (localVarHttpHeaderAcceptSelected.startsWith('text')) {
+ responseType_ = 'text';
+ } else if (this.configuration.isJsonMime(localVarHttpHeaderAcceptSelected)) {
+ responseType_ = 'json';
+ } else {
+ responseType_ = 'blob';
+ }
+ }
+
+ let localVarPath = `/api/cards`;
+ return this.httpClient.request>('get', `${this.configuration.basePath}${localVarPath}`,
+ {
+ context: localVarHttpContext,
+ params: localVarQueryParameters,
+ responseType: responseType_,
+ withCredentials: this.configuration.withCredentials,
+ headers: localVarHeaders,
+ observe: observe,
+ transferCache: localVarTransferCache,
+ reportProgress: reportProgress
+ }
+ );
+ }
+
+}
diff --git a/src/app/openapi/api/deck-controller.service.ts b/src/app/openapi/api/deck-controller.service.ts
new file mode 100644
index 0000000..5006aff
--- /dev/null
+++ b/src/app/openapi/api/deck-controller.service.ts
@@ -0,0 +1,216 @@
+/**
+ * dex API
+ *
+ *
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+/* tslint:disable:no-unused-variable member-ordering */
+
+import { Inject, Injectable, Optional } from '@angular/core';
+import { HttpClient, HttpHeaders, HttpParams,
+ HttpResponse, HttpEvent, HttpParameterCodec, HttpContext
+ } from '@angular/common/http';
+import { CustomHttpParameterCodec } from '../encoder';
+import { Observable } from 'rxjs';
+
+// @ts-ignore
+import { Deck } from '../model/deck';
+
+// @ts-ignore
+import { BASE_PATH, COLLECTION_FORMATS } from '../variables';
+import { Configuration } from '../configuration';
+import { BaseService } from '../api.base.service';
+
+
+
+@Injectable({
+ providedIn: 'root'
+})
+export class DeckControllerService extends BaseService {
+
+ constructor(protected httpClient: HttpClient, @Optional() @Inject(BASE_PATH) basePath: string|string[], @Optional() configuration?: Configuration) {
+ super(basePath, configuration);
+ }
+
+ /**
+ * Add Card To Deck
+ * @param cardId
+ * @param deckName
+ * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
+ * @param reportProgress flag to report request and response progress.
+ */
+ public apiDecksDeckNameCardIdPost(cardId: number, deckName: string, observe?: 'body', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable
bar works!
+
+
+
+
+ {{ item.label }}
+
+
+
+
diff --git a/src/app/component/bar/bar.component.ts b/src/app/component/bar/bar.component.ts
index 7f057bb..4cb31ef 100644
--- a/src/app/component/bar/bar.component.ts
+++ b/src/app/component/bar/bar.component.ts
@@ -1,11 +1,81 @@
-import { Component } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
+import {MenuItem} from 'primeng/api';
+import {Menubar} from 'primeng/menubar';
+import {Badge} from 'primeng/badge';
+import {NgClass, NgIf} from '@angular/common';
+import {Ripple} from 'primeng/ripple';
+import {Avatar} from 'primeng/avatar';
+import {InputText} from 'primeng/inputtext';
+import {Router} from '@angular/router';
@Component({
selector: 'app-bar',
- imports: [],
+ imports: [
+ Menubar,
+ Badge,
+ NgClass,
+ NgIf,
+ Ripple,
+ Avatar,
+ InputText
+ ],
templateUrl: './bar.component.html',
styleUrl: './bar.component.css'
})
-export class BarComponent {
+export class BarComponent implements OnInit {
+ items: MenuItem[] | undefined;
+ constructor(private router: Router) {}
+
+ ngOnInit() {
+ this.items = [
+ {
+ label: 'Home (Cards)',
+ icon: 'pi pi-home',
+ command: () => {
+ this.router.navigate(['/cards']);
+ }
+ },
+ {
+ label: 'Features',
+ icon: 'pi pi-star'
+ },
+ {
+ label: 'Projects',
+ icon: 'pi pi-search',
+ items: [
+ {
+ label: 'Components',
+ icon: 'pi pi-bolt'
+ },
+ {
+ label: 'Blocks',
+ icon: 'pi pi-server'
+ },
+ {
+ label: 'UI Kit',
+ icon: 'pi pi-pencil'
+ },
+ {
+ label: 'Templates',
+ icon: 'pi pi-palette',
+ items: [
+ {
+ label: 'Apollo',
+ icon: 'pi pi-palette'
+ },
+ {
+ label: 'Ultima',
+ icon: 'pi pi-palette'
+ }
+ ]
+ }
+ ]
+ },
+ {
+ label: 'Contact',
+ icon: 'pi pi-envelope'
+ }
+ ]
+ }
}
diff --git a/src/app/component/items/items.component.html b/src/app/component/items/items.component.html
index 9154b32..11d52f1 100644
--- a/src/app/component/items/items.component.html
+++ b/src/app/component/items/items.component.html
@@ -1,9 +1,51 @@
-
+
+
+
-
-
- {{ item }}
-
-
+ @if (cards.length > 0) {
+
+
+
+
+ }
+
diff --git a/src/app/component/items/items.component.ts b/src/app/component/items/items.component.ts
index 7473a10..2fa27ff 100644
--- a/src/app/component/items/items.component.ts
+++ b/src/app/component/items/items.component.ts
@@ -1,29 +1,134 @@
-import { Component } from '@angular/core';
-import {Scroller} from 'primeng/scroller';
-import {NgClass, NgForOf} from '@angular/common';
+import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
+import {Scroller, ScrollerLazyLoadEvent} from 'primeng/scroller';
+import {Card as CardModel, CardService} from '../../openapi';
import {Card} from 'primeng/card';
+import {Button} from 'primeng/button';
+import {PrimeTemplate} from 'primeng/api';
+import {VirtualScrollDirective} from '../../directives/virtual-scroll.directive';
+import {debounceTime, Subject} from 'rxjs';
@Component({
selector: 'app-items',
imports: [
Scroller,
- NgClass,
Card,
- NgForOf
+ Button,
+ PrimeTemplate,
+ VirtualScrollDirective,
],
templateUrl: './items.component.html',
styleUrl: './items.component.css'
})
-export class ItemsComponent {
- items: string[] = this.test();
+export class ItemsComponent implements OnInit, AfterViewInit {
+ @ViewChild('container') containerRef!: ElementRef
+ @for (card of options.items; track card.id) {
+
+
+
+ {{ 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! +
+