ACS-7408: version manager as standalone

lib/content-services/src/lib/content.module.ts

@@ -25,7 +25,7 @@ import { DocumentListModule } from './document-list/document-list.module';
 import { UploadModule } from './upload/upload.module';
 import { SearchModule } from './search/search.module';
 import { BREADCRUMB_DIRECTIVES } from './breadcrumb/breadcrumb.module';
-import { VersionManagerModule } from './version-manager/version-manager.module';
+import { CONTENT_VERSION_DIRECTIVES } from './version-manager/version-manager.module';
 import { ContentNodeSelectorModule } from './content-node-selector/content-node-selector.module';
 import { ContentNodeShareModule } from './content-node-share/content-node-share.module';
 import { ContentDirectiveModule } from './directives/content-directive.module';
@@ -68,7 +68,7 @@ import { NewVersionUploaderDialogComponent } from './new-version-uploader';
         ...CONTENT_METADATA_DIRECTIVES,
         ContentDirectiveModule,
         PermissionManagerModule,
-        VersionManagerModule,
+        ...CONTENT_VERSION_DIRECTIVES,
         TreeViewModule,
         ContentTypeModule,
         AspectListModule,
@@ -95,7 +95,7 @@ import { NewVersionUploaderDialogComponent } from './new-version-uploader';
         ...CONTENT_DIALOG_DIRECTIVES,
         ContentDirectiveModule,
         PermissionManagerModule,
-        VersionManagerModule,
+        ...CONTENT_VERSION_DIRECTIVES,
         TreeViewModule,
         AspectListModule,
         ContentTypeModule,

lib/content-services/src/lib/new-version-uploader/new-version-uploader.dialog.spec.ts

@@ -44,8 +44,14 @@ describe('NewVersionUploaderDialog', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [ContentTestingModule, NewVersionUploaderDialogComponent],
+            imports: [
-            declarations: [VersionListComponent, VersionUploadComponent, UploadVersionButtonComponent, VersionComparisonComponent],
+                ContentTestingModule,
+                NewVersionUploaderDialogComponent,
+                VersionListComponent,
+                VersionUploadComponent,
+                VersionComparisonComponent
+            ],
+            declarations: [UploadVersionButtonComponent],
             providers: [
                 { provide: MAT_DIALOG_DATA, useValue: { node: mockNode, showVersionsOnly, file: mockFile } },
                 {

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

@@ -17,16 +17,19 @@
 
 import { Component, Input, ViewEncapsulation } from '@angular/core';
 import { Node } from '@alfresco/js-api';
-import { ThumbnailService } from '@alfresco/adf-core';
+import { FileTypePipe, ThumbnailService } from '@alfresco/adf-core';
+import { CommonModule } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
     selector: 'adf-version-comparison',
+    standalone: true,
+    imports: [CommonModule, TranslateModule, FileTypePipe],
     templateUrl: './version-comparison.component.html',
     styleUrls: ['./version-comparison.component.scss'],
     encapsulation: ViewEncapsulation.None
 })
 export class VersionComparisonComponent {
-
     /** Target node. */
     @Input()
     node: Node;
@@ -35,7 +38,5 @@ export class VersionComparisonComponent {
     @Input()
     newFileVersion: File;
 
-    constructor(public thumbnailService: ThumbnailService) {
+    constructor(public thumbnailService: ThumbnailService) {}
-    }
-
 }

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

@@ -24,7 +24,15 @@ import { ContentService } from '../common';
 import { InfiniteScrollDatasource } from '../infinite-scroll-datasource';
 import { from, Observable, Subject } from 'rxjs';
 import { map, take, takeUntil } from 'rxjs/operators';
-import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
+import { CdkFixedSizeVirtualScroll, CdkVirtualForOf, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
+import { CommonModule } from '@angular/common';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatListModule } from '@angular/material/list';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+import { VersionCompatibilityModule } from '../version-compatibility';
+import { TranslateModule } from '@ngx-translate/core';
+import { MatButtonModule } from '@angular/material/button';
 
 export class VersionListDataSource extends InfiniteScrollDatasource<VersionEntry> {
     constructor(private versionsApi: VersionsApi, private node: Node) {
@@ -41,6 +49,20 @@ export class VersionListDataSource extends InfiniteScrollDatasource<VersionEntry
 
 @Component({
     selector: 'adf-version-list',
+    standalone: true,
+    imports: [
+        CommonModule,
+        MatProgressBarModule,
+        MatListModule,
+        CdkVirtualScrollViewport,
+        CdkFixedSizeVirtualScroll,
+        CdkVirtualForOf,
+        MatIconModule,
+        MatMenuModule,
+        VersionCompatibilityModule,
+        TranslateModule,
+        MatButtonModule
+    ],
     templateUrl: './version-list.component.html',
     styleUrls: ['./version-list.component.scss'],
     encapsulation: ViewEncapsulation.None,

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

@@ -1,7 +1,5 @@
 <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" [@uploadToggle]="uploadState">
         <table class="adf-version-upload" *ngIf="uploadState !== 'close' && !versionList.isLoading">
             <tr>
@@ -19,20 +17,16 @@
             </tr>
         </table>
     </div>
-
     <div class="adf-version-list-container">
         <div class="adf-version-list-table">
             <div>
                 <button mat-raised-button
                         id="adf-show-version-upload-button"
                         (click)="toggleNewVersion()" color="primary"
-                        *ngIf="uploadState ==='close'">{{
+                        *ngIf="uploadState ==='close'">{{ 'ADF_VERSION_LIST.ACTIONS.UPLOAD.ADD' | translate }}
-                    'ADF_VERSION_LIST.ACTIONS.UPLOAD.ADD'|
-                    translate }}
                 </button>
             </div>
             <div>
-
                 <adf-version-list
                     #versionList
                     [node]="node"

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

@@ -22,29 +22,29 @@ import { trigger, state, style, animate, transition } from '@angular/animations'
 import { ContentService } from '../common/services/content.service';
 import { NodesApiService } from '../common/services/nodes-api.service';
 import { FileUploadErrorEvent } from '../common/events/file.event';
+import { CommonModule } from '@angular/common';
+import { VersionComparisonComponent } from './version-comparison.component';
+import { VersionUploadComponent } from './version-upload.component';
+import { MatButtonModule } from '@angular/material/button';
+import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
     selector: 'adf-version-manager',
+    standalone: true,
+    imports: [CommonModule, VersionComparisonComponent, VersionUploadComponent, MatButtonModule, TranslateModule, VersionListComponent],
     templateUrl: './version-manager.component.html',
     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' })),
-            transition('open => close', [
+            transition('open => close', [style({ visibility: 'hidden' }), animate('0.4s cubic-bezier(0.25, 0.8, 0.25, 1)')]),
-                style({visibility: 'hidden'}),
+            transition('close => open', [style({ visibility: 'visible' }), animate('0.4s cubic-bezier(0.25, 0.8, 0.25, 1)')])
-                animate('0.4s cubic-bezier(0.25, 0.8, 0.25, 1)')
-            ]),
-            transition('close => open', [
-                style({visibility: 'visible'}),
-                animate('0.4s cubic-bezier(0.25, 0.8, 0.25, 1)')
-            ])
         ])
     ],
     encapsulation: ViewEncapsulation.None
 })
 export class VersionManagerComponent implements OnInit {
-
     /** Target node to manage version history. */
     @Input()
     node: Node;
@@ -86,9 +86,7 @@ export class VersionManagerComponent implements OnInit {
 
     uploadState: string = 'close';
 
-    constructor(private contentService: ContentService,
+    constructor(private contentService: ContentService, private nodesApiService: NodesApiService) {}
-                private nodesApiService: NodesApiService) {
-    }
 
     ngOnInit() {
         if (this.newFileVersion) {

lib/content-services/src/lib/version-manager/version-manager.module.ts

@@ -15,23 +15,22 @@
  * limitations under the License.
  */
 
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
 import { NgModule } from '@angular/core';
-import { MaterialModule } from '../material.module';
-
 import { VersionUploadComponent } from './version-upload.component';
 import { VersionManagerComponent } from './version-manager.component';
 import { VersionListComponent } from './version-list.component';
-import { UploadModule } from '../upload/upload.module';
-import { VersionCompatibilityModule } from '../version-compatibility/version-compatibility.module';
-import { CoreModule, FileTypePipe } from '@alfresco/adf-core';
 import { VersionComparisonComponent } from './version-comparison.component';
-import { ScrollingModule } from '@angular/cdk/scrolling';
 
+export const CONTENT_VERSION_DIRECTIVES = [
+    VersionUploadComponent,
+    VersionManagerComponent,
+    VersionListComponent,
+    VersionComparisonComponent
+] as const;
+
+/** @deprecated use `...CONTENT_VERSION_DIRECTIVES` instead */
 @NgModule({
-    imports: [CommonModule, MaterialModule, CoreModule, UploadModule, VersionCompatibilityModule, FormsModule, ScrollingModule, FileTypePipe],
+    imports: [...CONTENT_VERSION_DIRECTIVES],
-    exports: [VersionUploadComponent, VersionManagerComponent, VersionListComponent, FormsModule, VersionComparisonComponent],
+    exports: [...CONTENT_VERSION_DIRECTIVES]
-    declarations: [VersionUploadComponent, VersionManagerComponent, VersionListComponent, VersionComparisonComponent]
 })
 export class VersionManagerModule {}

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

@@ -9,10 +9,11 @@
     </mat-radio-group>
     <mat-form-field class="adf-new-version-max-width" subscriptSizing="dynamic">
         <mat-label>{{'ADF_VERSION_LIST.ACTIONS.UPLOAD.COMMENT' | translate}}</mat-label>
-                    <textarea matInput [(ngModel)]="comment" class="adf-new-version-text-area" id="adf-new-version-text-area"
+        <textarea matInput
+                  [(ngModel)]="comment"
+                  class="adf-new-version-text-area" id="adf-new-version-text-area"
                   (change)="onCommentChange()"></textarea>
     </mat-form-field>
-
 </div>
 <div class="adf-version-upload-buttons">
     <adf-upload-version-button *ngIf="showUploadButton"

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

@@ -22,16 +22,25 @@ import { takeUntil } from 'rxjs/operators';
 import { ContentService } from '../common/services/content.service';
 import { UploadService } from '../common/services/upload.service';
 import { FileUploadErrorEvent, FileUploadEvent } from '../common/events/file.event';
+import { CommonModule } from '@angular/common';
+import { MatRadioModule } from '@angular/material/radio';
+import { FormsModule } from '@angular/forms';
+import { TranslateModule } from '@ngx-translate/core';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { UploadModule } from '../upload';
+import { MatButtonModule } from '@angular/material/button';
 
 @Component({
     selector: 'adf-version-upload',
+    standalone: true,
+    imports: [CommonModule, MatRadioModule, FormsModule, TranslateModule, MatFormFieldModule, MatInputModule, UploadModule, MatButtonModule],
     templateUrl: './version-upload.component.html',
     styleUrls: ['./version-upload.component.scss'],
     encapsulation: ViewEncapsulation.None,
     host: { class: 'adf-version-upload' }
 })
 export class VersionUploadComponent implements OnInit, OnDestroy {
-
     semanticVersion: string = 'minor';
     comment: string;
     uploadVersion: boolean = false;
@@ -89,13 +98,10 @@ export class VersionUploadComponent implements OnInit, OnDestroy {
     @Output()
     uploadStarted = new EventEmitter<FileUploadEvent>();
 
-    constructor(private contentService: ContentService, private uploadService: UploadService) {
+    constructor(private contentService: ContentService, private uploadService: UploadService) {}
-    }
 
     ngOnInit() {
-        this.uploadService.fileUploadStarting
+        this.uploadService.fileUploadStarting.pipe(takeUntil(this.onDestroy$)).subscribe((event: FileUploadEvent) => {
-            .pipe(takeUntil(this.onDestroy$))
-            .subscribe((event: FileUploadEvent) => {
             this.disabled = true;
             this.uploadStarted.emit(event);
         });