bvandeusen
ac90548823
- Add 'cancelled' status to TaskStatus type, StatusBadge, TaskCard, TaskEditorView, TaskViewerView, TasksListView - Add RecurrenceEditor component (none / interval / calendar rules) - TaskEditorView: wire RecurrenceEditor, show started_at/completed_at timestamps read-only, include recurrence_rule in save payload - TaskViewerView: show recurrence summary, timestamps in meta row - tasks.ts: statusFilter/priorityFilter as arrays, add recurrence_rule to updateTask and createTask payloads Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
63 lines
1.6 KiB
Vue
63 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
import type { TaskStatus } from "@/types/task";
|
|
|
|
const props = defineProps<{
|
|
status: TaskStatus;
|
|
clickable?: boolean;
|
|
}>();
|
|
|
|
defineEmits<{ click: [] }>();
|
|
|
|
const labels: Record<TaskStatus, string> = {
|
|
todo: "Todo",
|
|
in_progress: "In Progress",
|
|
done: "Done",
|
|
cancelled: "Cancelled",
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<span
|
|
:class="['status-badge', `status-${props.status}`, { clickable }]"
|
|
@click="clickable ? $emit('click') : undefined"
|
|
:role="clickable ? 'button' : undefined"
|
|
:tabindex="clickable ? 0 : undefined"
|
|
>
|
|
{{ labels[props.status] }}
|
|
</span>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.status-badge {
|
|
display: inline-block;
|
|
padding: 0.15rem 0.5rem;
|
|
border-radius: 12px;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.025em;
|
|
}
|
|
.status-todo {
|
|
background: color-mix(in srgb, var(--color-status-todo-bg) 78%, var(--color-status-todo) 22%);
|
|
color: color-mix(in srgb, var(--color-status-todo) 85%, #000 15%);
|
|
}
|
|
.status-in_progress {
|
|
background: color-mix(in srgb, var(--color-status-in-progress-bg) 78%, var(--color-status-in-progress) 22%);
|
|
color: color-mix(in srgb, var(--color-status-in-progress) 85%, #000 15%);
|
|
}
|
|
.status-done {
|
|
background: color-mix(in srgb, var(--color-status-done-bg) 78%, var(--color-status-done) 22%);
|
|
color: color-mix(in srgb, var(--color-status-done) 85%, #000 15%);
|
|
}
|
|
.status-cancelled {
|
|
background: color-mix(in srgb, var(--color-bg-secondary) 78%, var(--color-text-muted) 22%);
|
|
color: var(--color-text-muted);
|
|
}
|
|
.clickable {
|
|
cursor: pointer;
|
|
}
|
|
.clickable:hover {
|
|
filter: brightness(0.9);
|
|
}
|
|
</style>
|