60 lines
1.5 KiB
Vue
60 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
|
|
interface Props {
|
|
date?: string | null
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
const emit = defineEmits<{ changed: [date: string] }>()
|
|
|
|
const editing = ref(false)
|
|
const draft = ref<Date | null>(props.date ? new Date(props.date) : null)
|
|
|
|
const formatted = () => {
|
|
if (!props.date) return 'click to add due date'
|
|
return new Date(props.date).toLocaleDateString('ru-RU')
|
|
}
|
|
|
|
const startEdit = () => {
|
|
draft.value = props.date ? new Date(props.date) : null
|
|
editing.value = true
|
|
}
|
|
|
|
const save = () => {
|
|
if (!draft.value) return
|
|
emit('changed', draft.value.toISOString())
|
|
editing.value = false
|
|
}
|
|
|
|
const cancel = () => {
|
|
draft.value = props.date ? new Date(props.date) : null
|
|
editing.value = false
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="issue-due-date">
|
|
<template v-if="!editing">
|
|
<v-sheet class="pa-4 cursor-pointer due-date-sheet" @click="startEdit">
|
|
{{ formatted() }}
|
|
</v-sheet>
|
|
</template>
|
|
|
|
<template v-else>
|
|
<v-date-input autofocus class="mb-1" hide-details v-model="draft" variant="outlined" />
|
|
|
|
<div class="d-flex justify-end ga-1">
|
|
<v-btn density="compact" variant="text" text="Cancel" @click="cancel" />
|
|
<v-btn density="compact" color="primary" variant="flat" text="Save" @click="save" />
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.due-date-sheet:hover {
|
|
background-color: rgba(var(--v-theme-on-surface), 0.06);
|
|
}
|
|
</style>
|