From 5a09f9e9d86dd3645a4d2e7b065bfc6a7b205ba9 Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Mon, 19 Aug 2024 09:33:13 +0400 Subject: [PATCH] [update] integration guides --- docs/guides/integration_with_angular.md | 24 +-- docs/guides/integration_with_react.md | 18 +- docs/guides/integration_with_svelte.md | 220 +++++++++++++++--------- docs/guides/integration_with_vue.md | 12 +- 4 files changed, 161 insertions(+), 113 deletions(-) diff --git a/docs/guides/integration_with_angular.md b/docs/guides/integration_with_angular.md index 91a21c6..92a0ec0 100644 --- a/docs/guides/integration_with_angular.md +++ b/docs/guides/integration_with_angular.md @@ -45,7 +45,7 @@ The app should run on a localhost (for instance `http://localhost:3000`). ## Creating To Do List -Now you should get the DHTMLX To Do List code. First of all, stop the app and proceed with installing the To Do List package. +Now you should get the DHTMLX To Do List source code. First of all, stop the app and proceed with installing the To Do List package. ### Step 1. Package installation @@ -53,13 +53,13 @@ Download the [**trial To Do List package**](/how_to_start/#installing-to-do-list ### Step 2. Component creation -Now you need to create an Angular component, to add a To Do List with Toolbar into the application. Create the **todo** folder in the **src/app/** directory, add a new file into it and name it **todo.component.ts**. +Now you need to create an Angular component, to add To Do List with Toolbar into the application. Create the **todo** folder in the **src/app/** directory, add a new file into it and name it **todo.component.ts**. #### Import source files Open the **todo.component.ts** 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 path look like this: +- if you use PRO version and install the To Do List package from a local folder, the imported path looks like this: ~~~jsx title="todo.components.ts" import { ToDo, Toolbar } from 'dhx-todolist-package'; @@ -84,7 +84,7 @@ import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation} @Component({ encapsulation: ViewEncapsulation.None, selector: "todo", // a template name used in the "app.component.ts" file as - styleUrls: ["./todo.component.css"], // include a css file + styleUrls: ["./todo.component.css"], // include the css file template: `
@@ -173,8 +173,8 @@ import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation} @Component({ encapsulation: ViewEncapsulation.None, - selector: "todo", // a template name used in the "app.component.ts" file as - styleUrls: ["./todo.component.css"], // include a css file + selector: "todo", + styleUrls: ["./todo.component.css"], template: `
@@ -189,7 +189,7 @@ export class ToDoComponent implements OnInit, OnDestroy { private _toolbar!: Toolbar; ngOnInit() { - const { users, tasks, projects } = getData(); + const { users, tasks, projects } = getData(); // initialize data properties this._todo = new ToDo(this.todo_container.nativeElement, { users, // apply user data tasks, // apply task data @@ -219,8 +219,8 @@ import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation} @Component({ encapsulation: ViewEncapsulation.None, - selector: "todo", // a template name used in the "app.component.ts" file as - styleUrls: ["./todo.component.css"], // include a css file + selector: "todo", + styleUrls: ["./todo.component.css"], template: `
@@ -235,7 +235,7 @@ export class ToDoComponent implements OnInit, OnDestroy { private _toolbar!: Toolbar; ngOnInit() { - const { users, tasks, projects } = getData(); + const { users, tasks, projects } = getData(); // initialize data properties this._todo = new ToDo(this.todo_container.nativeElement, {}); this._toolbar = new Toolbar(this.toolbar_container.nativeElement, { @@ -258,9 +258,9 @@ export class ToDoComponent implements OnInit, OnDestroy { } ~~~ -The `this._todo.parse(data)` method provides data reloading on each applied change. +The `parse(data)` method provides data reloading on each applied change. -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. +Now the To Do List component is ready to use. When the element will be added to the page, it will initialize the To Do List 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. #### Handling events diff --git a/docs/guides/integration_with_react.md b/docs/guides/integration_with_react.md index 0197a35..57e6128 100644 --- a/docs/guides/integration_with_react.md +++ b/docs/guides/integration_with_react.md @@ -18,7 +18,7 @@ DHTMLX To Do List is compatible with **React**. We have prepared code examples o Before you start to create a new project, install [**Vite**](https://vitejs.dev/) (optional) and [**Node.js**](https://nodejs.org/en/). ::: -You can create a basic **React** project or use **React with Vite**: +You can create a basic **React** project or use **React with Vite**. Let's name the project as **my-react-todo-app**: ~~~json npx create-vite my-react-todo-app --template react @@ -26,7 +26,7 @@ npx create-vite my-react-todo-app --template react ### Installation of dependencies -Go to the app directory. Let's name the project as **my-react-todo-app** and run: +Go to the new created app directory: ~~~json cd my-react-todo-app @@ -38,7 +38,7 @@ Install dependencies and start the dev server. For this, use a package manager: ~~~json yarn -yarn dev +yarn start ~~~ - if you use [**npm**](https://www.npmjs.com/), run the following commands: @@ -52,7 +52,7 @@ The app should run on a localhost (for instance `http://localhost:3000`). ## Creating To Do List -Now you should get the DHTMLX To Do List code. First of all, stop the app and proceed with installing the To Do List package. +Now you should get the DHTMLX To Do List source code. First of all, stop the app and proceed with installing the To Do List package. ### Step 1. Package installation @@ -168,7 +168,7 @@ export function getData() { Then open the ***App.js*** file and import data. After this you can pass data into the `` component as **props**: -~~~jsx {2,5-6} title="App.jsx" +~~~jsx {2,5-6} title="App.js" import ToDo from "./ToDo"; import { getData } from "./data"; @@ -255,9 +255,9 @@ export default function ToDoComponent(props) { } ~~~ -The `todo.parse(data)` method provides data reloading on each applied change. +The `parse(data)` method provides data reloading on each applied change. -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. +Now the To Do List component is ready to use. When the element will be added to the page, it will initialize the To Do List 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. #### Handling events @@ -283,9 +283,9 @@ useEffect(() => { ### Step 3. Adding To Do List into the app -To add the component into the app, open the ***App.jsx*** file and replace the default code with the following one: +To add the component into the app, open the ***App.js*** file and replace the default code with the following one: -~~~jsx title="App.jsx" +~~~jsx title="App.js" import ToDo from "./ToDo"; import { getData } from "./data"; diff --git a/docs/guides/integration_with_svelte.md b/docs/guides/integration_with_svelte.md index 330e173..b5b200c 100644 --- a/docs/guides/integration_with_svelte.md +++ b/docs/guides/integration_with_svelte.md @@ -18,7 +18,7 @@ DHTMLX To Do List is compatible with **Svelte**. We have prepared code examples Before you start to create a new project, install [**Vite**](https://vitejs.dev/) (optional) and [**Node.js**](https://nodejs.org/en/). ::: -There are several ways of creating a project: +There are several ways of creating a **Svelte** project: - you can use the [**SvelteKit**](https://kit.svelte.dev/) @@ -40,13 +40,13 @@ Let's name the project as **my-svelte-todo-app** and go to the app directory: cd my-svelte-todo-app ~~~ -Install dependencies and run the app. For this, use a package manager: +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 -yarn dev +yarn start ~~~ - if you use [**npm**](https://www.npmjs.com/), run the following commands: @@ -60,7 +60,7 @@ The app should run on a localhost (for instance `http://localhost:3000`). ## Creating To Do List -Now you should get the DHTMLX To Do List code. First of all, stop the app and proceed with installing the To Do List package. +Now you should get the DHTMLX To Do List source code. First of all, stop the app and proceed with installing the To Do List package. ### Step 1. Package installation @@ -68,9 +68,9 @@ Download the [**trial To Do List package**](/how_to_start/#installing-to-do-list ### Step 2. Component creation -Now you need to create a Svelte component, to add a To Do List into the application. Let's create a new file in the ***src/*** directory and name it ***ToDo.svelte***. +Now you need to create a Svelte component, to add To Do List with Toolbar into the application. Let's create a new file in the ***src/*** directory and name it ***ToDo.svelte***. -#### Importing source files +#### Import source file Open the ***ToDo.svelte*** file and import To Do List source files. Note that: @@ -78,8 +78,8 @@ Open the ***ToDo.svelte*** file and import To Do List source files. Note that: ~~~html title="ToDo.svelte" ~~~ @@ -89,54 +89,54 @@ Note that depending on the used package, the source files can be minified. In th ~~~html title="ToDo.svelte" ~~~ In this tutorial you can see how to configure the **trial** version of To Do List. -#### Setting the container and adding To Do List +#### Setting containers and adding To Do List with Toolbar -To display To Do List on the page, you need to set the container to render the component inside. Check the code below: +To display To Do List with Toolbar on the page, you need to create containers for To Do List and Toolbar, and initialize these components using the corresponding constructors: -~~~html {5,9} title="ToDo.svelte" +~~~html {3,6,10-11,13-17,27-28} title="ToDo.svelte" -
-~~~ - -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-12} title="ToDo.svelte" - - -
+
+
+
+
~~~ #### Loading data To add data into the To Do List, we need to provide a data set. You can create the ***data.js*** file in the ***src/*** directory and add some data into it: -~~~jsx title="data.js" +~~~jsx {2,19,28,38} title="data.js" export function getData() { const tasks = [ { @@ -180,77 +180,125 @@ export function getData() { Then open the ***App.svelte*** file, import data, and pass it into the new created `` components as **props**: -~~~html {3-4,7} title="App.svelte" +~~~html {3,5,8} title="App.svelte" ~~~ -Open the ***ToDo.svelte*** file and apply the passed **props** to the To Do List configuration object: +Go to the ***ToDo.svelte*** file and apply the passed **props** to the To Do List configuration object: -~~~html {3-5,10-12} title="ToDo.svelte" +~~~html {6-8,15-17} title="ToDo.svelte" -
+
+
+
+
~~~ You can also use the [`parse()`](/api/methods/parse_method/) method inside the `onMount()` method of Svelte to load data into To Do List: -~~~html {3-5,10} title="ToDo.svelte" +~~~html {6-8,21} title="ToDo.svelte" -
+
+
+
+
~~~ -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. +The `parse(data)` method provides data reloading on each applied change. + +Now the To Do List component is ready to use. When the element will be added to the page, it will initialize the To Do List 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. #### Handling events When a user makes some action in the To Do List, it invokes an event. You can use these events to detect the action and run the desired code for it. See the [full list of events](/api/overview/events_overview/). -Open ***ToDo.svelte*** and complete the `onMount()` method as in: +Open ***ToDo.svelte*** and complete the `onMount()` method in the following way: -~~~html title="ToDo.svelte" +~~~html {8-10} title="ToDo.svelte" -
+// ... ~~~ ### Step 3. Adding To Do List into the app @@ -259,10 +307,10 @@ To add the component into the app, open the **App.svelte** file and replace the ~~~html title="App.svelte" diff --git a/docs/guides/integration_with_vue.md b/docs/guides/integration_with_vue.md index d43a712..f468e59 100644 --- a/docs/guides/integration_with_vue.md +++ b/docs/guides/integration_with_vue.md @@ -42,7 +42,7 @@ Install dependencies and start the dev server. For this, use a package manager: ~~~json yarn -yarn dev +yarn start ~~~ - if you use [**npm**](https://www.npmjs.com/), run the following commands: @@ -56,7 +56,7 @@ The app should run on a localhost (for instance `http://localhost:3000`). ## Creating To Do List -Now you should get the DHTMLX To Do List code. First of all, stop the app and proceed with installing the To Do List package. +Now you should get the DHTMLX To Do List source code. First of all, stop the app and proceed with installing the To Do List package. ### Step 1. Package installation @@ -64,7 +64,7 @@ Download the [**trial To Do List package**](/how_to_start/#installing-to-do-list ### Step 2. Component creation -Now you need to create a Vue component, to add a To Do List with Toolbar into the application. Create a new file in the ***src/components/*** directory and name it ***ToDo.vue***. +Now you need to create a Vue component, to add To Do List with Toolbar into the application. Create a new file in the ***src/components/*** directory and name it ***ToDo.vue***. #### Import source files @@ -174,7 +174,7 @@ export function getData() { } ~~~ -Then open the ***App.vue*** file, import data, and initialize it via the inner `data()` method. After this you can pass data into the new created `` components as **props**: +Then open the ***App.vue*** file, import data, and initialize it via the inner `data()` method. After this you can pass data into the new created `` component as **props**: ~~~html {3,7-14,19} title="App.vue"