inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2026-09-09 18:03:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

mat-datepicker component added and removed old mat-datetimepicker component

Browse Source
This commit is contained in:
Jatin_Chugh
2023-07-27 11:14:49 +05:30
parent b08093a108
commit aa7daae6b9
2 changed files with 88 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.html
+52 -39
View File
@@ -1,30 +1,38 @@
<label class="adf-property-label" <label
class="adf-property-label"
[attr.data-automation-id]="'card-dateitem-label-' + property.key" [attr.data-automation-id]="'card-dateitem-label-' + property.key"
*ngIf="showProperty() || isEditable()" *ngIf="showProperty() || isEditable()"
[attr.for]="'card-view-dateitem-' + property.key"> [attr.for]="'card-view-dateitem-' + property.key">
{{ property.label | translate }} {{ property.label | translate }}
</label> </label>
<div class="adf-property-value adf-property-value-padding-top"> <div class="adf-property-value adf-property-value-padding-top">
<span *ngIf="!isEditable() && !property.multivalued" <span
*ngIf="!isEditable() && !property.multivalued"
[attr.data-automation-id]="'card-' + property.type + '-value-' + property.key"> [attr.data-automation-id]="'card-' + property.type + '-value-' + property.key">
<span *ngIf="showProperty()" <span
*ngIf="showProperty()"
[attr.data-automation-id]="'card-dateitem-' + property.key" [attr.data-automation-id]="'card-dateitem-' + property.key"
(dblclick)="copyToClipboard(property.displayValue)" (dblclick)="copyToClipboard(property.displayValue)"
matTooltipShowDelay="1000" matTooltipShowDelay="1000"
[matTooltip]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate">{{ property.displayValue}}</span> [matTooltip]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate">
{{ property.displayValue}}
</span> </span>
<div *ngIf="isEditable() && !property.multivalued" </span>
class="adf-dateitem-editable"> <div *ngIf="isEditable() && !property.multivalued" class="adf-dateitem-editable">
<div class="adf-dateitem-editable-controls"> <div class="adf-dateitem-editable-controls">
<span class="adf-datepicker-toggle" <span
class="adf-datepicker-toggle"
[attr.data-automation-id]="'datepicker-label-toggle-' + property.key" [attr.data-automation-id]="'datepicker-label-toggle-' + property.key"
(click)="showDatePicker()"> (click)="showDatePicker()">
<span *ngIf="showProperty(); else elseEmptyValueBlock" <span
*ngIf="showProperty(); else elseEmptyValueBlock"
[attr.data-automation-id]="'card-' + property.type + '-value-' + property.key"> [attr.data-automation-id]="'card-' + property.type + '-value-' + property.key">
{{ property.displayValue }}</span> {{ property.displayValue }}
</span>
</span> </span>
<mat-icon *ngIf="showClearAction()" <mat-icon
*ngIf="showClearAction()"
class="adf-date-reset-icon" class="adf-date-reset-icon"
(click)="onDateClear()" (click)="onDateClear()"
[attr.title]="'CORE.METADATA.ACTIONS.CLEAR' | translate" [attr.title]="'CORE.METADATA.ACTIONS.CLEAR' | translate"
@@ -32,69 +40,74 @@
clear clear
</mat-icon> </mat-icon>
<mat-datetimepicker-toggle [attr.tabindex]="-1" <mat-datepicker-toggle
[attr.tabindex]="-1"
[attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate" [attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
[attr.data-automation-id]="'datepickertoggle-' + property.key" [attr.data-automation-id]="'datepickertoggle-' + property.key"
[for]="datetimePicker"> [for]="datePicker">
</mat-datetimepicker-toggle> </mat-datepicker-toggle>
</div> </div>
<input class="adf-invisible-date-input" <input
class="adf-invisible-date-input"
[attr.tabIndex]="-1" [attr.tabIndex]="-1"
[matDatetimepicker]="datetimePicker" [matDatepicker]="datePicker"
[value]="valueDate" [value]="valueDate"
(dateChange)="onDateChanged($event)" (dateChange)="onDateChanged($event)"
[attr.id]="'card-view-dateitem-' + property.key" [attr.id]="'card-view-dateitem-' + property.key">
>
<mat-datetimepicker #datetimePicker <mat-datepicker
[type]="$any(property).type" #datePicker
[timeInterval]="5"
[attr.data-automation-id]="'datepicker-' + property.key" [attr.data-automation-id]="'datepicker-' + property.key"
[startAt]="valueDate"> [startAt]="valueDate">
</mat-datetimepicker> </mat-datepicker>
</div> </div>
<ng-template #elseEmptyValueBlock> <ng-template #elseEmptyValueBlock>
{{ property.default | translate }} {{ property.default | translate }}
</ng-template> </ng-template>
<div *ngIf="property.multivalued" <div
*ngIf="property.multivalued"
class="adf-property-field adf-dateitem-chip-list-container adf-dateitem-editable"> class="adf-property-field adf-dateitem-chip-list-container adf-dateitem-editable">
<mat-chip-list #chipList <mat-chip-list #chipList class="adf-textitem-chip-list">
class="adf-textitem-chip-list"> <mat-chip
<mat-chip *ngFor="let propertyValue of property.displayValue; let idx = index" *ngFor="let propertyValue of property.displayValue; let idx = index"
[removable]="isEditable()" [removable]="isEditable()"
(removed)="removeValueFromList(idx)"> (removed)="removeValueFromList(idx)">
{{ propertyValue }} {{ propertyValue }}
<mat-icon *ngIf="isEditable()" <mat-icon
matChipRemove>cancel</mat-icon> *ngIf="isEditable()"
matChipRemove>
cancel
</mat-icon>
</mat-chip> </mat-chip>
</mat-chip-list> </mat-chip-list>
<mat-form-field *ngIf="isEditable()" <mat-form-field
*ngIf="isEditable()"
class="adf-property-field adf-dateitem-editable-controls" class="adf-property-field adf-dateitem-editable-controls"
[floatLabel]="'never'" [floatLabel]="'never'"
(click)="showDatePicker()"> (click)="showDatePicker()">
<input matInput <input
matInput
class="adf-invisible-date-input" class="adf-invisible-date-input"
[attr.tabIndex]="-1" [attr.tabIndex]="-1"
[matDatetimepicker]="datetimePicker" [matDatepicker]="datePicker"
(dateChange)="addDateToList($event)" (dateChange)="addDateToList($event)"
[attr.id]="'card-view-dateitem-' + property.key" [attr.id]="'card-view-dateitem-' + property.key">
> <mat-datepicker-toggle
<mat-datetimepicker-toggle [attr.tabindex]="-1" [attr.tabindex]="-1"
matSuffix matSuffix
[attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate" [attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
[attr.data-automation-id]="'datepickertoggle-' + property.key" [attr.data-automation-id]="'datepickertoggle-' + property.key"
[for]="datetimePicker"> [for]="datePicker">
</mat-datetimepicker-toggle> </mat-datepicker-toggle>
<mat-datetimepicker #datetimePicker <mat-datepicker
[type]="$any(property).type" #datePicker
[timeInterval]="5"
[attr.data-automation-id]="'datepicker-' + property.key" [attr.data-automation-id]="'datepicker-' + property.key"
[startAt]="valueDate"> [startAt]="valueDate">
</mat-datetimepicker> </mat-datepicker>
</mat-form-field> </mat-form-field>
</div> </div>
</div> </div>
lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.ts
+1 -1
View File
@@ -57,7 +57,7 @@ export class CardViewDateItemComponent extends BaseCardView<CardViewDateItemMode
@Input() @Input()
displayClearAction: boolean = true; displayClearAction: boolean = true;
@ViewChild('datetimePicker') @ViewChild('datePicker')
public datepicker: MatDatetimepickerComponent<any>; public datepicker: MatDatetimepickerComponent<any>;
valueDate: Moment; valueDate: Moment;