Improved component hierarchy for actions

document actions are now nested within “document-actions” container to
separate them from other action types (i.e. folder actions); and to be
able applying bulk properties for “document-actions” collection if
needed (i.e. ‘show system actions’)
This commit is contained in:
Denys Vuika
2016-04-27 10:33:17 +01:00
parent 2877457625
commit 9c88fcb830
15 changed files with 214 additions and 42 deletions

View File

@@ -15,7 +15,7 @@
* limitations under the License.
*/
import {Component} from 'angular2/core';
import {DocumentList, DocumentListAction} from 'ng2-alfresco-documentlist/ng2-alfresco-documentlist';
import {DOCUMENT_LIST_DIRECTIVES} from 'ng2-alfresco-documentlist/ng2-alfresco-documentlist';
import {MDL} from 'ng2-alfresco-core/material';
@Component({
@@ -64,14 +64,16 @@ import {MDL} from 'ng2-alfresco-core/material';
[navigate]="navigation"
[downloads]="downloads"
(itemClick)="onItemClick($event)">
<document-actions>
<document-action title="System action" handler="system2"></document-action>
<document-action title="Custom action" (execute)="myCustomAction1($event)"></document-action>
</document-actions>
</alfresco-document-list>
</div>
</div>
</div>
`,
directives: [DocumentList, DocumentListAction, MDL]
directives: [DOCUMENT_LIST_DIRECTIVES, MDL]
})
export class FilesComponent {
thumbnails: boolean = true;

View File

@@ -45,8 +45,10 @@ export class MyView {
```html
<alfresco-document-list ...>
<document-actions>
<document-action title="System action" handler="system2"></document-action>
<document-action title="Custom action" (execute)="myCustomAction1($event)"></document-action>
</document-actions>
</alfresco-document-list>
```

View File

@@ -1,2 +1,12 @@
import { DocumentList } from './src/document-list.component';
import { DocumentListActions } from './src/document-list-actions.component';
import { DocumentAction } from './src/document-action.component';
export * from './src/document-list.component';
export * from './src/document-list-action.component';
export * from './src/document-list-actions.component';
export * from './src/document-action.component';
declare var _default: {
directives: (typeof DocumentList | typeof DocumentListActions | typeof DocumentAction)[];
providers: undefined[];
};
export default _default;
export declare const DOCUMENT_LIST_DIRECTIVES: [any];

View File

@@ -1,22 +1,42 @@
System.register(['./src/document-list.component', './src/document-list-action.component'], function(exports_1, context_1) {
System.register(['./src/document-list.component', './src/document-list-actions.component', './src/document-action.component'], function(exports_1, context_1) {
"use strict";
var __moduleName = context_1 && context_1.id;
var document_list_component_1, document_list_actions_component_1, document_action_component_1;
var DOCUMENT_LIST_DIRECTIVES;
var exportedNames_1 = {
'DOCUMENT_LIST_DIRECTIVES': true
};
function exportStar_1(m) {
var exports = {};
for(var n in m) {
if (n !== "default") exports[n] = m[n];
if (n !== "default"&& !exportedNames_1.hasOwnProperty(n)) exports[n] = m[n];
}
exports_1(exports);
}
return {
setters:[
function (document_list_component_1_1) {
document_list_component_1 = document_list_component_1_1;
exportStar_1(document_list_component_1_1);
},
function (document_list_action_component_1_1) {
exportStar_1(document_list_action_component_1_1);
function (document_list_actions_component_1_1) {
document_list_actions_component_1 = document_list_actions_component_1_1;
exportStar_1(document_list_actions_component_1_1);
},
function (document_action_component_1_1) {
document_action_component_1 = document_action_component_1_1;
exportStar_1(document_action_component_1_1);
}],
execute: function() {
exports_1("default",{
directives: [document_list_component_1.DocumentList, document_list_actions_component_1.DocumentListActions, document_action_component_1.DocumentAction],
providers: []
});
exports_1("DOCUMENT_LIST_DIRECTIVES", DOCUMENT_LIST_DIRECTIVES = [
document_list_component_1.DocumentList,
document_list_actions_component_1.DocumentListActions,
document_action_component_1.DocumentAction
]);
}
}
});

View File

@@ -1 +1 @@
{"version":3,"file":"ng2-alfresco-documentlist.js","sourceRoot":"","sources":["ng2-alfresco-documentlist.ts"],"names":[],"mappings":""}
{"version":3,"file":"ng2-alfresco-documentlist.js","sourceRoot":"","sources":["ng2-alfresco-documentlist.ts"],"names":[],"mappings":";;;;QAaa,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;YALrC,oBAAe;gBACX,UAAU,EAAE,CAAC,sCAAY,EAAE,qDAAmB,EAAE,0CAAc,CAAC;gBAC/D,SAAS,EAAE,EAAE;aAChB,EAAA;YAEY,sCAAA,wBAAwB,GAAU;gBAC3C,sCAAY;gBACZ,qDAAmB;gBACnB,0CAAc;aACjB,CAAA,CAAC"}

View File

@@ -1,2 +1,18 @@
import {DocumentList} from './src/document-list.component';
import {DocumentListActions} from './src/document-list-actions.component';
import {DocumentAction} from './src/document-action.component';
export * from './src/document-list.component';
export * from './src/document-list-action.component';
export * from './src/document-list-actions.component';
export * from './src/document-action.component';
export default {
directives: [DocumentList, DocumentListActions, DocumentAction],
providers: []
}
export const DOCUMENT_LIST_DIRECTIVES: [any] = [
DocumentList,
DocumentListActions,
DocumentAction
];

View File

@@ -15,14 +15,14 @@
* limitations under the License.
*/
import { OnInit, EventEmitter } from 'angular2/core';
import { DocumentList } from './document-list.component';
export declare class DocumentListAction implements OnInit {
import { DocumentListActions } from './document-list-actions.component';
export declare class DocumentAction implements OnInit {
private list;
title: string;
handler: string;
execute: EventEmitter<{}>;
private defaultHandlers;
constructor(list: DocumentList);
constructor(list: DocumentListActions);
ngOnInit(): void;
handleStandardAction1(document: any): void;
handleStandardAction2(document: any): void;

View File

@@ -1,4 +1,20 @@
System.register(['angular2/core', './document-list.component', './models/document-action.model'], function(exports_1, context_1) {
/**
* @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.
*/
System.register(['angular2/core', './models/document-action.model', './document-list-actions.component'], function(exports_1, context_1) {
"use strict";
var __moduleName = context_1 && context_1.id;
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -10,22 +26,22 @@ System.register(['angular2/core', './document-list.component', './models/documen
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var core_1, document_list_component_1, document_action_model_1;
var DocumentListAction;
var core_1, document_action_model_1, document_list_actions_component_1;
var DocumentAction;
return {
setters:[
function (core_1_1) {
core_1 = core_1_1;
},
function (document_list_component_1_1) {
document_list_component_1 = document_list_component_1_1;
},
function (document_action_model_1_1) {
document_action_model_1 = document_action_model_1_1;
},
function (document_list_actions_component_1_1) {
document_list_actions_component_1 = document_list_actions_component_1_1;
}],
execute: function() {
DocumentListAction = (function () {
function DocumentListAction(list) {
DocumentAction = (function () {
function DocumentAction(list) {
this.list = list;
this.title = 'Action';
this.execute = new core_1.EventEmitter();
@@ -34,7 +50,7 @@ System.register(['angular2/core', './document-list.component', './models/documen
this.defaultHandlers['system1'] = this.handleStandardAction1;
this.defaultHandlers['system2'] = this.handleStandardAction2;
}
DocumentListAction.prototype.ngOnInit = function () {
DocumentAction.prototype.ngOnInit = function () {
var _this = this;
var model = new document_action_model_1.DocumentActionModel();
model.title = this.title;
@@ -51,37 +67,37 @@ System.register(['angular2/core', './document-list.component', './models/documen
});
};
}
this.list.registerDocumentAction(model);
this.list.registerAction(model);
};
DocumentListAction.prototype.handleStandardAction1 = function (document) {
DocumentAction.prototype.handleStandardAction1 = function (document) {
window.alert('standard action 1');
};
DocumentListAction.prototype.handleStandardAction2 = function (document) {
DocumentAction.prototype.handleStandardAction2 = function (document) {
window.alert('standard action 2');
};
__decorate([
core_1.Input(),
__metadata('design:type', String)
], DocumentListAction.prototype, "title", void 0);
], DocumentAction.prototype, "title", void 0);
__decorate([
core_1.Input(),
__metadata('design:type', String)
], DocumentListAction.prototype, "handler", void 0);
], DocumentAction.prototype, "handler", void 0);
__decorate([
core_1.Output(),
__metadata('design:type', Object)
], DocumentListAction.prototype, "execute", void 0);
DocumentListAction = __decorate([
], DocumentAction.prototype, "execute", void 0);
DocumentAction = __decorate([
core_1.Component({
selector: 'document-action',
template: ''
}),
__metadata('design:paramtypes', [document_list_component_1.DocumentList])
], DocumentListAction);
return DocumentListAction;
__metadata('design:paramtypes', [document_list_actions_component_1.DocumentListActions])
], DocumentAction);
return DocumentAction;
}());
exports_1("DocumentListAction", DocumentListAction);
exports_1("DocumentAction", DocumentAction);
}
}
});
//# sourceMappingURL=document-list-action.component.js.map
//# sourceMappingURL=document-action.component.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"document-action.component.js","sourceRoot":"","sources":["document-action.component.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;;;;;;;;;;;;;;;;;;;;;;;;;;;YAUH;gBAOI,wBAAoB,IAAyB;oBAAzB,SAAI,GAAJ,IAAI,CAAqB;oBANpC,UAAK,GAAW,QAAQ,CAAC;oBAExB,YAAO,GAAG,IAAI,mBAAY,EAAE,CAAC;oBAE/B,oBAAe,GAA6C,EAAE,CAAC;oBAGnE,qEAAqE;oBACrE,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC,qBAAqB,CAAC;oBAC7D,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC,qBAAqB,CAAC;gBACjE,CAAC;gBAED,iCAAQ,GAAR;oBAAA,iBAkBC;oBAjBG,IAAI,KAAK,GAAG,IAAI,2CAAmB,EAAE,CAAC;oBACtC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;oBAEzB,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;wBACf,IAAI,cAAc,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;wBACxD,EAAE,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC;4BACjB,KAAK,CAAC,OAAO,GAAG,cAAc,CAAC;wBACnC,CAAC;oBACL,CAAC;oBAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;wBACtB,KAAK,CAAC,OAAO,GAAG,UAAC,QAAa;4BAC1B,KAAI,CAAC,OAAO,CAAC,IAAI,CAAC;gCACd,KAAK,EAAE,QAAQ;6BAClB,CAAC,CAAC;wBACP,CAAC,CAAC;oBACN,CAAC;oBAED,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;gBACpC,CAAC;gBAED,8CAAqB,GAArB,UAAsB,QAAa;oBAC/B,MAAM,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC;gBACtC,CAAC;gBAED,8CAAqB,GAArB,UAAsB,QAAa;oBAC/B,MAAM,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC;gBACtC,CAAC;gBAtCD;oBAAC,YAAK,EAAE;;6DAAA;gBACR;oBAAC,YAAK,EAAE;;+DAAA;gBACR;oBAAC,aAAM,EAAE;;+DAAA;gBAPb;oBAAC,gBAAS,CAAC;wBACP,QAAQ,EAAE,iBAAiB;wBAC3B,QAAQ,EAAE,EAAE;qBACf,CAAC;;kCAAA;gBAyCF,qBAAC;YAAD,CAAC,AAxCD,IAwCC;YAxCD,2CAwCC,CAAA"}

View File

@@ -14,22 +14,23 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import {Component, OnInit, Input, Output, EventEmitter} from 'angular2/core';
import {DocumentList} from './document-list.component';
import {DocumentActionModel, DocumentActionHandler} from './models/document-action.model';
import {DocumentListActions} from './document-list-actions.component';
@Component({
selector: 'document-action',
template: ''
})
export class DocumentListAction implements OnInit {
export class DocumentAction implements OnInit {
@Input() title: string = 'Action';
@Input() handler: string;
@Output() execute = new EventEmitter();
private defaultHandlers: { [id: string]: DocumentActionHandler; } = {};
constructor(private list: DocumentList) {
constructor(private list: DocumentListActions) {
// todo: just for dev/demo purposes, to be replaced with real actions
this.defaultHandlers['system1'] = this.handleStandardAction1;
this.defaultHandlers['system2'] = this.handleStandardAction2;
@@ -52,7 +53,7 @@ export class DocumentListAction implements OnInit {
};
}
this.list.registerDocumentAction(model);
this.list.registerAction(model);
}
handleStandardAction1(document: any) {

View File

@@ -1 +0,0 @@
{"version":3,"file":"document-list-action.component.js","sourceRoot":"","sources":["document-list-action.component.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;YAwBA;gBAOI,4BAAoB,IAAkB;oBAAlB,SAAI,GAAJ,IAAI,CAAc;oBAN7B,UAAK,GAAW,QAAQ,CAAC;oBAExB,YAAO,GAAG,IAAI,mBAAY,EAAE,CAAC;oBAE/B,oBAAe,GAA6C,EAAE,CAAC;oBAGnE,qEAAqE;oBACrE,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC,qBAAqB,CAAC;oBAC7D,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC,qBAAqB,CAAC;gBACjE,CAAC;gBAED,qCAAQ,GAAR;oBAAA,iBAkBC;oBAjBG,IAAI,KAAK,GAAG,IAAI,2CAAmB,EAAE,CAAC;oBACtC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;oBAEzB,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;wBACf,IAAI,cAAc,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;wBACxD,EAAE,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC;4BACjB,KAAK,CAAC,OAAO,GAAG,cAAc,CAAC;wBACnC,CAAC;oBACL,CAAC;oBAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;wBACtB,KAAK,CAAC,OAAO,GAAG,UAAC,QAAa;4BAC1B,KAAI,CAAC,OAAO,CAAC,IAAI,CAAC;gCACd,KAAK,EAAE,QAAQ;6BAClB,CAAC,CAAC;wBACP,CAAC,CAAC;oBACN,CAAC;oBAED,IAAI,CAAC,IAAI,CAAC,sBAAsB,CAAC,KAAK,CAAC,CAAC;gBAC5C,CAAC;gBAED,kDAAqB,GAArB,UAAsB,QAAa;oBAC/B,MAAM,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC;gBACtC,CAAC;gBAED,kDAAqB,GAArB,UAAsB,QAAa;oBAC/B,MAAM,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC;gBACtC,CAAC;gBAtCD;oBAAC,YAAK,EAAE;;iEAAA;gBACR;oBAAC,YAAK,EAAE;;mEAAA;gBACR;oBAAC,aAAM,EAAE;;mEAAA;gBAPb;oBAAC,gBAAS,CAAC;wBACP,QAAQ,EAAE,iBAAiB;wBAC3B,QAAQ,EAAE,EAAE;qBACf,CAAC;;sCAAA;gBAyCF,yBAAC;YAAD,CAAC,AAxCD,IAwCC;YAxCD,mDAwCC,CAAA"}

View File

@@ -0,0 +1,7 @@
import { DocumentList } from './document-list.component';
import { DocumentActionModel } from './models/document-action.model';
export declare class DocumentListActions {
private list;
constructor(list: DocumentList);
registerAction(action: DocumentActionModel): void;
}

View File

@@ -0,0 +1,62 @@
/**
* @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.
*/
System.register(['angular2/core', './document-list.component'], function(exports_1, context_1) {
"use strict";
var __moduleName = context_1 && context_1.id;
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var core_1, document_list_component_1;
var DocumentListActions;
return {
setters:[
function (core_1_1) {
core_1 = core_1_1;
},
function (document_list_component_1_1) {
document_list_component_1 = document_list_component_1_1;
}],
execute: function() {
DocumentListActions = (function () {
function DocumentListActions(list) {
this.list = list;
// saves reference to parent container
// so that content children can access it
}
DocumentListActions.prototype.registerAction = function (action) {
this.list.registerDocumentAction(action);
};
DocumentListActions = __decorate([
core_1.Component({
selector: 'document-actions',
template: ''
}),
__metadata('design:paramtypes', [document_list_component_1.DocumentList])
], DocumentListActions);
return DocumentListActions;
}());
exports_1("DocumentListActions", DocumentListActions);
}
}
});
//# sourceMappingURL=document-list-actions.component.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"document-list-actions.component.js","sourceRoot":"","sources":["document-list-actions.component.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;;;;;;;;;;;;;;;;;;;;;;;;YAUH;gBACI,6BAAoB,IAAkB;oBAAlB,SAAI,GAAJ,IAAI,CAAc;oBAClC,sCAAsC;oBACtC,yCAAyC;gBAC7C,CAAC;gBAED,4CAAc,GAAd,UAAe,MAA2B;oBACtC,IAAI,CAAC,IAAI,CAAC,sBAAsB,CAAC,MAAM,CAAC,CAAC;gBAC7C,CAAC;gBAZL;oBAAC,gBAAS,CAAC;wBACP,QAAQ,EAAE,kBAAkB;wBAC5B,QAAQ,EAAE,EAAE;qBACf,CAAC;;uCAAA;gBAUF,0BAAC;YAAD,CAAC,AATD,IASC;YATD,qDASC,CAAA"}

View File

@@ -0,0 +1,35 @@
/**
* @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 {Component} from 'angular2/core';
import {DocumentList} from './document-list.component';
import {DocumentActionModel} from './models/document-action.model';
@Component({
selector: 'document-actions',
template: ''
})
export class DocumentListActions {
constructor(private list: DocumentList) {
// saves reference to parent container
// so that content children can access it
}
registerAction(action: DocumentActionModel) {
this.list.registerDocumentAction(action);
}
}