From 05bde93f49ff925151318d3d6f904da67e6cdabb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Tue, 13 Apr 2021 17:52:29 +0300 Subject: [PATCH] CSV import search by column name --- .../src/app/modules/admin/admin.module.ts | 4 +-- .../rule-set-actions.component.ts | 2 +- ...ttributes-csv-import-dialog.component.html | 36 ++++++++++++++----- ...ttributes-csv-import-dialog.component.scss | 28 ++++++++++++--- ...-attributes-csv-import-dialog.component.ts | 19 +++++++--- .../default-colors-screen.component.ts | 2 +- .../dictionary-listing-screen.component.ts | 2 +- .../dictionary-overview-screen.component.ts | 2 +- ...ile-attributes-listing-screen.component.ts | 2 +- .../rule-sets-listing-screen.component.ts | 2 +- .../smtp-config-screen.component.ts | 2 +- .../user-listing-screen.component.ts | 2 +- ...ice.service.ts => admin-dialog.service.ts} | 2 +- .../search-input/search-input.component.html | 2 +- .../search-input/search-input.component.ts | 6 +++- apps/red-ui/src/assets/i18n/en.json | 3 ++ 16 files changed, 86 insertions(+), 30 deletions(-) rename apps/red-ui/src/app/modules/admin/{screens => dialogs}/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html (91%) rename apps/red-ui/src/app/modules/admin/{screens => dialogs}/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss (90%) rename apps/red-ui/src/app/modules/admin/{screens => dialogs}/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts (91%) rename apps/red-ui/src/app/modules/admin/services/{admin-dialog-service.service.ts => admin-dialog.service.ts} (98%) diff --git a/apps/red-ui/src/app/modules/admin/admin.module.ts b/apps/red-ui/src/app/modules/admin/admin.module.ts index 2215a086f..2c12acb71 100644 --- a/apps/red-ui/src/app/modules/admin/admin.module.ts +++ b/apps/red-ui/src/app/modules/admin/admin.module.ts @@ -25,13 +25,13 @@ import { ConfirmDeleteFileAttributeDialogComponent } from './dialogs/confirm-del import { EditColorDialogComponent } from './dialogs/edit-color-dialog/edit-color-dialog.component'; import { ComboChartComponent, ComboSeriesVerticalComponent } from './components/combo-chart'; import { NgxChartsModule } from '@swimlane/ngx-charts'; -import { AdminDialogService } from './services/admin-dialog-service.service'; +import { AdminDialogService } from './services/admin-dialog.service'; import { SmtpConfigScreenComponent } from './screens/smtp-config/smtp-config-screen.component'; import { SmtpAuthDialogComponent } from './dialogs/smtp-auth-dialog/smtp-auth-dialog.component'; import { AddEditUserDialogComponent } from './dialogs/add-edit-user-dialog/add-edit-user-dialog.component'; import { UsersStatsComponent } from './components/users-stats/users-stats.component'; import { ConfirmDeleteUsersDialogComponent } from './dialogs/confirm-delete-users-dialog/confirm-delete-users-dialog.component'; -import { FileAttributesCsvImportDialogComponent } from './screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component'; +import { FileAttributesCsvImportDialogComponent } from './dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component'; const dialogs = [ AddEditRuleSetDialogComponent, diff --git a/apps/red-ui/src/app/modules/admin/components/rule-set-actions/rule-set-actions.component.ts b/apps/red-ui/src/app/modules/admin/components/rule-set-actions/rule-set-actions.component.ts index 9591cf183..8a4dd362d 100644 --- a/apps/red-ui/src/app/modules/admin/components/rule-set-actions/rule-set-actions.component.ts +++ b/apps/red-ui/src/app/modules/admin/components/rule-set-actions/rule-set-actions.component.ts @@ -2,7 +2,7 @@ import { Component, EventEmitter, Input, Output } from '@angular/core'; import { PermissionsService } from '../../../../services/permissions.service'; import { AppStateService } from '../../../../state/app-state.service'; import { Router } from '@angular/router'; -import { AdminDialogService } from '../../services/admin-dialog-service.service'; +import { AdminDialogService } from '../../services/admin-dialog.service'; @Component({ selector: 'redaction-rule-set-actions', diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html similarity index 91% rename from apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html rename to apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html index 2fc9d6f53..be61e0504 100644 --- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html +++ b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html @@ -53,19 +53,37 @@ }} {{ 'file-attributes-csv-import.selected' | translate: { value: activeFields.length } }} -
- - +
+ +
+ + +
-
+
+ +
+
: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; 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 91% 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..c7b5b6ac4 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 @@ -5,6 +5,7 @@ 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'; enum FieldType { Text = 'Text', @@ -35,6 +36,9 @@ export class FileAttributesCsvImportDialogComponent implements OnInit { public activeFields: Field[] = []; public selectedFields: string[] = []; public baseConfigForm: FormGroup; + public isSearchOpen = false; + public searchForm: FormGroup; + public filteredFields: Field[]; @ViewChild(CdkVirtualScrollViewport, { static: false }) cdkVirtualScrollViewport: CdkVirtualScrollViewport; @@ -48,6 +52,10 @@ 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], delimiter: [undefined, Validators.required], @@ -55,10 +63,8 @@ export class FileAttributesCsvImportDialogComponent implements OnInit { }); this._readFile(); - } - get relevantFields() { - return this.parseResult?.fields.filter((f) => this.getEntries(f.csvColumn) > 0); + this.searchForm.valueChanges.subscribe((value) => this._executeSearch(value)); } ngOnInit(): void { @@ -70,6 +76,11 @@ export class FileAttributesCsvImportDialogComponent implements OnInit { }, 500); } + @debounce(200) + private _executeSearch(value: { query: string }) { + this.filteredFields = this.parseResult.fields.filter((f) => f.csvColumn.toLowerCase().includes(value.query.toLowerCase())); + } + private _readFile() { const reader = new FileReader(); reader.addEventListener('load', async (event) => { @@ -82,7 +93,7 @@ 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]; }); 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.ts b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.ts index eb5368be3..7c5ffafeb 100644 --- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.ts +++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.ts @@ -6,7 +6,7 @@ import { AppStateService } from '../../../../state/app-state.service'; import { ActivatedRoute } from '@angular/router'; import { debounce } from '../../../../utils/debounce'; import { SortingOption, SortingService } from '../../../../services/sorting.service'; -import { AdminDialogService } from '../../services/admin-dialog-service.service'; +import { AdminDialogService } from '../../services/admin-dialog.service'; @Component({ selector: 'redaction-file-attributes-listing-screen', diff --git a/apps/red-ui/src/app/modules/admin/screens/rule-sets-listing/rule-sets-listing-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/rule-sets-listing/rule-sets-listing-screen.component.ts index 2bdb4f091..105a1afd6 100644 --- a/apps/red-ui/src/app/modules/admin/screens/rule-sets-listing/rule-sets-listing-screen.component.ts +++ b/apps/red-ui/src/app/modules/admin/screens/rule-sets-listing/rule-sets-listing-screen.component.ts @@ -6,7 +6,7 @@ import { FormBuilder, FormGroup } from '@angular/forms'; import { debounce } from '../../../../utils/debounce'; import { RuleSetModel } from '@redaction/red-ui-http'; import { UserPreferenceService } from '../../../../services/user-preference.service'; -import { AdminDialogService } from '../../services/admin-dialog-service.service'; +import { AdminDialogService } from '../../services/admin-dialog.service'; @Component({ selector: 'redaction-rule-sets-listing-screen', diff --git a/apps/red-ui/src/app/modules/admin/screens/smtp-config/smtp-config-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/smtp-config/smtp-config-screen.component.ts index e0405f044..9b0d0b027 100644 --- a/apps/red-ui/src/app/modules/admin/screens/smtp-config/smtp-config-screen.component.ts +++ b/apps/red-ui/src/app/modules/admin/screens/smtp-config/smtp-config-screen.component.ts @@ -1,7 +1,7 @@ import { Component, OnInit } from '@angular/core'; import { PermissionsService } from '../../../../services/permissions.service'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; -import { AdminDialogService } from '../../services/admin-dialog-service.service'; +import { AdminDialogService } from '../../services/admin-dialog.service'; import { SmtpConfigurationControllerService, SMTPConfigurationModel } from '@redaction/red-ui-http'; import { NotificationService, NotificationType } from '../../../../services/notification.service'; import { TranslateService } from '@ngx-translate/core'; diff --git a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.ts index 819d007a5..fa559f668 100644 --- a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.ts +++ b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.ts @@ -4,7 +4,7 @@ import { UserService } from '../../../../services/user.service'; import { RuleSetModel, User, UserControllerService } from '@redaction/red-ui-http'; import { FormBuilder, FormGroup } from '@angular/forms'; import { debounce } from '../../../../utils/debounce'; -import { AdminDialogService } from '../../services/admin-dialog-service.service'; +import { AdminDialogService } from '../../services/admin-dialog.service'; import { TranslateService } from '@ngx-translate/core'; import { DoughnutChartConfig } from '../../../shared/components/simple-doughnut-chart/simple-doughnut-chart.component'; import { TranslateChartService } from '../../../../services/translate-chart.service'; diff --git a/apps/red-ui/src/app/modules/admin/services/admin-dialog-service.service.ts b/apps/red-ui/src/app/modules/admin/services/admin-dialog.service.ts similarity index 98% rename from apps/red-ui/src/app/modules/admin/services/admin-dialog-service.service.ts rename to apps/red-ui/src/app/modules/admin/services/admin-dialog.service.ts index 9d10aead4..ff8e2888d 100644 --- a/apps/red-ui/src/app/modules/admin/services/admin-dialog-service.service.ts +++ b/apps/red-ui/src/app/modules/admin/services/admin-dialog.service.ts @@ -24,7 +24,7 @@ import { TranslateService } from '@ngx-translate/core'; import { SmtpAuthDialogComponent } from '../dialogs/smtp-auth-dialog/smtp-auth-dialog.component'; import { AddEditUserDialogComponent } from '../dialogs/add-edit-user-dialog/add-edit-user-dialog.component'; import { ConfirmDeleteUsersDialogComponent } from '../dialogs/confirm-delete-users-dialog/confirm-delete-users-dialog.component'; -import { FileAttributesCsvImportDialogComponent } from '../screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component'; +import { FileAttributesCsvImportDialogComponent } from '../dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component'; const largeDialogConfig = { width: '90vw', diff --git a/apps/red-ui/src/app/modules/shared/components/search-input/search-input.component.html b/apps/red-ui/src/app/modules/shared/components/search-input/search-input.component.html index aff28b9a6..4ba25388d 100644 --- a/apps/red-ui/src/app/modules/shared/components/search-input/search-input.component.html +++ b/apps/red-ui/src/app/modules/shared/components/search-input/search-input.component.html @@ -1,5 +1,5 @@
-
+
diff --git a/apps/red-ui/src/app/modules/shared/components/search-input/search-input.component.ts b/apps/red-ui/src/app/modules/shared/components/search-input/search-input.component.ts index 4b79e8da3..ac1a00683 100644 --- a/apps/red-ui/src/app/modules/shared/components/search-input/search-input.component.ts +++ b/apps/red-ui/src/app/modules/shared/components/search-input/search-input.component.ts @@ -9,7 +9,7 @@ import { FormGroup } from '@angular/forms'; export class SearchInputComponent implements OnInit { @Input() form: FormGroup; @Input() placeholder: string; - @Input() width = 250; + @Input() width: number | 'full' = 250; constructor() {} @@ -22,4 +22,8 @@ export class SearchInputComponent implements OnInit { public clearContent() { this.form.patchValue({ query: '' }); } + + public get computedWidth() { + return this.width === 'full' ? '100%' : `${this.width}px`; + } } diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json index 15c1308a7..ad62b56a7 100644 --- a/apps/red-ui/src/assets/i18n/en.json +++ b/apps/red-ui/src/assets/i18n/en.json @@ -1160,6 +1160,9 @@ "selected": "{{value}} selected", "csv-column": "CSV Column", "no-hovered-column": "Preview CSV column by hovering the entry.", + "search": { + "placeholder": "Search by column name..." + }, "table-header": { "title": "{{length}} file attributes", "actions": {