inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-1769] Updates to prop table script (#2829)

Browse Source 
* [ADF-1769] Fixed prop table tool formatting

* [ADF-1769] Added code style to event type column
This commit is contained in:
Andy Stark
2018-01-16 00:10:02 +00:00
committed by Eugenio Romano
parent e757378e9b
commit 3bee9a70f5
5 changed files with 135 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
docs/document-list.component.md
View File

@@ -47,49 +47,48 @@ Displays the documents from a repository.
### Properties
The properties currentFolderId, folderNode and node are the entry initialization properties of the document list. They cannot be used together, choose the one that suites more your use case.
| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| permissionsStyle | [PermissionStyleModel\[\]](permissions-style.model.md) | null | Define a set of CSS styles styles to apply depending on the permission of the user on that node. See the [Permission Style model](permissions-style.model.md) page for further details and examples. |
| locationFormat | string | '/' | The default route for all the location-based columns (if declared). |
| navigate | boolean | true | Toggles navigation to folder content or file preview |
| navigationMode | string (click,dblclick) | dblclick | User interaction for folder navigation or file preview |
| thumbnails | boolean | false | Show document thumbnails rather than icons |
| selectionMode | string | 'single' | Row selection mode. Can be none, `single` or `multiple`. For `multiple` mode you can use Cmd (macOS) or Ctrl (Win) modifier key to toggle selection for multiple rows. |
| multiselect | boolean | false | Toggles multiselect mode |
| contentActions | boolean | false | Toggles content actions for each row |
| contentActionsPosition | string (left\|right) | right | Position of the content actions dropdown menu. |
| contextMenuActions | boolean | false | Toggles context menus for each row |
| emptyFolderImageUrl | string | assets/images/empty_doc_lib.svg | Custom image for empty folder |
| allowDropFiles | boolean | false | Toggle file drop support for rows (see **ng2-alfresco-core/UploadDirective** for more details) |
| sorting | string\[] | | Defines default sorting. The format is an array of 2 strings `[key, direction]` i.e. `['name', 'desc']` or `['name', 'asc']`. Set this value only if you want to override default sorting detected by the component based on columns. |
| rowStyle | string | | The inline style to apply to every row, see [NgStyle](https://angular.io/docs/ts/latest/api/common/index/NgStyle-directive.html) docs for more details and usage examples |
| rowStyleClass | string | | The CSS class to apply to every row |
| loading | boolean | false | Toggles the loading state and animated spinners for the component. Used in combination with `navigate=false` to perform custom navigation and loading state indication. |
| rowFilter | `RowFilter` | | Custom row filter, [see more](#custom-row-filter). |
| imageResolver | `ImageResolver` | | Custom image resolver, [see more](#custom-image-resolver). |
| currentFolderId | string | null | The ID of the folder node to display or a reserved string alias for special sources (see **Data Sources**) |
| folderNode | [MinimalNodeEntryEntity](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodeMinimalEntry.md) | null | Currently displayed folder node |
| node | [NodePaging](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodePaging.md) | null | Document list will show all the nodes contained in the NodePaging entity |
| maxItems | number | Default value is stored into user preference settings | determine the size of the page for the element into document list |
| skipCount | number | 0 | element to skip over for pagination purpose |
| enableInfiniteScrolling | boolean | true | Enable documentlist to work into infinite scrolling mode |
| Name | Type | Description |
| ---- | ---- | ----------- |
| permissionsStyle | `PermissionStyleModel[]` | Define a set of CSS styles styles to apply depending on the permission of the user on that node. See the Permission Style model page for further details and examples.<br/> Default value: `[]` |
| locationFormat | `string` | The default route for all the location-based columns (if declared). <br/> Default value: `'/'` |
| navigate | `boolean` | Toggles navigation to folder content or file preview <br/> Default value: `true` |
| navigationMode | `string` | User interaction for folder navigation or file preview. Valid values are "click" and "dblclick". <br/> Default value: `DocumentListComponent.DOUBLE_CLICK_NAVIGATION` |
| thumbnails | `boolean` | Show document thumbnails rather than icons <br/> Default value: `false` |
| selectionMode | `string` | Row selection mode. Can be null, \`single\` or \`multiple\`. For \`multiple\` mode, you can use Cmd (macOS) or Ctrl (Win) modifier key to toggle selection for multiple rows.<br/> Default value: `'single'` |
| multiselect | `boolean` | Toggles multiselect mode <br/> Default value: `false` |
| contentActions | `boolean` | Toggles content actions for each row <br/> Default value: `false` |
| contentActionsPosition | `string` | Position of the content actions dropdown menu. Can be set to "left" or "right". <br/> Default value: `'right'` |
| contextMenuActions | `boolean` | Toggles context menus for each row <br/> Default value: `false` |
| emptyFolderImageUrl | `string` | Custom image for empty folder <br/> Default value: `'./assets/images/empty_doc_lib.svg'` |
| allowDropFiles | `boolean` | Toggle file drop support for rows (see Upload Directive for further details <br/> Default value: `false` |
| sorting | `string[]` | Defines default sorting. The format is an array of 2 strings \`\[key, direction]\` i.e. \`\['name', 'desc']\` or \`\['name', 'asc']\`. Set this value only if you want to override the default sorting detected by the component based on columns. |
| rowStyle | `string` | The inline style to apply to every row. See the Angular NgStyle docs for more details and usage examples. |
| rowStyleClass | `string` | The CSS class to apply to every row |
| loading | `boolean` | Toggles the loading state and animated spinners for the component. Used in combination with \`navigate=false\` to perform custom navigation and loading state indication.<br/> Default value: `false` |
| rowFilter | `any` | Custom row filter <br/> Default value: `null` |
| imageResolver | `any` | Custom image resolver <br/> Default value: `null` |
| currentFolderId | `string` | The ID of the folder node to display or a reserved string alias for special sources <br/> Default value: `null` |
| folderNode | `MinimalNodeEntryEntity` | Currently displayed folder node <br/> Default value: `null` |
| node | `NodePaging` | The Document list will show all the nodes contained in the NodePaging entity <br/> Default value: `null` |
| maxItems | `number` | Default value is stored into user preference settings |
| skipCount | `number` | Number of elements to skip over for pagination purposes <br/> Default value: `0` |
| enableInfiniteScrolling | `boolean` | Set document list to work in infinite scrolling mode <br/> Default value: `false` |
### Events
| Name | Description |
| ---- | ----------- |
| nodeClick | emitted when user clicks a list node |
| nodeDblClick | emitted when user double-clicks list node |
| folderChange | emitted once current display folder has changed |
| preview | emitted when user acts upon files with either single or double click (depends on `navigation-mode`), recommended for Viewer components integration |
| permissionError | emitted when user is attempting to create a folder via action menu without having the permission to do it |
| ready | emitted when the documentList is ready and loads all the elements |
| error | emitted when API fails to get documentList data |
| Name | Type | Description |
| ---- | ---- | ----------- |
| nodeClick | `EventEmitter<NodeEntityEvent>` | Emitted when the user clicks a list node |
| nodeDblClick | `EventEmitter<NodeEntityEvent>` | Emitted when the user double-clicks a list node |
| folderChange | `EventEmitter<NodeEntryEvent>` | Emitted when the current display folder changes |
| preview | `EventEmitter<NodeEntityEvent>` | Emitted when the user acts upon files with either single or double click (depends on \`navigation-mode\`). Useful for integration with the Viewer component. |
| ready | `EventEmitter<NodePaging>` | Emitted when the Document List has loaded all items and is ready for use |
| error | `EventEmitter<any>` | Emitted when the API fails to get the Document List data |
## Details
The properties currentFolderId, folderNode and node are the entry initialization properties of the document list. They cannot be used together, so choose the one that suits your use case best.
### DOM Events
Below are the DOM events the DocumentList component emits.

34
lib/config/DocProcessor/tools/tscProps.js
View File

@@ -2,7 +2,6 @@
exports.__esModule = true;
var ts = require("typescript");
var path = require("path");
var program = require("commander");
var heading = require("mdast-util-heading-range");
var unist = require("../unistHelpers");
function initPhase(aggData) {
@@ -27,19 +26,18 @@ function updatePhase(tree, pathname, aggData) {
var inTable_1 = buildInputsTable(inputs);
var outTable_1 = buildOutputsTable(outputs);
if (inTable_1) {
console.log("Made a props table");
heading(tree, "Properties", function (before, section, after) {
return [before, inTable_1, after];
});
}
if (outTable_1) {
console.log("Made an events table");
heading(tree, "Events", function (before, section, after) {
return [before, outTable_1, after];
});
}
}
}
return true;
}
exports.updatePhase = updatePhase;
function initialCap(str) {
@@ -61,7 +59,7 @@ function fixCompodocFilename(rawName) {
return finalName;
}
function getPropDocData(srcPath, docClassName, inputs, outputs) {
var prog = ts.createProgram(program.args, {
var prog = ts.createProgram([srcPath], {
target: ts.ScriptTarget.ES5, module: ts.ModuleKind.CommonJS
});
var sourceFiles = prog.getSourceFiles();
@@ -97,7 +95,8 @@ function getPropDataFromClass(checker, classDec, inputs, outputs) {
if (prop.initializer) {
initializer = prop.initializer.getText(sourceFile);
}
var doc = ts.displayPartsToString(memSymbol.getDocumentationComment());
var doc = ts.displayPartsToString(memSymbol.getDocumentationComment(checker));
doc = doc.replace(/\r\n/g, " ");
var propType = checker.typeToString(checker.getTypeOfSymbolAtLocation(memSymbol, memSymbol.valueDeclaration));
var dec = prop.decorators[0].getText(sourceFile);
if (dec.match(/@Input/)) {
@@ -127,23 +126,30 @@ function buildInputsTable(inputs) {
unist.makeTableRow([
unist.makeTableCell([unist.makeText("Name")]),
unist.makeTableCell([unist.makeText("Type")]),
unist.makeTableCell([unist.makeText("Default value")]),
// unist.makeTableCell([unist.makeText("Default value")]),
unist.makeTableCell([unist.makeText("Description")])
])
];
for (var i = 0; i < inputs.length; i++) {
var pName = inputs[i].name;
var pType = inputs[i].type;
var pDefault = inputs[i].defaultValue || "";
var pDesc = inputs[i].description || "";
var pDefault = inputs[i].init || "";
var pDesc = inputs[i].docText || "";
if (pDesc) {
pDesc = pDesc.trim().replace(/[\n\r]+/, " ");
//pDesc = pDesc.trim().replace(/[\n\r]+/, " ");
pDesc = pDesc.replace(/[\n\r]+/, " ");
}
var descCellContent = [unist.makeText(pDesc)];
if (pDefault) {
descCellContent.push(unist.makeHTML("<br/>"));
descCellContent.push(unist.makeText(" Default value: "));
descCellContent.push(unist.makeInlineCode(pDefault));
}
var cells = [
unist.makeTableCell([unist.makeText(pName)]),
unist.makeTableCell([unist.makeText(pType)]),
unist.makeTableCell([unist.makeText(pDefault)]),
unist.makeTableCell([unist.makeText(pDesc)])
unist.makeTableCell([unist.makeInlineCode(pType)]),
//unist.makeTableCell([unist.makeText(pDefault)]),
unist.makeTableCell(descCellContent)
];
rows.push(unist.makeTableRow(cells));
}
@@ -163,13 +169,13 @@ function buildOutputsTable(outputs) {
for (var i = 0; i < outputs.length; i++) {
var eName = outputs[i].name;
var eType = outputs[i].type;
var eDesc = outputs[i].description || "";
var eDesc = outputs[i].docText || "";
if (eDesc) {
eDesc = eDesc.trim().replace(/[\n\r]+/, ' ');
}
var cells = [
unist.makeTableCell([unist.makeText(eName)]),
unist.makeTableCell([unist.makeText(eType)]),
unist.makeTableCell([unist.makeInlineCode(eType)]),
unist.makeTableCell([unist.makeText(eDesc)])
];
rows.push(unist.makeTableRow(cells));

38
lib/config/DocProcessor/tools/tscProps.ts
View File

@@ -6,6 +6,7 @@ import * as program from "commander";
import * as heading from "mdast-util-heading-range";
import * as unist from "../unistHelpers";
import { JsxEmit } from "typescript";
export function initPhase(aggData) {
}
@@ -34,20 +35,20 @@ export function updatePhase(tree, pathname, aggData) {
let outTable = buildOutputsTable(outputs);
if (inTable) {
console.log("Made a props table");
heading(tree, "Properties", (before, section, after) => {
return [before, inTable, after];
});
}
if (outTable) {
console.log("Made an events table");
heading(tree, "Events", (before, section, after) => {
return [before, outTable, after];
});
}
}
}
return true;
}
@@ -81,7 +82,7 @@ function fixCompodocFilename(rawName: string) {
function getPropDocData(srcPath: string, docClassName: string, inputs: any[], outputs: any[]) {
let prog = ts.createProgram(program.args, {
let prog = ts.createProgram([srcPath], {
target: ts.ScriptTarget.ES5, module: ts.ModuleKind.CommonJS
});
@@ -135,7 +136,9 @@ function getPropDataFromClass(
initializer = prop.initializer.getText(sourceFile);
}
let doc = ts.displayPartsToString(memSymbol.getDocumentationComment());
let doc = ts.displayPartsToString(memSymbol.getDocumentationComment(checker));
doc = doc.replace(/\r\n/g, " ");
let propType = checker.typeToString(checker.getTypeOfSymbolAtLocation(memSymbol, memSymbol.valueDeclaration!));
let dec = prop.decorators[0].getText(sourceFile);
@@ -169,7 +172,7 @@ function buildInputsTable(inputs: any[]) {
unist.makeTableRow([
unist.makeTableCell([unist.makeText("Name")]),
unist.makeTableCell([unist.makeText("Type")]),
unist.makeTableCell([unist.makeText("Default value")]),
// unist.makeTableCell([unist.makeText("Default value")]),
unist.makeTableCell([unist.makeText("Description")])
])
];
@@ -177,18 +180,27 @@ function buildInputsTable(inputs: any[]) {
for (var i = 0; i < inputs.length; i++) {
var pName = inputs[i].name;
var pType = inputs[i].type;
var pDefault = inputs[i].defaultValue || "";
var pDesc = inputs[i].description || "";
var pDefault = inputs[i].init || "";
var pDesc = inputs[i].docText || "";
if (pDesc) {
pDesc = pDesc.trim().replace(/[\n\r]+/, " ");
//pDesc = pDesc.trim().replace(/[\n\r]+/, " ");
pDesc = pDesc.replace(/[\n\r]+/, " ");
}
var descCellContent = [unist.makeText(pDesc)];
if (pDefault) {
descCellContent.push(unist.makeHTML("<br/>"));
descCellContent.push(unist.makeText(" Default value: "));
descCellContent.push(unist.makeInlineCode(pDefault));
}
var cells = [
unist.makeTableCell([unist.makeText(pName)]),
unist.makeTableCell([unist.makeText(pType)]),
unist.makeTableCell([unist.makeText(pDefault)]),
unist.makeTableCell([unist.makeText(pDesc)])
unist.makeTableCell([unist.makeInlineCode(pType)]),
//unist.makeTableCell([unist.makeText(pDefault)]),
unist.makeTableCell(descCellContent)
];
rows.push(unist.makeTableRow(cells));
@@ -214,7 +226,7 @@ function buildOutputsTable(outputs: any[]) {
for (var i = 0; i < outputs.length; i++){
var eName = outputs[i].name;
var eType = outputs[i].type;
var eDesc = outputs[i].description || "";
var eDesc = outputs[i].docText || "";
if (eDesc) {
eDesc = eDesc.trim().replace(/[\n\r]+/, ' ');
@@ -222,7 +234,7 @@ function buildOutputsTable(outputs: any[]) {
var cells = [
unist.makeTableCell([unist.makeText(eName)]),
unist.makeTableCell([unist.makeText(eType)]),
unist.makeTableCell([unist.makeInlineCode(eType)]),
unist.makeTableCell([unist.makeText(eDesc)])
];

21
lib/config/DocProcessor/unistHelpers.js
View File

@@ -21,6 +21,13 @@ module.exports = {
};
},
makeStrong: function (content) {
return {
"type": "strong",
"children": content
};
},
makeHeading: function (caption, depth) {
return {
"type": "heading",
@@ -83,6 +90,20 @@ module.exports = {
};
},
makeInlineCode: function (codeText) {
return {
"type": "inlineCode",
"value": codeText
}
},
makeHTML: function (htmlText) {
return {
"type": "html",
"value": htmlText
};
},
isHeading: function (node) {
return node.type === "heading";
},

64
lib/content-services/document-list/components/document-list.component.ts
View File

@@ -70,140 +70,140 @@ export class DocumentListComponent implements OnInit, OnChanges, OnDestroy, Afte
@ContentChild(DataColumnListComponent) columnList: DataColumnListComponent;
/* Define a set of CSS styles styles to apply depending on the permission
* of the user on that node. See the [Permission Style model](permissions-style.model.md)
/** Define a set of CSS styles styles to apply depending on the permission
* of the user on that node. See the Permission Style model
* page for further details and examples.
*/
@Input()
permissionsStyle: PermissionStyleModel[] = [];
/* The default route for all the location-based columns (if declared). */
/** The default route for all the location-based columns (if declared). */
@Input()
locationFormat: string = '/';
/* Toggles navigation to folder content or file preview */
/** Toggles navigation to folder content or file preview */
@Input()
navigate: boolean = true;
/* User interaction for folder navigation or file preview. Valid values are "click" and "dblclick". */
/** User interaction for folder navigation or file preview. Valid values are "click" and "dblclick". */
@Input()
navigationMode: string = DocumentListComponent.DOUBLE_CLICK_NAVIGATION; // click|dblclick
/* Show document thumbnails rather than icons */
/** Show document thumbnails rather than icons */
@Input()
thumbnails: boolean = false;
/* Row selection mode. Can be null, `single` or `multiple`. For `multiple` mode,
/** Row selection mode. Can be null, `single` or `multiple`. For `multiple` mode,
* you can use Cmd (macOS) or Ctrl (Win) modifier key to toggle selection for multiple rows.
*/
@Input()
selectionMode: string = 'single'; // null|single|multiple
/* Toggles multiselect mode */
/** Toggles multiselect mode */
@Input()
multiselect: boolean = false;
/* Toggles content actions for each row */
/** Toggles content actions for each row */
@Input()
contentActions: boolean = false;
/* Position of the content actions dropdown menu. Can be set to "left" or "right". */
/** Position of the content actions dropdown menu. Can be set to "left" or "right". */
@Input()
contentActionsPosition: string = 'right'; // left|right
/* Toggles context menus for each row */
/** Toggles context menus for each row */
@Input()
contextMenuActions: boolean = false;
/* Custom image for empty folder */
/** Custom image for empty folder */
@Input()
emptyFolderImageUrl: string = './assets/images/empty_doc_lib.svg';
/* Toggle file drop support for rows (see **UploadDirective** for further details */
/** Toggle file drop support for rows (see Upload Directive for further details */
@Input()
allowDropFiles: boolean = false;
/* Defines default sorting. The format is an array of 2 strings `[key, direction]`
/** Defines default sorting. The format is an array of 2 strings `[key, direction]`
* i.e. `['name', 'desc']` or `['name', 'asc']`. Set this value only if you want to
* override the default sorting detected by the component based on columns.
*/
@Input()
sorting: string[];
/* The inline style to apply to every row. See
* [NgStyle](https://angular.io/docs/ts/latest/api/common/index/NgStyle-directive.html)
/** The inline style to apply to every row. See
* the Angular NgStyle
* docs for more details and usage examples.
*/
@Input()
rowStyle: string;
/* The CSS class to apply to every row */
/** The CSS class to apply to every row */
@Input()
rowStyleClass: string;
/* Toggles the loading state and animated spinners for the component. Used in
/** Toggles the loading state and animated spinners for the component. Used in
* combination with `navigate=false` to perform custom navigation and loading
* state indication.
*/
@Input()
loading: boolean = false;
/* Custom row filter */
/** Custom row filter */
@Input()
rowFilter: any | null = null;
/* Custom image resolver */
/** Custom image resolver */
@Input()
imageResolver: any | null = null;
/* The ID of the folder node to display or a reserved string alias for special sources */
/** The ID of the folder node to display or a reserved string alias for special sources */
@Input()
currentFolderId: string = null;
/* Currently displayed folder node */
/** Currently displayed folder node */
@Input()
folderNode: MinimalNodeEntryEntity = null;
/* Document list will show all the nodes contained in the NodePaging entity */
/** The Document list will show all the nodes contained in the NodePaging entity */
@Input()
node: NodePaging = null;
/* Default value is stored into user preference settings */
/** Default value is stored into user preference settings */
@Input()
maxItems: number;
/* element to skip over for pagination purpose */
/** Number of elements to skip over for pagination purposes */
@Input()
skipCount: number = 0;
/* Enable documentlist to work into infinite scrolling mode */
/** Set document list to work in infinite scrolling mode */
@Input()
enableInfiniteScrolling: boolean = false;
/* Emitted when the user clicks a list node */
/** Emitted when the user clicks a list node */
@Output()
nodeClick: EventEmitter<NodeEntityEvent> = new EventEmitter<NodeEntityEvent>();
/* Emitted when the user double-clicks a list node */
/** Emitted when the user double-clicks a list node */
@Output()
nodeDblClick: EventEmitter<NodeEntityEvent> = new EventEmitter<NodeEntityEvent>();
/* Emitted when the current display folder changes */
/** Emitted when the current display folder changes */
@Output()
folderChange: EventEmitter<NodeEntryEvent> = new EventEmitter<NodeEntryEvent>();
/* Emitted when the user acts upon files with either single or double click
/** Emitted when the user acts upon files with either single or double click
* (depends on `navigation-mode`). Useful for integration with the
* Viewer component.
*/
@Output()
preview: EventEmitter<NodeEntityEvent> = new EventEmitter<NodeEntityEvent>();
/* Emitted when the Document List has loaded all items and is ready for use */
/** Emitted when the Document List has loaded all items and is ready for use */
@Output()
ready: EventEmitter<NodePaging> = new EventEmitter();
/* Emitted when the API fails to get the Document List data */
/** Emitted when the API fails to get the Document List data */
@Output()
error: EventEmitter<any> = new EventEmitter();