Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

Fixed some virtual scroll issues

Browse Source
This commit is contained in:
Adina Țeudan 2021-04-08 19:57:38 +03:00
parent 4e90440d4d
commit 272c059e65
4 changed files with 20 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html
View File

@ -231,7 +231,7 @@
{{ 'file-attributes-csv-import.save' | translate }} {{ 'file-attributes-csv-import.save' | translate }}
</button> </button>
<div class="all-caps-label cancel">{{ 'file-attributes-csv-import.cancel' | translate }}</div> <div class="all-caps-label cancel" (click)="dialogRef.close()">{{ 'file-attributes-csv-import.cancel' | translate }}</div>
</div> </div>
<redaction-circle-button icon="red:close" mat-dialog-close class="dialog-close"></redaction-circle-button> <redaction-circle-button icon="red:close" mat-dialog-close class="dialog-close"></redaction-circle-button>

16
apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts
View File

@ -1,9 +1,10 @@
import { Component, Inject, OnInit } from '@angular/core'; import { Component, Inject, OnInit, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { AppStateService } from '../../../../state/app-state.service'; import { AppStateService } from '../../../../state/app-state.service';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import * as Papa from 'papaparse'; import * as Papa from 'papaparse';
import { FileAttributeConfig, FileAttributesConfig, FileAttributesControllerService } from '@redaction/red-ui-http'; import { FileAttributeConfig, FileAttributesConfig, FileAttributesControllerService } from '@redaction/red-ui-http';
import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
enum FieldType { enum FieldType {
Text = 'Text', Text = 'Text',
@ -35,6 +36,8 @@ export class FileAttributesCsvImportDialogComponent implements OnInit {
public selectedFields: string[] = []; public selectedFields: string[] = [];
public baseConfigForm: FormGroup; public baseConfigForm: FormGroup;
@ViewChild(CdkVirtualScrollViewport, { static: false }) cdkVirtualScrollViewport: CdkVirtualScrollViewport;
constructor( constructor(
private readonly _appStateService: AppStateService, private readonly _appStateService: AppStateService,
private readonly _formBuilder: FormBuilder, private readonly _formBuilder: FormBuilder,
@ -54,13 +57,20 @@ export class FileAttributesCsvImportDialogComponent implements OnInit {
this._readFile(); this._readFile();
} }
ngOnInit(): void {} ngOnInit(): void {
setTimeout(() => {
this.cdkVirtualScrollViewport.checkViewportSize();
}, 500);
}
private _readFile() { private _readFile() {
const reader = new FileReader(); const reader = new FileReader();
reader.addEventListener('load', async (event) => { reader.addEventListener('load', async (event) => {
const parsedCsv = <any>event.target.result; const parsedCsv = <any>event.target.result;
this.parseResult = Papa.parse(parsedCsv, { header: true, delimiter: this.baseConfigForm.get('delimiter').value }); this.parseResult = Papa.parse(parsedCsv, {
header: true,
delimiter: this.baseConfigForm.get('delimiter').value
});
if (!this.baseConfigForm.get('delimiter').value) { if (!this.baseConfigForm.get('delimiter').value) {
this.baseConfigForm.patchValue({ delimiter: this.parseResult.meta.delimiter }); this.baseConfigForm.patchValue({ delimiter: this.parseResult.meta.delimiter });
} }

4
apps/red-ui/src/app/modules/shared/components/buttons/circle-button/circle-button.component.html
View File

@ -1,6 +1,6 @@
<div [matTooltipClass]="tooltipClass" [matTooltipPosition]="tooltipPosition" [matTooltip]="tooltip | translate"> <div #matTooltip="matTooltip" [matTooltipClass]="tooltipClass" [matTooltipPosition]="tooltipPosition" [matTooltip]="tooltip | translate">
<button <button
(click)="performAction($event)" (click)="matTooltip.hide(0); performAction($event)"
[class.dark-bg]="type === 'dark-bg'" [class.dark-bg]="type === 'dark-bg'"
[class.primary]="type === 'primary'" [class.primary]="type === 'primary'"
[class.warn]="type === 'warn'" [class.warn]="type === 'warn'"

5
apps/red-ui/src/app/modules/shared/components/buttons/circle-button/circle-button.component.ts
View File

@ -23,7 +23,10 @@ export class CircleButtonComponent implements OnInit {
performAction($event: any) { performAction($event: any) {
if (!this.disabled) { if (!this.disabled) {
this.action.emit($event); // Timeout to allow tooltip to disappear first
setTimeout(() => {
this.action.emit($event);
}, 0);
} }
} }
} }