mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-12 17:04:57 +00:00
[ACA-3266] Improve version upload component (#5750)
* 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
GitHub
parent
13066a9a32
commit
f0df6b3a5f
@ -21,7 +21,8 @@
|
||||
"SHOW_COMMENTS": "Show comments on versions",
|
||||
"ALLOW_DOWNLOAD": "Enable version download",
|
||||
"READ_ONLY": "Read-only",
|
||||
"COMMENTS": "Show comments"
|
||||
"COMMENTS": "Show comments",
|
||||
"VERSION_COMPARISON": "Show version comparison"
|
||||
},
|
||||
"PERSONAL-FILES": "Personal Files",
|
||||
"WARN-MULTIPLE-UPLOADS": "Display warning for multiple uploads.",
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<mat-slide-toggle id="adf-version-manager-switch-download"color="primary" [(ngModel)]="allowDownload">
|
||||
<mat-slide-toggle id="adf-version-manager-switch-download" color="primary" [(ngModel)]="allowDownload">
|
||||
{{'APP.ADF_VERSION_MANAGER.ALLOW_DOWNLOAD' | translate}}
|
||||
</mat-slide-toggle>
|
||||
</section>
|
||||
@ -18,11 +18,24 @@
|
||||
</mat-slide-toggle>
|
||||
</section>
|
||||
|
||||
<section *ngIf="newFileVersion">
|
||||
<mat-slide-toggle id="adf-version-manager-switch-comparison" color="primary" [(ngModel)]="showVersionComparison">
|
||||
{{'APP.ADF_VERSION_MANAGER.VERSION_COMPARISON' | translate}}
|
||||
</mat-slide-toggle>
|
||||
</section>
|
||||
|
||||
<section mat-dialog-content *ngIf="!readOnly">
|
||||
<adf-version-manager [node]="contentEntry" [newFileVersion]="newFileVersion" [allowDownload]="allowDownload" [showComments]="showComments" (uploadError)="uploadError($event)"></adf-version-manager>
|
||||
<adf-version-manager [node]="contentEntry"
|
||||
(uploadCancel)="hideVersionComparison($event)"
|
||||
(uploadSuccess)="hideVersionComparison($event)"
|
||||
[showVersionComparison]="showVersionComparison"
|
||||
[newFileVersion]="newFileVersion"
|
||||
[allowDownload]="allowDownload"
|
||||
[showComments]="showComments"
|
||||
(uploadError)="uploadError($event)"></adf-version-manager>
|
||||
</section>
|
||||
<section mat-dialog-content *ngIf="readOnly">
|
||||
<adf-version-list [node]="contentEntry" [showActions]="false" ></adf-version-list>
|
||||
<adf-version-list [node]="contentEntry" [showActions]="false"></adf-version-list>
|
||||
</section>
|
||||
|
||||
<footer mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
|
||||
|
||||
@ -32,6 +32,7 @@ export class VersionManagerDialogAdapterComponent {
|
||||
showComments = true;
|
||||
allowDownload = true;
|
||||
readOnly = false;
|
||||
showVersionComparison = false;
|
||||
|
||||
constructor(@Inject(MAT_DIALOG_DATA) data: any,
|
||||
private snackBar: MatSnackBar,
|
||||
@ -43,10 +44,17 @@ export class VersionManagerDialogAdapterComponent {
|
||||
}
|
||||
|
||||
uploadError(errorMessage: string) {
|
||||
this.snackBar.open(errorMessage, '', { duration: 4000 });
|
||||
this.snackBar.open(errorMessage, '', {duration: 4000});
|
||||
}
|
||||
|
||||
close() {
|
||||
this.containingDialog.close();
|
||||
}
|
||||
|
||||
hideVersionComparison(isCancelled: boolean | Node) {
|
||||
if (isCancelled) {
|
||||
this.showVersionComparison = false;
|
||||
this.newFileVersion = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -289,6 +289,7 @@ for more information about installing and using the source code.
|
||||
| [Upload Button Component](content-services/components/upload-button.component.md) | Activates a file upload. | [Source](../lib/content-services/src/lib/upload/components/upload-button.component.ts) |
|
||||
| [Upload Drag Area Component](content-services/components/upload-drag-area.component.md) | Adds a drag and drop area to upload files to ACS. | [Source](../lib/content-services/src/lib/upload/components/upload-drag-area.component.ts) |
|
||||
| [Upload Version Button Component (Workaround)](content-services/components/upload-version-button.component.md)  | Activates a file version upload. | [Source](../lib/content-services/src/lib/upload/components/upload-version-button.component.ts) |
|
||||
| [Version Comparison Component](content-services/components/version-comparison.component.md) | Displays the side by side comparison between the current target node (type, name, icon) and the new file that should update it's version. | [Source](../lib/content-services/src/lib/version-manager/version-comparison.component.ts) |
|
||||
| [Version List component](content-services/components/version-list.component.md)  | Displays the version history of a node in a Version Manager component. | [Source](../lib/content-services/src/lib/version-manager/version-list.component.ts) |
|
||||
| [Version Manager Component](content-services/components/version-manager.component.md)  | Displays the version history of a node with the ability to upload a new version. | [Source](../lib/content-services/src/lib/version-manager/version-manager.component.ts) |
|
||||
| [Webscript component](content-services/components/webscript.component.md) | Provides access to Webscript features. | [Source](../lib/content-services/src/lib/webscript/webscript.component.ts) |
|
||||
|
||||
@ -0,0 +1,30 @@
|
||||
---
|
||||
Title: Version Comparison Component
|
||||
Added: v3.9.0
|
||||
Status: Active
|
||||
Last reviewed: 2020-06-04
|
||||
---
|
||||
|
||||
# [Version Comparison Component](../../../lib/content-services/src/lib/version-manager/version-comparison.component.ts "Defined in version-comparison.component.ts")
|
||||
|
||||
Displays the side by side comparison between the current target node (type, name, icon) and the new file that should update it's version.
|
||||
|
||||
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<adf-version-comparison
|
||||
[node]="aNode"
|
||||
[newFileVersion]="aNewFileVersion">
|
||||
</adf-version-comparison>
|
||||
```
|
||||
|
||||
## Class members
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| newFileVersion | `File` | | New file for updating current version. |
|
||||
| node | [`Node`](https://github.com/Alfresco/alfresco-js-api/blob/development/src/api/content-rest-api/docs/Node.md) | | Target node. |
|
||||
@ -33,11 +33,13 @@ Displays the version history of a node with the ability to upload a new version.
|
||||
| newFileVersion | `File` | | New file for updating current version. |
|
||||
| node | [`Node`](https://github.com/Alfresco/alfresco-js-api/blob/development/src/api/content-rest-api/docs/Node.md) | | Target node to manage version history. |
|
||||
| showComments | `boolean` | true | Toggles showing/hiding of comments. |
|
||||
| showVersionComparison | `boolean` | false | Toggles showing/hiding the [version comparison component](../../content-services/components/version-comparison.component.md). |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| uploadCancel | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<boolean>` | Emitted when an cancelling during upload. |
|
||||
| uploadError | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`Node`](https://github.com/Alfresco/alfresco-js-api/blob/development/src/api/content-rest-api/docs/Node.md)`>` | Emitted when an error occurs during upload. |
|
||||
| uploadSuccess | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`Node`](https://github.com/Alfresco/alfresco-js-api/blob/development/src/api/content-rest-api/docs/Node.md)`>` | Emitted when a file is uploaded successfully. |
|
||||
|
||||
|
||||
BIN
docs/docassets/images/version-comparison.png
Normal file
BIN
docs/docassets/images/version-comparison.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
@ -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..."
|
||||
},
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -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>
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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();
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -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) {
|
||||
}
|
||||
|
||||
}
|
||||
@ -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>
|
||||
|
||||
@ -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() {
|
||||
|
||||
@ -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 {}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user