inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +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
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;
color: var(--adf-theme-foreground-text-color);
button {
label {
text-transform: uppercase;
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'));
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 () => {
@@ -303,7 +303,7 @@ describe('ContentNodeSelectorComponent', () => {
component.hasAllowableOperations = true;
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.nativeElement.disabled).toBe(true);
@@ -315,7 +315,7 @@ describe('ContentNodeSelectorComponent', () => {
component.hasAllowableOperations = true;
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.nativeElement.disabled).toBe(false);
@@ -354,7 +354,7 @@ describe('ContentNodeSelectorComponent', () => {
component.onTabSelectionChange(1);
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.nativeElement.disabled).toBe(true);
@@ -365,7 +365,7 @@ describe('ContentNodeSelectorComponent', () => {
component.hasAllowableOperations = true;
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.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 { DocumentListModule } from '../document-list/document-list.module';
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 { ContentDirectiveModule } from '../directives/content-directive.module';
import { CONTENT_DIRECTIVES } from '../directives/content-directive.module';
import { DropdownSitesComponent } from './site-dropdown/sites-dropdown.component';
@NgModule({
@@ -42,9 +42,9 @@ import { DropdownSitesComponent } from './site-dropdown/sites-dropdown.component
...BREADCRUMB_DIRECTIVES,
SearchModule,
DocumentListModule,
UploadModule,
ContentDirectiveModule,
NameLocationCellComponent
NameLocationCellComponent,
CONTENT_DIRECTIVES,
...CONTENT_UPLOAD_DIRECTIVES
],
exports: [ContentNodeSelectorPanelComponent, NameLocationCellComponent, 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">
<!--Single Files Upload-->
<button *ngIf="!multipleFiles"
[disabled]="isButtonDisabled()"
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
<ng-container *ngIf="!multipleFiles">
<input
id="upload-single-file"
data-automation-id="upload-single-file"
[type]="file ? 'button' : 'file'"
@@ -21,22 +13,19 @@
[attr.disabled]="isButtonDisabled()"
[title]="tooltip"
(change)="onFilesAdded($event)"
(click)="onClickUploadButton()">
</button>
(click)="onClickUploadButton()"/>
<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-->
<button *ngIf="multipleFiles"
[disabled]="isButtonDisabled()"
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
<ng-container *ngIf="multipleFiles">
<input
id="upload-multiple-files"
data-automation-id="upload-multiple-files"
type="file"
@@ -45,32 +34,36 @@
accept="{{acceptedFilesType}}"
[attr.disabled]="isButtonDisabled()"
[title]="tooltip"
(change)="onFilesAdded($event)">
</button>
(change)="onFilesAdded($event)"/>
<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>
<!--Folders Upload-->
<div *ngIf="uploadFolders">
<button
[disabled]="isButtonDisabled()"
mat-raised-button
(click)="uploadFolders.click()">
<mat-icon>file_upload</mat-icon>
<span id="uploadFolder-label"
*ngIf="!staticTitle">{{ 'FILE_UPLOAD.BUTTON.UPLOAD_FOLDER' | translate }}</span>
<span id="uploadFolder-label-static"
*ngIf="staticTitle">{{ staticTitle }}</span>
<input #uploadFolders
id="uploadFolder"
data-automation-id="uploadFolder"
type="file"
name="uploadFiles"
multiple="multiple"
accept="{{acceptedFilesType}}"
webkitdirectory directory
[attr.disabled]="isButtonDisabled()"
[title]="tooltip"
(change)="onDirectoryAdded($event)">
</button>
</div>
<ng-container *ngIf="uploadFolders">
<input
id="uploadFolder"
data-automation-id="uploadFolder"
type="file"
name="uploadFiles"
multiple="multiple"
accept="{{acceptedFilesType}}"
webkitdirectory directory
[attr.disabled]="isButtonDisabled()"
[title]="tooltip"
(change)="onDirectoryAdded($event)"/>
<label for="uploadFolder" data-automation-id="uploadFolder" class="adf-upload-button-label">
<mat-icon class="adf-upload-button-icon">file_upload</mat-icon>
<span id="uploadFolder-label" *ngIf="!staticTitle">
{{ 'FILE_UPLOAD.BUTTON.UPLOAD_FOLDER' | translate }}</span>
<span id="uploadFolder-label-static" *ngIf="staticTitle">
{{ staticTitle }}</span>
</label>
</ng-container>
</form>

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

@@ -11,4 +11,17 @@
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;
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;
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;
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', () => {