julien/failwell
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

💄 (task) improve task list and preview

Browse Source
This commit is contained in:
Julien Calixte
2023-08-03 23:25:25 +02:00
parent 3ea9a6c035
commit c767c84a43
3 changed files with 38 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/modules/record/components/TaskRecordPreview.vue
View File

@@ -14,14 +14,7 @@ const { duration } = useTaskRecordMetadata(taskRecord)
</script> </script>
<template> <template>
<div> <div class="task-record-preview">
<div class="content">
<div v-if="taskRecord" class="task-record-link-container content">
<span v-if="duration !== null">last time: {{ duration }} minutes</span>
</div>
<div v-else>No record yet</div>
</div>
<hr />
<router-link <router-link
:to="{ :to="{
name: 'record-view', name: 'record-view',
@@ -30,13 +23,28 @@ const { duration } = useTaskRecordMetadata(taskRecord)
class="button is-primary is-light" class="button is-primary is-light"
>recording page</router-link >recording page</router-link
> >
<div v-if="taskRecord" class="task-record-link-container content">
<span v-if="duration !== null"
>Last record took {{ duration }} minutes</span
>
</div>
<div v-else>No record yet</div>
</div> </div>
</template> </template>
<style scoped lang="scss"> <style scoped lang="scss">
.task-record-link-container { .task-record-preview {
margin: auto;
display: flex; display: flex;
justify-content: space-around;
align-items: center; align-items: center;
flex-wrap: wrap;
gap: 1rem; gap: 1rem;
.task-record-link-container {
display: flex;
align-items: center;
gap: 1rem;
}
} }
</style> </style>

32
src/modules/task/components/TaskList.vue
View File

@@ -9,33 +9,41 @@ const taskStore = useTaskStore()
<div class="task-list-container" v-if="taskStore.recentTasks.length > 0"> <div class="task-list-container" v-if="taskStore.recentTasks.length > 0">
<ul class="task-list"> <ul class="task-list">
<li v-for="task in taskStore.recentTasks" :key="task.id"> <li v-for="task in taskStore.recentTasks" :key="task.id">
<div class="line"> <router-link :to="{ name: 'task-view', params: { id: task.id } }">
<router-link :to="{ name: 'task-view', params: { id: task.id } }">{{ <div class="line">
task.title {{ task.title }}
}}</router-link> </div>
</div> <div class="line">
<div class="line"> <span class="tag">{{ task.totalEstimation }} minutes</span>
<span class="tag">{{ task.totalEstimation }} minutes</span> <span>{{ formatToShortDate(task.date) }}</span>
<span>{{ formatToShortDate(task.date) }}</span> </div>
</div> </router-link>
</li> </li>
</ul> </ul>
</div> </div>
</template> </template>
<style scoped> <style scoped lang="scss">
.task-list-container { .task-list-container {
padding: 0.5rem; padding: 0.5rem;
background-color: #f1f2f6;
} }
.task-list { .task-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1rem; gap: 1rem;
li {
background-color: #f1f2f6;
a {
display: block;
padding: 1rem;
}
}
} }
.task-list .line { .line {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;

1
src/views/HomeView.vue
View File

@@ -55,6 +55,7 @@ main {
.new-task-container { .new-task-container {
display: flex; display: flex;
flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }