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

Change file attribute name

Browse Source
This commit is contained in:
Adina Țeudan 2021-04-08 19:17:01 +03:00
parent 28f052a23d
commit 1d63ff2d58
9 changed files with 104 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -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-->
<!-- (action)="openAddEditUserDialog($event, field)"-->
<!-- tooltip="user-listing.action.edit"-->
<!-- type="dark-bg"-->
<!-- icon="red:edit"-->
<!-- >-->
<!-- </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>-->
<redaction-circle-button
(action)="toggleFieldActive(field)"
tooltip="file-attributes-csv-import.action.remove"
type="dark-bg"
icon="red:trash"
>
</redaction-circle-button>
</div>
</div>
<div class="scrollbar-placeholder"></div>

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

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

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

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

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

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

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

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

6
apps/red-ui/src/assets/i18n/en.json
View File

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

10
apps/red-ui/src/assets/styles/red-input.scss
View File

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

5
apps/red-ui/src/assets/styles/red-tables.scss
View File

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