Componente To Do no Microsoft Graph Toolkit

Artigo
11/07/2024

O componente To Do é utilizado para permitir que o utilizador com sessão iniciada veja, adicione, remova, conclua e/ou edite tarefas do Microsoft To Do com a API To Do no Microsoft Graph.

Exemplo

O exemplo seguinte apresenta as tarefas do Microsoft To Do do utilizador com sessão iniciada com o mgt-todo componente . Pode utilizar o editor de código para ver como as propriedades alteram o comportamento do componente.

HTML
React

Abra este exemplo no mgt.dev.

Propriedades

Pode utilizar os seguintes atributos e propriedades para personalizar o componente.

Atributo	Propriedade	Descrição
só de leitura	readOnly	Um Booleano para definir a interface de tarefa como só de leitura (sem adicionar ou remover tarefas). O padrão é `false`.
initial-id="folder_id"	initialId	Um ID de cadeia para definir a pasta apresentada inicialmente para o ID fornecido.
target-id="folder_id"	targetId	Um ID de cadeia para bloquear a interface de tarefas para o ID de pasta fornecido.
N/D	isNewTaskVisible	Determina se a nova vista de tarefas está visível na composição.
N/D	taskFilter	Uma função opcional para filtrar as tarefas que são apresentadas ao utilizador.

O exemplo seguinte mostra apenas as tarefas da pasta com o ID 12345 e não permite que o utilizador crie novas tarefas.

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

Variáveis CSS personalizadas

O mgt-todo componente define as seguintes propriedades personalizadas do 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;
}

Para saber mais, veja Componentes de estilo.

Eventos

Os seguintes eventos são acionados a partir do componente.

Evento	Quando é emitido	Dados personalizados	Cancelável	Bolhas	Funciona com um modelo personalizado
`taskClick`	É acionado quando o utilizador clica ou toca numa tarefa	Tarefa selecionada	Não	Não	Não

Para obter mais informações sobre o processamento de eventos, veja eventos.

Modelos

O todo componente suporta vários modelos que lhe permitem substituir determinadas partes do componente. Para especificar um modelo, inclua um <template> elemento dentro de um componente e defina como data-type um dos seguintes valores.

Tipo de dados	Contexto de dados	Descrição
tarefa	tarefa: um objeto de tarefa To Do	Substitui toda a tarefa predefinida.
detalhes da tarefa	tarefa: um objeto de tarefa To Do	O modelo substitui a secção de detalhes da tarefa.

O exemplo seguinte define um modelo para o componente de tarefas.

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

Permissões do Microsoft Graph

Este controlo utiliza as seguintes APIs e permissões do Microsoft Graph. Para cada API chamada, o utilizador tem de ter, pelo menos, uma das permissões listadas.

Configuração	Permissão	API
`targetId` ou `initialId` definir	Tasks.Read, Tasks.ReadWrite	/me/todo/lists/${listId}, /me/todo/lists/{todoTaskListId}/tasks
`targetId` não definido	Tasks.Read, Tasks.ReadWrite	/me/todo/lists, /me/todo/lists/{todoTaskListId}/tasks
criar, atualizar ou eliminar tarefa	Tasks.ReadWrite	/me/todo/lists/{todoTaskListId}/tasks/{taskId}

Autenticação

O componente todo utiliza o fornecedor de autenticação global descrito na documentação de autenticação.

Cache

O mgt-todo componente não coloca dados em cache.

Localização

O controlo expõe as seguintes variáveis que podem ser localizadas. Para obter mais informações, veja Localizar componentes.

Nome da cadeia	Valor padrão
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`

Compartilhar via