diff --git a/apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.html b/apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.html index 5d8798b78..fd8750520 100644 --- a/apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.html +++ b/apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.html @@ -2,7 +2,7 @@
@@ -16,7 +16,7 @@ > - {{ fileAttributeValue ? (fileAttributeValue | date : 'd MMM yyyy') : '-' }}
@@ -33,10 +33,9 @@ *ngIf="!isInEditMode; else input" [attr.help-mode-key]="'edit-file-attributes'" [class.help-mode-button]="helpModeService.isHelpModeActive$ | async" - [ngClass]="{ 'workflow-edit-button': mode === 'workflow' }" - class="action-buttons edit-button" + [ngClass]="{ 'workflow-edit-button': mode === 'workflow', 'action-buttons edit-button': !fileNameColumn }" > -
+
@@ -44,14 +43,18 @@
-
+
diff --git a/apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.scss b/apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.scss index a4ebe2b8b..528c7a471 100644 --- a/apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.scss +++ b/apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.scss @@ -4,6 +4,20 @@ display: flex; align-items: center; + &.file-name-column { + height: 20px; + width: fit-content; + border-radius: 4px; + font-size: 11px; + line-height: 14px; + font-weight: initial; + + mat-icon { + transform: scale(0.5); + visibility: hidden; + } + } + &.workflow-attribute { padding: 2px; position: relative; @@ -54,18 +68,26 @@ box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15); margin-left: -10px; - &.workflow-edit-input { - justify-content: space-between; + &.file-name-column-input { + background: transparent; + } + + &.file-name-column-input, + .workflow-edit-input { box-shadow: none; width: 100%; position: absolute; - left: 0; - top: -5px; border: none; form { width: 100%; } + } + + &.workflow-edit-input { + justify-content: space-between; + left: 0; + top: -5px; iqser-circle-button { margin: 0 5px; @@ -93,6 +115,7 @@ } } + .file-name-input, .workflow-input { width: 100%; padding-left: 2px; diff --git a/apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.ts b/apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.ts index c1dc6725b..589b6be2d 100644 --- a/apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.ts +++ b/apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.ts @@ -1,8 +1,15 @@ import { Component, computed, effect, HostListener, Input, OnDestroy } from '@angular/core'; import { Dossier, File, FileAttributeConfigTypes, IFileAttributeConfig } from '@red/domain'; -import { BaseFormComponent, HelpModeService, ListingService, Toaster } from '@iqser/common-ui'; +import { + BaseFormComponent, + CircleButtonComponent, + DynamicInputComponent, + HelpModeService, + ListingService, + Toaster, +} from '@iqser/common-ui'; import { PermissionsService } from '@services/permissions.service'; -import { AbstractControl, FormBuilder, UntypedFormGroup, ValidatorFn } from '@angular/forms'; +import { AbstractControl, FormBuilder, FormsModule, ReactiveFormsModule, UntypedFormGroup, ValidatorFn } from '@angular/forms'; import { FileAttributesService } from '@services/entity-services/file-attributes.service'; import { firstValueFrom, Subscription } from 'rxjs'; import { FilesService } from '@services/files/files.service'; @@ -12,11 +19,28 @@ import { NavigationEnd, Router } from '@angular/router'; import { filter, map, tap } from 'rxjs/operators'; import { ConfigService } from '../../config.service'; import { Debounce } from '@iqser/common-ui/lib/utils'; +import { AsyncPipe, DatePipe, NgClass, NgIf, NgTemplateOutlet } from '@angular/common'; +import { MatTooltipModule } from '@angular/material/tooltip'; +import { MatIconModule } from '@angular/material/icon'; @Component({ selector: 'redaction-file-attribute [fileAttribute] [file] [dossier]', templateUrl: './file-attribute.component.html', styleUrls: ['./file-attribute.component.scss'], + standalone: true, + imports: [ + NgIf, + NgClass, + MatTooltipModule, + MatIconModule, + DatePipe, + AsyncPipe, + FormsModule, + ReactiveFormsModule, + DynamicInputComponent, + CircleButtonComponent, + NgTemplateOutlet, + ], }) export class FileAttributeComponent extends BaseFormComponent implements OnDestroy { readonly #subscriptions = new Subscription(); @@ -36,6 +60,7 @@ export class FileAttributeComponent extends BaseFormComponent implements OnDestr @Input() fileAttribute!: IFileAttributeConfig; @Input() file!: File; @Input() dossier!: Dossier; + @Input() fileNameColumn = false; constructor( router: Router, diff --git a/apps/red-ui/src/app/modules/dossier-overview/components/table-item/table-item.component.html b/apps/red-ui/src/app/modules/dossier-overview/components/table-item/table-item.component.html index 395356335..1db4f272e 100644 --- a/apps/red-ui/src/app/modules/dossier-overview/components/table-item/table-item.component.html +++ b/apps/red-ui/src/app/modules/dossier-overview/components/table-item/table-item.component.html @@ -1,5 +1,5 @@ -
- +
+
diff --git a/apps/red-ui/src/app/modules/dossier-overview/components/table-item/table-item.component.scss b/apps/red-ui/src/app/modules/dossier-overview/components/table-item/table-item.component.scss index 4aa16c810..f46bac911 100644 --- a/apps/red-ui/src/app/modules/dossier-overview/components/table-item/table-item.component.scss +++ b/apps/red-ui/src/app/modules/dossier-overview/components/table-item/table-item.component.scss @@ -28,3 +28,15 @@ justify-content: flex-start; align-items: center; } + +.file-name-cell:hover { + ::ng-deep.file-name-column { + background: var(--iqser-grey-6); + + div { + mat-icon { + visibility: visible; + } + } + } +} diff --git a/apps/red-ui/src/app/modules/dossier-overview/components/table-item/table-item.component.ts b/apps/red-ui/src/app/modules/dossier-overview/components/table-item/table-item.component.ts index 83e6e3eea..0447eac7d 100644 --- a/apps/red-ui/src/app/modules/dossier-overview/components/table-item/table-item.component.ts +++ b/apps/red-ui/src/app/modules/dossier-overview/components/table-item/table-item.component.ts @@ -1,6 +1,7 @@ import { Component, Input } from '@angular/core'; import { Dossier, File, IFileAttributeConfig } from '@red/domain'; import { getConfig } from '@iqser/common-ui'; +import { FileAttributesService } from '@services/entity-services/file-attributes.service'; @Component({ selector: 'redaction-table-item [file] [dossier] [displayedAttributes] [dossierTemplateId]', @@ -14,4 +15,6 @@ export class TableItemComponent { @Input() dossierTemplateId: string; readonly isDocumine = getConfig().IS_DOCUMINE; + + constructor(readonly fileAttributesService: FileAttributesService) {} } diff --git a/apps/red-ui/src/app/modules/dossier-overview/dossier-overview.module.ts b/apps/red-ui/src/app/modules/dossier-overview/dossier-overview.module.ts index 972364348..e639af20a 100644 --- a/apps/red-ui/src/app/modules/dossier-overview/dossier-overview.module.ts +++ b/apps/red-ui/src/app/modules/dossier-overview/dossier-overview.module.ts @@ -48,7 +48,6 @@ const routes: IqserRoutes = [ DossierDetailsComponent, DossierDetailsStatsComponent, FileWorkloadComponent, - FileAttributeComponent, TableItemComponent, WorkflowItemComponent, DossierOverviewScreenHeaderComponent, @@ -72,6 +71,7 @@ const routes: IqserRoutes = [ IqserAllowDirective, TenantPipe, DisableStopPropagationDirective, + FileAttributeComponent, ], }) export class DossierOverviewModule {} diff --git a/apps/red-ui/src/app/modules/shared/components/file-name-column/file-name-column.component.html b/apps/red-ui/src/app/modules/shared/components/file-name-column/file-name-column.component.html index 85349ba34..f2f4fd196 100644 --- a/apps/red-ui/src/app/modules/shared/components/file-name-column/file-name-column.component.html +++ b/apps/red-ui/src/app/modules/shared/components/file-name-column/file-name-column.component.html @@ -12,12 +12,22 @@
-
-
- - {{ ctx.primaryAttribute }} - +
+
+
+ + {{ ctx.primaryAttribute.label }} + +
+ + +
diff --git a/apps/red-ui/src/app/modules/shared/components/file-name-column/file-name-column.component.ts b/apps/red-ui/src/app/modules/shared/components/file-name-column/file-name-column.component.ts index 8bd8750cc..cb37870ef 100644 --- a/apps/red-ui/src/app/modules/shared/components/file-name-column/file-name-column.component.ts +++ b/apps/red-ui/src/app/modules/shared/components/file-name-column/file-name-column.component.ts @@ -1,24 +1,13 @@ import { ChangeDetectionStrategy, Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core'; import { PrimaryFileAttributeService } from '@services/primary-file-attribute.service'; -import { FileAttributes } from '@red/domain'; +import { Dossier, File, IFileAttributeConfig, TrashFile } from '@red/domain'; import { FileAttributesService } from '@services/entity-services/file-attributes.service'; import { combineLatest, map, ReplaySubject } from 'rxjs'; import { ContextComponent } from '@iqser/common-ui/lib/utils'; import { DossierTemplatesService } from '@services/dossier-templates/dossier-templates.service'; -interface PartialFile { - readonly isError: boolean; - readonly isInitialProcessing: boolean; - readonly filename: string; - readonly numberOfPages: number; - readonly excludedPages: number[]; - readonly lastOCRTime?: string; - readonly fileAttributes: FileAttributes; - readonly lastManualChangeDate?: string; -} - interface FileNameColumnContext { - primaryAttribute: string; + primaryAttribute: IFileAttributeConfig; ocrByDefault: boolean; } @@ -29,9 +18,10 @@ interface FileNameColumnContext { changeDetection: ChangeDetectionStrategy.OnPush, }) export class FileNameColumnComponent extends ContextComponent implements OnInit, OnChanges { - @Input() file: PartialFile; - @Input() dossierTemplateId: string; readonly #reloadAttribute = new ReplaySubject(1); + @Input() file?: File | TrashFile; + @Input() dossier: Dossier; + @Input() dossierTemplateId: string; constructor( private readonly _fileAttributeService: FileAttributesService, @@ -43,7 +33,7 @@ export class FileNameColumnComponent extends ContextComponent this._primaryFileAttributeService.getPrimaryFileAttributeValue(this.file, this.dossierTemplateId)), + map(() => this.#findPrimaryAttribute()), ); const ocrByDefault$ = this._dossierTemplateService.get(this.dossierTemplateId).pipe(map(template => template.ocrByDefault)); super._initContext({ @@ -57,4 +47,17 @@ export class FileNameColumnComponent extends ContextComponent a.primaryAttribute); + } } diff --git a/apps/red-ui/src/app/modules/shared/shared.module.ts b/apps/red-ui/src/app/modules/shared/shared.module.ts index 104cc7c10..fcf871c30 100644 --- a/apps/red-ui/src/app/modules/shared/shared.module.ts +++ b/apps/red-ui/src/app/modules/shared/shared.module.ts @@ -10,6 +10,7 @@ import { AnnotationIconComponent } from './components/annotation-icon/annotation import { DonutChartComponent } from './components/donut-chart/donut-chart.component'; import { CircleButtonComponent, + DynamicInputComponent, HasScrollbarDirective, IconButtonComponent, IqserAllowDirective, @@ -47,6 +48,7 @@ import { CustomDateAdapter } from '@shared/CustomDateAdapter'; import { IqserUsersModule } from '@iqser/common-ui/lib/users'; import { SmallChipComponent } from '@iqser/common-ui/lib/shared'; import { SelectComponent } from '@shared/components/select/select.component'; +import { FileAttributeComponent } from '../dossier-overview/components/file-attribute/file-attribute.component'; const buttons = [FileDownloadBtnComponent]; @@ -78,7 +80,7 @@ const services = [SharedDialogService]; const modules = [MatConfigModule, ScrollingModule, IconsModule, FormsModule, ReactiveFormsModule, ColorPickerModule]; -const deleteThisWhenAllComponentsAreStandalone = [DonutChartComponent]; +const deleteThisWhenAllComponentsAreStandalone = [DonutChartComponent, FileAttributeComponent]; @NgModule({ declarations: [...components, ...utils, EditorComponent], @@ -100,6 +102,7 @@ const deleteThisWhenAllComponentsAreStandalone = [DonutChartComponent]; IqserDenyDirective, SelectComponent, RoundCheckboxComponent, + DynamicInputComponent, ], exports: [...modules, ...components, ...utils, ...deleteThisWhenAllComponentsAreStandalone], providers: [