valitydev/dashboard
14
0
Fork 0
mirror of https://github.com/valitydev/dashboard.git synced 2024-11-06 10:35:21 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

FRONTEND-558: Responisve reports (#456)

Browse Source
This commit is contained in:
Rinat Arsaev 2021-05-14 18:37:30 +03:00 committed by GitHub
parent 4120cfa05a
commit caed922812
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 47 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/app/sections/payment-section/reports/report-details/report-main-info/report-main-info.component.html
View File

@ -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>

4
src/app/sections/payment-section/reports/report-files/report-file/report-file.component.html
View File

@ -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>

5
src/app/sections/payment-section/reports/report-files/report-file/report-file.component.scss
View File

@ -2,4 +2,9 @@ $dsh-report-file-height: 48px;
.dsh-report-file {
height: $dsh-report-file-height;
&-name {
overflow: hidden;
text-overflow: ellipsis;
}
}

6
src/app/sections/payment-section/reports/report-files/report-files.component.html
View File

@ -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>
</div>

15
src/app/sections/payment-section/reports/reports-list/report-row-header/report-row-header.component.html
View File

@ -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>

10
src/app/sections/payment-section/reports/reports-list/report-row/report-row.component.html
View File

@ -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>

9
src/app/sections/payment-section/reports/reports-search-filters/reports-search-filters.component.html
View File

@ -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

17
src/app/sections/payment-section/reports/reports.component.html
View File

@ -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

1
src/components/indicators/status/status.component.scss
View File

@ -3,6 +3,7 @@ $dsh-status-icon-size: 8px;
:host {
display: inline-block;
white-space: nowrap;
}
.dsh-status {