@openmrs/esm-task-list-app 1.0.0

package/src/workspace/task-list-view.component.tsx

@@ -0,0 +1,154 @@
+import React, { useCallback, useState } from 'react';
+import classNames from 'classnames';
+import { Checkbox, Tile, Tag, Layer } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { showSnackbar, useLayoutType, EmptyCardIllustration } from '@openmrs/esm-framework';
+import { type Task, useTaskList, setTaskStatusCompleted, getPriorityLabel } from './task-list.resource';
+import Loader from '../loader/loader.component';
+import styles from './task-list-view.scss';
+
+export interface TaskListViewProps {
+  patientUuid: string;
+  onTaskClick?: (task: Task) => void;
+}
+
+const TaskListView: React.FC<TaskListViewProps> = ({ patientUuid, onTaskClick }) => {
+  const { t } = useTranslation();
+  const { tasks, isLoading, error, mutate } = useTaskList(patientUuid);
+  const isTablet = useLayoutType() === 'tablet';
+  const [pendingUpdates, setPendingUpdates] = useState<Set<string>>(new Set());
+
+  const addPendingUpdate = useCallback((uuid: string) => {
+    setPendingUpdates((current) => {
+      const next = new Set(current);
+      next.add(uuid);
+      return next;
+    });
+  }, []);
+
+  const removePendingUpdate = useCallback((uuid: string) => {
+    setPendingUpdates((current) => {
+      const next = new Set(current);
+      next.delete(uuid);
+      return next;
+    });
+  }, []);
+
+  const handleToggle = useCallback(
+    async (task: Task, checked: boolean) => {
+      addPendingUpdate(task.uuid);
+      try {
+        await setTaskStatusCompleted(patientUuid, task, checked);
+        await mutate();
+      } catch (_error) {
+        showSnackbar({
+          title: t('taskUpdateFailed', 'Unable to update task'),
+          kind: 'error',
+        });
+      } finally {
+        removePendingUpdate(task.uuid);
+      }
+    },
+    [addPendingUpdate, mutate, patientUuid, removePendingUpdate, t],
+  );
+
+  const isOverdue = useCallback((task: Task) => {
+    if (task.completed || !task.dueDate) {
+      return false;
+    }
+    const dueDate = task.dueDate.date;
+    if (!dueDate) {
+      return false;
+    }
+    const now = new Date();
+    // Create new Date objects for comparison without mutating originals
+    const nowDateOnly = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+    const dueDateOnly = new Date(dueDate.getFullYear(), dueDate.getMonth(), dueDate.getDate());
+    return dueDateOnly < nowDateOnly;
+  }, []);
+
+  if (isLoading) {
+    return <Loader />;
+  }
+
+  if (error) {
+    return <p className={styles.errorText}>{t('taskLoadError', 'There was a problem loading the task list.')}</p>;
+  }
+
+  if (!tasks || tasks.length === 0) {
+    return (
+      <Layer>
+        <Tile className={styles.emptyStateTile}>
+          <div className={styles.emptyStateTileContent}>
+            <EmptyCardIllustration />
+            <p className={styles.emptyStateContent}>{t('noTasksMessage', 'No tasks to display')}</p>
+          </div>
+        </Tile>
+      </Layer>
+    );
+  }
+
+  return (
+    <ul className={styles.taskList}>
+      {tasks.map((task) => {
+        const isUpdating = pendingUpdates.has(task.uuid);
+        const overdue = isOverdue(task);
+        const assigneeDisplay = task.assignee
+          ? (task.assignee.display ?? task.assignee.uuid)
+          : t('noAssignment', 'No assignment');
+
+        return (
+          <li key={task.uuid}>
+            <Tile
+              role="listitem"
+              className={classNames(styles.taskTile, {
+                [styles.tabletTaskTile]: isTablet,
+                [styles.completedTile]: task.completed,
+              })}
+            >
+              <div className={styles.taskTileCheckbox}>
+                <div
+                  className={classNames(styles.checkboxWrapper, {
+                    [styles.completedCheckbox]: task.completed,
+                  })}
+                >
+                  <Checkbox
+                    id={`task-${task.uuid}`}
+                    labelText=""
+                    checked={task.completed}
+                    disabled={isUpdating}
+                    onChange={(_, { checked }) => handleToggle(task, checked)}
+                  />
+                </div>
+              </div>
+              <button onClick={() => onTaskClick?.(task)} className={styles.taskTileContentButton}>
+                <div className={styles.taskNameWrapper}>
+                  <span>{task.name}</span>
+                  {task.rationale && <div className={styles.taskRationalePreview}>{task.rationale}</div>}
+                  <div className={styles.taskAssignee}>{assigneeDisplay}</div>
+                </div>
+                <div className={styles.taskTags}>
+                  {task.priority && (
+                    <Tag
+                      type={task.priority === 'high' ? 'red' : task.priority === 'medium' ? 'gray' : 'green'}
+                      size="sm"
+                    >
+                      {getPriorityLabel(task.priority, t)}
+                    </Tag>
+                  )}
+                  {overdue && (
+                    <Tag type="red" size="sm">
+                      {t('overdue', 'Overdue')}
+                    </Tag>
+                  )}
+                </div>
+              </button>
+            </Tile>
+          </li>
+        );
+      })}
+    </ul>
+  );
+};
+
+export default TaskListView;

package/src/workspace/task-list-view.scss

@@ -0,0 +1,150 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.taskList {
+  padding: layout.$spacing-03;
+  display: grid;
+  gap: layout.$spacing-02;
+}
+
+.helperText {
+  margin: layout.$spacing-05 0;
+  color: $interactive-01;
+}
+
+.errorText {
+  margin: layout.$spacing-05 0;
+}
+
+.taskTile {
+  padding: 0;
+  border: 1px solid $grey-2;
+  display: flex;
+  flex-direction: row;
+}
+
+.tabletTaskTile {
+  &:not(:last-of-type) {
+    margin-bottom: layout.$spacing-04;
+  }
+}
+
+.taskTileCheckbox {
+  padding: layout.$spacing-03 0 layout.$spacing-03 layout.$spacing-05;
+  display: flex;
+  align-items: flex-start;
+  gap: layout.$spacing-03;
+  min-width: 0;
+}
+
+.taskTileContentButton {
+  padding: layout.$spacing-03 layout.$spacing-05;
+  display: flex;
+  align-items: flex-start;
+  gap: layout.$spacing-03;
+  min-width: 0;
+  border: none;
+  background-color: transparent;
+  text-align: left;
+  flex: 1;
+  transition: background-color 1s ease-in-out;
+}
+
+.taskTileContentButton:hover {
+  background-color: rgba(colors.$gray-100, 0.03);
+}
+
+.completedTile {
+  opacity: 0.65;
+}
+
+.taskNameWrapper {
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-02;
+  flex: 1;
+  min-width: 0;
+}
+
+.taskRationalePreview {
+  font-size: 0.875rem;
+  color: $text-02;
+  line-height: 1.4;
+}
+
+.taskAssignee {
+  @include type.type-style('label-01');
+  color: $text-02;
+}
+
+.taskTags {
+  display: flex;
+  gap: layout.$spacing-02;
+  flex-shrink: 0;
+}
+
+.checkboxWrapper {
+  :global(.cds--checkbox-label) {
+    font-weight: 600;
+  }
+}
+
+.completedCheckbox {
+  :global(.cds--checkbox-label) {
+    text-decoration: line-through;
+    color: $text-02;
+  }
+}
+
+.dueDate {
+  font-size: 0.875rem;
+  color: $text-02;
+  white-space: nowrap;
+}
+
+.taskBody {
+  display: grid;
+  gap: layout.$spacing-03;
+  color: $text-02;
+  font-size: 0.875rem;
+}
+
+.taskMeta {
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: layout.$spacing-02;
+  row-gap: layout.$spacing-01;
+}
+
+.metaLabel {
+  font-weight: 600;
+}
+
+.taskRationale {
+  display: grid;
+  gap: layout.$spacing-02;
+
+  p {
+    margin: 0;
+    line-height: 1.4;
+  }
+}
+
+.emptyStateTile {
+  padding: layout.$spacing-06 0;
+}
+
+.emptyStateTileContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.emptyStateContent {
+  @include type.type-style('heading-compact-01');
+  color: colors.$gray-70;
+  margin-top: layout.$spacing-05;
+  margin-bottom: layout.$spacing-03;
+}