[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

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')]
     },

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',
+    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')]
-    }
 });

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,
+        MaterialModule
-        MdButtonModule,
-        MdInputModule,
-        MdCardModule,
-        MdProgressSpinnerModule,
-        MdDatepickerModule,
-        MdNativeDateModule,
-        MdSelectModule,
-        MdAutocompleteModule,
-        MdGridListModule,
-        MdRippleModule
     ],
     declarations: [
         ...ACTIVITI_TASKLIST_DIRECTIVES
@@ -185,8 +175,7 @@ export const ACTIVITI_TASKLIST_PROVIDERS: any[] = [
     ],
     exports: [
         ...ACTIVITI_TASKLIST_DIRECTIVES,
-        MdIconModule,
+        MaterialModule
-        MdButtonModule
     ]
 })
 export class ActivitiTaskListModule {

ng2-components/ng2-activiti-tasklist/src/components/checklist.component.html

@@ -1,20 +1,19 @@
 <span class="activiti-label mdl-badge" id="checklist-label"
       [attr.data-badge]="checklist?.length">{{ 'TASK_DETAILS.LABELS.CHECKLIST' | translate }}</span>
-<div *ngIf="!readOnly" id="addChecklist" (click)="showDialog()" id="add-checklist" class="icon material-icons">add</div>
+<div *ngIf="!readOnly"  id="add-checklist" (click)="showDialog()"  class="icon material-icons">add</div>
 <div *ngIf="!readOnly" class="mdl-tooltip" for="add-checklist">
     Add a checklist
 </div>
-<div class="menu-container" *ngIf="checklist?.length > 0">
+<div class="adf-checklist-menu-container" *ngIf="checklist?.length > 0">
-    <ul class='mdl-list'>
+    <md-chip-list class="mat-chip-list-stacked">
-        <li class="mdl-list__item" *ngFor="let check of checklist">
+        <md-chip id="check-{{check.id}}" *ngFor="let check of checklist">
-            <span class="mdl-chip mdl-chip--deletable" id="check-{{check.id}}">
+            <span>{{check.name}}</span>
-                <span class="mdl-chip__text">{{check.name}}</span>
+            <button type="button" class="adf-checklist-cancel-button" (click)="delete(check.id)">
-                <button type="button" class="mdl-chip__action" (click)="delete(check.id)">
+                <md-icon *ngIf="!readOnly" id="remove-{{check.id}}" mdChipRemove >cancel</md-icon>
-                    <i id="remove-{{check.id}}" class="material-icons">cancel</i>
+            </button>
-                </button>
+        </md-chip>
-            </span>
+    </md-chip-list>
-        </li>
+
-    </ul>
 </div>
 <div *ngIf="checklist?.length === 0" id="checklist-none-message">
     {{ 'TASK_DETAILS.CHECKLIST.NONE' | translate }}

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;
+}

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 = <HTMLElement> element.querySelector('#add-checklist');
+            closeCheckDialogButton = <HTMLElement> 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 = <HTMLElement> element.querySelector('#add-checklist');
+            closeCheckDialogButton = <HTMLElement> 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 = <HTMLElement> element.querySelector('#add-checklist');
             closeCheckDialogButton = <HTMLElement> element.querySelector('#close-check-dialog');

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 {

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 {
+}

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();

ng2-components/ng2-alfresco-tag/src/components/tag-node-list.component.html

@@ -2,7 +2,7 @@
     <md-chip class="adf-tag-chips adf-primary-background-color" *ngFor="let currentEntry of tagsEntries; let idx = index">
         <span id="tag_name_{{idx}}">{{currentEntry.entry.tag}}</span>
         <button class="adf-tag-chips-delete" id="tag_delete_{{idx}}" type="button" (click)="removeTag(currentEntry.entry.id)">
-            <md-icon class="adf-tag-chips-delete-icon adf-primary-contrast-text-color">cancel</md-icon>
+            <md-icon class="adf-tag-chips-delete-icon adf-primary-contrast-text-color" mdChipRemove>cancel</md-icon>
         </button>
     </md-chip>
 </md-chip-list>