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

added delete only functionality

Browse Source
This commit is contained in:
Edi Cziszter 2022-02-14 13:16:19 +02:00
parent 408af93207
commit 5c6330fb4f
17 changed files with 98 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-state-dialog/add-edit-dossier-state-dialog.component.html
View File

@ -1,8 +1,8 @@
<section class="dialog">
<div
[translateParams]="{
type: data.dossierState ? 'edit' : 'create',
name: data.dossierState?.name
type: dossierState ? 'edit' : 'create',
name: dossierState?.name
}"
[translate]="'add-edit-dossier-state.title'"
class="dialog-header heading-l"
@ -21,23 +21,23 @@
</div>
<div class="iqser-input-group required">
<label translate="add-edit-dossier-state.form.description"></label>
<label translate="add-edit-dossier-state.form.color"></label>
<input
[placeholder]="'add-edit-dossier-state.form.description-placeholder' | translate"
[placeholder]="'add-edit-dossier-state.form.color-placeholder' | translate"
class="hex-color-input"
formControlName="description"
name="description"
formControlName="color"
name="color"
type="text"
/>
<div
(colorPickerChange)="form.get('description').setValue($event)"
[colorPicker]="form.get('description').value"
(colorPickerChange)="form.get('color').setValue($event)"
[colorPicker]="form.get('color').value"
[cpOutputFormat]="'hex'"
[style.background]="form.get('description').value"
[style.background]="form.get('color').value"
class="input-icon"
>
<mat-icon
*ngIf="!form.get('description').value || form.get('description').value?.length === 0"
*ngIf="!form.get('color').value || form.get('color').value?.length === 0"
svgIcon="red:color-picker"
></mat-icon>
</div>

25
apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-state-dialog/add-edit-dossier-state-dialog.component.ts
View File

@ -2,11 +2,11 @@ import { ChangeDetectionStrategy, Component, Inject, Injector } from '@angular/c
import { BaseDialogComponent } from '../../../../../../../../libs/common-ui/src';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { IDossierState } from '../../../../../../../../libs/red-domain/src/lib/dossier-state';
import { IDossierState } from '@red/domain';
interface DialogData {
dossierState: IDossierState;
dossierTemplateId: string;
readonly dossierState: IDossierState;
readonly dossierTemplateId: string;
}
@Component({
@ -16,30 +16,35 @@ interface DialogData {
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AddEditDossierStateDialogComponent extends BaseDialogComponent {
readonly dossierState: IDossierState;
readonly dossierTemplateId: string;
constructor(
private readonly _formBuilder: FormBuilder,
protected readonly _injector: Injector,
protected readonly _dialogRef: MatDialogRef<AddEditDossierStateDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: DialogData,
@Inject(MAT_DIALOG_DATA) public readonly data: DialogData,
) {
super(_injector, _dialogRef);
this.form = this._getForm(data.dossierState);
this.dossierState = data.dossierState;
this.dossierTemplateId = data.dossierTemplateId;
this.form = this.#getForm();
this.initialFormValue = this.form.getRawValue();
}
save(): void {
const dossierState: IDossierState = {
dossierStatusId: this.data.dossierState?.dossierStatusId,
dossierTemplateId: this.data.dossierTemplateId,
dossierStatusId: this.dossierState?.dossierStatusId,
dossierTemplateId: this.dossierTemplateId,
...this.form.getRawValue(),
};
this._dialogRef.close(dossierState);
}
private _getForm(dossierState: IDossierState): FormGroup {
#getForm(): FormGroup {
return this._formBuilder.group({
name: [dossierState?.name, Validators.required],
description: [dossierState?.description, Validators.required],
name: [this.dossierState?.name, Validators.required],
color: [this.dossierState?.color, Validators.required],
});
}
}

7
apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.html
View File

@ -16,7 +16,8 @@
[placeholder]="'confirm-delete-dossier-state.form.status-placeholder' | translate"
formControlName="replaceDossierStatusId"
>
<mat-option *ngFor="let state of data.otherStates" [value]="state.dossierStatusId">
<mat-option>{{ 'confirm-delete-dossier-state.form.status-placeholder' | translate }}</mat-option>
<mat-option *ngFor="let state of otherStates" [value]="state.dossierStatusId">
{{ state.name }}
</mat-option>
</mat-select>
@ -26,8 +27,8 @@
</div>
<div class="dialog-actions">
<button (click)="dialogRef.close(replaceDossierStatusId)" color="primary" [disabled]="!replaceDossierStatusId" mat-flat-button>
{{ 'confirm-delete-dossier-state.delete-replace' | translate }}
<button (click)="dialogRef.close(afterCloseValue)" color="primary" mat-flat-button>
{{ label | translate }}
</button>
<div (click)="dialogRef.close()" [translate]="'confirm-delete-dossier-state.cancel'" class="all-caps-label cancel"></div>
</div>

32
apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.ts
View File

@ -1,12 +1,12 @@
import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
import { IDossierState } from '../../../../../../../../libs/red-domain/src/lib/dossier-state';
import { IDossierState } from '@red/domain';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { FormBuilder, FormGroup } from '@angular/forms';
interface DialogData {
toBeDeletedState: IDossierState;
otherStates: IDossierState[];
dossierCount: number;
readonly toBeDeletedState: IDossierState;
readonly otherStates: IDossierState[];
readonly dossierCount: number;
}
@Component({
@ -17,19 +17,25 @@ interface DialogData {
})
export class ConfirmDeleteDossierStateDialogComponent {
readonly form: FormGroup;
readonly toBeDeletedState: IDossierState;
readonly otherStates: IDossierState[];
readonly dossierCount: number;
constructor(
private readonly _formBuilder: FormBuilder,
readonly dialogRef: MatDialogRef<ConfirmDeleteDossierStateDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: DialogData,
@Inject(MAT_DIALOG_DATA) public readonly data: DialogData,
) {
this.form = this._getForm();
this.toBeDeletedState = data.toBeDeletedState;
this.otherStates = data.otherStates;
this.dossierCount = data.dossierCount;
}
get translateArgs() {
return {
name: this.data.toBeDeletedState.name,
count: this.data.dossierCount,
name: this.toBeDeletedState.name,
count: this.dossierCount,
};
}
@ -37,6 +43,18 @@ export class ConfirmDeleteDossierStateDialogComponent {
return this.form.get('replaceDossierStatusId').value;
}
get label(): string {
return this.replaceDossierStatusId ? 'confirm-delete-dossier-state.delete-replace' : 'confirm-delete-dossier-state.delete';
}
get afterCloseValue(): string | true {
if (this.replaceDossierStatusId) {
return this.replaceDossierStatusId;
}
return true;
}
private _getForm(): FormGroup {
return this._formBuilder.group({
replaceDossierStatusId: [null],

19
apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.html
View File

@ -34,15 +34,14 @@
</div>
<div class="right-container">
<ng-container *ngIf="chartData">
<redaction-simple-doughnut-chart
[config]="chartData"
[radius]="80"
[strokeWidth]="15"
[subtitle]="'dossier-states-listing.chart.dossier-states' | translate"
[totalType]="'simpleLabel'"
></redaction-simple-doughnut-chart>
</ng-container>
<redaction-simple-doughnut-chart
*ngIf="chartData"
[config]="chartData"
[radius]="80"
[strokeWidth]="15"
[subtitle]="'dossier-states-listing.chart.dossier-states' | translate"
[totalType]="'simpleLabel'"
></redaction-simple-doughnut-chart>
</div>
</div>
</section>
@ -68,7 +67,7 @@
<div *ngIf="cast(entity) as state">
<div class="cell">
<div class="flex-align-items-center">
<div [style.background-color]="state.description" class="dossier-state-square"></div>
<div [style.background-color]="state.color" class="dossier-state-square"></div>
<div class="state-name">{{ state.name }}</div>
</div>
</div>

33
apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.ts
View File

@ -8,7 +8,7 @@ import {
TableColumnConfig,
Toaster,
} from '../../../../../../../../libs/common-ui/src';
import { DossierState, IDossierState } from '../../../../../../../../libs/red-domain/src/lib/dossier-state';
import { DossierState, IDossierState } from '@red/domain';
import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
import { DossiersService } from '../../../../services/entity-services/dossiers.service';
import { DossierStateService } from '../../../../services/entity-services/dossier-state.service';
@ -55,7 +55,7 @@ export class DossierStatesListingScreenComponent extends ListingComponent<Dossie
}
async ngOnInit(): Promise<void> {
await this._loadData();
await this.#loadData();
}
openAddEditStateDialog($event: MouseEvent, dossierState?: IDossierState) {
@ -64,7 +64,7 @@ export class DossierStatesListingScreenComponent extends ListingComponent<Dossie
dossierTemplateId: this._dossierTemplatesService.activeDossierTemplateId,
};
this._dialogService.openDialog('addEditDossierState', $event, data, async (newValue: IDossierState) => {
await this._createNewDossierStateAndRefreshView(newValue);
await this.#createNewDossierStateAndRefreshView(newValue);
});
}
@ -75,17 +75,22 @@ export class DossierStatesListingScreenComponent extends ListingComponent<Dossie
otherStates: this.entitiesService.all.filter(state => state.dossierStatusId !== dossierState.dossierStatusId),
dossierCount: dossierState.dossierCount,
};
this._dialogService.openDialog('deleteDossierState', $event, data, async (value: string) => {
this._dialogService.openDialog('deleteDossierState', $event, data, async (value: string | true) => {
if (value) {
await firstValueFrom(this.dossierStateService.deleteAndReplace(dossierState.dossierStatusId, value));
if (typeof value === 'string') {
await firstValueFrom(this.dossierStateService.deleteAndReplace(dossierState.dossierStatusId, value));
} else {
await firstValueFrom(this.dossierStateService.delete(dossierState.dossierStatusId));
}
}
await this._appStateService.refreshDossierTemplate(templateId);
await this._loadData();
await this.#loadData();
});
}
private async _createNewDossierStateAndRefreshView(newValue: IDossierState): Promise<void> {
async #createNewDossierStateAndRefreshView(newValue: IDossierState): Promise<void> {
this._loadingService.start();
await firstValueFrom(this.dossierStateService.setDossierState(newValue)).catch(error => {
if (error.status === HttpStatusCode.Conflict) {
this._toaster.error(_('dossier-states-listing.error.conflict'));
@ -94,33 +99,33 @@ export class DossierStatesListingScreenComponent extends ListingComponent<Dossie
}
});
await this._appStateService.refreshDossierTemplate(this._dossierTemplatesService.activeDossierTemplateId);
await this._loadData();
await this.#loadData();
}
private async _loadData(): Promise<void> {
async #loadData(): Promise<void> {
this._loadingService.start();
await firstValueFrom(this._dossiersService.loadAll());
try {
const templateId = this._dossierTemplatesService.activeDossierTemplateId;
const dossierStates = this.dossierStateService.all.filter(d => d.dossierTemplateId === templateId);
this._setStatesCount();
this.chartData = this._loadChartData();
this.#setStatesCount();
this.chartData = this.#loadChartData();
this.entitiesService.setEntities(dossierStates || []);
} catch (e) {}
this._loadingService.stop();
}
private _loadChartData(): DoughnutChartConfig[] {
#loadChartData(): DoughnutChartConfig[] {
const config: DoughnutChartConfig[] = [];
this.dossierStateService.all.forEach(state => {
config.push({ value: state.dossierCount, label: state.name, key: state.name, color: state.description });
config.push({ value: state.dossierCount, label: state.name, key: state.name, color: state.color });
});
return config;
}
private _setStatesCount(): void {
#setStatesCount(): void {
this.dossierStateService.all.forEach(
state => (state.dossierCount = this._dossiersService.getCountWithState(state.dossierStatusId)),
);

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

@ -65,7 +65,7 @@
>
<mat-option *ngFor="let state of states" [value]="state.dossierStatusId">
<div class="flex-align-items-center">
<redaction-small-chip [color]="state.description"></redaction-small-chip>
<redaction-small-chip [color]="state.color"></redaction-small-chip>
<div>{{ state.name }}</div>
</div>
</mat-option>

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

@ -1,7 +1,7 @@
import { Component, Input, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import * as moment from 'moment';
import { Dossier, IDossierRequest, IDossierTemplate } from '@red/domain';
import { Dossier, DossierState, IDossierRequest, IDossierTemplate } from '@red/domain';
import { EditDossierSaveResult, EditDossierSectionInterface } from '../edit-dossier-section.interface';
import { DossiersDialogService } from '../../../services/dossiers-dialog.service';
import { PermissionsService } from '@services/permissions.service';

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

@ -43,7 +43,7 @@ export class DossiersListingDetailsComponent {
const config: DoughnutChartConfig[] = [];
this._dossierStateService.all.forEach(state => {
state.dossierCount = this.dossiersService.getCountWithState(state.dossierStatusId);
config.push({ value: state.dossierCount, label: state.name, color: state.description });
config.push({ value: state.dossierCount, label: state.name, color: state.color });
});
const notAssignedLength = this.dossiersService.all.length - config.map(v => v.value).reduce((acc, val) => acc + val, 0);
config.push({

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

@ -1,9 +1,10 @@
<ng-container *ngIf="dossier.dossierStatusId">
<div class="flex-align-items-center dossier-status-container">
<div class="dossier-status-text">{{ currentState.name }}</div>
<redaction-small-chip [color]="currentState.description"></redaction-small-chip>
<redaction-small-chip [color]="currentState.color"></redaction-small-chip>
</div>
</ng-container>
<ng-container *ngIf="!dossier.dossierStatusId">
<div class="flex-align-items-center dossier-status-container">
<div class="dossier-status-text">No status assigned</div>

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

@ -1,7 +1,7 @@
import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/core';
import { Dossier, DossierStats } from '../../../../../../../../../../libs/red-domain/src';
import { DossierStateService } from '../../../../../../services/entity-services/dossier-state.service';
import { DossierState } from '../../../../../../../../../../libs/red-domain/src/lib/dossier-state';
import { DossierState } from '@red/domain';
@Component({
selector: 'redaction-dossiers-listing-status',

4
apps/red-ui/src/app/services/entity-services/dossier-state.service.ts
View File

@ -1,6 +1,6 @@
import { Injectable, Injector } from '@angular/core';
import { EntitiesService, mapEach, RequiredParam, Validate } from '../../../../../../libs/common-ui/src';
import { DossierState, IDossierState } from '../../../../../../libs/red-domain/src/lib/dossier-state';
import { EntitiesService, mapEach, RequiredParam, Validate } from '@iqser/common-ui';
import { DossierState, IDossierState } from '@red/domain';
import { forkJoin, Observable, switchMap } from 'rxjs';
import { DossierTemplatesService } from '@services/entity-services/dossier-templates.service';
import { map, tap } from 'rxjs/operators';

12
apps/red-ui/src/app/services/entity-services/dossiers.service.ts
View File

@ -62,17 +62,7 @@ export class DossiersService extends EntitiesService<Dossier, IDossier> {
}
loadAllIfChanged(): Observable<ChangesDetails> {
return this.hasChangesDetails$().pipe(
catchError(err => {
console.log('aaa', err);
return of(err);
}),
switchMap(changes => this.loadAll().pipe(mapTo(changes))),
catchError(err => {
console.log('bbb', err);
return of(err);
}),
);
return this.hasChangesDetails$().pipe(switchMap(changes => this.loadAll().pipe(mapTo(changes))));
}
hasChangesDetails$(): Observable<ChangesDetails> {

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

@ -73,8 +73,8 @@
},
"add-edit-dossier-state": {
"form": {
"description": "Hex Color",
"description-placeholder": "#",
"color": "Hex Color",
"color-placeholder": "#",
"name": "Status Name",
"name-placeholder": "Enter Name"
},
@ -411,6 +411,7 @@
"confirm-delete-dossier-state": {
"cancel": "Cancel",
"delete-replace": "Delete and Replace",
"delete": "Delete only",
"form": {
"status": "Replace Status",
"status-placeholder": "Choose another status"

1
libs/red-domain/src/index.ts
View File

@ -19,3 +19,4 @@ export * from './lib/configuration';
export * from './lib/signature';
export * from './lib/legal-basis';
export * from './lib/dossier-stats';
export * from './lib/dossier-state';

2
libs/red-domain/src/lib/dossier-state/dossier-state.model.ts
View File

@ -6,6 +6,7 @@ export class DossierState implements IDossierState, IListable {
readonly dossierStatusId: string;
readonly dossierTemplateId: string;
readonly name: string;
readonly color: string;
dossierCount?: number;
constructor(dossierState: IDossierState) {
@ -13,6 +14,7 @@ export class DossierState implements IDossierState, IListable {
this.dossierStatusId = dossierState.dossierStatusId;
this.dossierTemplateId = dossierState.dossierTemplateId;
this.name = dossierState.name;
this.color = dossierState.color;
this.dossierCount = dossierState.dossierCount;
}

1
libs/red-domain/src/lib/dossier-state/dossier-state.ts
View File

@ -3,5 +3,6 @@ export interface IDossierState {
dossierStatusId: string;
dossierTemplateId: string;
name: string;
color: string;
dossierCount?: number;
}