Componente De tareas pendientes en Microsoft Graph Toolkit

El componente Tareas pendientes se usa para permitir que el usuario que ha iniciado sesión vea, agregue, quite, complete o edite tareas de Microsoft To Do mediante la API De tareas pendientes en Microsoft Graph.

Ejemplo:

En el ejemplo siguiente se muestran las tareas de Microsoft To Do del usuario que ha iniciado sesión con el mgt-todo componente . Puede usar el editor de código para ver cómo cambian las propiedades el comportamiento del componente.

Abra este ejemplo en mgt.dev

Propiedades

Puede usar los siguientes atributos y propiedades para personalizar el componente.

Atributo	Propiedad	Descripción
solo lectura	Readonly	Un valor booleano para establecer que la interfaz de tarea sea de solo lectura (sin agregar ni quitar tareas). El valor predeterminado es false.
hide-header	hideHeader	Boolean para mostrar u ocultar el encabezado del componente. El valor predeterminado es false.
hide-options	hideOptions	Un valor booleano para mostrar u ocultar las opciones de las tareas. El valor predeterminado es false.
initial-id="folder_id"	initialId	Identificador de cadena para establecer la carpeta mostrada inicialmente en el identificador proporcionado.
target-id="folder_id"	targetId	Identificador de cadena para bloquear la interfaz de tareas en el identificador de carpeta proporcionado.
N/D	isNewTaskVisible	Determina si la nueva vista de tareas está visible en la representación.
N/D	taskFilter	Función opcional para filtrar qué tareas se muestran al usuario.

En el ejemplo siguiente se muestran solo las tareas de la carpeta con el identificador 12345 y no se permite al usuario crear nuevas tareas.

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

Variables CSS personalizadas

El mgt-todo componente define las siguientes propiedades personalizadas 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
}

Para obtener más información, consulte Componentes de estilo.

Eventos

Los siguientes eventos se desencadenan desde el componente.

Evento	Cuándo se emite	Datos personalizados	Cancelable	Burbujas	Funciona con una plantilla personalizada
taskClick	Se activa cuando el usuario hace clic o pulsa en una tarea.	Tarea seleccionada	No	No	No

Para obtener más información sobre el control de eventos, vea eventos.

Plantillas

El tasks componente admite varias plantillas que permiten reemplazar ciertas partes del componente. Para especificar una plantilla, incluya un <template> elemento dentro de un componente y establezca el data-type valor en uno de los siguientes.

Tipo de datos	Contexto de datos	Descripción
tarea	task: un objeto de tarea de tareas pendientes	Reemplaza toda la tarea predeterminada.
task-details	task: un objeto de tarea de tareas pendientes	La plantilla reemplaza la sección de detalles de la tarea.

En el ejemplo siguiente se define una plantilla para el componente de tareas.

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

Permisos de Microsoft Graph

Este control usa las siguientes API y permisos de Microsoft Graph.

Configuración	Permiso	API
targetId Establecer	Tasks.Read	/me/todo/lists/${listId}, /me/todo/lists/{todoTaskListId}/tasks
targetId no establecido	Tasks.Read	/me/todo/lists, /me/todo/lists/{todoTaskListId}/tasks
tarea de creación, actualización o eliminación	Tasks.ReadWrite	/me/todo/lists/{todoTaskListId}/tasks/{taskId}

Autenticación

El componente de tareas usa el proveedor de autenticación global descrito en la documentación de autenticación.

Caché

El mgt-todo componente no almacena en caché ningún dato.