> For the complete documentation index, see [llms.txt](https://elguerre.gitbook.io/de0an/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://elguerre.gitbook.io/de0an/capitulo-8-la-construccion-proyectos-tareas-y-pomodoros/tareas.md).
# Tareas
Una tarea es un elemento dentro de un proyecto y como su propio nombre indica es una acción o trabajo que puedo o no ser completada en un periodo de tiempo.
Mientras que, en el primer caso, nos referimos a simples tareas, en el segundo, nos referimos a tareas similares a las derivadas de gestión de proyectos y por consiguiente, de una fecha de inicio y/o fecha de fin.
A partir de esta particularidad, iremos construyendo **tareas** para aportar valor y permitir su integración/comunicación con otras aplicaciones.
**Figura 14.- Vista de las propiedades y estructura de una tarea dentro de un proyecto**
## Edición de una tarea (TaskEdition)
Al igual que para la edición de un proyecto, la edición de una tarea supone la implementación de una pantalla para la creación y modificación de los datos o propiedades que la componen.
 
**Figura 15.- Pantalla de edición de tareas: valores por defecto y con selectores desplegados**
En la figura anterior, se han incluido varias vistas de la pantalla de tareas, donde la primera de ellas muestra los valores por defecto mientras que, en la segunda, se ha establecido; una fecha de inicio, fecha de vencimiento (o Due date) y se encuentra desplegada el *ComboBox* para la selección de prioridad.
### Cabecera
La cabecera de esta pantalla la estará compuesta además del título de la aplicación, por el título del proyecto al que pertenece la tarea que se está creando o editando y representado por la propiedad “ProjectTitle”. Su valor es recibido como parámetro durante la navegación.
```xml
```
### Contenido
Ya tenemos nuestros estilos de texto, veamos que necesitamos incorporar a nuestra página para la edición de tareas.
De forma análoga a como vimos para la creación del estilo “**ComboBoxSchema**”, el estilo para los ComboBox de prioridades es el siguiente:
```
```
De forma similar, para la localización del *Combobox* de prioridades, seguiremos el mismo procedimiento que veremos a continuación para los enumerados.
### Enumerados, Combox y lista de valores
Aunque los valores mostrados en controles desplegables, o *Combobox*, son literales y pueden localizarse tal y como se comentó anteriormente, merecen especial atención para conseguir las buenas prácticas.
Para conseguir, la localización de los tipos de proyectos a partir del enumerado *ProjectType*, necesitaremos dos pasos:
1. Crear un nuevo fichero de recursos, “ProjectType.resw” para cada cultura.
2. Incluir en él, los mismos valores del enumerado (*enum*) tal y como puede apreciarse en la siguiente figura:
**Figura 16.- Localización de un enumerado, Tipo de Proyecto**
3. Crear una clase Converter “EnumToLocalizatedConverter”.
4. Enlazar los datos del *Combobox* con el *Converter* anterior y pasando como *ConverterParameter*, el nombre del fichero de recurso, *ProjectType*.
5. Incluir en el diccionario de recursos, en “App.xaml”, la clave para este converter.
La siguiente imagen muestra la agrupación de diferentes ficheros de recursos por cultura. Entre ellos, nuestro fichero de tipos de proyecto. Esta agrupación, presenta la ventaja principal por la que el uso la localización basada en carpetas es la opción recomendable frente al uso de culturas (como sufijos) en los nombres de ficheros.
**Figura 17.- Diferentes ficheros de recursos agrupados por cultura**
{% hint style="info" %}
**Nota**: Por el momento el objetivo es entender la localización de enumerados. Así que si no conoces cómo crear un Converter y enlazar los datos con el mismo. No te preocupes, en capítulos posteriores, al crear la pantalla de edición de proyectos, veremos cómo se usa este enumerado, cómo vincularlo al combo y cómo trabajar con el *Converter*.
{% endhint %}
### Opciones de menú
Las opciones de menú que constituyen la edición de una tarea son:
* Guardar (o Save). Realiza el guardado de los datos de una tarea.
* Cancelar (o Cancel). Descarta la edición de datos de una tarea.
* Crear cita (o Create appointment). Crea una cita en el calendario a partir de la fecha “Fecha Inicio” o “Start Date” de la tarea que se pretende crear o se está editando. Esta opción de menú se mostrará únicamente cuando dicha fecha haya sido determinada y tendrá el siguiente aspecto.
* Eliminar cita (o remove appointment). Elimina la cita previamente creada en el calendario para la tarea editada.
 
**Figura 18.- Opciones de menú en la edición de tareas**
```
```
Para la creación de citas en el calendario, crearemos un nuevo servicio denominado “AppointmentService” así como su interfaz correspondiente “IAppointmentService”. Como siempre, en la carpeta “Services” y “Services - Interfaces” respectivamente. Los métodos más significativos de este servicio se muestran implementados a continuación:
```
private AsyncLazy lazyAppointmentStore = new AsyncLazy(async () =>
{
var appStore = await AppointmentManager.RequestStoreAsync(AppointmentStoreAccessType.AppCalendarsReadWrite);
return appStore;
});
private AppointmentStore AppStore { get { return lazyAppointmentStore.Value.Result; } }
private AppointmentCalendar AppCalendar
{
get
{
if (null == this.appCalendar)
{
this.appCalendar = Task.Run(() => CreateCalendar()).Result;
}
return this.appCalendar;
}
}
private async Task CreateCalendar()
{
IReadOnlyList appCalendars =
await AppStore.FindAppointmentCalendarsAsync(FindAppointmentCalendarsOptions.IncludeHidden);
AppointmentCalendar appCalendar = null;
if (appCalendars.Count == 0)
{
appCalendar = await AppStore.CreateAppointmentCalendarAsync(Constants.CalendarName);
}
else
{
appCalendar = appCalendars[0];
}
appCalendar.OtherAppReadAccess = AppointmentCalendarOtherAppReadAccess.Full;
appCalendar.OtherAppWriteAccess = AppointmentCalendarOtherAppWriteAccess.SystemOnly;
appCalendar.SummaryCardView = AppointmentSummaryCardView.App;
await appCalendar.SaveAsync();
return appCalendar;
}
private async Task CreateNewAppointment(Data.Schemas.Task task)
{
if (null == task)
throw new ArgumentNullException("task");
if (await this.AppointmentExists(task)) return false;
Appointment newAppointment = new Appointment();
this.SaveAppointmentInfo(task, newAppointment);
try
{
await AppCalendar.SaveAppointmentAsync(newAppointment);
return true;
}
catch
{
return false;
}
}
private async Task FindAppointmentId(Data.Schemas.Task task)
{
string roamingId = this.GetAppointmentId(task.ProjectId, task.Id);
var ids = await AppStore.FindLocalIdsFromRoamingIdAsync(roamingId);
if (ids.Count > 0)
return ids[0];
return null;
}
private void SaveAppointmentInfo(Data.Schemas.Task task, Appointment newAppt)
{
var date = (DateTimeOffset)task.StartDate;
var time = task.StartDate.Value.TimeOfDay;
var timeZoneOffset = TimeZoneInfo.Local.GetUtcOffset(task.StartDate.Value);
var startTime = new DateTimeOffset(date.Year, date.Month, date.Day, time.Hours, time.Minutes, 0, timeZoneOffset);
newAppt.RoamingId = this.GetAppointmentId(task.ProjectId, task.Id);
newAppt.Subject = task.Title;
newAppt.Details = task.Detail ?? task.Title;
newAppt.StartTime = startTime;
newAppt.Sensitivity = AppointmentSensitivity.Private;
newAppt.Duration = TimeSpan.FromMinutes(30);
newAppt.Reminder = task.StartDate.Value.TimeOfDay;
}
```
Este servicio encapsula la funcionalidad de la clase “AppointmentManager” creando un nuevo calendario para la aplicación y facilitando el acceso al mismo para la creación, modificación y borrado de citas/eventos.
Las propiedades “**AppStore**” y “**AppCalendar**”, crean, si no existen, el repositorio de citas y calendario, respectivamente, requeridos para la gestión de citas.
Concretamente el método “**CreateCalendar**”, crea el calendario “**Task\[in] - Calendar**” en el dispositivo y las siguientes veces que necesite acceder a él, simplemente lo utiliza. Utiliza a su vez la asignación “*appCalendar.SummaryCardView = AppointmentSummaryCardView\.App*”, para que los eventos creados en este calendario, sean abiertos por la aplicación, en lugar de por el propio sistema. En cualquier caso, siempre puede ser abierto por el sistema manteniendo pulsado el evento a abrir/editar.
El método “**CreateNewAppointment**”, crea un nuevo evento en el calendario a partir de la información de la tarea, usando para ello, el método “**SaveAppointmentInfo**”. Para la creación de la cita empleamos la instrucción “*AppCalendar.SaveAppointmentAsync(newAppointment)”,* sin embargo, si empleamos la instrucción
“*AppointmentManager.ShowAddAppointmentAsync(newAppointment, Windows.Foundation.Rect.Empty);*”, el sistema, mostrará la pantalla de edición de citas del dispositivo. Podemos utilizar ésta, y aprovechar la edición de citas del dispositivo. Permitiríamos así al usuario la generación de citas recurrentes y otras opciones, sin embargo, también podría cambiar el calendario lo que impediría a nuestra aplicación la gestión de citas. Utilizaremos la primera opción y, en caso de ser necesario la creación de citas recurrentes u otras opciones, crearemos una nueva ventana para tal edición.
El método “**FindAppointmentId**”, encuentra la primera aparición de una cita localizada en el calendario si es que existe.
## Detalle de una tarea (TaskDetail)
El detalle de una tarea se compone de una serie de secciones que desglosan la información de tal forma que ésta sea más fácil de consultar en un único vistazo. Así mismo, permitirá una interacción más rápida y ágil para acciones tales como posponer una fecha, completar la tarea directamente o navegar a sus Pomodoros y checklist asociados.
 
**Figura 19.- Detalle de una tarea, menú y sub-menú para aplazarla**
Como podemos observar en la figura anterior, la pantalla de detalle muestra la información principal de la tarea junto con las opciones de menú que permiten actuar sobre ella. En la segunda imagen, vemos cómo al seleccionar la opción de aplazar, se despliega un sub-menú con las alternativas disponibles: hoy, mañana o la próxima semana.
Veamos a continuación cómo se estructura esta pantalla.
### Cabecera
La cabecera que resume el detalle de una tarea incluye además del título de la aplicación, el título del proyecto al que pertenece la tarea, pero con la particularidad de que éste permite navegar al proyecto, a modo de acceso directo.
Cabe tener en cuenta que esta navegación directa al proyecto implica gestionar correctamente el comportamiento al volver atrás, especialmente en el caso de que el proyecto haya sido eliminado mientras consultábamos la tarea. Trataremos estas particularidades de la navegación con más detalle en el capítulo 9.
```
```
### Contenido: Detalle, Checklist y Pomodoros
El contenido de esta pantalla extiende en un solo vistazo la mayor cantidad de información posible referente a una tarea, facilitando la navegación y, por supuesto su lectura.
Llegado este momento y teniendo en cuenta todo lo que hemos aprendido, su implementación resulta muy sencilla tal y como podemos ver en su código XAML.
```
```
Donde para mostrar las fechas de inicio y vencimiento nos apoyaremos en las propiedades “HasStartDate” y “HasDueDate” respectivamente, así como del convertidor “BooleanToVisibilityConverter”, como ya vimos anteriormente.
Para la definición de los controles “HyperLinkButton” utilizaremos los siguientes estilos que incluiremos en nuestro fichero “**ButtonsStyles.xaml**”.
```
```
Recordemos que los iconos definidos con el control “*PathIcon*”, no son escalables, por lo que tendremos que definir un HyperlinkButton, para cada uno de los escalados. Para el caso de los pomodoros tendremos que hacerlo llegado el momento, o bien localizar una fuente que contenga el icono deseado, en este caso, nuestro tomate.
Completaremos esta sección añadiendo el convertidor “**DateTimeToStringFormatConverter**” a los ya existentes. Su finalidad es sustituir el valor de un texto por un valor más amigable para el usuario facilitado a través de parámetros (“ConverterParameter”). En este caso en particular, para las fechas de inicio y fin su valor es: *‘{}{0:dd MMM yyyy}’*.
Por último, cabe destacar que la representación del campo "Detail" podría variar en función del tipo de tarea. Por el momento, utilizaremos un control "TextBlock" con *TextWrapping* habilitado, lo que resulta suficiente para la mayoría de los casos.
### Opciones de menú
Además de la información relevante de cada tarea, existen dos secciones adicionales para dotarlas de mayor capacidad de información y utilidad: se trata de las referidas a un sub-listado o lista de validación (*checklist*) y a un listado de Pomodoros, ambas secciones, actúan como contenedores extra de información aportando mayor capacidad a aquellas tareas que lo requieran. La veremos a continuación en las secciones 3 y 4.
Por otro lado, y además de estos accesos directos, para las opciones de menú en un detalle de tareas implementaremos las que opciones que siguen:
 
**Figura 20.- Creación y eliminación de citas (appointments) del calendario**
* Aplazar o posponer (o Pospone). Pospone una tarea para hoy, mañana o para dentro de una semana. Concretamente para el lunes próximo.
* Completar (o Complete). Actualiza directamente una tarea cambiando su estado a completada. ¿Incluir mensaje de confirmación?
* Editar (o Edit). Navega al usuario a la pantalla de edición de la tarea para su modificación.
* Eliminar (o Remove). Elimina una tarea previa confirmación.
* Crear o elimina una cita (o appointment). Crea o elimina una cita en el calendario propio de la aplicación a partir de la información de la tarea. Estas opciones permanecerán visibles siempre y cuando exista una fecha de inicio para la tarea. Veremos más opciones sobre este tema en el apartado 4 de este mismo documento.
* Ir al proyecto (o go to project). Permite al usuario navegar al proyecto que contiene la tarea. Presenta un inconveniente de navegación