mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-12 17:04:57 +00:00
[ACA-45] Drag and Drop a New Version (#5710)
* added a new input: file * unit test - having singleFile option and a file as input, the type of the input for uploading should be button instead of file * added a click event for the upload button and also handle if having a file as input, the type of the input should be 'button' instead of 'file' * handling allowed for upload also for 'update' permissions over a dropped file. also emitting a new event for updating file version if i'm dropping a single file over another file. * unit tests for handling dropping a file over another * added a new input (file type) * passing a file to adf-version-upload component * new input as file and toggle new version if having that as input + unit test * added new input as file for new version * added new input to allow dropping a file over another to update it's version * added a new variable for handling dropping a file over another one and also handle a new event when we update the file version * pass a new dropped file to the dialog * new message * new method to allow isDropTarget for a file instead only to folders. * new emitter for updating a file's version * allows updating a file's version by dropping another file over it. * refactor allowDropFiles * update docs for drag&drop file into another file * update for drag&drop a file over another file functionality * made the allowDropFiles checking optional for isDropTarget property, only checking if the value is passed to the share-data-row Co-authored-by: Eugenio Romano <eugenio.romano@alfresco.com>
This commit is contained in:
Urse Daniel
GitHub
parent
531d1d7345
commit
4cb3a876d9
@ -119,7 +119,7 @@
|
||||
"DOCUMENT_LIST": {
|
||||
"MULTISELECT_CHECKBOXES": "Multiselect (with checkboxes)",
|
||||
"THUMBNAILS": "Enable Thumbnails",
|
||||
"ALLOW_DROP_FILES": "Enable Drop Files in a folder",
|
||||
"ALLOW_DROP_FILES": "Enable Drop Files in a folder or a file",
|
||||
"MULTIPLE_FILE_UPLOAD": "Multiple File Upload",
|
||||
"FOLDER_UPLOAD": "Folder upload",
|
||||
"CUSTOM_FILTER": "Custom extensions filter",
|
||||
|
||||
@ -41,7 +41,8 @@
|
||||
[versioning]="versioning"
|
||||
[adf-check-allowable-operation]="'create'"
|
||||
[adf-nodes]="disableDragArea ? getCurrentDocumentListNode() : []"
|
||||
(beginUpload)="onBeginUpload($event)">
|
||||
(beginUpload)="onBeginUpload($event)"
|
||||
(updateFileVersion)="onUploadNewVersion($event)">
|
||||
<div *ngIf="errorMessage" class="app-error-message">
|
||||
<button (click)="resetError()" mat-icon-button>
|
||||
<mat-icon>highlight_off</mat-icon>
|
||||
@ -565,8 +566,8 @@
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<mat-slide-toggle id="adf-document-list-enable-drop-files" [color]="'primary'" [(ngModel)]="allowDropFiles"
|
||||
(click)="toggleAllowDropFiles()">
|
||||
<mat-slide-toggle id="adf-document-list-enable-drop-files" [color]="'primary'" [checked]="allowDropFiles"
|
||||
(change)="toggleAllowDropFiles()">
|
||||
{{'DOCUMENT_LIST.ALLOW_DROP_FILES' | translate}}
|
||||
</mat-slide-toggle>
|
||||
</section>
|
||||
|
||||
@ -75,9 +75,9 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
|
||||
toolbarColor = 'default';
|
||||
|
||||
selectionModes = [
|
||||
{ value: 'none', viewValue: 'None' },
|
||||
{ value: 'single', viewValue: 'Single' },
|
||||
{ value: 'multiple', viewValue: 'Multiple' }
|
||||
{value: 'none', viewValue: 'None'},
|
||||
{value: 'single', viewValue: 'Single'},
|
||||
{value: 'multiple', viewValue: 'Multiple'}
|
||||
];
|
||||
|
||||
// The identifier of a node. You can also use one of these well-known aliases: -my- | -shared- | -root-
|
||||
@ -237,6 +237,7 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
|
||||
}
|
||||
|
||||
toggleAllowDropFiles() {
|
||||
this.allowDropFiles = !this.allowDropFiles;
|
||||
this.documentList.reload();
|
||||
}
|
||||
|
||||
@ -322,7 +323,7 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
|
||||
|
||||
getCurrentDocumentListNode(): MinimalNodeEntity[] {
|
||||
if (this.documentList.folderNode) {
|
||||
return [{ entry: this.documentList.folderNode }];
|
||||
return [{entry: this.documentList.folderNode}];
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
@ -427,7 +428,7 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
|
||||
|
||||
if (this.contentService.hasAllowableOperations(contentEntry, 'update')) {
|
||||
this.dialog.open(VersionManagerDialogAdapterComponent, {
|
||||
data: { contentEntry: contentEntry, showComments: showComments, allowDownload: allowDownload },
|
||||
data: {contentEntry: contentEntry, showComments: showComments, allowDownload: allowDownload},
|
||||
panelClass: 'adf-version-manager-dialog',
|
||||
width: '630px'
|
||||
});
|
||||
@ -591,6 +592,27 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
|
||||
this.logService.log(event);
|
||||
}
|
||||
|
||||
onUploadNewVersion(ev) {
|
||||
const contentEntry = ev.detail.data.node.entry;
|
||||
const showComments = this.showVersionComments;
|
||||
const allowDownload = this.allowVersionDownload;
|
||||
const newFileVersion = ev.detail.files[0].file;
|
||||
|
||||
if (this.contentService.hasAllowableOperations(contentEntry, 'update')) {
|
||||
this.dialog.open(VersionManagerDialogAdapterComponent, {
|
||||
data: {
|
||||
contentEntry: contentEntry, showComments: showComments, allowDownload: allowDownload,
|
||||
newFileVersion: newFileVersion, showComparison: true
|
||||
},
|
||||
panelClass: 'adf-version-manager-dialog',
|
||||
width: '630px'
|
||||
});
|
||||
} else {
|
||||
const translatedErrorMessage: any = this.translateService.instant('OPERATION.ERROR.PERMISSION');
|
||||
this.openSnackMessage(translatedErrorMessage);
|
||||
}
|
||||
}
|
||||
|
||||
getFileFiltering(): string {
|
||||
return this.acceptedFilesTypeShow ? this.acceptedFilesType : '*';
|
||||
}
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
</section>
|
||||
|
||||
<section mat-dialog-content *ngIf="!readOnly">
|
||||
<adf-version-manager [node]="contentEntry" [allowDownload]="allowDownload" [showComments]="showComments" (uploadError)="uploadError($event)"></adf-version-manager>
|
||||
<adf-version-manager [node]="contentEntry" [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>
|
||||
|
||||
@ -27,6 +27,7 @@ import { MatSnackBar } from '@angular/material/snack-bar';
|
||||
export class VersionManagerDialogAdapterComponent {
|
||||
|
||||
public contentEntry: MinimalNodeEntryEntity;
|
||||
public newFileVersion: File;
|
||||
|
||||
showComments = true;
|
||||
allowDownload = true;
|
||||
@ -36,6 +37,7 @@ export class VersionManagerDialogAdapterComponent {
|
||||
private snackBar: MatSnackBar,
|
||||
private containingDialog?: MatDialogRef<VersionManagerDialogAdapterComponent>) {
|
||||
this.contentEntry = data.contentEntry;
|
||||
this.newFileVersion = data.hasOwnProperty('newFileVersion') ? data.newFileVersion : this.newFileVersion;
|
||||
this.showComments = data.hasOwnProperty('showComments') ? data.showComments : this.showComments;
|
||||
this.allowDownload = data.hasOwnProperty('allowDownload') ? data.allowDownload : this.allowDownload;
|
||||
}
|
||||
|
||||
@ -56,7 +56,7 @@ Displays the documents from a repository.
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| allowDropFiles | `boolean` | false | When true, this enables you to drop files directly into subfolders shown as items in the list. When false, the dropped file will be added to the current folder (ie, the one containing all the items shown in the list). See the [Upload directive](../../core/directives/upload.directive.md) for further details about how the file drop is handled. |
|
||||
| allowDropFiles | `boolean` | false | When true, this enables you to drop files directly into subfolders shown as items in the list or into another file to trigger updating it's version. When false, the dropped file will be added to the current folder (ie, the one containing all the items shown in the list). See the [Upload directive](../../core/directives/upload.directive.md) for further details about how the file drop is handled. |
|
||||
| contentActions | `boolean` | false | Toggles content actions for each row |
|
||||
| contentActionsPosition | `string` | "right" | Position of the content actions dropdown menu. Can be set to "left" or "right". |
|
||||
| contextMenuActions | `boolean` | false | Toggles context menus for each row |
|
||||
|
||||
@ -32,6 +32,7 @@ Activates a file upload.
|
||||
| acceptedFilesType | `string` | "\*" | Filter for accepted file types. |
|
||||
| comment | `string` | | When you overwrite existing content, you can use the comment field to add a version comment that appears in the version history |
|
||||
| disabled | `boolean` | false | Toggles component disabled state (if there is no node permission checking). |
|
||||
| file | `File` | | Custom added file. The upload button type will be 'button' instead of 'file' |
|
||||
| majorVersion | `boolean` | false | majorVersion boolean field to true to indicate a major version should be created. |
|
||||
| maxFilesSize | `number` | | Sets a limit on the maximum size (in bytes) of a file to be uploaded. Has no effect if undefined. |
|
||||
| multipleFiles | `boolean` | false | Allows/disallows multiple files |
|
||||
@ -50,6 +51,7 @@ Activates a file upload.
|
||||
| error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<>` | Emitted when an error occurs. |
|
||||
| permissionEvent | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`PermissionModel`](../../../lib/content-services/src/lib/document-list/models/permissions.model.ts)`>` | Emitted when create permission is missing. |
|
||||
| success | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<>` | Emitted when the file is uploaded successfully. |
|
||||
| updateFileVersion | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<CustomEvent<any>>` | Emitted when dropping a file over another file to update the version. |
|
||||
|
||||
## Details
|
||||
|
||||
|
||||
@ -77,6 +77,7 @@ as the drag/drop target:
|
||||
| beginUpload | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`UploadFilesEvent`](../../../lib/content-services/src/lib/upload/components/upload-files.event.ts)`>` | Emitted when the upload begins. |
|
||||
| error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<>` | Emitted when an error occurs. |
|
||||
| success | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<>` | Emitted when the file is uploaded successfully. |
|
||||
| updateFileVersion | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<CustomEvent<any>>` | Emitted when dropping a file over another file to update the version. |
|
||||
|
||||
## Details
|
||||
|
||||
|
||||
@ -34,6 +34,7 @@ to enrich the features and decrease the restrictions currently applied to node v
|
||||
| acceptedFilesType | `string` | "\*" | Filter for accepted file types. |
|
||||
| comment | `string` | | When you overwrite existing content, you can use the comment field to add a version comment that appears in the version history |
|
||||
| disabled | `boolean` | false | Toggles component disabled state (if there is no node permission checking). |
|
||||
| file | `File` | | Custom added file. The upload button type will be 'button' instead of 'file' |
|
||||
| majorVersion | `boolean` | false | majorVersion boolean field to true to indicate a major version should be created. |
|
||||
| maxFilesSize | `number` | | Sets a limit on the maximum size (in bytes) of a file to be uploaded. Has no effect if undefined. |
|
||||
| multipleFiles | `boolean` | false | Allows/disallows multiple files |
|
||||
@ -53,6 +54,7 @@ to enrich the features and decrease the restrictions currently applied to node v
|
||||
| error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<>` | Emitted when an error occurs. |
|
||||
| permissionEvent | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`PermissionModel`](../../../lib/content-services/src/lib/document-list/models/permissions.model.ts)`>` | Emitted when create permission is missing. |
|
||||
| success | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<>` | Emitted when the file is uploaded successfully. |
|
||||
| updateFileVersion | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<CustomEvent<any>>` | Emitted when dropping a file over another file to update the version. |
|
||||
|
||||
## Details
|
||||
|
||||
|
||||
@ -30,6 +30,7 @@ Displays the version history of a node with the ability to upload a new version.
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| allowDownload | `boolean` | true | Enable/disable downloading a version of the current node. |
|
||||
| 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. |
|
||||
|
||||
|
||||
@ -346,7 +346,6 @@ Learm more about styling your datatable: [Customizing the component's styles](#c
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| actions | `boolean` | false | Toggles the data actions column. |
|
||||
| actionsPosition | `string` | "right" | Position of the actions dropdown menu. Can be "left" or "right". |
|
||||
| allowDropFiles | `boolean` | false | Toggles file drop support for rows (see [Upload directive](upload.directive.md) for further details). |
|
||||
| columns | `any[]` | \[] | The columns that the datatable will show. |
|
||||
| contextMenu | `boolean` | false | Toggles custom context menu for the component. |
|
||||
| data | [`DataTableAdapter`](../../../lib/core/datatable/data/datatable-adapter.ts) | | Data source for the table |
|
||||
|
||||
@ -5,7 +5,6 @@
|
||||
[actions]="contentActions"
|
||||
[actionsPosition]="contentActionsPosition"
|
||||
[multiselect]="multiselect"
|
||||
[allowDropFiles]="allowDropFiles"
|
||||
[contextMenu]="contextMenuActions"
|
||||
[rowStyle]="rowStyle"
|
||||
[rowStyleClass]="rowStyleClass"
|
||||
|
||||
@ -65,7 +65,7 @@ import { takeUntil } from 'rxjs/operators';
|
||||
styleUrls: ['./document-list.component.scss'],
|
||||
templateUrl: './document-list.component.html',
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
host: { class: 'adf-document-list' }
|
||||
host: {class: 'adf-document-list'}
|
||||
})
|
||||
export class DocumentListComponent implements OnInit, OnChanges, OnDestroy, AfterContentInit, PaginatedComponent, NavigableComponentInterface {
|
||||
|
||||
@ -163,7 +163,8 @@ export class DocumentListComponent implements OnInit, OnChanges, OnDestroy, Afte
|
||||
|
||||
/**
|
||||
* When true, this enables you to drop files directly into subfolders shown
|
||||
* as items in the list. When false, the dropped file will be added to the
|
||||
* as items in the list or into another file to trigger updating it's version.
|
||||
* When false, the dropped file will be added to the
|
||||
* current folder (ie, the one containing all the items shown in the list).
|
||||
* See the Upload directive for further details about how the file drop is
|
||||
* handled.
|
||||
@ -380,7 +381,8 @@ export class DocumentListComponent implements OnInit, OnChanges, OnDestroy, Afte
|
||||
ngOnInit() {
|
||||
this.rowMenuCache = {};
|
||||
this.loadLayoutPresets();
|
||||
this.data = new ShareDataTableAdapter(this.thumbnailService, this.contentService, null, this.getDefaultSorting(), this.sortingMode);
|
||||
this.data = new ShareDataTableAdapter(this.thumbnailService, this.contentService, null, this.getDefaultSorting(),
|
||||
this.sortingMode, this.allowDropFiles);
|
||||
this.data.thumbnails = this.thumbnails;
|
||||
this.data.permissionsStyle = this.permissionsStyle;
|
||||
|
||||
@ -555,14 +557,14 @@ export class DocumentListComponent implements OnInit, OnChanges, OnDestroy, Afte
|
||||
if (typeof node === 'string') {
|
||||
this.resetNewFolderPagination();
|
||||
this._currentFolderId = node;
|
||||
this.folderChange.emit(new NodeEntryEvent(<Node> { id: node }));
|
||||
this.folderChange.emit(new NodeEntryEvent(<Node> {id: node}));
|
||||
this.reload();
|
||||
return true;
|
||||
} else {
|
||||
if (this.canNavigateFolder(node)) {
|
||||
this.resetNewFolderPagination();
|
||||
this._currentFolderId = this.getNodeFolderDestinationId(node);
|
||||
this.folderChange.emit(new NodeEntryEvent(<Node> { id: this._currentFolderId }));
|
||||
this.folderChange.emit(new NodeEntryEvent(<Node> {id: this._currentFolderId}));
|
||||
this.reload();
|
||||
return true;
|
||||
}
|
||||
@ -651,7 +653,7 @@ export class DocumentListComponent implements OnInit, OnChanges, OnDestroy, Afte
|
||||
|
||||
onPageLoaded(nodePaging: NodePaging) {
|
||||
if (nodePaging) {
|
||||
this.data.loadPage(nodePaging, this._pagination.merge);
|
||||
this.data.loadPage(nodePaging, this._pagination.merge, this.allowDropFiles);
|
||||
this.setLoadingState(false);
|
||||
this.onDataReady(nodePaging);
|
||||
}
|
||||
|
||||
@ -40,18 +40,22 @@ export class ShareDataRow implements DataRow {
|
||||
constructor(private obj: NodeEntry,
|
||||
private contentService: ContentService,
|
||||
private permissionsStyle: PermissionStyleModel[],
|
||||
private thumbnailService?: ThumbnailService) {
|
||||
private thumbnailService?: ThumbnailService,
|
||||
private allowDropFiles?: boolean) {
|
||||
if (!obj) {
|
||||
throw new Error(ShareDataRow.ERR_OBJECT_NOT_FOUND);
|
||||
}
|
||||
|
||||
this.isDropTarget = this.isFolderAndHasPermissionToUpload(obj);
|
||||
|
||||
this.isDropTarget = allowDropFiles !== undefined ? this.allowDropFiles && this.checkNodeTypeAndPermissions(obj) : this.checkNodeTypeAndPermissions(obj);
|
||||
if (permissionsStyle) {
|
||||
this.cssClass = this.getPermissionClass(obj);
|
||||
}
|
||||
}
|
||||
|
||||
checkNodeTypeAndPermissions(nodeEntry: NodeEntry) {
|
||||
return this.isFolderAndHasPermissionToUpload(nodeEntry) || this.isFileAndHasParentFolderPermissionToUpload(nodeEntry);
|
||||
}
|
||||
|
||||
getPermissionClass(nodeEntity: NodeEntry): string {
|
||||
let permissionsClasses = '';
|
||||
|
||||
@ -81,6 +85,14 @@ export class ShareDataRow implements DataRow {
|
||||
return this.isFolder(nodeEntry) && this.contentService.hasAllowableOperations(nodeEntry.entry, 'create');
|
||||
}
|
||||
|
||||
isFileAndHasParentFolderPermissionToUpload(nodeEntry: NodeEntry): boolean {
|
||||
return this.isFile(nodeEntry) && this.contentService.hasAllowableOperations(nodeEntry.entry, 'update');
|
||||
}
|
||||
|
||||
isFile(nodeEntry: NodeEntry): boolean {
|
||||
return nodeEntry.entry && nodeEntry.entry.isFile;
|
||||
}
|
||||
|
||||
isFolder(nodeEntry: NodeEntry): boolean {
|
||||
return nodeEntry.entry && nodeEntry.entry.isFolder;
|
||||
}
|
||||
|
||||
@ -44,6 +44,7 @@ export class ShareDataTableAdapter implements DataTableAdapter {
|
||||
thumbnails: boolean = false;
|
||||
permissionsStyle: PermissionStyleModel[];
|
||||
selectedRow: DataRow;
|
||||
allowDropFiles: boolean;
|
||||
|
||||
set sortingMode(value: string) {
|
||||
let newValue = (value || 'client').toLowerCase();
|
||||
@ -61,11 +62,13 @@ export class ShareDataTableAdapter implements DataTableAdapter {
|
||||
private contentService: ContentService,
|
||||
schema: DataColumn[] = [],
|
||||
sorting?: DataSorting,
|
||||
sortingMode: string = 'client') {
|
||||
sortingMode: string = 'client',
|
||||
allowDropFiles: boolean = false) {
|
||||
this.rows = [];
|
||||
this.columns = schema || [];
|
||||
this.sorting = sorting;
|
||||
this.sortingMode = sortingMode;
|
||||
this.allowDropFiles = allowDropFiles;
|
||||
}
|
||||
|
||||
getRows(): Array<DataRow> {
|
||||
@ -242,13 +245,16 @@ export class ShareDataTableAdapter implements DataTableAdapter {
|
||||
}
|
||||
}
|
||||
|
||||
public loadPage(nodePaging: NodePaging, merge: boolean = false) {
|
||||
public loadPage(nodePaging: NodePaging, merge: boolean = false, allowDropFiles?: boolean) {
|
||||
let shareDataRows: ShareDataRow[] = [];
|
||||
|
||||
if (allowDropFiles !== undefined) {
|
||||
this.allowDropFiles = allowDropFiles;
|
||||
}
|
||||
if (nodePaging && nodePaging.list) {
|
||||
const nodeEntries: NodeEntry[] = nodePaging.list.entries;
|
||||
if (nodeEntries && nodeEntries.length > 0) {
|
||||
shareDataRows = nodeEntries.map((item) => new ShareDataRow(item, this.contentService, this.permissionsStyle, this.thumbnailService));
|
||||
shareDataRows = nodeEntries.map((item) => new ShareDataRow(item, this.contentService, this.permissionsStyle,
|
||||
this.thumbnailService, this.allowDropFiles));
|
||||
|
||||
if (this.filter) {
|
||||
shareDataRows = shareDataRows.filter(this.filter);
|
||||
|
||||
@ -71,6 +71,10 @@ export abstract class UploadBase implements OnInit, OnDestroy {
|
||||
@Output()
|
||||
beginUpload = new EventEmitter<UploadFilesEvent>();
|
||||
|
||||
/** Emitted when dropping a file over another file to update the version. */
|
||||
@Output()
|
||||
updateFileVersion = new EventEmitter<CustomEvent>();
|
||||
|
||||
protected onDestroy$ = new Subject<boolean>();
|
||||
|
||||
constructor(protected uploadService: UploadService,
|
||||
|
||||
@ -15,12 +15,13 @@
|
||||
<input #uploadSingleFile
|
||||
id="upload-single-file"
|
||||
data-automation-id="upload-single-file"
|
||||
type="file"
|
||||
[type]="file ? 'button' : 'file'"
|
||||
name="uploadFiles"
|
||||
accept="{{acceptedFilesType}}"
|
||||
[attr.disabled]="isButtonDisabled()"
|
||||
[title]="tooltip"
|
||||
(change)="onFilesAdded($event)">
|
||||
(change)="onFilesAdded($event)"
|
||||
(click)="onClickUploadButton()">
|
||||
</button>
|
||||
|
||||
<!--Multiple Files Upload-->
|
||||
|
||||
@ -98,6 +98,19 @@ describe('UploadButtonComponent', () => {
|
||||
expect(compiled.querySelector('#uploadFolder')).toBeDefined();
|
||||
});
|
||||
|
||||
it('should have input type as button if receiving a file as input', () => {
|
||||
component.multipleFiles = false;
|
||||
component.file = new File([], 'Fake file name');
|
||||
const compiled = fixture.debugElement.nativeElement;
|
||||
fixture.detectChanges();
|
||||
const inputButton = compiled.querySelector('#upload-single-file');
|
||||
expect(inputButton.type).toBe('button');
|
||||
|
||||
component.file = undefined;
|
||||
fixture.detectChanges();
|
||||
expect(inputButton.type).toBe('file');
|
||||
});
|
||||
|
||||
it('should disable uploadFolder button if disabled is true', () => {
|
||||
component.disabled = true;
|
||||
component.uploadFolders = true;
|
||||
|
||||
@ -55,6 +55,10 @@ export class UploadButtonComponent extends UploadBase implements OnInit, OnChang
|
||||
@Input()
|
||||
tooltip: string = null;
|
||||
|
||||
/** Custom added file. The upload button type will be 'button' instead of 'file' */
|
||||
@Input()
|
||||
file: File;
|
||||
|
||||
/** Emitted when create permission is missing. */
|
||||
@Output()
|
||||
permissionEvent: EventEmitter<PermissionModel> = new EventEmitter<PermissionModel>();
|
||||
@ -100,6 +104,16 @@ export class UploadButtonComponent extends UploadBase implements OnInit, OnChang
|
||||
$event.target.value = '';
|
||||
}
|
||||
|
||||
onClickUploadButton(): void {
|
||||
const files: File[] = [this.file];
|
||||
|
||||
if (this.hasAllowableOperations) {
|
||||
this.uploadFiles(files);
|
||||
} else {
|
||||
this.permissionEvent.emit(new PermissionModel({ type: 'content', action: 'upload', permission: 'create' }));
|
||||
}
|
||||
}
|
||||
|
||||
onDirectoryAdded($event: any): void {
|
||||
if (this.hasAllowableOperations) {
|
||||
const files: File[] = FileUtils.toFileArray($event.currentTarget.files);
|
||||
|
||||
@ -264,6 +264,34 @@ describe('UploadDragAreaComponent', () => {
|
||||
});
|
||||
}));
|
||||
|
||||
it('should NOT upload the file if it is dropped on another file', () => {
|
||||
const fakeItem = {
|
||||
fullPath: '/folder-fake/file-fake.png',
|
||||
isDirectory: false,
|
||||
isFile: true,
|
||||
name: 'file-fake.png',
|
||||
relativeFolder: '/',
|
||||
file: (callbackFile) => {
|
||||
const fileFake = new File(['fakefake'], 'file-fake.png', { type: 'image/png' });
|
||||
callbackFile(fileFake);
|
||||
}
|
||||
};
|
||||
|
||||
addToQueueSpy.and.callFake((fileList) => {
|
||||
expect(fileList.name).toBe('file');
|
||||
expect(fileList.options.path).toBe('pippo/');
|
||||
});
|
||||
|
||||
const fakeCustomEvent: CustomEvent = new CustomEvent('CustomEvent', {
|
||||
detail: {
|
||||
data: getFakeShareDataRow(),
|
||||
files: [fakeItem]
|
||||
}
|
||||
});
|
||||
|
||||
component.onUploadFiles(fakeCustomEvent);
|
||||
});
|
||||
|
||||
it('should not upload a file if fileType is not in acceptedFilesType', async(() => {
|
||||
component.success = null;
|
||||
component.acceptedFilesType = '.pdf';
|
||||
@ -367,8 +395,8 @@ describe('UploadDragAreaComponent', () => {
|
||||
component.onUploadFiles(fakeCustomEvent);
|
||||
}));
|
||||
|
||||
it('should upload the file in the current folder when the target is file', async(() => {
|
||||
|
||||
it('should trigger updating the file version when we drop a file over another file', async(() => {
|
||||
spyOn(component.updateFileVersion, 'emit');
|
||||
const fakeItem = {
|
||||
fullPath: '/folder-fake/file-fake.png',
|
||||
isDirectory: false,
|
||||
@ -394,6 +422,7 @@ describe('UploadDragAreaComponent', () => {
|
||||
});
|
||||
|
||||
component.onUploadFiles(fakeCustomEvent);
|
||||
expect(component.updateFileVersion.emit).toHaveBeenCalledWith(fakeCustomEvent);
|
||||
}));
|
||||
});
|
||||
|
||||
|
||||
@ -26,9 +26,9 @@ import { UploadBase } from './base-upload/upload-base';
|
||||
selector: 'adf-upload-drag-area',
|
||||
templateUrl: './upload-drag-area.component.html',
|
||||
styleUrls: ['./upload-drag-area.component.scss'],
|
||||
host: { 'class': 'adf-upload-drag-area' },
|
||||
host: {'class': 'adf-upload-drag-area'},
|
||||
viewProviders: [
|
||||
{ provide: EXTENDIBLE_COMPONENT, useExisting: forwardRef(() => UploadDragAreaComponent) }
|
||||
{provide: EXTENDIBLE_COMPONENT, useExisting: forwardRef(() => UploadDragAreaComponent)}
|
||||
],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
@ -94,15 +94,21 @@ export class UploadDragAreaComponent extends UploadBase implements NodeAllowable
|
||||
onUploadFiles(event: CustomEvent) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
const isAllowed: boolean = this.contentService.hasAllowableOperations(event.detail.data.obj.entry, AllowableOperationsEnum.CREATE);
|
||||
const isAllowed: boolean = this.isTargetNodeFolder(event) ?
|
||||
this.contentService.hasAllowableOperations(event.detail.data.obj.entry, AllowableOperationsEnum.CREATE)
|
||||
: this.contentService.hasAllowableOperations(event.detail.data.obj.entry, AllowableOperationsEnum.UPDATE);
|
||||
if (isAllowed) {
|
||||
const fileInfo: FileInfo[] = event.detail.files;
|
||||
if (this.isTargetNodeFolder(event)) {
|
||||
const destinationFolderName = event.detail.data.obj.entry.name;
|
||||
fileInfo.map((file) => file.relativeFolder = destinationFolderName ? destinationFolderName.concat(file.relativeFolder) : file.relativeFolder);
|
||||
}
|
||||
if (fileInfo && fileInfo.length > 0) {
|
||||
this.uploadFilesInfo(fileInfo);
|
||||
if (!this.isTargetNodeFolder(event) && event.detail.files.length === 1) {
|
||||
this.updateFileVersion.emit(event);
|
||||
} else {
|
||||
const fileInfo: FileInfo[] = event.detail.files;
|
||||
if (this.isTargetNodeFolder(event)) {
|
||||
const destinationFolderName = event.detail.data.obj.entry.name;
|
||||
fileInfo.map((file) => file.relativeFolder = destinationFolderName ? destinationFolderName.concat(file.relativeFolder) : file.relativeFolder);
|
||||
}
|
||||
if (fileInfo && fileInfo.length > 0) {
|
||||
this.uploadFilesInfo(fileInfo);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,6 +6,7 @@
|
||||
<adf-version-upload
|
||||
id="adf-version-upload-button"
|
||||
[node]="node"
|
||||
[newFileVersion]="newFileVersion"
|
||||
(success)="onUploadSuccess($event)"
|
||||
(cancel)="onUploadCancel()"
|
||||
(error)="onUploadError($event)">
|
||||
|
||||
@ -74,6 +74,12 @@ describe('VersionManagerComponent', () => {
|
||||
expect(spyOnListVersionHistory).toHaveBeenCalledWith(node.id);
|
||||
});
|
||||
|
||||
it('should toggle new version if given a new file as input', () => {
|
||||
component.newFileVersion = new File([], 'New file version');
|
||||
fixture.detectChanges();
|
||||
expect(component.uploadState).toBe('open');
|
||||
});
|
||||
|
||||
it('should display comments for versions when not configured otherwise', async(() => {
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Component, Input, ViewEncapsulation, ViewChild, Output, EventEmitter } from '@angular/core';
|
||||
import { Component, Input, ViewEncapsulation, ViewChild, Output, EventEmitter, OnInit } from '@angular/core';
|
||||
import { Node } from '@alfresco/js-api';
|
||||
import { VersionListComponent } from './version-list.component';
|
||||
import { ContentService, AlfrescoApiService } from '@alfresco/adf-core';
|
||||
@ -27,26 +27,30 @@ import { trigger, state, style, animate, transition } from '@angular/animations'
|
||||
styleUrls: ['./version-manager.component.scss'],
|
||||
animations: [
|
||||
trigger('uploadToggle', [
|
||||
state('open', style({ height: '175px', opacity: 1, visibility: 'visible' })),
|
||||
state('close', style({ height: '0%', opacity: 0, visibility: 'hidden' })),
|
||||
state('open', style({height: '175px', opacity: 1, visibility: 'visible'})),
|
||||
state('close', style({height: '0%', opacity: 0, visibility: 'hidden'})),
|
||||
transition('open => close', [
|
||||
style({ visibility: 'hidden' }),
|
||||
style({visibility: 'hidden'}),
|
||||
animate('0.4s cubic-bezier(0.25, 0.8, 0.25, 1)')
|
||||
]),
|
||||
transition('close => open', [
|
||||
style({ visibility: 'visible' }),
|
||||
style({visibility: 'visible'}),
|
||||
animate('0.4s cubic-bezier(0.25, 0.8, 0.25, 1)')
|
||||
])
|
||||
])
|
||||
],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class VersionManagerComponent {
|
||||
export class VersionManagerComponent implements OnInit {
|
||||
|
||||
/** Target node to manage version history. */
|
||||
@Input()
|
||||
node: Node;
|
||||
|
||||
/** New file for updating current version. */
|
||||
@Input()
|
||||
newFileVersion: File;
|
||||
|
||||
/** Toggles showing/hiding of comments. */
|
||||
@Input()
|
||||
showComments = true;
|
||||
@ -72,6 +76,12 @@ export class VersionManagerComponent {
|
||||
private alfrescoApiService: AlfrescoApiService) {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
if (this.newFileVersion) {
|
||||
this.toggleNewVersion();
|
||||
}
|
||||
}
|
||||
|
||||
refresh(node: Node) {
|
||||
this.alfrescoApiService.nodeUpdated.next(node);
|
||||
this.versionListComponent.loadVersionHistory();
|
||||
@ -80,6 +90,7 @@ export class VersionManagerComponent {
|
||||
}
|
||||
|
||||
onUploadSuccess(event: any) {
|
||||
this.newFileVersion = null;
|
||||
this.alfrescoApiService.nodeUpdated.next(event.value.entry);
|
||||
this.versionListComponent.loadVersionHistory();
|
||||
this.uploadSuccess.emit(event.value.entry);
|
||||
|
||||
@ -25,6 +25,7 @@
|
||||
tooltip="{{ 'ADF_VERSION_LIST.ACTIONS.UPLOAD.TOOLTIP' | translate }}"
|
||||
[comment]="comment"
|
||||
[versioning]="true"
|
||||
[file]="newFileVersion"
|
||||
[majorVersion]="isMajorVersion()"
|
||||
(success)="success.emit($event)"
|
||||
(error)="error.emit($event)">
|
||||
|
||||
@ -35,6 +35,9 @@ export class VersionUploadComponent {
|
||||
@Input()
|
||||
node: Node;
|
||||
|
||||
@Input()
|
||||
newFileVersion: File;
|
||||
|
||||
@Output()
|
||||
success = new EventEmitter();
|
||||
|
||||
|
||||
@ -60,7 +60,7 @@
|
||||
(select)="onEnterKeyPressed(row, $event)"
|
||||
(keyup)="onRowKeyUp(row, $event)"
|
||||
(keydown)="onRowEnterKeyDown(row, $event)"
|
||||
[adf-upload]="allowDropFiles && rowAllowsDrop(row)"
|
||||
[adf-upload]="rowAllowsDrop(row)"
|
||||
[adf-upload-data]="row"
|
||||
[ngStyle]="rowStyle"
|
||||
[ngClass]="getRowStyle(row)"
|
||||
|
||||
@ -105,12 +105,6 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck,
|
||||
@Input()
|
||||
contextMenu: boolean = false;
|
||||
|
||||
/** Toggles file drop support for rows (see
|
||||
* [Upload directive](upload.directive.md) for further details).
|
||||
*/
|
||||
@Input()
|
||||
allowDropFiles: boolean = false;
|
||||
|
||||
/** The inline style to apply to every row. See
|
||||
* [NgStyle](https://angular.io/docs/ts/latest/api/common/index/NgStyle-directive.html)
|
||||
* docs for more details and usage examples.
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user