[EDELIVERY-13777] Access token - add relevant data to collapsed

smp-angular/src/_smp-all-themes.scss

@@ -16,9 +16,7 @@
   @include access-token-panel.set-component-colors($theme);
   @include expandable-panel.set-component-colors($theme);
   /* shared classes*/
-  .smp-data-panel:hover {
-    background-color: smp.get-theme-color($theme, primary, 300);
-  }
+
 
   .datatable-row-odd {
     background-color: smp.get-theme-color($theme, primary, 50, 0.2) !important;

smp-angular/src/app/common/global-lookups.ts

@@ -116,6 +116,12 @@ export class GlobalLookups {
     return result;
   }
 
+  public getDateFormat(): string {
+    let locale = this.getCurrentLocale();
+    locale = locale ? locale : this.DEFAULT_LOCALE;
+    return getLocaleDateFormat(locale, FormatWidth.Short);
+  }
+
   private format(str, opt_values) {
     if (opt_values) {
       str = str.replace(/\{([^}]+)}/g, function (match, key) {

smp-angular/src/app/user-settings/user-access-tokens/access-token-panel/_access-token-panel.component-theme.scss

 @use '../../../../_smp-theme-helper' as smp;
 
 @mixin set-component-colors($theme) {
-  .access-token:hover {
-    background-color: smp.get-theme-color($theme, primary, 0.2);
-  }
+
 }
 
 

smp-angular/src/app/user-settings/user-access-tokens/access-token-panel/access-token-panel.component.html

 <mat-expansion-panel [expanded]="_expanded">
-  <mat-expansion-panel-header style="height: 72px">
-    <div style="display: flex; flex-direction: column;width: 100%; padding-right: 10px">
+  <mat-expansion-panel-header style="height: 80px">
+    <div style="display: flex; flex-direction: column;width: 100%;margin-right: 10px;" >
       <smp-warning-panel *ngIf="!!_credential?.expired;" class="smp-certificate-warning-panel"
                          [padding]="false"
                          icon="error"
@@ -27,9 +27,15 @@
           </button>
         </div>
       </div>
+      <div style="display: flex; flex-direction: row; font-size: 0.8em; ">
+        <span>{{ credentialForm.controls["activeFrom"].value | date: dateFormat }}</span>
+        &nbsp;&nbsp;-&nbsp;&nbsp;
+        <span>{{ credentialForm.controls["expireOn"].value | date: dateFormat }}</span>;
+        <span>{{ credentialForm.controls["description"].value }}</span>
+      </div>
     </div>
   </mat-expansion-panel-header>
-  <div class="panel smp-data-panel"  [formGroup]="credentialForm">
+  <div class="smp-data-panel"  [formGroup]="credentialForm">
     <mat-form-field style="width: 100%">
       <mat-label>{{ "access.token.panel.label.description" | translate }}</mat-label>
       <input matInput

smp-angular/src/app/user-settings/user-access-tokens/access-token-panel/access-token-panel.component.scss

+.access-token-panel {
+
+
+  border-bottom: 1px solid #e0e0e0;
+}

smp-angular/src/app/user-settings/user-access-tokens/access-token-panel/access-token-panel.component.ts

@@ -6,6 +6,7 @@ import {
 } from "@angular/forms";
 import {CredentialRo} from "../../../security/credential.model";
 import {BeforeLeaveGuard} from "../../../window/sidenav/navigation-on-leave-guard";
+import {GlobalLookups} from "../../../common/global-lookups";
 
 
 @Component({
@@ -23,7 +24,8 @@ export class AccessTokenPanelComponent implements BeforeLeaveGuard {
   credentialForm: FormGroup;
   _expanded: boolean = false;
 
-  constructor(private formBuilder: FormBuilder) {
+  constructor(private formBuilder: FormBuilder,
+              private globalLookups: GlobalLookups) {
     this.credentialForm = formBuilder.group({
       // common values
       'active': new FormControl({value: '', disabled: false}),
@@ -89,4 +91,8 @@ export class AccessTokenPanelComponent implements BeforeLeaveGuard {
   isDirty(): boolean {
     return this.credentialForm.dirty;
   }
+
+  get dateFormat(): string {
+    return this.globalLookups.getDateFormat();
+  }
 }

smp-angular/src/app/user-settings/user-access-tokens/user-access-tokens.component.html

@@ -3,33 +3,43 @@
               text="{{ 'user.access.tokens.text' | translate }}"
               [labelColumnContent]="commonToolbar">
 
-    <table mat-table id="user-access-token-table" [dataSource]="dataSource" class="panel smp-data-panel" >
+    <table mat-table id="user-access-token-table" [dataSource]="dataSource"
+           class="panel smp-data-panel">
       <ng-container matColumnDef="accessTokens">
-        <th mat-header-cell *matHeaderCellDef>{{ "user.access.tokens.label.access.tokens" | translate }}</th>
+        <th mat-header-cell
+            *matHeaderCellDef>{{ "user.access.tokens.label.access.tokens" | translate }}
+        </th>
         <td mat-cell *matCellDef="let token"
             [ngClass]="{'datatable-row-error': token.invalid}"
-            [matTooltip]="token.name">
-          <access-token-panel (onDeleteEvent)="onDeleteItemClicked(token)"
+            [matTooltip]="token.name"
+        class="access-token-panel">
+          <access-token-panel class="access-token-panel"
+                              (onDeleteEvent)="onDeleteItemClicked(token)"
                               (onSaveEvent)="onSaveItemClicked(token)"
                               [credential]="token"></access-token-panel>
 
         </td>
-        <tr mat-header-row class="user-access-token-table-header" *matHeaderRowDef="displayedColumns"></tr>
-        <tr mat-row class="user-access-token-table-data" *matRowDef="let myRowData; columns: displayedColumns"></tr>
+        <tr mat-header-row class="user-access-token-table-header"
+            *matHeaderRowDef="displayedColumns"></tr>
+        <tr mat-row class="user-access-token-table-data"
+            *matRowDef="let myRowData; columns: displayedColumns"></tr>
       </ng-container>
     </table>
 
     <mat-paginator class="mat-elevation-z2" id="tokens-paginator"
                    [hidePageSize]="true"
-                   [pageSize]="5" attr.aria-label="{{ 'user.access.tokens.label.select.page' | translate }}"></mat-paginator>
+                   [pageSize]="5"
+                   attr.aria-label="{{ 'user.access.tokens.label.select.page' | translate }}"></mat-paginator>
   </data-panel>
 
 </div>
 
 <ng-template #commonToolbar>
 
-  <button id="createAccessTokenButton" mat-raised-button color="primary" matTooltip="{{ 'user.access.tokens.tooltip.create' | translate }}" style="margin: 2em "
-  (click)="createNewAccessToken()">
+  <button id="createAccessTokenButton" mat-raised-button color="primary"
+          matTooltip="{{ 'user.access.tokens.tooltip.create' | translate }}"
+          style="margin: 2em "
+          (click)="createNewAccessToken()">
     <mat-icon>key</mat-icon>
     <span>{{ "user.access.tokens.button.create" | translate }}</span>
   </button>

smp-angular/src/app/user-settings/user-access-tokens/user-access-tokens.component.scss

@@ -17,6 +17,7 @@
 #user-access-token-table {
   padding: 0;
   border: none;
+  background-color: transparent !important;
 }
 
 .user-access-token-table-header {
@@ -25,4 +26,5 @@
 
 .user-access-token-table-data td {
   padding: 0;
+  background-color: transparent !important;
 }