feat: show checklist summary on tasks

src/components/tasks/partials/checklist-summary.vue

@@ -0,0 +1,60 @@
+<template>
+	<span v-if="checklist.total > 0" class="checklist-summary">
+		<svg width="12" height="12">
+			<circle stroke-width="2" fill="transparent" cx="50%" cy="50%" r="5"></circle>
+			<circle stroke-width="2" stroke-dasharray="31" :stroke-dashoffset="checklistCircleDone"
+					stroke-linecap="round" fill="transparent" cx="50%" cy="50%" r="5"></circle>
+		</svg>
+		<span>
+			{{ $t(checklist.total === checklist.checked ? 'task.checklistAllDone' : 'task.checklistTotal', checklist) }}
+		</span>
+	</span>
+</template>
+
+<script>
+import {getChecklistStatistics} from '../../../helpers/checklistFromText'
+
+export default {
+	name: 'checklist-summary',
+	props: {
+		task: {
+			required: true,
+		},
+	},
+	computed: {
+		checklist() {
+			return getChecklistStatistics(this.task.description)
+		},
+		checklistCircleDone() {
+			const r = 5
+			const c = Math.PI * (r * 2)
+
+			const progress = this.checklist.checked / this.checklist.total * 100
+
+			return ((100 - progress) / 100) * c
+		},
+	},
+}
+</script>
+
+<style scoped lang="scss">
+.checklist-summary {
+	color: $grey-500;
+	display: inline-flex;
+	align-items: center;
+
+	> svg {
+		transform: rotate(-90deg);
+		transition: stroke-dashoffset 0.35s;
+		margin-right: .25rem;
+
+		circle {
+			stroke: $grey-400;
+
+			&:last-child {
+				stroke: $primary;
+			}
+		}
+	}
+}
+</style>

src/components/tasks/partials/singleTaskInList.vue

@@ -59,6 +59,7 @@
 					<icon icon="align-left"/>
 				</span>
 			</span>
+			<checklist-summary :task="task"/>
 		</router-link>
 		<progress
 			class="progress is-small"
@@ -94,6 +95,7 @@ import Fancycheckbox from '../../input/fancycheckbox'
 import DeferTask from './defer-task'
 import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
 import {playPop} from '@/helpers/playPop'
+import ChecklistSummary from './checklist-summary'
 
 export default {
 	name: 'singleTaskInList',
@@ -105,6 +107,7 @@ export default {
 		}
 	},
 	components: {
+		ChecklistSummary,
 		DeferTask,
 		Fancycheckbox,
 		User,
@@ -172,10 +175,10 @@ export default {
 						this.task = t
 						this.$emit('task-updated', t)
 						this.$message.success({
-								message: this.task.done ?
-									this.$t('task.doneSuccess') :
-									this.$t('task.undoneSuccess'),
-							}, [{
+							message: this.task.done ?
+								this.$t('task.doneSuccess') :
+								this.$t('task.undoneSuccess'),
+						}, [{
 							title: 'Undo',
 							callback: () => {
 								this.task.done = !this.task.done

src/i18n/lang/en.json

@@ -493,6 +493,8 @@
     "doneSuccess": "The task was successfully marked as done.",
     "undoneSuccess": "The task was successfully un-marked as done.",
     "openDetail": "Open task detail view",
+    "checklistTotal": "{checked} of {total} tasks",
+    "checklistAllDone": "{total} tasks",
     "show": {
       "titleCurrent": "Current Tasks",
       "titleDates": "Tasks from {from} until {to}",

src/styles/components/task.scss

@@ -10,6 +10,7 @@
 
   .subtitle {
     color: $grey-500;
+    margin-bottom: 1rem;
 
     a {
       color: $grey-800;
@@ -178,6 +179,10 @@
     color: $grey-500;
     text-align: right;
   }
+	
+  .checklist-summary {
+    margin-left: .25rem;
+  }	
 }
 
 .link-share-container:not(.has-background) .task-view {

src/styles/components/tasks.scss

@@ -195,6 +195,11 @@
 			border-bottom-color: $grey-300;
 		}
 	}
+	
+	.checklist-summary {
+		padding-left: .5rem;
+		font-size: .9rem;
+	}
 
 	.progress {
 		width: 50px;

src/views/tasks/TaskDetailView.vue

@@ -8,9 +8,11 @@
 					{{ getListTitle(parent.list) }}
 				</router-link>
 			</h6>
+			
+			<checklist-summary :task="task"/>
 
 			<!-- Content and buttons -->
-			<div class="columns">
+			<div class="columns mt-2">
 				<!-- Content -->
 				<div :class="{'is-two-thirds': canWrite}" class="column">
 					<div class="columns details">
@@ -445,10 +447,12 @@ import TaskSubscription from '@/components/misc/subscription.vue'
 import {CURRENT_LIST} from '@/store/mutation-types'
 
 import {uploadFile} from '@/helpers/attachments'
+import ChecklistSummary from '../../components/tasks/partials/checklist-summary'
 
 export default {
 	name: 'TaskDetailView',
 	components: {
+		ChecklistSummary,
 		TaskSubscription,
 		Datepicker,
 		ColorPicker,