Merge pull request #36 from DHTMLX/sp_next_v2.0

Whats new before release v1.6

Author: serhiipylypchuk1991

docs/api/config/js_kanban_cardshape_config.md

@@ -54,7 +54,8 @@ cardShape?: {
                 avatar?: string
             },
             {...} // other users data
-        ]
+        ],
+        maxCount?: number | false
     },
     priority?: boolean | {
         show?: boolean,
@@ -67,7 +68,10 @@ cardShape?: {
             {...} // other priorities data
         ]
     },    
-    votes?: boolean | { show?: boolean }, 
+    votes?: boolean | { 
+        show?: boolean,
+        clickable?: boolean
+    }, 
     css?: (card) => string,
     headerFields?: [
         {
@@ -151,6 +155,10 @@ To configure the card appearance, in the **cardShape** object you can specify th
         - `id` - (required) a user **ID**
         - `label` - (optional) a user name
         - `avatar` - (optional) a path to the user avatar
+    - `maxCount` - (optional) a maximum count of users displayed on the card (or ***false***)
+
+    You can set the `maxCount` property to the number of users to be displayed on the card.
+    If you set the `maxCount` property to `false`, you can see all the assigned user on the card.
 
     :::info
     The ***users*** field is disabled by default. To enable it, you need to set the `show` parameter to `true` and provide the corresponding users data via the `values` parameter. To assign new users via the editor, you need to configure the corresponding control via the [`editorShape`](api/config/js_kanban_editorshape_config.md#--parameters-for-combo-select-and-multiselect-types) property. Use the ***select*** type for assigning one or user or the ***multiselect*** type for assigning several users.
@@ -162,7 +170,8 @@ To configure the card appearance, in the **cardShape** object you can specify th
             values: [
                 { id: 1, label: "John Smith", avatar: "../assets/user.jpg" },
                 { id: 2, label: "Aaron Short" }
-            ]
+            ],
+            maxCount: 4 // only 4 users can be displayed on the card
         }
     }
     ~~~
@@ -174,7 +183,9 @@ To configure the card appearance, in the **cardShape** object you can specify th
         - `id` - (required) a priority **ID**
         - `label` - (optional) a priority name
         - `color` - (required) a valid HEX code
-- `votes` - (optional) shows/hides **votes** on cards. If **true**, the corresponding control will be displayed in the editor
+- `votes` - (optional) specifies the **votes** functionality
+    - `show` - (optional) shows/hides the vote icon on the card and in the editor
+    - `clickable` - (optional) - makes the vote icon on the card clickable. If `true`, users can vote for the card using the vote icon on this card. Otherwise, users can vote for the card using the vote icon in the editor only
 - `css` - a function returns a css class that applies to cards conditionally
 - `headerFields` - (optional) an array of objects with the **custom fields** data. Here you can specify the following parameters:
     - `key` - (required) a key of the custom field. It is used when configuring the Editor via the [editorShape](../js_kanban_editorshape_config) property
@@ -224,19 +235,22 @@ const defaultCardShape = {
         show: false,
         values: defaultColors
     },
-    users: false,
+    users: {
+        show: false,
+        maxCount: 2
+    },
     priority: {
         show: false,
         values: defaultPriorities
     },
     comments: false,
-    votes: false,
+    votes: false
 };
 ~~~
 
 ### Example
 
-~~~jsx {14-45,50}
+~~~jsx {14-49,54}
 const users = [ // users data
     { id: 1, label: "John Smith", avatar: "../assets/user.jpg" },
     { id: 2, label: "Aaron Short" }
@@ -266,13 +280,17 @@ const cardShape = { // card settings
     },
     users: {
         show: true,
-        values: users
+        values: users,
+        maxCount: false
     },
     priority: {
         show: true,
         values: cardPriority
     },
-    votes: true,
+    votes: {
+        show: true,
+        clickable: true
+    },
     css: (card) => card.type == "feature" ? "green" : "red",
     headerFields: [
         { // custom field
@@ -294,11 +312,12 @@ new kanban.Kanban("#root", {
 **Change log:**
 - The ***comments***, ***css*** and ***votes*** parameters were added in v1.4
 - The ***menu.items[0].label*** parameter was replaced by the ***menu.items[0].text*** parameter in v1.4
+- The ***users.maxCount*** and ***votes.clickable*** parameters were added in v1.6
 
 **Related articles:** [Configuration](../../../guides/configuration#cards)
 
 **Related samples:**
-
 - [Kanban. Swimlanes, comments, votes](https://snippet.dhtmlx.com/5hcx01h4?tag=kanban)
 - [Kanban. Highlighting outdated and active tasks](https://snippet.dhtmlx.com/7fvc3rr1?tag=kanban)
-- [Kanban. Styling cards](https://snippet.dhtmlx.com/qu6rpktk?tag=kanban)
+- [Kanban. Styling cards](https://snippet.dhtmlx.com/qu6rpktk?tag=kanban)
+- [Kanban. Unlimited user assignments per task](https://snippet.dhtmlx.com/w205dvzg?tag=kanban)

docs/api/config/js_kanban_columnshape_config.md

@@ -28,7 +28,13 @@ columnShape?: {
         ] | ({ column, columnIndex, columns, store }) => array | boolean
     },
     fixedHeaders?: boolean,
-    css?: (column, cards) => string
+    css?: (column, cards) => string,
+    headerTemplate?: template(column => {
+        return "The HTML template of the column header in the expanded state";
+    }),
+    collapsedTemplate?: template(column => {
+        return "The HTML template of the column header in the collapsed state";
+    })
 };
 ~~~
 
@@ -80,8 +86,10 @@ To configure the columns appearance, in the **columnShape** object you can speci
     ~~~
     :::
 
-- `fixedHeaders` - (optional) freezes column headers during vertical scroll (*true* by default). Scroll must be enabled in Kanban itself (height must be limited).
-- `css` - (optional) a function returns a css class that applies to columns conditionally
+- `fixedHeaders` - (optional) freezes column headers during vertical scroll (*true* by default). Scroll must be enabled in Kanban itself (height must be limited)
+- `css` - (optional) a function that returns a css class that applies to columns conditionally
+- `headerTemplate` - (optional) the HTML template of the column header in the expanded state
+- `collapsedTemplate` - (optional) the HTML template of the column header in the collapsed state
 
 ### Default config
 
@@ -114,7 +122,7 @@ const columnShape = {
 
 ### Example
 
-~~~jsx {1-30,36}
+~~~jsx {1-58,64}
 const columnShape = {
     menu: {
         show: true,
@@ -143,7 +151,34 @@ const columnShape = {
         ]
     },
     fixedHeaders: false,
-    css: (column, cards) => column.id == "inprogress" && cards.length < 5 ? "green" : "red"
+    css: (column, cards) => column.id == "inprogress" && cards.length < 5 ? "green" : "red",
+    headerTemplate: template(column => {
+        return `<div class="wx-collapse-icon" data-action=${"collapse"}>
+                    <i class=${column.column.collapsed ? "wxi-angle-right" : "wxi-angle-left"}></i>
+                </div>
+                ${
+                    !column.column.collapsed
+                        ?   `<div class="wx-label" data-action="rename">
+                                ${escapeHTML(column.column.label)}
+                                (${column.columnState.cardsCount})
+                            </div>`
+                        : ""
+                }
+                ${
+                    !column.column.collapsed
+                        ?   `<div class="wx-menu" data-menu-id={column.id}>
+                                <i class="wxi-dots-h"></i>
+                            </div>`
+                        : ""
+                }`;
+    }),
+    collapsedTemplate: template(column => {
+        return `<div class="wx-collapsed-label">
+                    <div class="wx-label-text">${escapeHTML(column.column.label)} (${
+                        column.columnState?.cardsCount
+                    })</div>
+                </div>`;
+    })
 };
 
 new kanban.Kanban("#root", {
@@ -159,9 +194,11 @@ new kanban.Kanban("#root", {
 - The ***css*** parameter was added in v1.4
 - The ***menu.items[0].label*** parameter was replaced by the ***menu.items[0].text*** parameter in v1.4
 - The ***fixedHeaders*** parameter was added in v1.5
+- The ***headerTemplate*** and ***collapsedTemplate*** parameters were added in v1.6
 
 **Related articles:** [Configuration](../../../guides/configuration)
 
 **Related samples:**
 - [Kanban. Changing color of column via custom menu](https://snippet.dhtmlx.com/fnlvd2g5?tag=kanban)
 - [Kanban. Fixed headers, lazy rendering and column scroll](https://snippet.dhtmlx.com/xez9ghqq?tag=kanban)
+- [Kanban. Template for column headers](https://snippet.dhtmlx.com/gq2saz9c?tag=kanban)

docs/api/config/js_kanban_editor_config.md

@@ -15,36 +15,44 @@ description: You can learn about the editor config in the documentation of the D
 ~~~jsx {}
 editor?: {
     autoSave?: boolean,
-    debounce?: number
+    debounce?: number,
+    placement?: "sidebar" | "modal"
 }; 
 ~~~
 
 ### Parameters
 
 - `autoSave` - (optional) enables/disables an autosave mode of editor
 - `debounce` - (optional) time of delay of autosaving data (works with the ***autoSave: true*** parameter only)
+- `placement` - (optional) specifies the editor placement. You can set the following values:
+    - `"sidebar"` - displays the editor as a sidebar
+    - `"modal"` - displays the editor as a modal window
 
 ### Default config
 
 ~~~jsx {}
 editor: {
     autoSave: true,
     debounce: 100
+    placement: "sidebar"
 }
 ~~~
 
 ### Example
 
-~~~jsx {4-7}
+~~~jsx {4-8}
 new kanban.Kanban("#root", {
     columns,
     cards,
     editor: {
         autoSave: true,
-        debounce: 2000
+        debounce: 2000,
+        placement: "modal"
     }
     // other parameters
 });
 ~~~
 
-**Change log:** The property was added in v1.3
+**Change log:** The `placement` parameter was added in v1.6
+
+**Related samples:** [Kanban. Opening the editor in a modal window](https://snippet.dhtmlx.com/vt6pe7qz?tag=kanban)

docs/api/config/js_kanban_theme_config.md

@@ -15,7 +15,7 @@ description: You can learn about the theme config in the documentation of the DH
 ~~~jsx {}
 theme?: {
     name: string, // "material" (default) | "willow" | "willow-dark"
-    fonts: boolean
+    fonts?: boolean
 };
 ~~~
 
@@ -62,7 +62,7 @@ To configure the **theme**, you can use the following parameters.
     - `fonts` - (optional) enables/disables fonts loading from the CDN (wxi font)
 
 :::tip
-You can also apply the **Willow** and **Willow-Dark** themes as well. To change the current theme dynamically, you can use the [**setConfig()**](../../methods/js_kanban_setconfig_method) method.
+You can also apply the **Willow** and **Willow-Dark** themes as well. To change the current theme dynamically, you can use the [`setTheme()`](../../methods/js_kanban_settheme_method) method.
 :::
 
 ### Default config

docs/api/config/toolbar_items_config.md

@@ -21,9 +21,14 @@ items?: [
             {
                 id: string,
                 label: string,
-                searchRule?: (card, value, by) => {} // returns a boolean value 
+                searchRule?: (card, value, by) => {
+                    return boolean
+                }
             }, {...}
-        ]
+        ],
+        resultTemplate?: template(searchResult => {
+            return "The HTML template of the search result";
+        }) 
     },
     "sort" | {
         // sort parameters
@@ -34,8 +39,7 @@ items?: [
                 by?: string, // by?: ((card: object) => any),
                 dir?: "asc" | "desc"
             }, {...}
-        ]
-        
+        ]  
     },
     "spacer",
     "undo",
@@ -57,18 +61,21 @@ In the **items** array you can specify the following parameters:
 - `type` - (required) a type of control (*"search"*)
 - `options` - (optional) an array of objects, that define the search parameters. For each object (*search option*) you can specify the following parameters:
     - `id` - (required) a key of card field, by which the cards will be searched
-    - `label` - (required) a name of option, used in  a dropdown list of the searchbar selector
+    - `label` - (required) a name of option, used in  a dropdown list of the search bar selector
     - `searchRule` (optional) - a custom function that allows defining search rules. It takes the following arguments:
         - ***card*** - an object of the card data
-        - ***value*** - a searched value, specified in the searchbar
+        - ***value*** - a searched value, specified in the search bar
         - ***by*** - a key of card field, by which the cards will be searched
+- `searchResult` - (optional) a template for displaying the custom search result
 
 ~~~jsx
 items: [
     "search", // default searchbar
     // other controls
 ]
+
 // or 
+
 items: [
     { // custom searchbar
         type: "search",
@@ -85,7 +92,13 @@ items: [
                     return date?.toString().includes(value);
                 }
             }
-        ]
+        ],
+        resultTemplate: kanban.template(searchResult => {
+            return `<div class="list-item">
+                <div class="list-item-text">${searchResult.result.label}</div>
+                ${searchResult.result.description ? `<div class="list-item-text item-description">${searchResult.result.description}</div>` : ""}
+            </div>`
+        })
     },
     // other controls
 ]
@@ -138,7 +151,7 @@ items: [
 
 ### Example
 
-~~~jsx {8-16}
+~~~jsx {8-24}
 const board = new kanban.Kanban("#root", {
     columns,
     cards
@@ -147,21 +160,33 @@ const board = new kanban.Kanban("#root", {
 new kanban.Toolbar("#toolbar", {
     api: board.api,
     items: [
-        "search",
+        {
+            type: "search",
+            resultTemplate: kanban.template(searchResult => {
+                return `<div class="list-item">
+                            <div class="list-item-text">${searchResult.result.label}</div>
+                            ${searchResult.result.description ? `<div class="list-item-text item-description">${searchResult.result.description}</div>` : ""}
+                        </div>`
+            })
+        },
         "spacer",
         "sort",
         "undo",
         "redo", 
         "addColumn",
         "addRow"
-    ],
+    ]
 });
 ~~~
 
 **Change log:**
+
 - The *"Undo"* and *"Redo"* controls were added in v1.3
 - The ***items.options[0].label*** parameter of the **sort** control was replaced by the ***items.options[0].text*** parameter in v1.4
+- The ***items.searchResult*** parameter of the **"search"** control was added in v1.6
 
 **Related articles:** [Configuration](../../../guides/configuration#toolbar) and [Customization](../../../guides/customization#custom-toolbar)
 
-**Related sample:** [Kanban. Custom toolbar](https://snippet.dhtmlx.com/s5r5h4ju?tag=kanban)
+**Related sample:**
+- [Kanban. Custom toolbar](https://snippet.dhtmlx.com/s5r5h4ju?tag=kanban)
+- [Kanban. Customization of suggestions in search results](https://snippet.dhtmlx.com/2uo2f5mf?tag=kanban)