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

RED-6144: fix file actions tooltips

Browse Source
This commit is contained in:
Dan Percic 2023-02-21 21:12:05 +02:00
parent 9749e719cc
commit c8ac917428
11 changed files with 72 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/red-ui/src/app/modules/admin/screens/license/license-screen/license-screen.component.ts
View File

@ -14,7 +14,7 @@ import { RouterHistoryService } from '@services/router-history.service';
import { LicenseService } from '@services/license.service';
import { map } from 'rxjs/operators';
import { ROLES } from '@users/roles';
import { User } from '@red/domain';
import type { User } from '@red/domain';
@Component({
templateUrl: './license-screen.component.html',

15
apps/red-ui/src/app/modules/dossier-overview/components/bulk-actions/dossier-overview-bulk-actions.component.ts
View File

@ -50,6 +50,7 @@ export class DossierOverviewBulkActionsComponent implements OnChanges {
private get _buttons(): Action[] {
return [
{
id: 'delete-files-btn',
type: ActionTypes.circleBtn,
action: () => this._bulkActionsService.delete(this.selectedFiles),
tooltip: _('dossier-overview.bulk.delete'),
@ -57,6 +58,7 @@ export class DossierOverviewBulkActionsComponent implements OnChanges {
show: this.#canDelete,
},
{
id: 'assign-files-btn',
type: ActionTypes.circleBtn,
action: () => this._bulkActionsService.assign(this.selectedFiles),
tooltip: this.#assignTooltip,
@ -64,6 +66,7 @@ export class DossierOverviewBulkActionsComponent implements OnChanges {
show: this.#canAssign,
},
{
id: 'assign-files-to-me-btn',
type: ActionTypes.circleBtn,
action: () => this._bulkActionsService.assignToMe(this.selectedFiles),
tooltip: _('dossier-overview.assign-me'),
@ -71,6 +74,7 @@ export class DossierOverviewBulkActionsComponent implements OnChanges {
show: this.#canAssignToSelf,
},
{
id: 'to-new-btn',
type: ActionTypes.circleBtn,
action: () => this._bulkActionsService.setToNew(this.selectedFiles),
tooltip: _('dossier-overview.back-to-new'),
@ -78,6 +82,7 @@ export class DossierOverviewBulkActionsComponent implements OnChanges {
show: this.#canSetToNew,
},
{
id: 'to-under-approval-btn',
type: ActionTypes.circleBtn,
action: () => this._bulkActionsService.setToUnderApproval(this.selectedFiles),
tooltip: _('dossier-overview.under-approval'),
@ -85,6 +90,7 @@ export class DossierOverviewBulkActionsComponent implements OnChanges {
show: this.#canSetToUnderApproval,
},
{
id: 'to-under-review-btn',
type: ActionTypes.circleBtn,
action: () => this._bulkActionsService.backToUnderReview(this.selectedFiles),
tooltip: _('dossier-overview.under-review'),
@ -92,12 +98,14 @@ export class DossierOverviewBulkActionsComponent implements OnChanges {
show: this.#canSetToUnderReview,
},
{
id: 'download-files-btn',
type: ActionTypes.downloadBtn,
show: !this.selectedFiles.some(file => file.processingStatus === ProcessingFileStatuses.ERROR || !file.lastProcessed),
files: this.selectedFiles,
dossier: this.dossier,
},
{
id: 'approve-files-btn',
type: ActionTypes.circleBtn,
action: () => this._bulkActionsService.approve(this.selectedFiles),
disabled: !this.#canApprove,
@ -106,6 +114,7 @@ export class DossierOverviewBulkActionsComponent implements OnChanges {
show: this.#isReadyForApproval,
},
{
id: 'set-under-approval-btn',
type: ActionTypes.circleBtn,
action: () => this._bulkActionsService.setToUnderApproval(this.selectedFiles),
tooltip: _('dossier-overview.under-approval'),
@ -113,6 +122,7 @@ export class DossierOverviewBulkActionsComponent implements OnChanges {
show: this.#canUndoApproval,
},
{
id: 'ocr-files-btn',
type: ActionTypes.circleBtn,
action: () => this._bulkActionsService.ocr(this.selectedFiles),
tooltip: _('dossier-overview.ocr-file'),
@ -120,6 +130,7 @@ export class DossierOverviewBulkActionsComponent implements OnChanges {
show: this.#canOcr,
},
{
id: 'reanalyse-files-btn',
type: ActionTypes.circleBtn,
action: () => this._bulkActionsService.reanalyse(this.selectedFiles),
tooltip: _('dossier-overview.bulk.reanalyse'),
@ -127,6 +138,7 @@ export class DossierOverviewBulkActionsComponent implements OnChanges {
show: this.#canReanalyse && (this.#analysisForced || this.#canEnableAutoAnalysis),
},
{
id: 'stop-automatic-analysis-btn',
type: ActionTypes.circleBtn,
action: () => this._bulkActionsService.toggleAutomaticAnalysis(this.selectedFiles),
tooltip: _('dossier-overview.stop-auto-analysis'),
@ -134,14 +146,15 @@ export class DossierOverviewBulkActionsComponent implements OnChanges {
show: this.#canDisableAutoAnalysis,
},
{
id: 'start-automatic-analysis-btn',
type: ActionTypes.circleBtn,
action: () => this._bulkActionsService.toggleAutomaticAnalysis(this.selectedFiles),
tooltip: _('dossier-overview.start-auto-analysis'),
icon: 'red:enable-analysis',
show: this.#canEnableAutoAnalysis,
},
{
id: 'toggle-analysis-btn',
type: ActionTypes.toggle,
action: () => this._bulkActionsService.toggleAnalysis(this.selectedFiles, !this.#allFilesAreExcluded),
tooltip: this.#toggleAnalysisTooltip,

1
apps/red-ui/src/app/modules/dossier-overview/components/screen-header/dossier-overview-screen-header.component.html
View File

@ -7,6 +7,7 @@
>
<ng-container slot="right">
<redaction-file-download-btn
[buttonId]="'download-files-btn'"
[disabled]="downloadBtnDisabled$ | async"
[dossier]="dossier"
[files]="entitiesService.all$ | async"

1
apps/red-ui/src/app/modules/shared-dossiers/components/dossiers-listing-actions/dossiers-listing-actions.component.html
View File

@ -23,6 +23,7 @@
></iqser-circle-button>
<redaction-file-download-btn
[buttonId]="'download-dossier-files-' + dossier.id"
[disabled]="downloadBtnDisabled"
[dossier]="dossier"
[files]="files"

4
apps/red-ui/src/app/modules/shared-dossiers/components/file-actions/file-actions.component.html
View File

@ -12,10 +12,10 @@
<ng-template #actions (longPress)="forceReanalysisAction($event)" redactionLongPress>
<div
class="file-actions"
[iqserHelpMode]="fileActionsHelpModeKey"
[scrollableParentView]="scrollableParentView"
[overlappingElements]="overlappingElements"
[scrollableParentView]="scrollableParentView"
class="file-actions"
>
<redaction-expandable-file-actions
[actions]="buttons"

19
apps/red-ui/src/app/modules/shared-dossiers/components/file-actions/file-actions.component.ts
View File

@ -122,7 +122,7 @@ export class FileActionsComponent implements OnChanges {
private get _buttons(): Action[] {
return [
{
id: 'delete-file',
id: 'delete-file-btn',
type: ActionTypes.circleBtn,
action: ($event: MouseEvent) => this._openDeleteFileDialog($event),
tooltip: _('dossier-overview.delete.action'),
@ -130,6 +130,7 @@ export class FileActionsComponent implements OnChanges {
show: this.showDelete,
},
{
id: 'assign-btn',
type: ActionTypes.circleBtn,
action: ($event: MouseEvent) => this._assign($event),
tooltip: this.assignTooltip,
@ -137,6 +138,7 @@ export class FileActionsComponent implements OnChanges {
show: this.showAssign,
},
{
id: 'assign-to-me-btn',
type: ActionTypes.circleBtn,
action: ($event: MouseEvent) => this._assignToMe($event),
tooltip: _('dossier-overview.assign-me'),
@ -144,6 +146,7 @@ export class FileActionsComponent implements OnChanges {
show: this.showAssignToSelf,
},
{
id: 'open-import-redactions-dialog-btn',
type: ActionTypes.circleBtn,
action: ($event: MouseEvent) => this._openImportRedactionsDialog($event),
tooltip: _('dossier-overview.import-redactions'),
@ -151,6 +154,7 @@ export class FileActionsComponent implements OnChanges {
show: this.showImportRedactions && !this._iqserPermissionsService.has(ROLES.getRss),
},
{
id: 'download-file-btn',
type: ActionTypes.downloadBtn,
files: [this.file],
dossier: this.dossier,
@ -159,6 +163,7 @@ export class FileActionsComponent implements OnChanges {
disabled: this.file.processingStatus === ProcessingFileStatuses.ERROR,
},
{
id: 'toggle-document-info-btn',
type: ActionTypes.circleBtn,
action: () => this._documentInfoService.toggle(),
tooltip: _('file-preview.document-info'),
@ -167,6 +172,7 @@ export class FileActionsComponent implements OnChanges {
show: !!this._documentInfoService,
},
{
id: 'toggle-exclude-pages-btn',
type: ActionTypes.circleBtn,
action: () => this._excludedPagesService.toggle(),
tooltip: _('file-preview.exclude-pages'),
@ -179,6 +185,7 @@ export class FileActionsComponent implements OnChanges {
!this._iqserPermissionsService.has(ROLES.getRss),
},
{
id: 'set-file-to-new-btn',
type: ActionTypes.circleBtn,
action: ($event: MouseEvent) => this._setToNew($event),
tooltip: _('dossier-overview.back-to-new'),
@ -186,6 +193,7 @@ export class FileActionsComponent implements OnChanges {
show: this.showSetToNew,
},
{
id: 'set-file-under-approval-btn',
type: ActionTypes.circleBtn,
action: ($event: MouseEvent) => this._setFileUnderApproval($event),
tooltip: _('dossier-overview.under-approval'),
@ -193,6 +201,7 @@ export class FileActionsComponent implements OnChanges {
show: this.showUnderApproval,
},
{
id: 'set-file-under-review-btn',
type: ActionTypes.circleBtn,
action: ($event: MouseEvent) => this._setFileUnderReview($event),
tooltip: _('dossier-overview.under-review'),
@ -200,6 +209,7 @@ export class FileActionsComponent implements OnChanges {
show: this.showUnderReview,
},
{
id: 'set-file-approved-btn',
type: ActionTypes.circleBtn,
action: ($event: MouseEvent) => this.setFileApproved($event),
tooltip: this.file.canBeApproved ? _('dossier-overview.approve') : _('dossier-overview.approve-disabled'),
@ -208,6 +218,7 @@ export class FileActionsComponent implements OnChanges {
show: this.showApprove,
},
{
id: 'toggle-automatic-analysis-btn',
type: ActionTypes.circleBtn,
action: ($event: MouseEvent) => this._toggleAutomaticAnalysis($event),
tooltip: _('dossier-overview.stop-auto-analysis'),
@ -215,6 +226,7 @@ export class FileActionsComponent implements OnChanges {
show: this.canDisableAutoAnalysis,
},
{
id: 'reanalyse-file-preview-btn',
type: ActionTypes.circleBtn,
action: ($event: MouseEvent) => this._reanalyseFile($event),
tooltip: _('file-preview.reanalyse-notification'),
@ -224,6 +236,7 @@ export class FileActionsComponent implements OnChanges {
disabled: this.file.isProcessing,
},
{
id: 'toggle-automatic-analysis-btn',
type: ActionTypes.circleBtn,
action: ($event: MouseEvent) => this._toggleAutomaticAnalysis($event),
tooltip: _('dossier-overview.start-auto-analysis'),
@ -232,6 +245,7 @@ export class FileActionsComponent implements OnChanges {
show: this.canEnableAutoAnalysis,
},
{
id: 'set-under-approval-btn',
type: ActionTypes.circleBtn,
action: ($event: MouseEvent) => this._setFileUnderApproval($event),
tooltip: _('dossier-overview.under-approval'),
@ -239,6 +253,7 @@ export class FileActionsComponent implements OnChanges {
show: this.showUndoApproval,
},
{
id: 'ocr-file-btn',
type: ActionTypes.circleBtn,
action: ($event: MouseEvent) => this._ocrFile($event),
tooltip: _('dossier-overview.ocr-file'),
@ -246,6 +261,7 @@ export class FileActionsComponent implements OnChanges {
show: this.showOCR,
},
{
id: 'reanalyse-file-btn',
type: ActionTypes.circleBtn,
action: ($event: MouseEvent) => this._reanalyseFile($event),
tooltip: _('dossier-overview.reanalyse.action'),
@ -253,6 +269,7 @@ export class FileActionsComponent implements OnChanges {
show: this.showReanalyseDossierOverview,
},
{
id: 'toggle-analysis-btn',
type: ActionTypes.toggle,
action: () => this._toggleAnalysis(),
disabled: !this.canToggleAnalysis,

3
apps/red-ui/src/app/modules/shared/components/buttons/file-download-btn/file-download-btn.component.html
View File

@ -1,9 +1,10 @@
<iqser-circle-button
(action)="downloadFiles($event)"
[buttonId]="buttonId"
[disabled]="disabled || !canDownloadFiles || invalidDownload"
[tooltipClass]="tooltipClass"
[tooltipPosition]="tooltipPosition"
[tooltip]="tooltip | translate : { count: this.files.length }"
[tooltip]="tooltip | translate : { count: files.length }"
[type]="type"
icon="iqser:download"
></iqser-circle-button>

25
apps/red-ui/src/app/modules/shared/components/buttons/file-download-btn/file-download-btn.component.ts
View File

@ -1,4 +1,4 @@
import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/core';
import { Component, Input, OnChanges } from '@angular/core';
import { PermissionsService } from '@services/permissions.service';
import { Dossier, File, ProcessingFileStatuses } from '@red/domain';
import { FileDownloadService } from '@upload-download/services/file-download.service';
@ -13,9 +13,8 @@ import {
import { firstValueFrom } from 'rxjs';
@Component({
selector: 'redaction-file-download-btn [files] [dossier]',
selector: 'redaction-file-download-btn [files] [dossier] [buttonId]',
templateUrl: './file-download-btn.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FileDownloadBtnComponent implements OnChanges {
@Input() files: File[];
@ -24,9 +23,11 @@ export class FileDownloadBtnComponent implements OnChanges {
@Input() type: CircleButtonType = CircleButtonTypes.default;
@Input() tooltipClass: string;
@Input() disabled = false;
@Input() buttonId: string;
tooltip: string;
canDownloadFiles: boolean;
invalidDownload = false;
constructor(
private readonly _permissionsService: PermissionsService,
@ -35,11 +36,8 @@ export class FileDownloadBtnComponent implements OnChanges {
private readonly _toaster: Toaster,
) {}
get invalidDownload() {
return this.files.some(file => file.processingStatus === ProcessingFileStatuses.ERROR);
}
ngOnChanges(): void {
this.invalidDownload = this.files.some(file => file.processingStatus === ProcessingFileStatuses.ERROR);
this.canDownloadFiles = this._permissionsService.canDownloadFiles(this.files, this.dossier);
this.tooltip = this.canDownloadFiles ? _('dossier-overview.download-file') : _('dossier-overview.download-file-disabled');
}
@ -55,12 +53,13 @@ export class FileDownloadBtnComponent implements OnChanges {
return;
}
await this._fileDownloadService
.downloadFiles({
dossierId: this.dossier.id,
fileIds: this.files.map(f => f.id),
...result,
})
const downloadRequest = this._fileDownloadService.downloadFiles({
dossierId: this.dossier.id,
fileIds: this.files.map(f => f.id),
...result,
});
await downloadRequest
.then(() => this._toaster.info(_('download-status.queued')))
.catch(() => this._toaster.error(_('download-status.error')));
}

6
apps/red-ui/src/app/modules/shared/components/expandable-file-actions/expandable-file-actions.component.html
View File

@ -1,4 +1,4 @@
<ng-container *ngFor="let btn of displayedButtons">
<ng-container *ngFor="let btn of displayedButtons; trackBy: trackBy">
<iqser-circle-button
(action)="btn.action($event)"
*ngIf="btn.type === 'circleBtn'"
@ -16,6 +16,7 @@
<!-- download redacted file-->
<redaction-file-download-btn
*ngIf="btn.type === 'downloadBtn'"
[buttonId]="btn.id"
[disabled]="btn.disabled"
[dossier]="btn.dossier"
[files]="btn.files"
@ -31,6 +32,7 @@
(click)="$event.stopPropagation()"
[checked]="btn.checked"
[disabled]="btn.disabled"
[id]="btn.id"
[matTooltipPosition]="tooltipPosition"
[matTooltip]="btn.tooltip | translate"
[ngClass]="btn.class"
@ -55,10 +57,12 @@
<mat-icon [svgIcon]="btn.icon"></mat-icon>
{{ btn.tooltip | translate }}
</ng-container>
<ng-container *ngIf="btn.type === 'downloadBtn'">
<mat-icon svgIcon="iqser:download"></mat-icon>
{{ 'dossier-overview.download-file' | translate }}
</ng-container>
<ng-container *ngIf="btn.type === 'toggle'">
<mat-slide-toggle [checked]="btn.checked" [disabled]="btn.disabled" class="ml-0" color="primary"></mat-slide-toggle>
{{ btn.tooltip | translate }}

7
apps/red-ui/src/app/modules/shared/components/expandable-file-actions/expandable-file-actions.component.ts
View File

@ -1,6 +1,6 @@
import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges, ViewChild } from '@angular/core';
import { Component, Input, OnChanges, SimpleChanges, ViewChild } from '@angular/core';
import { Action, ActionTypes, Dossier, File } from '@red/domain';
import { CircleButtonType, defaultDialogConfig, IqserTooltipPosition, Toaster } from '@iqser/common-ui';
import { CircleButtonType, defaultDialogConfig, IqserTooltipPosition, Toaster, trackByFactory } from '@iqser/common-ui';
import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
import { FileDownloadService } from '@upload-download/services/file-download.service';
import { PermissionsService } from '@services/permissions.service';
@ -17,7 +17,6 @@ import { MatDialog } from '@angular/material/dialog';
selector: 'redaction-expandable-file-actions',
templateUrl: './expandable-file-actions.component.html',
styleUrls: ['./expandable-file-actions.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ExpandableFileActionsComponent implements OnChanges {
@Input() maxWidth: number;
@ -31,6 +30,7 @@ export class ExpandableFileActionsComponent implements OnChanges {
expanded = false;
@ViewChild(MatMenuTrigger) matMenu: MatMenuTrigger;
trackBy = trackByFactory();
constructor(
private readonly _fileDownloadService: FileDownloadService,
@ -38,6 +38,7 @@ export class ExpandableFileActionsComponent implements OnChanges {
private readonly _permissionsService: PermissionsService,
private readonly _dialog: MatDialog,
) {}
ngOnChanges(changes: SimpleChanges) {
if (changes.actions || changes.maxWidth || changes.minWidth) {
let count = 0;

24
libs/red-domain/src/lib/shared/expandable-file-actions.ts
View File

@ -1,18 +1,18 @@
import { Observable } from 'rxjs';
import { CircleButtonType } from '@iqser/common-ui';
import { File } from '../files';
import { Dossier } from '../dossiers';
export type ActionType = 'circleBtn' | 'downloadBtn' | 'toggle';
import { CircleButtonType, ITrackable } from '@iqser/common-ui';
import { type File } from '../files';
import { type Dossier } from '../dossiers';
export const ActionTypes = {
circleBtn: 'circleBtn' as ActionType,
downloadBtn: 'downloadBtn' as ActionType,
toggle: 'toggle' as ActionType,
};
circleBtn: 'circleBtn',
downloadBtn: 'downloadBtn',
toggle: 'toggle',
} as const;
export interface Action {
id?: string;
export type ActionType = keyof typeof ActionTypes;
export interface Action extends ITrackable {
readonly id: string;
action?: (...args: unknown[]) => void;
tooltip?: string;
icon?: string;
@ -23,7 +23,7 @@ export interface Action {
buttonType?: CircleButtonType;
tooltipClass?: string;
checked?: boolean;
class?: { [key: string]: boolean };
class?: Record<string, boolean>;
files?: File[];
dossier?: Dossier;
type: ActionType;