@smartbit4all/ng-client 2.2.2 → 3.0.1

package/src/lib/smart-table/README.md

@@ -0,0 +1,667 @@
+# Smart Table
+
+## References
+
+These packages must be updated in case of a new version:
+
+-   [_@smartbit4all/dialog_](https://www.npmjs.com/package/@smartbit4all/dialog)
+-   [_@smartbit4all/view-context_](https://www.npmjs.com/package/@smartbit4all/view-context)
+
+---
+
+## How to use
+
+### Installation
+
+Go to your project, open the terminal and use the following command:
+
+    npm i @smartbit4all/table
+
+Then import it in the AppModule:
+
+`app.module.ts:`
+
+    import { SmartformModule } from '@smartbit4all/form';
+    ...
+    @NgModule({
+        declarations: [...]
+        imports: [
+            ...
+            SmartformModule,
+        ]
+        ...
+    })
+
+### Usage
+
+`example.component.html:`
+
+    <smarttable [smartTable]="exampletable"></smarttable>
+
+`example.component.ts:`
+
+    export class SelectFolderContentComponent {
+        exampleTable: SmartTable<T>;
+
+        constructor() {
+            this.setUpTable();
+        }
+
+        setUpTable(): void {
+            let tableData: T[] =
+            [
+                {
+                    tableData1: 'Table Data 1',
+                    tableData2: 'Table Data 2',
+                    tableData3: 'Table Data 3',
+                    optionsToBind: [ 'Button1', 'Button2' ]
+                },
+                ...
+            ];
+
+            // Simple table without tableData3
+            this.table = new SmartTable<T>(
+                tableData
+                SmartTableType.INHERITED,
+                [
+                    {
+                        label: 'Table Header 1',
+                        propertyName: 'tableData1'
+                    },
+                    {
+                        label: 'Table Header 2',
+                        propertyName: 'tableData2'
+                    },
+                    {
+                        label: '',
+                        propertyName: 'tableData3',
+                        isHidden: true
+                    },
+                ],
+            );
+
+            // Checkbox table without tableData3
+            this.table = new SmartTable<T>(
+                tableData
+                SmartTableType.CHECK_BOX,
+                [
+                    {
+                        label: 'Table Header 1',
+                        propertyName: 'tableData1'
+                    },
+                    {
+                        label: 'Table Header 2',
+                        propertyName: 'tableData2'
+                    },
+                    {
+                        label: '',
+                        propertyName: 'tableData3',
+                        isHidden: true
+                    },
+                ],
+            );
+
+            // Custom order
+            this.table = new SmartTable<T>(
+                tableData
+                SmartTableType.CHECK_BOX,
+                [
+                    {
+                        label: 'Table Header 3',
+                        propertyName: 'tableData3',
+                    },
+                    {
+                        label: 'Table Header 1',
+                        propertyName: 'tableData1'
+                    }
+                    {
+                        label: 'Table Header 2',
+                        propertyName: 'tableData2'
+                    },
+                ],
+            );
+
+            // Table with options
+            this.table = new SmartTable<T>(
+                tableData
+                SmartTableType.INHERITED,
+                [
+                    {
+                        label: 'Table Header 1',
+                        propertyName: 'tableData1'
+                    },
+                    {
+                        label: 'Table Header 2',
+                        propertyName: 'tableData2'
+                    }
+                ],
+    			undefined,
+    			undefined,
+    			[
+    				{
+    					label: 'Example option',
+    					callback: () => {},
+    					icon: 'remove'
+    				}
+    			]
+            );
+
+            // Table with menu button
+            this.table = new SmartTable<T>(
+                tableData
+                SmartTableType.INHERITED,
+                [
+                    {
+                        label: 'Table Header 1',
+                        propertyName: 'tableData1'
+                    },
+                    {
+                        label: 'Table Header 2',
+                        propertyName: 'tableData2'
+                    },
+                    {
+    					label: '',
+    					propertyName: 'my_menu',
+    					buttons: [
+    						{
+    							type: SmartTableButtonType.MENU,
+    							callback: this.doSomething.bind(this),
+    							icon: 'more_vert',
+    							menuItemButtonsPropertyName: 'optionsToBind',
+    							translator: this.buttonTranslator.bind(this),
+    							args: ['exampleArg']
+    						}
+    					]
+    				}
+                ],
+            );
+        }
+        buttonTranslator(value: string): string {
+            // return the readable version of value
+        }
+        doSomething(args: any, element: any, value: any): void { ... }
+    }
+
+**Example output for Simple table without tableData3:**
+| Table Header 1 | Table Header 2 |
+| -------------- | -------------- |
+| Table Data 1 | Table Data 2 |
+|
+
+**Example output for Checkbox table without tableData3:**
+
+| [ ] | Table Header 1 | Table Header 2 |
+| --- | -------------- | -------------- |
+| [x] | Table Data 1   | Table Data 2   |
+
+|
+
+**Example output for Custom order:**
+| Table Header 3 | Table Header 1 | Table Header 2 |
+| -------------- | -------------- | -------------- |
+| Table Data 3 | Table Data 1 | Table Data 1 |
+|
+
+**Example output for table with Options:**
+| Table Header 1 | Table Header 2 | Options |
+| -------------- | -------------- | --------|
+| Table Data 1 | Table Data 2 | ... -> Example option
+|
+
+In order to **get the selected values** of a Checkbox Smart Table, you can simply use the SmartTable<T> property:
+
+`example.component.ts:`
+
+    getSelectedRows(): void {
+        let selectedRows: SelectionModel<T> = this.table.selection;
+    }
+
+---
+
+## Version logs
+
+## @smartbit4all/table v1.5.20
+
+**Type: Update**
+
+Table menu fix.
+
+## @smartbit4all/table v1.5.19
+
+**Type: Update**
+
+The `SmartTableInterface` got a **isRowDisabledPropertyName** property which helps to disable rows with that property. The type of the property should be boolean.
+
+    export interface SmartTableInterface<T> {
+        ...
+        isRowDisabledPropertyName?: string;
+    }
+
+## @smartbit4all/table v1.5.18
+
+**Type: Update**
+
+Row and row double click is supported in tables with checkboxes.
+
+## @smartbit4all/table v1.5.16
+
+**Type: Update**
+
+The constructor of the `SmartTable` contains a config property which is a type of `SmartTableInterface<T>`.
+
+    export class SmartTable<T> implements SmartTableInterface<T> {
+        constructor(config: SmartTableInterface<T>) {
+            ...
+        }
+    }
+
+## @smartbit4all/table v1.5.2
+
+**Type: Bugfix**
+
+The **Cannot convert undefined or null to object** bug throwed by the `getPropertyNamesDeeply` function has been solved.
+
+## @smartbit4all/table v1.5.1
+
+**Type: Update**
+
+Double click events are supported.
+
+    export interface SmartTableInterface<T> {
+        ...
+        onRowDoubleClick?: (row: T) => void;
+    }
+
+## @smartbit4all/table v1.5.0
+
+**Type: Update**
+
+From now on the `SmartTable` can work with multi level objects.
+
+**Example:**
+
+    export interface MyInnerObject {
+        myInnerProperty: string;
+    }
+
+    export interface MyObject {
+        myProperty: MyInnerObject;
+    }
+
+    let exampleVariable: MyObject = {
+        myProperty: {
+            myInnerProperty: 'example :)'
+        }
+    }
+
+    ...
+
+    new SmartTable(
+        [exampleVariable],
+        SmartTableType.INHERITED,
+        [{
+                label: 'My inner property',
+                propertyName: 'myProperty.myInnerProperty'
+        }]
+    );
+
+## @smartbit4all/table v1.4.2
+
+**Type: Update**
+
+`@smartbit4all/icon` support.
+
+## @smartbit4all/table v1.4.1
+
+**Type: Feature**
+
+The `SmartTableButton` in `SmartTableButtonType.MENU` mode used to be identical in each rows since its descriptor was defined statically. This update makes available to use unique menus in each row depending on the row itself.
+
+    export interface SmartTableButton {
+        ...
+        menuItemButtonsPropertyName?: string;
+        translator?: (label: string) => string;
+    }
+
+## @smartbit4all/table v1.3.1
+
+**Type: Feature**
+
+From now on the max number of selectable rows can be determined.
+
+## @smartbit4all/table v1.3.0
+
+**Type: Update**
+
+The **SmartTable with checkbox** can use all the abilities of the normal table.
+
+## @smartbit4all/table v1.2.0
+
+**Type: Feature**
+
+From now on **expandable table row with custom component** is supported by the `Smarttable`. In order to use this new feature set the _expandable_ and _expandedComponent_ properties when creating the table.
+
+    export interface SmartTableInterface<T> {
+        ...
+        expandable?: boolean,
+        expandedComponent?: any
+    }
+
+The provided component has to have an `@Input()` called **rowData**, which gets the object of the selected row.
+
+`example.component.ts:`
+
+    export class ExampleComponent implements OnInit {
+        @Input('rowData') rowData: any;
+        ...
+    }
+
+## @smartbit4all/table v1.1.13
+
+**Type: Feature**
+
+The `SmartTableHeader` got a new property which helps i18n or just simply convert a string to another.
+
+    export interface SmartTableHeader {
+        ...
+        translator?: (value: string) => string;
+    }
+
+## @smartbit4all/table v1.1.9
+
+**Type: Feature**
+
+The `SmartTableHeader` got a new property which helps to insert an icon into a row.
+
+    export interface SmartTableHeader {
+        ...
+        icon?: SmartTableIcon
+    }
+
+    export interface SmartTableIcon {
+        icon: string;
+        color?: ThemePalette;
+        cssClass?: string;
+    }
+
+## @smartbit4all/table v1.1.8
+
+**Type: Feature**
+
+From now on hover effect can be applied to `Smarttable` rows by setting the **hover** property to **true**. The css class can be overriden in the styles.css of the client.
+
+`styles.css:`
+
+    .smartTableRowHover:hover { ... }
+
+## @smartbit4all/table v1.1.6
+
+**Type: Update**
+
+Smart-toolbar option has been removed.
+New inline button option added.
+
+Changes:
+
+    export interface SmartTableHeader {
+        propertyName: string;
+        label: string;
+        isHidden?: boolean;
+        properties?: SmartTableHeaderProperties;
+        buttons?: SmartTableButton[];   <======== new button option
+    }
+
+    export interface SmartTableButton {
+        icon?: string;
+        label?: string;
+        color?: ThemePalette;
+        type: SmartTableButtonType;
+        menuItemButtons?: SmartTableButton[];
+        callback?: (...args: any[]) => any;
+        args?: any[];
+    }
+
+    export enum SmartTableButtonType {
+        MENU = "MENU",
+        ICON = "ICON",
+        NORMAL = "NORMAL",
+        RAISED = "RAISED"
+    }
+
+How to use this version: add buttons property to the customHeaders array
+
+Menu button:
+
+    {
+            label: 'Operations',
+            propertyName: '',
+            buttons: [
+              {
+                label: Operation 1',
+                icon: '',
+                type: SmartTableButtonType.MENU,
+                menuItemButtons: [
+                  {
+                    label: 'Option 1',
+                    icon: '',
+                    callback: this.yourFunction.bind(this),
+                    type: SmartTableButtonType.NORMAL,
+                    args: ["Menu item"]
+                  }
+                ],
+            color: 'primary',
+            }
+        ]
+    },
+
+Normal or Icon button:
+
+    {
+            label: 'Operations',
+            propertyName: '',
+            buttons: [
+                {
+                label: Operation 1',
+                callback: this.yourFucntion.bind(this),
+                icon: '',
+                type: SmartTableButtonType.RAISED OR type: SmartTableButtonType.ICON
+                color: 'warn',
+                args: ["arg"]
+                }
+            ]
+    },
+
+## @smartbit4all/table v1.1.1
+
+**Type: Feature**
+
+This update contains a major change which makes the `SmartTable` to support custom datetimes and icons with conditions.
+
+The `SmartTableHeader` got a new property called **properties**:
+
+    export interface SmartTableHeader {
+        propertyName: string;
+        label: string;
+        isHidden?: boolean;
+        properties?: SmartTableHeaderProperties;
+    }
+
+With the `SmartTableHeaderProperties` you can set up the behaviour of any column.
+
+In case of a **DATE, TIME or DATETIME** you can use the **default formats** provided by the package, however, it **can be overrided by the dateFormat property**.
+
+With the icons property you can set any Material icon, moreover the icon can be set for a specific condition.
+
+    export interface SmartTableHeaderProperties {
+        type: SmartTableHeaderPropertyType;
+        dateFormat?: string;
+        icons?: SmartTableHeaderIcons[];
+    }
+
+The `SmartTableHeaderPropertyType` helps to set the desired output type.
+
+    export enum SmartTableHeaderPropertyType {
+        DATE,       // yyyy-MM-dd
+        TIME,       // hh:mm
+        DATETIME,   // yyyy-MM-dd hh:mm
+        ICON,
+    }
+
+The `SmartTableHeaderIcons` helps to give conditions to a specific icon. **Note that** you can use only **one** of the **conditions per SmartTableHeaderIcons object**.
+
+    export interface SmartTableHeaderIcons {
+        icon: string;
+        showIconIfValueEqualsWithString?: string;
+        showIconIfValueEqualsWithNumber?: number;
+        showIconIfValueSmallerThanNumber?: number;
+        showIconIfValueBiggerThanNumber?: number;
+        showIconIfValueBoolean?: boolean;
+    }
+
+## @smartbit4all/table v1.0.5
+
+**Type: Feature**
+
+From now on rows can be highlighted by clicking on them. To use this feature simply set these two properties:
+
+-   highlightOnRowClick: boolean
+-   highlightClass: string
+
+## @smartbit4all/table v1.0.4
+
+**Type: Feature**
+
+This version contains two updates which both makes the SmartTable more easy to use.
+
+-   with the `tableOptionButtonDirection` you can set the direction of the dots in the more button
+-   with the `onRowClick?: (row: T) => void;` you can set the onRowClick event with a custom function of yours
+
+## @smartbit4all/table v1.0.1
+
+**Type: Update**
+
+The package has been published.
+
+## @smartbit4all/table v0.1.7
+
+**Type: Feature**
+
+In this version the SmartTableComponent is able to use SmartToolbarComponent inside the table cells.
+
+**Modifications:**
+
+1.  SmartTableComponent html
+
+        <div *ngIf="header === 'button'">
+            <smart-toolbar [toolbar]="element[header]"></smart-toolbar>
+        </div>
+
+**Usage update:**
+
+To use this toolbar feature, the objects given in the tableRow array must have a SmartToolbar object inside a property named button.
+
+Checkout the usage of the SmartToolbar: [@smartbit4all/toolbar](https://www.npmjs.com/package/@smartbit4all/toolbar)
+
+## @smartbit4all/table v0.1.4 - v0.1.6
+
+**Type: Feature**
+
+The update contains a new feature to SmartTable.
+In this version the package is able to generate buttons into the table cell.
+
+Modifications:
+
+1.  SmartTableComponent html
+2.  New type represent a button:
+
+        export interface SmartTableButton {
+            lable: string;
+            icon?: string;
+            onClick?: (args?: any[]) => void;
+        }
+
+**Usage:**
+The elements of the tableRow array have to contain a button property which is a SmartTableButton.
+
+## @smartbit4all/table v0.1.2 - v0.1.3
+
+**Type: Bugfix**
+
+The `SmartTableHeader` had a bug which may have caused serious issues in case of a model property change.
+
+A function described by the `SmartTableInterface<T>` **has been removed** due to its lack of usage in the new version.
+
+    equalsIgnoreOrder: (a: string[], b: string[]) => boolean;
+
+Instead of comparing all the properties to each other, property by property comparison has been introduced.
+
+**Old code snippet:**
+
+    if (
+            this.customSmartTableHeaders &&
+            this.equalsIgnoreOrder(
+                this.tableHeaders,
+                this.customSmartTableHeaders.map((tableHeader) => tableHeader.propertyName)
+            )
+        ) {
+            this.customSmartTableHeaders.forEach((tableHeader) => { ... }
+        }
+
+**New code snippet:**
+
+    if (this.customSmartTableHeaders && this.customSmartTableHeaders.length) {
+        ...
+        this.customSmartTableHeaders.forEach((tableHeader) => {
+            if (originalHeaders.includes(tableHeader.propertyName) && !tableHeader.isHidden) { ... }
+        }
+    }
+
+## @smartbit4all/table v0.1.1
+
+**Type: Feature**
+
+With this update you can easily change the order of your smartTable with custom headers.
+
+A new **SmartTableHeader** type has been introduced, with which the order and visibility can be set.
+
+**The SmartTableHeader**
+
+    export interface SmartTableHeader {
+        propertyName: string;
+        label: string;
+        isHidden?: boolean;
+    }
+
+Example for creating a new SmartTable:
+
+    new SmartTable(
+        rows,
+        SmartTableType.INHERITED,
+        [
+            {
+                propertyName: 'uuid',
+                label: '',
+                isHidden: true
+            },
+            {
+                propertyName: 'name',
+                label: 'Full name',
+            }
+        ]
+    );
+
+## @smartbit4all/table v0.0.3
+
+**Type: Feature**
+
+Now images can be added to the SmartTable.
+
+In order to use this new ability, **the model**, _which is used in the SmartTable_, **must contain** an `img: string` property which is the **path of the image**.
+
+**Do not forget to add** the 'img' to the `customTableHeaders` at the **proper** position.
+
+## @smartbit4all/table v0.0.2
+
+**Type: Feature**
+
+Default version. The smarttable works.