diff --git a/docs/guides/configuration.md b/docs/guides/configuration.md index 29ccd98..83ae702 100644 --- a/docs/guides/configuration.md +++ b/docs/guides/configuration.md @@ -6,27 +6,28 @@ description: You can learn about the To Do List Configuration in the documentati # Configuration -You can adjust the settings of DHTMLX To Do List according to your needs. The available configuration options allow you: -- [to configure the appearance of the badge displaying the progress of task completion](#counter-of-completed-subtasks) -- [to configure the format of dates](#date-format) -- [to configure or disable drag-n-drop of tasks](#drag-n-drop) -- [to disable validation for due dates of tasks](#due-date-validation) -- [to change the mode used for marking tasks done](#mode-of-marking-tasks-complete) -- [to configure the appearance of the toolbar](#toolbar) +Configure DHTMLX To Do List to match your application's requirements. The following sections cover the available configuration options: -You can also configure the mode of [hiding completed tasks](#mode-of-hiding-completed-tasks) as well as initialize To Do List in the [readonly](#read-only-mode) mode. +- [Configure the subtask counter](#configure-the-subtask-counter) — configure the badge that shows task completion progress +- [Configure the date format](#configure-the-date-format) — configure the format of dates +- [Configure drag-n-drop](#configure-drag-n-drop) — configure or disable drag-n-drop of tasks +- [Configure due date validation](#configure-due-date-validation) — disable validation for due dates +- [Set the task completion mode](#set-the-task-completion-mode) — change the mode used for marking tasks done +- [Configure the Toolbar](#configure-the-toolbar) — configure the toolbar appearance + +See also: [hide completed tasks](#hide-completed-tasks) and [read-only mode](#read-only-mode). ## Tasks -### Counter of completed subtasks +Use the [`taskShape`](api/configs/taskshape_config.md) property to configure the appearance and behavior of tasks. -You can change the type of the counter which renders the progress of completion of the child tasks. +### Configure the subtask counter -![counter](../assets/counter.png) +Use the `counter` parameter of [`taskShape`](api/configs/taskshape_config.md) to change how the widget displays child task completion progress. -By default, each parent task is equipped with the counter whose value is shown as a ratio of completed child tasks and the total number of the child tasks. +![counter](../assets/counter.png) -If you want the value of the counter to be displayed as a percentage, specify the *type: "percentage"* attribute inside the **counter** parameter of the [`taskShape`](api/configs/taskshape_config.md) property: +By default, each parent task has a counter that shows completed child tasks as a ratio (for example, 2/5). To display the counter as a percentage, set `type` to `"percentage"` in the `counter` parameter: ~~~js {5-9} const list = new ToDo("#root", { @@ -43,9 +44,9 @@ const list = new ToDo("#root", { **Related sample:** [To do list. Subtask counter and date format](https://snippet.dhtmlx.com/magidhw8) -### Date format +### Configure the date format -By default, the To Do List displays dates in the "%d %M %Y" format (it looks like 09 Mar 2033). If you want to specify another format for dates, use the **date** parameter of the [`taskShape`](api/configs/taskshape_config.md) property: +By default, To Do List displays dates in the `"%d %M %Y"` format (for example, 09 Mar 2033). To use a different format, set the `date` parameter of [`taskShape`](api/configs/taskshape_config.md): ~~~js {5-10} const list = new ToDo("#root", { @@ -65,13 +66,13 @@ const list = new ToDo("#root", { Check [the list of available characters](api/configs/taskshape_config.md#list-of-characters). -### Drag-n-drop +### Configure drag-n-drop -The default configuration of To Do List includes the drag-n-drop functionality. You can [select one or several tasks](../../#selecting-tasks) and drag the selected tasks vertically at once. If you need to create a copy of the selected tasks, hold the *Alt* key during drag-n-drop. +To Do List supports drag-n-drop by default. You can [select one or several tasks](../../#selecting-tasks) and drag them vertically at once. To copy the selected tasks, hold the *Alt* key during drag-n-drop. -There is the [`drag`](api/configs/drag_config.md) property which allows you: +Use the [`drag`](api/configs/drag_config.md) property to adjust drag-n-drop behavior: -- to configure the behavior of the collapsed tasks so that they don't expand when you hover them over during drag-n-drop: +- To prevent collapsed tasks from expanding when hovered during drag-n-drop, set `expand` to `false`: ~~~js {7} const list = new ToDo("#root", { @@ -85,7 +86,7 @@ const list = new ToDo("#root", { }); ~~~ -- to disable drag-n-drop: +- To disable drag-n-drop entirely, set `drag` to `false`: ~~~js {6} const list = new ToDo("#root", { @@ -97,19 +98,17 @@ const list = new ToDo("#root", { }); ~~~ -### Due date validation +### Configure due date validation -If you specify a [due date](api/configs/tasks_config.md) for a task, the due date validation will track the completion of the task. The due date of the task has green color until the task becomes Overdue. +When a task has a [due date](api/configs/tasks_config.md), To Do List tracks its completion status. The due date appears green until the task becomes overdue. ![due_date](../assets/due_date.png) -The dates of the tasks which have not been completed on the due date are highlighted in red. +Tasks not completed by the due date are highlighted in red. ![due_date](../assets/overdue_task.png) -This validation works by default. - -In case you want to disable this functionality, specify the **validate** setting inside the *date* parameter of the [`taskShape`](api/configs/taskshape_config.md) property to *false*: +Due date validation is active by default. To disable it, set `validate` to `false` in the `date` parameter of [`taskShape`](api/configs/taskshape_config.md): ~~~js {5-10} const list = new ToDo("#root", { @@ -125,18 +124,18 @@ const list = new ToDo("#root", { }); ~~~ -In this configuration, the due dates will be colored grey. +With validation disabled, due dates appear gray. -### Mode of marking tasks complete +### Set the task completion mode -By default, the process of checking/unchecking tasks is implemented in the "auto" mode, namely: +By default, To Do List uses the `"auto"` completion mode: -- If you mark all children of a task as completed, the parent task automatically becomes marked as completed -- If you mark the parent task as completed, all its child automatically become marked as completed -- If you mark at least one child of a completed task as uncompleted, the task automatically becomes marked as uncompleted -- If you mark the parent task as uncompleted, all its child automatically become uncompleted +- Marking all children of a task as completed also marks the parent task as completed. +- Marking the parent task as completed marks all child tasks as completed. +- Marking at least one child of a completed task as uncompleted marks the parent task as uncompleted. +- Marking the parent task as uncompleted marks all child tasks as uncompleted. -You can disable this behavior and activate the "manual" mode. For that, apply the **behavior: "manual"** setting of the **completed** parameter of the [`taskShape`](api/configs/taskshape_config.md) property: +To disable this cascade behavior, set `behavior` to `"manual"` in the `completed` parameter of [`taskShape`](api/configs/taskshape_config.md): ~~~js {5-9} const list = new ToDo("#root", { @@ -153,11 +152,11 @@ const list = new ToDo("#root", { **Related sample:** [To do list. Two variants of marking a parent task done](https://snippet.dhtmlx.com/5892fcr2) -## Toolbar +## Configure the Toolbar -The toolbar is a top part of To Do List which is [initialized](guides/initialization.md#initialize-toolbar) and [configured](category/toolbar-properties.md) separately from To Do List. +The Toolbar is [initialized](guides/initialization.md#initialize-toolbar) and [configured](category/toolbar-properties.md) separately from To Do List. -To change the default structure of the toolbar, use the [`items`](api/toolbar_api/configs/items_config.md) configuration property of the Toolbar component. +Use the [`items`](api/toolbar_api/configs/items_config.md) property to define which controls appear in the Toolbar and in what order: ~~~js const toolbar = new Toolbar("#toolbar", { @@ -166,12 +165,12 @@ const toolbar = new Toolbar("#toolbar", { }); ~~~ -The property allows you to define which controls should be shown or hidden. Besides, you can enumerate the controls in the **items** array in the order you want to show them in the toolbar. +Pass control names in the `items` array to show or hide them. -## Mode of hiding completed tasks +## Hide completed tasks -Read the details on how to hide completed tasks from To Do List in the [related section](guides/hide_completed_tasks.md). +See the [Hide completed tasks](guides/hide_completed_tasks.md) guide for details. ## Read-only mode -Read the details on how to make the To Do List read-only in the [related section](guides/readonly_mode.md). +See the [Read-only mode](guides/readonly_mode.md) guide for details. diff --git a/docs/guides/customization.md b/docs/guides/customization.md index 3c3bd5b..5760a12 100644 --- a/docs/guides/customization.md +++ b/docs/guides/customization.md @@ -6,19 +6,19 @@ description: You can learn about the To Do List Customization in the documentati # Customization -## Toolbar +## Customize the Toolbar -It is possible to customize the appearance of the toolbar. You can hide some default controls, add custom ones, and place them in the necessary order. To do that, use the [`items`](api/toolbar_api/configs/items_config.md) property of the Toolbar component. +Use the [`items`](api/toolbar_api/configs/items_config.md) property of the Toolbar to hide default controls, add custom ones, and define their order. -You can customize your toolbar as in: +The example below demonstrates a customized toolbar: -## Styling To Do List +## Style To Do List -You can change the look and feel of To Do List by changing values of the [**CSS variables provided by the library**](guides/stylization.md). +Use the [CSS variables provided by the library](guides/stylization.md) to change the appearance of To Do List. -Check the example: +The example below demonstrates custom styling: diff --git a/docs/guides/hide_completed_tasks.md b/docs/guides/hide_completed_tasks.md index 0a78f0d..105cdef 100644 --- a/docs/guides/hide_completed_tasks.md +++ b/docs/guides/hide_completed_tasks.md @@ -6,14 +6,14 @@ description: You can learn about how to hide or show completed tasks in the docu # Show/hide completed tasks -## Initial mode +## Set the initial mode -There are two modes of displaying tasks in To Do List: +To Do List supports two display modes: -- when all tasks are shown on the page (*default*) -- when completed tasks are hidden from the page +- all tasks are visible (default) +- completed tasks are hidden -You may initialize To Do List in the mode when all completed tasks will be hidden from the page. It will let you focus only on those tasks which yet need to be done. For that, you need to enable the **taskHide** setting of the **completed** parameter of the [`taskShape`](api/configs/taskshape_config.md) property, as in: +Initialize To Do List in the hidden mode to focus on incomplete tasks. Enable the `taskHide` setting in the `completed` parameter of [`taskShape`](api/configs/taskshape_config.md): ~~~js {6} const list = new ToDo("#root", { @@ -27,16 +27,16 @@ const list = new ToDo("#root", { }); ~~~ -## Switching between modes +## Switch between modes -You may easily switch between these two modes after initialization of To Do List in two ways: +Switch between the two modes at any time after initialization in two ways: -- via the **Completed tasks -> Show/Hide** option of the [Toolbar menu](../../#toolbar) +- via the **Completed tasks → Show/Hide** option of the [Toolbar menu](../../#toolbar) -- via the related [`hideCompletedTasks()`](api/methods/hidecompletedtasks_method.md) and [`showCompletedTasks()`](api/methods/showcompletedtasks_method.md) methods: +- via the [`hideCompletedTasks()`](api/methods/hidecompletedtasks_method.md) and [`showCompletedTasks()`](api/methods/showcompletedtasks_method.md) methods: ~~~js -list.hideCompletedTasks(); +list.hideCompletedTasks(); // or -list.showCompletedTasks(); +list.showCompletedTasks(); ~~~ \ No newline at end of file diff --git a/docs/guides/initialization.md b/docs/guides/initialization.md index d594e93..02422ac 100644 --- a/docs/guides/initialization.md +++ b/docs/guides/initialization.md @@ -6,8 +6,7 @@ description: You can learn about initialization of the DHTMLX JavaScript To Do L # Initialization - -To create or, in other words, to display To Do List on the page, you need to take the following steps: +To display To Do List on the page, follow these steps: 1\. [Include the To Do List source files on a page](#include-source-files) @@ -19,12 +18,12 @@ To create or, in other words, to display To Do List on the page, you need to tak [Download the To Do List package](https://dhtmlx.com/docs/products/dhtmlxTodo/download.shtml) and unpack it into a folder of your project. -To create To Do List, you need to include 2 source files on your page: +Include 2 source files on your page: - *todo.js* - *todo.css* -Make sure that you set correct relative paths to the source files: +Set the correct relative paths to the source files: ~~~html title="index.html" @@ -33,9 +32,7 @@ Make sure that you set correct relative paths to the source files: ## Create containers -The To Do List widget consists of two separate components: a List and a Toolbar. - -Thus, create **two containers** to place a List and Toolbar into and give them IDs, for instance, **"root"** and **"toolbar"**: +The To Do List widget consists of two separate components: a List and a Toolbar. Create a separate container for each and give them IDs, for example `"root"` and `"toolbar"`: ~~~html title="index.html" @@ -45,11 +42,13 @@ Thus, create **two containers** to place a List and Toolbar into and give them I ## Initialize To Do List +Use the `ToDo` and `Toolbar` constructors to create the widget components. + ### Initialize List -After that, initialize List with the **new ToDo()** constructor. It takes two parameters: +Initialize List with the `new ToDo()` constructor. The constructor takes two parameters: -- a container to place a List into. The one we have created at the previous step +- a container to place List into, created in the previous step - an object with configuration properties. [See the full list here](api/overview/configs_overview.md) ~~~js title="index.js" @@ -63,13 +62,13 @@ const list = new ToDo("#root", { ### Initialize Toolbar -Next, initialize Toolbar with the **new Toolbar()** constructor. The constructor also takes two parameters: +Initialize Toolbar with the `new Toolbar()` constructor. The constructor takes two parameters: -- a container to place a Toolbar into. The one we have created at the previous step +- a container to place Toolbar into, created in the previous step - an object with configuration properties. [See the full list here](category/toolbar-properties.md) :::info -Initialization of the Toolbar is optional. You can skip this step if you don't need the Toolbar in your application +Toolbar initialization is optional. Skip this step if you do not need the Toolbar in your application. ::: ~~~js {9-11} title="index.js" @@ -87,16 +86,18 @@ const toolbar = new Toolbar("#toolbar", { ~~~ :::note -You should apply the object destructuring to "unpack" the **todo** global object into two variables: ToDo and Toolbar. +Apply object destructuring to unpack the `todo` global object into two variables: `ToDo` and `Toolbar`. -You don't need this step if you will use the **new todo.ToDo()** and **new todo.Toolbar()** constructors. +Skip this step if you use the `new todo.ToDo()` and `new todo.Toolbar()` constructors directly. ::: -## Loading data into To Do List +## Load data into To Do List -Detailed information on loading data into DHTMLX To Do is given in the [Data loading](guides/loading_data.md) article. +See the [Data loading](guides/loading_data.md) article for details on loading data into DHTMLX To Do. ## Example +The example below demonstrates a complete initialization of To Do List with Toolbar: + diff --git a/docs/guides/inline_editing.md b/docs/guides/inline_editing.md index 1d3d21b..8d55a40 100644 --- a/docs/guides/inline_editing.md +++ b/docs/guides/inline_editing.md @@ -6,15 +6,15 @@ description: You can learn about inline editing in the documentation of the DHTM # Inline editing -Inline editing lets you edit the content of a task/project directly by double-clicking on it. The functionality is enabled by default. +Inline editing lets you edit task or project content directly. Double-click any item to open the editor. The feature is enabled by default. :::tip -When you enable the [**readonly**](api/configs/readonly_config.md) mode of To Do List, inline editing becomes unavailable. +Enabling the [`readonly`](api/configs/readonly_config.md) mode disables inline editing. ::: -## Supported formats of data +## Supported data formats -It is possible to type and edit the following data via the inline editor: +Type and edit the following data in the inline editor: 1\. **Text, numbers** @@ -22,12 +22,12 @@ It is possible to type and edit the following data via the inline editor: Use hashtags to categorize tasks and make them more searchable. Here are some simple rules to know: -- Hashtag is a combination of the `#` symbol and any letters, numbers (for instance, **#sport**) -- To create a hashtag, enter `#` and at least one symbol after it (for instance, **#t**), and press Enter -- You can use unlimited number of hashtags in To Do List. Separate the tags by spaces (for instance, **#tag #tag1**) +- A hashtag is a combination of the `#` symbol and any letters or numbers (for example, `#sport`) +- To create a hashtag, enter `#` and at least one character after it (for example, `#t`), then press Enter +- Use an unlimited number of hashtags in To Do List. Separate tags by spaces (for example, `#tag #tag1`) - All created hashtags are accessible in all projects -- To view the list of all hashtags you've already created, enter the `#` symbol. Click the necessary hashtag to add it to the task -- To activate strict filtering, click a hashtag or enter it in the search bar in the toolbar +- To view all existing hashtags, enter the `#` symbol. Click a hashtag to add it to the task +- To activate strict filtering, click a hashtag or enter the hashtag in the search bar :::info You can create a default list of tags via the [`tags`](api/configs/tags_config.md) property @@ -35,25 +35,25 @@ You can create a default list of tags via the [`tags`](api/configs/tags_config.m 3\. **Dates** -To enter a date via the inline editor, type the `!` symbol and the built-in date picker will appear on the page. - -You can also wrap some text in the special symbols - `!()` - for instance, **!(Enter Booking date)**, and press Enter to close the editor. In the future, clicking on this text will open the date picker. +To enter a date via the inline editor, type the `!` symbol and the built-in date picker appears. + +Wrap placeholder text in `!()` (for example, `!(Enter Booking date)`) and press Enter to close the editor. Clicking that text later opens the date picker. :::info -The appearance of the added dates depends on the specified [**locale**](api/configs/locale_config.md) and [**date format**](api/configs/taskshape_config.md) +The appearance of dates depends on the [`locale`](api/configs/locale_config.md) and [`taskShape`](api/configs/taskshape_config.md) settings. ::: -## Working with editor +## Work with the editor -You can manage the editor by using the API: +Use the API to open and close the inline editor programmatically. -To open the editor for a particular task/project, use the [`openInlineEditor()`](../../api/methods/openinlineeditor_method/) method: +To open the editor for a specific task or project, call the [`openInlineEditor()`](../../api/methods/openinlineeditor_method/) method: ~~~js list.openInlineEditor({ id: "1.1.1" }); ~~~ -To close the editor after finishing the editing of the item and save the changes made, pass the ID of the item to the [`closeInlineEditor()`](../../api/methods/closeinlineeditor_method/) method: +To close the editor and save changes, pass the item ID to the [`closeInlineEditor()`](../../api/methods/closeinlineeditor_method/) method: ~~~js list.closeInlineEditor({ @@ -61,12 +61,12 @@ list.closeInlineEditor({ }); ~~~ -If you don't need to save the changes after closing the editor, set the second **save** parameter of the method to *false*: +If you do not need to save changes, set the `save` parameter to `false`: ~~~js list.closeInlineEditor({ id: "1.1.1", save: false }); -~~~~ +~~~ diff --git a/docs/guides/integration.md b/docs/guides/integration.md index 191eee9..fa4707a 100644 --- a/docs/guides/integration.md +++ b/docs/guides/integration.md @@ -6,18 +6,24 @@ description: You can learn about integration with other widgets in the documenta # Integration with DHTMLX widgets -You can integrate DHTMLX To Do List with other DHTMLX widgets (for instance, [Gantt](https://docs.dhtmlx.com/gantt/), [Scheduler](https://docs.dhtmlx.com/scheduler/), [Kanban](https://docs.dhtmlx.com/kanban/), [Grid](https://docs.dhtmlx.com/suite/grid/)). Check the examples below. +Integrate DHTMLX To Do List with other DHTMLX widgets, for example [Gantt](https://docs.dhtmlx.com/gantt/), [Scheduler](https://docs.dhtmlx.com/scheduler/), [Kanban](https://docs.dhtmlx.com/kanban/), and [Grid](https://docs.dhtmlx.com/suite/grid/). ## Integration with DHTMLX Gantt - + +The example below demonstrates To Do List integrated with DHTMLX Gantt: + ## Integration with DHTMLX Kanban +The example below demonstrates To Do List integrated with DHTMLX Kanban: + ## Integration with DHTMLX Scheduler +The examples below demonstrate To Do List integrated with DHTMLX Scheduler. + ### Example without projects @@ -28,4 +34,6 @@ You can integrate DHTMLX To Do List with other DHTMLX widgets (for instance, [Ga ## Integration with DHTMLX DataGrid +The example below demonstrates To Do List integrated with DHTMLX DataGrid: + \ No newline at end of file diff --git a/docs/guides/integration_with_angular.md b/docs/guides/integration_with_angular.md index 6d048bc..892f28e 100644 --- a/docs/guides/integration_with_angular.md +++ b/docs/guides/integration_with_angular.md @@ -10,12 +10,12 @@ description: You can learn about the integration with Angular in the documentati You should be familiar with basic concepts and patterns of **Angular** before reading this documentation. To refresh your knowledge, please refer to the [**Angular documentation**](https://v17.angular.io/docs). ::: -DHTMLX To Do List is compatible with **Angular**. We prepared code examples on how to use DHTMLX To Do List with **Angular**. For more information, refer to the corresponding [**Example on GitHub**](https://github.com/DHTMLX/angular-todolist-demo). +DHTMLX To Do List is compatible with Angular. For a working example, see the [Example on GitHub](https://github.com/DHTMLX/angular-todolist-demo). -## Creating a project +## Create a project :::info -Before you start to create a new project, install [**Angular CLI**](https://v17.angular.io/cli) and [**Node.js**](https://nodejs.org/en/). +Before creating a new project, install [Angular CLI](https://v17.angular.io/cli) and [Node.js](https://nodejs.org/en/). ::: Create a new **my-angular-todo-app** project using Angular CLI. For this purpose, run the following command: @@ -25,14 +25,14 @@ ng new my-angular-todo-app ~~~ :::note -If you want to follow this guide, disable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering) when creating new Angular app! +Disable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering) when creating the Angular app. ::: -The command above installs all the necessary tools, so you don't need to run any additional commands. +The command installs all necessary tools. No additional commands are required. -### Installation of dependencies +### Install dependencies -Go to the new created app directory: +Go to the newly created app directory: ~~~json cd my-angular-todo-app @@ -45,23 +45,23 @@ yarn yarn start ~~~ -The app should run on a localhost (for instance `http://localhost:3000`). +The app runs on localhost (for example `http://localhost:3000`). -## Creating To Do List +## Create To Do List -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. +Stop the app and install the To Do List package before continuing. -### Step 1. Package installation +### Step 1. Install the package -Download the [**trial To Do List package**](/how_to_start/#installing-to-do-list-via-npm-or-yarn) and follow steps mentioned in the README file. Note that trial To Do List is available 30 days only. - -### Step 2. Component creation +Download the [trial To Do List package](/how_to_start/#installing-to-do-list-via-npm-or-yarn) and follow the steps in the README file. The trial version is available for 30 days. -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**. +### Step 2. Create the component + +Create an Angular component to add To Do List with Toolbar to the application. Create the *todo* folder in the *src/app/* directory, add a new file, and name it *todo.component.ts*. #### Import source files -Open the **todo.component.ts** file and import To Do List source files. Note that: +Open *todo.component.ts* 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 looks like this: @@ -75,11 +75,11 @@ import { ToDo, Toolbar } from 'dhx-todolist-package'; import { ToDo, Toolbar } from '@dhx/trial-todolist'; ~~~ -In this tutorial you can see how to configure the **trial** version of To Do List. +This tutorial uses the **trial** version of To Do List. -#### Set containers and initialize the To Do List with Toolbar +#### Set containers and initialize To Do List with Toolbar -To display To Do List with Toolbar on the page, you need to set containers for To Do List and Toolbar, and initialize these components using the corresponding constructors: +To display To Do List with Toolbar on the page, create containers for both components and initialize them with the corresponding constructors: ~~~jsx {1,8-11,15-18,24-31} title="todo.component.ts" import { ToDo, Toolbar } from '@dhx/trial-todolist'; @@ -123,9 +123,9 @@ export class ToDoComponent implements OnInit, OnDestroy { } ~~~ -#### Adding styles +#### Add styles -To display To Do List correctly, you need to provide the corresponding styles. For this purpose, you can create the **todo.component.css** file in the **src/app/todo/** directory and specify important styles for To Do List and its container: +Provide the styles for To Do List and its containers. Create *todo.component.css* in the *src/app/todo/* directory and specify the required styles: ~~~css title="todo.component.css" /* import To Do List styles */ @@ -153,9 +153,9 @@ body{ } ~~~ -#### Loading data +#### Load data -To add data into To Do List, you need to provide a data set. You can create the **data.ts** file in the **src/app/todo/** directory and add some data into it: +Create *data.ts* in the *src/app/todo/* directory and add your data: ~~~jsx {2,19,28,38} title="data.ts" export function getData() { @@ -199,7 +199,7 @@ 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: +Open *todo.component.ts*, import the data file, and pass the data to the To Do List configuration object in `ngOnInit()`: ~~~jsx {2,23,25-27} title="todo.component.ts" import { ToDo, Toolbar } from '@dhx/trial-todolist'; @@ -293,15 +293,15 @@ export class ToDoComponent implements OnInit, OnDestroy { } ~~~ -The `parse(data)` method provides data reloading on each applied change. +The `parse(data)` method reloads data 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. +The To Do List component is ready to use. When added to the page, the component initializes with data. See the [To Do List API docs](/api/overview/configs_overview/) for the full list of available properties. -#### Handling events +#### Handle 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/). +When a user performs an action in To Do List, the action triggers an event. Use events to detect actions and run custom code. See the [full list of events](/api/overview/events_overview/). -Open the **todo.component.ts** file and complete the `ngOnInit()` method in the following way: +Open *todo.component.ts* and extend the `ngOnInit()` method: ~~~jsx {5-7} title="todo.component.ts" // ... @@ -318,9 +318,9 @@ ngOnDestroy(): void { } ~~~ -### Step 3. Adding To Do List into the app +### Step 3. Add To Do List to the app -To add the ***ToDoComponent*** component into the app, open the ***src/app/app.component.ts*** file and replace the default code with the following one: +Open *src/app/app.component.ts* and replace the default code: ~~~jsx {5} title="app.component.ts" import { Component } from "@angular/core"; @@ -334,7 +334,7 @@ export class AppComponent { } ~~~ -Then create the ***app.module.ts*** file in the ***src/app/*** directory and specify the *ToDoComponent* as shown below: +Create *app.module.ts* in the *src/app/* directory and specify `ToDoComponent`: ~~~jsx {4-5,8} title="app.module.ts" import { NgModule } from "@angular/core"; @@ -351,7 +351,7 @@ import { ToDoComponent } from "./todo/todo.component"; export class AppModule {} ~~~ -The last step is to open the ***src/main.ts*** file and replace the existing code with the following one: +Open *src/main.ts* and replace the existing code: ~~~jsx title="main.ts" import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"; @@ -361,8 +361,8 @@ platformBrowserDynamic() .catch((err) => console.error(err)); ~~~ -After that, you can start the app to see To Do List loaded with data on a page. +Start the app to see To Do List loaded with data. ![To Do List initialization](../assets/trial_todolist.png) -Now you know how to integrate DHTMLX To Do List with Angular. You can customize the code according to your specific requirements. The final example you can find on [**GitHub**](https://github.com/DHTMLX/angular-todolist-demo). +The integration is complete. Customize the code to match your requirements. Find the final example on [GitHub](https://github.com/DHTMLX/angular-todolist-demo). diff --git a/docs/guides/integration_with_react.md b/docs/guides/integration_with_react.md index 6846680..1ded406 100644 --- a/docs/guides/integration_with_react.md +++ b/docs/guides/integration_with_react.md @@ -10,12 +10,12 @@ description: You can learn about the integration with React in the documentation You should be familiar with the basic concepts and patterns of [**React**](https://react.dev) before reading this documentation. To refresh your knowledge, please refer to the [**React documentation**](https://react.dev/learn). ::: -DHTMLX To Do List is compatible with **React**. We have prepared code examples on how to use DHTMLX To Do List with **React**. For more information, refer to the corresponding [**Example on GitHub**](https://github.com/DHTMLX/react-todolist-demo). +DHTMLX To Do List is compatible with React. For a working example, see the [Example on GitHub](https://github.com/DHTMLX/react-todolist-demo). -## Creating a project +## Create a project :::info -Before you start to create a new project, install [**Vite**](https://vite.dev/) (optional) and [**Node.js**](https://nodejs.org/en/). +Before creating a new project, install [Vite](https://vite.dev/) (optional) and [Node.js](https://nodejs.org/en/). ::: You can create a basic **React** project or use **React with Vite**. Let's name the project as **my-react-todo-app**: @@ -24,9 +24,9 @@ You can create a basic **React** project or use **React with Vite**. Let's name npx create-react-app my-react-todo-app ~~~ -### Installation of dependencies +### Install dependencies -Go to the new created app directory: +Go to the newly created app directory: ~~~json cd my-react-todo-app @@ -48,23 +48,23 @@ npm install npm run dev ~~~ -The app should run on a localhost (for instance `http://localhost:3000`). +The app runs on localhost (for example `http://localhost:3000`). -## Creating To Do List +## Create To Do List -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. +Stop the app and install the To Do List package before continuing. -### Step 1. Package installation +### Step 1. Install the package -Download the [**trial To Do List package**](/how_to_start/#installing-to-do-list-via-npm-or-yarn) and follow steps mentioned in the README file. Note that trial To Do List is available 30 days only. +Download the [trial To Do List package](/how_to_start/#installing-to-do-list-via-npm-or-yarn) and follow the steps in the README file. The trial version is available for 30 days. -### Step 2. Component creation +### Step 2. Create the component -Now you need to create a React component, to add a To Do List with Toolbar into the application. Create a new file in the ***src/*** directory and name it ***ToDo.jsx***. +Create a React component to add To Do List with Toolbar to the application. Create a new file in the *src/* directory and name it *ToDo.jsx*. #### Import source files -Open the ***ToDo.jsx*** file and import To Do List source files. Note that: +Open *ToDo.jsx* 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: @@ -73,7 +73,7 @@ import { ToDo, Toolbar } from 'dhx-todolist-package'; import 'dhx-todolist-package/dist/todo.css'; ~~~ -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***. +Depending on the package, source files may be minified. In that case, import *todo.min.css* instead. - if you use the trial version of To Do List, specify the following paths: @@ -82,11 +82,11 @@ import { ToDo, Toolbar } from '@dhx/trial-todolist'; import "@dhx/trial-todolist/dist/todo.css"; ~~~ -In this tutorial you can see how to configure the **trial** version of To Do List. +This tutorial uses the **trial** version of To Do List. -#### Setting containers and adding To Do List with Toolbar +#### Set containers and add To Do List with Toolbar -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: +To display To Do List with Toolbar on the page, create containers for both components and initialize them with the corresponding constructors: ~~~jsx {2,6-7,10-11,13-17} title="ToDo.jsx" import { useEffect, useRef } from "react"; @@ -120,9 +120,9 @@ export default function ToDoComponent(props) { } ~~~ -#### Adding styles +#### Add styles -To display To Do List correctly, you need to provide the corresponding styles. You can use the **index.css** file to specify important styles for To Do List and its containers: +Provide the styles for To Do List and its containers. Use the *index.css* file to specify the required styles: ~~~css title="index.css" /* specify styles for initial page */ @@ -148,9 +148,9 @@ body, } ~~~ -#### Loading data +#### Load data -To add data into the To Do List, you need to provide a data set. You can create the ***data.js*** file in the ***src/*** directory and add some data into it: +Create the *data.js* file in the *src/* directory and add your data: ~~~jsx {2,19,28,38} title="data.js" export function getData() { @@ -194,7 +194,7 @@ export function getData() { } ~~~ -Then open the ***App.js*** file and import data. After this you can pass data into the `` component as **props**: +Open *App.js*, import the data, and pass the data to the `` component as props: ~~~jsx {2,5-6} title="App.js" import ToDo from "./ToDo"; @@ -208,7 +208,7 @@ function App() { export default App; ~~~ -Go to the ***ToDo.jsx*** file and apply the passed **props** to the To Do List configuration object: +Open *ToDo.jsx* and apply the props to the To Do List configuration object: ~~~jsx {5,11-13} title="ToDo.jsx" import { useEffect, useRef } from "react"; @@ -283,15 +283,15 @@ export default function ToDoComponent(props) { } ~~~ -The `parse(data)` method provides data reloading on each applied change. +The `parse(data)` method reloads data 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. +The To Do List component is ready to use. When added to the page, the component initializes with data. See the [To Do List API docs](/api/overview/configs_overview/) for the full list of available properties. -#### Handling events +#### Handle 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/). +When a user performs an action in To Do List, the action triggers an event. Use events to detect actions and run custom code. See the [full list of events](/api/overview/events_overview/). -Open ***ToDo.jsx*** and complete the `useEffect()` method in the following way: +Open *ToDo.jsx* and extend the `useEffect()` method: ~~~jsx {5-7} title="ToDo.jsx" // ... @@ -309,9 +309,9 @@ useEffect(() => { // ... ~~~ -### Step 3. Adding To Do List into the app +### Step 3. Add To Do List to the app -To add the component into the app, open the ***App.js*** file and replace the default code with the following one: +Open *App.js* and replace the default code: ~~~jsx title="App.js" import ToDo from "./ToDo"; @@ -325,8 +325,8 @@ function App() { export default App; ~~~ -After that, you can start the app to see To Do List loaded with data on a page. +Start the app to see To Do List loaded with data. ![To Do List initialization](../assets/trial_todolist.png) -Now you know how to integrate DHTMLX To Do List with React. You can customize the code according to your specific requirements. The final example you can find on [**GitHub**](https://github.com/DHTMLX/react-todolist-demo). +The integration is complete. Customize the code to match your requirements. Find the final example on [GitHub](https://github.com/DHTMLX/react-todolist-demo). diff --git a/docs/guides/integration_with_svelte.md b/docs/guides/integration_with_svelte.md index 0e98458..d6b8794 100644 --- a/docs/guides/integration_with_svelte.md +++ b/docs/guides/integration_with_svelte.md @@ -10,12 +10,12 @@ description: You can learn about the integration with Svelte in the documentatio You should be familiar with the basic concepts and patterns of **Svelte** before reading this documentation. To refresh your knowledge, please refer to the [**Svelte documentation**](https://svelte.dev/docs/svelte/overview). ::: -DHTMLX To Do List is compatible with **Svelte**. We have prepared code examples on how to use DHTMLX To Do List with **Svelte**. For more information, refer to the corresponding [**Example on GitHub**](https://github.com/DHTMLX/svelte-todolist-demo). +DHTMLX To Do List is compatible with Svelte. For a working example, see the [Example on GitHub](https://github.com/DHTMLX/svelte-todolist-demo). -## Creating a project +## Create a project :::info -Before you start to create a new project, install [**Vite**](https://vite.dev/) (optional) and [**Node.js**](https://nodejs.org/en/). +Before creating a new project, install [Vite](https://vite.dev/) (optional) and [Node.js](https://nodejs.org/en/). ::: There are several ways of creating a **Svelte** project: @@ -32,9 +32,9 @@ npm create vite@latest Check the details in the [related article](https://svelte.dev/docs/svelte/overview). -### Installation of dependencies +### Install dependencies -Let's name the project as **my-svelte-todo-app** and go to the app directory: +Name the project **my-svelte-todo-app** and go to the app directory: ~~~json cd my-svelte-todo-app @@ -56,23 +56,23 @@ npm install npm run dev ~~~ -The app should run on a localhost (for instance `http://localhost:3000`). +The app runs on localhost (for example `http://localhost:3000`). -## Creating To Do List +## Create To Do List -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. +Stop the app and install the To Do List package before continuing. -### Step 1. Package installation +### Step 1. Install the package -Download the [**trial To Do List package**](/how_to_start/#installing-to-do-list-via-npm-or-yarn) and follow steps mentioned in the README file. Note that trial To Do List is available 30 days only. +Download the [trial To Do List package](/how_to_start/#installing-to-do-list-via-npm-or-yarn) and follow the steps in the README file. The trial version is available for 30 days. -### Step 2. Component creation +### Step 2. Create the component -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***. +Create a Svelte component to add To Do List with Toolbar to the application. Create a new file in the *src/* directory and name it *ToDo.svelte*. -#### Import source file +#### Import source files -Open the ***ToDo.svelte*** file and import To Do List source files. Note that: +Open *ToDo.svelte* 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: @@ -83,7 +83,7 @@ import 'dhx-todolist-package/dist/todo.css'; ~~~ -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**. +Depending on the package, source files may be minified. In that case, import *todo.min.css* instead. - if you use the trial version of To Do List, specify the following paths: @@ -94,11 +94,11 @@ import '@dhx/trial-todolist/dist/todo.css'; ~~~ -In this tutorial you can see how to configure the **trial** version of To Do List. +This tutorial uses the **trial** version of To Do List. -#### Setting containers and adding To Do List with Toolbar +#### Set containers and add To Do List with Toolbar -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: +To display To Do List with Toolbar on the page, create containers for both components and initialize them with the corresponding constructors: ~~~html {3,6,10-11,13-17,27-28} title="ToDo.svelte" ~~~ -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**. +Depending on the package, source files may be minified. In that case, import *todo.min.css* instead. - if you use the trial version of To Do List, specify the following paths: @@ -90,11 +88,11 @@ import '@dhx/trial-todolist/dist/todo.css'; ~~~ -In this tutorial you can see how to configure the **trial** version of To Do List. +This tutorial uses the **trial** version of To Do List. -#### Setting containers and adding To Do List with Toolbar +#### Set containers and add To Do List with Toolbar -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: +To display To Do List with Toolbar on the page, create containers for both components and initialize them with the corresponding constructors: ~~~html {2,7-8,10-14} title="ToDo.vue" ~~~ -And apply the object destructuring: +Then apply object destructuring: ~~~js title="index.js" const { tasks, users, projects, priorities } = getData(); ~~~ -## Loading from local source +## Load from a local source -### Loading data on initialization +Use the following approaches to load data from a local source into To Do List. -You can load [a predefined data](guides/loading_data.md#preparing-data-to-load) into To Do List on the initialization stage in the following way: +### Load data on initialization + +Pass the data as configuration properties when creating the To Do List instance: ~~~js {2,5-8} title="index.js" const { ToDo } = todo; @@ -192,9 +194,9 @@ const list = new ToDo("#root", { }); ~~~ -### Loading data after initialization +### Load data after initialization -To load data from a local data source after initialization of the To Do List, use the [`parse()`](api/methods/parse_method.md) method: +To load data after initialization, use the [`parse()`](api/methods/parse_method.md) method: ~~~js {3,5,12-17} title="index.js" const { ToDo, Toolbar } = todo; @@ -216,9 +218,9 @@ list.parse({ }); ~~~ -## Saving and restoring state +## Save and restore state -To save the current state of a To Do, use the [`serialize()`](api/methods/serialize_method.md) method. It converts the data of the To Do List into a JSON object. +Use the [`serialize()`](api/methods/serialize_method.md) method to save the current state of To Do List. The method converts the data into a JSON object: ~~~js const state = list.serialize(); @@ -232,12 +234,12 @@ const state = list.serialize(); // } ~~~ -Then you can parse the data stored in the saved state array to a different To Do List. For example: +Pass the saved state to another To Do List instance with `parse()`: ~~~js -// creating a new To Do -const list2 = new ToDo("#root2", {}); +// create a new To Do List +const list2 = new ToDo("#root2", {}); -// parsing the state of To Do List into another To Do List +// parse the state into another To Do List list2.parse(state); ~~~ \ No newline at end of file diff --git a/docs/guides/localization.md b/docs/guides/localization.md index c6d91e7..69b9135 100644 --- a/docs/guides/localization.md +++ b/docs/guides/localization.md @@ -6,10 +6,12 @@ description: You can learn about the To Do List localization in the documentatio # Localization -You can present the interface of DHTMLX To Do List in any language. The library provides a number of predefined locales and gives the ability to create custom ones. By default, DHTMLX To Do List uses [English locale](#default-locale). +To Do List supports multiple interface languages through predefined and custom locales. By default, DHTMLX To Do List uses the [English locale](#default-locale). ## Default locale +The code below shows the full structure of the default English locale: + ~~~js const en = { calendar:{ // translations and settings of the calendar @@ -106,11 +108,11 @@ const en = { }; ~~~ -## Custom locale +## Create a custom locale -To initialize the To Do List component in non-English language, you need to: +To initialize To Do List in a non-English language, follow these steps: -- define necessary language settings: provide translations for all text labels (it can be any language you need) +- Define the language settings by providing translations for all text labels: ~~~js const de = { @@ -124,11 +126,11 @@ const de = { ~~~ :::tip -To create a custom locale, you can make a copy of the default ([English](#default-locale)) locale, and translate text labels from it into the required language. +Copy the default [English locale](#default-locale) and translate the text labels into the required language. ::: :::info -You can download [**a repository from GitHub**](https://github.com/web-widgets/wx-todo-locales/tree/master/locales) which includes locales of the To Do List for the following languages: +Download [a repository from GitHub](https://github.com/web-widgets/wx-todo-locales/tree/master/locales) with ready-made locales for the following languages: - Chinese (**cn**) - French (**fr**) @@ -140,10 +142,10 @@ You can download [**a repository from GitHub**](https://github.com/web-widgets/w - Russian (**ru**) - Spanish (**es**) -*The files don't include translations for the Calendar labels, therefore you will need to add them yourself.* +*The files do not include translations for the Calendar labels. Add them manually.* ::: -- apply the necessary locale to the To Do List component and its Toolbar via the corresponding **locale** properties: +- Apply the locale to To Do List and its Toolbar via the `locale` property: ~~~js {8,13} const { ToDo, Toolbar} = todo; @@ -163,11 +165,11 @@ const toolbar = new Toolbar("#toolbar", { ~~~ :::tip -To change the locale dynamically, use the related `setLocale()` methods of the [To Do List](api/methods/setlocale_method.md) and [Toolbar](api/toolbar_api/methods/setlocale_method.md) +To change the locale dynamically, use the `setLocale()` methods of [To Do List](api/methods/setlocale_method.md) and [Toolbar](api/toolbar_api/methods/setlocale_method.md). ::: ## Example -In this snippet you can see how to switch between the EN and DE locales: +The example below demonstrates switching between the EN and DE locales: diff --git a/docs/guides/multiselection.md b/docs/guides/multiselection.md index 5c39a89..44ec49e 100644 --- a/docs/guides/multiselection.md +++ b/docs/guides/multiselection.md @@ -6,11 +6,7 @@ description: You can learn about selection of multiple tasks in the documentatio # Multiple select and bulk operations -The To Do List library allows you to select multiple tasks and manage them at once. - -In this article we'll discuss the details on how to initialize To Do List with selected tasks, how to select one or several tasks after the initialization stage, how to get IDs of all selected tasks. - -We'll consider how to perform bulk operations over the selected tasks and provide you with a list of available operations. And, finally, we'll show you the ways of resetting selection. +To Do List lets you select multiple tasks and manage them at once. This guide covers how to initialize To Do List with pre-selected tasks, select tasks after initialization, retrieve selected task IDs, perform bulk operations, and reset selection. ![Multiselection](../assets/multiselection.png) @@ -18,9 +14,9 @@ We'll consider how to perform bulk operations over the selected tasks and provid Learn how to [select](../../#selecting-tasks) and [manage multiple tasks](../../#managing-multiple-tasks) via UI ::: -## Initially selected tasks +## Set initially selected tasks -If you want to create a To Do List with initially selected tasks, use the [`selected`](api/configs/selected_config.md) configuration property of To Do List: +Use the [`selected`](api/configs/selected_config.md) configuration property to initialize To Do List with pre-selected tasks: ~~~js {12} const list = new ToDo("#root", { @@ -40,18 +36,18 @@ const list = new ToDo("#root", { console.log(list.getSelection()); // ["1.1", "1.2", "2.2"] ~~~ -## Selecting tasks +## Select tasks -The library provides you with the [`selectTask()`](api/methods/selecttask_method.md) method which lets you select tasks after To Do List initialization. The method has two parameters: +Use the [`selectTask()`](api/methods/selecttask_method.md) method to select tasks after initialization. The method takes two parameters: -- `id` - the ID of the task to select -- `join` - defines whether To Do List should join the specified task to the previously selected tasks +- `id` — the ID of the task to select +- `join` — defines whether To Do List adds the task to the existing selection or replaces it -### Selecting one task +### Select one task -By default, the value of the **join** parameter is set to *false*. It means, that the method will select only the specified task without saving IDs of the previously selected tasks. +By default, `join` is `false`. The method selects only the specified task and clears the previous selection. -Take a look at the following code snippet: +The following code snippet demonstrates single-task selection: ~~~js {19} const list = new ToDo("#root", { @@ -78,11 +74,11 @@ list.selectTask({ console.log(list.getSelection()) // ["2.1"] ~~~ -### Selecting multiple tasks +### Select multiple tasks -In order to select multiple tasks, you need to set the value of the **join** parameter to *true*. In this case, the `selectTask()` method will select the specified task and will not reset selection of earlier selected tasks. +Set `join` to `true` to add a task to the existing selection without clearing previously selected tasks. -The most convenient way to select several tasks at once is shown below: +The following code snippet selects several tasks at once: ~~~js {14-18} const list = new ToDo("#root", { @@ -107,7 +103,7 @@ for (id of selected) { console.log(list.getSelection()) // ["1.1", "1.2", "2.2"] ~~~ -And here is an example of how you can select one more task: +The following code snippet adds one more task to an existing selection: ~~~js {3} console.log(list.getSelection()) // ["1.1", "1.2", "2.2"] @@ -117,27 +113,25 @@ list.selectTask({ id: "2.1", join: true }); console.log(list.getSelection()) // ["1.1", "1.2", "2.2", "2.1"] ~~~ -## Getting all selected tasks +## Get all selected tasks -To get all tasks that are currently selected, use the [`getSelection()`](api/methods/getselection_method.md) method: +Use the [`getSelection()`](api/methods/getselection_method.md) method to retrieve the IDs of all currently selected tasks: ~~~js -// sorted - disable; +// sorted - disabled list.getSelection({ sorted: false }); // ["1.2", "1.1", "2.2", "2.1"] -// sorted - enable; +// sorted - enabled list.getSelection({ sorted: true }); // ["1.1", "1.2", "2.1", "2.2"] ~~~ -Enable the **sorted** parameter if you need to get IDs of the selected tasks in the order they are displayed in List. +Set `sorted` to `true` to return task IDs in the order they appear in the list. -## Managing selected tasks +## Manage selected tasks -After you have selected multiple tasks, you may apply different operations to them at once. +Use the [`eachSelected()`](api/methods/eachselected_method.md) method to iterate over all selected tasks and apply an operation to each one. The `sorted` and `reversed` parameters control the iteration order. -For this purpose, the library includes the [`eachSelected()`](api/methods/eachselected_method.md) method that allows iterating over all selected tasks. The additional parameters of the method - **sorted** and **reversed** - let you define whether the tasks should be sorted or not and specify the direction of iteration. - -For example, you can apply the method to delete all selected tasks: +The following code snippet deletes all selected tasks: ~~~js list.eachSelected(id => { @@ -145,32 +139,30 @@ list.eachSelected(id => { }, true); ~~~ -Check the full list of available operations you can perform over multiple tasks [below](#list-of-available-operations). - -### List of available operations +The following API methods support bulk operations on multiple selected tasks: -Here is the full list of bulk operations you can perform over multiple selected tasks via API methods: +### Available bulk operations -- copying tasks via the [`copyTask()`](../../api/methods/copytask_method/) method -- pasting tasks via the [`pasteTask()`](../../api/methods/pastetask_method/) method -- moving tasks via the [`moveTask()`](../../api/methods/movetask_method/) method -- deleting tasks via the [`deleteTask()`](../../api/methods/deletetask_method/) method -- marking tasks complete/incomplete via the [`checkTask()`](../../api/methods/checktask_method/) and [`uncheckTask()`](../../api/methods/unchecktask_method/) methods -- demoting and promoting the nesting level of tasks via the [`indentTask()`](../../api/methods/indenttask_method/) and [`unindentTask()`](../../api/methods/unindenttask_method/) methods +- [`copyTask()`](../../api/methods/copytask_method/) — copy tasks +- [`pasteTask()`](../../api/methods/pastetask_method/) — paste tasks +- [`moveTask()`](../../api/methods/movetask_method/) — move tasks +- [`deleteTask()`](../../api/methods/deletetask_method/) — delete tasks +- [`checkTask()`](../../api/methods/checktask_method/), [`uncheckTask()`](../../api/methods/unchecktask_method/) — mark tasks complete or incomplete +- [`indentTask()`](../../api/methods/indenttask_method/), [`unindentTask()`](../../api/methods/unindenttask_method/) — change the nesting level of tasks -## Resetting selection +## Reset selection -### Unselecting one task +### Unselect one task -To remove selection from one selected task, pass the ID of the task as a parameter to the [`unselectTask()`](../../api/methods/unselecttask_method/) method: +To remove a task from the selection, pass the task ID to the [`unselectTask()`](../../api/methods/unselecttask_method/) method: ~~~js list.unselectTask({ id: "1.1" }); ~~~ -### Unselecting all tasks +### Unselect all tasks -To unselect all currently selected tasks, pass **id: null** to the [`unselectTask()`](../../api/methods/unselecttask_method/) method: +To clear the entire selection, pass `id: null` to the [`unselectTask()`](../../api/methods/unselecttask_method/) method: ~~~js list.unselectTask({ id: null }); diff --git a/docs/guides/project_index.md b/docs/guides/project_index.md index 7499d21..40558bd 100644 --- a/docs/guides/project_index.md +++ b/docs/guides/project_index.md @@ -8,15 +8,14 @@ description: You can learn how to manage projects in the documentation of the DH :::info -To configure projects, use the [`projects`](api/configs/projects_config.md) property of To Do List. +Use the [`projects`](api/configs/projects_config.md) property to configure projects. -To define what project a task will belong to, you need to pass the id of the necessary project to the **project** parameter of the related [`task`](api/configs/tasks_config.md) object +Pass the project ID to the `project` parameter of the [`task`](api/configs/tasks_config.md) object to assign a task to a project. -To make a certain project active on initialization of To Do List, use the [`activeProject`](api/configs/activeproject_config.md) property. +Use the [`activeProject`](api/configs/activeproject_config.md) property to set the active project on initialization. ::: - -The next guides will teach you how to work with the object of a project and how to implement basic operations with the projects via API. +The guides below cover the project object structure and basic project operations available through the API. import DocCardList from '@theme/DocCardList'; import {useCurrentSidebarCategory} from '@docusaurus/theme-common'; diff --git a/docs/guides/project_object_operations.md b/docs/guides/project_object_operations.md index e0c198a..88eeaf3 100644 --- a/docs/guides/project_object_operations.md +++ b/docs/guides/project_object_operations.md @@ -6,9 +6,9 @@ description: You can learn about project object in the documentation of the DHTM # Project object -## Getting a project object +## Get a project object -To get a project object, use the [`getProject()`](api/methods/getproject_method.md) method: +Use the [`getProject()`](api/methods/getproject_method.md) method to retrieve a project object: ~~~js {13} const projects = [ @@ -26,9 +26,9 @@ const toolbar = new Toolbar("#toolbar", { list.getProject({ id: "first" }); // -> {id: 'first', label: 'First project'} ~~~ -## Checking if a project exists +## Check if a project exists -To check whether a project exists or not, use the [`existsProject()`](api/methods/existsproject_method.md) method: +Use the [`existsProject()`](api/methods/existsproject_method.md) method to check whether a project exists: ~~~js {13-14} const projects = [ diff --git a/docs/guides/project_operations.md b/docs/guides/project_operations.md index 5aaea83..a5914da 100644 --- a/docs/guides/project_operations.md +++ b/docs/guides/project_operations.md @@ -6,9 +6,9 @@ description: You can learn about operations with projects in the documentation o # Operations with projects -## Changing the active project +## Change the active project -It is possible to change the currently active project via the [`setProject()`](../../api/methods/setproject_method/) method. It takes the id of a project as a parameter: +Use the [`setProject()`](../../api/methods/setproject_method/) method to switch the currently active project. The method takes the project ID as a parameter: ~~~js {9,16} const projects = [ @@ -29,9 +29,9 @@ const toolbar = new Toolbar("#toolbar", { list.setProject({ id: "first" }); ~~~ -## Adding a new project +## Add a project -You may create a new project via the [`addProject()`](../../api/methods/addproject_method/) method: +Use the [`addProject()`](../../api/methods/addproject_method/) method to create a new project: ~~~js {13-18} const projects = [ @@ -54,9 +54,9 @@ list.addProject({ }); ~~~ -## Updating a project +## Update a project -To dynamically update parameters of a project, apply the [`updateProject()`](../../api/methods/updateproject_method/) method. For instance, you can update the label of the project: +Use the [`updateProject()`](../../api/methods/updateproject_method/) method to update project parameters. For example, update the project label: ~~~js {13-18} const projects = [ @@ -79,9 +79,9 @@ list.updateProject({ }); ~~~ -## Deleting a project +## Delete a project -To remove an unnecessary project, apply the [`deleteProject()`](../../api/methods/deleteproject_method/) method: +Use the [`deleteProject()`](../../api/methods/deleteproject_method/) method to remove a project: ~~~js {17} const projects = [ @@ -104,7 +104,7 @@ list.deleteProject({ id: "first" }); ~~~ :::note -The tasks linked to the project won't be removed. They will be moved to the *"No project"* section +Tasks linked to the deleted project are not removed. The tasks move to the *"No project"* section. ~~~js console.log(list.getTask({id: "1"})); // -> {id: '1', text: 'Task 1', project: null} diff --git a/docs/guides/readonly_mode.md b/docs/guides/readonly_mode.md index b378ada..bff29da 100644 --- a/docs/guides/readonly_mode.md +++ b/docs/guides/readonly_mode.md @@ -6,12 +6,12 @@ description: You can learn about the read-only mode in the documentation of the # Read-only mode -To make the To Do List read-only, set the [`readonly`](../../api/configs/readonly_config/) configuration property to *true*. +Set the [`readonly`](../../api/configs/readonly_config/) configuration property to `true` to make To Do List read-only: ~~~js {8} const { ToDo, Toolbar } = todo; -// create To do list +// create To Do List const list = new ToDo("#root", { tasks, users, @@ -25,9 +25,11 @@ const toolbar = new Toolbar("#toolbar", { ~~~ :::info -In this mode, the tasks are non-editable. You will be able only to select a task and mark it as complete or incomplete. +In read-only mode, tasks are not editable. Users can only select a task and mark it as complete or incomplete. ::: ## Example +The example below demonstrates To Do List in read-only mode: + \ No newline at end of file diff --git a/docs/guides/sorting_filtering_tasks.md b/docs/guides/sorting_filtering_tasks.md index 7ec7819..94184df 100644 --- a/docs/guides/sorting_filtering_tasks.md +++ b/docs/guides/sorting_filtering_tasks.md @@ -6,13 +6,13 @@ description: You can learn about sorting and filtering of tasks in the documenta # Sorting and filtering tasks -## Sorting tasks +## Sort tasks -The library allows you to sort tasks in the list after initialization of To Do List. There are two ways to view the tasks in the sorted order: +Sort tasks in the list using one of two approaches: -- via the **Sort by** option of the [Toolbar menu](../../#toolbar). You may sort tasks by *text*, *due date*, *completion date*, *creation date*, or *editing date* +- via the **Sort by** option of the [Toolbar menu](../../#toolbar) — sort by text, due date, completion date, creation date, or editing date -- via the [`setSort()`](api/methods/setsort_method.md) method. You may specify your own search function or implement sorting by a [task attribute](api/configs/tasks_config.md#parameters). For instance: +- via the [`setSort()`](api/methods/setsort_method.md) method — specify a custom sort function or sort by a [task attribute](api/configs/tasks_config.md#parameters). For example: ~~~js list.setSort({ @@ -22,16 +22,16 @@ list.setSort({ }); ~~~ -## Filtering tasks +## Filter tasks -You can find the tasks that match the specified criteria in 2 ways: +Find tasks that match specific criteria in two ways: -- via the [search bar](../../#toolbar) of Toolbar +- via the [search bar](../../#toolbar) in the Toolbar -- through the [`setFilter()`](api/methods/setfilter_method.md) method. The method supports the *strict* mode of filtering that allows you to filter tasks by the exact match. +- via the [`setFilter()`](api/methods/setfilter_method.md) method. The `strict` mode filters tasks by exact match. ~~~js -// filter data by the specified rules +// filter tasks by the specified rules list.setFilter({ match: "#tag1", highlight: true, diff --git a/docs/guides/stylization.md b/docs/guides/stylization.md index f0dac4b..4367501 100644 --- a/docs/guides/stylization.md +++ b/docs/guides/stylization.md @@ -6,15 +6,15 @@ description: You can learn about the To Do List Stylization in the documentation # Stylization -You can stylize any part of the interface of DHTMLX To Do List to meet your project requirements. For this, the library provides a wide range of CSS variables. Note, that To Do List includes **two** types of CSS variables: +Stylize any part of the DHTMLX To Do List interface with CSS variables. To Do List includes **two** types of CSS variables: -- variables related to To Do List style -- variables related to the WX library style (font, icons, checkboxes, etc) +- variables related to the To Do List style +- variables related to the WX library style (font, icons, checkboxes, etc.) ## Default style :::tip Note -New versions of the To Do List can bring some changes for the variables and their names. So, please, do not forget to check the names after updating to the newest version and promptly modify them in your code to avoid problems with display of the component +New versions of To Do List may change variable names. After updating, verify the variable names in your code to avoid display issues. ::: ~~~html @@ -95,9 +95,9 @@ New versions of the To Do List can bring some changes for the variables and thei ## Custom style -To customize the appearance of To Do List, just change the values of the necessary CSS variables. +Change the values of the relevant CSS variables to customize the appearance of To Do List. -In this snippet you can see how to apply a custom style to To Do List: +The example below applies a custom style to To Do List: diff --git a/docs/guides/task_index.md b/docs/guides/task_index.md index 50961b7..28abe4a 100644 --- a/docs/guides/task_index.md +++ b/docs/guides/task_index.md @@ -7,10 +7,10 @@ description: You can learn about managing tasks in the documentation of the DHTM # Managing tasks :::info -To configure tasks, use the [`tasks`](api/configs/tasks_config.md) property of To Do List +Use the [`tasks`](api/configs/tasks_config.md) property to configure tasks. ::: -In the next guides you will find information related to the API of To Do List intended for work with tasks. You will learn how to get the object of a task, how to work with parents and children of a task, how to perform different operations over tasks (such as adding, deleting, updating, copying, moving a task, etc), how to select multiple tasks and manage them at once, and more. +The guides below cover the To Do List API for working with tasks: retrieving task objects, navigating parent and child relationships, performing operations such as adding, deleting, updating, copying, and moving tasks, selecting multiple tasks, and more. import DocCardList from '@theme/DocCardList'; import {useCurrentSidebarCategory} from '@docusaurus/theme-common'; diff --git a/docs/guides/task_object.md b/docs/guides/task_object.md index 25fbf54..8e692d7 100644 --- a/docs/guides/task_object.md +++ b/docs/guides/task_object.md @@ -6,9 +6,9 @@ description: You can learn about task object and task id in the documentation of # Task object/Id -## Getting a task object +## Get a task object -To get a task object, use the [`getTask()`](api/methods/gettask_method.md) method: +Use the [`getTask()`](api/methods/gettask_method.md) method to retrieve a task object: ~~~js const tasks = [ @@ -22,9 +22,9 @@ const list = new ToDo("#root", { tasks }); list.getTask({ id: "1.2" }); // -> {id: '1.2', text: 'Task 1.2', parent: '1'} ~~~ -## Checking if a task exists +## Check if a task exists -To check whether a task exists or not, use the [`existsTask()`](api/methods/existstask_method.md) method: +Use the [`existsTask()`](api/methods/existstask_method.md) method to check whether a task exists: ~~~js const tasks = [ @@ -39,9 +39,9 @@ list.existsTask({ id: "2" }); // -> false list.existsTask({ id: "1.2" }); // -> true ~~~ -## Getting child Ids +## Get child IDs -To get the children of a task, use the [`getChildrenIds()`](api/methods/getchildrenids_method.md) method: +Use the [`getChildrenIds()`](api/methods/getchildrenids_method.md) method to get the IDs of a task's children: ~~~js const tasks = [ @@ -55,27 +55,27 @@ console.log(list.getChildrenIds({ id: "1" })); // ['1.1', '1.1.1', '1.2'] console.log(list.getChildrenIds({ id: "1", tree: false })); // ['1.1', '1.2'] ~~~ -If you apply filtering, some tasks can become invisible on the page. The **filtered** parameter of the method gives you the ability to define whether the filtered (hidden) tasks must be included into the result (*filtered: false* by default) or not (*filtered: true*): +When filtering is active, some tasks become hidden. Use the `filtered` parameter to control whether hidden tasks are included in the result (`filtered: false` by default): ~~~js // filter the tasks list.setFilter({ match: "#tag1", highlight: true }); -// get children of the task after filtering +// get children including hidden tasks console.log(list.getChildrenIds({ id: "1", filtered: false })); // -> ['1.1', '1.1.1', '1.2'] -// enable the "filtered" parameter +// get children excluding hidden tasks console.log(list.getChildrenIds({ id: "1", filtered: true })); // -> ['1.1', '1.1.1'] ~~~ -The **tree** parameter of the method allows you to get the IDs only for the first-level children of the task. For that, set the parameter to *false*: +Set `tree` to `false` to return only first-level children: ~~~js console.log(list.getChildrenIds({ id: "1", filtered: true, tree: false })); // -> ['1.1'] console.log(list.getChildrenIds({ id: "1", filtered: false, tree: false })); // -> ['1.1', '1.2'] ~~~ -The **hideCompleted** parameter of the method lets you get the IDs only of those children tasks which yet need to be done, excluding the completed ones. For that, set the parameter to *true*: +Set `hideCompleted` to `true` to exclude completed child tasks from the result: ~~~js {4,11,18,21} const tasks = [ @@ -101,9 +101,9 @@ console.log(list.getChildrenIds({ id: "1", filtered: false, tree: true, hideComp console.log(list.getChildrenIds({ id: "1", filtered: false, tree: true, hideCompleted: true})); // -> ['1.1', '1.2'] ~~~ -## Checking if a task has children +## Check if a task has children -To check whether a task has child tasks, apply the [`hasChildren()`](api/methods/haschildren_method.md) method: +Use the [`hasChildren()`](api/methods/haschildren_method.md) method to check whether a task has child tasks: ~~~js const tasks = [ @@ -117,7 +117,7 @@ const tasks = [ console.log(list.hasChildren({ id: "1.1" })); // -> true ~~~ -If you apply filtering, some tasks can become invisible on the page. The **filtered** parameter of the method gives you the ability to define whether the filtered (hidden) tasks must be included into the result (*filtered: false* by default) or not (*filtered: true*): +When filtering is active, use the `filtered` parameter to control whether hidden tasks count as children (`filtered: false` by default): ~~~js // filter the tasks @@ -128,7 +128,7 @@ console.log(list.hasChildren({ id: "1.1" })); // -> true console.log(list.hasChildren({ id: "1.1", filtered: true })); // -> false ~~~ -The **hideCompleted** parameter of the method lets you exclude completed tasks from the result. For that, set the parameter to *true*: +Set `hideCompleted` to `true` to exclude completed tasks from the result: ~~~js {4,9} const tasks = [ @@ -142,9 +142,9 @@ console.log(list.hasChildren({ id: "1.1" })); // -> true console.log(list.hasChildren({ id: "1.1", hideCompleted: true })); // -> false ~~~ -## Getting parent Ids +## Get parent IDs -To get the parents of a task, use the [`getParentIds()`](api/methods/getparentids_method.md) method: +Use the [`getParentIds()`](api/methods/getparentids_method.md) method to get all ancestor IDs of a task: ~~~js const tasks = [ @@ -159,9 +159,9 @@ const list = new ToDo("#root", { tasks }); console.log(list.getParentIds({ id: "1.1.1" })); // ['1.1', '1'] ~~~ -## Getting Ids of selected tasks +## Get IDs of selected tasks -To get IDs of all currently selected tasks, use the [`getSelection()`](api/methods/getselection_method.md) method: +Use the [`getSelection()`](api/methods/getselection_method.md) method to get the IDs of all currently selected tasks: ~~~js const tasks = [ diff --git a/docs/guides/task_operations.md b/docs/guides/task_operations.md index 711009e..e84b2d8 100644 --- a/docs/guides/task_operations.md +++ b/docs/guides/task_operations.md @@ -6,9 +6,9 @@ description: You can learn about operations with tasks in the documentation of t # Operations with tasks -## Adding a new task +## Add a task -To add a new task to the list, use the [`addTask()`](../../api/methods/addtask_method/) method: +Use the [`addTask()`](../../api/methods/addtask_method/) method to add a task to the list: ~~~js list.addTask({ @@ -23,30 +23,31 @@ list.addTask({ }); ~~~ -## Copying/pasting a task +## Copy and paste a task ### Copy and paste -The quickest way to copy and paste a task is use the [`copyTask()`](../../api/methods/copytask_method/) method. For that, it is necessary to pass the following parameters to the method: -- the ID of the task that you want to copy and paste -- the ID of the future project (if it exists) -- the ID of the target task where the copied task should be pasted +Use the [`copyTask()`](../../api/methods/copytask_method/) method to copy and paste a task. Pass the following parameters: + +- the ID of the task to copy and paste +- the ID of the target project (if applicable) +- the ID of the target task where the copy is pasted - other parameters are optional ~~~js list.copyTask({ id: "1.1", // ID of the task to copy - join: false, // resets copies of other tasks and copies only this task - project: "p_2", // ID of the future project (if exists) - parent: "2.1", // ID of the future parent + join: false, // reset other copies and copy only this task + project: "p_2", // ID of the target project (if applicable) + parent: "2.1", // ID of the target parent targetId: "2.1.2", // ID of the target task - reverse: true // the task will be pasted before the target one + reverse: true // paste the task before the target }); ~~~ ### Copy to the clipboard -To copy a necessary task to the clipboard without its further pasting, pass the ID of the task to the [`copyTask()`](../../api/methods/copytask_method/) method: +To copy a task to the clipboard without pasting, pass only the task ID to [`copyTask()`](../../api/methods/copytask_method/): ~~~js list.copyTask({ @@ -54,15 +55,15 @@ list.copyTask({ }); ~~~ -### Saving IDs of other copies +### Save IDs of other copies :::info -If you want to copy the task and save other previously copied tasks, you need to pass the **join: true** parameter to the [`copyTask()`](../../api/methods/copytask_method/) method. Otherwise, only the specified task will be copied, all others copies created earlier will be reset. +To copy a task and preserve previously copied tasks, pass `join: true` to the [`copyTask()`](../../api/methods/copytask_method/) method. If you do not pass this parameter, only the specified task is copied and earlier copies are reset. ::: ### Paste from the clipboard -You can paste the copied task from the clipboard to the necessary place via the [`pasteTask()`](../../api/methods/pastetask_method/) method: +Paste the copied task to the target position with the [`pasteTask()`](../../api/methods/pastetask_method/) method: ~~~js list.pasteTask({ @@ -71,9 +72,9 @@ list.pasteTask({ }); ~~~ -## Updating a task +## Update a task -To dynamically update parameters of a task, apply the [`updateTask()`](../../api/methods/updatetask_method/) method: +Use the [`updateTask()`](../../api/methods/updatetask_method/) method to update task parameters: ~~~js list.updateTask({ @@ -84,54 +85,53 @@ list.updateTask({ }); ~~~ -## Moving a task +## Move a task -To move a task to another position, use the [`moveTask()`](../../api/methods/movetask_method/) method: +Use the [`moveTask()`](../../api/methods/movetask_method/) method to move a task to another position: ~~~js list.moveTask({ id: "1.1", // ID of the task to move - project:"p_2", // ID of the future project (if exists) - parent: "2", // ID of the future parent + project: "p_2", // ID of the target project (if applicable) + parent: "2", // ID of the target parent targetId: "2.1", // ID of the target task - reverse: true // the task will be placed before the target one + reverse: true // place the task before the target }); ~~~ :::note -If you move a parent task, it will be moved together with its subtasks. +A parent task moves together with its subtasks. ::: -## Deleting a task +## Delete a task -To delete a task, use the [`deleteTask()`](../../api/methods/deletetask_method/) method: +Use the [`deleteTask()`](../../api/methods/deletetask_method/) method to delete a task: ~~~js list.deleteTask({ id: "1.2" }); ~~~ :::note -The method removes the task with all its child tasks +The method removes the task together with all its child tasks. ::: -## Expanding/collapsing a task +## Expand or collapse a task -To collapse a task, use the [`collapseTask()`](../../api/methods/collapsetask_method/) method. The method takes the ID of the task as a parameter: +Use the [`collapseTask()`](../../api/methods/collapsetask_method/) method to collapse a task: ~~~js list.collapseTask({ id: "1.1" }); - ~~~ -To expand a collapsed task by its ID, use the [`expandTask()`](../../api/methods/expandtask_method/) method: +Use the [`expandTask()`](../../api/methods/expandtask_method/) method to expand a collapsed task: ~~~js list.expandTask({ id: "1.1" }); ~~~ -## Marking a task complete/incomplete +## Mark a task complete or incomplete -You may mark the necessary task as complete/incomplete via the corresponding [`checkTask()`](../../api/methods/checktask_method/) and [`uncheckTask()`](../../api/methods/unchecktask_method/) methods: +Use the [`checkTask()`](../../api/methods/checktask_method/) and [`uncheckTask()`](../../api/methods/unchecktask_method/) methods to mark a task as complete or incomplete: ~~~js list.checkTask({ @@ -145,9 +145,9 @@ list.uncheckTask({ }); ~~~ -When `manual: false` is set, the result of applying the method depends on the value which is specified for the **behavior** attribute of the **completed** parameter of the [`taskShape`](api/configs/taskshape_config.md) property. +With `manual: false`, the result depends on the `behavior` value in the `completed` parameter of [`taskShape`](api/configs/taskshape_config.md). -If the "auto" mode is specified via the **taskShape** property but you need to check/uncheck the task in the "manual" mode, set the **manual** parameter of the [`checkTask()`](../../api/methods/checktask_method/) or [`uncheckTask()`](../../api/methods/unchecktask_method/) method to *true*: +To check or uncheck a task in `"manual"` mode when `taskShape` uses `"auto"` mode, set the `manual` parameter to `true`: ~~~js list.checkTask({ @@ -161,11 +161,11 @@ list.uncheckTask({ }); ~~~ -## Changing the indent level of a task +## Change the indent level of a task -To change the nesting level of a task dynamically, use the following two methods: +Use the following methods to change the nesting level of a task: -- [`indentTask()`](../../api/methods/indenttask_method/) - to demote the nesting level of a task to one lower level +- [`indentTask()`](../../api/methods/indenttask_method/) — demote the task one nesting level down ~~~js const list = new ToDo("#root", { @@ -182,7 +182,7 @@ list.indentTask({ id: "1.2" }); console.log(list.getParentIds({ id: "1.2" })); // ['1.1', '1'] ~~~ -- [`unindentTask()`](../../api/methods/unindenttask_method/) - to promote the nesting level of the task to one higher level +- [`unindentTask()`](../../api/methods/unindenttask_method/) — promote the task one nesting level up ~~~js const list = new ToDo("#root", { @@ -200,12 +200,12 @@ console.log(list.getParentIds({ id: "1.2" })); // [] ~~~ :::info -The result of applying the methods depends on the structure of the list +Results depend on the list structure. ::: -## Filtering tasks +## Filter tasks -You can find the tasks that match the specified criteria with the help of the [`setFilter()`](../../api/methods/setfilter_method/) method. The method supports the *strict* mode of filtering that allows you to filter tasks by the exact match. +Use the [`setFilter()`](../../api/methods/setfilter_method/) method to find tasks that match specific criteria. The `strict` mode filters tasks by exact match. ~~~js // filter data by the specified rules diff --git a/docs/guides/task_users.md b/docs/guides/task_users.md index 78d9965..0c36fff 100644 --- a/docs/guides/task_users.md +++ b/docs/guides/task_users.md @@ -8,9 +8,9 @@ description: You can learn about task assignees in the documentation of the DHTM You can delegate tasks to one or several people. -## Configuring task assignees +## Configure task assignees -The list of assignees is specified via the [`users`](../../api/configs/users_config/) configuration property of To Do List. +Specify the list of assignees with the [`users`](../../api/configs/users_config/) configuration property. ~~~js const users = [ @@ -23,9 +23,9 @@ const users = [ const list = new ToDo("#root", { users }); ~~~ -## Setting assignees on initialization stage +## Set assignees on initialization -To assign people to the necessary task on the initialization stage, pass the id(s) of the assignees to the **assigned** parameter of the related [`task`](../../api/configs/tasks_config/) object: +To assign users to a task on initialization, pass the assignee IDs to the `assigned` parameter of the [`task`](../../api/configs/tasks_config/) object: ~~~js {11} const users = [ @@ -48,18 +48,18 @@ const list = new ToDo("#root", { }); ~~~ -As a result, the assigned people will be displayed to the right of the task. +The assigned users appear to the right of the task. ![users](../assets/users.png) -To view the list of people assigned to a task, click on the people avatars. To close the opened list, click outside it. +To view the assignees of a task, click the avatars. Click outside the list to close it. -## Changing task assignees +## Change task assignees -You can re-assign or remove a task assignee after initialization of To Do List in the following ways: +Re-assign or remove a task assignee after initialization in two ways: - via the **Assign to** option of the task menu -- via the corresponding [`assignUser()`](../../api/methods/assignuser_method/) and [`unassignUser()`](../../api/methods/unassignuser_method/) methods, for example: +- via the [`assignUser()`](../../api/methods/assignuser_method/) and [`unassignUser()`](../../api/methods/unassignuser_method/) methods, for example: ~~~js // assign a person to the task diff --git a/docs/guides/working_with_server.md b/docs/guides/working_with_server.md index fabf97c..e2f006a 100644 --- a/docs/guides/working_with_server.md +++ b/docs/guides/working_with_server.md @@ -5,50 +5,50 @@ description: You can learn about working with server in the documentation of the --- # Working with server -DHTMLX To Do List allows working both with the client and server data. The widget doesn't have any special requirements for the backend. It can be easily connected with any backend platform which supports the REST API (RESTful API). +To Do List works with both client-side and server-side data. The widget has no special backend requirements and connects to any platform that supports REST API. :::info -By default, the widget comes with the built-in [**Go**](https://github.com/web-widgets/todo-go) and [**Node**](https://github.com/web-widgets/todo-node) backend. But you can use your custom server scripts as well. +By default, the widget includes a built-in [Go](https://github.com/web-widgets/todo-go) and [Node](https://github.com/web-widgets/todo-node) backend. You can also use custom server scripts. ::: + ## RestDataProvider -The To Do List has the **RestDataProvider** service that completely supports REST API for dealing with the backend. It allows interacting with the server and perform the following data operations: - -- **"add-task"** -- **"update-task"** -- **"delete-task"** -- **"add-project"** -- **"update-project"** -- **"delete-project"** -- **"set-project"** -- **"move-task"** -- **"clone-task"** -## REST methods +To Do List includes the `RestDataProvider` service with full REST API support. The service handles the following data operations: -The **RestDataProvider** service includes the special REST methods for dynamic data loading: +- `"add-task"` +- `"update-task"` +- `"delete-task"` +- `"add-project"` +- `"update-project"` +- `"delete-project"` +- `"set-project"` +- `"move-task"` +- `"clone-task"` + +## REST methods -- [`getProjects()`](api/rest_api/methods/getprojects_method.md) - gets a promise with the **projects data** -- [`getProjectTasks()`](api/rest_api/methods/getprojecttasks_method.md) - gets a promise with the **tasks data** of the specified **project** -- [`getTags()`](api/rest_api/methods/gettags_method.md) - gets a promise with a list of **default tags** -- [`getTasks()`](api/rest_api/methods/gettasks_method.md) - gets a promise with the **tasks data** -- [`getUsers()`](api/rest_api/methods/getusers_method.md) - gets a promise with the **users data** -- [`setAPI()`](api/rest_api/methods/setapi_method.md) - sets API of the To Do List component into RestDataProvider -- [`send()`](api/rest_api/methods/send_method.md) - sends a necessary request to the server and gets a promise with or without data depending on the request +`RestDataProvider` provides the following methods for dynamic data loading: -## Interacting with backend +- [`getProjects()`](api/rest_api/methods/getprojects_method.md) — returns a promise with projects data +- [`getProjectTasks()`](api/rest_api/methods/getprojecttasks_method.md) — returns a promise with task data for the specified project +- [`getTags()`](api/rest_api/methods/gettags_method.md) — returns a promise with the list of default tags +- [`getTasks()`](api/rest_api/methods/gettasks_method.md) — returns a promise with tasks data +- [`getUsers()`](api/rest_api/methods/getusers_method.md) — returns a promise with users data +- [`setAPI()`](api/rest_api/methods/setapi_method.md) — sets the To Do List API into `RestDataProvider` +- [`send()`](api/rest_api/methods/send_method.md) — sends a request to the server and returns a promise with or without data -To interact with the server, you need to connect **RestDataProvider** to the corresponding server scripts. If you want to use the built-in backend, you can find the needed scripts in the following repositories: +## Interact with the backend -- [**Go**](https://github.com/web-widgets/todo-go) backend -- [**Node**](https://github.com/web-widgets/todo-node) backend +Connect `RestDataProvider` to the server scripts. Use one of the built-in backends or create a custom one: -or you can create a custom one. +- [Go](https://github.com/web-widgets/todo-go) backend +- [Node](https://github.com/web-widgets/todo-node) backend :::tip -If you use custom backend, refer to the [**REST API routes**](../../api/rest_api/routes/rest_routes_overview/) topic for more information! +For custom backends, see the [REST API routes](../../api/rest_api/routes/rest_routes_overview/) reference. ::: -To connect **RestDataProvider** to the backend, you need to call the **new RestDataProvider()** constructor by passing the corresponding **URL** as a parameter. +Call the `new RestDataProvider()` constructor and pass the server URL as a parameter: ~~~js {4-5,23-24} const { ToDo, Toolbar, RestDataProvider } = todo; @@ -79,20 +79,20 @@ Promise.all([ ~~~ :::info -You need to include **RestDataProvider** into the **Event Bus** order via the [`api.setNext()`](api/internal/setnext_method.md) method to perform operations with data (*adding, deleting,* etc) and send the corresponding requests to the server +Include `RestDataProvider` in the Event Bus order via the [`api.setNext()`](api/internal/setnext_method.md) method to perform data operations (adding, deleting, etc.) and send requests to the server. ::: ### Example -The snippet below shows you how to connect **RestDataProvider** to the backend and load server data dynamically: +The example below connects `RestDataProvider` to the backend and loads server data dynamically: ## Multiuser backend -Task management tools, such as our To Do List, are highly sought after by businesses of all sizes. Considering this, it is crucial to provide a seamless user experience for all users, regardless of the number. Our new feature allows multiple users to efficiently manage the same tasks on the list in real-time, without the need for page reloads. As a result, users can collaborate and stay up-to-date with one another's actions, enhancing productivity and overall user satisfaction. +To Do List supports real-time collaboration. Multiple users can manage the same tasks simultaneously without page reloads. -To implement a multiuser backend, you need to get authorization on the server before the To Do List initialization. For this, you can create the `login()` function: +To implement a multiuser backend, obtain server authorization before initializing To Do List. Create a `login()` function: ~~~js {} const login = (url) => { @@ -109,7 +109,7 @@ const login = (url) => { } ~~~ -The `login()` function returns the server token that is crucial for all subsequent interactions with the server. The token is included in each request as the value of the **Remote-Token** header in the following way: +The `login()` function returns a server token required for all subsequent server interactions. Pass the token in each request as the `Remote-Token` header value: ~~~js {} login(url).then(token => { @@ -119,7 +119,7 @@ login(url).then(token => { }); ~~~ -After the initialization, you need to add WebSocket aimed to listen for events from the server. It can be done in the following way: +After initialization, add a WebSocket to listen for server events: ~~~js {14-16,18-24} Promise.all([ @@ -149,17 +149,17 @@ Promise.all([ }); ~~~ -After integrating the multiuser backend into your app, you can simplify collaboration between users and enable them to keep track of any changes via the UI in a real time. +With multiuser backend configured, users see each other's changes in the UI in real time. ### Example -The snippet below shows how to configure the multiuser backend to track changes of other users in a real time: +The example below configures the multiuser backend to track changes in real time: -## Customization of server events +## Customize server events -You can define your own logic for handling server events. For this purpose, you need to pass the **handlers** object to the `RemoteEvents.on(handlers)` method. The **handlers** object should have the following structure: +Define custom logic for handling server events by passing a `handlers` object to the `RemoteEvents.on(handlers)` method. The `handlers` object has the following structure: ~~~js {} { @@ -168,14 +168,14 @@ You can define your own logic for handling server events. For this purpose, you } ~~~ -When any change occurs on the server, it returns the name of the modified element. These names can vary depending on the server logic. +When a change occurs on the server, the server returns the name of the modified element. Names vary depending on server logic. -The data updated on the client side will be placed in the **obj** argument of the `function(obj: any)` function. To specify an operation, there is a `type: string` field. It can take the following values: +The updated data appears in the `obj` argument of the `function(obj: any)` function. The `type: string` field specifies the operation and takes the following values: - For **tasks**: `"add-task"`, `"update-task"`, `"delete-task"`, `"move-task"`, `"clone-task"` - For **projects**: `"add-project"`, `"update-project"`, `"delete-project"`, `"move-project"`, `"clone-project"` -In the following code snippet you can see the implementation details: +The following code snippet demonstrates the implementation: ~~~js {} const todoInstance = new todo.ToDo("#root", config); @@ -226,11 +226,11 @@ const remoteEvents = new todo.RemoteEvents(remoteEventsURL, token); remoteEvents.on(handlers); ~~~ -The `RestDataProvider.getIDResolver()` method returns a function that is necessary to synchronize client IDs with server IDs. When a new object (*task/project*) is created on the client side, the received object will have a temporary ID and its corresponding server ID in `RestDataProvider`. The `idResolver()` function allows synchronizing the client ID with the server ID. This function has the following format: `idResolver(id: TID, type: number)` +The `RestDataProvider.getIDResolver()` method returns a function that synchronizes client IDs with server IDs. When a new object (task or project) is created on the client side, the object has a temporary client ID and a corresponding server ID in `RestDataProvider`. Use `idResolver()` to synchronize them. The function signature is: `idResolver(id: TID, type: number)`. -The `type` argument is the type of model that takes the following values: +The `type` argument identifies the model type: -- `TaskID` - 1 -- `ProjID` - 2 +- `TaskID` — 1 +- `ProjID` — 2 -To prevent the request from being sent to the server, you need to use the `skipProvider: true` flag when calling the `todoInstance.api.exec()` method. +To prevent a request from being sent to the server, pass the `skipProvider: true` flag to the `todoInstance.api.exec()` method.