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 76e0fc659..8f6faa354 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 @@ -5,7 +5,7 @@ [ngClass]="{ 'workflow-attribute': mode === 'workflow', 'file-name-column': fileNameColumn }" class="file-attribute" > -
+
{{ fileAttribute.label }}: @@ -55,6 +55,8 @@
- +
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 a30efe876..445e41f21 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 @@ -6,7 +6,7 @@ &.file-name-column { height: 20px; - width: fit-content; + width: 100%; border-radius: 4px; font-size: 11px; line-height: 14px; @@ -81,6 +81,18 @@ &.file-name-column-input { background: transparent; + border: none; + box-shadow: none; + + form { + iqser-circle-button { + margin-left: 15px; + + @media screen and (max-width: 1395px) { + margin-left: 6px; + } + } + } } &.workflow-edit-input { @@ -99,10 +111,6 @@ iqser-circle-button { margin: 0 5px; - &:nth-child(2) { - padding-left: 10px; - } - &:last-child { margin-right: -8px; } @@ -118,7 +126,6 @@ margin-top: 0; } - .file-name-input, .workflow-input { width: 100%; padding-left: 2px; @@ -143,6 +150,10 @@ } } + .file-name-input { + padding-left: 5px; + } + .save { margin-left: 7px; } 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 4aae239d4..20f1034bd 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,4 +1,4 @@ -import { Component, computed, effect, HostListener, Input, OnDestroy } from '@angular/core'; +import { ChangeDetectionStrategy, Component, computed, effect, HostListener, Input, OnDestroy } from '@angular/core'; import { Dossier, File, FileAttributeConfigTypes, IFileAttributeConfig } from '@red/domain'; import { BaseFormComponent, @@ -43,6 +43,7 @@ import { TranslateModule } from '@ngx-translate/core'; NgTemplateOutlet, TranslateModule, ], + changeDetection: ChangeDetectionStrategy.OnPush, }) export class FileAttributeComponent extends BaseFormComponent implements OnDestroy { isInEditMode = false; @@ -62,6 +63,12 @@ export class FileAttributeComponent extends BaseFormComponent implements OnDestr this.file.fileId !== this.fileAttributesService.fileEdit())) || !this.fileAttributesService.openAttributeEdits().length, ); + @Input() width?: number; + #widthFactor = window.innerWidth >= 1800 ? 0.85 : 0.7; + + get editFieldWidth(): string { + return this.width ? `${this.width * this.#widthFactor}px` : 'unset'; + } get isDate(): boolean { return this.fileAttribute.type === FileAttributeConfigTypes.DATE; @@ -110,6 +117,15 @@ export class FileAttributeComponent extends BaseFormComponent implements OnDestr ); } + @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) { diff --git a/apps/red-ui/src/app/modules/file-preview/services/file-data.service.ts b/apps/red-ui/src/app/modules/file-preview/services/file-data.service.ts index 6bc632504..2f51ba0c8 100644 --- a/apps/red-ui/src/app/modules/file-preview/services/file-data.service.ts +++ b/apps/red-ui/src/app/modules/file-preview/services/file-data.service.ts @@ -179,8 +179,8 @@ export class FileDataService extends EntitiesService dict.type === entry.type); if (!dictionary && checkDictionary) { - const dictionaryRequest = this._dictionaryService.loadDictionaryDataForDossierTemplate(this._state.dossierTemplateId); - await firstValueFrom(dictionaryRequest); - checkDictionary = false; + const dictionaryRequest = this._dictionaryService.loadDictionaryDataForDossierTemplate( + this._state.dossierTemplateId, + this._state.isReadonly(), + ); + dictionaries = await firstValueFrom(dictionaryRequest); dictionary = dictionaries.find(dict => dict.type === entry.type); + checkDictionary = false; } if (!dictionary) { diff --git a/apps/red-ui/src/app/modules/pdf-viewer/services/layers.service.ts b/apps/red-ui/src/app/modules/pdf-viewer/services/layers.service.ts index 69ea61609..0d6b53cd1 100644 --- a/apps/red-ui/src/app/modules/pdf-viewer/services/layers.service.ts +++ b/apps/red-ui/src/app/modules/pdf-viewer/services/layers.service.ts @@ -49,8 +49,6 @@ export class LayersService { this._documentViewer.document.setLayersArray(layers); this._documentViewer.refreshAndUpdateView(); - - this.active.update(value => !value); } #updateButton() { 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 3d84cb5d8..df427a42a 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 @@ -1,17 +1,17 @@ - -
-
- {{ file.filename }} -
+
+
+ {{ file.filename }}
+
+
@@ -26,6 +26,7 @@ [dossier]="dossier" [fileAttribute]="ctx.primaryAttribute" [fileNameColumn]="true" + [width]="width" >
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 7e193eae0..1bc56cb18 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,4 +1,14 @@ -import { ChangeDetectionStrategy, Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core'; +import { + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + ElementRef, + Input, + OnChanges, + OnInit, + SimpleChanges, + ViewChild, +} from '@angular/core'; import { PrimaryFileAttributeService } from '@services/primary-file-attribute.service'; import { Dossier, File, IFileAttributeConfig, TrashFile } from '@red/domain'; import { FileAttributesService } from '@services/entity-services/file-attributes.service'; @@ -18,15 +28,18 @@ interface FileNameColumnContext { }) export class FileNameColumnComponent extends ContextComponent implements OnInit, OnChanges { readonly #reloadAttribute = new ReplaySubject(1); + @ViewChild('filenameColumn', { static: true }) filenameColumn: ElementRef; @Input() file?: File | TrashFile; @Input() dossier: Dossier; @Input() dossierTemplateId: string; ocrByDefault: boolean; + width: number; constructor( private readonly _fileAttributeService: FileAttributesService, private readonly _primaryFileAttributeService: PrimaryFileAttributeService, private readonly _dossierTemplateService: DossierTemplatesService, + private readonly _changeDetectorRef: ChangeDetectorRef, ) { super(); } @@ -37,6 +50,10 @@ export class FileNameColumnComponent extends ContextComponent this.#findPrimaryAttribute()), ); super._initContext({ primaryAttribute: primaryAttribute$ }); + const _observer = new ResizeObserver((entries: ResizeObserverEntry[]) => { + this.#updateItemWidth(entries[0]); + }); + _observer.observe(this.filenameColumn.nativeElement); } ngOnChanges(changes: SimpleChanges): void { @@ -57,4 +74,9 @@ export class FileNameColumnComponent extends ContextComponent a.primaryAttribute); } + + #updateItemWidth(resizeObserverEntry: ResizeObserverEntry) { + this.width = resizeObserverEntry.contentRect.width; + this._changeDetectorRef.markForCheck(); + } } diff --git a/apps/red-ui/src/app/services/dossiers/dossier-changes.service.ts b/apps/red-ui/src/app/services/dossiers/dossier-changes.service.ts index fe43372cb..0484623a3 100644 --- a/apps/red-ui/src/app/services/dossiers/dossier-changes.service.ts +++ b/apps/red-ui/src/app/services/dossiers/dossier-changes.service.ts @@ -11,6 +11,8 @@ import { DashboardStatsService } from '../dossier-templates/dashboard-stats.serv import { CHANGED_CHECK_INTERVAL } from '@utils/constants'; import { List } from '@iqser/common-ui/lib/utils'; import { DossiersCacheService } from '@services/dossiers/dossiers-cache.service'; +import { Router } from '@angular/router'; +import { filterEventsOnPages } from '@utils/operators'; @Injectable({ providedIn: 'root' }) export class DossiersChangesService extends GenericService implements OnDestroy { @@ -20,6 +22,7 @@ export class DossiersChangesService extends GenericService implements O readonly #dashboardStatsService = inject(DashboardStatsService); readonly #logger = inject(NGXLogger); readonly #dossierCache = inject(DossiersCacheService); + readonly #router = inject(Router); protected readonly _defaultModelPath = 'dossier'; loadOnlyChanged(): Observable { @@ -60,6 +63,7 @@ export class DossiersChangesService extends GenericService implements O initialize() { this.#logger.info('[DOSSIERS_CHANGES] Initialize timer'); const subscription = timer(CHANGED_CHECK_INTERVAL, CHANGED_CHECK_INTERVAL).pipe( + filterEventsOnPages(this.#router), switchMap(() => this.loadOnlyChanged()), tap(changes => { this.#activeDossiersService.emitFileChanges(changes); diff --git a/apps/red-ui/src/app/services/entity-services/dictionary.service.ts b/apps/red-ui/src/app/services/entity-services/dictionary.service.ts index a94c5c167..92efcf4df 100644 --- a/apps/red-ui/src/app/services/entity-services/dictionary.service.ts +++ b/apps/red-ui/src/app/services/entity-services/dictionary.service.ts @@ -48,8 +48,14 @@ export class DictionaryService extends EntitiesService ); } - getAllDictionaries(dossierTemplateId: string, dossierId?: string) { - const queryParams = dossierId ? [{ key: 'dossierId', value: dossierId }] : undefined; + getAllDictionaries(dossierTemplateId: string, readOnly = false, dossierId?: string) { + const queryParams = []; + if (dossierId) { + queryParams.push({ key: 'dossierId', value: dossierId }); + } + if (readOnly) { + queryParams.push({ key: 'includeDeleted', value: true }); + } return this._getOne<{ types: IDictionary[] }>(['type', dossierTemplateId], this._defaultModelPath, queryParams); } @@ -237,8 +243,8 @@ export class DictionaryService extends EntitiesService return forkJoin(observables); } - loadDictionaryDataForDossierTemplate(dossierTemplateId: string): Observable { - return this.getAllDictionaries(dossierTemplateId).pipe( + loadDictionaryDataForDossierTemplate(dossierTemplateId: string, readOnlyFile = false): Observable { + return this.getAllDictionaries(dossierTemplateId, readOnlyFile).pipe( map(typesResponse => typesResponse.types.map(type => new Dictionary(type))), map(dictionaries => { let manualTypeExists = false; diff --git a/apps/red-ui/src/app/services/notifications.service.ts b/apps/red-ui/src/app/services/notifications.service.ts index 232e14721..c5658c501 100644 --- a/apps/red-ui/src/app/services/notifications.service.ts +++ b/apps/red-ui/src/app/services/notifications.service.ts @@ -12,6 +12,8 @@ import { DossiersCacheService } from './dossiers/dossiers-cache.service'; import dayjs from 'dayjs'; import { List, mapEach } from '@iqser/common-ui/lib/utils'; import { APP_BASE_HREF } from '@angular/common'; +import { Router } from '@angular/router'; +import { filterEventsOnPages } from '@utils/operators'; const INCLUDE_SEEN = false; @@ -33,6 +35,7 @@ export class NotificationsService extends EntitiesService (this._dossiersCacheService.empty ? this._dossiersCacheService.load() : of(null))), switchMap(() => this.#loadNotificationsIfChanged()), ); // Rebuild notifications when cached dossiers are updated - const changed$ = this._dossiersCacheService.changed$.pipe(tap(() => this.setEntities(this.all.map(e => this._new(e))))); + const changed$ = this._dossiersCacheService.changed$.pipe( + filterEventsOnPages(this._router), + tap(() => this.setEntities(this.all.map(e => this._new(e)))), + ); return merge(timer$, changed$); } diff --git a/apps/red-ui/src/app/utils/constants.ts b/apps/red-ui/src/app/utils/constants.ts index 3008d5309..cdc6ab3f8 100644 --- a/apps/red-ui/src/app/utils/constants.ts +++ b/apps/red-ui/src/app/utils/constants.ts @@ -1,6 +1,7 @@ import { DynamicCaches } from '@iqser/common-ui'; export const CHANGED_CHECK_INTERVAL = 5000; +export const NO_CHECK_PAGES = ['admin', 'account', 'downloads', 'trash']; export const FALLBACK_COLOR = '#CCCCCC'; export const UI_CACHES: DynamicCaches = [ diff --git a/apps/red-ui/src/app/utils/operators.ts b/apps/red-ui/src/app/utils/operators.ts new file mode 100644 index 000000000..e7b8fa516 --- /dev/null +++ b/apps/red-ui/src/app/utils/operators.ts @@ -0,0 +1,7 @@ +import { filter } from 'rxjs/operators'; +import { NO_CHECK_PAGES } from '@utils/constants'; +import { Router } from '@angular/router'; + +export function filterEventsOnPages(router: Router) { + return filter(() => !NO_CHECK_PAGES.some(route => router.url.includes(route))); +}