diff --git a/src/app/sections/payment-section/reports/reports.module.ts b/src/app/sections/payment-section/reports/reports.module.ts
index b08c344c..f6203644 100644
--- a/src/app/sections/payment-section/reports/reports.module.ts
+++ b/src/app/sections/payment-section/reports/reports.module.ts
@@ -29,6 +29,7 @@ import { LastUpdatedModule } from '../operations/last-updated/last-updated.modul
import { SpinnerModule } from '../../../spinner';
import { ActionsComponent } from './table/actions';
import { CreateReportDialogComponent } from './create-report-dialog';
+import { FormControlsModule } from '../../../form-controls';
@NgModule({
imports: [
@@ -54,7 +55,8 @@ import { CreateReportDialogComponent } from './create-report-dialog';
SpinnerModule,
MatDialogModule,
MatSnackBarModule,
- MatMenuModule
+ MatMenuModule,
+ FormControlsModule
],
declarations: [
ReportsComponent,
diff --git a/src/app/sections/payment-section/reports/search-form/form-params.ts b/src/app/sections/payment-section/reports/search-form/form-params.ts
index 4e1ded53..a8649d67 100644
--- a/src/app/sections/payment-section/reports/search-form/form-params.ts
+++ b/src/app/sections/payment-section/reports/search-form/form-params.ts
@@ -1,10 +1,8 @@
-import { Moment } from 'moment';
-
import { Report } from '../../../../api-codegen/anapi';
+import { Range } from '../../../../form-controls';
export interface FormParams {
- fromTime: Moment;
- toTime: Moment;
+ date: Range;
reportType: Report.ReportTypeEnum;
shopID?: string;
}
diff --git a/src/app/sections/payment-section/reports/search-form/query-params.ts b/src/app/sections/payment-section/reports/search-form/query-params.ts
new file mode 100644
index 00000000..777a1af7
--- /dev/null
+++ b/src/app/sections/payment-section/reports/search-form/query-params.ts
@@ -0,0 +1,8 @@
+import { Report } from '../../../../api-codegen/anapi';
+
+export interface QueryParams {
+ fromTime: string;
+ toTime: string;
+ reportType: Report.ReportTypeEnum;
+ shopID?: string;
+}
diff --git a/src/app/sections/payment-section/reports/search-form/search-form.component.html b/src/app/sections/payment-section/reports/search-form/search-form.component.html
index 5f7183c6..5e470edb 100644
--- a/src/app/sections/payment-section/reports/search-form/search-form.component.html
+++ b/src/app/sections/payment-section/reports/search-form/search-form.component.html
@@ -1,65 +1,34 @@
-
-
-
-
-
-
- {{ r.filter.shopID }}
-
-
- {{ t.any }}
-
-
- {{ shopInfo.name }}
-
-
-
-
- {{ r.filter.type }}
-
-
- {{ t.any }}
-
-
- {{ r.type[type] }}
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+ {{ r.filter.shopID }}
+
+
+ {{ t.any }}
+
+
+ {{ shopInfo.name }}
+
+
+
+
+ {{ r.filter.type }}
+
+
+ {{ t.any }}
+
+
+ {{ r.type[type] }}
+
+
+
+
diff --git a/src/app/sections/payment-section/reports/search-form/search-form.component.ts b/src/app/sections/payment-section/reports/search-form/search-form.component.ts
index cdccf640..56c09d2d 100644
--- a/src/app/sections/payment-section/reports/search-form/search-form.component.ts
+++ b/src/app/sections/payment-section/reports/search-form/search-form.component.ts
@@ -1,7 +1,6 @@
import { Component } from '@angular/core';
import { Report } from '../../../../api-codegen/anapi/swagger-codegen';
-import { SearchFormValue } from '../../operations/search-form-value';
import { SearchFormService } from './search-form.service';
import { ReportsService } from '../reports.service';
@@ -13,16 +12,8 @@ import { ReportsService } from '../reports.service';
export class SearchFormComponent {
form = this.searchFormService.form;
reset = this.searchFormService.reset;
-
shopsInfo$ = this.reportsService.shopsInfo$;
-
reportTypes = Object.values(Report.ReportTypeEnum);
- expanded = false;
-
constructor(private searchFormService: SearchFormService, private reportsService: ReportsService) {}
-
- selectDaterange(v: SearchFormValue) {
- this.form.patchValue(v);
- }
}
diff --git a/src/app/sections/payment-section/reports/search-form/search-form.service.ts b/src/app/sections/payment-section/reports/search-form/search-form.service.ts
index ed404887..962c37cd 100644
--- a/src/app/sections/payment-section/reports/search-form/search-form.service.ts
+++ b/src/app/sections/payment-section/reports/search-form/search-form.service.ts
@@ -8,19 +8,20 @@ import { toSearchParams } from './to-search-params';
import { FormParams } from './form-params';
import { toFormValue } from './to-form-value';
import { toQueryParams } from './to-query-params';
+import { QueryParams } from './query-params';
@Injectable()
export class SearchFormService {
- static defaultParams: FormParams = {
- fromTime: moment()
- .subtract(1, 'month')
- .startOf('day'),
- toTime: moment().endOf('day'),
+ defaultParams: FormParams = {
shopID: null,
- reportType: null
+ reportType: null,
+ date: {
+ begin: moment().startOf('month'),
+ end: moment().endOf('month')
+ }
};
- form = this.fb.group(SearchFormService.defaultParams);
+ form = this.fb.group(this.defaultParams);
constructor(
private fb: FormBuilder,
@@ -36,7 +37,7 @@ export class SearchFormService {
}
reset() {
- this.form.setValue(SearchFormService.defaultParams);
+ this.form.setValue(this.defaultParams);
}
private init() {
@@ -46,8 +47,8 @@ export class SearchFormService {
}
private syncQueryParams() {
- const queryParams = this.route.snapshot.queryParams as Record;
- const formValue = toFormValue(queryParams, SearchFormService.defaultParams);
+ const queryParams = this.route.snapshot.queryParams as QueryParams;
+ const formValue = toFormValue(queryParams, this.defaultParams);
this.form.setValue(formValue);
this.setQueryParams(formValue);
this.form.valueChanges.subscribe(v => this.setQueryParams(v));
diff --git a/src/app/sections/payment-section/reports/search-form/to-form-value.ts b/src/app/sections/payment-section/reports/search-form/to-form-value.ts
index b9566b13..78b5f5f5 100644
--- a/src/app/sections/payment-section/reports/search-form/to-form-value.ts
+++ b/src/app/sections/payment-section/reports/search-form/to-form-value.ts
@@ -2,16 +2,19 @@ import moment from 'moment';
import { FormParams } from './form-params';
import { Report } from '../../../../api-codegen/anapi/swagger-codegen';
+import { QueryParams } from './query-params';
export function toFormValue(
- { fromTime, toTime, reportType, ...params }: Record,
+ { fromTime, toTime, reportType, ...params }: QueryParams,
defaultParams: FormParams
): FormParams {
return {
...defaultParams,
...params,
- fromTime: fromTime ? moment(fromTime) : defaultParams.fromTime,
- toTime: toTime ? moment(toTime) : defaultParams.toTime,
+ date: {
+ begin: fromTime ? moment(fromTime) : defaultParams.date.begin,
+ end: toTime ? moment(toTime) : defaultParams.date.end
+ },
reportType: reportType ? (reportType as Report.ReportTypeEnum) : defaultParams.reportType
};
}
diff --git a/src/app/sections/payment-section/reports/search-form/to-query-params.ts b/src/app/sections/payment-section/reports/search-form/to-query-params.ts
index e5e3e150..ece7e624 100644
--- a/src/app/sections/payment-section/reports/search-form/to-query-params.ts
+++ b/src/app/sections/payment-section/reports/search-form/to-query-params.ts
@@ -1,9 +1,10 @@
import { FormParams } from './form-params';
+import { QueryParams } from './query-params';
-export function toQueryParams({ fromTime, toTime, ...params }: FormParams): Partial> {
+export function toQueryParams({ date, ...params }: FormParams): QueryParams {
return {
...params,
- fromTime: fromTime.utc().format(),
- toTime: toTime.utc().format()
+ fromTime: date.begin.utc().format(),
+ toTime: date.end.utc().format()
};
}
diff --git a/src/app/sections/payment-section/reports/search-form/to-search-params.ts b/src/app/sections/payment-section/reports/search-form/to-search-params.ts
index c5428b74..0d56fe3e 100644
--- a/src/app/sections/payment-section/reports/search-form/to-search-params.ts
+++ b/src/app/sections/payment-section/reports/search-form/to-search-params.ts
@@ -2,11 +2,11 @@ import { SearchParams } from '../search-params';
import { Report } from '../../../../api-codegen/anapi';
import { FormParams } from './form-params';
-export function toSearchParams({ reportType, fromTime, toTime, ...params }: FormParams): SearchParams {
+export function toSearchParams({ reportType, date, ...params }: FormParams): SearchParams {
return {
...params,
reportTypes: reportType ? [reportType] : Object.values(Report.ReportTypeEnum),
- fromTime: fromTime.utc().format(),
- toTime: toTime.utc().format()
+ fromTime: date.begin.utc().format(),
+ toTime: date.end.utc().format()
};
}
diff --git a/src/app/sections/payment-section/reports/table/actions/actions.component.html b/src/app/sections/payment-section/reports/table/actions/actions.component.html
index 48029df8..6a7891be 100644
--- a/src/app/sections/payment-section/reports/table/actions/actions.component.html
+++ b/src/app/sections/payment-section/reports/table/actions/actions.component.html
@@ -3,7 +3,7 @@
-
diff --git a/src/assets/i18n/range-datepicker/ru.json b/src/assets/i18n/range-datepicker/ru.json
new file mode 100644
index 00000000..fa5ea218
--- /dev/null
+++ b/src/assets/i18n/range-datepicker/ru.json
@@ -0,0 +1,16 @@
+{
+ "selectPeriod": "Выберите период",
+ "select": {
+ "currentWeek": "Текущая неделя",
+ "threeMonths": "3 месяца",
+ "year": "{{year}} год",
+ "period": "Указать период..."
+ },
+ "rangeDate": {
+ "from": "С",
+ "fromStartWith2": "Со",
+ "to": "по",
+ "currentWeek": "Текущая неделя",
+ "year": "год"
+ }
+}
diff --git a/src/styles/core.scss b/src/styles/core.scss
index edeb379a..73328a32 100644
--- a/src/styles/core.scss
+++ b/src/styles/core.scss
@@ -1,4 +1,5 @@
@import '~@angular/material/theming';
+@import '~saturn-datepicker/bundle.css';
@import './utils/typography';
@import '../app/container/container-theme';
@import '../app/dropdown/dropdown-theme';
@@ -27,6 +28,7 @@
@import '../app/dadata/dadata-theme';
@import '../app/sections/payment-details/payment-details-theme';
@import '../app/layout/panel/panel-theme';
+@import '../app/form-controls/range-datepicker/range-datepicker-theme';
@mixin dsh-overrides() {
@include body-override();
@@ -53,6 +55,7 @@
@include dsh-dadata-autocomplete-typography($config);
@include mat-radio-button-override-typography($config);
@include dsh-payment-details-typography($config);
+ @include dsh-range-datepicker-typography($config);
@include dsh-panel-typography($config);
}
diff --git a/src/styles/themes/_theme.scss b/src/styles/themes/_theme.scss
index 6a148b20..5c70eee6 100644
--- a/src/styles/themes/_theme.scss
+++ b/src/styles/themes/_theme.scss
@@ -32,6 +32,7 @@
@import '../../app/sections/invoice-details/payments/payments-theme';
@import '../../app/sections/payment-section/payouts/payout-panel/payout-panel-theme';
@import '../../app/layout/panel/panel-theme';
+@import '../../app/form-controls/range-datepicker/range-datepicker-theme';
@mixin dsh-theme($theme) {
body.#{map-get($theme, name)} {
@@ -68,6 +69,7 @@
@include dsh-details-secondary-title-theme($theme);
@include dsh-file-uploader-theme($theme);
@include dsh-panel-theme($theme);
+ @include dsh-range-datepicker-theme($theme);
@include dsh-payout-panel-theme($theme);
}
}