local-it/vikunja-frontend
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Add repeat after one-click intervals

Browse source
This commit is contained in:
kolaente 2021-01-16 21:09:11 +01:00
parent 2f45b63157
commit 01a1e29db0
No known key found for this signature in database
GPG key ID: F40E70337AB24C9B
1 changed files with 50 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

84
src/components/tasks/partials/repeatAfter.vue
View file

@ -1,40 +1,47 @@
<template> <template>
<div class="control repeat-after-input columns"> <div class="control repeat-after-input">
<div class="is-flex column"> <div class="buttons has-addons is-centered mt-2">
<p class="pr-4"> <button class="button is-small" @click="() => setRepeatAfter(1, 'days')">Every Day</button>
Each <button class="button is-small" @click="() => setRepeatAfter(1, 'weeks')">Every Week</button>
</p> <button class="button is-small" @click="() => setRepeatAfter(1, 'months')">Every Month</button>
<div class="field has-addons is-fullwidth"> </div>
<div class="control"> <div class="columns is-align-items-center">
<input <div class="is-flex column">
:disabled="disabled" <p class="pr-4">
@change="updateData" Each
class="input" </p>
placeholder="Specify an amount..." <div class="field has-addons is-fullwidth">
v-model="repeatAfter.amount"/> <div class="control">
</div> <input
<div class="control"> :disabled="disabled"
<div class="select"> @change="updateData"
<select :disabled="disabled" @change="updateData" v-model="repeatAfter.type"> class="input"
<option value="hours">Hours</option> placeholder="Specify an amount..."
<option value="days">Days</option> v-model="repeatAfter.amount"/>
<option value="weeks">Weeks</option> </div>
<option value="months">Months</option> <div class="control">
<option value="years">Years</option> <div class="select">
</select> <select :disabled="disabled" @change="updateData" v-model="repeatAfter.type">
<option value="hours">Hours</option>
<option value="days">Days</option>
<option value="weeks">Weeks</option>
<option value="months">Months</option>
<option value="years">Years</option>
</select>
</div>
</div> </div>
</div> </div>
</div> </div>
<fancycheckbox
:disabled="disabled"
@change="updateData"
class="column"
v-model="task.repeatFromCurrentDate"
v-tooltip="'When marking the task as done, all dates will be set relative to the current date rather than the date they had before.'"
>
Repeat from current date
</fancycheckbox>
</div> </div>
<fancycheckbox
:disabled="disabled"
@change="updateData"
class="column"
v-model="task.repeatFromCurrentDate"
v-tooltip="'When marking the task as done, all dates will be set relative to the current date rather than the date they had before.'"
>
Repeat from current date
</fancycheckbox>
</div> </div>
</template> </template>
@ -83,6 +90,11 @@ export default {
this.$emit('input', this.task) this.$emit('input', this.task)
this.$emit('change') this.$emit('change')
}, },
setRepeatAfter(amount, type) {
this.repeatAfter.amount = amount
this.repeatAfter.type = type
this.updateData()
},
}, },
} }
</script> </script>
@ -92,7 +104,11 @@ p {
padding-top: 6px; padding-top: 6px;
} }
.columns { .input {
align-items: center; min-width: 2rem;
}
.fancycheckbox {
padding: 0;
} }
</style> </style>