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

AAE-24573 Refactoring upload button component to avoid unwanted page refresh after click (#10008)

Browse Source 
* AAE-24573 Refactoring upload button component to avoid unwanted page refresh after click

* AAE-24573 Code improvements

* AAE-24573 Fixing unit test

* AAE-24573 Fixing e2e

* AAE-24573 Fixing e2e
This commit is contained in:
Ehsan Rezaei
2024-07-29 17:49:08 +02:00
committed by GitHub
parent d1b6da953d
commit 548592b329
8 changed files with 80 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
e2e/core/pages/content-services.page.ts
View File

@@ -35,7 +35,7 @@ export class ContentServicesPage {
uploadBorder = $('#document-list-container'); uploadBorder = $('#document-list-container');
currentFolder = $('div[class*="adf-breadcrumb-item adf-active"] div'); currentFolder = $('div[class*="adf-breadcrumb-item adf-active"] div');
createFolderButton = $('button[data-automation-id="create-new-folder"]'); createFolderButton = $('button[data-automation-id="create-new-folder"]');
uploadFileButton = $('.adf-upload-button-file-container button'); uploadFileButton = $('.adf-upload-button-file-container label');
uploadFileButtonInput = $('input[data-automation-id="upload-single-file"]'); uploadFileButtonInput = $('input[data-automation-id="upload-single-file"]');
uploadMultipleFileButton = $('input[data-automation-id="upload-multiple-files"]'); uploadMultipleFileButton = $('input[data-automation-id="upload-multiple-files"]');
uploadFolderButton = $('input[data-automation-id="uploadFolder"]'); uploadFolderButton = $('input[data-automation-id="uploadFolder"]');

2
lib/content-services/src/lib/content-node-selector/content-node-selector.component.scss
View File

@@ -84,7 +84,7 @@ adf-content-node-selector {
justify-content: space-between; justify-content: space-between;
color: var(--adf-theme-foreground-text-color); color: var(--adf-theme-foreground-text-color);
button { label {
text-transform: uppercase; text-transform: uppercase;
font-weight: normal; font-weight: normal;
} }

10
lib/content-services/src/lib/content-node-selector/content-node-selector.component.spec.ts
View File

@@ -294,7 +294,7 @@ describe('ContentNodeSelectorComponent', () => {
const adfUploadButton = fixture.debugElement.query(By.css('adf-upload-button')); const adfUploadButton = fixture.debugElement.query(By.css('adf-upload-button'));
expect(adfUploadButton).not.toBeNull(); expect(adfUploadButton).not.toBeNull();
expect(adfUploadButton.nativeElement.textContent).toEqual('file_uploadFORM.FIELD.UPLOAD'); expect(adfUploadButton.nativeElement.textContent).toEqual('file_upload FORM.FIELD.UPLOAD');
}); });
it('should be able to disable UploadButton if showingSearch set to true', async () => { it('should be able to disable UploadButton if showingSearch set to true', async () => {
@@ -303,7 +303,7 @@ describe('ContentNodeSelectorComponent', () => {
component.hasAllowableOperations = true; component.hasAllowableOperations = true;
fixture.detectChanges(); fixture.detectChanges();
const adfUploadButton = fixture.debugElement.query(By.css('adf-upload-button button')); const adfUploadButton = fixture.debugElement.query(By.css('adf-upload-button input'));
expect(adfUploadButton).not.toBeNull(); expect(adfUploadButton).not.toBeNull();
expect(adfUploadButton.nativeElement.disabled).toBe(true); expect(adfUploadButton.nativeElement.disabled).toBe(true);
@@ -315,7 +315,7 @@ describe('ContentNodeSelectorComponent', () => {
component.hasAllowableOperations = true; component.hasAllowableOperations = true;
fixture.detectChanges(); fixture.detectChanges();
const adfUploadButton = fixture.debugElement.query(By.css('adf-upload-button button')); const adfUploadButton = fixture.debugElement.query(By.css('adf-upload-button input'));
expect(adfUploadButton).not.toBeNull(); expect(adfUploadButton).not.toBeNull();
expect(adfUploadButton.nativeElement.disabled).toBe(false); expect(adfUploadButton.nativeElement.disabled).toBe(false);
@@ -354,7 +354,7 @@ describe('ContentNodeSelectorComponent', () => {
component.onTabSelectionChange(1); component.onTabSelectionChange(1);
fixture.detectChanges(); fixture.detectChanges();
const adfUploadButton = fixture.debugElement.query(By.css('adf-upload-button button')); const adfUploadButton = fixture.debugElement.query(By.css('adf-upload-button input'));
expect(adfUploadButton).not.toBeNull(); expect(adfUploadButton).not.toBeNull();
expect(adfUploadButton.nativeElement.disabled).toBe(true); expect(adfUploadButton.nativeElement.disabled).toBe(true);
@@ -365,7 +365,7 @@ describe('ContentNodeSelectorComponent', () => {
component.hasAllowableOperations = true; component.hasAllowableOperations = true;
fixture.detectChanges(); fixture.detectChanges();
const adfUploadButton = fixture.debugElement.query(By.css('adf-upload-button button')); const adfUploadButton = fixture.debugElement.query(By.css('adf-upload-button input'));
expect(adfUploadButton).not.toBeNull(); expect(adfUploadButton).not.toBeNull();
expect(adfUploadButton.nativeElement.disabled).toBe(false); expect(adfUploadButton.nativeElement.disabled).toBe(false);

10
lib/content-services/src/lib/content-node-selector/content-node-selector.module.ts
View File

@@ -26,9 +26,9 @@ import { SearchModule } from '../search/search.module';
import { CoreModule } from '@alfresco/adf-core'; import { CoreModule } from '@alfresco/adf-core';
import { DocumentListModule } from '../document-list/document-list.module'; import { DocumentListModule } from '../document-list/document-list.module';
import { NameLocationCellComponent } from './name-location-cell/name-location-cell.component'; import { NameLocationCellComponent } from './name-location-cell/name-location-cell.component';
import { UploadModule } from '../upload/upload.module'; import { CONTENT_UPLOAD_DIRECTIVES } from '../upload/upload.module';
import { SearchQueryBuilderService } from '../search/services/search-query-builder.service'; import { SearchQueryBuilderService } from '../search/services/search-query-builder.service';
import { ContentDirectiveModule } from '../directives/content-directive.module'; import { CONTENT_DIRECTIVES } from '../directives/content-directive.module';
import { DropdownSitesComponent } from './site-dropdown/sites-dropdown.component'; import { DropdownSitesComponent } from './site-dropdown/sites-dropdown.component';
@NgModule({ @NgModule({
@@ -42,9 +42,9 @@ import { DropdownSitesComponent } from './site-dropdown/sites-dropdown.component
...BREADCRUMB_DIRECTIVES, ...BREADCRUMB_DIRECTIVES,
SearchModule, SearchModule,
DocumentListModule, DocumentListModule,
UploadModule, NameLocationCellComponent,
ContentDirectiveModule, CONTENT_DIRECTIVES,
NameLocationCellComponent ...CONTENT_UPLOAD_DIRECTIVES
], ],
exports: [ContentNodeSelectorPanelComponent, NameLocationCellComponent, ContentNodeSelectorComponent], exports: [ContentNodeSelectorPanelComponent, NameLocationCellComponent, ContentNodeSelectorComponent],
declarations: [ContentNodeSelectorPanelComponent, ContentNodeSelectorComponent], declarations: [ContentNodeSelectorPanelComponent, ContentNodeSelectorComponent],

91
lib/content-services/src/lib/upload/components/upload-button.component.html
View File

@@ -3,16 +3,8 @@
<div *ngIf="!uploadFolders"> <div *ngIf="!uploadFolders">
<!--Single Files Upload--> <!--Single Files Upload-->
<button *ngIf="!multipleFiles" <ng-container *ngIf="!multipleFiles">
[disabled]="isButtonDisabled()" <input
mat-raised-button
(click)="uploadSingleFile.click()">
<mat-icon class="adf-upload-button-icon">file_upload</mat-icon>
<span id="upload-single-file-label"
*ngIf="!staticTitle">{{ 'FILE_UPLOAD.BUTTON.UPLOAD_FILE' | translate }}</span>
<span id="upload-single-file-label-static"
*ngIf="staticTitle">{{ staticTitle }}</span>
<input #uploadSingleFile
id="upload-single-file" id="upload-single-file"
data-automation-id="upload-single-file" data-automation-id="upload-single-file"
[type]="file ? 'button' : 'file'" [type]="file ? 'button' : 'file'"
@@ -21,22 +13,19 @@
[attr.disabled]="isButtonDisabled()" [attr.disabled]="isButtonDisabled()"
[title]="tooltip" [title]="tooltip"
(change)="onFilesAdded($event)" (change)="onFilesAdded($event)"
(click)="onClickUploadButton()"> (click)="onClickUploadButton()"/>
</button> <label for="upload-single-file" class="adf-upload-button-label">
<mat-icon class="adf-upload-button-icon">file_upload</mat-icon>
<span id="upload-single-file-label" *ngIf="!staticTitle">
{{ 'FILE_UPLOAD.BUTTON.UPLOAD_FILE' | translate }}</span>
<span id="upload-single-file-label-static" *ngIf="staticTitle">
{{ staticTitle }}</span>
</label>
</ng-container>
<!--Multiple Files Upload--> <!--Multiple Files Upload-->
<button *ngIf="multipleFiles" <ng-container *ngIf="multipleFiles">
[disabled]="isButtonDisabled()" <input
mat-raised-button
(click)="uploadMultipleFiles.click()">
<mat-icon>file_upload</mat-icon>
<span id="upload-multiple-file-label"
*ngIf="!staticTitle">{{ 'FILE_UPLOAD.BUTTON.UPLOAD_FILE' | translate }}</span>
<span
id="upload-multiple-file-label-static"
*ngIf="staticTitle">{{ staticTitle }}</span>
<input #uploadMultipleFiles
id="upload-multiple-files" id="upload-multiple-files"
data-automation-id="upload-multiple-files" data-automation-id="upload-multiple-files"
type="file" type="file"
@@ -45,32 +34,36 @@
accept="{{acceptedFilesType}}" accept="{{acceptedFilesType}}"
[attr.disabled]="isButtonDisabled()" [attr.disabled]="isButtonDisabled()"
[title]="tooltip" [title]="tooltip"
(change)="onFilesAdded($event)"> (change)="onFilesAdded($event)"/>
</button> <label for="upload-multiple-file" data-automation-id="upload-multiple-files" class="adf-upload-button-label">
<mat-icon class="adf-upload-button-icon">file_upload</mat-icon>
<span id="upload-multiple-file-label" *ngIf="!staticTitle">
{{ 'FILE_UPLOAD.BUTTON.UPLOAD_FILE' | translate }}</span>
<span id="upload-multiple-file-label-static" *ngIf="staticTitle">
{{ staticTitle }}</span>
</label>
</ng-container>
</div> </div>
<!--Folders Upload--> <!--Folders Upload-->
<div *ngIf="uploadFolders"> <ng-container *ngIf="uploadFolders">
<button <input
[disabled]="isButtonDisabled()" id="uploadFolder"
mat-raised-button data-automation-id="uploadFolder"
(click)="uploadFolders.click()"> type="file"
<mat-icon>file_upload</mat-icon> name="uploadFiles"
<span id="uploadFolder-label" multiple="multiple"
*ngIf="!staticTitle">{{ 'FILE_UPLOAD.BUTTON.UPLOAD_FOLDER' | translate }}</span> accept="{{acceptedFilesType}}"
<span id="uploadFolder-label-static" webkitdirectory directory
*ngIf="staticTitle">{{ staticTitle }}</span> [attr.disabled]="isButtonDisabled()"
<input #uploadFolders [title]="tooltip"
id="uploadFolder" (change)="onDirectoryAdded($event)"/>
data-automation-id="uploadFolder" <label for="uploadFolder" data-automation-id="uploadFolder" class="adf-upload-button-label">
type="file" <mat-icon class="adf-upload-button-icon">file_upload</mat-icon>
name="uploadFiles" <span id="uploadFolder-label" *ngIf="!staticTitle">
multiple="multiple" {{ 'FILE_UPLOAD.BUTTON.UPLOAD_FOLDER' | translate }}</span>
accept="{{acceptedFilesType}}" <span id="uploadFolder-label-static" *ngIf="staticTitle">
webkitdirectory directory {{ staticTitle }}</span>
[attr.disabled]="isButtonDisabled()" </label>
[title]="tooltip" </ng-container>
(change)="onDirectoryAdded($event)">
</button>
</div>
</form> </form>

13
lib/content-services/src/lib/upload/components/upload-button.component.scss
View File

@@ -11,4 +11,17 @@
display: none; display: none;
} }
} }
&-upload-button-label {
display: flex;
align-items: center;
cursor: pointer;
padding: 8px 16px;
box-shadow: 0 3px 1px -2px #0003, 0 2px 2px rgba(0, 0, 0, 0.14), 0 1px 5px rgba(0, 0, 0, 0.12);
border-radius: 4px;
&:active {
box-shadow: 0 5px 5px -3px #0003, 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
}
}
} }

6
lib/content-services/src/lib/upload/components/upload-button.component.spec.ts
View File

@@ -189,15 +189,15 @@ describe('UploadButtonComponent', () => {
component.multipleFiles = false; component.multipleFiles = false;
fixture.detectChanges(); fixture.detectChanges();
expect(compiled.querySelector('#upload-single-file-label-static').textContent).toEqual('test-text'); expect(compiled.querySelector('#upload-single-file-label-static').textContent.trim()).toEqual('test-text');
component.multipleFiles = true; component.multipleFiles = true;
fixture.detectChanges(); fixture.detectChanges();
expect(compiled.querySelector('#upload-multiple-file-label-static').textContent).toEqual('test-text'); expect(compiled.querySelector('#upload-multiple-file-label-static').textContent.trim()).toEqual('test-text');
component.uploadFolders = true; component.uploadFolders = true;
fixture.detectChanges(); fixture.detectChanges();
expect(compiled.querySelector('#uploadFolder-label-static').textContent).toEqual('test-text'); expect(compiled.querySelector('#uploadFolder-label-static').textContent.trim()).toEqual('test-text');
}); });
describe('fileSize', () => { describe('fileSize', () => {

15
lib/process-services-cloud/src/lib/form/form-cloud.module.ts
View File

@@ -23,7 +23,12 @@ import { MaterialModule } from '../material.module';
import { FormCloudComponent } from './components/form-cloud.component'; import { FormCloudComponent } from './components/form-cloud.component';
import { FormDefinitionSelectorCloudComponent } from './components/form-definition-selector-cloud.component'; import { FormDefinitionSelectorCloudComponent } from './components/form-definition-selector-cloud.component';
import { FormCustomOutcomesComponent } from './components/form-cloud-custom-outcomes.component'; import { FormCustomOutcomesComponent } from './components/form-cloud-custom-outcomes.component';
import { AlfrescoViewerModule, ContentMetadataModule, ContentNodeSelectorModule, UploadModule } from '@alfresco/adf-content-services'; import {
AlfrescoViewerComponent,
CONTENT_METADATA_DIRECTIVES,
CONTENT_UPLOAD_DIRECTIVES,
ContentNodeSelectorModule
} from '@alfresco/adf-content-services';
import { DateCloudWidgetComponent } from './components/widgets/date/date-cloud.widget'; import { DateCloudWidgetComponent } from './components/widgets/date/date-cloud.widget';
import { DropdownCloudWidgetComponent } from './components/widgets/dropdown/dropdown-cloud.widget'; import { DropdownCloudWidgetComponent } from './components/widgets/dropdown/dropdown-cloud.widget';
@@ -57,13 +62,13 @@ import { FormCloudSpinnerService } from './services/spinner/form-cloud-spinner.s
ContentNodeSelectorModule, ContentNodeSelectorModule,
PeopleCloudModule, PeopleCloudModule,
GroupCloudModule, GroupCloudModule,
ContentMetadataModule,
UploadModule,
AlfrescoViewerModule,
RichTextEditorModule, RichTextEditorModule,
ToolbarModule, ToolbarModule,
A11yModule, A11yModule,
FormatSpacePipe FormatSpacePipe,
AlfrescoViewerComponent,
...CONTENT_UPLOAD_DIRECTIVES,
...CONTENT_METADATA_DIRECTIVES
], ],
declarations: [ declarations: [
FormCloudComponent, FormCloudComponent,