[ACA] Shared link - update functionality (#713)

* toggle expiration input field

* expiration input field animation

* update node on value changed

* cleanup code

* test

* fix test

* remove event parameter

* remove event parameter

src/app/components/shared/content-node-share/animation.ts

@@ -0,0 +1,53 @@
+/*!
+ * @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 {
+  state,
+  style,
+  transition,
+  animate,
+  sequence,
+  AnimationStateMetadata,
+  AnimationTransitionMetadata
+} from '@angular/animations';
+
+export const formFieldAnimation: (
+  | AnimationStateMetadata
+  | AnimationTransitionMetadata)[] = [
+  state(
+    'false',
+    style({
+      opacity: 0,
+      height: 0,
+      visibility: 'hidden'
+    })
+  ),
+  transition(
+    'true => false',
+    sequence([
+      animate('200ms linear', style({ opacity: 0, height: 0 })),
+      animate('2ms', style({ visibility: 'hidden' }))
+    ])
+  ),
+  transition(
+    'false => true',
+    sequence([
+      animate('200ms linear', style({ opacity: 1, height: '*' })),
+      animate('200ms', style({ visibility: 'visible' }))
+    ])
+  )
+];

src/app/components/shared/content-node-share/content-node-share.dialog.html

@@ -15,7 +15,7 @@
                 data-automation-id="adf-share-toggle"
                 [checked]="isFileShared"
                 [disabled]="!canUpdate || isDisabled"
-                (change)="onSlideShareChange($event)">
+                (change)="onSlideShareChange()">
             </mat-slide-toggle>
         </div>
 
@@ -39,15 +39,16 @@
             <div class="adf-share-link--row">
                 <h1 class="adf-share-link__label">{{ 'SHARE.EXPIRES' | translate }}</h1>
                 <mat-slide-toggle
+                    [disabled]="!canUpdate"
+                    #slideToggle
                     color="primary"
                     data-automation-id="adf-expire-toggle"
                     [checked]="form.controls['time'].value"
-                    [disabled]="!form.controls['time'].value"
-                    (change)="removeExpires()">
+                    (change)="removeExpirationDate()">
                 </mat-slide-toggle>
             </div>
 
-            <mat-form-field class="full-width">
+            <mat-form-field class="full-width" [@visibilityChanged]="slideToggle.checked">
                 <mat-datetimepicker-toggle [for]="datetimePicker" matSuffix></mat-datetimepicker-toggle>
                 <mat-datetimepicker #datetimePicker (closed)="blur(dateTimePickerInput)" type="datetime" openOnFocus="true" timeInterval="1"></mat-datetimepicker>
                 <input class="adf-share-link__input"

src/app/components/shared/content-node-share/content-node-share.dialog.spec.ts

@@ -28,6 +28,7 @@ import {
 } from '@alfresco/adf-core';
 import { ContentNodeShareModule } from './content-node-share.module';
 import { ShareDialogComponent } from './content-node-share.dialog';
+import moment from 'moment-es6';
 
 describe('ShareDialogComponent', () => {
   let node;
@@ -36,6 +37,7 @@ describe('ShareDialogComponent', () => {
     openSnackMessage: jasmine.createSpy('openSnackMessage')
   };
   let sharedLinksApiService: SharedLinksApiService;
+  let nodesApiService: NodesApiService;
   let fixture;
   let component;
 
@@ -58,6 +60,7 @@ describe('ShareDialogComponent', () => {
     fixture = TestBed.createComponent(ShareDialogComponent);
     matDialog = TestBed.get(MatDialog);
     sharedLinksApiService = TestBed.get(SharedLinksApiService);
+    nodesApiService = TestBed.get(NodesApiService);
     component = fixture.componentInstance;
   });
 
@@ -176,7 +179,7 @@ describe('ShareDialogComponent', () => {
 
   it('should unshare file when confirmation dialog returns true', fakeAsync(() => {
     spyOn(matDialog, 'open').and.returnValue({ beforeClose: () => of(true) });
-    spyOn(sharedLinksApiService, 'deleteSharedLink');
+    spyOn(sharedLinksApiService, 'deleteSharedLink').and.returnValue(of(null));
     node.entry.properties['qshare:sharedId'] = 'sharedId';
 
     component.data = {
@@ -242,4 +245,31 @@ describe('ShareDialogComponent', () => {
         .disabled
     ).toBe(true);
   });
+
+  it('should update node expiration date with selected date and time', () => {
+    const date = moment();
+    node.entry.properties['qshare:sharedId'] = 'sharedId';
+    node.entry.allowableOperations = [];
+    spyOn(nodesApiService, 'updateNode').and.returnValue(of({}));
+    fixture.componentInstance.form.controls['time'].setValue(null);
+
+    component.data = {
+      node,
+      permission: true,
+      baseShareUrl: 'some-url/'
+    };
+
+    fixture.detectChanges();
+
+    fixture.nativeElement
+      .querySelector('mat-slide-toggle[data-automation-id="adf-expire-toggle"]')
+      .dispatchEvent(new MouseEvent('click'));
+
+    fixture.componentInstance.form.controls['time'].setValue(date);
+    fixture.detectChanges();
+
+    expect(nodesApiService.updateNode).toHaveBeenCalledWith('nodeId', {
+      properties: { 'qshare:expiryDate': date.utc().format() }
+    });
+  });
 });

src/app/components/shared/content-node-share/content-node-share.dialog.ts

@@ -27,7 +27,14 @@ import {
 import { MAT_DIALOG_DATA, MatDialogRef, MatDialog } from '@angular/material';
 import { FormGroup, FormControl } from '@angular/forms';
 import { Subscription, Observable, throwError } from 'rxjs';
-import { skip, skipWhile, mergeMap, catchError } from 'rxjs/operators';
+import {
+  skip,
+  mergeMap,
+  catchError,
+  distinctUntilChanged
+} from 'rxjs/operators';
+import { trigger } from '@angular/animations';
+import { formFieldAnimation } from './animation';
 import { SharedLinksApiService, NodesApiService } from '@alfresco/adf-core';
 import { SharedLinkEntry, MinimalNodeEntryEntity } from 'alfresco-js-api';
 import { ConfirmDialogComponent } from '@alfresco/adf-content-services';
@@ -38,7 +45,8 @@ import moment from 'moment-es6';
   templateUrl: './content-node-share.dialog.html',
   styleUrls: ['./content-node-share.dialog.scss'],
   host: { class: 'adf-share-dialog' },
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  animations: [trigger('visibilityChanged', formFieldAnimation)]
 })
 export class ShareDialogComponent implements OnInit, OnDestroy {
   private subscriptions: Subscription[] = [];
@@ -71,16 +79,15 @@ export class ShareDialogComponent implements OnInit, OnDestroy {
     }
 
     this.subscriptions.push(
-      this.form.valueChanges
+      this.form.controls.time.valueChanges
         .pipe(
           skip(1),
-          skipWhile(() => !this.isTimeFieldValid),
+          distinctUntilChanged(),
           mergeMap(
             updates => this.updateNode(updates),
             formUpdates => formUpdates
           ),
           catchError(error => {
-            this.form.controls.time.setValue(null);
             return throwError(error);
           })
         )
@@ -113,23 +120,15 @@ export class ShareDialogComponent implements OnInit, OnDestroy {
     this.deleteSharedLink(this.sharedId);
   }
 
-  onSlideShareChange(event: any) {
-    if (event.checked) {
-      this.createSharedLinks(this.data.node.entry.id);
-    } else {
-      this.openConfirmationDialog();
-    }
-  }
-
-  get isTimeFieldValid() {
-    return this.form.controls.time.valid;
+  onSlideShareChange() {
+    this.openConfirmationDialog();
   }
 
   get canUpdate() {
     return this.data.permission;
   }
 
-  removeExpires() {
+  removeExpirationDate() {
     this.form.controls.time.setValue(null);
   }
 
@@ -208,19 +207,17 @@ export class ShareDialogComponent implements OnInit, OnDestroy {
     });
   }
 
-  private updateNode(updates): Observable<MinimalNodeEntryEntity> {
+  private updateNode(date: moment.Moment): Observable<MinimalNodeEntryEntity> {
     return this.nodesApiService.updateNode(this.data.node.entry.id, {
       properties: {
-        'qshare:expiryDate': updates.time ? updates.time.utc().format() : null
+        'qshare:expiryDate': date ? date.utc().format() : null
       }
     });
   }
 
-  private updateEntryExpiryDate(updates) {
+  private updateEntryExpiryDate(date: moment.Moment) {
     const { properties } = this.data.node.entry;
 
-    properties['qshare:expiryDate'] = updates.time
-      ? updates.time.local()
-      : null;
+    properties['qshare:expiryDate'] = date ? date.local() : null;
   }
 }