Компонент To Do в Microsoft Graph Toolkit

Статья
11/07/2024

Компонент To Do используется, чтобы позволить вошедшему пользователю просматривать, добавлять, удалять, выполнять и/или изменять задачи из Microsoft To Do с помощью API To Do в Microsoft Graph.

Пример

В следующем примере отображаются задачи Microsoft To Do вошедшего пользователя с помощью компонента mgt-todo. Вы можете использовать редактор кода, чтобы узнать, как свойства изменяют поведение компонента.

HTML
React;

Откройте этот пример в mgt.dev.

Свойства

Для настройки компонента можно использовать следующие атрибуты и свойства.

Атрибут	Свойство	Описание
read-only	readOnly	Логическое значение для настройки интерфейса задачи только для чтения (без добавления или удаления задач). Значение по умолчанию: `false`.
initial-id="folder_id"	initialId	Строковый идентификатор, чтобы настроить для изначально отображаемой папки указанный идентификатор.
target-id="folder_id"	targetId	Строковый идентификатор для блокировки интерфейса задач по указанному идентификатору папки.
Н/Д	isNewTaskVisible	Определяет, отображается ли новое представление задач при визуализации.
Н/Д	taskFilter	Необязательная функция для фильтрации задач, демонстрируемых пользователю.

В следующем примере показаны только задачи из папки с идентификатором 12345, и пользователю не разрешается создавать новые задачи.

<mgt-todo read-only initial-id="12345"></mgt-todo>

Настраиваемые переменные CSS

Компонент mgt-todo определяет следующие настраиваемые свойства CSS.

<mgt-todo class="todo"></mgt-todo>

.todo {
    --task-new-cancel-button-color: blue;
    --task-detail-color: purple;
    --task-color: black;
    --task-background-color: white;
    --task-complete-background-color: grey;
    --task-date-input-active-color: blue;
    --task-date-input-hover-color: green;
    --task-background-color-hover: grey;
    --task-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
    --task-border: 1px solid black;
    --task-border-completed: 1px solid grey;
    --task-radio-background-color: green;
}

Дополнительные сведения см. в статье Компоненты стиля.

События

Из компонента инициируются следующие события.

Событие	Когда он генерируется	Пользовательские данные	Отменяемым	Пузыри	Работает с пользовательским шаблоном
`taskClick`	Возникает, когда пользователь щелкает задачу или касается ее	Выбранная задача	Нет	Нет	Нет

Дополнительные сведения об обработке событий см. в разделе События.

Шаблоны

Компонент todo поддерживает несколько шаблонов, позволяющих заменить определенные части компонента. Чтобы указать шаблон, включите <template> элемент внутри компонента и задайте для data-type параметра одно из следующих значений.

Тип данных	Контекст данных	Описание
task	task: объект задачи To Do	Заменяет всю стандартную задачу.
task-details	task: объект задачи To Do	Шаблон заменит раздел сведений задачи.

В следующем примере определяется шаблон для компонента задач.

<mgt-todo>
    <template data-type="task-details">
        <div>
            Importance Level: {{task.importance}}
        </div>
    </template>
</mgt-todo>

Разрешения Microsoft Graph

Этот элемент управления использует следующие API и разрешения Microsoft Graph. Для каждого вызываемого API пользователь должен иметь по крайней мере одно из перечисленных разрешений.

Конфигурация	Разрешение	API
`targetId` или `initialId` задать	Tasks.Read, Tasks.ReadWrite	/me/todo/lists/${listId}, /me/todo/lists/{todoTaskListId}/tasks
`targetId` не задано	Tasks.Read, Tasks.ReadWrite	/me/todo/lists, /me/todo/lists/{todoTaskListId}/tasks
Создание, обновление или удаление задачи	Tasks.ReadWrite	/me/todo/lists/{todoTaskListId}/tasks/{taskId}

Проверка подлинности

Компонент todo использует глобальный поставщик проверки подлинности, описанный в документации по проверке подлинности.

Кэш

Компонент mgt-todo не кэшировать данные.

Локализация

Элемент управления предоставляет следующие переменные, которые можно локализовать. Дополнительные сведения см. в разделе Локализация компонентов.

Имя строки	Значение по умолчанию
cancelNewTaskSubtitle	`Cancel`
newTaskPlaceholder	`Add a task`
newTaskLabel	`New Task Input`
addTaskButtonSubtitle	`Add`
deleteTaskLabel	`Delete Task`
dueDate	`Due date`
newTaskDateInputLabel	`New Task Date Input`
newTaskNameInputLabel	`New Task Name Input`
cancelAddingTask	`Cancel adding a new task`

Поделиться через