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

[ACA-3266] Improve version upload component (#5750)

Browse Source 
* added new component to compare current and new file version of a node.

* update doc

* added more tests

* updated docs

* small fixes

* changed with typography

* Update version-comparison.component.md

* handle hiding the comparison component on demo shell if cancelled/uploaded a new file version

* small fixes

Co-authored-by: Eugenio Romano <eromano@users.noreply.github.com>
This commit is contained in:
Urse Daniel
2020-06-04 15:01:11 +03:00
committed by GitHub
parent 13066a9a32
commit f0df6b3a5f
16 changed files with 317 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
lib/content-services/src/lib/i18n/en.json
View File

@@ -21,6 +21,14 @@
"NO_LABEL": "No"
}
},
"ADF_VERSION_COMPARISON": {
"CURRENT_VERSION": "Current",
"NEW_VERSION": "New",
"ACCESSIBILITY": {
"ICON_TEXT": "Item type {{ type }}",
"ARROW_ICON": "Arrow right icon"
}
},
"ADF_DROPDOWN": {
"LOADING": "Loading..."
},

2
lib/content-services/src/lib/styles/_index.scss
View File

@@ -24,6 +24,7 @@
@import '../permission-manager/components/add-permission/add-permission-dialog.component';
@import '../permission-manager/components/add-permission/add-permission-panel.component';
@import '../tree-view/components/tree-view.component';
@import '../version-manager/version-comparison.component';
@mixin adf-content-services-theme($theme) {
@include adf-breadcrumb-theme($theme);
@@ -48,4 +49,5 @@
@include adf-tree-view-theme($theme);
@include adf-search-filter-theme($theme);
@include adf-search-chip-list-theme($theme);
@include adf-version-comparison-theme($theme);
}

21
lib/content-services/src/lib/version-manager/version-comparison.component.html Normal file
View File

@@ -0,0 +1,21 @@
<div class="adf-version-comparison-content">
<div class="adf-version-current">
<p>{{'ADF_VERSION_COMPARISON.CURRENT_VERSION'|translate }}</p>
<img [attr.aria-label]="'ADF_VERSION_COMPARISON.ACCESSIBILITY.ICON_TEXT' | translate:
{ type: (node.content.mimeType | fileType | uppercase) | translate }"
[attr.alt]="'ADF_VERSION_COMPARISON.ACCESSIBILITY.ICON_TEXT' | translate:
{ type: (node.content.mimeType | fileType | uppercase) | translate }"
src="{{thumbnailService.getMimeTypeIcon(node.content.mimeType)}}"/>
<p class="adf-version-comparison-node-name" title="{{node.name}}">{{node.name}}</p>
</div>
<span class="material-icons adf-version-arrow-icon">keyboard_arrow_right</span>
<div class="adf-version-new">
<p>{{'ADF_VERSION_COMPARISON.NEW_VERSION'|translate }}</p>
<img [attr.aria-label]="'ADF_VERSION_COMPARISON.ACCESSIBILITY.ICON_TEXT' | translate:
{ type: (newFileVersion.type | fileType | uppercase) | translate }"
[attr.alt]="'ADF_VERSION_COMPARISON.ACCESSIBILITY.ICON_TEXT' | translate:
{ type: (newFileVersion.type | fileType | uppercase) | translate }"
src="{{thumbnailService.getMimeTypeIcon(newFileVersion.type)}}"/>
<p class="adf-version-comparison-file-name" title="{{newFileVersion.name}}">{{newFileVersion.name}}</p>
</div>
</div>

33
lib/content-services/src/lib/version-manager/version-comparison.component.scss Normal file
View File

@@ -0,0 +1,33 @@
@mixin adf-version-comparison-theme($theme) {
$config: mat-typography-config();
.adf-version-comparison-content {
display: flex;
align-items: center;
align-content: center;
justify-content: space-around;
}
.adf-version-current, .adf-version-new {
display: flex;
flex-direction: column;
align-items: center;
}
.adf-version-current img, .adf-version-new img {
width: 100px;
}
.adf-version-arrow-icon {
font-size: mat-font-size($config, display-4);
}
.adf-version-comparison-node-name, .adf-version-comparison-file-name {
width: 120px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
text-align: center;
}
}

133
lib/content-services/src/lib/version-manager/version-comparison.component.spec.ts Normal file
View File

@@ -0,0 +1,133 @@
/*!
* @license
* Copyright 2019 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { VersionComparisonComponent } from './version-comparison.component';
import { setupTestBed } from '@alfresco/adf-core';
import { TranslateModule } from '@ngx-translate/core';
import { ContentTestingModule } from '../testing/content.testing.module';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { Node } from '@alfresco/js-api';
describe('VersionComparisonComponent', () => {
let component: VersionComparisonComponent;
let fixture: ComponentFixture<VersionComparisonComponent>;
const node: Node = new Node({
id: '1234',
name: 'TEST-NODE',
isFile: true,
nodeType: 'FAKE',
isFolder: false,
modifiedAt: new Date(),
modifiedByUser: null,
createdAt: new Date(),
createdByUser: null,
content: {
mimeType: 'text/html',
mimeTypeName: 'HTML',
sizeInBytes: 13
}
});
const file: File = {
name: 'Fake New file',
type: 'image/png',
lastModified: 13,
size: 1351,
slice: null
};
setupTestBed({
imports: [
TranslateModule.forRoot(),
ContentTestingModule
],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
});
beforeEach(() => {
fixture = TestBed.createComponent(VersionComparisonComponent);
component = fixture.componentInstance;
component.node = node;
component.newFileVersion = file;
fixture.detectChanges();
});
it('should display current node mimetype if node exists', () => {
const currentNode = document.querySelector('.adf-version-current');
expect(currentNode).toBeDefined();
});
it('should display new file mimetype if file exists', () => {
const newVersionFile = document.querySelector('.adf-adf-version-new');
expect(newVersionFile).toBeDefined();
});
it('should display PDF svg image if new file type is PDF', () => {
component.newFileVersion = {
name: 'Fake New file',
type: 'application/pdf',
lastModified: 13,
size: 1351,
slice: null
};
fixture.detectChanges();
const newImageNode = document.querySelector('.adf-version-new img');
expect(newImageNode.getAttribute('src')).toBe('./assets/images/ft_ic_pdf.svg');
});
it('should display png svg image if the current node is png type', () => {
component.node = {
id: '1234',
name: 'TEST-NODE',
isFile: true,
nodeType: 'FAKE',
isFolder: false,
modifiedAt: new Date(),
modifiedByUser: null,
createdAt: new Date(),
createdByUser: null,
content: {
mimeType: 'image/jpeg',
mimeTypeName: 'JPEG',
sizeInBytes: 13
}
};
fixture.detectChanges();
const currentNode = document.querySelector('.adf-version-current img');
expect(currentNode.getAttribute('src')).toBe('./assets/images/ft_ic_raster_image.svg');
});
describe('Accessibility', () => {
it('should have aria label defined for current node image', () => {
const currentNode = document.querySelector('.adf-version-current img');
expect(currentNode.getAttribute('aria-label')).toBeDefined();
});
it('should have alt defined for current node image', () => {
const currentNode = document.querySelector('.adf-version-current img');
expect(currentNode.getAttribute('alt')).toBeDefined();
});
it('should have aria label defined for current node image', () => {
const newImageNode = document.querySelector('.adf-version-new img');
expect(newImageNode.getAttribute('aria-label')).toBeDefined();
});
it('should have alt defined for current node image', () => {
const newImageNode = document.querySelector('.adf-version-new img');
expect(newImageNode.getAttribute('alt')).toBeDefined();
});
});
});

40
lib/content-services/src/lib/version-manager/version-comparison.component.ts Normal file
View File

@@ -0,0 +1,40 @@
/*!
* @license
* Copyright 2019 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { Component, Input } from '@angular/core';
import { Node } from '@alfresco/js-api';
import { ThumbnailService } from '@alfresco/adf-core';
@Component({
selector: 'adf-version-comparison',
templateUrl: './version-comparison.component.html',
styleUrls: ['./version-comparison.component.scss']
})
export class VersionComparisonComponent {
/** Target node. */
@Input()
node: Node;
/** New file for updating current version. */
@Input()
newFileVersion: File;
constructor(public thumbnailService: ThumbnailService) {
}
}

3
lib/content-services/src/lib/version-manager/version-manager.component.html
View File

@@ -1,4 +1,7 @@
<div class="adf-new-version-container">
<adf-version-comparison *ngIf="showVersionComparison" [node]="node" [newFileVersion]="newFileVersion"></adf-version-comparison>
<div class="adf-new-version-uploader-container" id="adf-new-version-uploader-container" fxLayout="row" fxLayoutAlign="end center" [@uploadToggle]="uploadState">
<table class="adf-version-upload" *ngIf="uploadState !== 'close'">
<tr>

12
lib/content-services/src/lib/version-manager/version-manager.component.ts
View File

@@ -55,6 +55,10 @@ export class VersionManagerComponent implements OnInit {
@Input()
showComments = true;
/** Toggles showing/hiding the version comparison component. */
@Input()
showVersionComparison = false;
/** Enable/disable downloading a version of the current node. */
@Input()
allowDownload = true;
@@ -67,6 +71,10 @@ export class VersionManagerComponent implements OnInit {
@Output()
uploadError: EventEmitter<Node> = new EventEmitter<Node>();
/** Emitted when an cancelling during upload. */
@Output()
uploadCancel: EventEmitter<boolean> = new EventEmitter<boolean>();
@ViewChild('versionList')
versionListComponent: VersionListComponent;
@@ -90,6 +98,7 @@ export class VersionManagerComponent implements OnInit {
}
onUploadSuccess(event: any) {
this.showVersionComparison = false;
this.newFileVersion = null;
this.alfrescoApiService.nodeUpdated.next(event.value.entry);
this.versionListComponent.loadVersionHistory();
@@ -103,6 +112,9 @@ export class VersionManagerComponent implements OnInit {
onUploadCancel() {
this.uploadState = 'close';
this.showVersionComparison = false;
this.newFileVersion = null;
this.uploadCancel.emit(true);
}
toggleNewVersion() {

7
lib/content-services/src/lib/version-manager/version-manager.module.ts
View File

@@ -25,6 +25,7 @@ import { VersionManagerComponent } from './version-manager.component';
import { VersionListComponent } from './version-list.component';
import { UploadModule } from '../upload/upload.module';
import { CoreModule } from '@alfresco/adf-core';
import { VersionComparisonComponent } from './version-comparison.component';
@NgModule({
imports: [
@@ -38,12 +39,14 @@ import { CoreModule } from '@alfresco/adf-core';
VersionUploadComponent,
VersionManagerComponent,
VersionListComponent,
FormsModule
FormsModule,
VersionComparisonComponent
],
declarations: [
VersionUploadComponent,
VersionManagerComponent,
VersionListComponent
VersionListComponent,
VersionComparisonComponent
]
})
export class VersionManagerModule {}