From 3648e8a8f8937e82121b57f5a112c8c856e22132 Mon Sep 17 00:00:00 2001
From: Hamza HRAMCHI <hamza.hramchi@xelians.fr>
Date: Tue, 2 Aug 2022 18:56:21 +0200
Subject: [PATCH] FEAT #19700 TIME 3:50 WIP Visual accessibility
---
.../app/process/process.component.html | 242 +++++++++---------
.../app/process/process.component.scss | 110 ++++++--
src/frontend/app/process/process.component.ts | 1 -
.../criteria-tool.component.html | 45 +++-
.../criteria-tool.component.scss | 62 ++++-
.../criteria-tool/criteria-tool.component.ts | 36 +++
.../search-result-list.component.html | 27 --
.../search-result-list.component.scss | 4 +
.../search-result-list.component.ts | 21 +-
src/frontend/app/search/search.component.html | 8 +-
src/frontend/app/search/search.component.ts | 1 +
11 files changed, 359 insertions(+), 198 deletions(-)
diff --git a/src/frontend/app/process/process.component.html b/src/frontend/app/process/process.component.html
index ade5c55b7c6..f2b2dbeb5ec 100644
--- a/src/frontend/app/process/process.component.html
+++ b/src/frontend/app/process/process.component.html
@@ -196,7 +196,7 @@
</ng-template>
<mat-sidenav-content class="process-content">
<div class="bg-head">
- <div class="bg-head-title" [class.customContainerRight]="appService.getViewMode()">
+ <div class="bg-head-title" style="margin-bottom: -10px;" [class.customContainerRight]="appService.getViewMode()">
<div class="bg-head-title-label">
<header-left></header-left>
</div>
@@ -204,124 +204,134 @@
<header-right></header-right>
</div>
</div>
- <div class="bg-head-content" [class.fullContainer]="appService.getViewMode()" style="padding-bottom: 20px;">
- <div class="resourceInfo">
- <ng-container *ngIf="!loading; else elseInfoRes">
- <div class="title">
- <span style="white-space: nowrap; padding-left: 10px; padding-right: 10px"
- [title]="this.currentResourceInformations.subject + ' (' + this.currentResourceInformations.statusLabel + ')'">
- {{this.currentResourceInformations.subject}} <small
- class="subSubject">{{this.currentResourceInformations.statusLabel}}</small>
- </span>
- <div class="title-divider"></div>
- </div>
- <div class="content">
- <button mat-icon-button
- [title]="this.resourceFollowed ? ('lang.untrackThisMail' | translate) : ('lang.trackThisMail' | translate)"
- class="categoryLabel" (click)="toggleFollow()">
- <mat-icon class="followIcon {{this.resourceFollowed ? 'fas':'far'}} fa-star"
- style="font-size: 20px;"></mat-icon>
- </button>
- <button *ngIf="privilegeService.hasCurrentUserPrivilege('freeze_retention_rule')"
- mat-icon-button
- [title]="resourceFreezed ? ('lang.unfreezeRetentionRule' | translate) : ('lang.freezeRetentionRule' | translate)"
- class="categoryLabel" (click)="toggleFreezing()">
- <mat-icon
- class="{{this.resourceFreezed ? 'freezeUnfreezIcon':'nonFreeze'}} fas fa-snowflake"
- style="font-size: 20px;"></mat-icon>
- </button>
- <button mat-icon-button
- *ngIf="privilegeService.hasCurrentUserPrivilege('set_binding_document')"
- [matMenuTriggerFor]="bindingRentalRule"
- [title]="'lang.setBindingDocument' | translate" class="categoryLabel">
- <mat-icon class="bindIcon fas fa-exclamation" style="font-size: 20px;"></mat-icon>
- </button>
- <mat-menu #bindingRentalRule="matMenu">
- <buton mat-menu-item [class.isSelectedMenu]="this.resourceBinded === true"
- (click)="toggleBinding(true)" [title]="'lang.bindingMail' | translate | stripTags"
- [innerHTML]="'lang.bindingMail' | translate"></buton>
- <mat-divider></mat-divider>
- <buton mat-menu-item [class.isSelectedMenu]="this.resourceBinded === false"
- (click)="toggleBinding(false)"
- [title]="'lang.noBindingMail' | translate | stripTags"
- [innerHTML]="'lang.noBindingMail' | translate"></buton>
- <mat-divider></mat-divider>
- <buton mat-menu-item [class.isSelectedMenu]="this.resourceBinded === null"
- (click)="toggleBinding(null)" [title]="'lang.doNotDefine' | translate">
- {{ 'lang.doNotDefine' | translate}}</buton>
- <mat-divider></mat-divider>
- </mat-menu>
- <div class="content-item" *ngIf="this.currentResourceInformations.priority !== undefined">
- <b><i class="fas fa-flag" [style.color]="this.currentResourceInformations.priorityColor"
- style="font-size: 25px;padding-right: 20px;"></i>
- {{this.currentResourceInformations.priorityLabel}}</b>
- </div>
- <div class="content-item">
- <div>{{'lang.chronoNumberShort' | translate}} :</div>
- <div class="content-item-value" [title]="'N° '+this.currentResourceInformations.resId">
- {{this.currentResourceInformations.chrono}}</div>
- </div>
- <div class="content-item" (click)="openContact()" style="cursor:pointer">
- <div>
- {{this.currentResourceInformations.categoryId !== 'outgoing' ? ('lang.senders' | translate) : ('lang.recipient' | translate)}}
- :</div>
- <div class="content-item-value">{{senderLightInfo.displayName}} <i
- *ngIf="this.senderLightInfo.filling" class="fas fa-circle"
- style="font-size: 8px" [style.color]="this.senderLightInfo.filling"></i></div>
- </div>
- <div class="content-item"
- *ngIf="!functions.empty(currentResourceInformations.registeredMail_returnDate)">
- <div>{{'lang.returnDate' | translate}} :</div>
- <div class="content-item-value"
- [title]="this.currentResourceInformations.registeredMail_returnDate | fullDate">
- {{this.currentResourceInformations.registeredMail_returnDate | date: 'dd/MM/y'}}
- </div>
- </div>
- <div class="content-item"
- *ngIf="!functions.empty(currentResourceInformations.registeredMail_returnReason)">
- <div>{{'lang.returnReason' | translate}} :</div>
- <div class="content-item-value"
- [title]="this.currentResourceInformations.registeredMail_returnReason">
- {{this.currentResourceInformations.registeredMail_returnReason}}</div>
+ <mat-accordion class="criteria-container" *ngIf="!loading">
+ <mat-expansion-panel [expanded]="true" togglePosition="before">
+ <mat-expansion-panel-header>
+ <mat-panel-title>
+ <div class="title">
+ <span style="white-space: nowrap; padding-left: 10px; padding-right: 10px"
+ [title]="this.currentResourceInformations.subject + ' (' + this.currentResourceInformations.statusLabel + ')'">
+ {{this.currentResourceInformations.subject}} <small
+ class="subSubject">{{this.currentResourceInformations.statusLabel}}</small>
+ </span>
</div>
- <div class="content-item"
- *ngIf="this.currentResourceInformations.processLimitDate !== undefined">
- <ng-container
- *ngIf="this.currentResourceInformations.closingDate !== null; else elseLimitDate">
- <div style="font-weight: bold;"
- [title]="this.currentResourceInformations.closingDate | fullDate">
- {{'lang.closed' | translate}}
- {{this.currentResourceInformations.closingDate |Â timeAgo : 'full'}} <i
- class="fa fa-lock"></i></div>
- </ng-container>
- <ng-template #elseLimitDate>
- <div>{{'lang.processLimitDate' | translate}} :</div>
- <div class="content-item-value"
- [title]="this.currentResourceInformations.processLimitDate | fullDate"
- [innerHTML]="this.currentResourceInformations.processLimitDate | timeLimit : 'badge'">
+ <div class="block-line"></div>
+ </mat-panel-title>
+ </mat-expansion-panel-header>
+ <div class="bg-head-content" [class.fullContainer]="appService.getViewMode()" style="padding-bottom: 20px;">
+ <div class="resourceInfo">
+ <ng-container *ngIf="!loading; else elseInfoRes">
+
+ <div class="content">
+ <button mat-icon-button
+ [title]="this.resourceFollowed ? ('lang.untrackThisMail' | translate) : ('lang.trackThisMail' | translate)"
+ class="categoryLabel" (click)="toggleFollow()">
+ <mat-icon class="followIcon {{this.resourceFollowed ? 'fas':'far'}} fa-star"
+ style="font-size: 20px;"></mat-icon>
+ </button>
+ <button *ngIf="privilegeService.hasCurrentUserPrivilege('freeze_retention_rule')"
+ mat-icon-button
+ [title]="resourceFreezed ? ('lang.unfreezeRetentionRule' | translate) : ('lang.freezeRetentionRule' | translate)"
+ class="categoryLabel" (click)="toggleFreezing()">
+ <mat-icon
+ class="{{this.resourceFreezed ? 'freezeUnfreezIcon':'nonFreeze'}} fas fa-snowflake"
+ style="font-size: 20px;"></mat-icon>
+ </button>
+ <button mat-icon-button
+ *ngIf="privilegeService.hasCurrentUserPrivilege('set_binding_document')"
+ [matMenuTriggerFor]="bindingRentalRule"
+ [title]="'lang.setBindingDocument' | translate" class="categoryLabel">
+ <mat-icon class="bindIcon fas fa-exclamation" style="font-size: 20px;"></mat-icon>
+ </button>
+ <mat-menu #bindingRentalRule="matMenu">
+ <buton mat-menu-item [class.isSelectedMenu]="this.resourceBinded === true"
+ (click)="toggleBinding(true)" [title]="'lang.bindingMail' | translate | stripTags"
+ [innerHTML]="'lang.bindingMail' | translate"></buton>
+ <mat-divider></mat-divider>
+ <buton mat-menu-item [class.isSelectedMenu]="this.resourceBinded === false"
+ (click)="toggleBinding(false)"
+ [title]="'lang.noBindingMail' | translate | stripTags"
+ [innerHTML]="'lang.noBindingMail' | translate"></buton>
+ <mat-divider></mat-divider>
+ <buton mat-menu-item [class.isSelectedMenu]="this.resourceBinded === null"
+ (click)="toggleBinding(null)" [title]="'lang.doNotDefine' | translate">
+ {{ 'lang.doNotDefine' | translate}}</buton>
+ <mat-divider></mat-divider>
+ </mat-menu>
+ <div class="content-item" *ngIf="this.currentResourceInformations.priority !== undefined">
+ <b><i class="fas fa-flag" [style.color]="this.currentResourceInformations.priorityColor"
+ style="font-size: 25px;padding-right: 20px;"></i>
+ {{this.currentResourceInformations.priorityLabel}}</b>
</div>
- </ng-template>
- </div>
- <div
- style="position: absolute;right: 0px;top: 0px;height: 100%;display: flex;flex-direction: column;justify-content: center;">
- <button mat-icon-button *ngFor="let inteKey of integrationsInfo | keyvalue"
- matTooltip="{{'lang.' + inteKey.key | translate}}"
- (click)="toggleIntegration(inteKey.key)">
- <mat-icon [class]="inteKey.value.icon"
- [class.checked]="currentResourceInformations.integrations[inteKey.key]"
- [class.unchecked]="!currentResourceInformations.integrations[inteKey.key]">
- </mat-icon>
- </button>
- </div>
- </div>
- </ng-container>
- <ng-template #elseInfoRes>
- <div class="loadingBanner">
- <mat-spinner diameter="35"></mat-spinner>
+ <div class="content-item">
+ <div>{{'lang.chronoNumberShort' | translate}} :</div>
+ <div class="content-item-value" [title]="'N° '+this.currentResourceInformations.resId">
+ {{this.currentResourceInformations.chrono}}</div>
+ </div>
+ <div class="content-item" (click)="openContact()" style="cursor:pointer">
+ <div>
+ {{this.currentResourceInformations.categoryId !== 'outgoing' ? ('lang.senders' | translate) : ('lang.recipient' | translate)}}
+ :</div>
+ <div class="content-item-value">{{senderLightInfo.displayName}} <i
+ *ngIf="this.senderLightInfo.filling" class="fas fa-circle"
+ style="font-size: 8px" [style.color]="this.senderLightInfo.filling"></i></div>
+ </div>
+ <div class="content-item"
+ *ngIf="!functions.empty(currentResourceInformations.registeredMail_returnDate)">
+ <div>{{'lang.returnDate' | translate}} :</div>
+ <div class="content-item-value"
+ [title]="this.currentResourceInformations.registeredMail_returnDate | fullDate">
+ {{this.currentResourceInformations.registeredMail_returnDate | date: 'dd/MM/y'}}
+ </div>
+ </div>
+ <div class="content-item"
+ *ngIf="!functions.empty(currentResourceInformations.registeredMail_returnReason)">
+ <div>{{'lang.returnReason' | translate}} :</div>
+ <div class="content-item-value"
+ [title]="this.currentResourceInformations.registeredMail_returnReason">
+ {{this.currentResourceInformations.registeredMail_returnReason}}</div>
+ </div>
+ <div class="content-item"
+ *ngIf="this.currentResourceInformations.processLimitDate !== undefined">
+ <ng-container
+ *ngIf="this.currentResourceInformations.closingDate !== null; else elseLimitDate">
+ <div style="font-weight: bold;"
+ [title]="this.currentResourceInformations.closingDate | fullDate">
+ {{'lang.closed' | translate}}
+ {{this.currentResourceInformations.closingDate |Â timeAgo : 'full'}} <i
+ class="fa fa-lock"></i></div>
+ </ng-container>
+ <ng-template #elseLimitDate>
+ <div>{{'lang.processLimitDate' | translate}} :</div>
+ <div class="content-item-value"
+ [title]="this.currentResourceInformations.processLimitDate | fullDate"
+ [innerHTML]="this.currentResourceInformations.processLimitDate | timeLimit : 'badge'">
+ </div>
+ </ng-template>
+ </div>
+ <div
+ style="position: absolute;right: 0px;top: 0px;height: 100%;display: flex;flex-direction: column;justify-content: center;">
+ <button mat-icon-button *ngFor="let inteKey of integrationsInfo | keyvalue"
+ matTooltip="{{'lang.' + inteKey.key | translate}}"
+ (click)="toggleIntegration(inteKey.key)">
+ <mat-icon [class]="inteKey.value.icon"
+ [class.checked]="currentResourceInformations.integrations[inteKey.key]"
+ [class.unchecked]="!currentResourceInformations.integrations[inteKey.key]">
+ </mat-icon>
+ </button>
+ </div>
+ </div>
+ </ng-container>
+ <ng-template #elseInfoRes>
+ <div class="loadingBanner">
+ <mat-spinner diameter="35"></mat-spinner>
+ </div>
+ </ng-template>
</div>
- </ng-template>
- </div>
- </div>
+ </div>
+ </mat-expansion-panel>
+ </mat-accordion>
+
</div>
<div class="document-container" [class.fullContainer]="appService.getViewMode()">
<div class="content">
diff --git a/src/frontend/app/process/process.component.scss b/src/frontend/app/process/process.component.scss
index bd3d50ed76b..b1b05939a43 100644
--- a/src/frontend/app/process/process.component.scss
+++ b/src/frontend/app/process/process.component.scss
@@ -184,31 +184,31 @@
background: var(--maarch-color-primary-light);
width: 100%;
- .title {
- white-space: pre;
- overflow: hidden;
- max-width: 85%;
- text-overflow: ellipsis;
- z-index: 1;
- font-size: 20px;
- font-weight: bold;
- letter-spacing: 2px;
- position: absolute;
- top: -18px;
- left: 20px;
- padding: 0px;
- margin: 0px;
- color: white;
-
- &-divider {
- position: absolute;
- width: 99%;
- z-index: -1;
- top: 17px;
- background: var(--maarch-color-primary-light);
- height: 1px;
- }
- }
+ // .title {
+ // white-space: pre;
+ // overflow: hidden;
+ // max-width: 85%;
+ // text-overflow: ellipsis;
+ // z-index: 1;
+ // font-size: 20px;
+ // font-weight: bold;
+ // letter-spacing: 2px;
+ // position: absolute;
+ // top: -18px;
+ // left: 20px;
+ // padding: 0px;
+ // margin: 0px;
+ // color: white;
+
+ // &-divider {
+ // position: absolute;
+ // width: 99%;
+ // z-index: -1;
+ // top: 17px;
+ // background: var(--maarch-color-primary-light);
+ // height: 1px;
+ // }
+ // }
.content {
display: flex;
@@ -446,4 +446,62 @@
.isSelectedMenu {
background: var(--maarch-color-secondary);
- }
\ No newline at end of file
+}
+
+.criteria-container {
+ .mat-expansion-panel {
+ background: none;
+ box-shadow: none;
+ }
+
+ .mat-expansion-panel-header-title {
+ color: white;
+ align-items: center;
+ }
+
+ ::ng-deep .mat-expansion-panel-content {
+ color: white;
+ }
+
+ ::ng-deep .mat-expansion-panel-header {
+ height: 50px;
+ background: #3f88a7;
+ border-radius: 30px 30px 30px 30px;
+ }
+
+ ::ng-deep .mat-expansion-panel-header.mat-expansion-toggle-indicator-before {
+ margin: 0px 50px 5px 50px;
+ }
+
+ ::ng-deep .mat-expansion-panel-body {
+ padding-top: 5px;
+ }
+
+ ::ng-deep .mat-expansion-indicator::after {
+ color: white;
+ }
+}
+
+.title {
+ white-space: pre;
+ overflow: hidden;
+ max-width: 85%;
+ text-overflow: ellipsis;
+ z-index: 1;
+ font-size: 20px;
+ font-weight: bold;
+ letter-spacing: 2px;
+ top: -18px;
+ left: 20px;
+ padding: 0px;
+ margin: 0px;
+ color: white;
+}
+
+.block-line {
+ flex: 1;
+ border: solid 1px rgba(0, 0, 0, 0.12);
+ height: 0px;
+ background-color: white;
+ margin-top: 4px;
+}
\ No newline at end of file
diff --git a/src/frontend/app/process/process.component.ts b/src/frontend/app/process/process.component.ts
index 831229e79a2..c869ba2f891 100755
--- a/src/frontend/app/process/process.component.ts
+++ b/src/frontend/app/process/process.component.ts
@@ -144,7 +144,6 @@ export class ProcessComponent implements OnInit, OnDestroy {
}
};
-
@ViewChild('snav2', { static: true }) sidenavRight: MatSidenav;
@ViewChild('adminMenuTemplate', { static: true }) adminMenuTemplate: TemplateRef<any>;
diff --git a/src/frontend/app/search/criteria-tool/criteria-tool.component.html b/src/frontend/app/search/criteria-tool/criteria-tool.component.html
index e006bd6a67b..442e6c932d6 100644
--- a/src/frontend/app/search/criteria-tool/criteria-tool.component.html
+++ b/src/frontend/app/search/criteria-tool/criteria-tool.component.html
@@ -1,11 +1,42 @@
<form (ngSubmit)="getCurrentCriteriaValues()" #criteriaFormUp="ngForm">
- <mat-form-field *ngIf="!adminMode" floatLabel="never" class="basket-search">
- <input class="metaSearch" type="text" matInput [formControl]="searchTermControl"
- [placeholder]="'lang.quickSearchTarget' |Â translate">
- <button mat-icon-button matPrefix [disabled]="isLoadingResult">
- <mat-icon class="fas fa-search"></mat-icon>
- </button>
- </mat-form-field>
+ <div class="row">
+ <div class="col-md-8">
+ <mat-form-field *ngIf="!adminMode" floatLabel="never" class="basket-search">
+ <input class="metaSearch" type="text" matInput [formControl]="searchTermControl" [title]="'lang.quickSearchTarget' |Â translate"
+ [placeholder]="'lang.quickSearchTarget' |Â translate">
+ <button mat-icon-button matPrefix [disabled]="isLoadingResult">
+ <mat-icon class="fas fa-search"></mat-icon>
+ </button>
+ </mat-form-field>
+ </div>
+ <div class="col-md-4" style="display: flex;">
+ <div class="orderTool">
+ <mat-form-field class="basket-order">
+ <mat-icon matPrefix class="fa fa-list"></mat-icon>
+ <mat-select [(ngModel)]="this.listProperties.order" [title]="'lang.' + listProperties.order | translate" [ngModelOptions]="{standalone: true}" (selectionChange)="updateFilters()"
+ [disabled]="data.length == 0">
+ <mat-option [value]="column.id" *ngFor="let column of displayColsOrder">
+ {{'lang.' + column.id | translate}}
+ </mat-option>
+ </mat-select>
+ </mat-form-field>
+ </div>
+ <div class="ascDescTool">
+ <button [disabled]="this.listProperties.order == '' || data.length == 0"
+ [style.opacity]="this.listProperties.order == '' ? '0.2' : '1'" mat-fab
+ [title]="this.listProperties.orderDir == 'DESC' ? ('lang.descOrder' | translate) : ('lang.ascOrder' | translate)"
+ style="color: rgba(0,0,0,0.38);" (click)="changeOrderDir();">
+ <mat-icon *ngIf="this.listProperties.orderDir == 'DESC'" fontSet="fas"
+ fontIcon="fa-sort-amount-down fa-2x">
+ </mat-icon>
+ <mat-icon *ngIf="this.listProperties.orderDir == 'ASC'" fontSet="fas"
+ fontIcon="fa-sort-amount-up fa-2x">
+ </mat-icon>
+ </button>
+ </div>
+ </div>
+ </div>
+
<mat-accordion [class.criteria-container]="class==='main'"
[class.criteria-container-secondary]="class==='secondary'">
<mat-expansion-panel #criteriaTool [expanded]="openedPanel" togglePosition="before">
diff --git a/src/frontend/app/search/criteria-tool/criteria-tool.component.scss b/src/frontend/app/search/criteria-tool/criteria-tool.component.scss
index bf006cc1e5c..00a1d5f284c 100644
--- a/src/frontend/app/search/criteria-tool/criteria-tool.component.scss
+++ b/src/frontend/app/search/criteria-tool/criteria-tool.component.scss
@@ -218,4 +218,64 @@
border-radius: 20px;
border-color: #135F7F;
color: #135F7F;
-}
\ No newline at end of file
+}
+
+.ascDescTool {
+ .mat-fab {
+ background: #135F7F;
+ border: solid 2px white;
+ color: white !important;
+ box-shadow: none;
+ }
+}
+
+.orderTool {
+ flex: 1;
+}
+
+.basket-order {
+ color: white;
+ width: 300px;
+ padding-left: 10px;
+ padding-right: 10px;
+ height: 55px;
+
+ .mat-icon {
+ font-size: 30px;
+
+ }
+
+ ::ng-deep.mat-select-value {
+ color: white;
+ }
+
+ ::ng-deep.mat-form-field-infix {
+ padding-bottom: 15px;
+ }
+
+ ::ng-deep.mat-form-field-flex {
+ background: #135F7F;
+ border: solid 2px white;
+ border-radius: 30px;
+ display: flex;
+ align-items: center;
+ }
+
+ ::ng-deep.mat-form-field-prefix {
+ padding-left: 15px;
+ padding-right: 10px;
+ }
+
+ ::ng-deep.mat-form-field-label-wrapper {
+ color: white;
+ }
+
+ ::ng-deep.mat-select-arrow {
+ color: white;
+ margin-right: 25px;
+ }
+
+ ::ng-deep .mat-form-field-underline {
+ display: none;
+ }
+}
diff --git a/src/frontend/app/search/criteria-tool/criteria-tool.component.ts b/src/frontend/app/search/criteria-tool/criteria-tool.component.ts
index 1127a68d17a..6c92d650012 100644
--- a/src/frontend/app/search/criteria-tool/criteria-tool.component.ts
+++ b/src/frontend/app/search/criteria-tool/criteria-tool.component.ts
@@ -21,6 +21,8 @@ import { FolderInputComponent } from '@appRoot/folder/indexing/folder-input.comp
import { TagInputComponent } from '@appRoot/tag/indexing/tag-input.component';
import { IssuingSiteInputComponent } from '@appRoot/administration/registered-mail/issuing-site/indexing/issuing-site-input.component';
import { SortPipe } from '@plugins/sorting.pipe';
+import { CriteriaSearchService } from '@service/criteriaSearch.service';
+import { HeaderService } from '@service/header.service';
@Component({
selector: 'app-criteria-tool',
@@ -36,10 +38,12 @@ export class CriteriaToolComponent implements OnInit {
@Input() openedPanel: boolean = true;
@Input() isLoadingResult: boolean = false;
@Input() class: 'main' | 'secondary' = 'main';
+ @Input() data: any = [];
@Output() searchUrlGenerated = new EventEmitter<any>();
@Output() loaded = new EventEmitter<any>();
@Output() afterGetSearchTemplates = new EventEmitter<any>();
+ @Output() refreshDaoResult = new EventEmitter<any>();
@ViewChild('criteriaTool', { static: false }) criteriaTool: MatExpansionPanel;
@ViewChild('searchCriteriaInput', { static: false }) searchCriteriaInput: ElementRef;
@@ -76,6 +80,20 @@ export class CriteriaToolComponent implements OnInit {
},
];
+ displayColsOrder = [
+ { 'id': 'destUser' },
+ { 'id': 'categoryId' },
+ { 'id': 'creationDate' },
+ { 'id': 'processLimitDate' },
+ { 'id': 'entityLabel' },
+ { 'id': 'subject' },
+ { 'id': 'chrono' },
+ { 'id': 'priority' },
+ { 'id': 'status' },
+ { 'id': 'typeLabel' }
+ ];
+
+ listProperties: any = {};
constructor(
private _activatedRoute: ActivatedRoute,
@@ -84,6 +102,8 @@ export class CriteriaToolComponent implements OnInit {
public appService: AppService,
public functions: FunctionsService,
public indexingFields: IndexingFieldsService,
+ public criteriaSearchService: CriteriaSearchService,
+ public headerService: HeaderService,
private dialog: MatDialog,
private notify: NotificationService,
private datePipe: DatePipe,
@@ -99,6 +119,7 @@ export class CriteriaToolComponent implements OnInit {
async ngOnInit(): Promise<void> {
this.searchTermControl.setValue(this.searchTerm);
+ this.listProperties = this.criteriaSearchService.initListsProperties(this.headerService.user.id);
this.criteria = await this.indexingFields.getAllSearchFields();
@@ -718,6 +739,21 @@ export class CriteriaToolComponent implements OnInit {
}
}
+ updateFilters() {
+ this.listProperties.page = 0;
+ this.criteriaSearchService.updateListsProperties(this.listProperties);
+ this.refreshDaoResult.emit(this.listProperties);
+ }
+
+ changeOrderDir() {
+ if (this.listProperties.orderDir === 'ASC') {
+ this.listProperties.orderDir = 'DESC';
+ } else {
+ this.listProperties.orderDir = 'ASC';
+ }
+ this.updateFilters();
+ }
+
private _filter(value: string): string[] {
if (typeof value === 'string') {
const filterValue = this.latinisePipe.transform(value.toLowerCase());
diff --git a/src/frontend/app/search/result-list/search-result-list.component.html b/src/frontend/app/search/result-list/search-result-list.component.html
index 2b000d12101..027c7d1f130 100644
--- a/src/frontend/app/search/result-list/search-result-list.component.html
+++ b/src/frontend/app/search/result-list/search-result-list.component.html
@@ -6,33 +6,6 @@
*ngIf="!hideFilter"></app-filter-tool-adv-search>
</ng-template>
<ng-template #toolTemplate>
- <div class="filtersContent">
- <div style="flex: 1"></div>
- <div class="orderTool">
- <mat-form-field class="basket-order">
- <mat-icon matPrefix class="fa fa-list"></mat-icon>
- <mat-select [(ngModel)]="this.listProperties.order" (selectionChange)="updateFilters()"
- [disabled]="isLoadingResults ||Â data.length === 0">
- <mat-option [value]="column.id" *ngFor="let column of displayColsOrder">
- {{'lang.' + column.id | translate}}
- </mat-option>
- </mat-select>
- </mat-form-field>
- </div>
- <div class="ascDescTool">
- <button [disabled]="this.listProperties.order == '' || isLoadingResults ||Â data.length === 0"
- [style.opacity]="this.listProperties.order == '' ? '0.2' : '1'" mat-fab
- [title]="this.listProperties.orderDir == 'DESC' ? ('lang.descOrder' | translate) : ('lang.ascOrder' | translate)"
- style="color: rgba(0,0,0,0.38);" (click)="changeOrderDir();">
- <mat-icon *ngIf="this.listProperties.orderDir == 'DESC'" fontSet="fas"
- fontIcon="fa-sort-amount-down fa-2x">
- </mat-icon>
- <mat-icon *ngIf="this.listProperties.orderDir == 'ASC'" fontSet="fas"
- fontIcon="fa-sort-amount-up fa-2x">
- </mat-icon>
- </button>
- </div>
- </div>
<div class="filterBadges">
<span *ngIf="!emptyCriteria()" class="label badge-eraser" (click)="removeCriteria('_ALL')"
title="{{'lang.eraseAllFilters' | translate}}"><i class="fas fa-eraser"></i></span>
diff --git a/src/frontend/app/search/result-list/search-result-list.component.scss b/src/frontend/app/search/result-list/search-result-list.component.scss
index e632629ec84..ebcee2a4b58 100644
--- a/src/frontend/app/search/result-list/search-result-list.component.scss
+++ b/src/frontend/app/search/result-list/search-result-list.component.scss
@@ -195,4 +195,8 @@
color: red;
font-weight: bold;
opacity: 0.6;
+}
+
+::ng-deep .table-head {
+ height: auto;
}
\ No newline at end of file
diff --git a/src/frontend/app/search/result-list/search-result-list.component.ts b/src/frontend/app/search/result-list/search-result-list.component.ts
index 525a0bfe7d9..90dd5b19e4e 100644
--- a/src/frontend/app/search/result-list/search-result-list.component.ts
+++ b/src/frontend/app/search/result-list/search-result-list.component.ts
@@ -46,6 +46,7 @@ export class SearchResultListComponent implements OnInit, OnDestroy {
@Input() from: string = '';
@Output() loadingResult = new EventEmitter<boolean>();
+ @Output() dataResult = new EventEmitter<any>();
@ViewChild('filterTemplate', { static: true }) filterTemplate: TemplateRef<any>;
@ViewChild('toolTemplate', { static: true }) toolTemplate: TemplateRef<any>;
@@ -208,6 +209,7 @@ export class SearchResultListComponent implements OnInit, OnDestroy {
}
this.loading = false;
+ this.dataResult.emit([]);
}
@@ -315,6 +317,7 @@ export class SearchResultListComponent implements OnInit, OnDestroy {
this.isLoadingResults = false;
this.loadingResult.emit(false);
data = this.processPostData(data);
+ this.dataResult.emit(data);
this.templateColumns = data.templateColumns;
this.dataFilters = data.filters;
this.criteriaSearchService.updateListsPropertiesFilters(data.filters);
@@ -333,6 +336,7 @@ export class SearchResultListComponent implements OnInit, OnDestroy {
this.allResInBasket = [];
this.isLoadingResults = false;
this.loadingResult.emit(false);
+ this.dataResult.emit([]);
this.initSearch = false;
return of(false);
})
@@ -740,23 +744,6 @@ export class SearchResultListComponent implements OnInit, OnDestroy {
}
}
- updateFilters() {
- this.listProperties.page = 0;
-
- this.criteriaSearchService.updateListsProperties(this.listProperties);
-
- this.refreshDao();
- }
-
- changeOrderDir() {
- if (this.listProperties.orderDir === 'ASC') {
- this.listProperties.orderDir = 'DESC';
- } else {
- this.listProperties.orderDir = 'ASC';
- }
- this.updateFilters();
- }
-
getSelectedResources() {
return this.selectedRes;
}
diff --git a/src/frontend/app/search/search.component.html b/src/frontend/app/search/search.component.html
index 1bdc2f54152..081acbf9ce8 100644
--- a/src/frontend/app/search/search.component.html
+++ b/src/frontend/app/search/search.component.html
@@ -13,14 +13,16 @@
</div>
</div>
<div class="bg-head-content" [class.fullContainer]="appService.getViewMode()">
- <app-criteria-tool #appCriteriaTool [isLoadingResult]="loadingResult" (searchUrlGenerated)="appSearchResultList.launchSearch($event, true);"
- style="width:100%;padding-bottom: 10px;" (loaded)="initSearch()" (afterGetSearchTemplates)="setLaunchWithSearchTemplate($event)"></app-criteria-tool>
+ <app-criteria-tool #appCriteriaTool [isLoadingResult]="loadingResult" [data]="data" (searchUrlGenerated)="appSearchResultList.launchSearch($event, true);"
+ style="width:100%;padding-bottom: 10px;"
+ (loaded)="initSearch()" (afterGetSearchTemplates)="setLaunchWithSearchTemplate($event)" (refreshDaoResult)="appSearchResultList.listProperties = $event; appSearchResultList.refreshDao();"></app-criteria-tool>
<div id="toolTemplate" style="width: 100%;"></div>
</div>
</div>
<div class="container" [class.fullContainer]="appService.getViewMode()">
<div class="container-content">
- <app-search-result-list #appSearchResultList [searchTerm]="searchTerm" [appCriteriaTool]="appCriteriaTool" [sidenavRight]="sidenavRight" (loadingResult)="loadingResult=$event"></app-search-result-list>
+ <app-search-result-list #appSearchResultList [searchTerm]="searchTerm" [appCriteriaTool]="appCriteriaTool" [sidenavRight]="sidenavRight"
+ (loadingResult)="loadingResult=$event" (dataResult)="data = $event"></app-search-result-list>
</div>
</div>
</mat-sidenav-content>
diff --git a/src/frontend/app/search/search.component.ts b/src/frontend/app/search/search.component.ts
index 1258413b483..93101b4b53d 100644
--- a/src/frontend/app/search/search.component.ts
+++ b/src/frontend/app/search/search.component.ts
@@ -25,6 +25,7 @@ export class SearchComponent implements OnInit {
dialogRef: MatDialogRef<any>;
loadingResult: boolean = false;
+ data: any = [];
@ViewChild('snav2', { static: true }) sidenavRight: MatSidenav;
--
GitLab