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

wip edit dossier status

Browse Source
This commit is contained in:
Edi Cziszter 2022-02-07 07:02:09 +02:00
parent 30883a5349
commit 8dc2eae525
14 changed files with 166 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

146
apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.html
View File

@ -1,71 +1,91 @@
<form [formGroup]="form">
<div class="iqser-input-group required w-300">
<label translate="edit-dossier-dialog.general-info.form.name.label"></label>
<input
[placeholder]="'edit-dossier-dialog.general-info.form.name.placeholder' | translate"
formControlName="dossierName"
name="dossierName"
type="text"
/>
</div>
<div class="flex">
<div class="flex fields-container">
<div class="iqser-input-group required w-300">
<label translate="edit-dossier-dialog.general-info.form.name.label"></label>
<input
[placeholder]="'edit-dossier-dialog.general-info.form.name.placeholder' | translate"
formControlName="dossierName"
name="dossierName"
type="text"
/>
</div>
<div class="iqser-input-group required w-400">
<mat-form-field floatLabel="always">
<mat-label>{{ 'edit-dossier-dialog.general-info.form.template' | translate }}</mat-label>
<mat-select formControlName="dossierTemplateId" style="width: 100%">
<mat-option
*ngFor="let dossierTemplate of dossierTemplates"
[matTooltip]="dossierTemplate.description ? dossierTemplate.description : dossierTemplate.name"
[value]="dossierTemplate.dossierTemplateId"
matTooltipPosition="after"
<div class="iqser-input-group required w-400">
<mat-form-field floatLabel="always">
<mat-label>{{ 'edit-dossier-dialog.general-info.form.template' | translate }}</mat-label>
<mat-select formControlName="dossierTemplateId" style="width: 100%">
<mat-option
*ngFor="let dossierTemplate of dossierTemplates"
[matTooltip]="dossierTemplate.description ? dossierTemplate.description : dossierTemplate.name"
[value]="dossierTemplate.dossierTemplateId"
matTooltipPosition="after"
>
{{ dossierTemplate.name }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="iqser-input-group w-400">
<label translate="edit-dossier-dialog.general-info.form.description.label"></label>
<textarea
[placeholder]="'edit-dossier-dialog.general-info.form.description.placeholder' | translate"
formControlName="description"
iqserHasScrollbar
name="description"
rows="5"
type="text"
></textarea>
</div>
<div>
<mat-checkbox class="watermark" color="primary" formControlName="watermarkEnabled">
{{ 'edit-dossier-dialog.general-info.form.watermark' | translate }}
</mat-checkbox>
</div>
<div>
<mat-checkbox class="watermark-preview" color="primary" formControlName="watermarkPreviewEnabled">
{{ 'edit-dossier-dialog.general-info.form.watermark-preview' | translate }}
</mat-checkbox>
</div>
</div>
<div class="flex fields-container">
<div class="due-date">
<mat-checkbox
(change)="hasDueDate = !hasDueDate"
[checked]="hasDueDate"
[disabled]="!permissionsService.canEditDossier()"
class="filter-menu-checkbox"
color="primary"
>
{{ dossierTemplate.name }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
{{ 'edit-dossier-dialog.general-info.form.due-date' | translate }}
</mat-checkbox>
<div class="iqser-input-group w-400">
<label translate="edit-dossier-dialog.general-info.form.description.label"></label>
<textarea
[placeholder]="'edit-dossier-dialog.general-info.form.description.placeholder' | translate"
formControlName="description"
iqserHasScrollbar
name="description"
rows="5"
type="text"
></textarea>
</div>
<div *ngIf="hasDueDate" class="iqser-input-group datepicker-wrapper">
<input [matDatepicker]="picker" formControlName="dueDate" placeholder="dd/mm/yy" />
<mat-datepicker-toggle [for]="picker" matSuffix>
<mat-icon matDatepickerToggleIcon svgIcon="red:calendar"></mat-icon>
</mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</div>
</div>
<div>
<mat-checkbox class="watermark" color="primary" formControlName="watermarkEnabled">
{{ 'edit-dossier-dialog.general-info.form.watermark' | translate }}
</mat-checkbox>
</div>
<div>
<mat-checkbox class="watermark-preview" color="primary" formControlName="watermarkPreviewEnabled">
{{ 'edit-dossier-dialog.general-info.form.watermark-preview' | translate }}
</mat-checkbox>
</div>
<div class="due-date">
<mat-checkbox
(change)="hasDueDate = !hasDueDate"
[checked]="hasDueDate"
[disabled]="!permissionsService.canEditDossier(dossier)"
class="filter-menu-checkbox"
color="primary"
>
{{ 'edit-dossier-dialog.general-info.form.due-date' | translate }}
</mat-checkbox>
<div *ngIf="hasDueDate" class="iqser-input-group datepicker-wrapper">
<input [matDatepicker]="picker" formControlName="dueDate" placeholder="dd/mm/yy" />
<mat-datepicker-toggle [for]="picker" matSuffix>
<mat-icon matDatepickerToggleIcon svgIcon="red:calendar"></mat-icon>
</mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
<div class="iqser-input-group required w-300">
<label translate="edit-dossier-dialog.general-info.form.dossier-status"></label>
<mat-select
formControlName="dossierStatusId"
[placeholder]="
dossier.dossierStatusId ? (stateService.getById(dossier.dossierStatusId) | async).name : 'No status assigned'
"
>
<mat-option *ngFor="let state of states" [value]="dossier.dossierStatusId">
{{ state.name }}
</mat-option>
</mat-select>
</div>
</div>
</div>

4
apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.scss
View File

@ -23,3 +23,7 @@
border-top: none;
padding: 0;
}
.fields-container {
flex-direction: column;
}

9
apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.ts
View File

@ -14,6 +14,8 @@ import { DossiersService } from '@services/entity-services/dossiers.service';
import { DossierTemplatesService } from '@services/entity-services/dossier-templates.service';
import { DossierStatsService } from '@services/entity-services/dossier-stats.service';
import { firstValueFrom } from 'rxjs';
import { DossierStateService } from '@services/entity-services/dossier-state.service';
import { DossierState } from '../../../../../../../../../libs/red-domain/src/lib/dossier-state';
import { DOSSIER_TEMPLATE_ID } from '@utils/constants';
@Component({
@ -29,9 +31,11 @@ export class EditDossierGeneralInfoComponent implements OnInit, EditDossierSecti
form: FormGroup;
hasDueDate: boolean;
dossierTemplates: IDossierTemplate[];
states: DossierState[];
constructor(
readonly permissionsService: PermissionsService,
readonly stateService: DossierStateService,
private readonly _dossierTemplatesService: DossierTemplatesService,
private readonly _dossiersService: DossiersService,
private readonly _dossierStatsService: DossierStatsService,
@ -67,12 +71,13 @@ export class EditDossierGeneralInfoComponent implements OnInit, EditDossierSecti
return this.hasDueDate && this.form.get('dueDate').value === null;
}
ngOnInit() {
async ngOnInit() {
this._filterInvalidDossierTemplates();
this.form = this._getForm();
if (!this.permissionsService.canEditDossier(this.dossier)) {
this.form.disable();
}
this.states = await firstValueFrom(this.stateService.loadAllForTemplate(this.dossier.dossierTemplateId));
this.hasDueDate = !!this.dossier.dueDate;
}
@ -96,6 +101,7 @@ export class EditDossierGeneralInfoComponent implements OnInit, EditDossierSecti
watermarkPreviewEnabled: this.form.get('watermarkPreviewEnabled').value,
dueDate: this.hasDueDate ? this.form.get('dueDate').value : undefined,
dossierTemplateId: this.form.get(DOSSIER_TEMPLATE_ID).value,
dossierStatusId: this.form.get('dossierStatusId').value,
} as IDossierRequest;
try {
await firstValueFrom(this._dossiersService.createOrUpdate(dossier));
@ -136,6 +142,7 @@ export class EditDossierGeneralInfoComponent implements OnInit, EditDossierSecti
},
Validators.required,
],
dossierStatusId: [this.dossier.dossierStatusId],
description: [this.dossier.description],
dueDate: [this.dossier.dueDate],
watermarkEnabled: [this.dossier.watermarkEnabled],

1
apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossier-documents-status/dossier-documents-status.component.html Normal file
View File

@ -0,0 +1 @@
<iqser-status-bar *ngIf="stats" [configs]="statusBarConfig"></iqser-status-bar>

0
apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossier-documents-status/dossier-documents-status.component.scss Normal file
View File

24
apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossier-documents-status/dossier-documents-status.component.ts Normal file
View File

@ -0,0 +1,24 @@
import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/core';
import { DossierStats, StatusSorter } from '../../../../../../../../../../libs/red-domain/src';
import { List, StatusBarConfig } from '../../../../../../../../../../libs/common-ui/src';
@Component({
selector: 'redaction-dossier-documents-status',
templateUrl: './dossier-documents-status.component.html',
styleUrls: ['./dossier-documents-status.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DossierDocumentsStatusComponent implements OnChanges {
@Input() stats: DossierStats;
statusBarConfig: List<StatusBarConfig<string>>;
private get _statusConfig(): List<StatusBarConfig<string>> {
const { fileCountPerWorkflowStatus } = this.stats;
const statuses = Object.keys(fileCountPerWorkflowStatus).sort(StatusSorter.byStatus);
return statuses.map(status => ({ length: fileCountPerWorkflowStatus[status], color: status }));
}
ngOnChanges(): void {
this.statusBarConfig = this._statusConfig;
}
}

10
apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-actions/dossiers-listing-actions.component.html
View File

@ -1,6 +1,10 @@
<iqser-status-bar *ngIf="stats" [configs]="statusBarConfig"></iqser-status-bar>
<div (longPress)="forceReanalysisAction($event)" class="action-buttons" redactionLongPress>
<div
(longPress)="forceReanalysisAction($event)"
class="action-buttons"
redactionLongPress
iqserHelpMode="dossier-features"
[updateElementPosition]="false"
>
<iqser-circle-button
(action)="openEditDossierDialog($event, dossier.dossierId)"
*ngIf="currentUser.isUser"

9
apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-actions/dossiers-listing-actions.component.ts
View File

@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/c
import { PermissionsService } from '@services/permissions.service';
import { CircleButtonTypes, List, StatusBarConfig } from '@iqser/common-ui';
import { UserService } from '@services/user.service';
import { Dossier, DossierStats, File, StatusSorter } from '@red/domain';
import { Dossier, DossierStats, File } from '@red/domain';
import { DossiersDialogService } from '../../../../services/dossiers-dialog.service';
import { LongPressEvent } from '@shared/directives/long-press.directive';
import { UserPreferenceService } from '@services/user-preference.service';
@ -39,14 +39,7 @@ export class DossiersListingActionsComponent implements OnChanges {
private readonly _userPreferenceService: UserPreferenceService,
) {}
private get _statusConfig(): List<StatusBarConfig<string>> {
const { fileCountPerWorkflowStatus } = this.stats;
const statuses = Object.keys(fileCountPerWorkflowStatus).sort(StatusSorter.byStatus);
return statuses.map(status => ({ length: fileCountPerWorkflowStatus[status], color: status }));
}
ngOnChanges() {
this.statusBarConfig = this._statusConfig;
this.files = this.filesMapService.get(this.dossier.dossierId);
this.displayReanalyseBtn = this.permissionsService.displayReanalyseBtn(this.dossier) && this.analysisForced;
}

17
apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-status/dossiers-listing-status.component.html
View File

@ -1,4 +1,13 @@
<div class="flex-align-items-center dossier-status-container">
<div class="dossier-status-text">{{ dossierState.name }}</div>
<div class="dossier-status-chip" [style.background-color]="dossierState.description"></div>
</div>
<ng-container *ngIf="dossierState$ | async as dossierState">
<div class="flex-align-items-center dossier-status-container">
<div class="dossier-status-text">{{ dossierState.name }}</div>
<div class="dossier-status-chip" [style.background-color]="dossierState.description"></div>
</div>
</ng-container>
<ng-container *ngIf="(dossierState$ | async) === null">
<div class="flex-align-items-center dossier-status-container">
<div class="dossier-status-text">No status assigned</div>
</div>
</ng-container>
<redaction-dossiers-listing-actions [stats]="stats" [dossier]="dossier"></redaction-dossiers-listing-actions>

19
apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-status/dossiers-listing-status.component.ts
View File

@ -1,5 +1,8 @@
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
import { DossierState } from '../../../../../../../../../../libs/red-domain/src/lib/dossier-state';
import { Dossier, DossierStats } from '../../../../../../../../../../libs/red-domain/src';
import { Observable } from 'rxjs';
import { DossierStateService } from '../../../../../../services/entity-services/dossier-state.service';
@Component({
selector: 'redaction-dossiers-listing-status',
@ -7,6 +10,16 @@ import { DossierState } from '../../../../../../../../../../libs/red-domain/src/
styleUrls: ['./dossiers-listing-status.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DossiersListingStatusComponent {
@Input() dossierState: DossierState;
export class DossiersListingStatusComponent implements OnInit {
dossierState$: Observable<DossierState>;
@Input() stats: DossierStats;
@Input() dossier: Dossier;
constructor(private readonly _dossierStateService: DossierStateService) {}
ngOnInit(): void {
if (this.dossier.dossierStatusId) {
this.dossierState$ = this._dossierStateService.getById(this.dossier.dossierStatusId);
}
}
}

4
apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/table-item/table-item.component.html
View File

@ -12,10 +12,10 @@
</div>
<div class="cell status-container">
<redaction-dossiers-listing-actions [dossier]="dossier" [stats]="stats"></redaction-dossiers-listing-actions>
<redaction-dossier-documents-status [stats]="stats"></redaction-dossier-documents-status>
</div>
<div class="cell">
<redaction-dossiers-listing-status [dossierState]="states[0]"></redaction-dossiers-listing-status>
<redaction-dossiers-listing-status [stats]="stats" [dossier]="dossier"></redaction-dossiers-listing-status>
</div>
</ng-container>

16
apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/table-item/table-item.component.ts
View File

@ -1,10 +1,8 @@
import { ChangeDetectionStrategy, Component, Input, OnChanges, OnInit } from '@angular/core';
import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/core';
import { Dossier, DossierStats } from '@red/domain';
import { DossierStatsService } from '@services/entity-services/dossier-stats.service';
import { BehaviorSubject, firstValueFrom, Observable } from 'rxjs';
import { BehaviorSubject, Observable } from 'rxjs';
import { switchMap } from 'rxjs/operators';
import { DossierStateService } from '../../../../../../services/entity-services/dossier-state.service';
import { DossierState } from '../../../../../../../../../../libs/red-domain/src/lib/dossier-state';
@Component({
selector: 'redaction-table-item [dossier]',
@ -12,14 +10,13 @@ import { DossierState } from '../../../../../../../../../../libs/red-domain/src/
styleUrls: ['./table-item.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class TableItemComponent implements OnChanges, OnInit {
export class TableItemComponent implements OnChanges {
@Input() dossier!: Dossier;
states: DossierState[];
readonly stats$: Observable<DossierStats>;
private readonly _ngOnChanges$ = new BehaviorSubject<string>(undefined);
constructor(readonly dossierStatsService: DossierStatsService, readonly dossierStateService: DossierStateService) {
constructor(readonly dossierStatsService: DossierStatsService) {
this.stats$ = this._ngOnChanges$.pipe(switchMap(dossierId => this.dossierStatsService.watch$(dossierId)));
}
@ -28,9 +25,4 @@ export class TableItemComponent implements OnChanges, OnInit {
this._ngOnChanges$.next(this.dossier.dossierId);
}
}
async ngOnInit(): Promise<void> {
this.states = await firstValueFrom(this.dossierStateService.loadAllForTemplate('b3413395-8511-4a45-b0eb-b103012b4d8a'));
console.log(this.states);
}
}

2
apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/dossiers-listing.module.ts
View File

@ -13,6 +13,7 @@ import { TableItemComponent } from './components/table-item/table-item.component
import { SharedDossiersModule } from '../../shared/shared-dossiers.module';
import { DossierWorkloadColumnComponent } from './components/dossier-workload-column/dossier-workload-column.component';
import { DossiersListingStatusComponent } from './components/dossiers-listing-status/dossiers-listing-status.component';
import { DossierDocumentsStatusComponent } from './components/dossier-documents-status/dossier-documents-status.component';
const routes: Routes = [
{
@ -32,6 +33,7 @@ const routes: Routes = [
DossierWorkloadColumnComponent,
TableItemComponent,
DossiersListingStatusComponent,
DossierDocumentsStatusComponent,
],
providers: [ConfigService],
imports: [RouterModule.forChild(routes), CommonModule, SharedModule, SharedDossiersModule, IqserIconsModule, TranslateModule],

1
apps/red-ui/src/assets/i18n/en.json
View File

@ -1008,6 +1008,7 @@
"placeholder": "Enter Description"
},
"due-date": "Due Date",
"dossier-status": "Dossier Status",
"name": {
"label": "Dossier Name",
"placeholder": "Enter Name"