From ec8f727a3cfa2357750728cca4d19f4169aff1db Mon Sep 17 00:00:00 2001
From: Alex ORLUC <alex.orluc@maarch.org>
Date: Thu, 20 Dec 2018 20:17:19 +0100
Subject: [PATCH] FEAT #8956 add subject + chrono filters
---
.../app/list/basket-list.component.html | 6 +-
.../app/list/basket-list.component.ts | 46 ++++++---------
.../list/filters/filters-list.component.html | 58 ++++++++++++++-----
.../list/filters/filters-list.component.scss | 13 +++++
.../list/filters/filters-list.component.ts | 26 +++++++--
src/frontend/lang/lang-en.ts | 2 +
src/frontend/lang/lang-fr.ts | 2 +
src/frontend/lang/lang-nl.ts | 2 +
src/frontend/service/filtersList.service.ts | 10 ++++
9 files changed, 117 insertions(+), 48 deletions(-)
create mode 100644 src/frontend/app/list/filters/filters-list.component.scss
diff --git a/src/frontend/app/list/basket-list.component.html b/src/frontend/app/list/basket-list.component.html
index e08f9ff67d1..24ca1bd005d 100644
--- a/src/frontend/app/list/basket-list.component.html
+++ b/src/frontend/app/list/basket-list.component.html
@@ -56,6 +56,8 @@
</mat-button-toggle-group>
<div class="filterBadges">
<span class="label label-info" title="{{lang.currentFilters}}" *ngFor="let category of this.listProperties.categories" (click)="openFilter()">{{category.label}}</span>
+ <span class="label label-info" title="{{lang.currentFilters}}" (click)="openFilter()">{{this.listProperties.reference}}</span>
+ <span class="label label-info" title="{{lang.currentFilters}}" (click)="openFilter()">{{this.listProperties.subject}}</span>
<span class="label label-info" title="{{lang.currentFilters}}" *ngFor="let priority of this.listProperties.priorities" (click)="openFilter()">{{priority.label}}</span>
<span class="label label-info" title="{{lang.currentFilters}}" *ngFor="let entity of this.listProperties.entities" (click)="openFilter()">{{entity.label}}</span>
</div>
@@ -140,14 +142,14 @@
</div>
</td>
</ng-container>
- <tr mat-row *matRowDef="let row; columns: displayedColumnsBasket;" (click)="test();"></tr>
+ <tr mat-row *matRowDef="let row; columns: displayedColumnsBasket;"></tr>
</table>
<div class="mat-paginator" style="min-height:48px;min-height: 48px;display: flex;justify-content: end;align-items: center;padding-right: 20px;">{{resultsLength}}
{{lang.entries}}</div>
</mat-card>
</mat-sidenav-content>
<mat-sidenav #snav2 mode="over" [fixedInViewport]="mobileQuery.matches" fixedTopGap="56" position='end'
- [opened]="mobileQuery.matches ? false : false" style="overflow-x:hidden;" [class.docView]="!filterMode" [ngStyle]="{'width': mobileMode ? '80%' : '40%'}">
+ [opened]="mobileQuery.matches ? false : false" style="overflow-x:hidden;" [class.docView]="!filterMode" [ngStyle]="{'width': mobileMode ? '80%' : '40%'}" autoFocus="false">
<div *ngIf="innerHtml && !filterMode" [innerHTML]="innerHtml" style="height: 100%;overflow: hidden;"></div>
<app-filters-list *ngIf="filterMode" [listProperties]="this.listProperties" (triggerEvent)="updateFilters()"></app-filters-list>
diff --git a/src/frontend/app/list/basket-list.component.ts b/src/frontend/app/list/basket-list.component.ts
index 1b20da95142..777f11b9301 100755
--- a/src/frontend/app/list/basket-list.component.ts
+++ b/src/frontend/app/list/basket-list.component.ts
@@ -45,14 +45,14 @@ export class BasketListComponent implements OnInit {
displayedMainData: any = [
{
- 'id' : 'alt_identifier',
- 'class' : 'softColorData centerData',
- 'icon' : ''
+ 'id': 'alt_identifier',
+ 'class': 'softColorData centerData',
+ 'icon': ''
},
{
- 'id' : 'subject',
- 'class' : 'longData',
- 'icon' : ''
+ 'id': 'subject',
+ 'class': 'longData',
+ 'icon': ''
}
];
@@ -91,15 +91,15 @@ export class BasketListComponent implements OnInit {
// ];
displayColsOrder = [
- {'id' : 'dest_user'},
- {'id' : 'creation_date'},
- {'id' : 'process_limit_date'},
- {'id' : 'destination'},
- {'id' : 'subject'},
- {'id' : 'alt_identifier'},
- {'id' : 'priority'},
- {'id' : 'status'},
- {'id' : 'type_id'}
+ { 'id': 'dest_user' },
+ { 'id': 'creation_date' },
+ { 'id': 'process_limit_date' },
+ { 'id': 'destination' },
+ { 'id': 'subject' },
+ { 'id': 'alt_identifier' },
+ { 'id': 'priority' },
+ { 'id': 'status' },
+ { 'id': 'type_id' }
]
exampleDatabase: ResultListHttpDao | null;
@@ -139,7 +139,6 @@ export class BasketListComponent implements OnInit {
this.basketUrl = this.coreUrl + 'rest/resourcesList/users/' + params['userSerialId'] + '/groups/' + params['groupSerialId'] + '/baskets/' + params['basketId'];
this.http.get(this.basketUrl)
.subscribe((data: any) => {
- console.log(data);
this.headerService.headerMessage = data.basketLabel;
this.filterMode = false;
window['MainHeaderComponent'].setSnav(this.sidenavLeft);
@@ -147,7 +146,7 @@ export class BasketListComponent implements OnInit {
this.exampleDatabase = new ResultListHttpDao(this.http, this.filtersListService);
this.listProperties = this.filtersListService.initListsProperties('bbain', params['groupSerialId'], params['basketId']);
-
+
this.initResultList(this.filtersListService.getUrlFilters());
}, () => {
@@ -224,13 +223,6 @@ export class BasketListComponent implements OnInit {
});
}
- test () {
- this.http.post("index.php?display=true&page=manage_action&module=core",{})
- .subscribe((data: any) => {
- console.log(data);
- });
- }
-
updateFiltersTool(e: any) {
this.listProperties.delayed = false;
this.listProperties.page = 0;
@@ -239,7 +231,7 @@ export class BasketListComponent implements OnInit {
this.listProperties[element] = true;
});
this.filtersListService.updateListsProperties(this.listProperties);
-
+
this.initResultList(this.filtersListService.getUrlFilters());
}
@@ -248,7 +240,7 @@ export class BasketListComponent implements OnInit {
this.listProperties.page = 0;
this.filtersListService.updateListsProperties(this.listProperties);
-
+
this.initResultList(this.filtersListService.getUrlFilters());
}
@@ -273,7 +265,7 @@ export class ResultListHttpDao {
constructor(private http: HttpClient, private filtersListService: FiltersListService) { }
getRepoIssues(sort: string, order: string, page: number, href: string, filters: string): Observable<BasketList> {
-
+
this.filtersListService.updateListsPropertiesPage(page);
let offset = page * 10;
const requestUrl = `${href}?limit=10&offset=${offset}${filters}`;
diff --git a/src/frontend/app/list/filters/filters-list.component.html b/src/frontend/app/list/filters/filters-list.component.html
index f23a41adcc2..ba361a2a912 100644
--- a/src/frontend/app/list/filters/filters-list.component.html
+++ b/src/frontend/app/list/filters/filters-list.component.html
@@ -1,47 +1,79 @@
<mat-nav-list disableRipple="true">
<h3 mat-subheader>{{lang.filterBy}}</h3>
- <mat-form-field appearance="outline" style="padding-left:10px;padding-right:10px;">
- <mat-label>Numéro chrono</mat-label>
- <input matInput>
- </mat-form-field>
+ <mat-expansion-panel #referencePan (opened)="setFocus(reference)">
+ <mat-expansion-panel-header>
+ <mat-panel-title>
+ {{lang.chronoNumber}}
+ </mat-panel-title>
+ <mat-panel-description>
+ </mat-panel-description>
+ </mat-expansion-panel-header>
+ <mat-form-field appearance="outline">
+
+ <input #reference matInput [(ngModel)]="this.listProperties.reference" (keyup.enter)="this.triggerEvent.emit();" (blur)="this.triggerEvent.emit();" placeholder="3 {{lang.passwordminLength}}">
+ <button mat-button *ngIf="this.listProperties.reference" matSuffix mat-icon-button aria-label="Clear"
+ (click)="this.listProperties.reference='';this.triggerEvent.emit();">
+ <mat-icon color="primary" fontSet="fas" fontIcon="fa-times"></mat-icon>
+ </button>
+ </mat-form-field>
+ </mat-expansion-panel>
+ <mat-expansion-panel #subjectPan (opened)="setFocus(subject)">
+ <mat-expansion-panel-header>
+ <mat-panel-title>
+ {{lang.subject}}
+ </mat-panel-title>
+ <mat-panel-description>
+ </mat-panel-description>
+ </mat-expansion-panel-header>
+ <mat-form-field appearance="outline">
+ <input #subject matInput [(ngModel)]="this.listProperties.subject" (keyup.enter)="this.triggerEvent.emit();" (blur)="this.triggerEvent.emit();" placeholder="3 {{lang.passwordminLength}}">
+ <button mat-button *ngIf="this.listProperties.subject" matSuffix mat-icon-button aria-label="Clear" (click)="this.listProperties.subject='';this.triggerEvent.emit();">
+ <mat-icon color="primary" fontSet="fas" fontIcon="fa-times"></mat-icon>
+ </button>
+ </mat-form-field>
+ </mat-expansion-panel>
<mat-expansion-panel #categoriesPan>
<mat-expansion-panel-header>
- <mat-panel-title style="color: rgba(0,0,0,0.54);font-size: 14px;font-weight: 500;">
- Categories
+ <mat-panel-title>
+ {{lang.categories}}
</mat-panel-title>
<mat-panel-description>
</mat-panel-description>
</mat-expansion-panel-header>
<mat-selection-list #categories (selectionChange)="updateFilters(categories, 'categories')">
- <mat-list-option checkboxPosition="before" color="primary" [value]="category.id" *ngFor="let category of categoriesList" [selected]="category.selected">
+ <mat-list-option checkboxPosition="before" color="primary" [value]="category.id" *ngFor="let category of categoriesList"
+ [selected]="category.selected">
{{category.label}}
</mat-list-option>
</mat-selection-list>
</mat-expansion-panel>
<mat-expansion-panel #prioritiesPan>
<mat-expansion-panel-header>
- <mat-panel-title style="color: rgba(0,0,0,0.54);font-size: 14px;font-weight: 500;">
- Priorités
+ <mat-panel-title>
+ {{lang.prioritiesAlt}}
</mat-panel-title>
<mat-panel-description>
</mat-panel-description>
</mat-expansion-panel-header>
<mat-selection-list #priorities (selectionChange)="updateFilters(priorities, 'priorities')">
- <mat-list-option checkboxPosition="before" color="primary" [value]="priority.id" *ngFor="let priority of prioritiesList" [selected]="priority.selected">
+ <mat-list-option checkboxPosition="before" color="primary" [value]="priority.id" *ngFor="let priority of prioritiesList"
+ [selected]="priority.selected">
{{priority.label}}
</mat-list-option>
</mat-selection-list>
</mat-expansion-panel>
<mat-expansion-panel #entitiesPan>
<mat-expansion-panel-header>
- <mat-panel-title style="color: rgba(0,0,0,0.54);font-size: 14px;font-weight: 500;">
- Services
+ <mat-panel-title>
+ {{lang.entities}}
</mat-panel-title>
<mat-panel-description>
</mat-panel-description>
</mat-expansion-panel-header>
+ Coming soon...
<mat-selection-list #entities (selectionChange)="updateFilters(entities, 'entities')">
- <mat-list-option checkboxPosition="before" color="primary" [value]="entity.id" *ngFor="let entity of entitiesList" [selected]="entity.selected">
+ <mat-list-option checkboxPosition="before" color="primary" [value]="entity.id" *ngFor="let entity of entitiesList"
+ [selected]="entity.selected">
{{entity.label}}
</mat-list-option>
</mat-selection-list>
diff --git a/src/frontend/app/list/filters/filters-list.component.scss b/src/frontend/app/list/filters/filters-list.component.scss
new file mode 100644
index 00000000000..30b25308723
--- /dev/null
+++ b/src/frontend/app/list/filters/filters-list.component.scss
@@ -0,0 +1,13 @@
+.mat-form-field-suffix {
+ top : 10px !important;
+}
+
+.mat-expansion-panel-header-title {
+ color: #F99830;
+ font-size: 14px;
+ font-weight: 500;
+}
+
+.mat-pseudo-checkbox-checked {
+ background: #135f7f;
+}
\ No newline at end of file
diff --git a/src/frontend/app/list/filters/filters-list.component.ts b/src/frontend/app/list/filters/filters-list.component.ts
index ccb80d2cf6b..07d4f8826b3 100644
--- a/src/frontend/app/list/filters/filters-list.component.ts
+++ b/src/frontend/app/list/filters/filters-list.component.ts
@@ -1,9 +1,9 @@
-import { Component, OnInit, Input, ViewChild, EventEmitter, Output } from '@angular/core';
+import { Component, OnInit, Input, ViewChild, EventEmitter, Output, ViewEncapsulation } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { LANG } from '../../translate.component';
import { NotificationService } from '../../notification.service';
import { FiltersListService } from '../../../service/filtersList.service';
-import { MatSelectionList, MatExpansionPanel } from '@angular/material';
+import { MatSelectionList, MatExpansionPanel, MatInput } from '@angular/material';
declare function $j(selector: any): any;
@@ -12,7 +12,9 @@ declare var angularGlobals: any;
@Component({
selector: 'app-filters-list',
templateUrl: 'filters-list.component.html',
- providers: [NotificationService]
+ styleUrls: ['filters-list.component.scss'],
+ providers: [NotificationService],
+ encapsulation: ViewEncapsulation.None
})
export class FiltersListComponent implements OnInit {
@@ -26,7 +28,9 @@ export class FiltersListComponent implements OnInit {
@ViewChild('categoriesPan') categoriesPan: MatExpansionPanel;
@ViewChild('prioritiesPan') prioritiesPan: MatExpansionPanel;
- @ViewChild('enetitiesPan') enetitiesPan: MatExpansionPanel;
+ @ViewChild('entitiesPan') entitiesPan: MatExpansionPanel;
+ @ViewChild('subjectPan') subjectPan: MatExpansionPanel;
+ @ViewChild('referencePan') referencePan: MatExpansionPanel;
@Output() triggerEvent = new EventEmitter<string>();
@@ -34,6 +38,12 @@ export class FiltersListComponent implements OnInit {
constructor(public http: HttpClient, private filtersListService: FiltersListService) { }
ngOnInit(): void {
+ if (this.listProperties.reference.length > 0) {
+ this.referencePan.open();
+ }
+ if (this.listProperties.subject.length > 0) {
+ this.subjectPan.open();
+ }
this.http.get("../../rest/priorities")
.subscribe((data: any) => {
this.prioritiesList = data.priorities;
@@ -46,7 +56,6 @@ export class FiltersListComponent implements OnInit {
}
});
});
- console.log(this.prioritiesList);
});
this.http.get("../../rest/categories")
@@ -61,7 +70,6 @@ export class FiltersListComponent implements OnInit {
}
});
});
- console.log(this.categoriesList);
});
}
updateFilters(e: MatSelectionList, id: string) {
@@ -74,4 +82,10 @@ export class FiltersListComponent implements OnInit {
});
this.triggerEvent.emit();
}
+
+ setFocus(elem: MatInput) {
+ setTimeout(() => {
+ elem.focus();
+ }, 200);
+ }
}
\ No newline at end of file
diff --git a/src/frontend/lang/lang-en.ts b/src/frontend/lang/lang-en.ts
index c225ca718d2..236332939d2 100755
--- a/src/frontend/lang/lang-en.ts
+++ b/src/frontend/lang/lang-en.ts
@@ -714,4 +714,6 @@ export const LANG_EN = {
"host" : "Host",
"filters" : "Filters",
"defaultOrder" : "Default order(s)",
+ "categories" : "Categories",
+ "prioritiesAlt" : "Priorities",
};
diff --git a/src/frontend/lang/lang-fr.ts b/src/frontend/lang/lang-fr.ts
index bc466f8406f..620b0849784 100755
--- a/src/frontend/lang/lang-fr.ts
+++ b/src/frontend/lang/lang-fr.ts
@@ -740,4 +740,6 @@ export const LANG_FR = {
"host" : "Hôte",
"filters" : "Filtres",
"defaultOrder" : "Tri(s) par défaut",
+ "categories" : "Catégories",
+ "prioritiesAlt" : "Priorités",
};
diff --git a/src/frontend/lang/lang-nl.ts b/src/frontend/lang/lang-nl.ts
index 6ac80c1b2b5..e435f353768 100755
--- a/src/frontend/lang/lang-nl.ts
+++ b/src/frontend/lang/lang-nl.ts
@@ -743,4 +743,6 @@ export const LANG_NL = {
"host" : "_TO_TRANSLATE",
"filters" : "_TO_TRANSLATE",
"defaultOrder" : "_TO_TRANSLATE",
+ "categories" : "_TO_TRANSLATE",
+ "prioritiesAlt" : "_TO_TRANSLATE",
};
diff --git a/src/frontend/service/filtersList.service.ts b/src/frontend/service/filtersList.service.ts
index f3eceda410d..b4389928b7f 100644
--- a/src/frontend/service/filtersList.service.ts
+++ b/src/frontend/service/filtersList.service.ts
@@ -7,6 +7,8 @@ interface listProperties {
'page' : string,
'order' : string,
'orderDir' : string,
+ 'reference' : string,
+ 'subject' : string,
'delayed': boolean,
'categories' : string[],
'priorities' : string[],
@@ -47,6 +49,8 @@ export class FiltersListService {
'page' : '0',
'order' : '',
'orderDir' : 'DESC',
+ 'reference' : '',
+ 'subject' : '',
'delayed': false,
'categories' : [],
'priorities' : [],
@@ -80,6 +84,12 @@ export class FiltersListService {
if (this.listsProperties[this.listsPropertiesIndex].order.length > 0) {
filters += '&order='+this.listsProperties[this.listsPropertiesIndex].order + ' ' + this.listsProperties[this.listsPropertiesIndex].orderDir;
}
+ if (this.listsProperties[this.listsPropertiesIndex].reference.length > 0) {
+ filters += '&reference='+this.listsProperties[this.listsPropertiesIndex].reference;
+ }
+ if (this.listsProperties[this.listsPropertiesIndex].subject.length > 0) {
+ filters += '&subject='+this.listsProperties[this.listsPropertiesIndex].subject;
+ }
if (this.listsProperties[this.listsPropertiesIndex].categories.length > 0) {
let cat: any[] = [];
this.listsProperties[this.listsPropertiesIndex].categories.forEach((element: any) => {
--
GitLab