From dcf9439eb7a473a3b35db2ca0d54c803d71f186b Mon Sep 17 00:00:00 2001 From: Noel De Martin Date: Tue, 19 Mar 2024 10:57:46 +0100 Subject: [PATCH] MOBILE-4268 core: Refactor error accordion into service --- .../error-accordion/core-error-accordion.html | 6 -- src/core/features/login/pages/site/site.ts | 4 +- .../error-accordion.ts | 62 ++++++------------- src/core/services/utils/dom.ts | 4 +- .../components}/error-accordion.scss | 0 src/theme/theme.scss | 6 +- 6 files changed, 26 insertions(+), 56 deletions(-) delete mode 100644 src/core/components/error-accordion/core-error-accordion.html rename src/core/{components/error-accordion => services}/error-accordion.ts (72%) rename src/{core/components/error-accordion => theme/components}/error-accordion.scss (100%) diff --git a/src/core/components/error-accordion/core-error-accordion.html b/src/core/components/error-accordion/core-error-accordion.html deleted file mode 100644 index 47704faba..000000000 --- a/src/core/components/error-accordion/core-error-accordion.html +++ /dev/null @@ -1,6 +0,0 @@ - diff --git a/src/core/features/login/pages/site/site.ts b/src/core/features/login/pages/site/site.ts index 8262ff90c..9cabf031a 100644 --- a/src/core/features/login/pages/site/site.ts +++ b/src/core/features/login/pages/site/site.ts @@ -40,7 +40,7 @@ import { CoreForms } from '@singletons/form'; import { AlertButton } from '@ionic/core'; import { CoreSiteError, CoreSiteErrorDebug } from '@classes/errors/siteerror'; import { CoreUserSupport } from '@features/user/services/support'; -import { CoreErrorAccordionComponent } from '@components/error-accordion/error-accordion'; +import { CoreErrorAccordion } from '@services/error-accordion'; import { CoreUserSupportConfig } from '@features/user/classes/support/support-config'; import { CoreUserGuestSupportConfig } from '@features/user/classes/support/guest-support-config'; import { CoreLoginError } from '@classes/errors/loginerror'; @@ -460,7 +460,7 @@ export class CoreLoginSitePage implements OnInit { const containerElement = alertElement.querySelector('.core-error-accordion-container'); if (containerElement) { - await CoreErrorAccordionComponent.render(containerElement, debug.code, debug.details); + await CoreErrorAccordion.render(containerElement, debug.code, debug.details); } } } diff --git a/src/core/components/error-accordion/error-accordion.ts b/src/core/services/error-accordion.ts similarity index 72% rename from src/core/components/error-accordion/error-accordion.ts rename to src/core/services/error-accordion.ts index 8efbf1553..33c137780 100644 --- a/src/core/components/error-accordion/error-accordion.ts +++ b/src/core/services/error-accordion.ts @@ -12,27 +12,27 @@ // See the License for the specific language governing permissions and // limitations under the License. -import { Component, ElementRef, Input, OnChanges, OnInit } from '@angular/core'; -import { Translate } from '@singletons'; +import { Injectable } from '@angular/core'; +import { Translate, makeSingleton } from '@singletons'; import { CoreUtils } from '@services/utils/utils'; import { CoreDom } from '@singletons/dom'; import { CoreForms } from '@singletons/form'; import { CoreLogger } from '@singletons/logger'; -const logger = CoreLogger.getInstance('CoreErrorAccordionComponent'); - /** - * Component to show error details. + * Service used to render an Error Accordion component. * - * Given that this component has to be injected dynamically in some situations (for example, error alerts), - * it can be rendered using the static render() method to get the raw HTML. + * This is declared as a service instead of an Angular Component because the HTML + * has to be injected dynamically in alerts (only HTML and Ionic components work). */ -@Component({ - selector: 'core-error-accordion', - templateUrl: 'core-error-accordion.html', - styleUrls: ['error-accordion.scss'], -}) -export class CoreErrorAccordionComponent implements OnInit, OnChanges { +@Injectable({ providedIn: 'root' }) +export class CoreErrorAccordionService { + + private logger: CoreLogger; + + constructor() { + this.logger = CoreLogger.getInstance('CoreErrorAccordion'); + } /** * Render an instance of the component into an HTML string. @@ -41,7 +41,7 @@ export class CoreErrorAccordionComponent implements OnInit, OnChanges { * @param errorCode Error code. * @param errorDetails Error details. */ - static async render(element: Element, errorCode: string, errorDetails: string): Promise { + async render(element: Element, errorCode: string, errorDetails: string): Promise { const html = this.html(errorCode, errorDetails); element.innerHTML = html; @@ -56,7 +56,7 @@ export class CoreErrorAccordionComponent implements OnInit, OnChanges { * @param errorDetails Error details. * @returns HTML. */ - static html(errorCode: string, errorDetails: string): string { + private html(errorCode: string, errorDetails: string): string { const contentId = CoreForms.uniqueId('error-accordion-content'); const errorCodeLabel = Translate.instant('core.errorcode', { errorCode }); const hideDetailsLabel = Translate.instant('core.errordetailshide'); @@ -88,14 +88,14 @@ export class CoreErrorAccordionComponent implements OnInit, OnChanges { * * @param element Root element. */ - static async hydrate(element: Element): Promise { + private async hydrate(element: Element): Promise { const wrapper = element.querySelector('.core-error-accordion'); const description = element.querySelector('.core-error-accordion--details'); const button = element.querySelector('.core-error-accordion--toggle'); const hideText = element.querySelector('.core-error-accordion--hide-details'); if (!wrapper || !description || !button || !hideText) { - logger.error('Couldn\'t render error-accordion, one of the child elements is missing'); + this.logger.error('Couldn\'t render error-accordion, one of the child elements is missing'); return; } @@ -118,30 +118,6 @@ export class CoreErrorAccordionComponent implements OnInit, OnChanges { hideText.style.display = 'revert'; } - @Input() errorCode!: string; - @Input() errorDetails!: string; - - constructor(private element: ElementRef) {} - - /** - * @inheritdoc - */ - ngOnInit(): void { - this.render(); - } - - /** - * @inheritdoc - */ - ngOnChanges(): void { - this.render(); - } - - /** - * Render component html in the element created by Angular. - */ - private async render(): Promise { - await CoreErrorAccordionComponent.render(this.element.nativeElement, this.errorCode, this.errorDetails); - } - } + +export const CoreErrorAccordion = makeSingleton(CoreErrorAccordionService); diff --git a/src/core/services/utils/dom.ts b/src/core/services/utils/dom.ts index ad792223c..480f7dd23 100644 --- a/src/core/services/utils/dom.ts +++ b/src/core/services/utils/dom.ts @@ -52,7 +52,7 @@ import { Subscription } from 'rxjs'; import { CoreNetwork } from '@services/network'; import { CoreSiteError } from '@classes/errors/siteerror'; import { CoreUserSupport } from '@features/user/services/support'; -import { CoreErrorAccordionComponent } from '@components/error-accordion/error-accordion'; +import { CoreErrorAccordion } from '@services/error-accordion'; import { CorePlatform } from '@services/platform'; import { CoreCancellablePromise } from '@classes/cancellable-promise'; import { CoreLang } from '@services/lang'; @@ -1065,7 +1065,7 @@ export class CoreDomUtilsProvider { const containerElement = alertElement.querySelector('.core-error-accordion-container'); if (containerElement) { - await CoreErrorAccordionComponent.render(containerElement, error.debug.code, error.debug.details); + await CoreErrorAccordion.render(containerElement, error.debug.code, error.debug.details); } } diff --git a/src/core/components/error-accordion/error-accordion.scss b/src/theme/components/error-accordion.scss similarity index 100% rename from src/core/components/error-accordion/error-accordion.scss rename to src/theme/components/error-accordion.scss diff --git a/src/theme/theme.scss b/src/theme/theme.scss index 68bed20f2..322b5840a 100644 --- a/src/theme/theme.scss +++ b/src/theme/theme.scss @@ -22,12 +22,12 @@ /* Components */ @import "components/collapsible-header.scss"; @import "components/collapsible-item.scss"; +@import "components/error-accordion.scss"; @import "components/format-text.scss"; -@import "components/rubrics.scss"; -@import "components/mod-label.scss"; @import "components/ion-icon.scss"; +@import "components/mod-label.scss"; +@import "components/rubrics.scss"; @import "components/videojs.scss"; -@import "../core/components/error-accordion/error-accordion.scss"; /* Some styles from 3rd party libraries. */ @import "bootstrap.scss";