TSK-1583: Removed date-picker component and replaced by Angular Material
This commit is contained in:
parent
9817971899
commit
a8d8c15e59
|
@ -1,14 +0,0 @@
|
|||
<div class="input-group">
|
||||
|
||||
<input type="text"
|
||||
placeholder="{{placeholder}}"
|
||||
class="form-control input-with-icon"
|
||||
bsDatepicker
|
||||
[bsConfig]="{ dateInputFormat: 'YYYY-MM-DD', selectFromOtherMonth: true }"
|
||||
(bsValueChange)="dateChange($event)"
|
||||
[bsValue]="valueDate"
|
||||
name="{{name}}"
|
||||
id="{{id}}"
|
||||
#datePickerElement="bsDatepicker">
|
||||
<span class="input-icon-addon material-icons md-24 dark-green" (click)="datePickerElement.toggle()">date_range</span>
|
||||
</div>
|
|
@ -1,17 +0,0 @@
|
|||
.input-group {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border-radius: 4px;
|
||||
height: 35px;
|
||||
border: 1px solid #ccc;
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
|
||||
.input-with-icon {
|
||||
border: none;
|
||||
height: 33px;
|
||||
}
|
||||
|
||||
.input-icon-addon {
|
||||
padding-top: 4px;
|
||||
}
|
|
@ -1,26 +0,0 @@
|
|||
import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'taskana-shared-date-picker',
|
||||
templateUrl: './date-picker.component.html',
|
||||
styleUrls: ['./date-picker.component.scss']
|
||||
})
|
||||
export class DatePickerComponent implements OnInit {
|
||||
@Input() placeholder: string;
|
||||
@Input() value: string;
|
||||
@Input() id: string;
|
||||
@Input() name: string;
|
||||
@Output() dateOutput = new EventEmitter<string>();
|
||||
|
||||
valueDate: Date;
|
||||
|
||||
ngOnInit(): void {
|
||||
this.valueDate = this.value ? new Date(this.value) : undefined;
|
||||
}
|
||||
|
||||
dateChange(newValue: Date) {
|
||||
if (newValue) {
|
||||
this.dateOutput.emit(newValue.toISOString());
|
||||
}
|
||||
}
|
||||
}
|
|
@ -29,7 +29,6 @@ import { SortComponent } from './components/sort/sort.component';
|
|||
import { PaginationComponent } from './components/pagination/pagination.component';
|
||||
import { NumberPickerComponent } from './components/number-picker/number-picker.component';
|
||||
import { ProgressSpinnerComponent } from './components/progress-spinner/progress-spinner.component';
|
||||
import { DatePickerComponent } from './components/date-picker/date-picker.component';
|
||||
|
||||
/**
|
||||
* Pipes
|
||||
|
@ -96,7 +95,6 @@ const DECLARATIONS = [
|
|||
PaginationComponent,
|
||||
NumberPickerComponent,
|
||||
ProgressSpinnerComponent,
|
||||
DatePickerComponent,
|
||||
ToastComponent,
|
||||
DialogPopUpComponent,
|
||||
WorkbasketFilterComponent,
|
||||
|
|
|
@ -142,13 +142,12 @@
|
|||
<div class="task-information__due-date-and-priority">
|
||||
|
||||
<!-- DUE DATE -->
|
||||
<div class="task-information__due-date">
|
||||
<span style="color: gray; font-size: 0.8em;">Due date</span>
|
||||
<div class="task-information__date-picker" style="position: relative; top: 4px;">
|
||||
<taskana-shared-date-picker placeholder="Due date" [value]="task.due" [name]="'task.due'" [id]="'task-due'"
|
||||
(dateOutput)="updateDate($event)"></taskana-shared-date-picker>
|
||||
</div>
|
||||
</div>
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label> Due Date </mat-label>
|
||||
<input matInput [matDatepicker]="picker" value="{{task.due}}" (dateInput)="updateDate($event)">
|
||||
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #picker></mat-datepicker>
|
||||
</mat-form-field>
|
||||
|
||||
<!-- PRIORITY -->
|
||||
<mat-form-field appearance="outline" style="min-width: 100px; padding-left: 8px;">
|
||||
|
|
|
@ -21,6 +21,7 @@ import { Classification } from '../../../shared/models/classification';
|
|||
import { TasksCustomisation } from '../../../shared/models/customisation';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
import { AccessIdDefinition } from '../../../shared/models/access-id';
|
||||
import { TaskanaDate } from '../../../shared/util/taskana.date';
|
||||
|
||||
@Component({
|
||||
selector: 'taskana-task-information',
|
||||
|
@ -83,8 +84,13 @@ export class TaskInformationComponent implements OnInit, OnChanges, OnDestroy {
|
|||
}
|
||||
|
||||
updateDate($event) {
|
||||
if (new Date(this.task.due).toISOString() !== $event) {
|
||||
this.task.due = $event;
|
||||
const newDate = $event.value;
|
||||
if (typeof newDate !== 'undefined' && newDate !== null) {
|
||||
const newDateISOString = newDate.toISOString();
|
||||
const currentDate = new Date(this.task.due);
|
||||
if (typeof currentDate === 'undefined' || currentDate !== newDate) {
|
||||
this.task.due = newDateISOString;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -34,6 +34,8 @@ import { MatButtonModule } from '@angular/material/button';
|
|||
import { MatRadioModule } from '@angular/material/radio';
|
||||
import { MatMenuModule } from '@angular/material/menu';
|
||||
import { MatSelectModule } from '@angular/material/select';
|
||||
import { MatDatepickerModule } from '@angular/material/datepicker';
|
||||
import { MatNativeDateModule } from '@angular/material/core';
|
||||
|
||||
const MODULES = [
|
||||
TypeaheadModule.forRoot(),
|
||||
|
@ -74,7 +76,9 @@ const DECLARATIONS = [
|
|||
MatButtonModule,
|
||||
MatRadioModule,
|
||||
MatMenuModule,
|
||||
MatSelectModule
|
||||
MatSelectModule,
|
||||
MatDatepickerModule,
|
||||
MatNativeDateModule
|
||||
],
|
||||
providers: [
|
||||
TaskService,
|
||||
|
|
|
@ -1,4 +1,3 @@
|
|||
@import '../../node_modules/ngx-bootstrap/datepicker/bs-datepicker';
|
||||
@import '../../node_modules/angular-tree-component/dist/angular-tree-component.css';
|
||||
@import 'bootstrap-3-backward-compatibility';
|
||||
|
||||
|
@ -8,7 +7,6 @@
|
|||
@import 'forms';
|
||||
@import 'tree';
|
||||
@import 'type-ahead';
|
||||
@import 'date-picker';
|
||||
@import 'checkboxes';
|
||||
@import 'buttons';
|
||||
@import 'tabs';
|
||||
|
|
Loading…
Reference in New Issue