Change file attribute name

apps/red-ui/src/app/modules/admin/screens/dictionary-overview/dictionary-overview-screen.component.scss

@@ -130,8 +130,3 @@
         color: $grey-7;
     }
 }
-
-.w-200 {
-    width: 200px;
-    max-width: 200px;
-}

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

@@ -126,7 +126,7 @@
                 <div class="table-header" redactionSyncWidth="table-item">
                     <div class="select-oval-placeholder"></div>
 
-                    <redaction-table-col-name label="file-attributes-csv-import.table-col-names.name"></redaction-table-col-name>
+                    <redaction-table-col-name label="file-attributes-csv-import.table-col-names.name" class="name"></redaction-table-col-name>
 
                     <redaction-table-col-name label="file-attributes-csv-import.table-col-names.type"></redaction-table-col-name>
 
@@ -158,7 +158,41 @@
                             <div *ngIf="!isFieldSelected(field.csvColumn)" class="select-oval"></div>
                             <mat-icon class="selection-icon active" *ngIf="isFieldSelected(field.csvColumn)" svgIcon="red:radio-selected"></mat-icon>
                         </div>
-                        <div>{{ field.name }}</div>
+                        <div class="name" [class.editing]="field.editingName">
+                            <div *ngIf="!field.editingName">
+                                {{ field.name }}
+                            </div>
+                            <form (submit)="field.editingName = false; field.name = field.temporaryName" *ngIf="field.editingName">
+                                <div class="red-input-group w-200">
+                                    <input name="name" [(ngModel)]="field.temporaryName" />
+                                </div>
+                            </form>
+                            <redaction-circle-button
+                                class="edit-name-button"
+                                *ngIf="!field.editingName"
+                                (action)="field.editingName = true"
+                                tooltip="file-attributes-csv-import.action.edit-name"
+                                type="dark-bg"
+                                icon="red:edit"
+                            >
+                            </redaction-circle-button>
+                            <ng-container *ngIf="field.editingName">
+                                <redaction-circle-button
+                                    (action)="field.editingName = false; field.name = field.temporaryName"
+                                    tooltip="file-attributes-csv-import.action.save-name"
+                                    type="dark-bg"
+                                    icon="red:check-alt"
+                                >
+                                </redaction-circle-button>
+                                <redaction-circle-button
+                                    (action)="field.editingName = false; field.temporaryName = field.name"
+                                    tooltip="file-attributes-csv-import.action.cancel-edit-name"
+                                    type="dark-bg"
+                                    icon="red:close"
+                                >
+                                </redaction-circle-button>
+                            </ng-container>
+                        </div>
                         <div>
                             <div class="red-input-group">
                                 <mat-form-field class="no-label">
@@ -176,21 +210,13 @@
                         <div class="center"><mat-slide-toggle [(ngModel)]="field.display" color="primary"></mat-slide-toggle></div>
                         <div class="actions-container">
                             <div class="action-buttons">
-                                <!--                                <redaction-circle-button-->
+                                <redaction-circle-button
-                                <!--                                    (action)="openAddEditUserDialog($event, field)"-->
+                                    (action)="toggleFieldActive(field)"
-                                <!--                                    tooltip="user-listing.action.edit"-->
+                                    tooltip="file-attributes-csv-import.action.remove"
-                                <!--                                    type="dark-bg"-->
+                                    type="dark-bg"
-                                <!--                                    icon="red:edit"-->
+                                    icon="red:trash"
-                                <!--                                >-->
+                                >
-                                <!--                                </redaction-circle-button>-->
+                                </redaction-circle-button>
-                                <!--                                <redaction-circle-button-->
-                                <!--                                    (action)="openDeleteUserDialog([field], $event)"-->
-                                <!--                                    tooltip="user-listing.action.delete"-->
-                                <!--                                    type="dark-bg"-->
-                                <!--                                    icon="red:trash"-->
-                                <!--                                    [disabled]="field.userId === userService.userId"-->
-                                <!--                                >-->
-                                <!--                                </redaction-circle-button>-->
                             </div>
                         </div>
                         <div class="scrollbar-placeholder"></div>

apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss

@@ -158,6 +158,10 @@
         redaction-table-col-name::ng-deep {
             > div {
                 padding: 0 13px 0 10px !important;
+
+                &.name {
+                    padding-left: 22px !important;
+                }
             }
         }
 
@@ -184,6 +188,29 @@
                                 align-items: center;
                             }
                         }
+
+                        &.name {
+                            flex-direction: row;
+                            align-items: center;
+                            justify-content: flex-start;
+
+                            &:not(.editing) {
+                                padding-left: 22px;
+                            }
+
+                            .edit-name-button {
+                                display: none;
+                            }
+
+                            redaction-circle-button:first-of-type {
+                                margin-left: 7px;
+                                margin-right: 2px;
+                            }
+                        }
+                    }
+
+                    &:hover .name .edit-name-button {
+                        display: block;
                     }
                 }
             }

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

@@ -17,6 +17,8 @@ interface Field {
     type: FieldType;
     readonly: boolean;
     display: boolean;
+    editingName?: boolean;
+    temporaryName?: string;
 }
 
 @Component({
@@ -62,7 +64,7 @@ export class FileAttributesCsvImportDialogComponent implements OnInit {
             if (!this.baseConfigForm.get('delimiter').value) {
                 this.baseConfigForm.patchValue({ delimiter: this.parseResult.meta.delimiter });
             }
-            this.parseResult.fields = this.parseResult.meta.fields.map((field) => this._buildField(field));
+            this.parseResult.fields = this.parseResult.meta.fields.map((field) => this._buildAttribute(field));
             console.log(this.parseResult);
         });
         reader.readAsText(this.csvFile, this.baseConfigForm.get('encoding').value);
@@ -102,11 +104,14 @@ export class FileAttributesCsvImportDialogComponent implements OnInit {
         }
     }
 
-    private _buildField(csvColumn: string): Field {
+    private _buildAttribute(csvColumn: string): Field {
+        const sample = this.getSample(csvColumn);
+        const isNumber = sample && !isNaN(sample);
         return {
             csvColumn,
             name: csvColumn,
-            type: FieldType.Text,
+            temporaryName: csvColumn,
+            type: isNumber ? FieldType.Number : FieldType.Text,
             readonly: false,
             display: true
         };

apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
 import { PermissionsService } from '../../../../services/permissions.service';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { FileAttributeConfig, FileAttributesControllerService } from '@redaction/red-ui-http';
@@ -20,6 +20,8 @@ export class FileAttributesListingScreenComponent implements OnInit {
     public selectedFileAttributeIds: string[] = [];
     public viewReady = false;
 
+    @ViewChild('fileInput') private _fileInput: ElementRef;
+
     constructor(
         public readonly permissionsService: PermissionsService,
         public readonly _sortingService: SortingService,
@@ -118,8 +120,9 @@ export class FileAttributesListingScreenComponent implements OnInit {
         return this.selectedFileAttributeIds.indexOf(attribute.id) !== -1;
     }
 
-    importCSV(files: FileList | File[]) {
+    public importCSV(files: FileList | File[]) {
         const csvFile = files[0];
+        this._fileInput.nativeElement.value = null;
 
         this._dialogService.openImportFileAttributeCSVDialog(csvFile, this._appStateService.activeRuleSetId, async () => {
             await this._loadData();

apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.scss

@@ -94,11 +94,6 @@
     }
 }
 
-.w-150 {
-    max-width: 150px;
-    width: 150px;
-}
-
 .mb-5 {
     margin-bottom: 5px;
 }

apps/red-ui/src/assets/i18n/en.json

@@ -1139,6 +1139,12 @@
             "Text": "Free Text",
             "Number": "Number",
             "Date": "Date"
+        },
+        "action": {
+            "edit-name": "Edit Name",
+            "save-name": "Save",
+            "cancel-edit-name": "Cancel",
+            "remove": "Remove"
         }
     }
 }

apps/red-ui/src/assets/styles/red-input.scss

@@ -222,11 +222,21 @@ form {
         max-width: 110px;
     }
 
+    &.w-150 {
+        max-width: 150px;
+        width: 150px;
+    }
+
     &.w-160 {
         width: 160px;
         max-width: 160px;
     }
 
+    &.w-200 {
+        width: 200px;
+        max-width: 200px;
+    }
+
     &.w-250 {
         width: 250px;
         max-width: 250px;

apps/red-ui/src/assets/styles/red-tables.scss

@@ -91,6 +91,11 @@ cdk-virtual-scroll-viewport {
                 }
             }
 
+            input,
+            mat-select {
+                margin-top: 0;
+            }
+
             &:hover {
                 > div {
                     background-color: #f9fafb;