global-context/features/time-context/time-range-picker/date-time-context-picker.component.ts
OnInit
ControlValueAccessor
| changeDetection | ChangeDetectionStrategy.OnPush |
| providers |
)
|
| selector | c8y-date-time-context-picker |
| standalone | true |
| imports |
ReactiveFormsModule
TooltipModule
BsDropdownModule
I18nModule
IconDirective
DatePipe
MessagesComponent
MessageDirective
FormGroupComponent
IntervalPickerComponent
DateTimePickerModule
|
| templateUrl | ./date-time-context-picker.component.html |
Properties |
|
Methods |
Inputs |
| config |
Type : DateTimeContextPickerConfig
|
Default value : {
showDateFrom: true,
showDateTo: true
}
|
| disabled |
Type : boolean
|
Default value : false
|
| shouldDisableInterval |
Type : Record<string | boolean>
|
Default value : {}
|
| Protected applyDateTimeContext | ||||||||
applyDateTimeContext(intervalVal: TimeInterval)
|
||||||||
|
Parameters :
Returns :
void
|
| getDateFromErrors |
getDateFromErrors()
|
|
Returns :
any
|
| getDateRangeLabel |
getDateRangeLabel()
|
|
Returns :
string
|
| getDateToErrors |
getDateToErrors()
|
|
Returns :
any
|
| isApplyDisabled |
isApplyDisabled()
|
|
Returns :
boolean
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| onHiddenDropdown |
onHiddenDropdown()
|
|
Returns :
void
|
| onShownDropdown |
onShownDropdown()
|
|
Returns :
void
|
| registerOnChange | ||||||
registerOnChange(fn: (value: DateTimeContext) => void)
|
||||||
|
Parameters :
Returns :
void
|
| registerOnTouched | ||||||
registerOnTouched(fn: () => void)
|
||||||
|
Parameters :
Returns :
void
|
| Protected reset |
reset()
|
|
Returns :
void
|
| setDisabledState | ||||||
setDisabledState(isDisabled: boolean)
|
||||||
|
Parameters :
Returns :
void
|
| writeValue | ||||||
writeValue(value: DateTimeContext)
|
||||||
|
Parameters :
Returns :
void
|
| Readonly DATE_FORMAT |
Type : string
|
Default value : 'medium'
|
| Optional dropdown |
Type : BsDropdownDirective
|
Decorators :
@ViewChild(BsDropdownDirective)
|
| form |
Type : FormGroup
|
| Readonly INTERVALS |
Type : unknown
|
Default value : INTERVAL_TITLES
|
| Readonly isCustomMode |
Type : unknown
|
Default value : computed(() => this.currentInterval() === TIME_INTERVAL.CUSTOM)
|
| Readonly isEditing |
Type : unknown
|
Default value : computed(() => this.dropdown?.isOpen && this.isCustomMode())
|
| tempDateFromControl |
Type : FormControl
|
| tempDateToControl |
Type : FormControl
|
| Readonly TIME_INTERVAL |
Type : unknown
|
Default value : TIME_INTERVAL
|
@if (form) {
@let intervalValue = form.get('interval')?.value;
@let isIntervalNone = intervalValue === 'none';
@let dateFromControl = form.get('dateFrom');
@let dateToControl = form.get('dateTo');
@let dateRangeLabel = getDateRangeLabel();
<form [formGroup]="form">
<div
class="dropdown max-width-100"
container="body"
#dropdown="bs-dropdown"
dropdown
[insideClick]="true"
[isDisabled]="disabled"
(onShown)="onShownDropdown()"
(onHidden)="onHiddenDropdown()"
>
<!-- Dropdown toggle button with better accessibility -->
<button
class="dropdown-toggle form-control l-h-tight d-flex a-i-center"
[attr.aria-label]="dateRangeLabel"
[tooltip]="dateRangeLabel"
placement="top"
container="body"
[adaptivePosition]="false"
[delay]="500"
dropdownToggle
data-cy="c8y-date-time-context-picker--picker-toggle"
>
<i
class="m-r-4"
[c8yIcon]="'schedule1'"
aria-hidden="true"
></i>
<div class="d-col text-left flex-grow min-width-0">
@if (isIntervalNone) {
<span class="text-10 text-muted l-h-1">
{{ 'No date filter' | translate }}
</span>
} @else {
<span
class="text-10 text-muted l-h-1"
data-cy="c8y-date-time-context-picker--picker-label"
>
{{ INTERVALS[intervalValue] | translate }}
</span>
<span
class="text-12 l-h-1 text-medium text-truncate"
data-cy="c8y-date-time-context-picker--picker-time-range"
>
{{ form.get('dateFrom')?.value | c8yDate: DATE_FORMAT }} —
{{ form.get('dateTo')?.value | c8yDate: DATE_FORMAT }}
</span>
}
</div>
<span
class="caret m-r-16 m-l-4"
aria-hidden="true"
></span>
</button>
<!-- Dropdown menu -->
<ul
class="dropdown-menu dropdown-menu--date-range"
role="menu"
*dropdownMenu
>
@if (dropdown.isOpen) {
<!-- Interval picker section -->
<c8y-interval-picker
class="d-contents"
formControlName="interval"
[shouldDisableInterval]="shouldDisableInterval"
></c8y-interval-picker>
<!-- Custom date range section -->
@if (isCustomMode() && (config?.showDateFrom || config?.showDateTo)) {
<div class="p-l-16 p-r-16">
@if (config?.showDateFrom) {
<c8y-form-group [class.has-error]="getDateFromErrors()">
<label
[title]="'From`date`' | translate"
for="dateFrom"
translate
>
From`date`
</label>
<c8y-date-time-picker
[class.has-error]="getDateFromErrors()"
id="dateFrom"
[maxDate]="tempDateToControl?.value"
[placeholder]="'From`date`' | translate"
[formControl]="tempDateFromControl"
></c8y-date-time-picker>
<c8y-messages [show]="getDateFromErrors()">
<c8y-message
name="dateAfterRangeMax"
[text]="errorMessages.dateAfterRangeMax | translate"
></c8y-message>
<c8y-message
name="dateBeforeRangeMin"
[text]="errorMessages.dateBeforeRangeMin | translate"
></c8y-message>
<c8y-message
name="invalidDateTime"
[text]="errorMessages.invalidDateTime | translate"
></c8y-message>
<c8y-message
name="bsDate"
[text]="errorMessages.invalidDateTime | translate"
></c8y-message>
<c8y-message
name="invalidDateRange"
[text]="errorMessages.invalidDateRange | translate"
></c8y-message>
</c8y-messages>
</c8y-form-group>
}
@if (config?.showDateTo) {
<c8y-form-group [class.has-error]="getDateToErrors()">
<label
[title]="'To`date`' | translate"
for="dateTo"
translate
>
To`date`
</label>
<c8y-date-time-picker
[class.has-error]="getDateToErrors()"
id="dateTo"
[minDate]="tempDateFromControl?.value"
[placeholder]="'To`date`' | translate"
[formControl]="tempDateToControl"
></c8y-date-time-picker>
<c8y-messages [show]="getDateToErrors()">
<c8y-message
name="dateAfterRangeMax"
[text]="errorMessages.dateAfterRangeMax | translate"
></c8y-message>
<c8y-message
name="dateBeforeRangeMin"
[text]="errorMessages.dateBeforeRangeMin | translate"
></c8y-message>
<c8y-message
name="invalidDateTime"
[text]="errorMessages.invalidDateTime | translate"
></c8y-message>
<c8y-message
name="bsDate"
[text]="errorMessages.invalidDateTime | translate"
></c8y-message>
<c8y-message
name="invalidDateRange"
[text]="errorMessages.invalidDateRange | translate"
></c8y-message>
</c8y-messages>
</c8y-form-group>
}
</div>
<!-- Action buttons -->
<div class="p-16 d-flex gap-8 separator-top">
<button
class="btn btn-default btn-sm flex-grow"
title="{{ 'Reset' | translate }}"
type="button"
(click)="reset()"
translate
>
Reset
</button>
<button
class="btn btn-primary btn-sm flex-grow"
title="{{ 'Apply' | translate }}"
type="button"
(click)="applyDateTimeContext()"
[disabled]="isApplyDisabled()"
translate
>
Apply
</button>
</div>
}
}
</ul>
</div>
</form>
}