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

RED-10218: fixed fileNameColumn width overlap.

Browse Source
This commit is contained in:
Nicoleta Panaghiu 2024-10-30 12:30:58 +02:00
parent 317d6d576b
commit b1f8453daf
3 changed files with 10 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.html
View File

@ -9,7 +9,7 @@
<mat-icon *ngIf="!fileAttribute.editable" [matTooltip]="'readonly' | translate" svgIcon="red:read-only"></mat-icon>
<span
*ngIf="!isDate; else date"
[style.max-width]="attributeValueWidth"
[style.max-width]="attributeValueWidth()"
[matTooltip]="fileAttributeValue"
[ngClass]="{ hide: isInEditMode, 'clamp-3': mode !== 'workflow' }"
>
@ -56,13 +56,12 @@
class="edit-input"
iqserStopPropagation
>
<form [formGroup]="form">
<form [formGroup]="form" [style.width]="inputFormWidth()">
<iqser-dynamic-input
(closedDatepicker)="closedDatepicker = $event"
(keyup.enter)="form.valid && save()"
(keydown.escape)="close()"
[style.max-width]="editFieldWidth"
[style.min-width]="editFieldWidth"
[style.width]="inputFieldWidth()"
[formControlName]="fileAttribute.id"
[id]="fileAttribute.id"
[ngClass]="{ 'workflow-input': mode === 'workflow' || fileNameColumn, 'file-name-input': fileNameColumn }"

2
apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.scss
View File

@ -97,7 +97,7 @@
iqser-circle-button {
margin-left: 15px;
@media screen and (max-width: 1395px) {
@media screen and (max-width: 1745px) {
margin-left: 6px;
}
}

27
apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.ts
View File

@ -1,5 +1,5 @@
import { AsyncPipe, NgClass, NgIf, NgTemplateOutlet } from '@angular/common';
import { Component, computed, effect, HostListener, Input, OnDestroy } from '@angular/core';
import { Component, computed, effect, HostListener, input, Input, OnDestroy } from '@angular/core';
import { AbstractControl, FormBuilder, FormsModule, ReactiveFormsModule, UntypedFormGroup, ValidatorFn } from '@angular/forms';
import { MatIconModule } from '@angular/material/icon';
import { MatTooltipModule } from '@angular/material/tooltip';
@ -14,7 +14,7 @@ import {
StopPropagationDirective,
Toaster,
} from '@iqser/common-ui';
import { Debounce, log } from '@iqser/common-ui/lib/utils';
import { Debounce } from '@iqser/common-ui/lib/utils';
import { TranslateModule } from '@ngx-translate/core';
import { Dossier, File, FileAttributeConfigTypes, IFileAttributeConfig } from '@red/domain';
import { FileAttributesService } from '@services/entity-services/file-attributes.service';
@ -49,7 +49,6 @@ import { ConfigService } from '../../config.service';
})
export class FileAttributeComponent extends BaseFormComponent implements OnDestroy {
readonly #subscriptions = new Subscription();
#widthFactor = window.innerWidth >= 1800 ? 0.85 : 0.7;
isInEditMode = false;
closedDatepicker = true;
@Input({ required: true }) fileAttribute!: IFileAttributeConfig;
@ -66,7 +65,10 @@ export class FileAttributeComponent extends BaseFormComponent implements OnDestr
@Input({ required: true }) dossier!: Dossier;
@Input() fileNameColumn = false;
readonlyAttrs: string[] = [];
@Input() width?: number;
readonly width = input<number>();
readonly inputFormWidth = computed(() => (this.width() ? this.width() + 'px' : 'unset'));
readonly inputFieldWidth = computed(() => (this.width() ? this.width() - 50 + 'px' : 'unset'));
readonly attributeValueWidth = computed(() => (this.width() ? `${this.width() * 0.9}px` : 'unset'));
constructor(
router: Router,
@ -99,14 +101,6 @@ export class FileAttributeComponent extends BaseFormComponent implements OnDestr
);
}
get editFieldWidth(): string {
return this.width ? `${this.width * this.#widthFactor}px` : 'unset';
}
get attributeValueWidth(): string {
return this.width ? `${this.width * 0.9}px` : 'unset';
}
get isDate(): boolean {
return this.fileAttribute.type === FileAttributeConfigTypes.DATE;
}
@ -123,15 +117,6 @@ export class FileAttributeComponent extends BaseFormComponent implements OnDestr
return this.file.fileAttributes.attributeIdToValue[this.fileAttribute.id];
}
@HostListener('window:resize')
onResize() {
if (window.innerWidth >= 1800) {
this.#widthFactor = 0.85;
} else {
this.#widthFactor = 0.7;
}
}
@Debounce(60)
@HostListener('document:click', ['$event'])
clickOutside($event: MouseEvent) {