Skip to content

Commit

Permalink
refactor(#2411): Remove angular-datetime-picker and add new date input (
Browse files Browse the repository at this point in the history
#2412)

* refactor(#2411): Remove angular-datetime-picker and add new date input

* refactor(#2411): Remove angular-datetime-picker from module code
  • Loading branch information
tenthe authored Jan 10, 2024
1 parent fe11755 commit 9d64f40
Show file tree
Hide file tree
Showing 11 changed files with 160 additions and 144 deletions.
19 changes: 2 additions & 17 deletions ui/cypress/support/utils/datalake/DataLakeUtils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -316,30 +316,15 @@ export class DataLakeUtils {

public static selectTimeRange(from: Date, to: Date) {
DataLakeUtils.setTimeInput('time-range-from', from);
DataLakeUtils.clickCancelTime();
DataLakeUtils.setTimeInput('time-range-to', to);
DataLakeUtils.clickCancelTime();
}

public static setTimeInput(field: string, date: Date) {
cy.dataCy(field)
.clear({ force: true })
.type(DataLakeUtils.makeTimeString(date), { force: true });
}

public static clickCancelTime() {
cy.get('.owl-dt-container-buttons > button:nth-child(1)').click();
cy.wait(1000);
cy.dataCy(field).type(DataLakeUtils.makeTimeString(date));
}

public static makeTimeString(date: Date) {
return date.toLocaleString('en-US', {
month: 'numeric',
day: 'numeric',
year: 'numeric',
hour: 'numeric',
minute: 'numeric',
});
return date.toISOString().slice(0, 16);
}

public static getFutureDate() {
Expand Down
91 changes: 48 additions & 43 deletions ui/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion ui/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,6 @@
"@auth0/angular-jwt": "^5.2.0",
"@ali-hm/angular-tree-component": "12.0.5",
"@ctrl/ngx-codemirror": "6.1.0",
"@danielmoncada/angular-datetime-picker": "^16.1.0",
"@fortawesome/fontawesome-free": "6.5.1",
"@jsplumb/browser-ui": "^6.2.10",
"@ngx-loading-bar/core": "6.0.2",
Expand All @@ -64,6 +63,7 @@
"dagre": "0.8.5",
"datatables.net": "^1.13.1",
"datatables.net-dt": "^1.13.1",
"date-fns": "^2.30.0",
"echarts": "^5.4.3",
"echarts-wordcloud": "^2.1.0",
"echarts-simple-transform": "^1.0.0",
Expand Down
6 changes: 0 additions & 6 deletions ui/src/app/core-ui/core-ui.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -70,10 +70,6 @@ import { SharedUiModule } from '@streampipes/shared-ui';
import { PipelineElementTemplateConfigComponent } from './pipeline-element-template-config/pipeline-element-template-config.component';
import { PipelineElementTemplatePipe } from './pipeline-element-template-config/pipeline-element-template.pipe';
import { DataDownloadDialogComponent } from './data-download-dialog/data-download-dialog.component';
import {
OwlDateTimeModule,
OwlNativeDateTimeModule,
} from '@danielmoncada/angular-datetime-picker';
import { SelectDataComponent } from './data-download-dialog/components/select-data/select-data.component';
import { SelectFormatComponent } from './data-download-dialog/components/select-format/select-format.component';
import { DownloadComponent } from './data-download-dialog/components/download/download.component';
Expand Down Expand Up @@ -104,8 +100,6 @@ import { SpSimpleLogsComponent } from './monitoring/simple-logs/simple-logs.comp
MatSlideToggleModule,
MatChipsModule,
MatTreeModule,
OwlDateTimeModule,
OwlNativeDateTimeModule,
PlatformServicesModule,
PortalModule,
SharedUiModule,
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<!--
~ Licensed to the Apache Software Foundation (ASF) under one or more
~ contributor license agreements. See the NOTICE file distributed with
~ this work for additional information regarding copyright ownership.
~ The ASF licenses this file to You under the Apache License, Version 2.0
~ (the "License"); you may not use this file except in compliance with
~ the License. You may obtain a copy of the License at
~
~ http://www.apache.org/licenses/LICENSE-2.0
~
~ Unless required by applicable law or agreed to in writing, software
~ distributed under the License is distributed on an "AS IS" BASIS,
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
~ See the License for the specific language governing permissions and
~ limitations under the License.
~
-->
<input
class="sp-date-input"
type="datetime-local"
[value]="formattedDate"
(blur)="onDateChange($event.target.value)"
step="1"
/>
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

.sp-date-input {
font-family: Roboto-Regular;
font-size: small;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

import { Component, EventEmitter, Input, Output } from '@angular/core';
import { format } from 'date-fns';

@Component({
selector: 'sp-date-input',
templateUrl: './date-input.component.html',
styleUrls: ['./date-input.component.scss'],
})
export class DateInputComponent {
@Input()
date: Date;

@Output()
dateChange: EventEmitter<Date> = new EventEmitter<Date>();

@Output()
dateChanged = new EventEmitter<void>();

get formattedDate(): string {
return this.date ? format(this.date, "yyyy-MM-dd'T'HH:mm") : '';
}

onDateChange(value: string): void {
const updatedDate = new Date(value);
this.date = updatedDate;
this.dateChange.emit(updatedDate);
this.dateChanged.emit();
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -38,38 +38,21 @@
>
<mat-icon (click)="decreaseTime()">navigate_before</mat-icon>
</button>
<mat-form-field
fxLayoutAlign="center center"
class="start-date form-field-margin smaller-font-size form-field-smaller"
color="accent"
appearance="outline"
<sp-date-input
class="start-date-margin"
[(date)]="startDate"
(dateChanged)="changeCustomDateRange()"
data-cy="time-range-from"
>
<input
matInput
data-cy="time-range-from"
[owlDateTime]="dt1"
[owlDateTimeTrigger]="dt1"
[(ngModel)]="startDate"
(dateTimeChange)="changeCustomDateRange()"
/>
<owl-date-time #dt1></owl-date-time>
</mat-form-field>
<mat-form-field
fxLayoutAlign="center center"
class="end-date form-field-margin form-field-smaller"
color="accent"
appearance="outline"
</sp-date-input>

<sp-date-input
[(date)]="endDate"
(dateChanged)="changeCustomDateRange()"
data-cy="time-range-to"
>
<input
matInput
data-cy="time-range-to"
[owlDateTime]="dt2"
[owlDateTimeTrigger]="dt2"
[(ngModel)]="endDate"
(dateTimeChange)="changeCustomDateRange()"
/>
<owl-date-time #dt2></owl-date-time>
</mat-form-field>
</sp-date-input>

<button
mat-button
class="button-icon icon-button-font-size ml--5 mr--5"
Expand Down
Loading

0 comments on commit 9d64f40

Please sign in to comment.