feat: move completed items to bottom of the list in mgt-todo (#2215)

set completed tasks to always checked
move completed items to the bottom of the list
change to sorting completed tasks by last modified date
change TaskStatus to string union type


Co-authored-by: Gavin Barron <[email protected]>
Co-authored-by: Musale Martin <[email protected]>
Co-authored-by: Musale Martin <[email protected]>
Co-authored-by: Sébastien Levert <[email protected]>

Author: 4 people

packages/mgt-components/src/components/mgt-picker/mgt-picker.ts

@@ -27,7 +27,6 @@ registerFluentComponents(fluentCombobox, fluentOption);
  *
  * @cssprop --picker-background-color - {Color} Picker component background color
  */
-// @customElement('mgt-picker')
 @customElement('picker')
 export class MgtPicker extends MgtTemplatedComponent {
   protected get strings() {

packages/mgt-components/src/components/mgt-todo/graph.todo.ts

@@ -17,13 +17,7 @@ export interface LinkedResource {
   externalId: string;
 }
 
-export enum TaskStatus {
-  notStarted,
-  inProgress,
-  completed,
-  deferred,
-  waitingOnOthers
-}
+export type TaskStatus = 'notStarted' | 'inProgress' | 'completed' | 'deferred' | 'waitingOnOthers';
 
 export enum TaskImportance {
   low,
@@ -46,7 +40,7 @@ export interface TodoTask {
   status: TaskStatus;
   createdDateTime: Date;
   completedDateTime: DateTimeTimeZone;
-  lastModifiedDate: Date;
+  lastModifiedDateTime: Date;
   bodyLastModifiedDateTime: Date;
   dueDateTime: DateTimeTimeZone;
   isReminderOn: boolean;

packages/mgt-components/src/components/mgt-todo/mgt-todo.ts

@@ -126,14 +126,26 @@ export class MgtTodo extends MgtTasksBase {
     if (tasks && this.taskFilter) {
       tasks = tasks.filter(task => this.taskFilter(task));
     }
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+    const completedTasks = tasks.filter(task => task.status === 'completed');
 
     const taskTemplates = repeat(
-      tasks,
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+      tasks.filter(task => task.status !== 'completed'),
       task => task.id,
       task => this.renderTask(task)
     );
+
+    const completedTaskTemplates = repeat(
+      completedTasks.sort((a, b) => {
+        return new Date(a.lastModifiedDateTime).getTime() - new Date(b.lastModifiedDateTime).getTime();
+      }),
+      task => task.id,
+      task => this.renderCompletedTask(task)
+    );
     return html`
       ${taskTemplates}
+      ${completedTaskTemplates}
     `;
   }
 
@@ -265,23 +277,20 @@ export class MgtTodo extends MgtTasksBase {
   };
 
   /**
-   * Render a task in the list.
+   * Render task details.
    *
    * @protected
    * @param {TodoTask} task
    * @returns {TemplateResult}
    * @memberof MgtTodo
    */
-  protected renderTask = (task: TodoTask) => {
+  protected renderTaskDetails = (task: TodoTask) => {
     const context = { task, list: this.currentList };
 
     if (this.hasTemplate('task')) {
       return this.renderTemplate('task', context, task.id);
     }
 
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-    const isCompleted = (TaskStatus as any)[task.status] === TaskStatus.completed;
-
     let taskDetailsTemplate = null;
 
     const taskDueTemplate = task.dueDateTime
@@ -307,27 +316,53 @@ export class MgtTodo extends MgtTasksBase {
       `;
     }
 
+    return html`${taskDetailsTemplate}`;
+  };
+
+  /**
+   * Render a task in the list.
+   *
+   * @protected
+   * @param {TodoTask} task
+   * @returns {TemplateResult}
+   * @memberof MgtTodo
+   */
+  protected renderTask = (task: TodoTask) => {
+    const taskClasses = classMap({
+      ReadOnly: this.readOnly,
+      Task: true
+    });
+
+    return html`
+      <fluent-checkbox id=${task.id} class=${taskClasses} @click="${() => this.handleTaskCheckClick(task)}">
+        ${this.renderTaskDetails(task)}
+      </fluent-checkbox>
+    `;
+  };
+
+  /**
+   * Render a completed task in the list.
+   *
+   * @protected
+   * @param {TodoTask} task
+   * @returns {TemplateResult}
+   * @memberof MgtTodo
+   */
+  protected renderCompletedTask = (task: TodoTask) => {
     const taskClasses = classMap({
-      Complete: isCompleted,
-      Incomplete: !isCompleted,
+      Complete: true,
       ReadOnly: this.readOnly,
-      Task: true,
-      checked: isCompleted
+      Task: true
     });
 
-    const taskCheckContent = isCompleted
-      ? html`
-          ${getSvg(SvgIcon.CheckMark)}
-        `
-      : null;
+    const taskCheckContent = html`${getSvg(SvgIcon.CheckMark)}`;
 
     return html`
-      <fluent-checkbox id=${task.id} class=${taskClasses} ?checked=${isCompleted} @click="${() =>
-      this.handleTaskCheckClick(task)}">
+      <fluent-checkbox id=${task.id} class=${taskClasses} checked @click="${() => this.handleTaskCheckClick(task)}">
         <div slot="checked-indicator">
           ${taskCheckContent}
         </div>
-        ${taskDetailsTemplate}
+        ${this.renderTaskDetails(task)}
       </fluent-checkbox>
     `;
   };
@@ -447,10 +482,10 @@ export class MgtTodo extends MgtTasksBase {
     this.handleTaskClick(task);
     if (!this.readOnly) {
       // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-      if ((TaskStatus as any)[task.status] === TaskStatus.completed) {
-        void this.updateTaskStatus(task, TaskStatus.notStarted);
+      if (task.status === 'completed') {
+        void this.updateTaskStatus(task, 'notStarted');
       } else {
-        void this.updateTaskStatus(task, TaskStatus.completed);
+        void this.updateTaskStatus(task, 'completed');
       }
     }
   }