[ACA-2207] Upload Dialog - restore previous version on delete (#951)

* restore version over delete node

* apply prettier

* clean up unnecessary dependencies

* remove style file

* set CANCEL status on on deleted node version instances

* Update upload.module.ts

remove extra licence text

* fix typo

* remove duplicate strings

src/app/components/layout/app-layout/app-layout.component.html

@@ -32,5 +32,5 @@
     </adf-sidenav-layout-content>
   </adf-sidenav-layout>
 
-  <adf-file-uploading-dialog position="left"></adf-file-uploading-dialog>
+  <app-file-uploading-dialog position="left"></app-file-uploading-dialog>
 </adf-upload-drag-area>

src/app/components/layout/layout.module.ts

@@ -30,6 +30,7 @@ import { AppLayoutComponent } from './app-layout/app-layout.component';
 import { ContentModule } from '@alfresco/adf-content-services';
 import { RouterModule } from '@angular/router';
 import { AppSidenavModule } from '../sidenav/sidenav.module';
+import { AppUploadingDialogModule } from '../upload-dialog/upload.module';
 import { AppCommonModule } from '../common/common.module';
 import { AppHeaderModule } from '../header/header.module';
 import { PageLayoutComponent } from './page-layout/page-layout.component';
@@ -47,7 +48,8 @@ import { HttpClientModule } from '@angular/common/http';
     AppCommonModule,
     AppSidenavModule,
     AppHeaderModule,
-    HttpClientModule
+    HttpClientModule,
+    AppUploadingDialogModule
   ],
   declarations: [
     AppLayoutComponent,

src/app/components/upload-dialog/file-uploading-dialog.component.html

@@ -0,0 +1,133 @@
+<div
+  *ngIf="isDialogActive"
+  class="adf-upload-dialog"
+  id="upload-dialog"
+  [class.adf-upload-dialog--minimized]="isDialogMinimized"
+  [class.adf-upload-dialog--position-left]="position === 'left'"
+  [class.adf-upload-dialog--position-right]="position === 'right'"
+>
+  <header class="adf-upload-dialog__header">
+    <button
+      mat-button
+      color="secondary"
+      [disabled]="isConfirmation"
+      (click)="toggleMinimized()"
+    >
+      <mat-icon
+        mat-list-icon
+        title="{{
+          (isDialogMinimized
+            ? 'ADF_FILE_UPLOAD.BUTTON.MAXIMIZE'
+            : 'ADF_FILE_UPLOAD.BUTTON.MINIMIZE') | translate
+        }}"
+      >
+        {{ isDialogMinimized ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}
+      </mat-icon>
+    </button>
+
+    <span
+      class="adf-upload-dialog__title"
+      *ngIf="!uploadList.isUploadCancelled()"
+    >
+      {{
+        'FILE_UPLOAD.MESSAGES.UPLOAD_PROGRESS'
+          | translate
+            : {
+                completed: totalCompleted,
+                total: filesUploadingList.length
+              }
+      }}
+    </span>
+
+    <span
+      class="adf-upload-dialog__title"
+      *ngIf="uploadList.isUploadCancelled()"
+    >
+      {{ 'FILE_UPLOAD.MESSAGES.UPLOAD_CANCELED' | translate }}
+    </span>
+  </header>
+
+  <section class="adf-upload-dialog__info" *ngIf="totalErrors">
+    {{
+      (totalErrors > 1
+        ? 'FILE_UPLOAD.MESSAGES.UPLOAD_ERRORS'
+        : 'FILE_UPLOAD.MESSAGES.UPLOAD_ERROR')
+        | translate: { total: totalErrors }
+    }}
+  </section>
+
+  <section
+    class="adf-upload-dialog__content"
+    [class.adf-upload-dialog--padding]="isConfirmation"
+  >
+    <app-file-uploading-list
+      [class.adf-upload-dialog--hide]="isConfirmation"
+      #uploadList
+      [files]="filesUploadingList"
+    >
+      <ng-template let-file="$implicit">
+        <app-file-uploading-list-row
+          [file]="file"
+          (remove)="uploadList.removeFile(file)"
+          (cancel)="uploadList.cancelFile(file)"
+        >
+        </app-file-uploading-list-row>
+      </ng-template>
+    </app-file-uploading-list>
+
+    <div
+      class="adf-upload-dialog__confirmation"
+      [class.adf-upload-dialog--hide]="!isConfirmation"
+    >
+      <p class="adf-upload-dialog__confirmation--title">
+        {{ 'ADF_FILE_UPLOAD.CONFIRMATION.MESSAGE.TITLE' | translate }}
+      </p>
+
+      <p class="adf-upload-dialog__confirmation--text">
+        {{ 'ADF_FILE_UPLOAD.CONFIRMATION.MESSAGE.TEXT' | translate }}
+      </p>
+    </div>
+  </section>
+
+  <footer class="adf-upload-dialog__actions" *ngIf="!isConfirmation">
+    <button
+      id="adf-upload-dialog-cancel-all"
+      color="primary"
+      mat-button
+      *ngIf="!uploadList.isUploadCompleted() && !uploadList.isUploadCancelled()"
+      (click)="toggleConfirmation()"
+    >
+      {{ 'ADF_FILE_UPLOAD.BUTTON.CANCEL_ALL' | translate }}
+    </button>
+
+    <button
+      id="adf-upload-dialog-close"
+      *ngIf="uploadList.isUploadCompleted() || uploadList.isUploadCancelled()"
+      mat-button
+      color="primary"
+      (click)="close()"
+    >
+      {{ 'ADF_FILE_UPLOAD.BUTTON.CLOSE' | translate }}
+    </button>
+  </footer>
+
+  <footer class="adf-upload-dialog__actions" *ngIf="isConfirmation">
+    <button
+      id="adf-upload-dialog-cancel"
+      color="secondary"
+      mat-button
+      (click)="cancelAllUploads()"
+    >
+      {{ 'ADF_FILE_UPLOAD.CONFIRMATION.BUTTON.CANCEL' | translate }}
+    </button>
+
+    <button
+      id="adf-upload-dialog-confirm"
+      mat-button
+      color="primary"
+      (click)="toggleConfirmation()"
+    >
+      {{ 'ADF_FILE_UPLOAD.CONFIRMATION.BUTTON.CONTINUE' | translate }}
+    </button>
+  </footer>
+</div>

src/app/components/upload-dialog/file-uploading-dialog.component.ts

@@ -0,0 +1,24 @@
+/*!
+ * @license
+ * Copyright 2016 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 } from '@angular/core';
+import { FileUploadingDialogComponent } from '@alfresco/adf-content-services';
+@Component({
+  selector: 'app-file-uploading-dialog',
+  templateUrl: './file-uploading-dialog.component.html'
+})
+export class AppFileUploadingDialogComponent extends FileUploadingDialogComponent {}

src/app/components/upload-dialog/file-uploading-list-row.component.html

@@ -0,0 +1,109 @@
+<div class="adf-file-uploading-row">
+  <!-- todo: move to ADF 3.x.x -->
+  <mat-icon
+    *ngIf="mimeType === 'default'"
+    mat-list-icon
+    class="adf-file-uploading-row__type"
+  >
+    insert_drive_file
+  </mat-icon>
+
+  <!-- todo: move to ADF 3.x.x -->
+  <adf-icon
+    *ngIf="mimeType !== 'default'"
+    value="adf:{{ mimeType }}"
+  ></adf-icon>
+
+  <span class="adf-file-uploading-row__name" title="{{ file.name }}">
+    {{ file.name }}
+  </span>
+
+  <span *ngIf="isUploadVersion()" class="adf-file-uploading-row__version">
+    <mat-chip aria-label="file version" color="primary" disabled>{{
+      versionNumber
+    }}</mat-chip>
+  </span>
+
+  <div
+    *ngIf="
+      file.status === FileUploadStatus.Progress ||
+      file.status === FileUploadStatus.Starting
+    "
+    (click)="onCancel(file)"
+    class="adf-file-uploading-row__group adf-file-uploading-row__group--toggle"
+    title="{{ 'ADF_FILE_UPLOAD.BUTTON.CANCEL_FILE' | translate }}"
+  >
+    <span class="adf-file-uploading-row__status">
+      {{ file.progress.loaded | adfFileSize }} /
+      {{ file.progress.total | adfFileSize }}
+    </span>
+
+    <mat-icon
+      mat-list-icon
+      class="adf-file-uploading-row__action adf-file-uploading-row__action--cancel"
+    >
+      clear
+    </mat-icon>
+  </div>
+
+  <div
+    *ngIf="file.status === FileUploadStatus.Complete"
+    (click)="onRemove(file)"
+    class="adf-file-uploading-row__group adf-file-uploading-row__group--toggle"
+    title="{{ 'ADF_FILE_UPLOAD.BUTTON.REMOVE_FILE' | translate }}"
+  >
+    <mat-icon
+      mat-list-icon
+      class="adf-file-uploading-row__status adf-file-uploading-row__status--done"
+    >
+      check_circle
+    </mat-icon>
+
+    <mat-icon
+      mat-list-icon
+      class="adf-file-uploading-row__action adf-file-uploading-row__action--remove"
+    >
+      remove_circle
+    </mat-icon>
+  </div>
+
+  <div
+    *ngIf="file.status === FileUploadStatus.Pending"
+    (click)="onCancel(file)"
+    class="adf-file-uploading-row__group adf-file-uploading-row__group--toggle"
+  >
+    <mat-icon
+      mat-list-icon
+      class="adf-file-uploading-row__status adf-file-uploading-row__status--pending"
+    >
+      schedule
+    </mat-icon>
+
+    <mat-icon
+      mat-list-icon
+      class="adf-file-uploading-row__action adf-file-uploading-row__action--remove"
+    >
+      remove_circle
+    </mat-icon>
+  </div>
+
+  <div
+    *ngIf="file.status === FileUploadStatus.Error"
+    class="adf-file-uploading-row__block adf-file-uploading-row__status--error"
+  >
+    <mat-icon
+      mat-list-icon
+      [attr.aria-label]="'ADF_FILE_UPLOAD.ARIA-LABEL.ERROR' | translate"
+      [matTooltip]="file.errorCode | adfFileUploadError"
+    >
+      report_problem
+    </mat-icon>
+  </div>
+
+  <div
+    *ngIf="showCancelledStatus()"
+    class="adf-file-uploading-row__block adf-file-uploading-row__status--cancelled"
+  >
+    {{ 'ADF_FILE_UPLOAD.STATUS.FILE_CANCELED_STATUS' | translate }}
+  </div>
+</div>

src/app/components/upload-dialog/file-uploading-list-row.component.ts

@@ -0,0 +1,48 @@
+/*!
+ * @license
+ * Copyright 2016 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 } from '@angular/core';
+import { FileUploadingListRowComponent } from '@alfresco/adf-content-services';
+@Component({
+  selector: 'app-file-uploading-list-row',
+  templateUrl: './file-uploading-list-row.component.html'
+})
+export class AppFileUploadingListRowComponent extends FileUploadingListRowComponent {
+  isUploadVersion() {
+    return (
+      !!this.file.data &&
+      this.file.options &&
+      this.file.options.newVersion &&
+      this.file.data.entry.properties &&
+      this.file.data.entry.properties['cm:versionLabel']
+    );
+  }
+
+  // todo: move to ADF 3.x.x
+  get versionNumber() {
+    return this.file.data.entry.properties['cm:versionLabel'];
+  }
+
+  // todo: move to ADF 3.x.x
+  get mimeType(): string {
+    if (this.file && this.file.file && this.file.file.type) {
+      return this.file.file.type;
+    }
+
+    return 'default';
+  }
+}

src/app/components/upload-dialog/file-uploading-list.component.html

@@ -0,0 +1,4 @@
+<div class="upload-list">
+  <ng-template ngFor [ngForOf]="files" [ngForTemplate]="template">
+  </ng-template>
+</div>

src/app/components/upload-dialog/file-uploading-list.component.ts

@@ -0,0 +1,224 @@
+/*!
+ * @license
+ * Copyright 2016 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 {
+  FileModel,
+  FileUploadStatus,
+  NodesApiService,
+  AlfrescoApiService,
+  TranslationService,
+  UploadService
+} from '@alfresco/adf-core';
+import {
+  Component,
+  ContentChild,
+  Input,
+  Output,
+  TemplateRef,
+  EventEmitter
+} from '@angular/core';
+import { Observable, forkJoin, of, from } from 'rxjs';
+import { map, catchError } from 'rxjs/operators';
+
+@Component({
+  selector: 'app-file-uploading-list',
+  templateUrl: './file-uploading-list.component.html'
+})
+export class AppFileUploadingListComponent {
+  FileUploadStatus = FileUploadStatus;
+
+  @ContentChild(TemplateRef)
+  template: any;
+
+  @Input()
+  files: FileModel[] = [];
+
+  /** Emitted when a file in the list has an error. */
+  @Output()
+  error: EventEmitter<any> = new EventEmitter();
+
+  constructor(
+    private alfrescoApiService: AlfrescoApiService,
+    private uploadService: UploadService,
+    private nodesApi: NodesApiService,
+    private translateService: TranslationService
+  ) {}
+
+  /**
+   * Cancel file upload
+   *
+   * @param file File model to cancel upload for.
+   *
+   * @memberOf FileUploadingListComponent
+   */
+  cancelFile(file: FileModel): void {
+    this.uploadService.cancelUpload(file);
+  }
+
+  // todo: move to ADF 3.x.x
+  removeFile(file: FileModel): void {
+    if (file.options && file.options.newVersion) {
+      this.deleteNodeVersion(file).subscribe(() => {
+        if (file.status === FileUploadStatus.Error) {
+          this.notifyError(file);
+        }
+        this.uploadService.cancelUpload(file);
+      });
+    } else {
+      this.deleteNode(file).subscribe(() => {
+        if (file.status === FileUploadStatus.Error) {
+          this.notifyError(file);
+        }
+
+        this.cancelNodeVersionInstances(file);
+        this.uploadService.cancelUpload(file);
+      });
+    }
+  }
+
+  /**
+   * Call the appropriate method for each file, depending on state
+   */
+  cancelAllFiles(): void {
+    this.getUploadingFiles().forEach(file =>
+      this.uploadService.cancelUpload(file)
+    );
+
+    const deletedFiles = this.files
+      .filter(file => file.status === FileUploadStatus.Complete)
+      .map(file => this.deleteNode(file));
+
+    forkJoin(...deletedFiles).subscribe((files: FileModel[]) => {
+      const errors = files.filter(
+        file => file.status === FileUploadStatus.Error
+      );
+
+      if (errors.length) {
+        this.notifyError(...errors);
+      }
+
+      this.uploadService.cancelUpload(...files);
+    });
+  }
+
+  /**
+   * Checks if all the files are uploaded false if there is at least one file in Progress | Starting | Pending
+   */
+  isUploadCompleted(): boolean {
+    return (
+      !this.isUploadCancelled() &&
+      Boolean(this.files.length) &&
+      !this.files.some(
+        ({ status }) =>
+          status === FileUploadStatus.Starting ||
+          status === FileUploadStatus.Progress ||
+          status === FileUploadStatus.Pending
+      )
+    );
+  }
+
+  /**
+   * Check if all the files are Cancelled | Aborted | Error. false if there is at least one file in uploading states
+   */
+  isUploadCancelled(): boolean {
+    return (
+      !!this.files.length &&
+      this.files.every(
+        ({ status }) =>
+          status === FileUploadStatus.Aborted ||
+          status === FileUploadStatus.Cancelled ||
+          status === FileUploadStatus.Deleted
+      )
+    );
+  }
+
+  // todo: move to ADF 3.x.x
+  private deleteNodeVersion(file: FileModel): Observable<FileModel> {
+    return from(
+      this.alfrescoApiService.versionsApi.deleteVersion(
+        file.data.entry.id,
+        file.data.entry.properties['cm:versionLabel']
+      )
+    ).pipe(
+      map(() => {
+        file.status = FileUploadStatus.Deleted;
+        return file;
+      }),
+      catchError(() => {
+        file.status = FileUploadStatus.Error;
+        return of(file);
+      })
+    );
+  }
+
+  // todo: move to ADF 3.x.x
+  private cancelNodeVersionInstances(file) {
+    this.files
+      .filter(
+        item =>
+          item.data.entry.id === file.data.entry.id && item.options.newVersion
+      )
+      .map(item => {
+        item.status = FileUploadStatus.Deleted;
+      });
+  }
+
+  private deleteNode(file: FileModel): Observable<FileModel> {
+    const { id } = file.data.entry;
+
+    return this.nodesApi.deleteNode(id, { permanent: true }).pipe(
+      map(() => {
+        file.status = FileUploadStatus.Deleted;
+        return file;
+      }),
+      catchError(() => {
+        file.status = FileUploadStatus.Error;
+        return of(file);
+      })
+    );
+  }
+
+  private notifyError(...files: FileModel[]) {
+    let messageError: string = null;
+
+    if (files.length === 1) {
+      messageError = this.translateService.instant(
+        'FILE_UPLOAD.MESSAGES.REMOVE_FILE_ERROR',
+        { fileName: files[0].name }
+      );
+    } else {
+      messageError = this.translateService.instant(
+        'FILE_UPLOAD.MESSAGES.REMOVE_FILES_ERROR',
+        { total: files.length }
+      );
+    }
+
+    this.error.emit(messageError);
+  }
+
+  private getUploadingFiles() {
+    return this.files.filter(item => {
+      if (
+        item.status === FileUploadStatus.Pending ||
+        item.status === FileUploadStatus.Progress ||
+        item.status === FileUploadStatus.Starting
+      ) {
+        return item;
+      }
+    });
+  }
+}

src/app/components/upload-dialog/upload.module.ts

@@ -0,0 +1,47 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2018 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CoreModule } from '@alfresco/adf-core';
+import { AppFileUploadingDialogComponent } from './file-uploading-dialog.component';
+import { AppFileUploadingListRowComponent } from './file-uploading-list-row.component';
+import { AppFileUploadingListComponent } from './file-uploading-list.component';
+import { UploadModule } from '@alfresco/adf-content-services';
+
+@NgModule({
+  imports: [CommonModule, CoreModule.forChild(), UploadModule],
+  declarations: [
+    AppFileUploadingDialogComponent,
+    AppFileUploadingListRowComponent,
+    AppFileUploadingListComponent
+  ],
+  exports: [
+    AppFileUploadingDialogComponent,
+    AppFileUploadingListRowComponent,
+    AppFileUploadingListComponent
+  ]
+})
+export class AppUploadingDialogModule {}

src/app/ui/overrides/adf-upload-dialog.theme.scss

@@ -7,6 +7,28 @@
     z-index: 999;
   }
 
+  // todo: move to ADF 3.x.x
+  .adf-file-uploading-row {
+    &__group,
+    &__block {
+      min-width: 100px;
+      display: flex;
+      justify-content: flex-end;
+    }
+
+    &__version {
+      flex: 0;
+
+      .mat-chip {
+        padding: 2px 6px;
+      }
+
+      .mat-chip.mat-chip-disabled {
+        opacity: 1;
+      }
+    }
+  }
+
   .adf-file-uploading-row {
     &__status {
       &--done {

src/assets/i18n/en.json

@@ -467,6 +467,11 @@
             "INFO": "View details"
         }
     },
+    "FILE_UPLOAD": {
+        "ERRORS": {
+            "409": "This name is already in use, try a different name [409]"
+        }
+    },
     "ADF_VERSION_LIST": {
         "ACTIONS": {
             "UPLOAD": {