From 3393dc2254c9c728389bfc864cb5283d04374ff9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Mon, 20 Jun 2022 20:34:52 +0300 Subject: [PATCH] WIP --- README.md | 48 +++++++++++++++++++- src/lib/common-ui.module.ts | 3 +- src/lib/misc/toast/toast.component.ts | 2 +- src/lib/services/composite-route.guard.ts | 5 +- src/lib/upload-file/upload-file.component.ts | 4 +- src/lib/utils/custom-route-reuse.strategy.ts | 2 +- src/lib/utils/functions.ts | 6 +-- src/lib/utils/http-encoder.ts | 5 +- 8 files changed, 62 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index c17ed23..20728eb 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,49 @@ # common-ui -This library was generated with [Nx](https://nx.dev). +### Setup: + +* `yarn add keycloak-angular ngx-toastr @biesbjerg/ngx-translate-extract-marker @ngx-translate/core @ngx-translate/http-loader dayjs lodash-es ngx-translate-messageformat-compiler` +* `yarn add @types/lodash-es -D` +* `ng add @angular/material` + +In `app.module.ts` add: + +``` +export function httpLoaderFactory(httpClient: HttpClient, configService: ConfigService): PruningTranslationLoader { + return new PruningTranslationLoader(httpClient, '/assets/i18n/', `.json?version=${configService.values.FRONTEND_APP_VERSION}`); +} +``` + +``` + @NgModule({ + ... + imports: [ + ... + CommonUiModule, + TranslateModule.forRoot({ + loader: { + provide: TranslateLoader, + useFactory: httpLoaderFactory, + deps: [HttpClient, ConfigService], + }, + compiler: { + provide: TranslateCompiler, + useClass: TranslateMessageFormatCompiler, + }, + }) + ] +}) +``` + +Update `tsconfig.json`: + +``` +"compilerOptions": { + ... + "paths": { + ... + "@iqser/common-ui": ["projects/common-ui/src/index.ts"] + }, + "allowSyntheticDefaultImports": true + }, +``` diff --git a/src/lib/common-ui.module.ts b/src/lib/common-ui.module.ts index 302e2c7..a7cea88 100644 --- a/src/lib/common-ui.module.ts +++ b/src/lib/common-ui.module.ts @@ -70,4 +70,5 @@ const pipes = [SortByPipe, HumanizePipe, CapitalizePipe, LogPipe]; imports: [CommonModule, ...matModules, ...modules, FormsModule, ReactiveFormsModule, KeycloakAngularModule], exports: [...components, ...pipes, ...modules, LogPipe], }) -export class CommonUiModule {} +export class CommonUiModule { +} diff --git a/src/lib/misc/toast/toast.component.ts b/src/lib/misc/toast/toast.component.ts index 6700a56..7e28ad8 100644 --- a/src/lib/misc/toast/toast.component.ts +++ b/src/lib/misc/toast/toast.component.ts @@ -8,7 +8,7 @@ import { ToasterActions, ToasterOptions } from '../../services'; changeDetection: ChangeDetectionStrategy.OnPush, }) export class ToastComponent extends Toast { - constructor(protected readonly _toastrService: ToastrService, readonly toastPackage: ToastPackage) { + constructor(protected readonly _toastrService: ToastrService, override readonly toastPackage: ToastPackage) { super(_toastrService, toastPackage); } diff --git a/src/lib/services/composite-route.guard.ts b/src/lib/services/composite-route.guard.ts index a0870ab..ab9f2ae 100644 --- a/src/lib/services/composite-route.guard.ts +++ b/src/lib/services/composite-route.guard.ts @@ -7,12 +7,13 @@ import { LoadingService } from '../loading'; providedIn: 'root', }) export class CompositeRouteGuard implements CanActivate { - constructor(protected readonly _injector: Injector, private readonly _loadingService: LoadingService) {} + constructor(protected readonly _injector: Injector, private readonly _loadingService: LoadingService) { + } async canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise { this._loadingService.start(); - const routeGuards = []>route.data.routeGuards; + const routeGuards = []>route.data['routeGuards']; if (routeGuards) { for (let i = 0; i < routeGuards.length; i++) { diff --git a/src/lib/upload-file/upload-file.component.ts b/src/lib/upload-file/upload-file.component.ts index ae92fc8..2373f03 100644 --- a/src/lib/upload-file/upload-file.component.ts +++ b/src/lib/upload-file/upload-file.component.ts @@ -7,7 +7,7 @@ import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, Ou changeDetection: ChangeDetectionStrategy.OnPush, }) export class UploadFileComponent { - @ViewChild('attachFileInput', { static: true }) attachFileInput: ElementRef; + @ViewChild('attachFileInput', {static: true}) attachFileInput!: ElementRef; @Input() file!: File | null; @Input() readonly = false; @@ -18,7 +18,7 @@ export class UploadFileComponent { this.attachFileInput.nativeElement.click(); } - attachFile(event) { + attachFile(event: any) { const files = event?.target?.files; this.file = files[0]; diff --git a/src/lib/utils/custom-route-reuse.strategy.ts b/src/lib/utils/custom-route-reuse.strategy.ts index 7bdb772..24cabff 100644 --- a/src/lib/utils/custom-route-reuse.strategy.ts +++ b/src/lib/utils/custom-route-reuse.strategy.ts @@ -27,7 +27,7 @@ export class CustomRouteReuseStrategy implements RouteReuseStrategy { if (!route?.routeConfig?.data) { return false; } - return !!route.routeConfig.data.reuse && !!this._getKey(route); + return !!route.routeConfig.data['reuse'] && !!this._getKey(route); } store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void { diff --git a/src/lib/utils/functions.ts b/src/lib/utils/functions.ts index 48ab2a5..bddaf61 100644 --- a/src/lib/utils/functions.ts +++ b/src/lib/utils/functions.ts @@ -81,7 +81,7 @@ export function getLeftDateTime(ISOString: string) { const minutesFromNow = date.diff(now, 'minutes'); const minutesLeft = minutesFromNow - HOURS_IN_A_DAY * MINUTES_IN_AN_HOUR * daysLeft; - return { daysLeft, hoursLeft, minutesLeft }; + return {daysLeft, hoursLeft, minutesLeft}; } export function deepDiffObj(base: Record, object: Record) { @@ -93,7 +93,7 @@ export function deepDiffObj(base: Record, object: Record, value, key) => { + const res = transform(object, (result: Record, value: any, key: string) => { if (!has(base, key)) { result[key] = value; } // fix edge case: not defined to explicitly defined as undefined @@ -105,7 +105,7 @@ export function deepDiffObj(base: Record, object: Record { + forOwn(base, (value: any, key: string) => { if (!has(object, key)) { res[key] = undefined; } diff --git a/src/lib/utils/http-encoder.ts b/src/lib/utils/http-encoder.ts index 892cfe3..b94c335 100644 --- a/src/lib/utils/http-encoder.ts +++ b/src/lib/utils/http-encoder.ts @@ -6,13 +6,14 @@ import { HttpUrlEncodingCodec } from '@angular/common/http'; * See: https://github.com/angular/angular/issues/11058#issuecomment-247367318 */ export class CustomHttpUrlEncodingCodec extends HttpUrlEncodingCodec { - encodeKey(k: string): string { + override encodeKey(k: string): string { const kk = super.encodeKey(k); return kk.replace(/\+/gi, '%2B'); } - encodeValue(v: string): string { + override encodeValue(v: string): string { const vv = super.encodeValue(v); return vv.replace(/\+/gi, '%2B'); } } +