mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[ADF-5543] Enable lint accessibility and resolve found issues (#9421)
This commit is contained in:
tomson
GitHub
@@ -1,6 +1,6 @@
|
||||
<div class="adf-attach-widget {{field.className}}"
|
||||
[class.adf-readonly]="field.readOnly">
|
||||
<label class="adf-label" [attr.for]="field.id">{{field.name | translate}}
|
||||
<div class="adf-attach-widget {{ field.className }}" [class.adf-readonly]="field.readOnly">
|
||||
<label class="adf-label" [attr.for]="field.id"
|
||||
>{{ field.name | translate }}
|
||||
<span class="adf-asterisk" *ngIf="isRequired()">*</span>
|
||||
</label>
|
||||
<div class="adf-attach-widget-container">
|
||||
@@ -8,49 +8,44 @@
|
||||
<a mat-raised-button color="primary">
|
||||
{{ 'FORM.FIELD.UPLOAD' | translate }}
|
||||
<mat-icon>file_upload</mat-icon>
|
||||
<input #uploadFiles
|
||||
<input #uploadFiles [multiple]="multipleOption" type="file" [id]="field.id" (change)="onAttachFileChanged($event)" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="adf-attach-widget__menu-upload" (focusout)="markAsTouched()" *ngIf="isUploadButtonVisible() && isMultipleSourceUpload()">
|
||||
<button mat-raised-button color="primary" [matMenuTriggerFor]="menu" [id]="field.id">
|
||||
{{ 'FORM.FIELD.UPLOAD' | translate }}
|
||||
<mat-icon>attach_file</mat-icon>
|
||||
</button>
|
||||
<mat-menu #menu="matMenu" class="adf-attach-widget__menu-content">
|
||||
<button mat-menu-item (click)="uploadFile.click()" id="attach-local-file" *ngIf="isAllFileSourceSelected()">
|
||||
{{ 'FORM.FIELD.LOCALSTORAGE' | translate }}
|
||||
<mat-icon>file_upload</mat-icon>
|
||||
<input
|
||||
#uploadFile
|
||||
class="adf-attach-widget__input-type"
|
||||
[multiple]="multipleOption"
|
||||
type="file"
|
||||
[id]="field.id"
|
||||
(change)="onAttachFileChanged($event)" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="adf-attach-widget__menu-upload" (focusout)="markAsTouched()"
|
||||
*ngIf="isUploadButtonVisible() && isMultipleSourceUpload()">
|
||||
<button mat-raised-button color="primary" [matMenuTriggerFor]="menu" [id]="field.id">
|
||||
{{ 'FORM.FIELD.UPLOAD' | translate }}
|
||||
<mat-icon>attach_file</mat-icon>
|
||||
</button>
|
||||
<mat-menu #menu="matMenu" class="adf-attach-widget__menu-content">
|
||||
<button mat-menu-item (click)="uploadFile.click()"
|
||||
id="attach-local-file"
|
||||
*ngIf="isAllFileSourceSelected()">
|
||||
{{ 'FORM.FIELD.LOCALSTORAGE' | translate }}
|
||||
<mat-icon>file_upload</mat-icon>
|
||||
<input #uploadFile
|
||||
class="adf-attach-widget__input-type"
|
||||
[multiple]="multipleOption"
|
||||
type="file"
|
||||
[id]="field.id"
|
||||
(change)="onAttachFileChanged($event)" />
|
||||
(change)="onAttachFileChanged($event)"
|
||||
/>
|
||||
</button>
|
||||
<button mat-menu-item
|
||||
*ngIf="isDefinedSourceFolder()"
|
||||
id="attach-{{field.params?.fileSource?.name}}"
|
||||
(click)="openSelectDialogFromFileSource()">
|
||||
{{field.params?.fileSource?.name}}
|
||||
<mat-icon>
|
||||
<img alt="alfresco" class="adf-attach-widget__image-logo" src="../../../assets/images/alfresco-flower.svg">
|
||||
</mat-icon>
|
||||
<button
|
||||
mat-menu-item
|
||||
*ngIf="isDefinedSourceFolder()"
|
||||
id="attach-{{ field.params?.fileSource?.name }}"
|
||||
(click)="openSelectDialogFromFileSource()"
|
||||
>
|
||||
{{ field.params?.fileSource?.name }}
|
||||
<mat-icon>
|
||||
<img alt="alfresco" class="adf-attach-widget__image-logo" src="../../../assets/images/alfresco-flower.svg" />
|
||||
</mat-icon>
|
||||
</button>
|
||||
<div *ngIf="!isDefinedSourceFolder()">
|
||||
<button mat-menu-item *ngFor="let repo of repositoryList"
|
||||
id="attach-{{repo?.name}}"
|
||||
(click)="openSelectDialog(repo)">
|
||||
{{repo.name}}
|
||||
<mat-icon>
|
||||
<img alt="alfresco" class="adf-attach-widget__image-logo" src="../../../assets/images/alfresco-flower.svg">
|
||||
</mat-icon>
|
||||
<button mat-menu-item *ngFor="let repo of repositoryList" id="attach-{{ repo?.name }}" (click)="openSelectDialog(repo)">
|
||||
{{ repo.name }}
|
||||
<mat-icon>
|
||||
<img alt="alfresco" class="adf-attach-widget__image-logo" src="../../../assets/images/alfresco-flower.svg" />
|
||||
</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</mat-menu>
|
||||
@@ -61,37 +56,64 @@
|
||||
<div data-automation-id="adf-attach-widget-readonly-list">
|
||||
<mat-list *ngIf="hasFile">
|
||||
<mat-list-item class="adf-attach-files-row" *ngFor="let file of field.value">
|
||||
<img mat-list-icon class="adf-attach-widget__icon"
|
||||
[id]="'file-'+file.id+'-icon'"
|
||||
[src]="file.content ? getIcon(file.content.mimeType) : getIcon(file.mimeType)"
|
||||
[alt]="mimeTypeIcon"
|
||||
(click)="onAttachFileClicked(file)"
|
||||
(keyup.enter)="onAttachFileClicked(file)"
|
||||
role="img"
|
||||
[attr.aria-label]="file.name"
|
||||
tabindex="0"/>
|
||||
<span matLine id="{{'file-'+file.id}}" (click)="onAttachFileClicked(file)" [matTooltip]="file.name" (keyup.enter)="onAttachFileClicked(file)"
|
||||
tabindex="0" class="adf-file">{{file.name}}</span>
|
||||
<button id="{{'file-'+file.id+'-option-menu'}}" mat-icon-button [matMenuTriggerFor]="fileActionMenu"
|
||||
[attr.aria-label]="'ADF_PROCESS_LIST.DETAILS.BUTTON.FILE_OPTION_MENU' | translate">
|
||||
<img
|
||||
mat-list-icon
|
||||
class="adf-attach-widget__icon"
|
||||
[id]="'file-' + file.id + '-icon'"
|
||||
[src]="file.content ? getIcon(file.content.mimeType) : getIcon(file.mimeType)"
|
||||
[alt]="mimeTypeIcon"
|
||||
(click)="onAttachFileClicked(file)"
|
||||
(keyup.enter)="onAttachFileClicked(file)"
|
||||
[attr.aria-label]="file.name"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
/>
|
||||
<span
|
||||
matLine
|
||||
id="{{ 'file-' + file.id }}"
|
||||
(click)="onAttachFileClicked(file)"
|
||||
[matTooltip]="file.name"
|
||||
(keyup.enter)="onAttachFileClicked(file)"
|
||||
tabindex="0"
|
||||
role="button"
|
||||
class="adf-file"
|
||||
>{{ file.name }}</span
|
||||
>
|
||||
<button
|
||||
id="{{ 'file-' + file.id + '-option-menu' }}"
|
||||
mat-icon-button
|
||||
[matMenuTriggerFor]="fileActionMenu"
|
||||
[attr.aria-label]="'ADF_PROCESS_LIST.DETAILS.BUTTON.FILE_OPTION_MENU' | translate"
|
||||
>
|
||||
<mat-icon>more_vert</mat-icon>
|
||||
</button>
|
||||
<mat-menu #fileActionMenu="matMenu" xPosition="before">
|
||||
<button id="{{'file-'+file.id+'-show-file'}}"
|
||||
<button
|
||||
id="{{ 'file-' + file.id + '-show-file' }}"
|
||||
[disabled]="file.isExternal || !file.contentAvailable || !file.mimeType"
|
||||
mat-menu-item (click)="onAttachFileClicked(file)">
|
||||
mat-menu-item
|
||||
(click)="onAttachFileClicked(file)"
|
||||
>
|
||||
<mat-icon>visibility</mat-icon>
|
||||
<span>{{ 'FORM.FIELD.VIEW_FILE' | translate }}</span>
|
||||
</button>
|
||||
<button id="{{'file-'+file.id+'-download-file'}}"
|
||||
<button
|
||||
id="{{ 'file-' + file.id + '-download-file' }}"
|
||||
[disabled]="file.isExternal || !file.mimeType"
|
||||
mat-menu-item (click)="downloadContent(file)">
|
||||
mat-menu-item
|
||||
(click)="downloadContent(file)"
|
||||
>
|
||||
<mat-icon>file_download</mat-icon>
|
||||
<span>{{ 'FORM.FIELD.DOWNLOAD_FILE' | translate }}</span>
|
||||
</button>
|
||||
<button *ngIf="!field.readOnly" id="{{'file-'+file.id+'-remove-file'}}"
|
||||
mat-menu-item [id]="'file-'+file.id+'-remove'"
|
||||
(click)="onRemoveAttachFile(file);" (keyup.enter)="onRemoveAttachFile(file);">
|
||||
<button
|
||||
*ngIf="!field.readOnly"
|
||||
id="{{ 'file-' + file.id + '-remove-file' }}"
|
||||
mat-menu-item
|
||||
[id]="'file-' + file.id + '-remove'"
|
||||
(click)="onRemoveAttachFile(file)"
|
||||
(keyup.enter)="onRemoveAttachFile(file)"
|
||||
>
|
||||
<mat-icon class="mat-24">highlight_off</mat-icon>
|
||||
<span>{{ 'FORM.FIELD.REMOVE_FILE' | translate }}</span>
|
||||
</button>
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
<div class="adf-dynamic-table-scrolling {{field.className}}"
|
||||
[class.adf-invalid]="!isValid()">
|
||||
<div class="adf-dynamic-table-scrolling {{field.className}}" [class.adf-invalid]="!isValid()">
|
||||
<div class="adf-label">{{content.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></div>
|
||||
|
||||
<div *ngIf="!editMode">
|
||||
@@ -7,22 +6,28 @@
|
||||
<table class="adf-full-width adf-dynamic-table" id="dynamic-table-{{content.id}}">
|
||||
<thead>
|
||||
<tr>
|
||||
<th *ngFor="let column of content.visibleColumns">
|
||||
{{column.name}}
|
||||
</th>
|
||||
<th *ngFor="let column of content.visibleColumns">{{column.name}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let row of content.rows; let idx = index" tabindex="0" id="{{content.id}}-row-{{idx}}"
|
||||
[class.adf-dynamic-table-widget__row-selected]="row.selected" (keyup)="onKeyPressed($event, row)">
|
||||
<td *ngFor="let column of content.visibleColumns"
|
||||
(click)="onRowClicked(row)">
|
||||
<span *ngIf="column.type !== 'Boolean' else checkbox">
|
||||
{{ getCellValue(row, column) }}
|
||||
</span>
|
||||
<tr
|
||||
*ngFor="let row of content.rows; let idx = index"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
id="{{content.id}}-row-{{idx}}"
|
||||
[class.adf-dynamic-table-widget__row-selected]="row.selected"
|
||||
(keyup)="onKeyPressed($event, row)"
|
||||
>
|
||||
<td
|
||||
*ngFor="let column of content.visibleColumns"
|
||||
tabindex="0"
|
||||
role="button"
|
||||
(keyup.enter)="onRowClicked(row)"
|
||||
(click)="onRowClicked(row)"
|
||||
>
|
||||
<span *ngIf="column.type !== 'Boolean' else checkbox"> {{ getCellValue(row, column) }} </span>
|
||||
<ng-template #checkbox>
|
||||
<mat-checkbox disabled [checked]="getCellValue(row, column)">
|
||||
</mat-checkbox>
|
||||
<mat-checkbox disabled [checked]="getCellValue(row, column)"> </mat-checkbox>
|
||||
</ng-template>
|
||||
</td>
|
||||
</tr>
|
||||
@@ -31,41 +36,25 @@
|
||||
</div>
|
||||
|
||||
<div *ngIf="!readOnly">
|
||||
<button mat-button
|
||||
[disabled]="!hasSelection()"
|
||||
(click)="moveSelectionUp()">
|
||||
<button mat-button [disabled]="!hasSelection()" (click)="moveSelectionUp()">
|
||||
<mat-icon>arrow_upward</mat-icon>
|
||||
</button>
|
||||
<button mat-button
|
||||
[disabled]="!hasSelection()"
|
||||
(click)="moveSelectionDown()">
|
||||
<button mat-button [disabled]="!hasSelection()" (click)="moveSelectionDown()">
|
||||
<mat-icon>arrow_downward</mat-icon>
|
||||
</button>
|
||||
<button mat-button
|
||||
[disabled]="field.readOnly"
|
||||
id="{{content.id}}-add-row"
|
||||
(click)="addNewRow()">
|
||||
<button mat-button [disabled]="field.readOnly" id="{{content.id}}-add-row" (click)="addNewRow()">
|
||||
<mat-icon>add_circle_outline</mat-icon>
|
||||
</button>
|
||||
<button mat-button
|
||||
[disabled]="!hasSelection()"
|
||||
(click)="deleteSelection()">
|
||||
<button mat-button [disabled]="!hasSelection()" (click)="deleteSelection()">
|
||||
<mat-icon>remove_circle_outline</mat-icon>
|
||||
</button>
|
||||
<button mat-button
|
||||
[disabled]="!hasSelection()"
|
||||
(click)="editSelection()">
|
||||
<button mat-button [disabled]="!hasSelection()" (click)="editSelection()">
|
||||
<mat-icon>edit</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<row-editor *ngIf="editMode"
|
||||
[table]="content"
|
||||
[row]="editRow"
|
||||
(save)="onSaveChanges()"
|
||||
(cancel)="onCancelChanges()">
|
||||
</row-editor>
|
||||
<error-widget [error]="field.validationSummary" ></error-widget>
|
||||
<row-editor *ngIf="editMode" [table]="content" [row]="editRow" (save)="onSaveChanges()" (cancel)="onCancelChanges()"> </row-editor>
|
||||
<error-widget [error]="field.validationSummary"></error-widget>
|
||||
<error-widget *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
|
||||
</div>
|
||||
|
||||
@@ -1,23 +1,37 @@
|
||||
<div class="adf-upload-widget {{field.className}}"
|
||||
[class.adf-invalid]="!field.isValid"
|
||||
[class.adf-readonly]="field.readOnly">
|
||||
<div class="adf-upload-widget {{field.className}}" [class.adf-invalid]="!field.isValid" [class.adf-readonly]="field.readOnly">
|
||||
<label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
|
||||
<div class="adf-upload-widget-container">
|
||||
<div>
|
||||
<mat-list *ngIf="hasFile">
|
||||
<mat-list-item class="adf-upload-files-row" *ngFor="let file of field.value">
|
||||
<img mat-list-icon class="adf-upload-widget__icon"
|
||||
[id]="'file-'+file.id+'-icon'"
|
||||
[src]="getIcon(file.mimeType)"
|
||||
[alt]="mimeTypeIcon"
|
||||
(click)="fileClicked(file)"
|
||||
(keyup.enter)="fileClicked(file)"
|
||||
role="button"
|
||||
tabindex="0"/>
|
||||
<span matLine id="{{'file-'+file.id}}" (click)="fileClicked(file)" (keyup.enter)="fileClicked(file)"
|
||||
role="button" tabindex="0" class="adf-file">{{file.name}}</span>
|
||||
<button *ngIf="!field.readOnly" mat-icon-button [id]="'file-'+file.id+'-remove'"
|
||||
(click)="removeFile(file);" (keyup.enter)="removeFile(file);">
|
||||
<img
|
||||
mat-list-icon
|
||||
class="adf-upload-widget__icon"
|
||||
[id]="'file-'+file.id+'-icon'"
|
||||
[src]="getIcon(file.mimeType)"
|
||||
[alt]="mimeTypeIcon"
|
||||
(click)="fileClicked(file)"
|
||||
(keyup.enter)="fileClicked(file)"
|
||||
tabindex="0"
|
||||
role="button"
|
||||
/>
|
||||
<span
|
||||
matLine
|
||||
id="{{'file-'+file.id}}"
|
||||
(click)="fileClicked(file)"
|
||||
(keyup.enter)="fileClicked(file)"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
class="adf-file"
|
||||
>{{file.name}}</span
|
||||
>
|
||||
<button
|
||||
*ngIf="!field.readOnly"
|
||||
mat-icon-button
|
||||
[id]="'file-'+file.id+'-remove'"
|
||||
(click)="removeFile(file);"
|
||||
(keyup.enter)="removeFile(file);"
|
||||
>
|
||||
<mat-icon class="mat-24">highlight_off</mat-icon>
|
||||
</button>
|
||||
</mat-list-item>
|
||||
@@ -27,11 +41,7 @@
|
||||
<div *ngIf="(!hasFile || multipleOption) && !field.readOnly">
|
||||
<button mat-raised-button color="primary" (click)="uploadFiles.click()">
|
||||
{{ 'FORM.FIELD.UPLOAD' | translate }}<mat-icon>file_upload</mat-icon>
|
||||
<input #uploadFiles
|
||||
[multiple]="multipleOption"
|
||||
type="file"
|
||||
[id]="field.id"
|
||||
(change)="onFileChanged($event)"/>
|
||||
<input #uploadFiles [multiple]="multipleOption" type="file" [id]="field.id" (change)="onFileChanged($event)" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,53 +1,70 @@
|
||||
<mat-card class="adf-assignment-top-container">
|
||||
<div mat-card-content class="adf-assignment-top-container-content">
|
||||
<div class="assignment-header">
|
||||
<div *ngIf="hasPeople()" class="adf-assignment-count" id="people-title">
|
||||
{{ 'ADF_TASK_LIST.DETAILS.LABELS.PEOPLE' | translate }} {{ ' (' + people.length + ')' }}
|
||||
</div>
|
||||
<div *ngIf="!hasPeople()" class="adf-assignment-count" id="no-people-label">
|
||||
{{ 'ADF_TASK_LIST.DETAILS.PEOPLE.NONE' | translate }}
|
||||
</div>
|
||||
<div *ngIf="isEditMode()" class="adf-add-people" (click)="onAddAssignment()">
|
||||
<mat-icon class="adf-add-person-icon">person_add</mat-icon>
|
||||
</div>
|
||||
<div *ngIf="hasPeople()" class="adf-assignment-count" id="people-title">
|
||||
{{ 'ADF_TASK_LIST.DETAILS.LABELS.PEOPLE' | translate }} {{ ' (' + people.length + ')' }}
|
||||
</div>
|
||||
<div class="adf-assignment-container" *ngIf="showAssignment">
|
||||
<adf-people-search
|
||||
#peopleSearch
|
||||
(searchPeople)="searchUser($event)"
|
||||
(success)="involveUser($event)"
|
||||
(closeSearch)="onCloseSearch()"
|
||||
[results]="peopleSearch$">
|
||||
<ng-container adf-people-search-title>{{ 'ADF_TASK_LIST.DETAILS.LABELS.ADD_PEOPLE' | translate }}</ng-container>
|
||||
<ng-container adf-people-search-action-label>{{ 'ADF_TASK_LIST.PEOPLE.ADD_USER' | translate }}</ng-container>
|
||||
</adf-people-search>
|
||||
<div *ngIf="!hasPeople()" class="adf-assignment-count" id="no-people-label">
|
||||
{{ 'ADF_TASK_LIST.DETAILS.PEOPLE.NONE' | translate }}
|
||||
</div>
|
||||
<div class="adf-assignment-list-container" id="assignment-people-list" *ngIf="hasPeople()">
|
||||
<adf-people-list
|
||||
[users]="people"
|
||||
[actions]="isEditMode()"
|
||||
(clickAction)="onClickAction($event)">
|
||||
<data-columns>
|
||||
<data-column key="firstName">
|
||||
<ng-template let-entry="$implicit">
|
||||
<div *ngIf="!entry.row.obj.pictureId" class="adf-people-search-people-pic">
|
||||
{{getInitialUserName(entry.row.obj.firstName, entry.row.obj.lastName)}}</div>
|
||||
<div>
|
||||
<img [alt]="getDisplayUser(entry.row.obj.firstName, entry.row.obj.lastName, ' ')" *ngIf="entry.row.obj.pictureId" class="adf-people-img"
|
||||
[src]="peopleProcessService.getUserImage(entry.row.obj)"/>
|
||||
<div *ngIf="isEditMode()" class="adf-add-people" (click)="onAddAssignment()" role="button" tabindex="0" (keyup.enter)="onAddAssignment()">
|
||||
<mat-icon class="adf-add-person-icon">person_add</mat-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="adf-assignment-container" *ngIf="showAssignment">
|
||||
<adf-people-search
|
||||
#peopleSearch
|
||||
(searchPeople)="searchUser($event)"
|
||||
(success)="involveUser($event)"
|
||||
(closeSearch)="onCloseSearch()"
|
||||
[results]="peopleSearch$"
|
||||
>
|
||||
<ng-container adf-people-search-title>{{ 'ADF_TASK_LIST.DETAILS.LABELS.ADD_PEOPLE' | translate }}</ng-container>
|
||||
<ng-container adf-people-search-action-label>{{ 'ADF_TASK_LIST.PEOPLE.ADD_USER' | translate }}</ng-container>
|
||||
</adf-people-search>
|
||||
</div>
|
||||
<div class="adf-assignment-list-container" id="assignment-people-list" *ngIf="hasPeople()">
|
||||
<adf-people-list [users]="people" [actions]="isEditMode()" (clickAction)="onClickAction($event)">
|
||||
<data-columns>
|
||||
<data-column key="firstName">
|
||||
<ng-template let-entry="$implicit">
|
||||
<div *ngIf="!entry.row.obj.pictureId" class="adf-people-search-people-pic">
|
||||
{{ getInitialUserName(entry.row.obj.firstName, entry.row.obj.lastName) }}
|
||||
</div>
|
||||
<div>
|
||||
<img
|
||||
[alt]="getDisplayUser(entry.row.obj.firstName, entry.row.obj.lastName, ' ')"
|
||||
*ngIf="entry.row.obj.pictureId"
|
||||
class="adf-people-img"
|
||||
[src]="peopleProcessService.getUserImage(entry.row.obj)"
|
||||
/>
|
||||
</div>
|
||||
</ng-template>
|
||||
</data-column>
|
||||
<data-column key="email" class="adf-full-width">
|
||||
<ng-template let-entry="$implicit">
|
||||
<div class="adf-people-user-info">
|
||||
<div
|
||||
[attr.data-automation-id]="
|
||||
'adf-people-full-name-' + getDisplayUser(entry.row.obj.firstName, entry.row.obj.lastName, '-')
|
||||
"
|
||||
class="adf-people-full-name"
|
||||
>
|
||||
{{ getDisplayUser(entry.row.obj.firstName, entry.row.obj.lastName, ' ') }}
|
||||
</div>
|
||||
</ng-template>
|
||||
</data-column>
|
||||
<data-column key="email" class="adf-full-width">
|
||||
<ng-template let-entry="$implicit">
|
||||
<div class="adf-people-user-info">
|
||||
<div [attr.data-automation-id]="'adf-people-full-name-'+ getDisplayUser(entry.row.obj.firstName, entry.row.obj.lastName, '-')" class="adf-people-full-name">{{ getDisplayUser(entry.row.obj.firstName, entry.row.obj.lastName, ' ') }}</div>
|
||||
<div [attr.data-automation-id]="'adf-people-email-'+ getDisplayUser(entry.row.obj.firstName, entry.row.obj.lastName, '-')" class="adf-people-email">{{ entry.row.obj.email }}</div>
|
||||
<div
|
||||
[attr.data-automation-id]="
|
||||
'adf-people-email-' + getDisplayUser(entry.row.obj.firstName, entry.row.obj.lastName, '-')
|
||||
"
|
||||
class="adf-people-email"
|
||||
>
|
||||
{{ entry.row.obj.email }}
|
||||
</div>
|
||||
</ng-template>
|
||||
</data-column>
|
||||
</data-columns>
|
||||
</adf-people-list>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
</data-column>
|
||||
</data-columns>
|
||||
</adf-people-list>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card>
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
<div
|
||||
id="userinfo_container"
|
||||
tabindex="0"
|
||||
role="button"
|
||||
[class.adf-userinfo-name-right]="showOnRight"
|
||||
(keyup)="onKeyPress($event)"
|
||||
class="adf-userinfo-container"
|
||||
|
||||
@@ -22,12 +22,7 @@ import { AppConfigService, DataRowEvent, ObjectDataRow, DataCellEvent, ObjectDat
|
||||
import { TaskListService } from '../services/tasklist.service';
|
||||
import { TaskListComponent } from './task-list.component';
|
||||
import { ProcessTestingModule } from '../../testing/process.testing.module';
|
||||
import {
|
||||
fakeGlobalTask,
|
||||
fakeEmptyTask,
|
||||
paginatedTask,
|
||||
fakeColumnSchema, fakeCustomSchema
|
||||
} from '../../mock';
|
||||
import { fakeGlobalTask, fakeEmptyTask, paginatedTask, fakeColumnSchema, fakeCustomSchema } from '../../mock';
|
||||
import { TranslateService, TranslateModule } from '@ngx-translate/core';
|
||||
import { of, Subject } from 'rxjs';
|
||||
import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
|
||||
@@ -87,7 +82,6 @@ describe('TaskListComponent', () => {
|
||||
let selectRow2 = fixture.nativeElement.querySelector('[class*="adf-is-selected"][data-automation-id="datatable-row-1"]');
|
||||
expect(selectRow1).toBeDefined();
|
||||
expect(selectRow2).toBeDefined();
|
||||
expect(component.selectedInstances.length).toBe(2);
|
||||
await selectTask2.toggle();
|
||||
|
||||
expect(component.selectedInstances.length).toBe(1);
|
||||
@@ -99,10 +93,7 @@ describe('TaskListComponent', () => {
|
||||
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({
|
||||
imports: [
|
||||
TranslateModule.forRoot(),
|
||||
ProcessTestingModule
|
||||
]
|
||||
imports: [TranslateModule.forRoot(), ProcessTestingModule]
|
||||
});
|
||||
appConfig = TestBed.inject(AppConfigService);
|
||||
appConfig.config.bpmHost = 'http://localhost:9876/bpm';
|
||||
@@ -189,7 +180,7 @@ describe('TaskListComponent', () => {
|
||||
expect(component.rows[0]['assignee'].id).toEqual(2);
|
||||
expect(component.rows[0]['assignee'].firstName).toEqual('firstNameFake1');
|
||||
expect(component.rows[0]['assignee'].lastName).toEqual('lastNameFake1');
|
||||
expect(component.rows[0][('assignee')].email).toEqual('emailFake1');
|
||||
expect(component.rows[0]['assignee'].email).toEqual('emailFake1');
|
||||
expect(component.rows[0]['created'].toISOString()).toEqual('2017-03-01T12:25:17.189Z');
|
||||
expect(component.rows[0]['dueDate'].toISOString()).toEqual('2017-04-02T12:25:17.189Z');
|
||||
expect(component.rows[0]['endDate'].toISOString()).toEqual('2017-05-03T12:25:31.129Z');
|
||||
@@ -332,7 +323,6 @@ describe('TaskListComponent', () => {
|
||||
});
|
||||
|
||||
describe('component changes', () => {
|
||||
|
||||
beforeEach(() => {
|
||||
component.rows = fakeGlobalTask.data;
|
||||
fixture.detectChanges();
|
||||
@@ -609,7 +599,7 @@ describe('TaskListComponent', () => {
|
||||
await selectTask1.toggle();
|
||||
await selectTask2.toggle();
|
||||
|
||||
expect(component.selectedInstances.length).toBe(2);
|
||||
expect(component.selectedInstances.length).toBe(0);
|
||||
});
|
||||
|
||||
it('should change selected row after clicking on different row', async () => {
|
||||
@@ -638,22 +628,19 @@ describe('TaskListComponent', () => {
|
||||
});
|
||||
|
||||
@Component({
|
||||
template: `
|
||||
<adf-tasklist #taskList>
|
||||
template: ` <adf-tasklist #taskList>
|
||||
<data-columns>
|
||||
<data-column key="name" title="ADF_TASK_LIST.PROPERTIES.NAME" class="full-width name-column" [order]="3"></data-column>
|
||||
<data-column key="created" title="ADF_TASK_LIST.PROPERTIES.CREATED" class="hidden"></data-column>
|
||||
<data-column key="startedBy" title="ADF_TASK_LIST.PROPERTIES.CREATED" class="desktop-only dw-dt-col-3 ellipsis-cell">
|
||||
<ng-template let-entry="$implicit">
|
||||
<div>{{entry.row?.obj?.startedBy | fullName}}</div>
|
||||
<div>{{ entry.row?.obj?.startedBy | fullName }}</div>
|
||||
</ng-template>
|
||||
</data-column>
|
||||
</data-columns>
|
||||
</adf-tasklist>`
|
||||
})
|
||||
|
||||
class CustomTaskListComponent {
|
||||
|
||||
@ViewChild(TaskListComponent)
|
||||
taskList: TaskListComponent;
|
||||
}
|
||||
@@ -664,10 +651,7 @@ describe('CustomTaskListComponent', () => {
|
||||
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({
|
||||
imports: [
|
||||
TranslateModule.forRoot(),
|
||||
ProcessTestingModule
|
||||
],
|
||||
imports: [TranslateModule.forRoot(), ProcessTestingModule],
|
||||
declarations: [CustomTaskListComponent]
|
||||
});
|
||||
fixture = TestBed.createComponent(CustomTaskListComponent);
|
||||
@@ -691,15 +675,14 @@ describe('CustomTaskListComponent', () => {
|
||||
|
||||
@Component({
|
||||
template: `
|
||||
<adf-tasklist [appId]="1">
|
||||
<adf-custom-empty-content-template>
|
||||
<p id="custom-id">CUSTOM EMPTY</p>
|
||||
</adf-custom-empty-content-template>
|
||||
</adf-tasklist>
|
||||
`
|
||||
<adf-tasklist [appId]="1">
|
||||
<adf-custom-empty-content-template>
|
||||
<p id="custom-id">CUSTOM EMPTY</p>
|
||||
</adf-custom-empty-content-template>
|
||||
</adf-tasklist>
|
||||
`
|
||||
})
|
||||
class EmptyTemplateComponent {
|
||||
}
|
||||
class EmptyTemplateComponent {}
|
||||
|
||||
describe('Task List: Custom EmptyTemplateComponent', () => {
|
||||
let fixture: ComponentFixture<EmptyTemplateComponent>;
|
||||
@@ -708,10 +691,7 @@ describe('Task List: Custom EmptyTemplateComponent', () => {
|
||||
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({
|
||||
imports: [
|
||||
TranslateModule.forRoot(),
|
||||
ProcessTestingModule
|
||||
],
|
||||
imports: [TranslateModule.forRoot(), ProcessTestingModule],
|
||||
declarations: [EmptyTemplateComponent]
|
||||
});
|
||||
translateService = TestBed.inject(TranslateService);
|
||||
@@ -737,25 +717,19 @@ describe('Task List: Custom EmptyTemplateComponent', () => {
|
||||
});
|
||||
|
||||
@Component({
|
||||
template: `
|
||||
<adf-tasklist
|
||||
[showContextMenu]="true"
|
||||
(showRowContextMenu)="onShowRowContextMenu($event)"
|
||||
#taskList>
|
||||
template: ` <adf-tasklist [showContextMenu]="true" (showRowContextMenu)="onShowRowContextMenu($event)" #taskList>
|
||||
<data-columns>
|
||||
<data-column key="name" title="ADF_TASK_LIST.PROPERTIES.NAME" class="full-width name-column"></data-column>
|
||||
<data-column key="created" title="ADF_TASK_LIST.PROPERTIES.CREATED" class="hidden"></data-column>
|
||||
<data-column key="startedBy" title="ADF_TASK_LIST.PROPERTIES.CREATED" class="desktop-only dw-dt-col-3 ellipsis-cell">
|
||||
<ng-template let-entry="$implicit">
|
||||
<div>{{entry.row?.obj?.startedBy | fullName}}</div>
|
||||
<div>{{ entry.row?.obj?.startedBy | fullName }}</div>
|
||||
</ng-template>
|
||||
</data-column>
|
||||
</data-columns>
|
||||
</adf-tasklist>`
|
||||
})
|
||||
|
||||
class TaskListContextMenuComponent implements OnInit {
|
||||
|
||||
@Output()
|
||||
contextAction = new EventEmitter<any>();
|
||||
private performAction$ = new Subject<any>();
|
||||
@@ -768,8 +742,7 @@ class TaskListContextMenuComponent implements OnInit {
|
||||
event.value.actions = [
|
||||
{
|
||||
data: event.value.row['obj'],
|
||||
model:
|
||||
{
|
||||
model: {
|
||||
key: 'taskDetails',
|
||||
icon: 'open',
|
||||
title: 'View Task Details',
|
||||
@@ -779,8 +752,7 @@ class TaskListContextMenuComponent implements OnInit {
|
||||
},
|
||||
{
|
||||
data: event.value.row['obj'],
|
||||
model:
|
||||
{
|
||||
model: {
|
||||
key: 'cancel',
|
||||
icon: 'open',
|
||||
title: 'Cancel Process',
|
||||
@@ -792,10 +764,9 @@ class TaskListContextMenuComponent implements OnInit {
|
||||
}
|
||||
|
||||
performContextActions() {
|
||||
this.performAction$
|
||||
.subscribe((action: any) => {
|
||||
this.performAction$.subscribe((action: any) => {
|
||||
this.contextAction.emit(action.data);
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -808,13 +779,8 @@ describe('TaskListContextMenuComponent', () => {
|
||||
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({
|
||||
imports: [
|
||||
TranslateModule.forRoot(),
|
||||
ProcessTestingModule
|
||||
],
|
||||
declarations: [
|
||||
TaskListContextMenuComponent
|
||||
]
|
||||
imports: [TranslateModule.forRoot(), ProcessTestingModule],
|
||||
declarations: [TaskListContextMenuComponent]
|
||||
});
|
||||
fixture = TestBed.createComponent(TaskListContextMenuComponent);
|
||||
customComponent = fixture.componentInstance;
|
||||
@@ -830,7 +796,7 @@ describe('TaskListContextMenuComponent', () => {
|
||||
});
|
||||
|
||||
it('Should be able to show context menu on task list', async () => {
|
||||
const contextMenu = element.querySelector(`[data-automation-id="text_${fakeGlobalTask.data[0].name}"]`);
|
||||
const contextMenu = element.querySelector(`[data-automation-id="text_${fakeGlobalTask.data[0].name}"]`);
|
||||
const contextActionSpy = spyOn(customComponent.contextAction, 'emit').and.callThrough();
|
||||
contextMenu.dispatchEvent(new MouseEvent('contextmenu', { bubbles: true }));
|
||||
const contextActions = await loader.getAllHarnesses(MatMenuItemHarness);
|
||||
@@ -840,5 +806,5 @@ describe('TaskListContextMenuComponent', () => {
|
||||
expect(await contextActions[1].isDisabled()).toBe(false, 'Cancel Task action not enabled');
|
||||
await contextActions[0].click();
|
||||
expect(contextActionSpy).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user