[ACS-721] Improve End/Cancel Editing UX (part 1) - implement single menu option & dialog (#6327)

* added the possibility to show/hide cancel&submit buttons and also to emit the changes without any buttons

* added new doc

* Added optional on variable models to avoid breaking changes (#6328)

Co-authored-by: Vito Albano <vitoalbano@vitoalbano-mbp-0120.local>

* added the possibility to show/hide cancel&submit buttons and also to emit the changes without any buttons

* added new doc

Co-authored-by: Vito <vito.albano@alfresco.com>
Co-authored-by: Vito Albano <vitoalbano@vitoalbano-mbp-0120.local>

docs/content-services/components/version-upload.component.md

@@ -0,0 +1,46 @@
+---
+Title: Version Upload component
+Added: v4.1.0
+Status: Experimental
+Last reviewed: 2020-11-06
+---
+
+# [Version Upload component](../../../lib/content-services/src/lib/version-manager/version-upload.component.ts "Defined in version-list.component.ts")
+
+Displays the new version's minor/major changes and the optional comment of a node in a [Version Manager component](version-manager.component.md).
+
+### Basic Usage
+
+```html
+<adf-version-upload [node]="myNode"></adf-version-upload>
+```
+
+## Class members
+
+### Properties
+
+| Name              | Type                                                                                                     | Default value | Description                                               |
+| ----------------- | -------------------------------------------------------------------------------------------------------- | ------------- | --------------------------------------------------------- |
+| showUploadButton  | `boolean`                                                                                                | true          | Toggles showing/hiding the upload button.                 |
+| showCancelButton  | `boolean`                                                                                                | true          | Toggles showing/hiding the cancel button.                 |
+| newFileVersion    | `File`                                                                                                   |               | Used to create a new version of the current node.         |
+| node              | [`Node`](https://github.com/Alfresco/alfresco-js-api/blob/develop/src/api/content-rest-api/docs/Node.md) |               | The target node.                                          |
+
+### Events
+
+| Name            | Type                                                                                                                                                     | Description                                                      |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- |
+| success         | [`EventEmitter`](https://angular.io/api/core/EventEmitter)                                                                                               | Emitted when a new version is successfully uploaded              |
+| error           | [`EventEmitter`](https://angular.io/api/core/EventEmitter)                                                                                               | Emitted when a new version throws an error                       |
+| cancel          | [`EventEmitter`](https://angular.io/api/core/EventEmitter)                                                                                               | Emitted when cancelling uploading a new version                  |
+| versionChanged  | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<string>`                                                                                     | Emitted when the type of the new version is picked (minor/major) |
+| commentChanged  | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<string>`                                                                                     | Emitted when the comment of the new version has changed.         |
+
+## Details
+
+This component is used by the [Version Manager component](version-manager.component.md) to
+load and displays the new node's version choice - minor/major & comment.
+
+## See also
+
+-   [Version manager component](version-manager.component.md)

lib/content-services/src/lib/version-manager/version-upload.component.html

@@ -1,5 +1,5 @@
 <div class="adf-new-version-max-width">
-    <mat-radio-group class="adf-new-version-radio-group" [(ngModel)]="semanticVersion">
+    <mat-radio-group class="adf-new-version-radio-group" [(ngModel)]="semanticVersion" (change)="onVersionChange()">
         <mat-radio-button class="adf-new-version-radio-button" id="adf-new-version-minor"[value]="'minor'">{{
             'ADF_VERSION_LIST.ACTIONS.UPLOAD.MINOR' |
             translate }}
@@ -11,12 +11,13 @@
     </mat-radio-group>
     <mat-form-field class="adf-new-version-max-width">
                     <textarea matInput [(ngModel)]="comment" class="adf-new-version-text-area" id="adf-new-version-text-area"
+                              (change)="onCommentChange()"
                               placeholder="{{ 'ADF_VERSION_LIST.ACTIONS.UPLOAD.COMMENT' | translate }}"></textarea>
     </mat-form-field>
 
 </div>
 <div class="adf-version-upload-buttons">
-    <adf-upload-version-button
+    <adf-upload-version-button *ngIf="showUploadButton"
         data-automation-id="adf-new-version-file-upload"
         staticTitle="{{ 'ADF_VERSION_LIST.ACTIONS.UPLOAD.TITLE' | translate }}"
         [node]="node"
@@ -30,7 +31,7 @@
         (success)="success.emit($event)"
         (error)="error.emit($event)">
     </adf-upload-version-button>
-    <button mat-raised-button (click)="cancelUpload()" id="adf-new-version-cancel"  >{{
+    <button mat-raised-button (click)="cancelUpload()" id="adf-new-version-cancel"  *ngIf="showCancelButton" >{{
         'ADF_VERSION_LIST.ACTIONS.UPLOAD.CANCEL'| translate }}
     </button>
 </div>

lib/content-services/src/lib/version-manager/version-upload.component.ts

@@ -38,6 +38,12 @@ export class VersionUploadComponent {
     @Input()
     newFileVersion: File;
 
+    @Input()
+    showUploadButton: boolean = true;
+
+    @Input()
+    showCancelButton: boolean = true;
+
     @Output()
     success = new EventEmitter();
 
@@ -47,6 +53,12 @@ export class VersionUploadComponent {
     @Output()
     cancel = new EventEmitter();
 
+    @Output()
+    versionChanged = new EventEmitter<boolean>();
+
+    @Output()
+    commentChanged = new EventEmitter<string>();
+
     constructor(private contentService: ContentService) {
     }
 
@@ -62,4 +74,12 @@ export class VersionUploadComponent {
         this.cancel.emit();
     }
 
+    onVersionChange() {
+        this.versionChanged.emit(this.isMajorVersion());
+    }
+
+    onCommentChange() {
+        this.commentChanged.emit(this.comment);
+    }
+
 }