[update] changes after review

DHTMLX · Jun 11, 2024 · 98b38c0 · 98b38c0
1 parent 5d4e742
commit 98b38c0
Show file tree

Hide file tree

Showing 5 changed files with 103 additions and 65 deletions.
diff --git a/docs/guides/integration_with_angular.md b/docs/guides/integration_with_angular.md
@@ -37,7 +37,7 @@ cd my-angular-todo-app
 Run the app with the following commands:
 
 ~~~json
-yarn install
+yarn
 yarn start
 ~~~
 
@@ -61,13 +61,13 @@ Open the file and import To Do List source files. Note that:
 
 - if you use PRO version and install the To Do List package from a local folder, the imported paths look like this:
 
-~~~jsx
+~~~jsx title="todo.components.ts"
 import { ToDo } from 'dhx-todolist-package';
 ~~~
 
 - if you use the trial version of To Do List, specify the following paths:
 
-~~~jsx
+~~~jsx title="todo.components.ts"
 import { ToDo } from '@dhx/trial-todolist';
 ~~~
 
@@ -80,27 +80,28 @@ To display To Do List on the page, you need to set the container to render the c
 ~~~jsx title="todo.component.ts"
 import { ToDo } from '@dhx/trial-todolist';
 import { Component, ElementRef, OnInit, ViewChild, OnDestroy} from '@angular/core';
-
+// ...
 @Component({
     selector: 'todo',
     template: '<div #container></div>'
 })
 export class ToDoComponent implements OnInit {
     @ViewChild('container', { static: true }) container!: ElementRef;
+    // ...
 }
 ~~~
 
 Then you need to render our To Do List in the container. To do that, use the `ngOnInit()` method of Angular:
 
-~~~jsx {6-9} title="todo.component.ts"
+~~~jsx {7-9} title="todo.component.ts"
+// ...
 export class ToDoComponent implements OnInit, OnDestroy {
     @ViewChild('container', { static: true }) container!: ElementRef;
 
     private _todo!: ToDo;
 
     ngOnInit() {
-        const todo = new ToDo(this.container.nativeElement,{});
-        this._todo = todo;
+        this._todo = new ToDo(this.container.nativeElement,{});
     }
 
     ngOnDestroy() {
@@ -122,15 +123,15 @@ export function getData() {
             id: "temp://1652991560212",
             project: "introduction",
             text: "Greetings, everyone! \u{1F44B} \nI'm DHTMLX To Do List.",
-            priority: 1,
+            priority: 1
         },
         {
             id: "1652374122964",
             project: "introduction",
             text: "You can assign task performers and due dates using the menu.",
             assigned: ["user_4", "user_1", "user_2", "user_3"],
             due_date: "2033-03-08T21:00:00.000Z",
-            priority: 2,
+            priority: 2
         },
         // ...
     ];
@@ -139,7 +140,7 @@ export function getData() {
             id: "user_1",
             label: "Don Smith",
             avatar:
-                "https://snippet.dhtmlx.com/codebase/data/common/img/02/avatar_61.jpg",
+                "https://snippet.dhtmlx.com/codebase/data/common/img/02/avatar_61.jpg"
         },
         // ...
     ];
@@ -159,32 +160,34 @@ export function getData() {
 
 Then open the ***todo.component.ts*** file. Import the file with data and specify the corresponding data properties to the configuration object of To Do List within the `ngOnInit()` method, as shown below.
 
-~~~jsx {2,6-9} title="todo.component.ts"
+~~~jsx {2,5,7-9} title="todo.component.ts"
 // importing the data file
 import { getData } from './data';
-
+// ...
 ngOnInit() {
     const { users, tasks, projects } = getData();
-    const todo = new ToDo(this.container.nativeElement, {
+    this._todo = new ToDo(this.container.nativeElement, {
         users,
         tasks,
         projects
     });
 }
+// ...
 ~~~
 
 You can also use the [`parse()`](/api/methods/parse_method/) method inside the `ngOnInit()` method of Angular to load data into To Do List. It will reload data on each applied change.
 
-~~~jsx {8} title="todo.component.ts"
+~~~jsx {5,8} title="todo.component.ts"
 // importing the data file
 import { getData } from './data';
+// ...
+    ngOnInit() {
+        const { users, tasks, projects } = getData();
+        const todo = new ToDo(this.container.nativeElement, {});
 
-ngOnInit() {
-    const { users, tasks, projects } = getData();
-    const todo = new ToDo(this.container.nativeElement, {});
-
-    todo.parse({users, tasks, projects});
-}
+        todo.parse({users, tasks, projects});
+    }
+// ...
 ~~~
 
 Now the To Do List component is ready. When the element will be added to the page, it will initialize the To Do List object with data. You can provide necessary configuration settings as well. Visit our [To Do List API docs](/api/overview/configs_overview/) to check the full list of available properties.
@@ -196,13 +199,14 @@ When a user makes some action in the To Do List, it invokes an event. You can us
 Open the **todo.component.ts** file and complete the `ngOnInit()` method as in:
 
 ~~~jsx {4-6} title="todo.component.ts"
+// ...
 ngOnInit() {
-    const todo = new ToDo(this.container.nativeElement,{ /*...*/ });
-
-    todo.api.on("add-task", (obj) => {
-        console.log("A new task is added", obj);
+    // ... ToDoList initialization, data loading, and other...
+    this._todo.api.on("add-task", ({ id }) => {
+        console.log("A new task is added", id);
     });
 }
+// ...
 ~~~
 
 ### Step 3. Adding To Do List into the app

diff --git a/docs/guides/integration_with_react.md b/docs/guides/integration_with_react.md
@@ -37,7 +37,7 @@ Install dependencies and start the dev server. For this, use a package manager:
 - if you use [**yarn**](https://yarnpkg.com/), run the following commands:
 
 ~~~json
-yarn install
+yarn
 yarn dev
 ~~~
 
@@ -96,7 +96,7 @@ import '@dhx/trial-todolist/dist/todo.css';
 // eslint-disable-next-line react/prop-types
 const ToDoComponent = () => {
     let container = useRef();
-
+    // ...
     return <div ref={container} style={{ width: "100%", height: "100%" }}></div>;
 };
 
@@ -187,7 +187,8 @@ export default App;
 
 Open the ***ToDo.jsx*** file and apply the passed **props** to the To Do List configuration object:
 
-~~~jsx {4,8-10} title="ToDo.jsx"
+~~~jsx {5,9-11} title="ToDo.jsx"
+// ...
 const ToDoComponent = ({ props }) => {
     let container = useRef();
 
@@ -210,7 +211,8 @@ export default ToDoComponent;
 
 You can also use the [`parse()`](/api/methods/parse_method/) method inside the `useEffect()` method of React to load data into To Do List:
 
-~~~jsx {4,9} title="ToDo.jsx"
+~~~jsx {5,10} title="ToDo.jsx"
+// ...
 const ToDoComponent = ({ props }) => {
     let container = useRef();
 
@@ -226,6 +228,8 @@ const ToDoComponent = ({ props }) => {
 
     return <div ref={container}></div>;
 };
+
+export default ToDoComponent;
 ~~~
 
 The `todo.parse(data);` line provides data reloading on each applied change.
@@ -239,6 +243,7 @@ When a user makes some action in the To Do List, it invokes an event. You can us
 Open **ToDo.jsx** and complete the `useEffect()` method in the following way:
 
 ~~~jsx {4-6} title="ToDo.jsx"
+// ...
 useEffect(() => {
     const todo = new ToDo(container.current, {});
 
@@ -247,7 +252,8 @@ useEffect(() => {
     });
 
     return () => (container.current.innerHTML = "");
-  }, []);
+}, []);
+// ...
 ~~~
 
 ### Step 3. Adding To Do List into the app

diff --git a/docs/guides/integration_with_svelte.md b/docs/guides/integration_with_svelte.md
@@ -45,7 +45,7 @@ Install dependencies and run the app. For this, use a package manager:
 - if you use [**yarn**](https://yarnpkg.com/), run the following commands:
 
 ~~~json
-yarn install
+yarn
 yarn dev
 ~~~
 
@@ -77,17 +77,21 @@ Open the ***ToDo.svelte*** file and import To Do List source files. Note that:
 - if you use PRO version and install the To Do List package from a local folder, the import paths look like this:
 
 ~~~html title="ToDo.svelte"
-import { ToDo } from 'dhx-todolist-package';
-import 'dhx-todolist-package/dist/todo.css';
+<script>
+    import { ToDo } from 'dhx-todolist-package';
+    import 'dhx-todolist-package/dist/todo.css';
+</script>
 ~~~
 
 Note that depending on the used package, the source files can be minified. In this case make sure that you are importing the CSS file as **todo.min.css**.
 
 - if you use the trial version of To Do List, specify the following paths:
 
 ~~~html title="ToDo.svelte"
-import { ToDo } from '@dhx/trial-todolist';
-import '@dhx/trial-todolist/dist/todo.css';
+<script>
+    import { ToDo } from '@dhx/trial-todolist';
+    import '@dhx/trial-todolist/dist/todo.css';
+</script>
 ~~~
 
 In this tutorial you can see how to configure the **trial** version of To Do List.
@@ -96,20 +100,21 @@ In this tutorial you can see how to configure the **trial** version of To Do Lis
 
 To display To Do List on the page, you need to set the container to render the component inside. Check the code below:
 
-~~~html {5,8} title="ToDo.svelte"
+~~~html {5,9} title="ToDo.svelte"
 <script>
     import { ToDo } from "@dhx/trial-todolist";
     import "@dhx/trial-todolist/dist/todo.css"
     
     let container;
+    // ...
 </script>
 
 <div bind:this={container} style="width: 100%; height: 100%;"></div>
 ~~~
 
 Then you need to render To Do List in the container. Use the `new ToDo()` constructor inside the `onMount()` method of Svelte, to initialize To Do List inside of the container:
 
-~~~html {4,8-10} title="ToDo.svelte"
+~~~html {4,8-12} title="ToDo.svelte"
 <script>
     import { ToDo } from "@dhx/trial-todolist";
     import "@dhx/trial-todolist/dist/todo.css";
@@ -118,7 +123,9 @@ Then you need to render To Do List in the container. Use the `new ToDo()` constr
     let container;
 
     onMount(() => {
-        new ToDo(container,{}); 
+        new ToDo(container,{
+            // ...
+        }); 
     });
 </script>
 
@@ -136,15 +143,15 @@ export function getData() {
             id: "temp://1652991560212",
             project: "introduction",
             text: "Greetings, everyone! \u{1F44B} \nI'm DHTMLX To Do List.",
-            priority: 1,
+            priority: 1
         },
         {
             id: "1652374122964",
             project: "introduction",
             text: "You can assign task performers and due dates using the menu.",
             assigned: ["user_4", "user_1", "user_2", "user_3"],
             due_date: "2033-03-08T21:00:00.000Z",
-            priority: 2,
+            priority: 2
         },
         // ...
     ];
@@ -153,7 +160,7 @@ export function getData() {
             id: "user_1",
             label: "Don Smith",
             avatar:
-                "https://snippet.dhtmlx.com/codebase/data/common/img/02/avatar_61.jpg",
+                "https://snippet.dhtmlx.com/codebase/data/common/img/02/avatar_61.jpg"
         },
         // ...
     ];
@@ -175,7 +182,7 @@ Then open the ***App.svelte*** file, import data, and pass it into the new creat
 
 ~~~html {3-4,7} title="App.svelte"
 <script>
-    // ...
+    import ToDo from "./ToDo.svelte";
     import { getData } from "./data.js";
     const { users, tasks, projects } = getData();
 </script>
@@ -185,7 +192,7 @@ Then open the ***App.svelte*** file, import data, and pass it into the new creat
 
 Open the ***ToDo.svelte*** file and apply the passed **props** to the To Do List configuration object:
 
-~~~html {3-5,10-12} title="App.svelte"
+~~~html {3-5,10-12} title="ToDo.svelte"
 <script>
     // ...
     export let users;
@@ -220,7 +227,8 @@ You can also use the [`parse()`](/api/methods/parse_method/) method inside the `
         todo.parse({ users, tasks, projects });
     });
 </script>
-<!-- ... -->
+
+<div bind:this={container} style="width: 100%; height: 100%;"></div>
 ~~~
 
 Now the To Do List component is ready. When the element will be added to the page, it will initialize the To Do List object with data. You can provide necessary configuration settings as well. Visit our [To Do List API docs](/api/overview/configs_overview/) to check the full list of available properties.
@@ -231,13 +239,18 @@ When a user makes some action in the To Do List, it invokes an event. You can us
 
 Open ***ToDo.svelte*** and complete the `onMount()` method as in:
 
-~~~jsx title="ToDo.svelte"
-onMount(() => {
-    const todo = new ToDo(container, { columns, cards });
-    todo.api.on("add-task", (obj) => {
-        console.log("A new task is added", obj);
+~~~html title="ToDo.svelte"
+<script>
+    // ...
+    onMount(() => {
+        const todo = new ToDo(container, { users, tasks, projects });
+        todo.api.on("add-task", (obj) => {
+            console.log("A new task is added", obj);
+        });
     });
-});
+</script>
+
+<div bind:this={container} style="width: 100%; height: 100%;"></div>
 ~~~
 
 ### Step 3. Adding To Do List into the app