inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-19 17:14:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-1012] Hide delete checklist button when the checklist is in readonly mode (#2325)

Browse Source 
* disable button to delete when the checklist is in readonly mode

* style issues

* fix test
This commit is contained in:
Eugenio Romano 2017-09-12 14:39:33 +01:00 committed by Popovics András
parent 1f4b1231c6
commit a516d72304
10 changed files with 132 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ng2-components/ng2-activiti-tasklist/config/webpack.common.js
View File

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

13
ng2-components/ng2-activiti-tasklist/config/webpack.test.js
View File

@ -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'
});

19
ng2-components/ng2-activiti-tasklist/index.ts
View File

@ -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 {

23
ng2-components/ng2-activiti-tasklist/src/components/checklist.component.html
View File

@ -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">
<ul class='mdl-list'>
<li class="mdl-list__item" *ngFor="let check of checklist">
<span class="mdl-chip mdl-chip--deletable" id="check-{{check.id}}">
<span class="mdl-chip__text">{{check.name}}</span>
<button type="button" class="mdl-chip__action" (click)="delete(check.id)">
<i id="remove-{{check.id}}" class="material-icons">cancel</i>
</button>
</span>
</li>
</ul>
<div class="adf-checklist-menu-container" *ngIf="checklist?.length > 0">
<md-chip-list class="mat-chip-list-stacked">
<md-chip id="check-{{check.id}}" *ngFor="let check of checklist">
<span>{{check.name}}</span>
<button type="button" class="adf-checklist-cancel-button" (click)="delete(check.id)">
<md-icon *ngIf="!readOnly" id="remove-{{check.id}}" mdChipRemove >cancel</md-icon>
</button>
</md-chip>
</md-chip-list>
</div>
<div *ngIf="checklist?.length === 0" id="checklist-none-message">
{{ 'TASK_DETAILS.CHECKLIST.NONE' | translate }}

9
ng2-components/ng2-activiti-tasklist/src/components/checklist.component.css → ng2-components/ng2-activiti-tasklist/src/components/checklist.component.scss
View File

@ -21,3 +21,12 @@
.mat-input-container {
width: 100%;
}
.adf-checklist-cancel-button {
margin: -3px;
float: right;
}
.adf-checklist-menu-container{
margin-top: 10px;
}

51
ng2-components/ng2-activiti-tasklist/src/components/checklist.component.spec.ts
View File

@ -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');

2
ng2-components/ng2-activiti-tasklist/src/components/checklist.component.ts
View File

@ -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 {

56
ng2-components/ng2-activiti-tasklist/src/components/material.module.ts Normal file
View File

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

1
ng2-components/ng2-activiti-tasklist/src/components/tasklist.component.ts
View File

@ -117,7 +117,6 @@ export class TaskListComponent implements OnChanges, OnInit, AfterContentInit {
}
}
ngOnInit() {
if (this.data === undefined) {
this.data = new ObjectDataTableAdapter();

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

@ -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>