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

RED-3800: create dossier attributes listing module

Browse Source
This commit is contained in:
Dan Percic 2023-03-21 00:34:42 +02:00
parent 842393319d
commit 2fe3ff1791
9 changed files with 122 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,7 +8,6 @@ import { UserListingScreenComponent } from './screens/user-listing/user-listing-
import { DigitalSignatureScreenComponent } from './screens/digital-signature/digital-signature-screen.component';
import { AuditScreenComponent } from './screens/audit/audit-screen.component';
import { RouterModule } from '@angular/router';
import { DossierAttributesListingScreenComponent } from './screens/dossier-attributes-listing/dossier-attributes-listing-screen.component';
import { GeneralConfigScreenComponent } from './screens/general-config/general-config-screen.component';
import { BaseAdminScreenComponent } from './base-admin-screen/base-admin-screen.component';
import { BaseDossierTemplateScreenComponent } from './base-dossier-templates-screen/base-dossier-template-screen.component';
@ -90,7 +89,9 @@ const dossierTemplateIdRoutes: IqserRoutes = [
},
{
path: 'dossier-attributes',
component: DossierAttributesListingScreenComponent,
component: BaseDossierTemplateScreenComponent,
loadChildren: () =>
import('./screens/dossier-attributes-listing/dossier-attributes-listing.module').then(m => m.DossierAttributesListingModule),
canActivate: [CompositeRouteGuard],
data: {
routeGuards: [IqserAuthGuard, RedRoleGuard],

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

@ -18,8 +18,6 @@ import { AddEditUserDialogComponent } from './dialogs/add-edit-user-dialog/add-e
import { UsersStatsComponent } from './components/users-stats/users-stats.component';
import { ResetPasswordComponent } from './dialogs/add-edit-user-dialog/reset-password/reset-password.component';
import { UserDetailsComponent } from './dialogs/add-edit-user-dialog/user-details/user-details.component';
import { AddEditDossierAttributeDialogComponent } from './dialogs/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component';
import { DossierAttributesListingScreenComponent } from './screens/dossier-attributes-listing/dossier-attributes-listing-screen.component';
import { AuditService } from './services/audit.service';
import { DigitalSignatureService } from './services/digital-signature.service';
import { BaseAdminScreenComponent } from './base-admin-screen/base-admin-screen.component';
@ -64,7 +62,6 @@ const dialogs = [
EditColorDialogComponent,
SmtpAuthDialogComponent,
AddEditUserDialogComponent,
AddEditDossierAttributeDialogComponent,
UploadDictionaryDialogComponent,
ConfigureCertificateDialogComponent,
AuditInfoDialogComponent,
@ -77,7 +74,6 @@ const screens = [
DigitalSignatureScreenComponent,
UserListingScreenComponent,
GeneralConfigScreenComponent,
DossierAttributesListingScreenComponent,
];
const components = [

1
apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.html → apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.html
View File

@ -29,6 +29,7 @@
</mat-form-field>
</div>
</div>
<div class="dialog-actions">
<iqser-icon-button
(action)="save()"

5
apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.scss Normal file
View File

@ -0,0 +1,5 @@
@use 'common-mixins';
.dialog-header {
@include common-mixins.line-clamp(1);
}

51
apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.ts → apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.ts
View File

@ -1,20 +1,36 @@
import { Component, HostListener, Inject, OnDestroy } from '@angular/core';
import { UntypedFormGroup, Validators } from '@angular/forms';
import { ReactiveFormsModule, Validators } from '@angular/forms';
import { DossierAttributeConfigTypes, FileAttributeConfigTypes, IDossierAttributeConfig } from '@red/domain';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { BaseDialogComponent, IqserEventTarget } from '@iqser/common-ui';
import { BaseDialogComponent, CircleButtonComponent, IconButtonComponent, IqserEventTarget } from '@iqser/common-ui';
import { HttpErrorResponse } from '@angular/common/http';
import { DossierAttributesService } from '@services/entity-services/dossier-attributes.service';
import { dossierAttributeTypesTranslations } from '@translations/dossier-attribute-types-translations';
import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
import { TranslateModule } from '@ngx-translate/core';
import { NgForOf, NgIf } from '@angular/common';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatSelectModule } from '@angular/material/select';
export interface AddEditDossierAttributeDialogData {
readonly dossierAttribute: IDossierAttributeConfig;
dossierTemplateId: string;
readonly dossierTemplateId: string;
}
@Component({
templateUrl: './add-edit-dossier-attribute-dialog.component.html',
styleUrls: ['./add-edit-dossier-attribute-dialog.component.scss'],
standalone: true,
imports: [
TranslateModule,
ReactiveFormsModule,
NgIf,
MatFormFieldModule,
MatSelectModule,
NgForOf,
IconButtonComponent,
CircleButtonComponent,
],
})
export class AddEditDossierAttributeDialogComponent extends BaseDialogComponent implements OnDestroy {
readonly dossierAttribute = this.data.dossierAttribute;
@ -31,7 +47,7 @@ export class AddEditDossierAttributeDialogComponent extends BaseDialogComponent
@Inject(MAT_DIALOG_DATA) readonly data: AddEditDossierAttributeDialogData,
) {
super(_dialogRef, !!data.dossierAttribute);
this.form = this._getForm(this.dossierAttribute);
this.form = this.#form;
this.initialFormValue = this.form.getRawValue();
}
@ -49,6 +65,20 @@ export class AddEditDossierAttributeDialogComponent extends BaseDialogComponent
return false;
}
get #form() {
const dossierAttribute = this.data.dossierAttribute;
return this._formBuilder.group({
label: [dossierAttribute?.label, Validators.required],
...(!!dossierAttribute && {
placeholder: {
value: dossierAttribute.placeholder,
disabled: true,
},
}),
type: [dossierAttribute?.type || FileAttributeConfigTypes.TEXT, Validators.required],
});
}
async save() {
this._loadingService.start();
@ -77,17 +107,4 @@ export class AddEditDossierAttributeDialogComponent extends BaseDialogComponent
await this.save();
}
}
private _getForm(dossierAttribute: IDossierAttributeConfig): UntypedFormGroup {
return this._formBuilder.group({
label: [dossierAttribute?.label, Validators.required],
...(!!dossierAttribute && {
placeholder: {
value: dossierAttribute.placeholder,
disabled: true,
},
}),
type: [dossierAttribute?.type || FileAttributeConfigTypes.TEXT, Validators.required],
});
}
}

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

@ -1,42 +1,19 @@
<section>
<div class="page-header">
<redaction-dossier-template-breadcrumbs class="flex-1"></redaction-dossier-template-breadcrumbs>
<div class="actions flex-1">
<redaction-dossier-template-actions></redaction-dossier-template-actions>
<iqser-circle-button
[routerLink]="['../..']"
[tooltip]="'common.close' | translate"
icon="iqser:close"
tooltipPosition="below"
></iqser-circle-button>
</div>
</div>
<div class="content-inner">
<div class="overlay-shadow"></div>
<redaction-admin-side-nav type="dossierTemplates"></redaction-admin-side-nav>
<div class="content-container">
<iqser-table
(noDataAction)="openAddEditAttributeDialog()"
[bulkActions]="bulkActions"
[headerTemplate]="headerTemplate"
[itemSize]="50"
[noDataButtonLabel]="'dossier-attributes-listing.no-data.action' | translate"
[noDataText]="'dossier-attributes-listing.no-data.title' | translate"
[noMatchText]="'dossier-attributes-listing.no-match.title' | translate"
[selectionEnabled]="canEditDossierAttributes"
[showNoDataButton]="canEditDossierAttributes"
[tableColumnConfigs]="tableColumnConfigs"
emptyColumnWidth="1fr"
noDataIcon="red:attribute"
></iqser-table>
</div>
</div>
</section>
<div class="content-container">
<iqser-table
(noDataAction)="openAddEditAttributeDialog()"
[bulkActions]="bulkActions"
[headerTemplate]="headerTemplate"
[itemSize]="50"
[noDataButtonLabel]="'dossier-attributes-listing.no-data.action' | translate"
[noDataText]="'dossier-attributes-listing.no-data.title' | translate"
[noMatchText]="'dossier-attributes-listing.no-match.title' | translate"
[selectionEnabled]="canEditDossierAttributes"
[showNoDataButton]="canEditDossierAttributes"
[tableColumnConfigs]="tableColumnConfigs"
emptyColumnWidth="1fr"
noDataIcon="red:attribute"
></iqser-table>
</div>
<ng-template #bulkActions>
<iqser-circle-button
@ -73,6 +50,7 @@
</ul>
</ng-template>
<!--TODO: move to a separate component-->
<ng-template #tableItemTemplate let-entity="entity">
<div *ngIf="cast(entity) as attribute">
<div [matTooltip]="attribute.label" class="cell" matTooltipPosition="above">

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

@ -1,6 +1,7 @@
import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
import {
CircleButtonTypes,
defaultDialogConfig,
getCurrentUser,
getParam,
IconButtonTypes,
@ -16,6 +17,11 @@ import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
import { DOSSIER_TEMPLATE_ID, DossierAttributeConfig, IDossierAttributeConfig, User } from '@red/domain';
import { firstValueFrom } from 'rxjs';
import { PermissionsService } from '@services/permissions.service';
import { MatDialog } from '@angular/material/dialog';
import {
AddEditDossierAttributeDialogComponent,
AddEditDossierAttributeDialogData,
} from './add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component';
@Component({
templateUrl: './dossier-attributes-listing-screen.component.html',
@ -44,13 +50,14 @@ export class DossierAttributesListingScreenComponent extends ListingComponent<Do
readonly permissionsService: PermissionsService,
private readonly _loadingService: LoadingService,
private readonly _dialogService: AdminDialogService,
private readonly _dialog: MatDialog,
private readonly _dossierAttributesService: DossierAttributesService,
) {
super();
}
async ngOnInit(): Promise<void> {
await this._loadData();
await this.#loadData();
}
async openConfirmDeleteAttributeDialog($event: MouseEvent, attributes: DossierAttributeConfig[] = this.listingService.selected) {
@ -58,17 +65,30 @@ export class DossierAttributesListingScreenComponent extends ListingComponent<Do
this._loadingService.start();
const ids = attributes.map(a => a.id);
await firstValueFrom(this._dossierAttributesService.delete(ids, this.#dossierTemplateId));
await this._loadData();
await this.#loadData();
});
}
openAddEditAttributeDialog(dossierAttribute?: IDossierAttributeConfig) {
async openAddEditAttributeDialog(dossierAttribute?: IDossierAttributeConfig) {
const dossierTemplateId = this.#dossierTemplateId;
this._dialogService.openDialog('addEditDossierAttribute', { dossierAttribute, dossierTemplateId }, async () => this._loadData());
const ref = this._dialog.open<AddEditDossierAttributeDialogComponent, AddEditDossierAttributeDialogData, boolean>(
AddEditDossierAttributeDialogComponent,
{
...defaultDialogConfig,
autoFocus: true,
data: { dossierAttribute, dossierTemplateId },
},
);
const result = await firstValueFrom(ref.afterClosed());
if (result) {
await this.#loadData();
}
}
private async _loadData() {
async #loadData() {
this._loadingService.start();
await firstValueFrom(this._dossierAttributesService.loadAll(this.#dossierTemplateId));
this._loadingService.stop();

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

@ -0,0 +1,37 @@
import { NgModule } from '@angular/core';
import { DossierAttributesListingScreenComponent } from './dossier-attributes-listing-screen.component';
import { CommonModule } from '@angular/common';
import {
CircleButtonComponent,
IconButtonComponent,
InputWithActionComponent,
IqserHelpModeModule,
IqserListingModule,
IqserRoutes,
} from '@iqser/common-ui';
import { RouterModule } from '@angular/router';
import { TranslateModule } from '@ngx-translate/core';
import { MatTooltipModule } from '@angular/material/tooltip';
const routes: IqserRoutes = [
{
path: '',
component: DossierAttributesListingScreenComponent,
},
];
@NgModule({
declarations: [DossierAttributesListingScreenComponent],
imports: [
CommonModule,
RouterModule.forChild(routes),
TranslateModule,
CircleButtonComponent,
InputWithActionComponent,
IconButtonComponent,
IqserHelpModeModule,
MatTooltipModule,
IqserListingModule,
],
})
export class DossierAttributesListingModule {}

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

@ -5,7 +5,6 @@ import { AddEditCloneDossierTemplateDialogComponent } from '../dialogs/add-edit-
import { EditColorDialogComponent } from '../dialogs/edit-color-dialog/edit-color-dialog.component';
import { SmtpAuthDialogComponent } from '../dialogs/smtp-auth-dialog/smtp-auth-dialog.component';
import { AddEditUserDialogComponent } from '../dialogs/add-edit-user-dialog/add-edit-user-dialog.component';
import { AddEditDossierAttributeDialogComponent } from '../dialogs/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component';
import {
ConfirmationDialogComponent,
ConfirmOptions,
@ -33,7 +32,6 @@ type DialogType =
| 'smtpAuthConfig'
| 'addEditCloneDossierTemplate'
| 'auditInfo'
| 'addEditDossierAttribute'
| 'uploadDictionary'
| 'configureCertificate';
@ -64,10 +62,6 @@ export class AdminDialogService extends DialogService<DialogType> {
component: AddEditCloneDossierTemplateDialogComponent,
dialogConfig: { width: '900px', autoFocus: true },
},
addEditDossierAttribute: {
component: AddEditDossierAttributeDialogComponent,
dialogConfig: { autoFocus: true },
},
uploadDictionary: {
component: UploadDictionaryDialogComponent,
},