Компонент Планировщика в Microsoft Graph Toolkit
Компонент Планировщик позволяет пользователю просматривать, добавлять, удалять, выполнять или изменять задачи из Microsoft Planner.
Кроме того, пользователь может назначить задаче одного или нескольких пользователей Microsoft Graph. Дополнительные сведения о назначениях Microsoft Graph см. в разделе PlannerAssignments.
Важно!
С выпуском @microsoft/mgt-components версии 4 компонент планировщика заменяет старый компонент задач и больше не поддерживает использование задач Outlook в качестве источника данных.
Пример
В следующем примере отображаются задачи Microsoft Planner пользователя, выполнившего вход, с помощью mgt-planner компонента . Вы можете использовать редактор кода, чтобы узнать, как свойства изменяют поведение компонента.
Свойства
| Атрибут | Свойство | Описание |
|---|---|---|
| read-only | readOnly | Логическое значение для настройки интерфейса задачи только для чтения (без добавления или удаления задач). Значение по умолчанию: false. |
| hide-header | hideHeader | Логическое значение для отображения или скрытия заголовка компонента. Значение по умолчанию: false. |
| hide-options | hideOptions | Логическое значение для отображения или скрытия параметров в задачах. Значение по умолчанию: false. |
| initial-id="planner_id/folder_id" | initialId | Идентификатор строки для задания первоначально отображаемого плана по указанному идентификатору. |
| initial-bucket-id="bucket_id" | initialBucketId | Идентификатор строки для задания первоначально отображаемого контейнера в качестве предоставленного идентификатора. |
| target-id="planner_id/folder_id" | targetId | Идентификатор строки для блокировки интерфейса задач по указанному идентификатору плана. |
| target-bucket-id="bucket_id" | targetBucketId | Идентификатор строки для блокировки интерфейса задач по указанному идентификатору контейнера. |
| group-id | groupId | Идентификатор строки для блокировки интерфейса задач по идентификатору группы. |
| - | isNewTaskVisible | Определяет, отображается ли новое представление задач при визуализации. |
| - | taskFilter | Необязательная функция для фильтрации задач, демонстрируемых пользователю. |
В следующем примере показаны только задачи из Планировщика с идентификатором 12345 и не позволяют пользователю создавать новые задачи.
<mgt-planner read-only initial-id="12345"></mgt-planner>
В следующем примере показано, как фильтровать задачи, для которых задана только категория 3 .
let taskView = document.querySelector("mgt-planner");
taskView.taskFilter = (task) => task.appliedCategories.category3 === true;
Настраиваемые переменные CSS
<mgt-planner class="tasks"></mgt-planner>
.tasks {
--tasks-header-padding: 28px 14px;
--tasks-header-margin: 0 14px;
--tasks-header-font-size: large;
--tasks-header-font-weight: 800;
--tasks-header-text-color: blue;
--tasks-header-text-hover-color: gray;
--tasks-new-button-width: 300px;
--tasks-new-button-height: 50px;
--tasks-new-button-text-color: orange;
--tasks-new-button-text-font-weight: 400;
--tasks-new-button-background: black;
--tasks-new-button-border: 2px dotted golden;
--tasks-new-button-background-hover: gray;
--tasks-new-button-background-active: red;
--task-add-new-button-width: 60px;
--task-add-new-button-height: 35px;
--task-add-new-button-text-color: orange;
--task-add-new-button-text-font-weight: 400;
--task-add-new-button-background: black;
--task-add-new-button-border: 2px dotted white;
--task-add-new-button-background-hover: gray;
--task-add-new-button-background-active: red;
--task-cancel-new-button-width: 60px;
--task-cancel-new-button-height: 35px;
--task-cancel-new-button-text-color: yellow;
--task-cancel-new-button-text-font-weight: 400;
--task-cancel-new-button-background: red;
--task-cancel-new-button-border: 2px dashed white;
--task-cancel-new-button-background-hover: brown;
--task-cancel-new-button-background-active: red;
--task-complete-checkbox-background-color: red;
--task-complete-checkbox-text-color: yellow;
--task-incomplete-checkbox-background-color: orange;
--task-incomplete-checkbox-background-hover-color: yellow;
--task-title-text-font-size: large;
--task-title-text-font-weight: 500;
--task-complete-title-text-color: green;
--task-incomplete-title-text-color: purple;
--task-icons-width: 32px;
--task-icons-height: 32px;
--task-icons-background-color: purple;
--task-icons-text-font-color: black;
--task-icons-text-font-size: 16px;
--task-icons-text-font-weight: 400;
--task-complete-background-color: powderblue;
--task-incomplete-background-color: salmon;
--task-complete-border: 2px dashed green;
--task-incomplete-border: 2px double red;
--task-complete-border-radius: 8px;
--task-incomplete-border-radius: 12px;
--task-complete-padding: 8px;
--task-incomplete-padding: 12px;
--tasks-gap: 8px;
--tasks-background-color: violet;
--tasks-border: 2px dashed green;
--tasks-border-radius: 12px;
--tasks-padding: 16px;
/** affects the date picker and the text-input field **/
--task-new-input-border: 2px solid green;
--task-new-input-border-radius: 8px;
--task-new-input-background-color: yellow;
--task-new-input-hover-background-color: yellowgreen;
--task-new-input-placeholder-color: black;
/** affects the date picker and the text-input field **/
--task-new-dropdown-border: 2px solid green;
--task-new-dropdown-border-radius: 8px;
--task-new-dropdown-background-color: yellow;
--task-new-dropdown-hover-background-color: yellowgreen;
--task-new-dropdown-placeholder-color: red;
--task-new-dropdown-option-text-color: blue;
--task-new-dropdown-list-background-color: yellow;
--task-new-dropdown-option-hover-background-color: yellowgreen;
--task-new-person-icon-text-color: blue;
--task-new-person-icon-color: blue;
/** affects the options menu */
--dot-options-menu-background-color: yellow;
--dot-options-menu-shadow-color: yellow;
--dot-options-menu-item-color: maroon;
--dot-options-menu-item-hover-background-color: white;
}
Дополнительные сведения см. в статье Компоненты стиля.
События
| Событие | Когда он генерируется | Пользовательские данные | Отменяемым | Пузыри | Работает с пользовательским шаблоном |
|---|---|---|---|---|---|
taskAdded |
Возникает при создании новой задачи. | Недавно созданный планировщикTask | Нет | Нет | Да |
taskChanged |
Возникает при изменении метаданных задачи, таких как маркировка завершена | Обновлен планировщикTask | Нет | Нет | Нет |
taskClick |
Возникает, когда пользователь выбирает задачу |
task свойство с выбранным plannerTask |
Нет | Нет | Нет |
taskRemoved |
Возникает при удалении существующей задачи |
task свойство с выбранным plannerTask |
Нет | Нет | Нет |
Дополнительные сведения об обработке событий см. в разделе События.
Шаблоны
Компонент planner поддерживает несколько шаблонов, позволяющих заменить определенные части компонента. Чтобы указать шаблон, добавьте <template> элемент в компонент и задайте для data-type свойства одно из следующих значений:
| Тип данных | Контекст данных | Описание |
|---|---|---|
| task | task: объект задачи планировщика | заменяет всю задачу по умолчанию. |
| task-details | task: объект задачи планировщика | шаблон заменяет раздел сведений задачи. |
В следующем примере определяется шаблон для компонента планировщика.
<mgt-planner>
<template data-type="task-details">
<div>Owner: {{task.owner}}</div>
<div>Importance Level: {{task.importance}}</div>
</template>
</mgt-planner>
Разрешения Microsoft Graph
Этот элемент управления использует следующие API и разрешения Microsoft Graph. Для каждого вызываемого API пользователь должен иметь по крайней мере одно из перечисленных разрешений.
| Конфигурация | Разрешение | API |
|---|---|---|
| во всех конфигурациях | User.Read, User.ReadWrite | /me |
| поведение по умолчанию | Tasks.Read, Group.Read.All, Tasks.ReadWrite, Group.ReadWrite.All | /me/planner/plans, /planner/plans/${planId}/buckets, /planner/buckets/${bucketId}/tasks |
groupId набор |
Tasks.Read, Group.Read.All, Tasks.ReadWrite, Group.ReadWrite.All | /groups/${group-id}/planner/plans, /planner/plans/${planId}/buckets, /planner/buckets/${bucketId}/tasks |
targetId набор |
Tasks.Read, Group.Read.All, Tasks.ReadWrite, Group.ReadWrite.All | /planner/plans/${planId}, /planner/plans/${planId}/buckets, /planner/buckets/${bucketId}/tasks |
| Создание, обновление или удаление задачи | Tasks.ReadWrite, Group.ReadWrite.All | POST /planner/tasks, PATCH /planner/tasks/${taskId}, DELETE /planner/tasks/${taskId} |
Подкомпоненты
Компонент mgt-tasks состоит из одного или нескольких подкомпонентов, для которых могут потребоваться другие разрешения, отличные от перечисленных ранее. Дополнительные сведения см. в документации по каждому подкомпоненту:
Проверка подлинности
В компоненте задач используется глобальный поставщик проверки подлинности, описанный в документации по проверке подлинности.
Кэш
Компонент mgt-tasks не кэшировать данные.
Локализация
Элемент управления предоставляет следующие переменные, которые можно локализовать. Дополнительные сведения о локализации см. в разделе Локализация компонентов.
| Имя строки | Значение по умолчанию |
|---|---|
| removeTaskSubtitle | Delete Task |
| cancelNewTaskSubtitle | Cancel |
| newTaskPlaceholder | Adding a task... |
| addTaskButtonSubtitle | Add |
| должный | Due |
| addTaskDate | Add the task date |
| назначать | Assign |
| planNotFound | Plan not found |
| plansSelfAssigned | All Plans |
| bucketNotFound | Bucket not found |
| bucketsSelfAssigned | All Tasks |
| baseSelfAssigned | Assigned to Me |