used mat-datepicker instead of mat-datetimepicker

This commit is contained in:
Jatin_Chugh
2023-06-07 10:46:00 +05:30
parent 14ab734d86
commit 21cbf7d46b
3 changed files with 24 additions and 19 deletions
@@ -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`);
} }