Merge pull request #45 from DHTMLX/next

[update] the confirmDeletion parameter (missing feature)

Author: serhiipylypchuk1991

docs/api/config/js_kanban_cardshape_config.md

@@ -20,6 +20,7 @@ cardShape?: {
     attached?: boolean | { show?: boolean },
     cover?: boolean | { show?: boolean },
     comments?: boolean | { show?: boolean },
+    confirmDeletion?: boolean | { show?: boolean },
     start_date?: boolean | { 
         show?: boolean,
         format?: string 
@@ -107,6 +108,7 @@ To configure the card appearance, in the **cardShape** object you can specify th
 - `attached` - (optional) shows/hides an **attachment** field
 - `cover` - (optional) shows/hides a **card picture**
 - `comments` - (optional) shows/hides **comments** on cards
+- `confirmDeletion` - (optional) shows/hides the **confirmation dialog** that allows users to confirm or decline the card deletion
 - `start_date` - (optional) an object of parameters of a **start date** field
     - `show` - (optional) shows/hides a card start date
     - `format` - (optional) defines format of a card start date. The available parameters can be found [here](https://docs.dhtmlx.com/suite/calendar/api/calendar_dateformat_config/)
@@ -230,6 +232,7 @@ const defaultCardShape = {
     start_date: { show: false },
     end_date: { show: false },
     users: { show: false },
+    confirmDeletion: { show: true },
     priority: { 
         show: false,
         values: defaultPriorities
@@ -270,6 +273,7 @@ const cardShape = { // card settings
     attached: true,
     cover: false,
     comments: false,
+    confirmDeletion: false,
     color: {
         show: true,
         values: cardColors

docs/api/config/js_kanban_columnshape_config.md

@@ -34,7 +34,8 @@ columnShape?: {
     }),
     collapsedTemplate?: template(column => {
         return "The HTML template of the column header in the collapsed state";
-    })
+    }),
+    confirmDeletion?: boolean
 };
 ~~~
 
@@ -90,6 +91,7 @@ To configure the columns appearance, in the **columnShape** object you can speci
 - `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
+- `confirmDeletion` - (optional) shows/hides the **confirmation dialog** that allows users to confirm or decline the column deletion
 
 ### Default config
 
@@ -116,7 +118,8 @@ const columnShape = {
         show: true,
         items: getDefaultColumnMenuItems
     },
-    fixedHeaders: true
+    fixedHeaders: true,
+    confirmDeletion: true
 };
 ~~~
 
@@ -178,7 +181,8 @@ const columnShape = {
                         column.columnState?.cardsCount
                     })</div>
                 </div>`;
-    })
+    }),
+    confirmDeletion: true
 };
 
 new kanban.Kanban("#root", {

docs/api/config/js_kanban_editorshape_config.md

@@ -12,7 +12,7 @@ description: You can learn about the editorShape config in the documentation of
 
 ### Usage
 
-~~~jsx {3,8,27,40,50,71,86,95,106,115}
+~~~jsx {3,8,28,42,52,73,88,97,108,117,125}
 editorShape?: [
     {
         // common parameters for all types
@@ -126,15 +126,21 @@ editorShape?: [
             accept?: string,
             disabled?: boolean,
             multiple?: boolean,
-            folder?: boolean
+            folder?: boolean,
         },
 
         // for a "comments" type only 
         config?: {
             format?: string,
             placement?: "page" | "editor",
-            html?: boolean
-        }
+            html?: boolean,
+            confirmDeletion?: boolean
+        },
+
+        // for a "links" type only 
+        config?: {
+            confirmDeletion?: boolean
+        },
     }, { /* other control settings */ }
 ];
 ~~~
@@ -343,6 +349,12 @@ interface UploadEvent extends PointerEvent {
         - `"editor"` - comments will be displayed in the editor
         - `"page"` - comments will be displayed in a separate panel
     - `html` - (optional) - enables/disables using of the HTML markup in comments
+    - `confirmDeletion` - (optional) shows/hides the **confirmation dialog** that allows users to confirm or decline the comment deletion
+
+#### - Parameters for a "links" type
+
+- `config` - (optional) a configuration object of the **"links"** field. Here you can specify the following parameters:
+    - `confirmDeletion` - (optional) shows/hides the **confirmation dialog** that allows users to confirm or decline the link deletion
 
 :::info
 Unless you specify the editor settings via the `editorShape` property, the widget will apply a **defaultEditorShape** set of parameters!
@@ -408,7 +420,7 @@ const defaultEditorShape = [
 
 ### Example
 
-~~~jsx {6-29,34}
+~~~jsx {6-35,40}
 const users = [ // user data
     { id: 1, label: "John Smith", avatar: "../assets/user.jpg" },
     { id: 2, label: "Aaron Short" }
@@ -429,13 +441,19 @@ const editorShape = [ // editor settings
         config: {
             format: "%M %d",
             placement: "page",
-            html: true
+            html: true,
+            config: {
+                confirmDeletion: true
+            }
         }
     },
     {
         type: "links",
         key:"links",
-        label: "Links"
+        label: "Links",
+        config: {
+            confirmDeletion: true
+        }
     }
 ];
 

docs/api/config/js_kanban_links_config.md

@@ -42,7 +42,7 @@ If you want to load new data for links dynamically, you can use the [**parse()**
 
 ### Example
 
-~~~jsx {1-9,14}
+~~~jsx {1-8,13}
 const links = [
     {
         id: 1,

docs/api/config/js_kanban_rowshape_config.md

@@ -26,7 +26,8 @@ rowShape?: {
             }, {...} // other item data
         ] | ({ row, rowIndex, rows, store }) => array | boolean
     },
-    css?: (row, cards) => string
+    css?: (row, cards) => string,
+    confirmDeletion?: boolean
 };
 ~~~
 
@@ -82,6 +83,7 @@ To configure the rows appearance, in the **rowShape** object you can specify the
     :::
 
 - `css` - a function returns a css class that applies to rows conditionally
+- `confirmDeletion` - (optional) shows/hides the **confirmation dialog** that allows users to confirm or decline the row deletion
 
 ### Default config
 
@@ -106,13 +108,14 @@ const rowShape = {
     menu: {
         show: true,
         items: getDefaultRowMenuItems
-    }
+    },
+    confirmDeletion: true
 };
 ~~~
 
 ### Example
 
-~~~jsx {10-42,48}
+~~~jsx {10-43,48}
 const changeRowColor = (row, cssClass) => board.updateRow({ 
     id: row.id,
     row: {
@@ -153,7 +156,8 @@ const rowShape = {
             ]
         }
     },
-    css: (row, cards) => row.id == "task" && cards.length < 3 ? "green" : "red"
+    css: (row, cards) => row.id == "task" && cards.length < 3 ? "green" : "red",
+    confirmDeletion: false
 };
 
 new kanban.Kanban("#root", {

docs/guides/configuration.md

@@ -59,6 +59,7 @@ The board of Kanban consists of the *cards* distributed into *columns* and *rows
 
 - a card cover (*preview image*) via the `cover: boolean` config
 - a card comment(s) via the `comments: boolean` config
+- a confirmation dialog to confirm or decline the card deletion via the `confirmDeletion: boolean` config
 - a card vote(s) via the `votes: boolean | { show: boolean, clicable: true }` config
 - a card assignment (users) via the `users: boolean | { show: boolean, values: object, maxCount: number | false }` config
 
@@ -365,7 +366,7 @@ new kanban.Kanban("#root", {
 
 The editor field of **comments** type can be set in the following way:
 
-~~~jsx {3-12}
+~~~jsx {3-13}
 new kanban.Kanban("#root", {
     editorShape: [
        {
@@ -376,7 +377,8 @@ new kanban.Kanban("#root", {
                 dateFormat: "%M %d",
                 placement: "page", // or "editor"
                 html: true,
-            },
+                confirmDeletion: true
+            }
         },
         // settings of other fields
     ]
@@ -387,20 +389,23 @@ new kanban.Kanban("#root", {
 
 The editor field of **links** type can be set in the following way:
 
-~~~jsx {3-7}
+~~~jsx {3-10}
 new kanban.Kanban("#root", {
     editorShape: [
         {
             type: "links",
             key: "links",
             label: "Links",
+            config: {
+                confirmDeletion: true
+            }
         },
         // settings of other fields
     ]
 });
 ~~~
 
-### Linking editor fields to card fields
+### Binding editor fields to card fields
 
 :::info
 To link the editor field to the corresponding card field, you need to provide special **key** in the object of [`editorShape`](api/config/js_kanban_editorshape_config.md) property (`key: "editor_field_key"`). The value of this key needs to be set to *true* in the [`cardShape`](api/config/js_kanban_cardshape_config.md) property (for built-in card fields) or specified in the **headerFields** array (for custom card fields). You can provide the initial data of any field via this key as well.
@@ -506,7 +511,7 @@ new kanban.Toolbar("#toolbar", { api: board.api });
 
 You can manage (*hide/show/customize*) the Toolbar controls using the **items** property:
 
-~~~jsx {6-15}
+~~~jsx {6-51}
 // create Kanban
 const board = new kanban.Kanban("#root", {...});