wip

src/components/IssueContent.vue

@@ -2,17 +2,17 @@
 import { ref } from 'vue'
 
 interface Props {
-  value?: string
+  text?: string
 }
 
 const props = defineProps<Props>()
-const emit = defineEmits<{ changed: [value: string] }>()
+const emit = defineEmits<{ changed: [text: string] }>()
 
 const editing = ref(false)
-const draft = ref(props.value ?? '')
+const draft = ref(props.text ?? '')
 
 const startEdit = () => {
-  draft.value = props.value ?? ''
+  draft.value = props.text ?? ''
   editing.value = true
 }
 
@@ -22,7 +22,7 @@ const save = () => {
 }
 
 const cancel = () => {
-  draft.value = props.value ?? ''
+  draft.value = props.text ?? ''
   editing.value = false
 }
 </script>
@@ -30,8 +30,8 @@ const cancel = () => {
 <template>
   <div class="issue-content">
     <template v-if="!editing">
-      <v-sheet class="pa-2 cursor-pointer content-sheet" @click="startEdit">
-        {{ value ?? 'click to add content' }}
+      <v-sheet class="pa-4 cursor-pointer content-sheet" @click="startEdit">
+        {{ text ?? 'click to add content' }}
       </v-sheet>
     </template>
 

src/components/IssueDetails.vue

@@ -93,11 +93,14 @@ defineExpose({
 
         <div class="text-medium-emphasis">Created At:</div>
         <div>{{ createdAtFormatted }}</div>
+
+        <div class="text-medium-emphasis">Due Date:</div>
+        <div>{{ issue.dueDate }}</div>
       </v-card-text>
     </v-card>
 
     <expansion-panel title="Details">
-      <issue-content :value="issue.content" @changed="onContentChanged" />
+      <issue-content :text="issue.content" @changed="onContentChanged" />
     </expansion-panel>
 
     <expansion-panel title="Activity">

src/components/IssueDueDate.vue

@@ -0,0 +1,59 @@
+<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>

src/components/IssueTitle.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+interface Props {
+  text?: string
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<{ changed: [text: string] }>()
+
+const editing = ref(false)
+const draft = ref(props.text ?? '')
+
+const startEdit = () => {
+  draft.value = props.text ?? ''
+  editing.value = true
+}
+
+const save = () => {
+  emit('changed', draft.value)
+  editing.value = false
+}
+
+const cancel = () => {
+  draft.value = props.text ?? ''
+  editing.value = false
+}
+</script>
+
+<template>
+  <div class="issue-title">
+    <template v-if="!editing">
+      <v-sheet class="pa-4 cursor-pointer title-sheet" @click="startEdit">
+        {{ text ?? 'click to add title' }}
+      </v-sheet>
+    </template>
+
+    <template v-else>
+      <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" color="primary" variant="flat" text="Save" @click="save" />
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.title-sheet:hover {
+  background-color: rgba(var(--v-theme-on-surface), 0.06);
+}
+</style>

src/components/LabelText.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+interface Props {
+  text?: string
+  label?: string
+  color?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  text: 'text',
+  color: 'primary',
+})
+</script>
+
+<template>
+  <div class="d-flex align-center ga-1">
+    <v-chip v-if="props.label" size="small" :color="props.color" variant="flat" density="compact" :text="props.label" />
+    <div>{{ props.text }}</div>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>

src/components/ProjectMenu.vue

@@ -2,6 +2,7 @@
 import { computed, onMounted } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useProjectStore } from '@/stores/project.ts'
+import LabelText from '@/components/LabelText.vue'
 
 const projectStore = useProjectStore()
 const { projects, current } = storeToRefs(projectStore)
@@ -35,12 +36,7 @@ onMounted(async () => {
     <v-menu>
       <template v-slot:activator="{ props }">
         <v-btn density="comfortable" v-bind="props">
-          <div class="d-flex ga-1 align-center">
-            <v-chip v-if="current" size="small" variant="flat" color="primary" density="compact">
-              {{ current.key }}
-            </v-chip>
-            <div>{{ currentProjectName }}</div>
-          </div>
+          <label-text :label="current?.key" :text="currentProjectName" />
         </v-btn>
       </template>
 
@@ -55,9 +51,8 @@ onMounted(async () => {
         @update:selected="select"
       >
         <v-list-item slim v-for="project in projects" :key="project.id" :value="project.id">
-          <v-list-item-title class="d-flex ga-1 align-center">
-            <v-chip size="small" color="primary" variant="flat" density="compact">{{ project.key }}</v-chip>
-            <div>{{ project.name }}</div>
+          <v-list-item-title>
+            <label-text :label="project.key" :text="project.name" />
           </v-list-item-title>
         </v-list-item>
       </v-list>