alexandr/myoffice
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

FIX

Browse Source
This commit is contained in:
alexandr
2023-08-03 19:36:26 +03:00
parent ad31d3ffce
commit cf89dd6a4d
9 changed files with 129 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files
MyOffice.SPA/src/app/dashboard/outcome/dashboard.component.html
+1 -28
View File
@@ -13,34 +13,7 @@
</div> </div>
<div class="body"> <div class="body">
<div class="example-container"> <div class="example-container">
<form [formGroup]="form!" (ngSubmit)="onSubmitClick()"> <app-date-period [from]="dateFrom" [to]="dateTo" (onChange)="onChangePeriod($event)"></app-date-period>
<div class="row">
<div class="col-md-6">
<mat-form-field class="example-full-width" appearance="fill">
<mat-label>From</mat-label>
<input matInput [matDatepicker]="pickerFrom" (focus)="pickerFrom.open()" formControlName="dateFrom" required>
<mat-hint>YYYY/MM/DD</mat-hint>
<mat-datepicker-toggle tabindex="-1" matSuffix [for]="pickerFrom"></mat-datepicker-toggle>
<mat-datepicker #pickerFrom></mat-datepicker>
<mat-error *ngIf="form.controls?.['dateFrom']?.hasError('required')">
Please enter rate date
</mat-error>
</mat-form-field>
</div>
<div class="col-md-6">
<mat-form-field class="example-full-width" appearance="fill">
<mat-label>To</mat-label>
<input matInput [matDatepicker]="pickerTo" (focus)="pickerTo.open()" formControlName="dateTo" required>
<mat-hint>YYYY/MM/DD</mat-hint>
<mat-datepicker-toggle tabindex="-1" matSuffix [for]="pickerTo"></mat-datepicker-toggle>
<mat-datepicker #pickerTo></mat-datepicker>
<mat-error *ngIf="form.controls?.['dateTo']?.hasError('required')">
Please enter rate date
</mat-error>
</mat-form-field>
</div>
</div>
</form>
</div> </div>
</div> </div>
</div> </div>
MyOffice.SPA/src/app/dashboard/outcome/dashboard.component.ts
+6 -15
View File
@@ -8,7 +8,6 @@ import { DecimalPipe } from '@angular/common';
import { UntypedFormBuilder } from '@angular/forms'; import { UntypedFormBuilder } from '@angular/forms';
import { UntypedFormGroup } from '@angular/forms'; import { UntypedFormGroup } from '@angular/forms';
import { Validators } from '@angular/forms'; import { Validators } from '@angular/forms';
import { Inject } from '@angular/core';
// libs // libs
import { import {
@@ -21,7 +20,6 @@ import {
ApexLegend ApexLegend
} from "ng-apexcharts"; } from "ng-apexcharts";
import * as moment from 'moment' import * as moment from 'moment'
import { MAT_DATE_FORMATS } from '@angular/material/core';
// app // app
import { ApiRoutes } from '../../api-routes'; import { ApiRoutes } from '../../api-routes';
@@ -61,27 +59,20 @@ export class DashboardOutcomeComponent implements OnInit {
ngOnInit() { ngOnInit() {
this.form = this.fb.group({ this.form = this.fb.group({
dateFrom: [
this.dateFrom,
[Validators.required],
],
dateTo: [
this.dateTo,
[Validators.required],
],
}); });
this.loadData(); this.loadData();
} }
onSubmitClick() { onChangePeriod(dates: Date[]) {
this.dateFrom = dates[0];
this.dateTo = dates[1];
this.loadData();
} }
private loadData(update?: boolean, category?: string) { private loadData(update?: boolean, category?: string) {
let params = new HttpParams() let params = new HttpParams()
.set('from', '2023-07-01') .set('from', moment(this.dateFrom).format('YYYY-MM-DD'))
.set('to', '2023-08-01') .set('to', moment(this.dateTo).format('YYYY-MM-DD'))
.set('category', category || '') .set('category', category || '')
; ;
MyOffice.SPA/src/app/pages/accounts/account.component.html
+3 -28
View File
@@ -8,34 +8,9 @@
</h4> </h4>
</mat-panel-description> </mat-panel-description>
</mat-expansion-panel-header> </mat-expansion-panel-header>
<form [formGroup]="form!" (ngSubmit)="onSubmitClick()"> <div>
<div class="row"> <app-date-period [from]="dateFrom" [to]="dateTo" (onChange)="onChangePeriod($event)"></app-date-period>
<div class="col-md-6"> </div>
<mat-form-field class="example-full-width" appearance="fill">
<mat-label>From</mat-label>
<input matInput [matDatepicker]="pickerFrom" (focus)="pickerFrom.open()" formControlName="dateFrom" required>
<mat-hint>YYYY/MM/DD</mat-hint>
<mat-datepicker-toggle tabindex="-1" matSuffix [for]="pickerFrom"></mat-datepicker-toggle>
<mat-datepicker #pickerFrom></mat-datepicker>
<mat-error *ngIf="form.controls?.['dateFrom']?.hasError('required')">
Please enter rate date
</mat-error>
</mat-form-field>
</div>
<div class="col-md-6">
<mat-form-field class="example-full-width" appearance="fill">
<mat-label>To</mat-label>
<input matInput [matDatepicker]="pickerTo" (focus)="pickerTo.open()" formControlName="dateTo" required>
<mat-hint>YYYY/MM/DD</mat-hint>
<mat-datepicker-toggle tabindex="-1" matSuffix [for]="pickerTo"></mat-datepicker-toggle>
<mat-datepicker #pickerTo></mat-datepicker>
<mat-error *ngIf="form.controls?.['dateTo']?.hasError('required')">
Please enter rate date
</mat-error>
</mat-form-field>
</div>
</div>
</form>
<hr /> <hr />
<account-motion [motion]="newMotion" [account]="account.account" (onAdd)="handlerOnAdd($event)"> <account-motion [motion]="newMotion" [account]="account.account" (onAdd)="handlerOnAdd($event)">
</account-motion> </account-motion>
MyOffice.SPA/src/app/pages/accounts/account.component.ts
+10 -13
View File
@@ -26,7 +26,8 @@ import { MotionModel } from '../../model/motion.model';
export class AccountComponent { export class AccountComponent {
public motions?: MotionModel[]; public motions?: MotionModel[];
public newMotion: MotionModel; public newMotion: MotionModel;
public form!: UntypedFormGroup; public dateFrom: Date = moment(new Date).add(-7, 'days').toDate();
public dateTo: Date = moment(new Date).add(0, 'days').toDate();
@Input('account') account!: AccountDetailedModel; @Input('account') account!: AccountDetailedModel;
@Input('active') active: boolean = false; @Input('active') active: boolean = false;
@Input() reloadEvent!: Observable<string[]>; @Input() reloadEvent!: Observable<string[]>;
@@ -46,16 +47,6 @@ export class AccountComponent {
} }
ngOnInit(): void { ngOnInit(): void {
this.form = this.fb.group({
dateFrom: [
moment(new Date).add(-7, 'days').toDate(),
[Validators.required],
],
dateTo: [
new Date,
[Validators.required],
],
});
this.loadMotions(); this.loadMotions();
this.reloadEvent.subscribe(x => { this.reloadEvent.subscribe(x => {
@@ -84,10 +75,16 @@ export class AccountComponent {
this.motions!.splice(index, 1); this.motions!.splice(index, 1);
} }
onChangePeriod(dates: Date[]) {
this.dateFrom = dates[0];
this.dateTo = dates[1];
this.loadMotions();
}
private loadMotions() { private loadMotions() {
var url = ApiRoutes.Motions.replace(':id', this.account.account.id!); var url = ApiRoutes.Motions.replace(':id', this.account.account.id!);
url += '?from=' + moment(this.form.value.dateFrom).format('yyyy-MM-DD'); url += '?from=' + moment(this.dateFrom).format('yyyy-MM-DD');
url += '&to=' + moment(this.form.value.dateTo).format('yyyy-MM-DD'); url += '&to=' + moment(this.dateTo).format('yyyy-MM-DD');
this.activatedRoute.params.subscribe(params => { this.activatedRoute.params.subscribe(params => {
this.httpClient this.httpClient
MyOffice.SPA/src/app/shared/components/components.module.ts
+5 -2
View File
@@ -6,11 +6,13 @@ import { TranslateModule } from '@ngx-translate/core';
import { FileUploadComponent } from './file-upload/file-upload.component'; import { FileUploadComponent } from './file-upload/file-upload.component';
import { BreadcrumbComponent } from './breadcrumb/breadcrumb.component'; import { BreadcrumbComponent } from './breadcrumb/breadcrumb.component';
import { SharedModule } from '../shared.module'; import { SharedModule } from '../shared.module';
import { DatePeriodComponent } from './date-period/date-period.component';
@NgModule({ @NgModule({
declarations: [ declarations: [
FileUploadComponent, FileUploadComponent,
BreadcrumbComponent BreadcrumbComponent,
DatePeriodComponent,
], ],
imports: [ imports: [
SharedModule, SharedModule,
@@ -18,7 +20,8 @@ import { SharedModule } from '../shared.module';
], ],
exports: [ exports: [
FileUploadComponent, FileUploadComponent,
BreadcrumbComponent BreadcrumbComponent,
DatePeriodComponent,
], ],
}) })
export class ComponentsModule { export class ComponentsModule {
MyOffice.SPA/src/app/shared/components/date-period/date-period.component.css
View File
MyOffice.SPA/src/app/shared/components/date-period/date-period.component.html
+28
View File
@@ -0,0 +1,28 @@
<form [formGroup]="form!" (ngSubmit)="onSubmitClick()">
<div class="row">
<div class="col-md-6">
<mat-form-field class="example-full-width" appearance="fill">
<mat-label>From</mat-label>
<input matInput [matDatepicker]="pickerFrom" (focus)="pickerFrom.open()" formControlName="dateFrom" required (ngModelChange)="onInputChange()">
<mat-hint>YYYY/MM/DD</mat-hint>
<mat-datepicker-toggle tabindex="-1" matSuffix [for]="pickerFrom"></mat-datepicker-toggle>
<mat-datepicker #pickerFrom></mat-datepicker>
<mat-error *ngIf="form.controls?.['dateFrom']?.hasError('required')">
Please enter rate date
</mat-error>
</mat-form-field>
</div>
<div class="col-md-6">
<mat-form-field class="example-full-width" appearance="fill">
<mat-label>To</mat-label>
<input matInput [matDatepicker]="pickerTo" (focus)="pickerTo.open()" formControlName="dateTo" required (ngModelChange)="onInputChange()">
<mat-hint>YYYY/MM/DD</mat-hint>
<mat-datepicker-toggle tabindex="-1" matSuffix [for]="pickerTo"></mat-datepicker-toggle>
<mat-datepicker #pickerTo></mat-datepicker>
<mat-error *ngIf="form.controls?.['dateTo']?.hasError('required')">
Please enter rate date
</mat-error>
</mat-form-field>
</div>
</div>
</form>
MyOffice.SPA/src/app/shared/components/date-period/date-period.component.spec.ts
+23
View File
@@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { DatePeriodComponent } from './date-period.component';
describe('DatePeriodComponent', () => {
let component: DatePeriodComponent;
let fixture: ComponentFixture<DatePeriodComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ DatePeriodComponent ]
})
.compileComponents();
fixture = TestBed.createComponent(DatePeriodComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
MyOffice.SPA/src/app/shared/components/date-period/date-period.component.ts
+53
View File
@@ -0,0 +1,53 @@
// app
import { Component } from '@angular/core';
import { UntypedFormBuilder } from '@angular/forms';
import { UntypedFormGroup } from '@angular/forms';
import { Validators } from '@angular/forms';
import { Input } from '@angular/core';
import { Output } from '@angular/core';
import { EventEmitter } from '@angular/core';
// libs
import * as moment from 'moment'
@Component({
selector: 'app-date-period',
templateUrl: './date-period.component.html',
styleUrls: ['./date-period.component.css']
})
export class DatePeriodComponent {
@Input('from') dateFrom!: Date;
@Input('to') dateTo!: Date;
@Output() onChange: EventEmitter<Date[]> = new EventEmitter<Date[]>();
form!: UntypedFormGroup;
constructor(
private fb: UntypedFormBuilder
) {
}
ngOnInit() {
this.form = this.fb.group({
dateFrom: [
this.dateFrom,
[Validators.required],
],
dateTo: [
this.dateTo,
[Validators.required],
],
});
}
onSubmitClick() {
}
onInputChange() {
this.onChange.emit([this.form.value.dateFrom, this.form.value.dateTo]);
}
}