|
| 1 | +<template> |
| 2 | + <TaskTimelineItem |
| 3 | + :step-number="stepNumber" |
| 4 | + title="Test Schedule" |
| 5 | + :is-complete="isComplete" |
| 6 | + :is-last="isLast" |
| 7 | + > |
| 8 | + <template #icon> |
| 9 | + <ClipboardCheck class="w-4 h-4" /> |
| 10 | + </template> |
| 11 | + |
| 12 | + <div class="space-y-4"> |
| 13 | + <div class="space-y-2"> |
| 14 | + <Label for="test-schedule" class="text-sm">Scheduled Time</Label> |
| 15 | + <Input |
| 16 | + id="test-schedule" |
| 17 | + v-model="testSchedule" |
| 18 | + placeholder="e.g. Monday 14:00" |
| 19 | + /> |
| 20 | + </div> |
| 21 | + |
| 22 | + <div class="flex items-center space-x-2"> |
| 23 | + <Checkbox id="test-done" v-model="testDone" /> |
| 24 | + <Label for="test-done" class="text-sm">Test completed</Label> |
| 25 | + </div> |
| 26 | + </div> |
| 27 | + </TaskTimelineItem> |
| 28 | +</template> |
| 29 | + |
| 30 | +<script setup lang="ts"> |
| 31 | +import { ref, computed, watch } from "vue"; |
| 32 | +import TaskTimelineItem from "./TaskTimelineItem.vue"; |
| 33 | +import { Checkbox } from "@/components/ui/checkbox"; |
| 34 | +import { Label } from "@/components/ui/label"; |
| 35 | +import { Input } from "@/components/ui/input"; |
| 36 | +import { ClipboardCheck } from "lucide-vue-next"; |
| 37 | +import type { SpeakerTasks } from "@/dto/tasks"; |
| 38 | +
|
| 39 | +interface Props { |
| 40 | + entityId: string; |
| 41 | + stepNumber?: number; |
| 42 | + isLast?: boolean; |
| 43 | + speakerTasks?: SpeakerTasks; |
| 44 | +} |
| 45 | +
|
| 46 | +const props = withDefaults(defineProps<Props>(), { |
| 47 | + stepNumber: 8, |
| 48 | + isLast: false, |
| 49 | + speakerTasks: undefined, |
| 50 | +}); |
| 51 | +
|
| 52 | +const emit = defineEmits<{ |
| 53 | + "update:testSchedule": [schedule: string, done: boolean]; |
| 54 | +}>(); |
| 55 | +
|
| 56 | +const testSchedule = ref<string>( |
| 57 | + props.speakerTasks?.materials?.testSchedule ?? "", |
| 58 | +); |
| 59 | +const testDone = ref<boolean>(props.speakerTasks?.materials?.testDone ?? false); |
| 60 | +
|
| 61 | +watch([testSchedule, testDone], () => { |
| 62 | + emit("update:testSchedule", testSchedule.value, testDone.value); |
| 63 | +}); |
| 64 | +
|
| 65 | +const isComplete = computed(() => testDone.value === true); |
| 66 | +
|
| 67 | +defineExpose({ isComplete }); |
| 68 | +</script> |
0 commit comments