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

RED-4590: Refactor - table item component for dossier attributes listing

Browse Source
This commit is contained in:
Adina Țeudan 2023-06-26 18:12:19 +03:00
parent fb2565d6c4
commit d66d548d42
10 changed files with 81 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
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

@ -1,7 +1,7 @@
<section class="dialog">
<div [innerHTML]="'add-edit-dossier-attribute.title' | translate : titleTranslateParams" class="dialog-header heading-l"></div>
<form [formGroup]="form">
<form (submit)="save()" [formGroup]="form">
<div class="dialog-content">
<div class="iqser-input-group required w-300">
<label [translate]="'add-edit-dossier-attribute.form.label'"></label>

32
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,8 +1,8 @@
import { Component, HostListener, Inject, OnDestroy } from '@angular/core';
import { Component, Inject, OnDestroy } from '@angular/core';
import { ReactiveFormsModule, Validators } from '@angular/forms';
import { DossierAttributeConfigTypes, FileAttributeConfigTypes, IDossierAttributeConfig } from '@red/domain';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { BaseDialogComponent, CircleButtonComponent, IconButtonComponent, IqserEventTarget } from '@iqser/common-ui';
import { BaseDialogComponent, CircleButtonComponent, IconButtonComponent } 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';
@ -41,16 +41,6 @@ export class AddEditDossierAttributeDialogComponent extends BaseDialogComponent
type: this.data.dossierAttribute ? 'edit' : 'create',
};
constructor(
private readonly _dossierAttributesService: DossierAttributesService,
protected readonly _dialogRef: MatDialogRef<AddEditDossierAttributeDialogComponent>,
@Inject(MAT_DIALOG_DATA) readonly data: AddEditDossierAttributeDialogData,
) {
super(_dialogRef, !!data.dossierAttribute);
this.form = this.#form;
this.initialFormValue = this.form.getRawValue();
}
get changed(): boolean {
if (!this.dossierAttribute) {
return true;
@ -79,6 +69,16 @@ export class AddEditDossierAttributeDialogComponent extends BaseDialogComponent
});
}
constructor(
private readonly _dossierAttributesService: DossierAttributesService,
protected readonly _dialogRef: MatDialogRef<AddEditDossierAttributeDialogComponent>,
@Inject(MAT_DIALOG_DATA) readonly data: AddEditDossierAttributeDialogData,
) {
super(_dialogRef, !!data.dossierAttribute);
this.form = this.#form;
this.initialFormValue = this.form.getRawValue();
}
async save() {
this._loadingService.start();
@ -99,12 +99,4 @@ export class AddEditDossierAttributeDialogComponent extends BaseDialogComponent
this._dialogRef.close(true);
}
}
@HostListener('window:keydown.Enter', ['$event'])
async onEnter(event: KeyboardEvent) {
const node = (event.target as IqserEventTarget).localName;
if (this.form.valid && this.changed && node !== 'textarea') {
await this.save();
}
}
}

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

@ -17,7 +17,7 @@
<ng-template #bulkActions>
<iqser-circle-button
(action)="openConfirmDeleteAttributeDialog($event)"
(action)="openConfirmDeleteAttributeDialog()"
*ngIf="canEditDossierAttributes && (listingService.areSomeSelected$ | async)"
[tooltip]="'dossier-attributes-listing.bulk.delete' | translate"
[type]="circleButtonTypes.dark"
@ -35,9 +35,9 @@
<iqser-icon-button
(action)="openAddEditAttributeDialog()"
*ngIf="canEditDossierAttributes"
[attr.help-mode-key]="'create_new_dossier_attribute'"
[label]="'dossier-attributes-listing.add-new' | translate"
[type]="iconButtonTypes.primary"
[attr.help-mode-key]="'create_new_dossier_attribute'"
icon="iqser:plus"
></iqser-icon-button>
</div>
@ -49,39 +49,11 @@
</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">
<span class="clamp-1">{{ attribute.label }}</span>
</div>
<div [matTooltip]="attribute.placeholder" class="cell" matTooltipClass="break-all" matTooltipPosition="above">
<span class="small-label clamp-1">{{ attribute.placeholder }}</span>
</div>
<div class="cell">
<span class="small-label">{{ translations[attribute.type] | translate }}</span>
</div>
<div class="cell">
<div *ngIf="canEditDossierAttributes" class="action-buttons">
<div [attr.help-mode-key]="'edit_delete_dossier_attributes'">
<iqser-circle-button
(action)="openAddEditAttributeDialog(attribute)"
[tooltip]="'dossier-attributes-listing.action.edit' | translate"
[type]="circleButtonTypes.dark"
icon="iqser:edit"
></iqser-circle-button>
<iqser-circle-button
(action)="openConfirmDeleteAttributeDialog($event, [attribute])"
[tooltip]="'dossier-attributes-listing.action.delete' | translate"
[type]="circleButtonTypes.dark"
icon="iqser:trash"
></iqser-circle-button>
</div>
</div>
</div>
</div>
<redaction-table-item
(openAddEditAttributeDialog)="openAddEditAttributeDialog($event)"
(openConfirmDeleteAttributeDialog)="openConfirmDeleteAttributeDialog($event)"
[attribute]="entity"
[canEditDossierAttributes]="canEditDossierAttributes"
></redaction-table-item>
</ng-template>

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

@ -7,7 +7,3 @@
margin: 5px 0;
}
}
.action-buttons > div {
display: flex;
}

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

@ -12,7 +12,6 @@ import {
} from '@iqser/common-ui';
import { AdminDialogService } from '../../services/admin-dialog.service';
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 { DOSSIER_TEMPLATE_ID, DossierAttributeConfig, IDossierAttributeConfig, User } from '@red/domain';
import { firstValueFrom } from 'rxjs';
@ -35,7 +34,6 @@ export class DossierAttributesListingScreenComponent extends ListingComponent<Do
readonly iconButtonTypes = IconButtonTypes;
readonly circleButtonTypes = CircleButtonTypes;
readonly currentUser = getCurrentUser<User>();
readonly translations = dossierAttributeTypesTranslations;
readonly tableHeaderLabel = _('dossier-attributes-listing.table-header.title');
readonly tableColumnConfigs: TableColumnConfig<DossierAttributeConfig>[] = [
{ label: _('dossier-attributes-listing.table-col-names.label'), sortByKey: 'label', width: '2fr' },
@ -60,7 +58,7 @@ export class DossierAttributesListingScreenComponent extends ListingComponent<Do
await this.#loadData();
}
async openConfirmDeleteAttributeDialog($event: MouseEvent, attributes: DossierAttributeConfig[] = this.listingService.selected) {
async openConfirmDeleteAttributeDialog(attributes: DossierAttributeConfig[] = this.listingService.selected) {
await this._dialogService.deleteAttributes(attributes, this.#dossierTemplateId, this.impactedTemplatesRef, 'dossier', async () => {
this._loadingService.start();
const ids = attributes.map(a => a.id);

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

@ -12,6 +12,7 @@ import {
import { RouterModule } from '@angular/router';
import { TranslateModule } from '@ngx-translate/core';
import { MatTooltipModule } from '@angular/material/tooltip';
import { TableItemComponent } from './table-item/table-item.component';
const routes: IqserRoutes = [
{
@ -21,7 +22,7 @@ const routes: IqserRoutes = [
];
@NgModule({
declarations: [DossierAttributesListingScreenComponent],
declarations: [DossierAttributesListingScreenComponent, TableItemComponent],
imports: [
CommonModule,
RouterModule.forChild(routes),

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

@ -0,0 +1,31 @@
<div [matTooltip]="attribute.label" class="cell" matTooltipPosition="above">
<span class="clamp-1">{{ attribute.label }}</span>
</div>
<div [matTooltip]="attribute.placeholder" class="cell" matTooltipClass="break-all" matTooltipPosition="above">
<span class="small-label clamp-1">{{ attribute.placeholder }}</span>
</div>
<div class="cell">
<span class="small-label">{{ translations[attribute.type] | translate }}</span>
</div>
<div class="cell">
<div *ngIf="canEditDossierAttributes" class="action-buttons">
<div [attr.help-mode-key]="'edit_delete_dossier_attributes'">
<iqser-circle-button
(action)="openAddEditAttributeDialog.emit(attribute)"
[tooltip]="'dossier-attributes-listing.action.edit' | translate"
[type]="circleButtonTypes.dark"
icon="iqser:edit"
></iqser-circle-button>
<iqser-circle-button
(action)="openConfirmDeleteAttributeDialog.emit([attribute])"
[tooltip]="'dossier-attributes-listing.action.delete' | translate"
[type]="circleButtonTypes.dark"
icon="iqser:trash"
></iqser-circle-button>
</div>
</div>
</div>

3
apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/table-item/table-item.component.scss Normal file
View File

@ -0,0 +1,3 @@
.action-buttons > div {
display: flex;
}

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

@ -0,0 +1,19 @@
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { DossierAttributeConfig, IDossierAttributeConfig } from '@red/domain';
import { CircleButtonTypes } from '@iqser/common-ui';
import { dossierAttributeTypesTranslations } from '@translations/dossier-attribute-types-translations';
@Component({
selector: 'redaction-table-item [attribute] [canEditDossierAttributes]',
templateUrl: './table-item.component.html',
styleUrls: ['./table-item.component.scss'],
})
export class TableItemComponent {
readonly circleButtonTypes = CircleButtonTypes;
readonly translations = dossierAttributeTypesTranslations;
@Input() attribute: DossierAttributeConfig;
@Input() canEditDossierAttributes: boolean;
@Output() openAddEditAttributeDialog = new EventEmitter<IDossierAttributeConfig>();
@Output() openConfirmDeleteAttributeDialog = new EventEmitter<DossierAttributeConfig[]>();
}

8
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://qa5.iqser.cloud/redaction-gateway-v1",
"API_URL": "https://dev-08.iqser.cloud/redaction-gateway-v1",
"APP_NAME": "RedactManager",
"AUTO_READ_TIME": 3,
"BACKEND_APP_VERSION": "4.4.40",
@ -11,13 +11,13 @@
"MAX_RETRIES_ON_SERVER_ERROR": 3,
"OAUTH_CLIENT_ID": "redaction",
"OAUTH_IDP_HINT": null,
"OAUTH_URL": "https://qa5.iqser.cloud/auth",
"OAUTH_URL": "https://dev-08.iqser.cloud/auth",
"RECENT_PERIOD_IN_HOURS": 24,
"SELECTION_MODE": "structural",
"MANUAL_BASE_URL": "https://docs.redactmanager.com/preview",
"ANNOTATIONS_THRESHOLD": 1000,
"THEME": "scm",
"BASE_TRANSLATIONS_DIRECTORY": "/assets/i18n/scm/",
"THEME": "redact",
"BASE_TRANSLATIONS_DIRECTORY": "/assets/i18n/redact/",
"AVAILABLE_NOTIFICATIONS_DAYS": 30,
"AVAILABLE_OLD_NOTIFICATIONS_MINUTES": 60,
"NOTIFICATIONS_THRESHOLD": 1000,