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

Fix some stuff, break other stuff

Browse Source
This commit is contained in:
Adina Țeudan 2021-12-06 15:21:29 +02:00
parent d9080ab7a2
commit 0373f1a7b9
8 changed files with 91 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/workflow-item/workflow-item.component.html
View File

@ -1,5 +1,5 @@
<div class="workflow-item">
<div>
<div class="details-wrapper">
<div class="details">
<div [matTooltip]="file.filename" [routerLink]="file.routerLink" class="filename pointer" matTooltipPosition="above">
{{ file.filename }}
@ -20,11 +20,17 @@
<redaction-file-workload [file]="file"></redaction-file-workload>
<div class="file-actions">
<redaction-file-actions
*ngIf="!file.isProcessing"
[file]="file"
[maxWidth]="width - 20"
type="dossier-overview-workflow"
></redaction-file-actions>
<div class="spinning-icon mr-8" matTooltip="{{ 'file-status.processing' | translate }}" matTooltipPosition="above">
<mat-icon svgIcon="red:reanalyse"></mat-icon>
</div>
<div #actionsWrapper class="actions-wrapper">
<redaction-file-actions
*ngIf="!file.isProcessing"
[file]="file"
[maxWidth]="width"
type="dossier-overview-workflow"
></redaction-file-actions>
</div>
</div>
</div>

80
apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/workflow-item/workflow-item.component.scss
View File

@ -3,42 +3,6 @@
.workflow-item {
padding: 10px 10px 8px 10px;
> div {
display: flex;
justify-content: space-between;
.details {
max-width: calc(100% - 28px);
.filename {
font-weight: 600;
line-height: 18px;
@include common-mixins.line-clamp(1);
}
}
.user {
display: flex;
align-items: flex-end;
}
}
redaction-file-workload {
margin-top: 10px;
display: block;
min-height: 16px;
}
.file-actions {
margin-top: 8px;
min-height: 34px;
overflow: hidden;
}
redaction-file-actions:not(.keep-visible) {
display: none;
}
&:hover .filename {
text-decoration: underline;
}
@ -48,6 +12,50 @@
}
}
.details-wrapper {
display: flex;
justify-content: space-between;
.details {
max-width: calc(100% - 28px);
.filename {
font-weight: 600;
line-height: 18px;
@include common-mixins.line-clamp(1);
}
}
.user {
display: flex;
align-items: flex-end;
}
}
redaction-file-workload {
margin-top: 10px;
display: block;
min-height: 16px;
}
.file-actions {
margin-top: 8px;
min-height: 34px;
overflow: hidden;
align-items: center;
display: flex;
}
.actions-wrapper {
border: 1px solid;
overflow: hidden;
flex: 1;
}
redaction-file-actions:not(.keep-visible) {
//display: none;
}
.mt-4 {
margin-top: 4px;
}

25
apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/workflow-item/workflow-item.component.ts
View File

@ -1,6 +1,6 @@
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
import { File, IFileAttributeConfig } from '@red/domain';
import { Required } from '@iqser/common-ui';
import { Debounce, Required } from '@iqser/common-ui';
@Component({
selector: 'redaction-workflow-item',
@ -8,8 +8,25 @@ import { Required } from '@iqser/common-ui';
styleUrls: ['./workflow-item.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class WorkflowItemComponent {
export class WorkflowItemComponent implements OnInit {
@Input() @Required() file!: File;
@Input() @Required() displayedAttributes!: IFileAttributeConfig[];
@Input() width: number;
width: number;
@ViewChild('actionsWrapper', { static: true }) private _actionsWrapper: ElementRef;
constructor(private readonly _changeRef: ChangeDetectorRef) {}
ngOnInit(): void {
const _observer = new ResizeObserver((entries: ResizeObserverEntry[]) => {
this._updateItemWidth(entries[0]);
});
_observer.observe(this._actionsWrapper.nativeElement);
}
@Debounce(30)
private _updateItemWidth(entry: ResizeObserverEntry): void {
this.width = entry.contentRect.width;
this._changeRef.detectChanges();
}
}

2
apps/red-ui/src/app/modules/dossier/screens/dossier-overview/config.service.ts
View File

@ -32,7 +32,7 @@ import { noop } from 'lodash';
@Injectable()
export class ConfigService {
readonly listingMode$: Observable<ListingMode>;
private readonly _listingMode$ = new BehaviorSubject<ListingMode>(ListingModes.table);
private readonly _listingMode$ = new BehaviorSubject<ListingMode>(ListingModes.workflow);
constructor(
private readonly _fileAssignService: FileAssignService,

4
apps/red-ui/src/app/modules/dossier/screens/dossier-overview/screen/dossier-overview-screen.component.html
View File

@ -78,6 +78,6 @@
<input #fileInput (change)="uploadFiles($event.target['files'])" class="file-upload-input" multiple="true" type="file" />
<ng-template #workflowItemTemplate let-entity="entity" let-itemWidth="itemWidth">
<redaction-workflow-item [displayedAttributes]="displayedAttributes" [file]="entity" [width]="itemWidth"></redaction-workflow-item>
<ng-template #workflowItemTemplate let-entity="entity">
<redaction-workflow-item [displayedAttributes]="displayedAttributes" [file]="entity"></redaction-workflow-item>
</ng-template>

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

@ -3,7 +3,7 @@
[disabled]="disabled || !canDownloadFiles"
[tooltipClass]="tooltipClass"
[tooltipPosition]="tooltipPosition"
[tooltip]="tooltip"
[tooltip]="tooltip | translate: { count: this.files.length }"
[type]="type"
icon="iqser:download"
></iqser-circle-button>

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

@ -1,9 +1,8 @@
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/core';
import { PermissionsService } from '@services/permissions.service';
import { File } from '@red/domain';
import { FileDownloadService } from '@upload-download/services/file-download.service';
import { CircleButtonType, CircleButtonTypes, Toaster } from '@iqser/common-ui';
import { TranslateService } from '@ngx-translate/core';
import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
export type MenuState = 'OPEN' | 'CLOSED';
@ -14,28 +13,25 @@ export type MenuState = 'OPEN' | 'CLOSED';
styleUrls: ['./file-download-btn.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FileDownloadBtnComponent {
export class FileDownloadBtnComponent implements OnChanges {
@Input() files: File[];
@Input() tooltipPosition: 'above' | 'below' | 'before' | 'after' = 'above';
@Input() type: CircleButtonType = CircleButtonTypes.default;
@Input() tooltipClass: string;
@Input() disabled = false;
tooltip: string;
canDownloadFiles: boolean;
constructor(
private readonly _permissionsService: PermissionsService,
private readonly _fileDownloadService: FileDownloadService,
private readonly _toaster: Toaster,
private readonly _translateService: TranslateService,
) {}
get canDownloadFiles() {
return this._permissionsService.canDownloadFiles(this.files);
}
get tooltip() {
return this.canDownloadFiles
? this._translateService.instant('dossier-overview.download-file')
: this._translateService.instant('dossier-overview.download-file-disabled', { count: this.files.length });
ngOnChanges(): void {
this.canDownloadFiles = this._permissionsService.canDownloadFiles(this.files);
this.tooltip = this.canDownloadFiles ? _('dossier-overview.download-file') : _('dossier-overview.download-file-disabled');
}
async downloadFiles($event: MouseEvent) {

2
libs/common-ui

@ -1 +1 @@
Subproject commit 4c119e2a7870d0778457d22d50ac380316c68e29
Subproject commit 7ec9b548fa77f9ce36b285626b702efb8981bb39