due date

src/api/issue.api.ts

@@ -31,6 +31,7 @@ export interface CreateIssueInput {
   status?: Issue['status']
   priority?: Issue['priority']
   assignee?: string
+  dueDate?: string | null
 }
 
 export type UpdateIssueInput = Partial<CreateIssueInput>

src/components/IssueContent.vue

@@ -46,8 +46,8 @@ const cancel = () => {
       <v-textarea autofocus class="mb-1" hide-details v-model="draft" variant="outlined" auto-grow rows="4" />
 
       <div class="d-flex justify-end ga-1">
-        <v-btn density="compact" variant="text" text="Cancel" @click="cancel" />
+        <v-btn density="compact" prepend-icon="mdi-cancel" variant="text" text="Cancel" @click="cancel" />
-        <v-btn density="compact" color="primary" variant="flat" text="Save" @click="save" />
+        <v-btn density="compact" prepend-icon="mdi-check" color="primary" variant="flat" text="Save" @click="save" />
       </div>
     </template>
   </div>

src/components/IssueDate.vue

@@ -36,24 +36,33 @@ const cancel = () => {
 <template>
   <div class="issue-due-date">
     <template v-if="!editing">
-      <v-sheet class="pa-4 cursor-pointer due-date-sheet" @click="startEdit">
+      <v-hover #default="{ isHovering, props }">
-        {{ formatted() }}
+        <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>
-      <v-date-input autofocus class="mb-1" hide-details v-model="draft" variant="outlined" />
+      <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
+        />
 
-      <div class="d-flex justify-end ga-1">
+        <v-btn density="compact" prepend-icon="mdi-cancel" variant="text" text="Cancel" @click="cancel" />
-        <v-btn density="compact" variant="text" text="Cancel" @click="cancel" />
+        <v-btn density="compact" prepend-icon="mdi-check" color="primary" variant="flat" text="Save" @click="save" />
-        <v-btn density="compact" color="primary" variant="flat" text="Save" @click="save" />
       </div>
     </template>
   </div>
 </template>
 
-<style scoped lang="scss">
+<style scoped lang="scss"></style>
-.due-date-sheet:hover {
-  background-color: rgba(var(--v-theme-on-surface), 0.06);
-}
-</style>

src/components/IssueDetails.vue

@@ -8,6 +8,7 @@ import StatusMenu from '@/components/StatusMenu.vue'
 import AssigneeMenu from '@/components/AssigneeMenu.vue'
 import ReporterInfo from '@/components/ReporterInfo.vue'
 import IssueTitle from '@/components/IssueTitle.vue'
+import IssueDate from '@/components/IssueDate.vue'
 
 interface Props {
   ckey: string
@@ -16,6 +17,8 @@ interface Props {
 const emit = defineEmits<{
   statusChanged: [issue: Issue]
   assigneeChanged: [issue: Issue]
+  titleChanged: [issue: Issue]
+  dueDateChanged: [issue: Issue]
 }>()
 
 const issueStore = useIssueStore()
@@ -46,7 +49,16 @@ const onTitleChanged = async (title: string) => {
   const updated = await issueStore.update(issue.value.id, { title })
   if (updated) {
     issue.value = updated
-    emit('assigneeChanged', updated)
+    emit('titleChanged', updated)
+  }
+}
+
+const onDueDateChanged = async (date: string) => {
+  if (!issue.value) return
+  const updated = await issueStore.update(issue.value.id, { dueDate: date })
+  if (updated) {
+    issue.value = updated
+    emit('dueDateChanged', updated)
   }
 }
 
@@ -106,7 +118,7 @@ defineExpose({
         <div>{{ createdAtFormatted }}</div>
 
         <div class="text-medium-emphasis">Due Date:</div>
-        <div>{{ issue.dueDate }}</div>
+        <issue-date :date="issue.dueDate" @changed="onDueDateChanged" />
       </v-card-text>
     </v-card>
 

src/components/IssueTitle.vue

@@ -48,8 +48,8 @@ const cancel = () => {
       <v-text-field 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" prepend-icon="mdi-cancel" variant="text" text="Cancel" @click="cancel" />
-        <v-btn density="compact" color="primary" variant="flat" text="Save" @click="save" />
+        <v-btn density="compact" prepend-icon="mdi-check" color="primary" variant="flat" text="Save" @click="save" />
       </div>
     </template>
   </div>