kanban style app

2026-05-17 21:08:41 -04:00
parent 1f4f4210b3
commit 8dc99de4a7
10 changed files with 568 additions and 76 deletions
@@ -0,0 +1,64 @@
+<template>
+    <li
+        class="card"
+        :class="{
+            'priority-high': task.priority === 'high',
+            'priority-medium': task.priority === 'medium',
+            'priority-low': task.priority === 'low',
+        }"
+    >
+        <div class="card-header">
+            <h3>{{ task.title }}</h3>
+        </div>
+        <dl>
+            <AssigneeDetails :task />
+            <StatusDetails :task />
+            <PriorityDetails :task />
+            <div>
+                <dt>Created At:</dt>
+                <dd>{{ formattedCreatedAt }}</dd>
+            </div>
+            <div>
+                <dt>Updated At:</dt>
+                <dd>{{ formattedUpdatedAt }}</dd>
+            </div>
+        </dl>
+    </li>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import type { TaskItem } from "@/types";
+import AssigneeDetails from "./Details/AssigneeDetails.vue";
+import StatusDetails from "./Details/StatusDetails.vue";
+import PriorityDetails from "./Details/PriorityDetails.vue";
+
+interface TaskListItemProps {
+    task: TaskItem;
+}
+
+const { task } = defineProps<TaskListItemProps>();
+
+const formatterOptions = {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+    hour: "numeric",
+    minute: "numeric",
+    second: "numeric",
+    timeZoneName: "short",
+    timeZone: "America/New_York",
+} as const;
+
+const formattedCreatedAt = computed(() =>
+    new Intl.DateTimeFormat("en-US", formatterOptions).format(
+        new Date(task.createdAt),
+    ),
+);
+
+const formattedUpdatedAt = computed(() =>
+    new Intl.DateTimeFormat("en-US", formatterOptions).format(
+        new Date(task.updatedAt),
+    ),
+);
+</script>