46fa43d67f
Co-authored-by: Adrian Simmons <adrian@perlucida.co.uk> Co-authored-by: Dominik Pschenitschni <mail@celement.de> Co-authored-by: kolaente <k@knt.li> Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/954 Reviewed-by: dpschen <dpschen@noreply.kolaente.de> Reviewed-by: konrad <k@knt.li> Co-authored-by: adrinux <adrian@perlucida.co.uk> Co-committed-by: adrinux <adrian@perlucida.co.uk>
60 lines
1.3 KiB
Vue
60 lines
1.3 KiB
Vue
<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: var(--grey-500);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
|
|
svg {
|
|
transform: rotate(-90deg);
|
|
transition: stroke-dashoffset 0.35s;
|
|
margin-right: .25rem;
|
|
|
|
circle {
|
|
stroke: var(--grey-400);
|
|
|
|
&:last-child {
|
|
stroke: var(--primary);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |