Merge pull request #481 from Alfresco/dev-pionnegru-ACA-1491

[ACA-1491] Info Drawer - comments tab

src/app.config.json

@@ -9,7 +9,8 @@
             "© 2017 - 2018 Alfresco Software, Inc. All rights reserved."
     },
     "experimental": {
-        "libraries": false
+        "libraries": false,
+        "comments": false
     },
     "headerColor": "#2196F3",
     "languagePicker": false,

src/app/components/info-drawer/info-drawer.component.html

@@ -12,21 +12,29 @@
             </adf-content-metadata-card>
         </adf-info-drawer-tab>
 
-        <adf-info-drawer-tab [label]="'APP.INFO_DRAWER.TABS.VERSIONS' | translate">
+        <ng-container *ifExperimental="'comments'; else versions">
-            <ng-container *ngIf="isFileSelected;else empty">
+            <adf-info-drawer-tab [label]="'APP.INFO_DRAWER.TABS.COMMENTS' | translate">
-                <adf-version-manager
+                <adf-comments [nodeId]="displayNode.id"></adf-comments>
-                    [showComments]="'adf-version-manager.allowComments' | adfAppConfig:true"
+            </adf-info-drawer-tab>
-                    [allowDownload]="'adf-version-manager.allowDownload' | adfAppConfig:true"
+        </ng-container>
-                    [node]="displayNode">
-                </adf-version-manager>
-            </ng-container>
 
-            <ng-template #empty>
+        <ng-template #versions>
-                <div class="adf-manage-versions-empty">
+            <adf-info-drawer-tab [label]="'APP.INFO_DRAWER.TABS.VERSIONS' | translate">
-                    <mat-icon class="adf-manage-versions-empty-icon">face</mat-icon>
+                <ng-container *ngIf="isFileSelected;else empty">
-                    {{ 'VERSION.SELECTION.EMPTY' | translate }}
+                    <adf-version-manager
-                </div>
+                        [showComments]="'adf-version-manager.allowComments' | adfAppConfig:true"
-            </ng-template>
+                        [allowDownload]="'adf-version-manager.allowDownload' | adfAppConfig:true"
-        </adf-info-drawer-tab>
+                        [node]="displayNode">
+                    </adf-version-manager>
+                </ng-container>
+
+                <ng-template #empty>
+                    <div class="adf-manage-versions-empty">
+                        <mat-icon class="adf-manage-versions-empty-icon">face</mat-icon>
+                        {{ 'VERSION.SELECTION.EMPTY' | translate }}
+                    </div>
+                </ng-template>
+            </adf-info-drawer-tab>
+        </ng-template>
     </adf-info-drawer>
 </ng-container>

src/app/components/settings/settings.component.html

@@ -59,10 +59,19 @@
                 {{ 'APP.SETTINGS.EXPERIMENTAL-FEATURES' | translate }}
             </mat-panel-title>
         </mat-expansion-panel-header>
-        <mat-checkbox
+        <div>
-            [(ngModel)]="libraries"
+            <mat-checkbox
-            (change)="onChangeLibrariesFeature($event)">
+                [(ngModel)]="libraries"
-            Library Management
+                (change)="onChangeLibrariesFeature($event)">
-        </mat-checkbox>
+                Library Management
+            </mat-checkbox>
+        </div>
+        <div>
+            <mat-checkbox
+                [(ngModel)]="comments"
+                (change)="onChangeCommentsFeature($event)">
+                Comments
+            </mat-checkbox>
+        </div>
     </mat-expansion-panel>
 </mat-accordion>

src/app/components/settings/settings.component.ts

@@ -49,6 +49,7 @@ export class SettingsComponent implements OnInit {
     headerColor$: Observable<string>;
     languagePicker$: Observable<boolean>;
     libraries: boolean;
+    comments: boolean;
 
     constructor(
         private store: Store<AppStore>,
@@ -74,6 +75,9 @@ export class SettingsComponent implements OnInit {
 
         const libraries = this.appConfig.get('experimental.libraries');
         this.libraries = (libraries === true || libraries === 'true');
+
+        const comments = this.appConfig.get('experimental.comments');
+        this.comments = (comments === true || comments === 'true');
     }
 
     apply(model: any, isValid: boolean) {
@@ -97,4 +101,8 @@ export class SettingsComponent implements OnInit {
     onChangeLibrariesFeature(event: MatCheckboxChange) {
         this.storage.setItem('experimental.libraries', event.checked.toString());
     }
+
+    onChangeCommentsFeature(event: MatCheckboxChange) {
+        this.storage.setItem('experimental.comments', event.checked.toString());
+    }
 }

src/app/directives/experimental.directive.ts

@@ -23,7 +23,7 @@
  * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Directive, TemplateRef, ViewContainerRef, Input } from '@angular/core';
+import { Directive, TemplateRef, ViewContainerRef, Input, EmbeddedViewRef } from '@angular/core';
 import { AppConfigService, StorageService } from '@alfresco/adf-core';
 import { environment } from '../../environments/environment';
 
@@ -32,6 +32,10 @@ import { environment } from '../../environments/environment';
     selector: '[ifExperimental]'
 })
 export class ExperimentalDirective {
+    private elseTemplateRef: TemplateRef<any>;
+    private elseViewRef: EmbeddedViewRef<any>;
+    private shouldRender: boolean;
+
     constructor(
         private templateRef: TemplateRef<any>,
         private viewContainerRef: ViewContainerRef,
@@ -43,19 +47,49 @@ export class ExperimentalDirective {
         const key = `experimental.${featureKey}`;
 
         const override = this.storage.getItem(key);
+
         if (override === 'true') {
-            this.viewContainerRef.createEmbeddedView(this.templateRef);
+            this.shouldRender = true;
-            return;
         }
 
         if (!environment.production) {
             const value = this.config.get(key);
             if (value === true || value === 'true') {
-                this.viewContainerRef.createEmbeddedView(this.templateRef);
+                this.shouldRender = true;
-                return;
             }
         }
 
-        this.viewContainerRef.clear();
+        if (override !== 'true' && environment.production) {
+            this.shouldRender = false;
+        }
+
+        this.updateView();
+    }
+
+    @Input() set ifExperimentalElse(templateRef: TemplateRef<any>) {
+        this.elseTemplateRef = templateRef;
+        this.elseViewRef = null;
+        this.updateView();
+    }
+
+    private updateView() {
+        if (this.shouldRender) {
+            this.viewContainerRef.clear();
+            this.elseViewRef = null;
+
+            if (this.templateRef) {
+                this.viewContainerRef.createEmbeddedView(this.templateRef);
+            }
+        } else {
+            if (this.elseViewRef) {
+                return;
+            }
+
+            this.viewContainerRef.clear();
+
+            if (this.elseTemplateRef) {
+                this.elseViewRef = this.viewContainerRef.createEmbeddedView(this.elseTemplateRef);
+            }
+        }
     }
 }

src/assets/i18n/en.json

@@ -232,7 +232,8 @@
             "TITLE": "Details",
             "TABS": {
                 "PROPERTIES": "Properties",
-                "VERSIONS": "Versions"
+                "VERSIONS": "Versions",
+                "COMMENTS": "Comments"
             }
         }
     },