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
+87 -74
View File
@@ -1,100 +1,113 @@
<label class="adf-property-label" <label
[attr.data-automation-id]="'card-dateitem-label-' + property.key" class="adf-property-label"
*ngIf="showProperty() || isEditable()" [attr.data-automation-id]="'card-dateitem-label-' + property.key"
[attr.for]="'card-view-dateitem-' + property.key"> *ngIf="showProperty() || isEditable()"
[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
[attr.data-automation-id]="'card-' + property.type + '-value-' + property.key"> *ngIf="!isEditable() && !property.multivalued"
<span *ngIf="showProperty()" [attr.data-automation-id]="'card-' + property.type + '-value-' + property.key">
[attr.data-automation-id]="'card-dateitem-' + property.key" <span
(dblclick)="copyToClipboard(property.displayValue)" *ngIf="showProperty()"
matTooltipShowDelay="1000" [attr.data-automation-id]="'card-dateitem-' + property.key"
[matTooltip]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate">{{ property.displayValue}}</span> (dblclick)="copyToClipboard(property.displayValue)"
matTooltipShowDelay="1000"
[matTooltip]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate">
{{ property.displayValue}}
</span>
</span> </span>
<div *ngIf="isEditable() && !property.multivalued" <div *ngIf="isEditable() && !property.multivalued" class="adf-dateitem-editable">
class="adf-dateitem-editable">
<div class="adf-dateitem-editable-controls"> <div class="adf-dateitem-editable-controls">
<span class="adf-datepicker-toggle" <span
[attr.data-automation-id]="'datepicker-label-toggle-' + property.key" class="adf-datepicker-toggle"
(click)="showDatePicker()"> [attr.data-automation-id]="'datepicker-label-toggle-' + property.key"
<span *ngIf="showProperty(); else elseEmptyValueBlock" (click)="showDatePicker()">
[attr.data-automation-id]="'card-' + property.type + '-value-' + property.key"> <span
{{ property.displayValue }}</span> *ngIf="showProperty(); else elseEmptyValueBlock"
[attr.data-automation-id]="'card-' + property.type + '-value-' + property.key">
{{ property.displayValue }}
</span>
</span> </span>
<mat-icon *ngIf="showClearAction()" <mat-icon
class="adf-date-reset-icon" *ngIf="showClearAction()"
(click)="onDateClear()" class="adf-date-reset-icon"
[attr.title]="'CORE.METADATA.ACTIONS.CLEAR' | translate" (click)="onDateClear()"
[attr.data-automation-id]="'datepicker-date-clear-' + property.key"> [attr.title]="'CORE.METADATA.ACTIONS.CLEAR' | translate"
[attr.data-automation-id]="'datepicker-date-clear-' + property.key">
clear clear
</mat-icon> </mat-icon>
<mat-datetimepicker-toggle [attr.tabindex]="-1" <mat-datepicker-toggle
[attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate" [attr.tabindex]="-1"
[attr.data-automation-id]="'datepickertoggle-' + property.key" [attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
[for]="datetimePicker"> [attr.data-automation-id]="'datepickertoggle-' + property.key"
</mat-datetimepicker-toggle> [for]="datePicker">
</mat-datepicker-toggle>
</div> </div>
<input class="adf-invisible-date-input" <input
[attr.tabIndex]="-1" class="adf-invisible-date-input"
[matDatetimepicker]="datetimePicker" [attr.tabIndex]="-1"
[value]="valueDate" [matDatepicker]="datePicker"
(dateChange)="onDateChanged($event)" [value]="valueDate"
[attr.id]="'card-view-dateitem-' + property.key" (dateChange)="onDateChanged($event)"
> [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-datepicker>
</mat-datetimepicker>
</div> </div>
<ng-template #elseEmptyValueBlock> <ng-template #elseEmptyValueBlock>
{{ property.default | translate }} {{ property.default | translate }}
</ng-template> </ng-template>
<div *ngIf="property.multivalued" <div
class="adf-property-field adf-dateitem-chip-list-container adf-dateitem-editable"> *ngIf="property.multivalued"
<mat-chip-list #chipList class="adf-property-field adf-dateitem-chip-list-container adf-dateitem-editable">
class="adf-textitem-chip-list"> <mat-chip-list #chipList class="adf-textitem-chip-list">
<mat-chip *ngFor="let propertyValue of property.displayValue; let idx = index" <mat-chip
[removable]="isEditable()" *ngFor="let propertyValue of property.displayValue; let idx = index"
(removed)="removeValueFromList(idx)"> [removable]="isEditable()"
(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
class="adf-property-field adf-dateitem-editable-controls" *ngIf="isEditable()"
[floatLabel]="'never'" class="adf-property-field adf-dateitem-editable-controls"
(click)="showDatePicker()"> [floatLabel]="'never'"
<input matInput (click)="showDatePicker()">
class="adf-invisible-date-input" <input
[attr.tabIndex]="-1" matInput
[matDatetimepicker]="datetimePicker" class="adf-invisible-date-input"
(dateChange)="addDateToList($event)" [attr.tabIndex]="-1"
[attr.id]="'card-view-dateitem-' + property.key" [matDatepicker]="datePicker"
> (dateChange)="addDateToList($event)"
<mat-datetimepicker-toggle [attr.tabindex]="-1" [attr.id]="'card-view-dateitem-' + property.key">
matSuffix <mat-datepicker-toggle
[attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate" [attr.tabindex]="-1"
[attr.data-automation-id]="'datepickertoggle-' + property.key" matSuffix
[for]="datetimePicker"> [attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
</mat-datetimepicker-toggle> [attr.data-automation-id]="'datepickertoggle-' + property.key"
[for]="datePicker">
</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-datepicker>
</mat-datetimepicker>
</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;