diff --git a/src/app/components/shared/content-node-share/animation.ts b/src/app/components/shared/content-node-share/animation.ts deleted file mode 100644 index f9083ddec..000000000 --- a/src/app/components/shared/content-node-share/animation.ts +++ /dev/null @@ -1,53 +0,0 @@ -/*! - * @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' })) - ]) - ) -]; diff --git a/src/app/components/shared/content-node-share/content-node-share.dialog.html b/src/app/components/shared/content-node-share/content-node-share.dialog.html index 2155d8f8d..ea2b2f556 100644 --- a/src/app/components/shared/content-node-share/content-node-share.dialog.html +++ b/src/app/components/shared/content-node-share/content-node-share.dialog.html @@ -40,17 +40,25 @@

{{ 'SHARE.EXPIRES' | translate }}

+ (change)="onToggleExpirationDate($event)"> - - - + + + + + { fixture.destroy(); }); - it(`should toggle share action when property 'sharedId' does not exists`, () => { + it(`should toggle share action when property 'sharedId' does not exists`, fakeAsync(() => { spyOn(sharedLinksApiService, 'createSharedLinks').and.returnValue( of({ entry: { id: 'sharedId', sharedId: 'sharedId' } @@ -93,6 +93,7 @@ describe('ShareDialogComponent', () => { }; fixture.detectChanges(); + tick(500); expect(sharedLinksApiService.createSharedLinks).toHaveBeenCalled(); expect( @@ -100,13 +101,14 @@ describe('ShareDialogComponent', () => { .value ).toBe('some-url/sharedId'); expect( - fixture.nativeElement.querySelector('.mat-slide-toggle').classList + fixture.nativeElement.querySelector( + '.mat-slide-toggle[data-automation-id="adf-share-toggle"' + ).classList ).toContain('mat-checked'); - }); + })); - it(`should not toggle share action when file has 'sharedId' property`, () => { + it(`should not toggle share action when file has 'sharedId' property`, fakeAsync(() => { spyOn(sharedLinksApiService, 'createSharedLinks'); - node.entry.properties['qshare:sharedId'] = 'sharedId'; component.data = { @@ -116,6 +118,7 @@ describe('ShareDialogComponent', () => { }; fixture.detectChanges(); + tick(500); expect(sharedLinksApiService.createSharedLinks).not.toHaveBeenCalled(); expect( @@ -123,9 +126,11 @@ describe('ShareDialogComponent', () => { .value ).toBe('some-url/sharedId'); expect( - fixture.nativeElement.querySelector('.mat-slide-toggle').classList + fixture.nativeElement.querySelector( + '.mat-slide-toggle[data-automation-id="adf-share-toggle"' + ).classList ).toContain('mat-checked'); - }); + })); it(`should copy shared link and notify on button event`, async(() => { node.entry.properties['qshare:sharedId'] = 'sharedId'; @@ -169,7 +174,9 @@ describe('ShareDialogComponent', () => { fixture.detectChanges(); fixture.nativeElement - .querySelector('.mat-slide-toggle label') + .querySelector( + '.mat-slide-toggle[data-automation-id="adf-share-toggle"] label' + ) .dispatchEvent(new MouseEvent('click')); fixture.detectChanges(); @@ -191,7 +198,9 @@ describe('ShareDialogComponent', () => { fixture.detectChanges(); fixture.nativeElement - .querySelector('.mat-slide-toggle label') + .querySelector( + '.mat-slide-toggle[data-automation-id="adf-share-toggle"] label' + ) .dispatchEvent(new MouseEvent('click')); fixture.detectChanges(); @@ -213,7 +222,9 @@ describe('ShareDialogComponent', () => { fixture.detectChanges(); fixture.nativeElement - .querySelector('.mat-slide-toggle label') + .querySelector( + '.mat-slide-toggle[data-automation-id="adf-share-toggle"] label' + ) .dispatchEvent(new MouseEvent('click')); fixture.detectChanges(); @@ -221,9 +232,42 @@ describe('ShareDialogComponent', () => { expect(sharedLinksApiService.deleteSharedLink).not.toHaveBeenCalled(); })); + it('should reset expiration date when toggle is unchecked', () => { + spyOn(nodesApiService, 'updateNode').and.returnValue(of({})); + node.entry.properties['qshare:sharedId'] = 'sharedId'; + node.entry.properties['qshare:sharedId'] = '2017-04-15T18:31:37+00:00'; + + component.data = { + node, + permission: true, + baseShareUrl: 'some-url/' + }; + + fixture.detectChanges(); + + component.form.controls['time'].setValue(moment()); + + fixture.detectChanges(); + + fixture.nativeElement + .querySelector( + '.mat-slide-toggle[data-automation-id="adf-expire-toggle"] label' + ) + .dispatchEvent(new MouseEvent('click')); + + fixture.detectChanges(); + + expect(nodesApiService.updateNode).toHaveBeenCalledWith('nodeId', { + properties: { 'qshare:expiryDate': null } + }); + + expect( + fixture.nativeElement.querySelector('input[formcontrolname="time"]').value + ).toBe(''); + }); + it('should not allow unshare when node has no update permission', () => { node.entry.properties['qshare:sharedId'] = 'sharedId'; - node.entry.allowableOperations = []; component.data = { node, @@ -234,22 +278,24 @@ describe('ShareDialogComponent', () => { fixture.detectChanges(); expect( - fixture.nativeElement.querySelector('.mat-slide-toggle').classList + fixture.nativeElement.querySelector( + '.mat-slide-toggle[data-automation-id="adf-share-toggle"' + ).classList ).toContain('mat-disabled'); expect( fixture.nativeElement.querySelector('input[formcontrolname="time"]') .disabled ).toBe(true); expect( - fixture.nativeElement.querySelector('mat-datetimepicker-toggle button') - .disabled - ).toBe(true); + fixture.nativeElement.querySelector( + '.mat-slide-toggle[data-automation-id="adf-expire-toggle"]' + ).classList + ).toContain('mat-disabled'); }); 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); @@ -262,7 +308,9 @@ describe('ShareDialogComponent', () => { fixture.detectChanges(); fixture.nativeElement - .querySelector('mat-slide-toggle[data-automation-id="adf-expire-toggle"]') + .querySelector( + 'mat-slide-toggle[data-automation-id="adf-expire-toggle"] label' + ) .dispatchEvent(new MouseEvent('click')); fixture.componentInstance.form.controls['time'].setValue(date); diff --git a/src/app/components/shared/content-node-share/content-node-share.dialog.ts b/src/app/components/shared/content-node-share/content-node-share.dialog.ts index c288f12c5..3599fed68 100644 --- a/src/app/components/shared/content-node-share/content-node-share.dialog.ts +++ b/src/app/components/shared/content-node-share/content-node-share.dialog.ts @@ -21,7 +21,6 @@ import { OnInit, ViewEncapsulation, ViewChild, - ElementRef, OnDestroy } from '@angular/core'; import { MAT_DIALOG_DATA, MatDialogRef, MatDialog } from '@angular/material'; @@ -33,8 +32,6 @@ import { 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'; @@ -45,8 +42,7 @@ 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, - animations: [trigger('visibilityChanged', formFieldAnimation)] + encapsulation: ViewEncapsulation.None }) export class ShareDialogComponent implements OnInit, OnDestroy { private subscriptions: Subscription[] = []; @@ -62,8 +58,14 @@ export class ShareDialogComponent implements OnInit, OnDestroy { time: new FormControl({ value: '', disabled: false }) }); - @ViewChild('sharedLinkInput') - sharedLinkInput: ElementRef; + @ViewChild('matDatetimepickerToggle') + matDatetimepickerToggle; + + @ViewChild('slideToggleExpirationDate') + slideToggleExpirationDate; + + @ViewChild('dateTimePickerInput') + dateTimePickerInput; constructor( private sharedLinksApiService: SharedLinksApiService, @@ -116,10 +118,6 @@ export class ShareDialogComponent implements OnInit, OnDestroy { this.subscriptions.forEach(subscription => subscription.unsubscribe); } - removeShare() { - this.deleteSharedLink(this.sharedId); - } - onSlideShareChange() { this.openConfirmationDialog(); } @@ -128,12 +126,21 @@ export class ShareDialogComponent implements OnInit, OnDestroy { return this.data.permission; } - removeExpirationDate() { - this.form.controls.time.setValue(null); + onToggleExpirationDate(slideToggle) { + if (slideToggle.checked) { + this.matDatetimepickerToggle.datetimepicker.open(); + } else { + this.matDatetimepickerToggle.datetimepicker.close(); + this.form.controls.time.setValue(null); + } } - blur(input: HTMLInputElement) { - input.blur(); + onDatetimepickerClosed() { + this.dateTimePickerInput.nativeElement.blur(); + + if (!this.form.controls.time.value) { + this.slideToggleExpirationDate.checked = false; + } } private openConfirmationDialog() {