fix: handle api error responses (aea5ae6f) · Commits · Reactive Application Platform / Packages

packages/angular/changelog/src/lib/changelog.service.ts

+0 −1

Original line number	Diff line number	Diff line
		@@ -46,7 +46,6 @@ export class ChangelogService {
		}

		public showChangelogDialogIfNewVersion() {
		console.log('showChangelogDialogIfNewVersion');

		const lastVersion = localStorage.getItem(RXAP_CHANGELOG_LAST_VERSION);

packages/angular/changelog/src/lib/changelog/changelog.component.html

+38 −30

Original line number	Diff line number	Diff line
		<ng-container *ngIf="error(); else noError">
		<h2 class="text-2xl pb-2" i18n>Something has gone wrong!</h2>
		<p i18n>Unable to load the application changelog</p>
		</ng-container>
		<ng-template #noError>
		<div class="flex flex-col gap-3">
		<div *ngIf="availableVersions().length" class="controls flex justify-center space-x-2 my-4">
		<ng-container *ngIf="availableVersions().length">
		<div class="controls flex justify-center space-x-2 my-4">
		<button
		(click)="activeIndex.set(selectedIndex() - 1)"
		[disabled]="selectedIndex() <= 0"
		(click)="activeIndex.set(activeIndex() - 1)"
		[disabled]="activeIndex() <= 0"
		[ngClass]="{
		'bg-gray-100 dark:bg-gray-900': selectedIndex() <= 0,
		'hover:bg-gray-300': selectedIndex() > 0,
		'bg-gray-100 dark:bg-gray-900': activeIndex() <= 0,
		'hover:bg-gray-300': activeIndex() > 0,
		}"
		class="px-4 py-2 bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-900 transition-colors duration-150 rounded">Previous
		</button>
		<button (click)="activeIndex.set(item.index)"
		*ngFor="let item of displayedButtons()"
		[ngClass]="{
		'bg-primary-500': item.index === selectedIndex(),
		'bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-900 hover:bg-gray-300 transition-colors duration-150': item.index !== selectedIndex()
		'bg-primary-500': item.index === activeIndex(),
		'bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-900 hover:bg-gray-300 transition-colors duration-150': item.index !== activeIndex()
		}"
		class="px-4 py-2 rounded">
		{{ item.version }}
		</button>
		<button
		(click)="activeIndex.set(selectedIndex() + 1)"
		[disabled]="selectedIndex() >= availableVersions().length - 1"
		(click)="activeIndex.set(activeIndex() + 1)"
		[disabled]="activeIndex() >= availableVersions().length - 1"
		[ngClass]="{
		'bg-gray-100 dark:bg-gray-900': selectedIndex() >= availableVersions().length - 1,
		'hover:bg-gray-300': selectedIndex() < availableVersions().length - 1,
		'bg-gray-100 dark:bg-gray-900': activeIndex() >= availableVersions().length - 1,
		'hover:bg-gray-300': activeIndex() < availableVersions().length - 1,
		}"
		class="px-4 py-2 bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-900 hover:bg-gray-300 transition-colors duration-150 rounded">Next
		</button>
		</div>
		<hr>
		</ng-container>
		<div class="flex flex-col gap-6 p-8 overflow-auto" style="max-height: 60vh">
		<ng-container *rxapMethod="let changelog call getChangelogMethod; parameters: getChangelogMethodParameters()">
		<markdown *ngFor="let general of changelog.general" [data]="general" class="prose dark:prose-invert">
		@@ -38,3 +45,4 @@
		</ng-container>
		</div>
		</div>
		</ng-template>

packages/angular/changelog/src/lib/changelog/changelog.component.ts

+20 −11

Original line number	Diff line number	Diff line
		@@ -7,14 +7,12 @@ import {
		Component,
		computed,
		inject,
		OnInit,
		signal,
		Signal,
		} from '@angular/core';
		import { toSignal } from '@angular/core/rxjs-interop';
		import { MethodTemplateDirective } from '@rxap/directives';
		import { RXAP_ENVIRONMENT } from '@rxap/environment';
		import { MarkdownModule } from 'ngx-markdown';
		import { from } from 'rxjs';
		import { ChangelogControllerGetVersionRemoteMethod } from '../remote-methods/changelog-controller-get-version.remote-method';
		import { ChangelogControllerListRemoteMethod } from '../remote-methods/changelog-controller-list.remote-method';

		@@ -31,11 +29,10 @@ import { ChangelogControllerListRemoteMethod } from '../remote-methods/changelog
		templateUrl: './changelog.component.html',
		styleUrls: [ './changelog.component.scss' ],
		})
		export class ChangelogComponent {
		export class ChangelogComponent implements OnInit {

		// eslint-disable-next-line no-async-promise-executor
		public readonly availableVersions: Signal<string[]> = toSignal(from(new Promise<string[]>(async resolve => resolve(
		await inject(ChangelogControllerListRemoteMethod).call()))), { initialValue: [] });
		public readonly availableVersions = signal<string[]>([]);
		public readonly error = signal<string \| null>(null);
		public readonly activeIndex = signal(-1);
		public readonly selectedVersion = computed(() => {
		const activeIndex = this.activeIndex();
		@@ -45,10 +42,6 @@ export class ChangelogComponent {
		}
		return availableVersions[availableVersions.length - 1] ?? 'latest';
		});
		public readonly selectedIndex = computed(() => {
		const activeIndex = this.activeIndex();
		return activeIndex === -1 ? this.availableVersions().length - 1 : activeIndex;
		});

		public readonly displayedButtons = computed(() => {
		let activeIndex = this.activeIndex();
		@@ -86,4 +79,20 @@ export class ChangelogComponent {
		},
		}));

		private readonly getAvailableVersionsMethod = inject(ChangelogControllerListRemoteMethod);

		ngOnInit() {
		this.loadAvailableVersions();
		}

		private async loadAvailableVersions() {
		try {
		const availableVersions = await this.getAvailableVersionsMethod.call();
		this.availableVersions.set(availableVersions);
		this.activeIndex.set(availableVersions.length - 1);
		} catch (e: any) {
		this.error.set(e.message);
		}
		}

		}