From e957ad19356ee935820fcdedf2138c38c1d44f61 Mon Sep 17 00:00:00 2001 From: Rinat Arsaev <11846445+KrickRay@users.noreply.github.com> Date: Mon, 11 Jul 2022 18:52:12 +0300 Subject: [PATCH] TD-337: Show withdrawals nav item fix & Monaco editor resize detection fix (#105) --- package-lock.json | 40 ++++++++++++++++ package.json | 4 +- .../abstarct-monaco.directive.ts | 5 -- .../monaco-editor/abstract-monaco.service.ts | 46 ++++++++----------- .../monaco-editor/monaco-editor.directive.ts | 5 +- .../create-adjustment-dialog.component.ts | 6 ++- .../app-auth-guard/is-roles-allowed.ts | 9 +--- 7 files changed, 71 insertions(+), 44 deletions(-) diff --git a/package-lock.json b/package-lock.json index bd38316c..fb5af8c2 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 9f0aae1c..1e8d54ff 100644 --- a/package.json +++ b/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" } -} \ No newline at end of file +} diff --git a/src/app/monaco-editor/abstarct-monaco.directive.ts b/src/app/monaco-editor/abstarct-monaco.directive.ts index c998876f..6b50aeb8 100644 --- a/src/app/monaco-editor/abstarct-monaco.directive.ts +++ b/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)) { diff --git a/src/app/monaco-editor/abstract-monaco.service.ts b/src/app/monaco-editor/abstract-monaco.service.ts index 63eef437..a4c30c51 100644 --- a/src/app/monaco-editor/abstract-monaco.service.ts +++ b/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 { - debounceTime, - distinctUntilChanged, - map, - skipUntil, - take, - takeUntil, - tap, -} from 'rxjs/operators'; +import { map, 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(); private fileChange$ = new Subject(); - private resize$ = new Subject(); - private nativeElement: any; + private nativeElement: HTMLElement; private destroy$ = new Subject(); + private resizeDetector = elementResizeDetectorMaker({ strategy: 'scroll' }); get fileChange(): Observable { 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$ - .pipe( - skipUntil(this.editorInitialized$), - map(() => { - const { clientWidth, clientHeight } = this.nativeElement; - return { width: clientWidth, height: clientHeight }; - }), - distinctUntilChanged((a, b) => a.width === b.width && a.height === b.height), - debounceTime(50), - takeUntil(this.destroy$) - ) - .subscribe((dimension) => this._editor.layout(dimension)); + this.editorInitialized$.pipe(takeUntil(this.destroy$)).subscribe({ + next: () => { + this.resizeDetector.listenTo(this.nativeElement, () => { + this._editor.layout(this.getLayout()); + }); + }, + complete: () => { + this.resizeDetector.removeAllListeners(this.nativeElement); + }, + }); } } diff --git a/src/app/monaco-editor/monaco-editor.directive.ts b/src/app/monaco-editor/monaco-editor.directive.ts index 58f75088..5549df81 100644 --- a/src/app/monaco-editor/monaco-editor.directive.ts +++ b/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) { if (file) { this.editorService.open(file.currentValue); } diff --git a/src/app/sections/withdrawals/components/create-adjustment-dialog/create-adjustment-dialog.component.ts b/src/app/sections/withdrawals/components/create-adjustment-dialog/create-adjustment-dialog.component.ts index 86372703..ebff197c 100644 --- a/src/app/sections/withdrawals/components/create-adjustment-dialog/create-adjustment-dialog.component.ts +++ b/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: () => { - this.dialogRef.close({ status: BaseDialogResponseStatus.Success }); + next: (res) => { + if (!res.includes(null)) { + this.dialogRef.close({ status: BaseDialogResponseStatus.Success }); + } }, error: (err) => { this.errorService.error(err); diff --git a/src/app/shared/services/app-auth-guard/is-roles-allowed.ts b/src/app/shared/services/app-auth-guard/is-roles-allowed.ts index b2b92bab..577b54f1 100644 --- a/src/app/shared/services/app-auth-guard/is-roles-allowed.ts +++ b/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) { - return true; - } - if (!Array.isArray(availableRoles) || !Array.isArray(searchRoles)) { - return false; - } - return searchRoles.every((r) => availableRoles.includes(r)); + if (!isEnvProd) return true; + return (searchRoles || []).every((r) => (availableRoles || []).includes(r)); };