98 lines
No EOL
2.8 KiB
Vue
98 lines
No EOL
2.8 KiB
Vue
<template>
|
|
<UCard>
|
|
<template #header>
|
|
<div class="flex items-center justify-between">
|
|
<h4 class="font-medium">Milestones</h4>
|
|
<UButton
|
|
size="xs"
|
|
variant="ghost"
|
|
icon="i-heroicons-plus"
|
|
@click="showAddForm = true"
|
|
>
|
|
Add
|
|
</UButton>
|
|
</div>
|
|
</template>
|
|
|
|
<div class="space-y-3">
|
|
<div v-if="milestoneStatuses.length === 0" class="text-sm text-gray-500 italic py-2">
|
|
No milestones set. Add key dates to track progress.
|
|
</div>
|
|
|
|
<div
|
|
v-for="milestone in milestoneStatuses"
|
|
:key="milestone.id"
|
|
class="flex items-center justify-between p-2 border border-gray-200 rounded"
|
|
>
|
|
<div class="flex items-center gap-2">
|
|
<UIcon
|
|
:name="milestone.willReach ? 'i-heroicons-check-circle' : 'i-heroicons-exclamation-triangle'"
|
|
:class="milestone.willReach ? 'text-green-500' : 'text-amber-500'"
|
|
class="w-4 h-4"
|
|
/>
|
|
<div>
|
|
<div class="text-sm font-medium">{{ milestone.label }}</div>
|
|
<div class="text-xs text-gray-500">
|
|
{{ formatDate(milestone.date) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<UButton
|
|
size="xs"
|
|
variant="ghost"
|
|
color="red"
|
|
icon="i-heroicons-trash"
|
|
@click="removeMilestone(milestone.id)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Add milestone modal -->
|
|
<UModal v-model="showAddForm">
|
|
<div class="p-4">
|
|
<h3 class="text-lg font-semibold mb-4">Add Milestone</h3>
|
|
<div class="space-y-3">
|
|
<UInput
|
|
v-model="newMilestone.label"
|
|
placeholder="Milestone name (e.g., 'Product launch')"
|
|
/>
|
|
<UInput
|
|
v-model="newMilestone.date"
|
|
type="date"
|
|
/>
|
|
<div class="flex gap-2">
|
|
<UButton @click="saveMilestone">Save</UButton>
|
|
<UButton variant="ghost" @click="cancelAdd">Cancel</UButton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</UModal>
|
|
</UCard>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const { milestoneStatus, addMilestone, removeMilestone } = useCoopBuilder()
|
|
|
|
const showAddForm = ref(false)
|
|
const newMilestone = ref({ label: '', date: '' })
|
|
|
|
const milestoneStatuses = computed(() => milestoneStatus())
|
|
|
|
function formatDate(dateString: string): string {
|
|
const date = new Date(dateString)
|
|
return date.toLocaleDateString('en-US', { month: 'short', year: 'numeric' })
|
|
}
|
|
|
|
function saveMilestone() {
|
|
if (newMilestone.value.label && newMilestone.value.date) {
|
|
addMilestone(newMilestone.value.label, newMilestone.value.date)
|
|
newMilestone.value = { label: '', date: '' }
|
|
showAddForm.value = false
|
|
}
|
|
}
|
|
|
|
function cancelAdd() {
|
|
newMilestone.value = { label: '', date: '' }
|
|
showAddForm.value = false
|
|
}
|
|
</script> |