From a516d7230477e02d1b0108d154b4d5a253db634c Mon Sep 17 00:00:00 2001 From: Eugenio Romano Date: Tue, 12 Sep 2017 14:39:33 +0100 Subject: [PATCH] [ADF-1012] Hide delete checklist button when the checklist is in readonly mode (#2325) * disable button to delete when the checklist is in readonly mode * style issues * fix test --- .../config/webpack.common.js | 2 +- .../config/webpack.test.js | 13 +---- ng2-components/ng2-activiti-tasklist/index.ts | 19 ++----- .../src/components/checklist.component.html | 23 ++++---- ...component.css => checklist.component.scss} | 9 +++ .../components/checklist.component.spec.ts | 51 ++++++++++++++++- .../src/components/checklist.component.ts | 2 +- .../src/components/material.module.ts | 56 +++++++++++++++++++ .../src/components/tasklist.component.ts | 1 - .../components/tag-node-list.component.html | 2 +- 10 files changed, 132 insertions(+), 46 deletions(-) rename ng2-components/ng2-activiti-tasklist/src/components/{checklist.component.css => checklist.component.scss} (67%) create mode 100644 ng2-components/ng2-activiti-tasklist/src/components/material.module.ts diff --git a/ng2-components/ng2-activiti-tasklist/config/webpack.common.js b/ng2-components/ng2-activiti-tasklist/config/webpack.common.js index e0ea0b7429..41b85407d9 100644 --- a/ng2-components/ng2-activiti-tasklist/config/webpack.common.js +++ b/ng2-components/ng2-activiti-tasklist/config/webpack.common.js @@ -24,7 +24,7 @@ module.exports = { "ng2-alfresco-datatable": helpers.root('../ng2-alfresco-datatable/index.ts'), "ng2-activiti-form": helpers.root('../ng2-activiti-form/index.ts') }, - extensions: ['.ts', '.js'], + extensions: ['.ts', '.js', '.scss'], symlinks: false, modules: [helpers.root('../../ng2-components'), helpers.root('node_modules')] }, diff --git a/ng2-components/ng2-activiti-tasklist/config/webpack.test.js b/ng2-components/ng2-activiti-tasklist/config/webpack.test.js index 38e396d56e..b85f2f73fd 100644 --- a/ng2-components/ng2-activiti-tasklist/config/webpack.test.js +++ b/ng2-components/ng2-activiti-tasklist/config/webpack.test.js @@ -4,16 +4,5 @@ const commonConfig = require('./webpack.common.js'); module.exports = webpackMerge(commonConfig, { - devtool: 'inline-source-map', - - resolve: { - alias: { - "ng2-alfresco-form": helpers.root('../ng2-alfresco-form/index.ts'), - "ng2-alfresco-core": helpers.root('../ng2-alfresco-core/index.ts'), - "ng2-alfresco-datatable": helpers.root('../ng2-alfresco-datatable/index.ts') - }, - extensions: ['.ts', '.js'], - symlinks: false, - modules: [helpers.root('../../ng2-components'), helpers.root('node_modules')] - } + devtool: 'inline-source-map' }); diff --git a/ng2-components/ng2-activiti-tasklist/index.ts b/ng2-components/ng2-activiti-tasklist/index.ts index 41991ca241..7e45dc1a53 100644 --- a/ng2-components/ng2-activiti-tasklist/index.ts +++ b/ng2-components/ng2-activiti-tasklist/index.ts @@ -17,14 +17,14 @@ import { DatePipe } from '@angular/common'; import { ModuleWithProviders, NgModule } from '@angular/core'; -import { MdAutocompleteModule, MdButtonModule, MdCardModule, MdDatepickerModule, MdGridListModule, - MdIconModule, MdInputModule, MdNativeDateModule, MdProgressSpinnerModule, MdRippleModule, MdSelectModule } from '@angular/material'; import { ActivitiFormModule } from 'ng2-activiti-form'; + import { CoreModule, TRANSLATION_PROVIDER } from 'ng2-alfresco-core'; import { DataTableModule } from 'ng2-alfresco-datatable'; import { PeopleService } from './src/services/people.service'; import { ProcessUploadService } from './src/services/process-upload.service'; import { TaskListService } from './src/services/tasklist.service'; +import { MaterialModule } from './src/components/material.module'; import { AppsListComponent } from './src/components/apps-list.component'; import { ChecklistComponent } from './src/components/checklist.component'; @@ -156,17 +156,7 @@ export const ACTIVITI_TASKLIST_PROVIDERS: any[] = [ CoreModule, DataTableModule, ActivitiFormModule, - MdIconModule, - MdButtonModule, - MdInputModule, - MdCardModule, - MdProgressSpinnerModule, - MdDatepickerModule, - MdNativeDateModule, - MdSelectModule, - MdAutocompleteModule, - MdGridListModule, - MdRippleModule + MaterialModule ], declarations: [ ...ACTIVITI_TASKLIST_DIRECTIVES @@ -185,8 +175,7 @@ export const ACTIVITI_TASKLIST_PROVIDERS: any[] = [ ], exports: [ ...ACTIVITI_TASKLIST_DIRECTIVES, - MdIconModule, - MdButtonModule + MaterialModule ] }) export class ActivitiTaskListModule { diff --git a/ng2-components/ng2-activiti-tasklist/src/components/checklist.component.html b/ng2-components/ng2-activiti-tasklist/src/components/checklist.component.html index 820d57ceff..f25efa16f3 100644 --- a/ng2-components/ng2-activiti-tasklist/src/components/checklist.component.html +++ b/ng2-components/ng2-activiti-tasklist/src/components/checklist.component.html @@ -1,20 +1,19 @@ {{ 'TASK_DETAILS.LABELS.CHECKLIST' | translate }} -
add
+
add
Add a checklist
-
- +
+ + + {{check.name}} + + + +
{{ 'TASK_DETAILS.CHECKLIST.NONE' | translate }} diff --git a/ng2-components/ng2-activiti-tasklist/src/components/checklist.component.css b/ng2-components/ng2-activiti-tasklist/src/components/checklist.component.scss similarity index 67% rename from ng2-components/ng2-activiti-tasklist/src/components/checklist.component.css rename to ng2-components/ng2-activiti-tasklist/src/components/checklist.component.scss index 81fcf6f133..0f9e2a44d8 100644 --- a/ng2-components/ng2-activiti-tasklist/src/components/checklist.component.css +++ b/ng2-components/ng2-activiti-tasklist/src/components/checklist.component.scss @@ -21,3 +21,12 @@ .mat-input-container { width: 100%; } + +.adf-checklist-cancel-button { + margin: -3px; + float: right; +} + +.adf-checklist-menu-container{ + margin-top: 10px; +} diff --git a/ng2-components/ng2-activiti-tasklist/src/components/checklist.component.spec.ts b/ng2-components/ng2-activiti-tasklist/src/components/checklist.component.spec.ts index f280bd2821..5832067742 100644 --- a/ng2-components/ng2-activiti-tasklist/src/components/checklist.component.spec.ts +++ b/ng2-components/ng2-activiti-tasklist/src/components/checklist.component.spec.ts @@ -23,6 +23,7 @@ import { TranslationMock } from '../assets/translation.service.mock'; import { TaskDetailsModel } from '../models/task-details.model'; import { TaskListService } from '../services/tasklist.service'; import { ChecklistComponent } from './checklist.component'; +import { MaterialModule } from './material.module'; declare let jasmine: any; @@ -41,7 +42,8 @@ describe('ChecklistComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ imports: [ - CoreModule.forRoot() + CoreModule.forRoot(), + MaterialModule ], declarations: [ ChecklistComponent @@ -60,7 +62,7 @@ describe('ChecklistComponent', () => { }); })); - it('should show people component title', () => { + it('should show checklist component title', () => { expect(element.querySelector('#checklist-label')).toBeDefined(); expect(element.querySelector('#checklist-label')).not.toBeNull(); }); @@ -70,11 +72,54 @@ describe('ChecklistComponent', () => { expect(element.querySelector('#checklist-none-message').textContent).toContain('TASK_DETAILS.CHECKLIST.NONE'); }); - describe('when interact with people dialog', () => { + describe('when is readonly mode', () => { + + beforeEach(() => { + checklistComponent.taskId = 'fake-task-id'; + checklistComponent.checklist.push(fakeTaskDetail); + checklistComponent.readOnly = true; + + fixture.detectChanges(); + showChecklistDialog = element.querySelector('#add-checklist'); + closeCheckDialogButton = element.querySelector('#close-check-dialog'); + }); + + it('should NOT show add checklist button', () => { + expect(element.querySelector('#add-checklist')).toBeNull(); + }); + + it('should NOT show cancel checklist button', () => { + expect(element.querySelector('#remove-fake-check-id')).toBeNull(); + }); + }); + + describe('when is not in readonly mode', () => { + + beforeEach(() => { + checklistComponent.taskId = 'fake-task-id'; + checklistComponent.readOnly = false; + checklistComponent.checklist.push(fakeTaskDetail); + + fixture.detectChanges(); + showChecklistDialog = element.querySelector('#add-checklist'); + closeCheckDialogButton = element.querySelector('#close-check-dialog'); + }); + + it('should show add checklist button', () => { + expect(element.querySelector('#add-checklist')).not.toBeNull(); + }); + + it('should show cancel checklist button', () => { + expect(element.querySelector('#remove-fake-check-id')).not.toBeNull(); + }); + }); + + describe('when interact with checklist dialog', () => { beforeEach(() => { checklistComponent.taskId = 'fake-task-id'; checklistComponent.checklist = []; + fixture.detectChanges(); showChecklistDialog = element.querySelector('#add-checklist'); closeCheckDialogButton = element.querySelector('#close-check-dialog'); diff --git a/ng2-components/ng2-activiti-tasklist/src/components/checklist.component.ts b/ng2-components/ng2-activiti-tasklist/src/components/checklist.component.ts index 8673040efc..238895b2d6 100644 --- a/ng2-components/ng2-activiti-tasklist/src/components/checklist.component.ts +++ b/ng2-components/ng2-activiti-tasklist/src/components/checklist.component.ts @@ -25,7 +25,7 @@ declare let dialogPolyfill: any; @Component({ selector: 'adf-checklist, activiti-checklist', templateUrl: './checklist.component.html', - styleUrls: ['./checklist.component.css'], + styleUrls: ['./checklist.component.scss'], providers: [TaskListService] }) export class ChecklistComponent implements OnInit, OnChanges { diff --git a/ng2-components/ng2-activiti-tasklist/src/components/material.module.ts b/ng2-components/ng2-activiti-tasklist/src/components/material.module.ts new file mode 100644 index 0000000000..b1f76dcf3f --- /dev/null +++ b/ng2-components/ng2-activiti-tasklist/src/components/material.module.ts @@ -0,0 +1,56 @@ +/*! + * @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 { NgModule } from '@angular/core'; +import { + MdAutocompleteModule, + MdButtonModule, + MdCardModule, + MdChipsModule, + MdDatepickerModule, + MdGridListModule, + MdIconModule, + MdInputModule, + MdNativeDateModule, + MdProgressSpinnerModule, + MdRippleModule, + MdSelectModule +} from '@angular/material'; + +export function modules() { + return [ + MdIconModule, + MdButtonModule, + MdInputModule, + MdCardModule, + MdProgressSpinnerModule, + MdDatepickerModule, + MdNativeDateModule, + MdSelectModule, + MdAutocompleteModule, + MdGridListModule, + MdRippleModule, + MdChipsModule + ]; +} + +@NgModule({ + imports: modules(), + exports: modules() +}) +export class MaterialModule { +} diff --git a/ng2-components/ng2-activiti-tasklist/src/components/tasklist.component.ts b/ng2-components/ng2-activiti-tasklist/src/components/tasklist.component.ts index b85f8e0c56..8b3a3b8f4a 100644 --- a/ng2-components/ng2-activiti-tasklist/src/components/tasklist.component.ts +++ b/ng2-components/ng2-activiti-tasklist/src/components/tasklist.component.ts @@ -117,7 +117,6 @@ export class TaskListComponent implements OnChanges, OnInit, AfterContentInit { } } - ngOnInit() { if (this.data === undefined) { this.data = new ObjectDataTableAdapter(); diff --git a/ng2-components/ng2-alfresco-tag/src/components/tag-node-list.component.html b/ng2-components/ng2-alfresco-tag/src/components/tag-node-list.component.html index 77b171d749..76982223a7 100644 --- a/ng2-components/ng2-alfresco-tag/src/components/tag-node-list.component.html +++ b/ng2-components/ng2-alfresco-tag/src/components/tag-node-list.component.html @@ -2,7 +2,7 @@ {{currentEntry.entry.tag}}