69 lines
1.8 KiB
Vue
69 lines
1.8 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-hover #default="{ isHovering, props }">
|
|
<v-sheet v-bind="props" class="cursor-pointer d-flex align-center ga-1" @click="startEdit">
|
|
<div>{{ formatted() }}</div>
|
|
<v-icon v-if="isHovering" icon="mdi-pencil" size="small" />
|
|
</v-sheet>
|
|
</v-hover>
|
|
</template>
|
|
|
|
<template v-else>
|
|
<div class="d-flex ga-1 align-center">
|
|
<v-date-input
|
|
input-format="dd-mm-yyyy"
|
|
autofocus
|
|
class="mb-1"
|
|
hide-details
|
|
prepend-icon=""
|
|
v-model="draft"
|
|
density="compact"
|
|
variant="outlined"
|
|
persistent-placeholder
|
|
/>
|
|
|
|
<v-btn density="compact" prepend-icon="mdi-cancel" variant="text" text="Cancel" @click="cancel" />
|
|
<v-btn density="compact" prepend-icon="mdi-check" color="primary" variant="flat" text="Save" @click="save" />
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss"></style>
|