TD-337: Show withdrawals nav item fix & Monaco editor resize detection fix (#105)

package-lock.json

@@ -43,6 +43,7 @@
         "angular-file": "3.6.0",
         "angular2-prettyjson": "3.0.1",
         "coerce-property": "0.3.2",
+        "element-resize-detector": "1.2.4",
         "humanize-duration": "3.21.0",
         "jsonc-parser": "2.0.2",
         "keycloak-angular": "9.0.0",
@@ -69,6 +70,7 @@
         "@angular/cli": "14.0.5",
         "@angular/compiler-cli": "14.0.4",
         "@types/del": "4.0.0",
+        "@types/element-resize-detector": "1.1.3",
         "@types/humanize-duration": "3.18.0",
         "@types/jasmine": "3.6.2",
         "@types/jwt-decode": "2.2.1",
@@ -4525,6 +4527,12 @@
         "del": "*"
       }
     },
+    "node_modules/@types/element-resize-detector": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@types/element-resize-detector/-/element-resize-detector-1.1.3.tgz",
+      "integrity": "sha512-rqmeHxzNMPar/3IbdQRm+mydv8KlEXUtcp5M47rbZUEjslTjg+bT5+OXCknTCIy1AfvNR0Kio44iMY2zUH65CQ==",
+      "dev": true
+    },
     "node_modules/@types/eslint": {
       "version": "8.4.5",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.4.5.tgz",
@@ -7978,6 +7986,11 @@
       "integrity": "sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw==",
       "dev": true
     },
+    "node_modules/batch-processor": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/batch-processor/-/batch-processor-1.0.0.tgz",
+      "integrity": "sha512-xoLQD8gmmR32MeuBHgH0Tzd5PuSZx71ZsbhVxOCRbgktZEPe4SQy7s9Z50uPp0F/f7iw2XmkHN2xkgbMfckMDA=="
+    },
     "node_modules/big.js": {
       "version": "5.2.2",
       "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
@@ -10242,6 +10255,14 @@
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.180.tgz",
       "integrity": "sha512-7at5ash3FD9U5gPa3/wPr6OdiZd/zBjvDZaaHBpcqFOFUhZiWnb7stkqk8xUFL9H9nk7Yok5vCCNK8wyC/+f8A=="
     },
+    "node_modules/element-resize-detector": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/element-resize-detector/-/element-resize-detector-1.2.4.tgz",
+      "integrity": "sha512-Fl5Ftk6WwXE0wqCgNoseKWndjzZlDCwuPTcoVZfCP9R3EHQF8qUtr3YUPNETegRBOKqQKPW3n4kiIWngGi8tKg==",
+      "dependencies": {
+        "batch-processor": "1.0.0"
+      }
+    },
     "node_modules/elliptic": {
       "version": "6.5.4",
       "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.4.tgz",
@@ -25198,6 +25219,12 @@
         "del": "*"
       }
     },
+    "@types/element-resize-detector": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@types/element-resize-detector/-/element-resize-detector-1.1.3.tgz",
+      "integrity": "sha512-rqmeHxzNMPar/3IbdQRm+mydv8KlEXUtcp5M47rbZUEjslTjg+bT5+OXCknTCIy1AfvNR0Kio44iMY2zUH65CQ==",
+      "dev": true
+    },
     "@types/eslint": {
       "version": "8.4.5",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.4.5.tgz",
@@ -28003,6 +28030,11 @@
       "integrity": "sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw==",
       "dev": true
     },
+    "batch-processor": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/batch-processor/-/batch-processor-1.0.0.tgz",
+      "integrity": "sha512-xoLQD8gmmR32MeuBHgH0Tzd5PuSZx71ZsbhVxOCRbgktZEPe4SQy7s9Z50uPp0F/f7iw2XmkHN2xkgbMfckMDA=="
+    },
     "big.js": {
       "version": "5.2.2",
       "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
@@ -29761,6 +29793,14 @@
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.180.tgz",
       "integrity": "sha512-7at5ash3FD9U5gPa3/wPr6OdiZd/zBjvDZaaHBpcqFOFUhZiWnb7stkqk8xUFL9H9nk7Yok5vCCNK8wyC/+f8A=="
     },
+    "element-resize-detector": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/element-resize-detector/-/element-resize-detector-1.2.4.tgz",
+      "integrity": "sha512-Fl5Ftk6WwXE0wqCgNoseKWndjzZlDCwuPTcoVZfCP9R3EHQF8qUtr3YUPNETegRBOKqQKPW3n4kiIWngGi8tKg==",
+      "requires": {
+        "batch-processor": "1.0.0"
+      }
+    },
     "elliptic": {
       "version": "6.5.4",
       "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.4.tgz",

package.json

@@ -51,6 +51,7 @@
     "angular-file": "3.6.0",
     "angular2-prettyjson": "3.0.1",
     "coerce-property": "0.3.2",
+    "element-resize-detector": "1.2.4",
     "humanize-duration": "3.21.0",
     "jsonc-parser": "2.0.2",
     "keycloak-angular": "9.0.0",
@@ -77,6 +78,7 @@
     "@angular/cli": "14.0.5",
     "@angular/compiler-cli": "14.0.4",
     "@types/del": "4.0.0",
+    "@types/element-resize-detector": "1.1.3",
     "@types/humanize-duration": "3.18.0",
     "@types/jasmine": "3.6.2",
     "@types/jwt-decode": "2.2.1",
@@ -109,4 +111,4 @@
     "ts-node": "8.8.2",
     "typescript": "4.7.4"
   }
-}
+}

src/app/monaco-editor/abstarct-monaco.directive.ts

@@ -2,7 +2,6 @@ import {
     Directive,
     ElementRef,
     EventEmitter,
-    HostListener,
     Input,
     OnChanges,
     OnDestroy,
@@ -48,10 +47,6 @@ export abstract class AbstractMonacoDirective implements OnInit, OnChanges, OnDe
         protected editorRef: ElementRef
     ) {}
 
-    @HostListener('window:resize') onResize() {
-        this.monacoEditorService.resize();
-    }
-
     ngOnChanges(changes: SimpleChanges) {
         this.childOnChanges(changes);
         if (!isNil(changes.options?.currentValue)) {

src/app/monaco-editor/abstract-monaco.service.ts

@@ -1,14 +1,7 @@
 import { ElementRef, NgZone } from '@angular/core';
+import * as elementResizeDetectorMaker from 'element-resize-detector';
 import { Observable, Subject } from 'rxjs';
-import {
+import { map, take, takeUntil, tap } from 'rxjs/operators';
-    debounceTime,
-    distinctUntilChanged,
-    map,
-    skipUntil,
-    take,
-    takeUntil,
-    tap,
-} from 'rxjs/operators';
 
 import { BOOTSTRAP$ } from './bootstrap';
 import { fromDisposable } from './from-disposable';
@@ -27,9 +20,9 @@ export abstract class AbstractMonacoService {
     protected _editor: monaco.editor.IEditor;
     private editorInitialized$ = new Subject<void>();
     private fileChange$ = new Subject<MonacoFile>();
-    private resize$ = new Subject<void>();
+    private nativeElement: HTMLElement;
-    private nativeElement: any;
     private destroy$ = new Subject<void>();
+    private resizeDetector = elementResizeDetectorMaker({ strategy: 'scroll' });
 
     get fileChange(): Observable<MonacoFile> {
         return this.fileChange$.pipe(takeUntil(this.destroy$));
@@ -69,10 +62,6 @@ export abstract class AbstractMonacoService {
         this.destroy$.next();
     }
 
-    resize() {
-        this.resize$.next();
-    }
-
     updateOptions(options: IEditorOptions) {
         if (this._editor) {
             this._editor.updateOptions(options);
@@ -119,6 +108,11 @@ export abstract class AbstractMonacoService {
         return model;
     }
 
+    protected getLayout() {
+        const { clientWidth, clientHeight } = this.nativeElement;
+        return { width: clientWidth, height: clientHeight };
+    }
+
     private disposeModels() {
         for (const model of monaco.editor.getModels()) {
             model.dispose();
@@ -157,17 +151,15 @@ export abstract class AbstractMonacoService {
     }
 
     private registerResizeListener() {
-        this.resize$
+        this.editorInitialized$.pipe(takeUntil(this.destroy$)).subscribe({
-            .pipe(
+            next: () => {
-                skipUntil(this.editorInitialized$),
+                this.resizeDetector.listenTo(this.nativeElement, () => {
-                map(() => {
+                    this._editor.layout(this.getLayout());
-                    const { clientWidth, clientHeight } = this.nativeElement;
+                });
-                    return { width: clientWidth, height: clientHeight };
+            },
-                }),
+            complete: () => {
-                distinctUntilChanged((a, b) => a.width === b.width && a.height === b.height),
+                this.resizeDetector.removeAllListeners(this.nativeElement);
-                debounceTime(50),
+            },
-                takeUntil(this.destroy$)
+        });
-            )
-            .subscribe((dimension) => this._editor.layout(dimension));
     }
 }

src/app/monaco-editor/monaco-editor.directive.ts

@@ -1,5 +1,6 @@
-import { Directive, ElementRef, Input, SimpleChanges } from '@angular/core';
+import { Directive, ElementRef, Input } from '@angular/core';
 
+import { ComponentChanges } from '../shared';
 import { AbstractMonacoDirective } from './abstarct-monaco.directive';
 import { MonacoFile } from './model';
 import { MonacoEditorService } from './monaco-editor.service';
@@ -14,7 +15,7 @@ export class MonacoEditorDirective extends AbstractMonacoDirective {
         super(editorService, editorRef);
     }
 
-    childOnChanges({ file }: SimpleChanges) {
+    childOnChanges({ file }: ComponentChanges<MonacoEditorDirective>) {
         if (file) {
             this.editorService.open(file.currentValue);
         }

src/app/sections/withdrawals/components/create-adjustment-dialog/create-adjustment-dialog.component.ts

@@ -75,8 +75,10 @@ export class CreateAdjustmentDialogComponent extends BaseDialogSuperclass<
         )
             .pipe(untilDestroyed(this))
             .subscribe({
-                next: () => {
+                next: (res) => {
-                    this.dialogRef.close({ status: BaseDialogResponseStatus.Success });
+                    if (!res.includes(null)) {
+                        this.dialogRef.close({ status: BaseDialogResponseStatus.Success });
+                    }
                 },
                 error: (err) => {
                     this.errorService.error(err);

src/app/shared/services/app-auth-guard/is-roles-allowed.ts

@@ -5,11 +5,6 @@ export const isRolesAllowed = (
     searchRoles: string[],
     isEnvProd = environment.production
 ): boolean => {
-    if (!isEnvProd) {
+    if (!isEnvProd) return true;
-        return true;
+    return (searchRoles || []).every((r) => (availableRoles || []).includes(r));
-    }
-    if (!Array.isArray(availableRoles) || !Array.isArray(searchRoles)) {
-        return false;
-    }
-    return searchRoles.every((r) => availableRoles.includes(r));
 };