WIP

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
+  },
+```

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 {
+}

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);
     }
 

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<boolean> {
         this._loadingService.start();
 
-        const routeGuards = <InjectionToken<CanActivate>[]>route.data.routeGuards;
+        const routeGuards = <InjectionToken<CanActivate>[]>route.data['routeGuards'];
 
         if (routeGuards) {
             for (let i = 0; i < routeGuards.length; i++) {

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];
 

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 {

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<string, unknown>, object: Record<string, unknown>) {
@@ -93,7 +93,7 @@ export function deepDiffObj(base: Record<string, unknown>, object: Record<string
         return object;
     }
 
-    const res = transform(object, (result: Record<string, unknown>, value, key) => {
+    const res = transform(object, (result: Record<string, unknown>, 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<string, unknown>, object: Record<string
         }
     });
     // map removed fields to undefined
-    forOwn(base, (value, key) => {
+    forOwn(base, (value: any, key: string) => {
         if (!has(object, key)) {
             res[key] = undefined;
         }

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');
     }
 }
+