-
Notifications
You must be signed in to change notification settings - Fork 33
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Implement datetimepicker for motion workflow (#3298)
- Loading branch information
1 parent
757b4a6
commit 059c11a
Showing
7 changed files
with
209 additions
and
6 deletions.
There are no files selected for viewing
53 changes: 53 additions & 0 deletions
53
...s/motion-detail/components/motion-manage-timestamp/motion-manage-timestamp.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| <h4> | ||
| <span class="title-font">{{ title }}</span> | ||
| <button | ||
| class="small-button" | ||
| type="button" | ||
| mat-icon-button | ||
| disableRipple | ||
| *ngIf="!isEditMode && perms.isAllowed('change_metadata')" | ||
| (click)="onEdit()" | ||
| > | ||
| <mat-icon>edit</mat-icon> | ||
| </button> | ||
| <button | ||
| class="small-button" | ||
| type="button" | ||
| mat-icon-button | ||
| disableRipple | ||
| *ngIf="isEditMode && perms.isAllowed('change_metadata')" | ||
| (click)="onCancel()" | ||
| > | ||
| <mat-icon>close</mat-icon> | ||
| </button> | ||
| </h4> | ||
|
|
||
| <div *ngIf="!isEditMode || !perms.isAllowed('change_metadata')"> | ||
| <div>{{ motion[field] | localizedDate }}</div> | ||
| </div> | ||
|
|
||
| <div *ngIf="isEditMode && perms.isAllowed('change_metadata')"> | ||
| <form [formGroup]="form"> | ||
| <os-datepicker formControlName="date"></os-datepicker> | ||
| <mat-form-field style="width: 100%"> | ||
| <input style="width: 100%" matInput [format]="24" formControlName="time" [ngxTimepicker]="timepicker" /> | ||
| <div class="suffix-wrapper" matSuffix> | ||
| <ngx-material-timepicker-toggle [for]="timepicker"> | ||
| <mat-icon class="icon" style="margin-right: 10px" ngxMaterialTimepickerToggleIcon> | ||
| access_time | ||
| </mat-icon> | ||
| </ngx-material-timepicker-toggle> | ||
| </div> | ||
| <ngx-material-timepicker #timepicker></ngx-material-timepicker> | ||
| </mat-form-field> | ||
| </form> | ||
|
|
||
| <p> | ||
| <button type="button" mat-button (click)="onSave()"> | ||
| <span>{{ 'Save' | translate }}</span> | ||
| </button> | ||
| <button type="button" mat-button (click)="onCancel()"> | ||
| <span>{{ 'Cancel' | translate }}</span> | ||
| </button> | ||
| </p> | ||
| </div> |
Empty file.
21 changes: 21 additions & 0 deletions
21
...otion-detail/components/motion-manage-timestamp/motion-manage-timestamp.component.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| import { ComponentFixture, TestBed } from '@angular/core/testing'; | ||
|
|
||
| import { MotionManageTimestampComponent } from './motion-manage-timestamp.component'; | ||
|
|
||
| xdescribe(`MotionManageTimestampComponent`, () => { | ||
| let component: MotionManageTimestampComponent; | ||
| let fixture: ComponentFixture<MotionManageTimestampComponent>; | ||
|
|
||
| beforeEach(() => { | ||
| TestBed.configureTestingModule({ | ||
| declarations: [MotionManageTimestampComponent] | ||
| }); | ||
| fixture = TestBed.createComponent(MotionManageTimestampComponent); | ||
| component = fixture.componentInstance; | ||
| fixture.detectChanges(); | ||
| }); | ||
|
|
||
| it(`should create`, () => { | ||
| expect(component).toBeTruthy(); | ||
| }); | ||
| }); |
120 changes: 120 additions & 0 deletions
120
...ges/motion-detail/components/motion-manage-timestamp/motion-manage-timestamp.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,120 @@ | ||
| import { ChangeDetectionStrategy, Component, Input } from '@angular/core'; | ||
| import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms'; | ||
| import { fromUnixTime, getHours, getMinutes, isDate } from 'date-fns'; | ||
| import { KeyOfType } from 'src/app/infrastructure/utils/keyof-type'; | ||
| import { BaseUiComponent } from 'src/app/ui/base/base-ui-component'; | ||
|
|
||
| import { MotionControllerService } from '../../../../services/common/motion-controller.service'; | ||
| import { MotionPermissionService } from '../../../../services/common/motion-permission.service'; | ||
| import { ViewMotion } from '../../../../view-models'; | ||
|
|
||
| @Component({ | ||
| selector: `os-motion-manage-timestamp`, | ||
| templateUrl: `./motion-manage-timestamp.component.html`, | ||
| styleUrls: [`./motion-manage-timestamp.component.scss`], | ||
| changeDetection: ChangeDetectionStrategy.OnPush | ||
| }) | ||
| export class MotionManageTimestampComponent extends BaseUiComponent { | ||
| public get motion(): ViewMotion { | ||
| return this._motion; | ||
| } | ||
|
|
||
| @Input() | ||
| public set motion(value: ViewMotion) { | ||
| this._motion = value; | ||
| } | ||
|
|
||
| @Input() | ||
| public field: KeyOfType<ViewMotion, number>; | ||
|
|
||
| @Input() | ||
| public title: string; | ||
|
|
||
| public form: UntypedFormGroup; | ||
|
|
||
| /** | ||
| * Saves if the users edits the note. | ||
| */ | ||
| public set isEditMode(value: boolean) { | ||
| this._editMode = value; | ||
| } | ||
|
|
||
| public get isEditMode(): boolean { | ||
| return this._editMode; | ||
| } | ||
|
|
||
| private _editMode = false; | ||
|
|
||
| private _motion!: ViewMotion; | ||
|
|
||
| public constructor( | ||
| public perms: MotionPermissionService, | ||
| private motionController: MotionControllerService, | ||
| private fb: UntypedFormBuilder | ||
| ) { | ||
| super(); | ||
|
|
||
| this.form = this.fb.group({ | ||
| date: [``], | ||
| time: [``] | ||
| }); | ||
|
|
||
| this.form.get(`date`).valueChanges.subscribe(currDate => { | ||
| if (isDate(currDate) !== !!this.form.get(`time`).value) { | ||
| this.form.get(`time`).setValue(isDate(currDate) ? `00:00` : ``); | ||
| } | ||
| }); | ||
| this.form.get(`time`).valueChanges.subscribe(currTime => { | ||
| if (!!currTime !== isDate(this.form.get(`date`).value)) { | ||
| this.form.get(`date`).setValue(!!currTime ? new Date() : null); | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| public async onSave(): Promise<void> { | ||
| const date: { date: Date | null; time: string } = this.form.value; | ||
| const [hours, minutes, ..._] = date.time.split(`:`); | ||
| if (date.date) { | ||
| date.date.setHours(+hours, +minutes); | ||
| } | ||
| await this.motionController | ||
| .update({ [this.field]: date.date ? Math.floor(date.date.getTime() / 1000) : null }, this.motion) | ||
| .resolve(); | ||
| this.isEditMode = false; | ||
| } | ||
|
|
||
| /** | ||
| * Close the edit view. | ||
| */ | ||
| public onCancel(): void { | ||
| this.isEditMode = false; | ||
| } | ||
|
|
||
| /** | ||
| * Enter the edit mode and reset the form and the data. | ||
| */ | ||
| public onEdit(): void { | ||
| const timestamp = this.motion[this.field]; | ||
| const date = timestamp | ||
| ? this.getTimes(timestamp) | ||
| : { | ||
| date: ``, | ||
| time: `` | ||
| }; | ||
| this.form.patchValue(date); | ||
| this.isEditMode = true; | ||
| } | ||
|
|
||
| public getTimes(timestamp: number): { date: Date; time: string } { | ||
| const date = fromUnixTime(timestamp); | ||
| const time = getHours(date) + `:` + getMinutes(date); | ||
| return { date, time }; | ||
| } | ||
|
|
||
| public clearForm(): void { | ||
| this.form.patchValue({ | ||
| date: ``, | ||
| time: `` | ||
| }); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters