Add buttons to defer by 1/3/7 days
This commit is contained in:
parent
f4971b643a
commit
4f05df0524
|
@ -1,5 +1,11 @@
|
|||
<template>
|
||||
<div class="defer-task loading-container" :class="{'is-loading': taskService.loading}">
|
||||
<label class="label">Defer due date</label>
|
||||
<div class="defer-days">
|
||||
<button class="button is-outlined is-primary has-no-shadow" @click="() => deferDays(1)">1 day</button>
|
||||
<button class="button is-outlined is-primary has-no-shadow" @click="() => deferDays(3)">3 days</button>
|
||||
<button class="button is-outlined is-primary has-no-shadow" @click="() => deferDays(7)">1 week</button>
|
||||
</div>
|
||||
<flat-pickr
|
||||
:class="{ 'disabled': taskService.loading}"
|
||||
class="input"
|
||||
|
@ -76,6 +82,11 @@
|
|||
},
|
||||
},
|
||||
methods: {
|
||||
deferDays(days) {
|
||||
this.dueDate = new Date(this.dueDate)
|
||||
this.dueDate = this.dueDate.setDate(this.dueDate.getDate() + days)
|
||||
this.updateDueDate()
|
||||
},
|
||||
updateDueDate() {
|
||||
if (!this.dueDate) {
|
||||
return
|
||||
|
|
|
@ -199,7 +199,7 @@
|
|||
max-width: 350px;
|
||||
border-radius: $radius;
|
||||
border: 1px solid $grey-lighter;
|
||||
padding: .5rem;
|
||||
padding: 1rem;
|
||||
margin: 1rem;
|
||||
background: $white;
|
||||
color: $text;
|
||||
|
@ -217,4 +217,10 @@
|
|||
width: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
.defer-days {
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
margin: .5rem 0;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -54,6 +54,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
&.is-primary.is-outlined:hover {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&.noshadow{
|
||||
&,
|
||||
&.is-hovered,
|
||||
|
|
Reference in New Issue
Block a user