TSK-1583: Removed date-picker component and replaced by Angular Material

This commit is contained in:
Sofie Hofmann 2021-03-15 15:51:59 +01:00
parent 9817971899
commit a8d8c15e59
8 changed files with 19 additions and 71 deletions

View File

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

View File

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

View File

@ -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());
}
}
}

View File

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

View File

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

View File

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

View File

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

View File

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