diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss
similarity index 79%
rename from apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss
rename to apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss
index 5591d34bd..447df33f7 100644
--- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss
+++ b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss
@@ -47,7 +47,8 @@
.csv-part {
display: flex;
- max-height: calc(90vh - 251px);
+ min-height: calc(90vh - 240px);
+ max-height: calc(90vh - 240px);
.csv-part-header {
height: 50px;
@@ -60,16 +61,31 @@
justify-content: space-between;
padding: 0 16px;
- > :not(.quick-activation) > *:not(:last-child)::after {
+ > div:first-child > *:not(:last-child)::after {
content: '-';
margin: 0 4px;
}
- .quick-activation > :not(:last-child) {
- margin-right: 10px;
+ .actions {
+ display: flex;
+ align-items: center;
+
+ .quick-activation {
+ margin-left: 12px;
+
+ > :not(:last-child) {
+ margin-right: 10px;
+ }
+ }
}
}
+ .search-input-container {
+ background-color: $white;
+ border-bottom: 1px solid $separator;
+ padding: 8px 16px;
+ }
+
.csv-part-content {
overflow: auto;
@include no-scroll-bar;
@@ -110,6 +126,10 @@
height: calc(100% - 58px);
@include no-scroll-bar;
+ &.search-open {
+ height: calc(100% - 58px - 51px);
+ }
+
.csv-header-pill {
min-height: 32px;
margin: 6px auto;
@@ -150,10 +170,34 @@
min-width: 150px;
background: $grey-2;
border-right: 1px solid $separator;
+
+ &:not(.collapsed) redaction-circle-button {
+ margin-right: -8px;
+ }
+
+ &.collapsed {
+ width: 50px;
+ min-width: 50px;
+
+ > .csv-part-header {
+ height: 100%;
+ border-bottom: none;
+ align-items: center;
+ flex-direction: column-reverse;
+ justify-content: flex-end;
+ padding-top: 8px;
+
+ > .all-caps-label {
+ transform: rotate(90deg) translateX(50%);
+ white-space: nowrap;
+ margin-top: 10px;
+ }
+ }
+ }
}
> .content-container {
- width: calc(100% - 527px);
+ width: 100%;
redaction-table-col-name::ng-deep {
> div {
@@ -191,7 +235,7 @@
height: calc(100% - 80px);
::ng-deep.cdk-virtual-scroll-content-wrapper {
- grid-template-columns: auto 2fr 150px auto auto auto 11px;
+ grid-template-columns: 30px minmax(0, 25vw) 150px auto auto auto 11px;
.table-item {
> div {
@@ -233,7 +277,7 @@
&.has-scrollbar:hover {
::ng-deep.cdk-virtual-scroll-content-wrapper {
- grid-template-columns: auto 2fr 150px auto auto auto;
+ grid-template-columns: 30px minmax(0, 25vw) 150px auto auto auto;
}
}
}
diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts
similarity index 77%
rename from apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts
rename to apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts
index e0daa4fb5..60f282035 100644
--- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts
@@ -1,10 +1,13 @@
-import { Component, Inject, OnInit, ViewChild } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Component, Inject, ViewChild } from '@angular/core';
+import { AbstractControl, FormBuilder, FormGroup, ValidatorFn, Validators } from '@angular/forms';
import { AppStateService } from '../../../../state/app-state.service';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import * as Papa from 'papaparse';
import { FileAttributesControllerService } from '@redaction/red-ui-http';
import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
+import { debounce } from '../../../../utils/debounce';
+import { Observable } from 'rxjs';
+import { map, startWith } from 'rxjs/operators';
enum FieldType {
Text = 'Text',
@@ -27,7 +30,7 @@ interface Field {
templateUrl: './file-attributes-csv-import-dialog.component.html',
styleUrls: ['./file-attributes-csv-import-dialog.component.scss']
})
-export class FileAttributesCsvImportDialogComponent implements OnInit {
+export class FileAttributesCsvImportDialogComponent {
public csvFile: File;
public ruleSetId: string;
public parseResult: { data: any[]; errors: any[]; meta: any; fields: Field[] };
@@ -35,6 +38,11 @@ export class FileAttributesCsvImportDialogComponent implements OnInit {
public activeFields: Field[] = [];
public selectedFields: string[] = [];
public baseConfigForm: FormGroup;
+ public isSearchOpen = false;
+ public searchForm: FormGroup;
+ public filteredFields: Field[];
+ public previewExpanded = true;
+ public filteredKeyOptions: Observable;
@ViewChild(CdkVirtualScrollViewport, { static: false }) cdkVirtualScrollViewport: CdkVirtualScrollViewport;
@@ -48,26 +56,33 @@ export class FileAttributesCsvImportDialogComponent implements OnInit {
this.csvFile = data.csv;
this.ruleSetId = data.ruleSetId;
+ this.searchForm = this._formBuilder.group({
+ query: ['']
+ });
+
this.baseConfigForm = this._formBuilder.group({
- filenameMappingColumnHeaderName: [undefined, Validators.required],
+ filenameMappingColumnHeaderName: ['', [Validators.required, this._autocompleteStringValidator()]],
delimiter: [undefined, Validators.required],
encoding: ['UTF-8', Validators.required]
});
this._readFile();
+
+ this.searchForm.valueChanges.subscribe((value) => this._executeSearch(value));
}
- get relevantFields() {
- return this.parseResult?.fields.filter((f) => this.getEntries(f.csvColumn) > 0);
+ @debounce(200)
+ private _executeSearch(value: { query: string }) {
+ this.filteredFields = this.parseResult.fields.filter((f) => f.csvColumn.toLowerCase().includes(value.query.toLowerCase()));
}
- ngOnInit(): void {
- setTimeout(() => {
- // Calculate viewport size after dialog is completely expanded
- if (this.cdkVirtualScrollViewport) {
- this.cdkVirtualScrollViewport.checkViewportSize();
+ private _autocompleteStringValidator(): ValidatorFn {
+ return (control: AbstractControl): { [key: string]: any } | null => {
+ if ((this.parseResult?.meta?.fields || []).indexOf(control.value) !== -1) {
+ return null; /* valid option selected */
}
- }, 500);
+ return { invalidAutocompleteString: { value: control.value } };
+ };
}
private _readFile() {
@@ -82,7 +97,12 @@ export class FileAttributesCsvImportDialogComponent implements OnInit {
this.baseConfigForm.patchValue({ delimiter: this.parseResult.meta.delimiter });
}
this.parseResult.fields = this.parseResult.meta.fields.map((field) => this._buildAttribute(field));
- console.log(this.parseResult);
+ this.filteredFields = [...this.parseResult.fields];
+
+ this.filteredKeyOptions = this.baseConfigForm.get('filenameMappingColumnHeaderName').valueChanges.pipe(
+ startWith(''),
+ map((value: string) => this.parseResult.meta.fields.filter((field) => field.toLowerCase().indexOf(value.toLowerCase()) !== -1))
+ );
});
reader.readAsText(this.csvFile, this.baseConfigForm.get('encoding').value);
}
diff --git a/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.ts
index a81ccba03..e4f1f461e 100644
--- a/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.ts
@@ -4,7 +4,7 @@ import { Colors, DictionaryControllerService } from '@redaction/red-ui-http';
import { ActivatedRoute } from '@angular/router';
import { SortingOption, SortingService } from '../../../../services/sorting.service';
import { PermissionsService } from '../../../../services/permissions.service';
-import { AdminDialogService } from '../../services/admin-dialog-service.service';
+import { AdminDialogService } from '../../services/admin-dialog.service';
@Component({
selector: 'redaction-default-colors-screen',
diff --git a/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.ts
index 267e4a401..cf54c6347 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.ts
@@ -9,7 +9,7 @@ import { PermissionsService } from '../../../../services/permissions.service';
import { FormBuilder, FormGroup } from '@angular/forms';
import { debounce } from '../../../../utils/debounce';
import { ActivatedRoute } from '@angular/router';
-import { AdminDialogService } from '../../services/admin-dialog-service.service';
+import { AdminDialogService } from '../../services/admin-dialog.service';
@Component({
selector: 'redaction-dictionary-listing-screen',
diff --git a/apps/red-ui/src/app/modules/admin/screens/dictionary-overview/dictionary-overview-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/dictionary-overview/dictionary-overview-screen.component.ts
index a44aba3be..ddf5e4ff9 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dictionary-overview/dictionary-overview-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/dictionary-overview/dictionary-overview-screen.component.ts
@@ -11,7 +11,7 @@ import { Observable } from 'rxjs';
import { saveAs } from 'file-saver';
import { ComponentHasChanges } from '../../../../guards/can-deactivate.guard';
import { FormBuilder, FormGroup } from '@angular/forms';
-import { AdminDialogService } from '../../services/admin-dialog-service.service';
+import { AdminDialogService } from '../../services/admin-dialog.service';
declare var ace;
diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html
index b03f0ab33..1e0b16e56 100644
--- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html
@@ -37,6 +37,17 @@
{{ 'file-attributes-listing.table-header.title' | translate: { length: displayedAttributes.length } }}
+
+
+
+
- {{ attribute.label }}
+
+ {{ attribute.label }}
-
-
-
-
-
-
+
+ [matTooltip]="'file-attributes-listing.read-only' | translate"
+ matTooltipPosition="above"
+ >
+
+
+ {{ attribute.csvColumnHeader }}