diff --git a/src/frontend/app/list/basket-list.component.html b/src/frontend/app/list/basket-list.component.html index e08f9ff67d1b17b1f167474c3b2ed78e0dd659c8..24ca1bd005d9013242d9d1577268038c7b9ab7a2 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 1b20da951424879ca94233b716b7665a5bf85e44..777f11b9301ff8ae8fe0163ab4a8bde9b2649c3e 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 f23a41adcc2cb0a135e9275b557a44db4e500f55..ba361a2a9125248570bae90fd232100bd5642b63 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 0000000000000000000000000000000000000000..30b25308723ffc6d557a34e2cb5e3076157f773e --- /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 ccb80d2cf6bb46a252d7d889ccfd16ac18028b59..07d4f8826b341cb244f02af2afa1747198c6df83 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 c225ca718d22ac4f8323628e7b702872ce1ef5be..236332939d292e6246408ace06e7f26a82a9fb8c 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 bc466f8406f0bb85c366c163d044494de4ab61ad..620b08497845c6c944a0d7221bf8956958aa3004 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 6ac80c1b2b5f15e2a830ad520b5916c6f8bfa6c9..e435f353768c3d37887ede21d00cf7b510e3f6d8 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 f3eceda410d6c4be0c5c39348687ff815589ce50..b4389928b7f1378ef4f09672f282ffb2c8d8d9f4 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) => {