Tasklist widget

The Tasklist widget is a component that displays a list of tasks.

Each task can be marked as done. The widget can render existing tasks and allows for adding new tasks, as well as deleting or editing previously created tasks. It operates entirely on the client side and can integrate with any backend service.

This widget is licensed under the MIT license.

Quick start

First steps

To start with the widget, you need to add the necessary package to your project first.

npm install @svar-ui/vue-core
npm install @svar-ui/vue-tasklist

or

yarn add @svar-ui/vue-core
yarn add @svar-ui/vue-tasklist

Now, you can import the widget into your project.

<script setup>
  import { Willow } from '@svar-ui/vue-core';
  import { Tasklist } from '@svar-ui/vue-tasklist';
</script>

<template>
  <Willow>
    <Tasklist />
  </Willow>
</template>

The Willow component is a default theme wrapper that will add necessary styles for all SVAR widgets. The Tasklist component may work without it, but it will not have any styles, and it will be your task to add them. It is a common approach when the Willow tag is added once at the top level of your application.

Full init code

To see the widget in action, you need to provide some tasks to the widget.

Init tasklist widget with data

<script setup>
  import { Tasklist, Willow } from '@svar-ui/vue-tasklist';

  import { Willow } from '@svar-ui/vue-core';

  const value = [
    {
      id: 7,
      content: "Optimize performance in Vue applications",
      status: 1,
    },
    {
      id: 8,
      content:
        "Work with API requests and data handling in Vue applications",
      status: 0,
    }
  ];
</script>

<template>
  <Willow>
    <Tasklist :value="value" />
  </Willow>
</template>

note

Make sure you apply a theme if you use the Tasklist component standalone. Please, refer to applying a theme for more information.

Visual themes

The widget is provided in two visual styles - Light and Dark, which are controlled by the theme tag.

<script setup>
import { Willow, WillowDark } from "@svar-ui/vue-core";
</script>

<template>
  <!-- Light -->
  <Willow>
    <Tasklist />
  </Willow>

  <!-- Dark -->
  <WillowDark>
    <Tasklist />
  </WillowDark>
</template>

Initialization

The tasklist widget can be initialized in various ways depending on the requirements. It supports loading tasks dynamically from an API, starting with an empty list, or initializing with predefined data. Below are the detailed options for setting up the widget.

Initializing the widget and loading Tasks dynamically

<script setup>
  import { ref, onMounted } from 'vue';
  import { Tasklist } from '@svar-ui/vue-tasklist';

  const value = ref([]);

  onMounted(() => {
    fetch('/api/tasks')
      .then(r => r.json())
      .then(x => value.value = x);
  });
</script>

<template>
  <Tasklist :value="value" />
</template>

This method is used when tasks need to be fetched from a backend server or API. The fetch function retrieves the task data in JSON format and assigns it to the value ref. The Tasklist widget is rendered once the data is loaded. This approach is ideal for applications where the task list is stored in a database or provided by an external service. The reactive ref ensures proper rendering when the data arrives.

---

Initializing an empty Tasklist widget

<script setup>
  import { Tasklist } from '@svar-ui/vue-tasklist';
</script>

<template>
  <Tasklist />
</template>

This setup is used when starting with no predefined tasks. The widget initializes without any tasks, allowing users to add tasks manually. This is suitable for scenarios where the task list is built from scratch by the user during runtime. No data fetching or predefined task setup is required in this case.

---

Initializing the widget with predefined Task data

<script setup>
  import { Tasklist } from '@svar-ui/vue-tasklist';

  const value = [
    {
      id: 7,
      content: "Optimize performance in Vue applications",
      status: 1,
    },
    {
      id: 8,
      content:
        "Work with API requests and data handling in Vue applications",
      status: 0,
    }
  ];
</script>

<template>
  <Tasklist :value="value" />
</template>

This method initializes the widget with a predefined list of tasks. The value array contains task objects, each with an id, content, and status. The status field indicates whether a task is completed (1) or not (0). This approach is suitable when there is a need to display an initial set of tasks, such as a default list or tasks saved locally. It eliminates the need for fetching data from an external source.

Data management

The Tasklist widget supports integration with different data sources for handling task data. Tasks can be loaded from a REST API or other data storage systems, saved back to these systems, and manipulated in various ways. These methods ensure flexibility, making the widget adaptable for diverse applications.

Loading Tasks from a REST API

The widget can fetch tasks from a REST API using a helper method. This is useful when tasks are stored in a backend service that exposes a RESTful endpoint. The example below demonstrates how to configure the widget to load tasks from a specified URL.

<script setup>
  import { RestURL } from "@svar-ui/lib-data-provider";
  import { Tasklist } from '@svar-ui/vue-tasklist';

  const url = new RestURL("https://some.com/api/tasks");
</script>

<template>
  <Tasklist :ondata="v => url.get(v)" />
</template>

• The RestURL helper is used to define the API endpoint (https://some.com/api/tasks).
• The ondata property of the Tasklist widget is set to fetch tasks using the get method of the RestURL.
• This setup allows dynamic task loading whenever the widget is initialized or refreshed.

Saving Task changes locally

The widget can save changes to tasks in local storage. This is suitable for scenarios where tasks are managed on the client side without involving a backend. The following example shows how to use local storage for saving task updates.

<script setup>
  import { Tasklist } from '@svar-ui/vue-tasklist';
</script>

<template>
  <Tasklist
    :value="1"
    :ondata="v => localStorage.getItem(`tasks-${v}`)"
    :onchange="({ value }) =>
      localStorage.setItem(`tasks-${value}`, JSON.stringify(value))"
  />
</template>

• The value property specifies the identifier for the task list.
• The ondata property retrieves tasks from local storage using the key tasks-{value}.
• The onchange property saves changes back to local storage in JSON format when tasks are updated in the widget.

Loading and saving tasks via REST API with comments

The widget allows both loading tasks and saving changes, including handling comments, using a REST API. This is ideal when additional task metadata, such as comments, needs to be persisted on the backend.

<script setup>
  import { RestURL } from "@svar-ui/lib-data-provider";
  import { Tasklist } from '@svar-ui/vue-tasklist';

  const url = new RestURL("https://some.com/api/tasks");
</script>

<template>
  <Tasklist
    :ondata="v => url.get(v)"
    :onchange="({ action, task, id, originalValue: v }) =>
      url.path(v).save(action, task, id)"
  />
</template>

• The ondata property fetches tasks from the API endpoint using the get method.
• The onchange property handles saving task changes back to the API.
• The save method in the onchange callback processes various actions (add, edit, delete) for tasks.
• This setup ensures seamless synchronization between the client and backend.

Related samples:

• Save to backend
• Resolve and fetch

Converting Task stream ID to data

The widget can interpret a task stream ID and convert it into task data by fetching it from a backend service. This method is useful when tasks are identified by unique stream IDs, and the corresponding data is stored in the backend.

<script setup>
  import { Tasklist } from '@svar-ui/vue-tasklist';

  const ondata = (v) => {
    return fetch(`/api/tasks/${v}`).then(r => r.json());
  };
</script>

<template>
  <Tasklist :value="1" :ondata="ondata" />
</template>

• The ondata function fetches task data from the backend using the stream ID (/api/tasks/{v}).
• The fetch API is used to perform the HTTP GET request, and the response is parsed as JSON.
• The ondata function can return either the data array or a promise resolving to the data array, allowing asynchronous handling.

Localization

The widget supports localization, allowing developers to adapt the user interface to different languages. This is useful when the widget is used in applications targeting users from various regions or languages. Localization is achieved by providing translations for specific terms or phrases used in the widget.

Localizing the widget to another language

<script setup>
  import { Locale } from "@svar-ui/vue-core";
  import { Tasklist } from "@svar-ui/vue-tasklist";

  const myLang = {
  "Add task": "Aufgabe hinzufügen",
  "Enter the task...": "Geben Sie die Aufgabe...",
  };
</script>

<template>
  <Locale :words="{ tasklist: myLang }">
    <Tasklist />
  </Locale>
</template>

This snippet demonstrates how to replace the default text in the Tasklist widget with translations for another language, in this case, German. The Locale component from @svar-ui/vue-core is used to wrap the Tasklist widget and provide the localized text.

The myLang object contains key-value pairs where the keys are the default English phrases used in the widget, and the values are their respective translations. For example:

• "Add task" is translated to "Aufgabe hinzufügen".
• "Enter the task..." is translated to "Geben Sie die Aufgabe...".

This approach ensures that the widget displays the appropriate language for the target audience. Important to note:

• The structure of the myLang object should match the keys used by the widget's internal localization system.
• Ensure all necessary phrases are translated to avoid fallback to default text.
• This functionality is entirely on the client side and does not require server interaction.

Related sample: Locales

Event handling

The widget allows developers to manage events and states when tasks are added, updated, or deleted. It provides detailed information about each change, enabling precise control and tracking of task modifications. This functionality is essential for applications where task data needs to be monitored or synchronized with other systems.

Capturing changes in Task data

The widget provides an event handler to detect and process changes in task data. This functionality can be used when the application needs to respond to additions, updates, or deletions in the task list. Each change action provides specific details about the modification, such as the type of action, the task data before and after changes, and the current state of the task list.

interface OnChange {
  // kind of change
  action: "add" | "update" | "delete";
  // id of changed task
  id?: number;
  // changed task
  task?: Task;
  // current tasks data
  data: Task[];
  // original tasks data
  originalValue: Task[] | number | string;
}

<script setup>
  import { Tasklist } from '@svar-ui/vue-tasklist';
  import { value } from './data.js';

  const onchange = ({ id, action, task, originalValue }) => {
    console.log(id, action, task, originalValue);
  };
</script>

<template>
  <Tasklist :value="value" :onchange="onchange" />
</template>

The OnChange interface provides detailed information about the change:

• action specifies the type of change ("add", "update", or "delete").
• id contains the identifier of the task that was modified (not available for add operations).
• task includes the task data that was changed (not available for delete operations).
• data is the current state of the task list after the change.
• originalValue reflects the initial state of the task list when it was first loaded into the widget. It can either be a task stream identifier or an array of task data.

This setup is useful in applications where task changes need to be logged, validated, or sent to a backend system for further processing. For example:

• In "add" operations, the task property can be used to retrieve the newly created task details.
• In "delete" operations, only the id of the removed task is provided.
• The originalValue property helps compare the current state with the initial state, ensuring consistency or identifying discrepancies.

Related sample: Events

Display options

Options for displaying the widget.

Showing the widget in Read-only mode

<script setup>
  import { Tasklist } from '@svar-ui/vue-tasklist';
  import { value } from './data.js';
</script>

<template>
  <Tasklist :value="value" :readonly="true" />
</template>

This configuration is used when the task list should only be displayed without allowing any modifications. The readonly property is set to true, which disables editing, adding, or deleting tasks. This is useful for cases where the task list is meant to serve as a static reference, for example, when showing completed tasks in a report or when sharing a task list with users who should not have editing permissions. The value variable provides the data to be displayed in the widget.

Other Tasklist samples