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

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

Пример

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

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

Свойства

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

Атрибут	Свойство	Описание
read-only	readOnly	Логическое значение для настройки интерфейса задачи только для чтения (без добавления или удаления задач). Значение по умолчанию: false.
hide-header	hideHeader	Логическое значение для отображения или скрытия заголовка компонента. Значение по умолчанию: false.
hide-options	hideOptions	Логическое значение для отображения или скрытия параметров в задачах. Значение по умолчанию: 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 {
  --tasks-background-color
  --tasks-header-padding
  --tasks-title-padding
  --tasks-plan-title-font-size
  --tasks-plan-title-padding

  --tasks-new-button-width
  --tasks-new-button-height
  --tasks-new-button-color
  --tasks-new-button-background
  --tasks-new-button-border
  --tasks-new-button-hover-background
  --tasks-new-button-active-background

  --task-margin
  --task-background
  --task-border
  --task-header-color
  --task-header-margin

  --task-new-margin
  --task-new-border
  --task-new-input-margin
  --task-new-input-padding
  --task-new-input-font-size
  --task-new-select-border

  --task-new-add-button-background
  --task-new-add-button-disabled-background
  --task-new-cancel-button-color

  --task-complete-background
  --task-complete-border

  --task-icon-alignment: flex-start (default) | center | flex-end
  --task-icon-background
  --task-icon-background-completed
  --task-icon-border
  --task-icon-border-completed
  --task-icon-border-radius
  --task-icon-color
  --task-icon-color-completed
}

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

События

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

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

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

Шаблоны

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

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

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

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

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

Этот элемент управления использует следующие API и разрешения Microsoft Graph.

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

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

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

Кэш

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