mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2026-09-09 18:03:21 +00:00
used mat-datepicker instead of mat-datetimepicker
This commit is contained in:
@@ -33,27 +33,25 @@
|
|||||||
class="adf-share-link__date-time-container">
|
class="adf-share-link__date-time-container">
|
||||||
<mat-form-field class="adf-full-width adf-float-label" floatLabel='always'>
|
<mat-form-field class="adf-full-width adf-float-label" floatLabel='always'>
|
||||||
<mat-label>{{ 'SHARE.EXPIRATION-PLACEHOLDER' | translate }}</mat-label>
|
<mat-label>{{ 'SHARE.EXPIRATION-PLACEHOLDER' | translate }}</mat-label>
|
||||||
<mat-datetimepicker-toggle
|
<mat-datepicker-toggle
|
||||||
[disabled]="time.disabled"
|
[disabled]="time.disabled"
|
||||||
[for]="datetimePicker"
|
[for]="datePicker"
|
||||||
matSuffix
|
matSuffix
|
||||||
class="adf-share-link__icon adf-share-link__calender-icon">
|
class="adf-share-link__icon adf-share-link__calender-icon">
|
||||||
</mat-datetimepicker-toggle>
|
</mat-datepicker-toggle>
|
||||||
<mat-datetimepicker
|
<mat-datepicker
|
||||||
#datetimePicker
|
#datePicker
|
||||||
(closed)="onDatetimepickerClosed()"
|
(closed)="onDatePickerClosed()">
|
||||||
[type]="type"
|
</mat-datepicker>
|
||||||
[timeInterval]="1">
|
|
||||||
</mat-datetimepicker>
|
|
||||||
<input
|
<input
|
||||||
class="adf-share-link__input"
|
class="adf-share-link__input"
|
||||||
#dateTimePickerInput
|
#datePickerInput
|
||||||
matInput
|
matInput
|
||||||
placeholder="{{ 'SHARE.EXPIRATION-PLACEHOLDER' | translate }}"
|
placeholder="{{ 'SHARE.EXPIRATION-PLACEHOLDER' | translate }}"
|
||||||
[attr.aria-label]="'SHARE.EXPIRATION-LABEL' | translate"
|
[attr.aria-label]="'SHARE.EXPIRATION-LABEL' | translate"
|
||||||
[min]="minDate"
|
[min]="minDate"
|
||||||
formControlName="time"
|
formControlName="time"
|
||||||
[matDatetimepicker]="datetimePicker" />
|
[matDatepicker]="datePicker" />
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
</div>
|
</div>
|
||||||
<p class="adf-share-link__info adf-share-link__para">{{ 'SHARE.SHARE-LINK' | translate }}</p>
|
<p class="adf-share-link__info adf-share-link__para">{{ 'SHARE.SHARE-LINK' | translate }}</p>
|
||||||
@@ -69,7 +67,10 @@
|
|||||||
<div class="adf-share-link__label adf-sharable-link">{{ 'SHARE.SHARABLE-LINK-CREATED' | translate }}
|
<div class="adf-share-link__label adf-sharable-link">{{ 'SHARE.SHARABLE-LINK-CREATED' | translate }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<mat-form-field class="adf-full-width adf-float-label" floatLabel='always'>
|
<mat-form-field
|
||||||
|
class="adf-full-width adf-float-label"
|
||||||
|
floatLabel='always'
|
||||||
|
[ngClass]="isLinkWithExpiryDate? 'adf-share-link__border-color' : ''">
|
||||||
<input
|
<input
|
||||||
#sharedLinkInput
|
#sharedLinkInput
|
||||||
data-automation-id="adf-share-link"
|
data-automation-id="adf-share-link"
|
||||||
|
|||||||
@@ -91,6 +91,10 @@
|
|||||||
&__date-time-container {
|
&__date-time-container {
|
||||||
padding-bottom: 8px;
|
padding-bottom: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&__border-color {
|
||||||
|
border: 1px solid var(--theme-warn-color);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.adf-input-action {
|
.adf-input-action {
|
||||||
|
|||||||
@@ -62,15 +62,15 @@ export class ShareDialogComponent implements OnInit, OnDestroy {
|
|||||||
sharedUrl: new UntypedFormControl(''),
|
sharedUrl: new UntypedFormControl(''),
|
||||||
time: new UntypedFormControl({value: '', disabled: true})
|
time: new UntypedFormControl({value: '', disabled: true})
|
||||||
});
|
});
|
||||||
type: DatePickerType = 'datetime';
|
type: DatePickerType = 'date';
|
||||||
maxDebounceTime = 500;
|
maxDebounceTime = 500;
|
||||||
isExpiryDateToggleChecked: boolean;
|
isExpiryDateToggleChecked: boolean;
|
||||||
|
|
||||||
@ViewChild('slideToggleExpirationDate', {static: true})
|
@ViewChild('slideToggleExpirationDate', {static: true})
|
||||||
slideToggleExpirationDate;
|
slideToggleExpirationDate;
|
||||||
|
|
||||||
@ViewChild('dateTimePickerInput', {static: true})
|
@ViewChild('datePickerInput', {static: true})
|
||||||
dateTimePickerInput;
|
datePickerInput;
|
||||||
|
|
||||||
private onDestroy$ = new Subject<boolean>();
|
private onDestroy$ = new Subject<boolean>();
|
||||||
|
|
||||||
@@ -86,7 +86,7 @@ export class ShareDialogComponent implements OnInit, OnDestroy {
|
|||||||
}
|
}
|
||||||
|
|
||||||
ngOnInit() {
|
ngOnInit() {
|
||||||
this.type = this.appConfigService.get<DatePickerType>('sharedLinkDateTimePickerType', 'datetime');
|
this.type = this.appConfigService.get<DatePickerType>('sharedLinkDateTimePickerType', 'date');
|
||||||
|
|
||||||
if (this.data.node && this.data.node.entry) {
|
if (this.data.node && this.data.node.entry) {
|
||||||
this.fileName = this.data.node.entry.name;
|
this.fileName = this.data.node.entry.name;
|
||||||
@@ -156,8 +156,8 @@ export class ShareDialogComponent implements OnInit, OnDestroy {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
onDatetimepickerClosed() {
|
onDatePickerClosed() {
|
||||||
this.dateTimePickerInput.nativeElement.blur();
|
this.datePickerInput.nativeElement.blur();
|
||||||
if (!this.time.value) {
|
if (!this.time.value) {
|
||||||
this.slideToggleExpirationDate.checked = false;
|
this.slideToggleExpirationDate.checked = false;
|
||||||
}
|
}
|
||||||
@@ -283,7 +283,7 @@ export class ShareDialogComponent implements OnInit, OnDestroy {
|
|||||||
let expiryDate: Date | string;
|
let expiryDate: Date | string;
|
||||||
if (date) {
|
if (date) {
|
||||||
if (this.type === 'date') {
|
if (this.type === 'date') {
|
||||||
expiryDate = format(endOfDay(date as Date), `yyyy-MM-dd'T'HH:mm:ss.SSSxx`);
|
expiryDate = format(endOfDay(new Date(date)), `yyyy-MM-dd'T'HH:mm:ss.SSSxx`);
|
||||||
} else {
|
} else {
|
||||||
expiryDate = format((new Date(date)), `yyyy-MM-dd'T'HH:mm:ss.SSSxx`);
|
expiryDate = format((new Date(date)), `yyyy-MM-dd'T'HH:mm:ss.SSSxx`);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user