From caed9228122b2b7587c943280e9772de50f66c31 Mon Sep 17 00:00:00 2001
From: Rinat Arsaev <11846445+KrickRay@users.noreply.github.com>
Date: Fri, 14 May 2021 18:37:30 +0300
Subject: [PATCH] FRONTEND-558: Responisve reports (#456)

---
 .../report-main-info.component.html             | 12 +++++-------
 .../report-file/report-file.component.html      |  4 ++--
 .../report-file/report-file.component.scss      |  5 +++++
 .../report-files/report-files.component.html    |  8 +++-----
 .../report-row-header.component.html            | 15 ++++++++-------
 .../report-row/report-row.component.html        | 10 +++++-----
 .../reports-search-filters.component.html       |  9 ++++++---
 .../reports/reports.component.html              | 17 ++++++++++++-----
 .../indicators/status/status.component.scss     |  1 +
 9 files changed, 47 insertions(+), 34 deletions(-)

diff --git a/src/app/sections/payment-section/reports/report-details/report-main-info/report-main-info.component.html b/src/app/sections/payment-section/reports/report-details/report-main-info/report-main-info.component.html
index b3af87d5..9989050d 100644
--- a/src/app/sections/payment-section/reports/report-details/report-main-info/report-main-info.component.html
+++ b/src/app/sections/payment-section/reports/report-details/report-main-info/report-main-info.component.html
@@ -1,12 +1,10 @@
-<div fxLayout="column" fxLayoutGap="24px" *transloco="let t; scope: 'reports'; read: 'reports.reportDetails'">
-    <div fxLayout="row" fxLayout.lt-md="column" fxLayoutAlign="space-between" fxLayoutGap="24px">
-        <dsh-details-item fxFlex="33" fxFlex.lt-md="100" [title]="t('status')">
+<div gdColumns="1fr" gdGap="24px" *transloco="let t; scope: 'reports'; read: 'reports.reportDetails'">
+    <div gdColumns="1fr" gdColumns.gt-sm="1fr 1fr 1fr" gdGap="24px">
+        <dsh-details-item [title]="t('status')">
             <dsh-status [color]="report.status | reportStatusColor">{{ report.status | reportStatusName }}</dsh-status>
         </dsh-details-item>
-        <dsh-details-item fxFlex="33" fxFlex.lt-md="100" [title]="t('type')">{{
-            report.reportType | reportTypeName
-        }}</dsh-details-item>
-        <dsh-details-item fxFlex="33" fxFlex.lt-md="100" [title]="t('createdAt')">{{
+        <dsh-details-item [title]="t('type')">{{ report.reportType | reportTypeName }}</dsh-details-item>
+        <dsh-details-item [title]="t('createdAt')">{{
             report.createdAt | date: 'dd MMMM yyyy, HH:mm:ss'
         }}</dsh-details-item>
     </div>
diff --git a/src/app/sections/payment-section/reports/report-files/report-file/report-file.component.html b/src/app/sections/payment-section/reports/report-files/report-file/report-file.component.html
index 07f0ea77..b9743e3d 100644
--- a/src/app/sections/payment-section/reports/report-files/report-file/report-file.component.html
+++ b/src/app/sections/payment-section/reports/report-files/report-file/report-file.component.html
@@ -1,5 +1,5 @@
-<div class="dsh-report-file" fxLayout="row" fxLayoutAlign="space-between center">
-    <div class="dsh-body-1">{{ file.filename }}</div>
+<div class="dsh-report-file" gdColumns="auto auto" gdAlignRows="space-between" gdAlignColumns="center center">
+    <div class="dsh-body-1 dsh-report-file-name">{{ file.filename }}</div>
     <button dsh-icon-button (click)="download(file.id)" [disabled]="isLoading$ | async">
         <mat-icon svgIcon="save"></mat-icon>
     </button>
diff --git a/src/app/sections/payment-section/reports/report-files/report-file/report-file.component.scss b/src/app/sections/payment-section/reports/report-files/report-file/report-file.component.scss
index 49bdd27d..b0928e95 100644
--- a/src/app/sections/payment-section/reports/report-files/report-file/report-file.component.scss
+++ b/src/app/sections/payment-section/reports/report-files/report-file/report-file.component.scss
@@ -2,4 +2,9 @@ $dsh-report-file-height: 48px;
 
 .dsh-report-file {
     height: $dsh-report-file-height;
+
+    &-name {
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
 }
diff --git a/src/app/sections/payment-section/reports/report-files/report-files.component.html b/src/app/sections/payment-section/reports/report-files/report-files.component.html
index 8032c797..77dd2193 100644
--- a/src/app/sections/payment-section/reports/report-files/report-files.component.html
+++ b/src/app/sections/payment-section/reports/report-files/report-files.component.html
@@ -1,11 +1,9 @@
-<div fxLayout="column" fxLayoutGap="24px" *transloco="let t; scope: 'reports'; read: 'reports.reportFiles'">
-    <div fxLayout="row" fxLayoutAlign="space-between center">
+<div gdColumns="1fr" gdGap="24px" *transloco="let t; scope: 'reports'; read: 'reports.reportFiles'">
+    <div fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="8px">
         <div class="dsh-title">{{ t('title') }}</div>
         <button dsh-stroked-button color="accent" [disabled]="isLoading$ | async" (click)="downloadAll()">
             {{ t('downloadAll') }}
         </button>
     </div>
-    <div fxLayout="column" fxLayoutGap="16px">
-        <dsh-report-file *ngFor="let file of files" [reportID]="reportID" [file]="file"></dsh-report-file>
-    </div>
+    <dsh-report-file *ngFor="let file of files" [reportID]="reportID" [file]="file"></dsh-report-file>
 </div>
diff --git a/src/app/sections/payment-section/reports/reports-list/report-row-header/report-row-header.component.html b/src/app/sections/payment-section/reports/reports-list/report-row-header/report-row-header.component.html
index 64ebc645..aaf069de 100644
--- a/src/app/sections/payment-section/reports/reports-list/report-row-header/report-row-header.component.html
+++ b/src/app/sections/payment-section/reports/reports-list/report-row-header/report-row-header.component.html
@@ -1,12 +1,13 @@
 <dsh-row
     *transloco="let t; scope: 'reports'; read: 'reports.headerRow'"
-    fxLayout="row"
-    fxLayoutAlign="space-between center"
-    fxLayoutGap="24px"
+    gdColumns="1fr 1fr"
+    gdColumns.gt-sm="4fr 3fr 5fr 6fr"
+    gdAlignColumns="center center"
+    gdGap="24px"
     color="primary"
 >
-    <dsh-row-header-label fxFlex="20" fxFlex.lt-md="33">{{ t('createdAt') }}</dsh-row-header-label>
-    <dsh-row-header-label fxFlex="15" fxFlex.lt-md="33">{{ t('status') }}</dsh-row-header-label>
-    <dsh-row-header-label fxFlex="25" fxFlex.lt-md="33">{{ t('type') }}</dsh-row-header-label>
-    <dsh-row-header-label fxFlex="40" fxHide.lt-md> {{ t('period') }} </dsh-row-header-label>
+    <dsh-row-header-label>{{ t('createdAt') }}</dsh-row-header-label>
+    <dsh-row-header-label>{{ t('status') }}</dsh-row-header-label>
+    <dsh-row-header-label fxHide.lt-md>{{ t('type') }}</dsh-row-header-label>
+    <dsh-row-header-label fxHide.lt-md>{{ t('period') }}</dsh-row-header-label>
 </dsh-row>
diff --git a/src/app/sections/payment-section/reports/reports-list/report-row/report-row.component.html b/src/app/sections/payment-section/reports/reports-list/report-row/report-row.component.html
index 0f36060c..ca3829e5 100644
--- a/src/app/sections/payment-section/reports/reports-list/report-row/report-row.component.html
+++ b/src/app/sections/payment-section/reports/reports-list/report-row/report-row.component.html
@@ -1,12 +1,12 @@
-<dsh-row fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="24px">
-    <dsh-row-label fxFlex="20" fxFlex.lt-md="33">
+<dsh-row gdColumns="1fr 1fr" gdColumns.gt-sm="4fr 3fr 5fr 6fr" gdAlignColumns="center center" gdGap="24px">
+    <dsh-row-label>
         {{ report.createdAt | date: 'dd MMMM yyyy, HH:mm' }}
     </dsh-row-label>
-    <dsh-row-label fxFlex="15" fxFlex.lt-md="33">
+    <dsh-row-label>
         <dsh-status [color]="report.status | reportStatusColor">{{ report.status | reportStatusName }}</dsh-status>
     </dsh-row-label>
-    <dsh-row-label fxFlex="25" fxFlex.lt-md="33">{{ report.reportType | reportTypeName }}</dsh-row-label>
-    <dsh-row-label fxFlex="40" fxHide.lt-md>
+    <dsh-row-label fxHide.lt-md>{{ report.reportType | reportTypeName }}</dsh-row-label>
+    <dsh-row-label fxHide.lt-md>
         {{ report.fromTime | date: 'dd MMMM yyyy' }} - {{ report.toTime | date: 'dd MMMM yyyy' }}
     </dsh-row-label>
 </dsh-row>
diff --git a/src/app/sections/payment-section/reports/reports-search-filters/reports-search-filters.component.html b/src/app/sections/payment-section/reports/reports-search-filters/reports-search-filters.component.html
index b2fe6099..29f49afc 100644
--- a/src/app/sections/payment-section/reports/reports-search-filters/reports-search-filters.component.html
+++ b/src/app/sections/payment-section/reports/reports-search-filters/reports-search-filters.component.html
@@ -1,8 +1,11 @@
 <div
     *transloco="let t; scope: 'reports'; read: 'reports.searchFilters'"
-    fxLayout="row"
-    fxLayoutGap="16px"
-    fxLayoutAlign="center center"
+    gdColumns="1fr"
+    gdColumns.gt-sm="repeat(3, auto)"
+    gdAlignRows="space-between start"
+    gdAlignColumns=" center"
+    gdGap="24px"
+    gdGap.gt-sm="16px"
 >
     <div class="dsh-body-1" fxHide.lt-md>{{ t('dateRangeDescription') }}:</div>
     <dsh-daterange-filter
diff --git a/src/app/sections/payment-section/reports/reports.component.html b/src/app/sections/payment-section/reports/reports.component.html
index 122ec8f4..ee845acd 100644
--- a/src/app/sections/payment-section/reports/reports.component.html
+++ b/src/app/sections/payment-section/reports/reports.component.html
@@ -1,13 +1,20 @@
 <div class="dsh-reports" *transloco="let r; scope: 'reports'; read: 'reports'" fxLayout="column" fxLayoutGap="32px">
     <h1 class="dsh-display-1">{{ r('title') }}</h1>
-    <div fxLayout="row" fxLayoutAlign="space-between" fxLayoutGap="16px">
-        <dsh-reports-search-filters
-            [initParams]="initSearchParams$ | async"
-            (searchParamsChanges)="searchParamsChanges($event)"
-        ></dsh-reports-search-filters>
+    <div
+        gdColumns="1fr"
+        gdColumns.gt-sm="repeat(2, auto)"
+        gdAlignColumns="center center"
+        gdAlignRows="space-between start"
+        gdGap="32px"
+    >
         <button dsh-button color="accent" (click)="create()">
             {{ r('openCreateReport') }}
         </button>
+        <dsh-reports-search-filters
+            gdRow.gt-sm="1"
+            [initParams]="initSearchParams$ | async"
+            (searchParamsChanges)="searchParamsChanges($event)"
+        ></dsh-reports-search-filters>
     </div>
     <div fxLayout="column" fxLayoutGap="16px">
         <dsh-reports-list
diff --git a/src/components/indicators/status/status.component.scss b/src/components/indicators/status/status.component.scss
index 32db5b5e..ca069e1c 100644
--- a/src/components/indicators/status/status.component.scss
+++ b/src/components/indicators/status/status.component.scss
@@ -3,6 +3,7 @@ $dsh-status-icon-size: 8px;
 
 :host {
     display: inline-block;
+    white-space: nowrap;
 }
 
 .dsh-status {