inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-12 17:04:57 +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
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 80 additions and 69 deletions
Show Stats 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');
currentFolder = $('div[class*="adf-breadcrumb-item adf-active"] div');
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"]');
uploadMultipleFileButton = $('input[data-automation-id="upload-multiple-files"]');
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;
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', () => {

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 { FormDefinitionSelectorCloudComponent } from './components/form-definition-selector-cloud.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 { DropdownCloudWidgetComponent } from './components/widgets/dropdown/dropdown-cloud.widget';
@ -57,13 +62,13 @@ import { FormCloudSpinnerService } from './services/spinner/form-cloud-spinner.s
ContentNodeSelectorModule,
PeopleCloudModule,
GroupCloudModule,
ContentMetadataModule,
UploadModule,
AlfrescoViewerModule,
RichTextEditorModule,
ToolbarModule,
A11yModule,
FormatSpacePipe
FormatSpacePipe,
AlfrescoViewerComponent,
...CONTENT_UPLOAD_DIRECTIVES,
...CONTENT_METADATA_DIRECTIVES
],
declarations: [
FormCloudComponent,