Dossier attributes listing
This commit is contained in:
Adina Țeudan
parent
89edd903f0
commit
66d24dbcd5
@ -20,68 +20,20 @@
|
||||
<redaction-admin-side-nav type="dossierTemplates"></redaction-admin-side-nav>
|
||||
|
||||
<div class="content-container">
|
||||
<iqser-table-header
|
||||
<iqser-table
|
||||
(noDataAction)="openAddEditAttributeDialog(null)"
|
||||
[actionsTemplate]="actionsTemplate"
|
||||
[bulkActions]="bulkActions"
|
||||
[hasEmptyColumn]="true"
|
||||
[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]="true"
|
||||
[tableColumnConfigs]="tableColumnConfigs"
|
||||
[tableHeaderLabel]="tableHeaderLabel"
|
||||
></iqser-table-header>
|
||||
|
||||
<iqser-empty-state
|
||||
(action)="openAddEditAttributeDialog($event)"
|
||||
*ngIf="entitiesService.noData$ | async"
|
||||
[buttonLabel]="'dossier-attributes-listing.no-data.action' | translate"
|
||||
[showButton]="currentUser.isAdmin"
|
||||
[text]="'dossier-attributes-listing.no-data.title' | translate"
|
||||
icon="red:attribute"
|
||||
></iqser-empty-state>
|
||||
|
||||
<iqser-empty-state
|
||||
*ngIf="noMatch$ | async"
|
||||
[text]="'dossier-attributes-listing.no-match.title' | translate"
|
||||
></iqser-empty-state>
|
||||
|
||||
<cdk-virtual-scroll-viewport [itemSize]="50" iqserHasScrollbar>
|
||||
<div
|
||||
*cdkVirtualFor="let attribute of sortedDisplayedEntities$ | async; trackBy: trackByPrimaryKey"
|
||||
class="table-item pointer"
|
||||
>
|
||||
<div (click)="toggleEntitySelected($event, attribute)" class="selection-column">
|
||||
<iqser-round-checkbox [active]="isSelected(attribute)"></iqser-round-checkbox>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{{ attribute.label }}
|
||||
</div>
|
||||
|
||||
<div class="small-label">
|
||||
{{ attribute.placeholder }}
|
||||
</div>
|
||||
|
||||
<div class="small-label">
|
||||
{{ translations[attribute.type] | translate }}
|
||||
</div>
|
||||
<div class="actions-container">
|
||||
<div *ngIf="currentUser.isAdmin" class="action-buttons">
|
||||
<iqser-circle-button
|
||||
(action)="openAddEditAttributeDialog($event, 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="red:trash"
|
||||
></iqser-circle-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="scrollbar-placeholder"></div>
|
||||
</div>
|
||||
</cdk-virtual-scroll-viewport>
|
||||
[showNoDataButton]="currentUser.isAdmin"
|
||||
emptyColumnWidth="1fr"
|
||||
noDataIcon="red:attribute"
|
||||
>
|
||||
</iqser-table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -110,3 +62,39 @@
|
||||
></iqser-icon-button>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #actionsTemplate let-attribute="entity">
|
||||
<div *ngIf="currentUser.isAdmin" class="action-buttons">
|
||||
<iqser-circle-button
|
||||
(action)="openAddEditAttributeDialog($event, 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="red:trash"
|
||||
></iqser-circle-button>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #labelTemplate let-attribute="entity">
|
||||
<div class="cell">
|
||||
{{ attribute.label }}
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #placeholderTemplate let-attribute="entity">
|
||||
<div class="cell small-label">
|
||||
{{ attribute.placeholder }}
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #typeTemplate let-attribute="entity">
|
||||
<div class="cell small-label">
|
||||
{{ translations[attribute.type] | translate }}
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
@ -2,33 +2,3 @@
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
iqser-table-header::ng-deep .attributes-actions-container {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
justify-content: flex-end;
|
||||
|
||||
> *:not(:last-child) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
cdk-virtual-scroll-viewport {
|
||||
::ng-deep.cdk-virtual-scroll-content-wrapper {
|
||||
grid-template-columns: auto 2fr 2fr 1fr 1fr 11px;
|
||||
|
||||
.table-item > div {
|
||||
height: 50px;
|
||||
|
||||
&:not(.scrollbar-placeholder) {
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.has-scrollbar:hover {
|
||||
::ng-deep.cdk-virtual-scroll-content-wrapper {
|
||||
grid-template-columns: auto 2fr 2fr 1fr 1fr;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Component, Injector, OnInit } from '@angular/core';
|
||||
import { Component, forwardRef, Injector, OnInit, TemplateRef, ViewChild } from '@angular/core';
|
||||
import {
|
||||
CircleButtonTypes,
|
||||
DefaultListingServices,
|
||||
@ -19,7 +19,10 @@ import { UserService } from '@services/user.service';
|
||||
@Component({
|
||||
templateUrl: './dossier-attributes-listing-screen.component.html',
|
||||
styleUrls: ['./dossier-attributes-listing-screen.component.scss'],
|
||||
providers: [...DefaultListingServices]
|
||||
providers: [
|
||||
...DefaultListingServices,
|
||||
{ provide: ListingComponent, useExisting: forwardRef(() => DossierAttributesListingScreenComponent) }
|
||||
]
|
||||
})
|
||||
export class DossierAttributesListingScreenComponent extends ListingComponent<DossierAttributeConfig> implements OnInit {
|
||||
readonly iconButtonTypes = IconButtonTypes;
|
||||
@ -27,17 +30,10 @@ export class DossierAttributesListingScreenComponent extends ListingComponent<Do
|
||||
readonly currentUser = this._userService.currentUser;
|
||||
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'
|
||||
},
|
||||
{ label: _('dossier-attributes-listing.table-col-names.placeholder') },
|
||||
{
|
||||
label: _('dossier-attributes-listing.table-col-names.type'),
|
||||
sortByKey: 'type'
|
||||
}
|
||||
];
|
||||
tableColumnConfigs: TableColumnConfig<DossierAttributeConfig>[];
|
||||
@ViewChild('labelTemplate', { static: true }) labelTemplate: TemplateRef<never>;
|
||||
@ViewChild('placeholderTemplate', { static: true }) placeholderTemplate: TemplateRef<never>;
|
||||
@ViewChild('typeTemplate', { static: true }) typeTemplate: TemplateRef<never>;
|
||||
protected readonly _primaryKey = 'label';
|
||||
|
||||
constructor(
|
||||
@ -54,6 +50,7 @@ export class DossierAttributesListingScreenComponent extends ListingComponent<Do
|
||||
}
|
||||
|
||||
async ngOnInit() {
|
||||
this._configureTableColumns();
|
||||
await this._loadData();
|
||||
}
|
||||
|
||||
@ -62,6 +59,7 @@ export class DossierAttributesListingScreenComponent extends ListingComponent<Do
|
||||
this._loadingService.start();
|
||||
const ids = dossierAttribute ? [dossierAttribute.id] : this.entitiesService.selected.map(item => item.id);
|
||||
await this._dossierAttributesService.deleteConfigs(ids);
|
||||
this.entitiesService.setSelected([]);
|
||||
await this._loadData();
|
||||
});
|
||||
}
|
||||
@ -77,6 +75,27 @@ export class DossierAttributesListingScreenComponent extends ListingComponent<Do
|
||||
);
|
||||
}
|
||||
|
||||
private _configureTableColumns() {
|
||||
this.tableColumnConfigs = [
|
||||
{
|
||||
label: _('dossier-attributes-listing.table-col-names.label'),
|
||||
sortByKey: 'label',
|
||||
width: '2fr',
|
||||
template: this.labelTemplate
|
||||
},
|
||||
{
|
||||
label: _('dossier-attributes-listing.table-col-names.placeholder'),
|
||||
width: '2fr',
|
||||
template: this.placeholderTemplate
|
||||
},
|
||||
{
|
||||
label: _('dossier-attributes-listing.table-col-names.type'),
|
||||
sortByKey: 'type',
|
||||
template: this.typeTemplate
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
private async _loadData() {
|
||||
this._loadingService.start();
|
||||
const attributes = await this._dossierAttributesService.getConfig();
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user