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

This commit is contained in:
Rinat Arsaev 2022-07-11 18:52:12 +03:00 committed by GitHub
parent 617bcd9fee
commit e957ad1935
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 71 additions and 44 deletions

40
package-lock.json generated
View File

@ -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",

View File

@ -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"
}
}
}

View File

@ -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)) {

View File

@ -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<void>();
private fileChange$ = new Subject<MonacoFile>();
private resize$ = new Subject<void>();
private nativeElement: any;
private nativeElement: HTMLElement;
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$
.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);
},
});
}
}

View File

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

View File

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

View File

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