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

RED-3800: dossier states listing screen as module

Browse Source
This commit is contained in:
Dan Percic 2023-03-15 22:40:16 +02:00
parent d35b38b49f
commit 08311965ab
17 changed files with 186 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/red-ui/src/app/modules/admin/admin-routing.module.ts
View File

@ -17,7 +17,6 @@ import { DossierTemplatesGuard } from '@guards/dossier-templates.guard';
import { DOSSIER_TEMPLATE_ID, ENTITY_TYPE } from '@red/domain';
import { DossierTemplateExistsGuard } from '@guards/dossier-template-exists.guard';
import { EntityExistsGuard } from '@guards/entity-exists-guard.service';
import { DossierStatesListingScreenComponent } from './screens/dossier-states-listing/dossier-states-listing-screen.component';
import { BaseEntityScreenComponent } from './base-entity-screen/base-entity-screen.component';
import { PermissionsGuard } from '@guards/permissions-guard';
import { ROLES } from '@users/roles';
@ -98,7 +97,8 @@ const dossierTemplateIdRoutes: IqserRoutes = [
},
{
path: 'dossier-states',
component: DossierStatesListingScreenComponent,
loadChildren: () =>
import('./screens/dossier-states-listing/dossier-states-listing.module').then(m => m.DossierStatesListingModule),
canActivate: [CompositeRouteGuard],
data: {
routeGuards: [IqserAuthGuard, RedRoleGuard],

6
apps/red-ui/src/app/modules/admin/admin.module.ts
View File

@ -34,10 +34,7 @@ import { GeneralConfigFormComponent } from './screens/general-config/general-con
import { SmtpFormComponent } from './screens/general-config/smtp-form/smtp-form.component';
import { FileAttributesConfigurationsDialogComponent } from './dialogs/file-attributes-configurations-dialog/file-attributes-configurations-dialog.component';
import { BaseDossierTemplateScreenComponent } from './base-dossier-templates-screen/base-dossier-template-screen.component';
import { DossierStatesListingScreenComponent } from './screens/dossier-states-listing/dossier-states-listing-screen.component';
import { AddEditDossierStateDialogComponent } from './dialogs/add-edit-dossier-state-dialog/add-edit-dossier-state-dialog.component';
import { A11yModule } from '@angular/cdk/a11y';
import { ConfirmDeleteDossierStateDialogComponent } from './dialogs/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component';
import { BaseEntityScreenComponent } from './base-entity-screen/base-entity-screen.component';
import { AdminSideNavComponent } from './shared/components/admin-side-nav/admin-side-nav.component';
import { SystemPreferencesFormComponent } from './screens/general-config/system-preferences-form/system-preferences-form.component';
@ -72,8 +69,6 @@ const dialogs = [
FileAttributesCsvImportDialogComponent,
AddEditDossierAttributeDialogComponent,
UploadDictionaryDialogComponent,
AddEditDossierStateDialogComponent,
ConfirmDeleteDossierStateDialogComponent,
ConfigureCertificateDialogComponent,
AuditInfoDialogComponent,
];
@ -87,7 +82,6 @@ const screens = [
UserListingScreenComponent,
GeneralConfigScreenComponent,
DossierAttributesListingScreenComponent,
DossierStatesListingScreenComponent,
];
const components = [

3
apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-state-dialog/add-edit-dossier-state-dialog.component.html → apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/add-edit-dossier-state-dialog/add-edit-dossier-state-dialog.component.html
View File

@ -51,8 +51,7 @@
[label]="'add-edit-dossier-state.save' | translate"
[submit]="true"
[type]="iconButtonTypes.primary"
>
</iqser-icon-button>
></iqser-icon-button>
</div>
</form>

0
apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-state-dialog/add-edit-dossier-state-dialog.component.scss → apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/add-edit-dossier-state-dialog/add-edit-dossier-state-dialog.component.scss
View File

6
apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-state-dialog/add-edit-dossier-state-dialog.component.ts → apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/add-edit-dossier-state-dialog/add-edit-dossier-state-dialog.component.ts
View File

@ -6,8 +6,8 @@ import { DossierStatesService } from '@services/entity-services/dossier-states.s
import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
interface DialogData {
readonly dossierState: IDossierState;
export interface AddEditDossierStateDialogData {
readonly dossierState?: IDossierState;
readonly dossierTemplateId: string;
}
@ -25,7 +25,7 @@ export class AddEditDossierStateDialogComponent extends BaseDialogComponent {
constructor(
private readonly _dossierStatesService: DossierStatesService,
protected readonly _dialogRef: MatDialogRef<AddEditDossierStateDialogComponent>,
@Inject(MAT_DIALOG_DATA) readonly data: DialogData,
@Inject(MAT_DIALOG_DATA) readonly data: AddEditDossierStateDialogData,
) {
super(_dialogRef, !!data.dossierState);
this.form = this.#getForm();

0
apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.html → apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.html
View File

0
apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.scss → apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.scss
View File

7
apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.ts → apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.ts
View File

@ -1,4 +1,4 @@
import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
import { Component, Inject } from '@angular/core';
import { DossierState } from '@red/domain';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { FormBuilder } from '@angular/forms';
@ -9,7 +9,7 @@ import { IconButtonTypes, LoadingService, Toaster } from '@iqser/common-ui';
import { ActiveDossiersService } from '@services/dossiers/active-dossiers.service';
import { ArchivedDossiersService } from '@services/dossiers/archived-dossiers.service';
interface DialogData {
export interface ConfirmDeleteDossierStateDialogData {
readonly toBeDeletedState: DossierState;
readonly otherStates: DossierState[];
readonly dossierCount: number;
@ -18,7 +18,6 @@ interface DialogData {
@Component({
templateUrl: './confirm-delete-dossier-state-dialog.component.html',
styleUrls: ['./confirm-delete-dossier-state-dialog.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ConfirmDeleteDossierStateDialogComponent {
readonly iconButtonTypes = IconButtonTypes;
@ -36,7 +35,7 @@ export class ConfirmDeleteDossierStateDialogComponent {
private readonly _dialogRef: MatDialogRef<ConfirmDeleteDossierStateDialogComponent>,
private readonly _activeDossiersService: ActiveDossiersService,
private readonly _archivedDossiersService: ArchivedDossiersService,
@Inject(MAT_DIALOG_DATA) readonly data: DialogData,
@Inject(MAT_DIALOG_DATA) readonly data: ConfirmDeleteDossierStateDialogData,
) {}
get label(): string {

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

@ -52,7 +52,7 @@
></iqser-input-with-action>
<iqser-icon-button
(action)="openAddEditStateDialog($event)"
(action)="openAddStateDialog($event)"
*ngIf="permissionsService.canPerformDossierStatesActions()"
[iqserHelpMode]="'create_new_dossier_state'"
[label]="'dossier-states-listing.add-new' | translate"
@ -63,40 +63,5 @@
</ng-template>
<ng-template #tableItemTemplate let-entity="entity">
<div *ngIf="cast(entity) as state">
<div class="cell">
<div class="flex-align-items-center">
<div [style.background-color]="state.color" class="dossier-state-square"></div>
<div [matTooltip]="state.name" class="state-name clamp-1" matTooltipPosition="above">{{ state.name }}</div>
</div>
</div>
<div class="cell center">
<span class="small-label">{{ state.rank }}</span>
</div>
<div class="cell center">
<span class="small-label">{{ state.dossierCount }}</span>
</div>
<div class="cell">
<div *ngIf="permissionsService.canPerformDossierStatesActions()" class="action-buttons">
<div [iqserHelpMode]="'edit_delete_dossier_state'">
<iqser-circle-button
(action)="openAddEditStateDialog($event, state)"
[tooltip]="'dossier-states-listing.action.edit' | translate"
[type]="circleButtonTypes.dark"
icon="iqser:edit"
></iqser-circle-button>
<iqser-circle-button
(action)="openConfirmDeleteStateDialog($event, state)"
[tooltip]="'dossier-states-listing.action.delete' | translate"
[type]="circleButtonTypes.dark"
icon="iqser:trash"
></iqser-circle-button>
</div>
</div>
</div>
</div>
<redaction-dossier-states-table-item [state]="entity"></redaction-dossier-states-table-item>
</ng-template>

4
apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen/dossier-states-listing-screen.component.scss Normal file
View File

@ -0,0 +1,4 @@
.right-container {
padding: 50px 26px 0;
width: 250px;
}

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

@ -1,6 +1,6 @@
import { Component, OnDestroy, OnInit } from '@angular/core';
import {
CircleButtonTypes,
defaultDialogConfig,
getParam,
IconButtonTypes,
ListingComponent,
@ -8,14 +8,18 @@ import {
SortingOrders,
TableColumnConfig,
} from '@iqser/common-ui';
import { type DonutChartConfig, DOSSIER_TEMPLATE_ID, type DossierState, type IDossierState } from '@red/domain';
import { type DonutChartConfig, DOSSIER_TEMPLATE_ID, type DossierState } from '@red/domain';
import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
import { firstValueFrom, Observable } from 'rxjs';
import { AdminDialogService } from '../../services/admin-dialog.service';
import { DossierStatesMapService } from '@services/entity-services/dossier-states-map.service';
import { map, tap } from 'rxjs/operators';
import { DossierStatesService } from '@services/entity-services/dossier-states.service';
import { PermissionsService } from '@services/permissions.service';
import { MatDialog } from '@angular/material/dialog';
import {
AddEditDossierStateDialogComponent,
AddEditDossierStateDialogData,
} from '../add-edit-dossier-state-dialog/add-edit-dossier-state-dialog.component';
@Component({
templateUrl: './dossier-states-listing-screen.component.html',
@ -24,7 +28,6 @@ import { PermissionsService } from '@services/permissions.service';
})
export class DossierStatesListingScreenComponent extends ListingComponent<DossierState> implements OnInit, OnDestroy {
readonly iconButtonTypes = IconButtonTypes;
readonly circleButtonTypes = CircleButtonTypes;
readonly tableHeaderLabel = _('dossier-states-listing.table-header.title');
readonly tableColumnConfigs: TableColumnConfig<DossierState>[] = [
{ label: _('dossier-states-listing.table-col-names.name'), sortByKey: 'name', width: '3fr' },
@ -35,7 +38,7 @@ export class DossierStatesListingScreenComponent extends ListingComponent<Dossie
readonly #dossierTemplateId = getParam(DOSSIER_TEMPLATE_ID);
constructor(
private readonly _dialogService: AdminDialogService,
private readonly _dialog: MatDialog,
private readonly _dossierStatesMapService: DossierStatesMapService,
private readonly _dossierStatesService: DossierStatesService,
readonly permissionsService: PermissionsService,
@ -55,21 +58,15 @@ export class DossierStatesListingScreenComponent extends ListingComponent<Dossie
await firstValueFrom(this._dossierStatesService.loadAllForTemplate(this.#dossierTemplateId));
}
openAddEditStateDialog($event: MouseEvent, dossierState?: IDossierState) {
const data = {
dossierState,
dossierTemplateId: this.#dossierTemplateId,
};
this._dialogService.openDialog('addEditDossierState', $event, data);
}
openAddStateDialog($event: MouseEvent) {
$event.stopPropagation();
openConfirmDeleteStateDialog($event: MouseEvent, dossierState: DossierState) {
const data = {
toBeDeletedState: dossierState,
otherStates: this.entitiesService.all.filter(state => state.id !== dossierState.id),
dossierCount: dossierState.dossierCount,
};
this._dialogService.openDialog('deleteDossierState', $event, data);
this._dialog.open<AddEditDossierStateDialogComponent, AddEditDossierStateDialogData>(AddEditDossierStateDialogComponent, {
...defaultDialogConfig,
data: {
dossierTemplateId: this.#dossierTemplateId,
},
});
}
#chartConfig(states: DossierState[]): DonutChartConfig[] {

62
apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing.module.ts Normal file
View File

@ -0,0 +1,62 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DossierStatesListingScreenComponent } from './dossier-states-listing-screen/dossier-states-listing-screen.component';
import { DossierStatesTableItemComponent } from './dossier-states-table-item/dossier-states-table-item.component';
import { RouterModule } from '@angular/router';
import {
CircleButtonComponent,
IconButtonComponent,
InputWithActionComponent,
IqserHelpModeModule,
IqserListingModule,
} from '@iqser/common-ui';
import { MatTooltipModule } from '@angular/material/tooltip';
import { TranslateModule } from '@ngx-translate/core';
import { DonutChartComponent } from '@shared/components/donut-chart/donut-chart.component';
import { AdminSideNavComponent } from '../../shared/components/admin-side-nav/admin-side-nav.component';
import { DossierTemplateActionsComponent } from '../../shared/components/dossier-template-actions/dossier-template-actions.component';
import { DossierTemplateBreadcrumbsComponent } from '../../shared/components/dossier-template-breadcrumbs/dossier-template-breadcrumbs.component';
import { AddEditDossierStateDialogComponent } from './add-edit-dossier-state-dialog/add-edit-dossier-state-dialog.component';
import { ReactiveFormsModule } from '@angular/forms';
import { ColorPickerModule } from 'ngx-color-picker';
import { MatIconModule } from '@angular/material/icon';
import { ConfirmDeleteDossierStateDialogComponent } from './confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component';
import { MatLegacyCheckboxModule } from '@angular/material/legacy-checkbox';
import { MatSelectModule } from '@angular/material/select';
import { MatDialogModule } from '@angular/material/dialog';
@NgModule({
declarations: [
DossierStatesListingScreenComponent,
DossierStatesTableItemComponent,
AddEditDossierStateDialogComponent,
ConfirmDeleteDossierStateDialogComponent,
],
imports: [
CommonModule,
RouterModule.forChild([
{
path: '',
component: DossierStatesListingScreenComponent,
},
]),
MatDialogModule,
CircleButtonComponent,
IqserHelpModeModule,
MatTooltipModule,
IconButtonComponent,
TranslateModule,
IqserListingModule,
DonutChartComponent,
AdminSideNavComponent,
DossierTemplateActionsComponent,
InputWithActionComponent,
DossierTemplateBreadcrumbsComponent,
ReactiveFormsModule,
ColorPickerModule,
MatIconModule,
MatLegacyCheckboxModule,
MatSelectModule,
],
})
export class DossierStatesListingModule {}

34
apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-table-item/dossier-states-table-item.component.html Normal file
View File

@ -0,0 +1,34 @@
<div class="cell">
<div class="flex-align-items-center">
<div [style.background-color]="state.color" class="dossier-state-square"></div>
<div [matTooltip]="state.name" class="state-name clamp-1" matTooltipPosition="above">{{ state.name }}</div>
</div>
</div>
<div class="cell center">
<span class="small-label">{{ state.rank }}</span>
</div>
<div class="cell center">
<span class="small-label">{{ state.dossierCount }}</span>
</div>
<div class="cell">
<div *ngIf="permissionsService.canPerformDossierStatesActions()" class="action-buttons">
<div [iqserHelpMode]="'edit_delete_dossier_state'">
<iqser-circle-button
(action)="openEditStateDialog($event, state)"
[tooltip]="'dossier-states-listing.action.edit' | translate"
[type]="circleButtonTypes.dark"
icon="iqser:edit"
></iqser-circle-button>
<iqser-circle-button
(action)="openConfirmDeleteStateDialog($event, state)"
[tooltip]="'dossier-states-listing.action.delete' | translate"
[type]="circleButtonTypes.dark"
icon="iqser:trash"
></iqser-circle-button>
</div>
</div>
</div>

5
apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.scss → apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-table-item/dossier-states-table-item.component.scss
View File

@ -12,11 +12,6 @@
color: var(--iqser-text);
}
.right-container {
padding: 50px 26px 0;
width: 250px;
}
.action-buttons > div {
display: flex;
}

57
apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-table-item/dossier-states-table-item.component.ts Normal file
View File

@ -0,0 +1,57 @@
import { Component, inject, Input } from '@angular/core';
import { CircleButtonTypes, defaultDialogConfig, EntitiesService } from '@iqser/common-ui';
import { DossierState, IDossierState } from '@red/domain';
import { PermissionsService } from '@services/permissions.service';
import {
AddEditDossierStateDialogComponent,
AddEditDossierStateDialogData,
} from '../add-edit-dossier-state-dialog/add-edit-dossier-state-dialog.component';
import { MatDialog } from '@angular/material/dialog';
import {
ConfirmDeleteDossierStateDialogComponent,
ConfirmDeleteDossierStateDialogData,
} from '../confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component';
@Component({
selector: 'redaction-dossier-states-table-item',
templateUrl: './dossier-states-table-item.component.html',
styleUrls: ['./dossier-states-table-item.component.scss'],
})
export class DossierStatesTableItemComponent {
@Input() state: DossierState;
readonly circleButtonTypes = CircleButtonTypes;
readonly permissionsService = inject(PermissionsService);
readonly #dialog = inject(MatDialog);
readonly #entitiesService = inject(EntitiesService);
openConfirmDeleteStateDialog($event: MouseEvent, dossierState: DossierState) {
$event.stopPropagation();
const data: ConfirmDeleteDossierStateDialogData = {
toBeDeletedState: dossierState,
otherStates: this.#entitiesService.all.filter(s => s.id !== dossierState.id),
dossierCount: dossierState.dossierCount,
};
this.#dialog.open<ConfirmDeleteDossierStateDialogComponent, ConfirmDeleteDossierStateDialogData>(
ConfirmDeleteDossierStateDialogComponent,
{
...defaultDialogConfig,
data,
},
);
}
openEditStateDialog($event: MouseEvent, dossierState: IDossierState) {
$event.stopPropagation();
this.#dialog.open<AddEditDossierStateDialogComponent, AddEditDossierStateDialogData>(AddEditDossierStateDialogComponent, {
...defaultDialogConfig,
data: {
dossierState,
dossierTemplateId: dossierState.dossierTemplateId,
},
});
}
}

10
apps/red-ui/src/app/modules/admin/services/admin-dialog.service.ts
View File

@ -20,8 +20,6 @@ import {
} from '@iqser/common-ui';
import { UploadDictionaryDialogComponent } from '../dialogs/upload-dictionary-dialog/upload-dictionary-dialog.component';
import { FileAttributesConfigurationsDialogComponent } from '../dialogs/file-attributes-configurations-dialog/file-attributes-configurations-dialog.component';
import { AddEditDossierStateDialogComponent } from '../dialogs/add-edit-dossier-state-dialog/add-edit-dossier-state-dialog.component';
import { ConfirmDeleteDossierStateDialogComponent } from '../dialogs/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component';
import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
import { firstValueFrom, forkJoin } from 'rxjs';
import { ActiveDossiersService } from '@services/dossiers/active-dossiers.service';
@ -44,8 +42,6 @@ type DialogType =
| 'auditInfo'
| 'addEditDossierAttribute'
| 'uploadDictionary'
| 'addEditDossierState'
| 'deleteDossierState'
| 'configureCertificate';
@Injectable()
@ -93,12 +89,6 @@ export class AdminDialogService extends DialogService<DialogType> {
uploadDictionary: {
component: UploadDictionaryDialogComponent,
},
addEditDossierState: {
component: AddEditDossierStateDialogComponent,
},
deleteDossierState: {
component: ConfirmDeleteDossierStateDialogComponent,
},
configureCertificate: {
component: ConfigureCertificateDialogComponent,
dialogConfig: { disableClose: false, maxHeight: '100vh' },

4
apps/red-ui/src/assets/config/config.json
View File

@ -1,7 +1,7 @@
{
"ADMIN_CONTACT_NAME": null,
"ADMIN_CONTACT_URL": null,
"API_URL": "https://dev-08.iqser.cloud/redaction-gateway-v1",
"API_URL": "https://dev-04.iqser.cloud/redaction-gateway-v1",
"APP_NAME": "RedactManager",
"AUTO_READ_TIME": 3,
"BACKEND_APP_VERSION": "4.4.40",
@ -11,7 +11,7 @@
"MAX_RETRIES_ON_SERVER_ERROR": 3,
"OAUTH_CLIENT_ID": "redaction",
"OAUTH_IDP_HINT": null,
"OAUTH_URL": "https://dev-08.iqser.cloud/auth/realms/redaction",
"OAUTH_URL": "https://dev-04.iqser.cloud/auth/realms/redaction",
"RECENT_PERIOD_IN_HOURS": 24,
"SELECTION_MODE": "structural",
"MANUAL_BASE_URL": "https://docs.redactmanager.com/preview",