From c7b61404c667561fa2ac0c7b9c32db8a494d0526 Mon Sep 17 00:00:00 2001
From: Alex ORLUC <alex.orluc@maarch.org>
Date: Sat, 25 Aug 2018 05:01:03 +0200
Subject: [PATCH] FEAT #8218 modif basket list component
---
.../Views/basket-home.component.html | 2 +-
.../Views/basket-list.component.html | 23 ++++++++++++++-----
.../Views/home.component.html | 13 +++++++++--
.../app/basket/basket-home.component.ts | 8 +++++++
.../app/basket/basket-list.component.ts | 4 ++++
.../js/angular/app/home.component.ts | 7 +++---
6 files changed, 45 insertions(+), 12 deletions(-)
diff --git a/apps/maarch_entreprise/Views/basket-home.component.html b/apps/maarch_entreprise/Views/basket-home.component.html
index 34398250482..b8ded992fa2 100644
--- a/apps/maarch_entreprise/Views/basket-home.component.html
+++ b/apps/maarch_entreprise/Views/basket-home.component.html
@@ -22,7 +22,7 @@
{{basket.basket_name}}<br/><small color="primary">({{lang.redirectedTo}} {{basket.redirectedUser}})</small>
</p>
</a>
- <a mat-list-item *ngIf="!basket.redirected" routerLink="/basketList/{{regroupedBasket.groupSerialId}}/baskets/{{basket.basket_id}}" style="cursor:pointer;" [ngStyle]="{'opacity': basket.resourceNumber==0 ? '0.5' : '1'}">
+ <a mat-list-item *ngIf="!basket.redirected" (click)="closePanelLeft();" routerLink="/basketList/{{regroupedBasket.groupSerialId}}/baskets/{{basket.basket_id}}" style="cursor:pointer;" [ngStyle]="{'opacity': basket.resourceNumber==0 ? '0.5' : '1'}">
<mat-icon [ngStyle]="{'color': basket.color}" *ngIf="!mobileMode" mat-list-icon class="fa fa-inbox"></mat-icon>
<span *ngIf="basket.resourceNumber==0" class="badge" style="min-width:auto;">{{basket.resourceNumber}}</span>
<span *ngIf="basket.resourceNumber!=0" bgcolor="warn" class="badge" style="min-width:auto;">{{basket.resourceNumber}}</span>
diff --git a/apps/maarch_entreprise/Views/basket-list.component.html b/apps/maarch_entreprise/Views/basket-list.component.html
index d0b417e715c..bef950ad6e9 100644
--- a/apps/maarch_entreprise/Views/basket-list.component.html
+++ b/apps/maarch_entreprise/Views/basket-list.component.html
@@ -4,7 +4,7 @@
autoFocus="false" style="overflow-x:hidden;" [ngStyle]="{'width': mobileMode ? '80%' : '400px'}">
<menu-shortcut></menu-shortcut>
<menu-nav></menu-nav>
- <basket-home *ngIf="homeData" [homeData]="homeData"></basket-home>
+ <basket-home *ngIf="homeData" [homeData]="homeData" [snavL]="snav"></basket-home>
<mat-divider></mat-divider>
</mat-sidenav>
<mat-sidenav-content>
@@ -20,7 +20,11 @@
style="width:100%;table-layout: fixed;">
<!-- Number Column -->
<ng-container matColumnDef="res_id">
- <td mat-cell *matCellDef="let row" style="text-align:center;width:10%;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;padding: 5px;">
+ <td mat-cell *matCellDef="let row" [ngStyle]="{'width': mobileMode ? '30%' : '10%'}" style="text-align:center;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;padding: 5px;vertical-align: top;">
+ <div *ngIf="row.closing_date == null && mobileMode" id="{{row.res_id}}_creation_date" style="color: rgba(0,0,0,0.4);font-size: 90%;overflow: hidden;text-overflow: ellipsis;"
+ title='{{row.creation_date | date : "le dd/MM/y à HH:mm"}}'>
+ <i class="fa fa-calendar" title="date d'enregistrement"></i> {{row.creation_date | timeAgo}}
+ </div>
<div style="overflow: hidden;text-overflow: ellipsis;">
<mat-icon [ngStyle]="{'color': row.priority_color}" color="primary" class="{{row.status_icon.charAt(0)}}{{row.status_icon.charAt(1)}} {{row.status_icon}} {{row.status_icon.charAt(0)}}{{row.status_icon.charAt(1)}}-2x" title="{{row.status_label}}"></mat-icon>
</div>
@@ -31,11 +35,18 @@
</td>
</ng-container>
<ng-container matColumnDef="subject">
- <td mat-cell *matCellDef="let row" style="width:50%;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;padding: 5px;">
+ <td mat-cell *matCellDef="let row" style="width:50%;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;padding: 5px;vertical-align: top;">
+ <div *ngIf="row.closing_date == null && mobileMode" style="color: rgba(0,0,0,0.4);font-size: 90%;overflow: hidden;text-overflow: ellipsis;text-align: right;">
+ <i class="fa fa-stopwatch" title="date limite de traitement"></i>
+ <span [innerHTML]="row.process_limit_date | timeLimit" title='{{row.process_limit_date | date : "le dd/MM/y à HH:mm"}}'></span>
+ </div>
<div style="overflow: hidden;text-overflow: ellipsis;" title="{{row.subject}}">
- <span class="label" [ngStyle]="{'background': row.priority_color}">{{row.priority_label}}</span>
+ <span *ngIf="!mobileMode" class="label" [ngStyle]="{'background': row.priority_color}">{{row.priority_label}}</span>
<span>{{row.subject}}</span>
</div>
+ <div *ngIf="mobileMode" style="padding-top: 5px;color: rgba(0,0,0,0.4);font-size: 90%;overflow: hidden;text-overflow: ellipsis;text-align: right;">
+ {{row.dest_user}}
+ </div>
<!--<div>
<button mat-stroked-button color="primary" style="margin:5px;line-height: 20px;width: 150px;overflow: hidden;text-overflow: ellipsis;">réponse du zpfezk zekf opezf</button>
<button mat-stroked-button color="primary" style="margin:5px;line-height: 20px;width: 150px;overflow: hidden;text-overflow: ellipsis;">réponse du zpfezk zekf opezf</button>
@@ -47,7 +58,7 @@
</td>
</ng-container>
<ng-container matColumnDef="contact_society">
- <td mat-cell *matCellDef="let row" style="width:25%;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;padding: 5px;">
+ <td mat-cell *matCellDef="let row" style="width:25%;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;padding: 5px;vertical-align: top;">
<div style="overflow: hidden;text-overflow: ellipsis;">
<i class="fa fa-address-card" color="primary"></i>
<span *ngIf="row.contact_lastname==''">{{row.contact_society}}</span>
@@ -63,7 +74,7 @@
</ng-container>
<ng-container matColumnDef="creation_date">
- <td mat-cell *matCellDef="let row" style="text-align: right;width:15%;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;padding: 5px;">
+ <td mat-cell *matCellDef="let row" style="text-align: right;width:15%;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;padding: 5px;vertical-align: top;">
<div *ngIf="row.closing_date == null" id="{{row.res_id}}_creation_date" style="color: rgba(0,0,0,0.4);font-size: 90%;overflow: hidden;text-overflow: ellipsis;"
title='{{row.creation_date | date : "le dd/MM/y à HH:mm"}}'>
<i class="fa fa-calendar" title="date d'enregistrement"></i> {{row.creation_date | timeAgo}}
diff --git a/apps/maarch_entreprise/Views/home.component.html b/apps/maarch_entreprise/Views/home.component.html
index be394ccf77f..f30a5191052 100755
--- a/apps/maarch_entreprise/Views/home.component.html
+++ b/apps/maarch_entreprise/Views/home.component.html
@@ -4,7 +4,7 @@
autoFocus="false" style="overflow-x:hidden;" [ngStyle]="{'width': mobileMode ? '80%' : '400px'}">
<menu-shortcut></menu-shortcut>
<menu-nav></menu-nav>
- <basket-home *ngIf="homeData" [homeData]="homeData"></basket-home>
+ <basket-home *ngIf="homeData" [homeData]="homeData" [snavL]="snav"></basket-home>
<mat-divider></mat-divider>
</mat-sidenav>
<mat-sidenav-content>
@@ -25,7 +25,11 @@
<mat-tab label="Mes derniers courriers">
<table mat-table [dataSource]="dataSource" matSort matSortActive="res_id" matSortDisableClear matSortDirection="asc" style="width:100%;table-layout: fixed;">
<ng-container matColumnDef="res_id">
- <td mat-cell *matCellDef="let row" style="text-align:center;width:15%;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;padding: 5px;">
+ <td mat-cell *matCellDef="let row" [ngStyle]="{'width': mobileMode ? '30%' : '10%'}" style="text-align:center;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;padding: 5px;vertical-align: top;">
+ <div *ngIf="row.closing_date == null && mobileMode" id="{{row.res_id}}_creation_date" style="color: rgba(0,0,0,0.4);font-size: 90%;overflow: hidden;text-overflow: ellipsis;"
+ title='{{row.creation_date | date : "le dd/MM/y à HH:mm"}}'>
+ <i class="fa fa-calendar" title="date d'enregistrement"></i> {{row.creation_date | timeAgo}}
+ </div>
<div style="overflow: hidden;text-overflow: ellipsis;">
<mat-icon [ngStyle]="{'color': row.priority_color}" color="primary" class="{{row.status_icon.charAt(0)}}{{row.status_icon.charAt(1)}} {{row.status_icon}} {{row.status_icon.charAt(0)}}{{row.status_icon.charAt(1)}}-2x" title="{{row.status_label}}"></mat-icon>
</div>
@@ -41,6 +45,11 @@
<span class="label" [ngStyle]="{'background': row.priority_color}">{{row.priority_label}}</span>
<span>{{row.subject}}</span>
</div>
+ <div *ngIf="mobileMode" style="text-align: right">
+ <button mat-icon-button (click)="$event.stopPropagation();goTo(row);">
+ <mat-icon color="primary" class="fa fa-eye fa-2x"></mat-icon>
+ </button>
+ </div>
</td>
</ng-container>
<ng-container matColumnDef="contact_society">
diff --git a/apps/maarch_entreprise/js/angular/app/basket/basket-home.component.ts b/apps/maarch_entreprise/js/angular/app/basket/basket-home.component.ts
index c0175124af9..85eabf9d163 100644
--- a/apps/maarch_entreprise/js/angular/app/basket/basket-home.component.ts
+++ b/apps/maarch_entreprise/js/angular/app/basket/basket-home.component.ts
@@ -1,6 +1,7 @@
import { Component, OnInit, Input } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { LANG } from '../translate.component';
+import { MatSidenav } from '@angular/material';
declare function $j(selector: any) : any;
declare var angularGlobals : any;
@@ -17,6 +18,7 @@ export class BasketHomeComponent implements OnInit {
mobileMode : boolean = false;
@Input() homeData: any;
+ @Input() snavL: MatSidenav;
constructor(public http: HttpClient) {
this.mobileMode = angularGlobals.mobileMode;
@@ -33,4 +35,10 @@ export class BasketHomeComponent implements OnInit {
goToRedirect(basketId:any,owner:any) {
window.location.href="index.php?page=view_baskets&module=basket&baskets="+basketId+"_"+owner+"&groupId=";
}
+
+ closePanelLeft() {
+ if(this.mobileMode) {
+ this.snavL.close();
+ }
+ }
}
diff --git a/apps/maarch_entreprise/js/angular/app/basket/basket-list.component.ts b/apps/maarch_entreprise/js/angular/app/basket/basket-list.component.ts
index 4f6122bb072..564af5ddda7 100644
--- a/apps/maarch_entreprise/js/angular/app/basket/basket-list.component.ts
+++ b/apps/maarch_entreprise/js/angular/app/basket/basket-list.component.ts
@@ -58,6 +58,10 @@ export class BasketListComponent implements OnInit {
this.loading = false;
+ if (this.mobileMode) {
+ this.displayedColumnsBasket = ['res_id', 'subject'];
+ }
+
this.http.get(this.coreUrl + "rest/home")
.subscribe((data: any) => {
this.homeData = data;
diff --git a/apps/maarch_entreprise/js/angular/app/home.component.ts b/apps/maarch_entreprise/js/angular/app/home.component.ts
index 86cb5f11f43..8bff14b41d2 100755
--- a/apps/maarch_entreprise/js/angular/app/home.component.ts
+++ b/apps/maarch_entreprise/js/angular/app/home.component.ts
@@ -52,6 +52,10 @@ export class HomeComponent extends AutoCompletePlugin implements OnInit {
}
ngOnInit(): void {
+ if (this.mobileMode) {
+ this.displayedColumns = ['res_id', 'subject'];
+ }
+
window['MainHeaderComponent'].refreshTitle(this.lang.home);
window['MainHeaderComponent'].setSnav(this.snav);
window['MainHeaderComponent'].setSnavRight(null);
@@ -75,10 +79,8 @@ export class HomeComponent extends AutoCompletePlugin implements OnInit {
goTo(row:any){
if (this.docUrl == this.coreUrl+'rest/res/'+row.res_id+'/content' && this.sidenavRight.opened) {
- this.displayedColumns = ['res_id', 'subject', 'creation_date'];
this.sidenavRight.close();
} else {
- this.displayedColumns = ['res_id', 'subject', 'creation_date'];
this.docUrl = this.coreUrl+'rest/res/'+row.res_id+'/content';
this.innerHtml = this.sanitizer.bypassSecurityTrustHtml(
"<object style='height:100%;width:100%;' data='" + this.docUrl + "' type='application/pdf' class='embed-responsive-item'>" +
@@ -86,7 +88,6 @@ export class HomeComponent extends AutoCompletePlugin implements OnInit {
"</object>");
this.sidenavRight.open();
}
- //window.open(this.coreUrl+'rest/res/'+row.res_id+'/content');
}
goToDetail(row:any){
--
GitLab