FEAT #8218 modif basket list component

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>

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>&nbsp;
+                                <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>&nbsp;
+                                <span *ngIf="!mobileMode" class="label" [ngStyle]="{'background': row.priority_color}">{{row.priority_label}}</span>&nbsp;
                                 <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>&nbsp;
                                 <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}}

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>&nbsp;
                                         <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">

apps/maarch_entreprise/js/angular/app/basket/basket-home.component.ts

 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();
+        }
+    }
 }

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;

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){