mirror of
https://github.com/sudoxnym/habitica.git
synced 2026-04-14 11:46:23 +00:00
Client Tasks v3 (#8926)
* tasks hover state * hide column background if task too close * wip edit tasks * wip: replace tags * upgrade bootstrap-vue and fix creare btn for tasks * difficulty options colors and active label fixes * fix tags
This commit is contained in:
Matteo Pagliazzi
GitHub
parent
8d82566654
commit
f57c647e21
16 changed files with 3505 additions and 120 deletions
1
.babelrc
1
.babelrc
|
|
@ -1,6 +1,7 @@
|
|||
{
|
||||
"presets": ["es2015"],
|
||||
"plugins": [
|
||||
"transform-object-rest-spread",
|
||||
["transform-async-to-module-method", {
|
||||
"module": "bluebird",
|
||||
"method": "coroutine"
|
||||
|
|
|
|||
3203
npm-shrinkwrap.json
generated
3203
npm-shrinkwrap.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -31,7 +31,7 @@
|
|||
"bluebird": "^3.3.5",
|
||||
"body-parser": "^1.15.0",
|
||||
"bootstrap": "^4.0.0-alpha.6",
|
||||
"bootstrap-vue": "^0.16.1",
|
||||
"bootstrap-vue": "^0.18.0",
|
||||
"bower": "~1.3.12",
|
||||
"browserify": "~12.0.1",
|
||||
"compression": "^1.6.1",
|
||||
|
|
|
|||
|
|
@ -80,6 +80,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
.show > .btn-success.dropdown-toggle {
|
||||
background: $green-50;
|
||||
}
|
||||
|
||||
.btn-info {
|
||||
background: $blue-50;
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
line-height: 1.43;
|
||||
}
|
||||
|
||||
.dropdown.show > .dropdown-toggle {
|
||||
.dropdown.show > .dropdown-toggle:not(.btn-success) {
|
||||
color: $purple-200;
|
||||
border-color: $purple-500 !important;
|
||||
box-shadow: none;
|
||||
|
|
|
|||
|
|
@ -119,6 +119,26 @@ $bg-disabled-control: #34303a;
|
|||
}
|
||||
}
|
||||
|
||||
.inline-edit-input-group {
|
||||
.input-group-btn {
|
||||
cursor: pointer;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.destroy-icon {
|
||||
width: 14px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.inline-edit-input {
|
||||
margin-bottom: 0px;
|
||||
border-radius: 0px;
|
||||
border: none !important;
|
||||
padding-left: 36px;
|
||||
}
|
||||
|
||||
@mixin custom-radio-checked-icon ($bg-color) {
|
||||
background-image: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='#{$bg-color}'/%3E%3C/svg%3E"), "#", "%23");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,6 +20,10 @@
|
|||
&-purple {
|
||||
background: $purple-300;
|
||||
|
||||
&-color {
|
||||
color: $purple-300;
|
||||
}
|
||||
|
||||
&-control-habit {
|
||||
background: $purple-300;
|
||||
}
|
||||
|
|
@ -31,6 +35,11 @@
|
|||
|
||||
&-worst {
|
||||
background: $maroon-100;
|
||||
|
||||
&-color {
|
||||
color: darken($maroon-100, 12%);
|
||||
}
|
||||
|
||||
&-control-habit {
|
||||
background: darken($maroon-100, 12%);
|
||||
}
|
||||
|
|
@ -47,6 +56,11 @@
|
|||
|
||||
&-worse {
|
||||
background: $red-100;
|
||||
|
||||
&-color {
|
||||
color: darken($red-100, 12%);
|
||||
}
|
||||
|
||||
&-control-habit {
|
||||
background: darken($red-100, 12%);
|
||||
}
|
||||
|
|
@ -63,6 +77,11 @@
|
|||
|
||||
&-bad {
|
||||
background: $orange-100;
|
||||
|
||||
&-color {
|
||||
color: darken($orange-100, 12%);
|
||||
}
|
||||
|
||||
&-control-habit {
|
||||
background: darken($orange-100, 12%);
|
||||
}
|
||||
|
|
@ -79,6 +98,11 @@
|
|||
|
||||
&-neutral {
|
||||
background: $yellow-100;
|
||||
|
||||
&-color {
|
||||
color: darken($yellow-100, 12%);
|
||||
}
|
||||
|
||||
&-control-habit {
|
||||
background: darken($yellow-100, 12%);
|
||||
}
|
||||
|
|
@ -95,6 +119,11 @@
|
|||
|
||||
&-good {
|
||||
background: $green-10;
|
||||
|
||||
&-color {
|
||||
color: darken($green-10, 12%);
|
||||
}
|
||||
|
||||
&-control-habit {
|
||||
background: darken($green-10, 12%);
|
||||
}
|
||||
|
|
@ -111,6 +140,11 @@
|
|||
|
||||
&-better {
|
||||
background: $blue-50;
|
||||
|
||||
&-color {
|
||||
color: darken($blue-50, 12%);
|
||||
}
|
||||
|
||||
&-control-habit {
|
||||
background: darken($blue-50, 12%);
|
||||
}
|
||||
|
|
@ -127,6 +161,11 @@
|
|||
|
||||
&-best {
|
||||
background: $teal-50;
|
||||
|
||||
&-color {
|
||||
color: darken($teal-50, 12%);
|
||||
}
|
||||
|
||||
&-control-habit {
|
||||
background: darken($teal-50, 12%);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,20 +21,25 @@ div
|
|||
.col-3.actions
|
||||
b-dropdown(:text="$t('sort')", right=true)
|
||||
b-dropdown-item(@click='sort(option.value)')
|
||||
.svg-icon(v-html="icons.removeIcon")
|
||||
| {{$t('removeMember')}}
|
||||
span.dropdown-icon-item
|
||||
.svg-icon.inline(v-html="icons.removeIcon")
|
||||
span.text {{$t('removeMember')}}
|
||||
b-dropdown-item(@click='sort(option.value)')
|
||||
.svg-icon(v-html="icons.messageIcon")
|
||||
| {{$t('sendMessage')}}
|
||||
span.dropdown-icon-item
|
||||
.svg-icon.inline(v-html="icons.messageIcon")
|
||||
span.text {{$t('sendMessage')}}
|
||||
b-dropdown-item(@click='sort(option.value)')
|
||||
.svg-icon(v-html="icons.starIcon")
|
||||
| {{$t('promoteToLeader')}}
|
||||
span.dropdown-icon-item
|
||||
.svg-icon.inline(v-html="icons.starIcon")
|
||||
span.text {{$t('promoteToLeader')}}
|
||||
b-dropdown-item(@click='sort(option.value)')
|
||||
.svg-icon(v-html="icons.starIcon")
|
||||
| {{$t('addManager')}}
|
||||
span.dropdown-icon-item
|
||||
.svg-icon.inline(v-html="icons.starIcon")
|
||||
span.text {{$t('addManager')}}
|
||||
b-dropdown-item(@click='sort(option.value)')
|
||||
.svg-icon(v-html="icons.removeIcon")
|
||||
| {{$t('removeManager2')}}
|
||||
span.dropdown-icon-item
|
||||
.svg-icon.inline(v-html="icons.removeIcon")
|
||||
span.text {{$t('removeManager2')}}
|
||||
.row.gradient(v-if='members.length > 3')
|
||||
|
||||
b-modal#remove-member(:title="$t('confirmRemoveMember')")
|
||||
|
|
@ -93,11 +98,8 @@ div
|
|||
}
|
||||
}
|
||||
|
||||
.dropdown-menu .svg-icon {
|
||||
.dropdown-icon-item .svg-icon {
|
||||
width: 20px;
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
margin-right: .5em;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
:class="{active: activeFilter.label === filter.label}",
|
||||
@click="activateFilter(type, filter)",
|
||||
) {{ $t(filter.label) }}
|
||||
.tasks-list
|
||||
.tasks-list(ref="taskList")
|
||||
task(
|
||||
v-for="task in taskList",
|
||||
:key="task.id", :task="task",
|
||||
|
|
@ -18,7 +18,11 @@
|
|||
@editTask="editTask",
|
||||
)
|
||||
.bottom-gradient
|
||||
.column-background(v-if="isUser === true", :class="{'initial-description': tasks[`${type}s`].length === 0}")
|
||||
.column-background(
|
||||
v-if="isUser === true",
|
||||
:class="{'initial-description': tasks[`${type}s`].length === 0}",
|
||||
ref="columnBackground",
|
||||
)
|
||||
.svg-icon(v-html="icons[type]", :class="`icon-${type}`", v-once)
|
||||
h3(v-once) {{$t('theseAreYourTasks', {taskType: `${type}s`})}}
|
||||
.small-text {{$t(`${type}sDesc`)}}
|
||||
|
|
@ -139,6 +143,7 @@ import dailyIcon from 'assets/svg/daily.svg';
|
|||
import todoIcon from 'assets/svg/todo.svg';
|
||||
import rewardIcon from 'assets/svg/reward.svg';
|
||||
import bModal from 'bootstrap-vue/lib/components/modal';
|
||||
import throttle from 'lodash/throttle';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
|
@ -206,6 +211,17 @@ export default {
|
|||
return this.tasks[`${this.type}s`];
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
taskList: {
|
||||
handler: throttle(function setColumnBackgroundVisibility () {
|
||||
this.setColumnBackgroundVisibility();
|
||||
}, 250),
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
mounted () {
|
||||
this.setColumnBackgroundVisibility();
|
||||
},
|
||||
methods: {
|
||||
...mapActions({loadCompletedTodos: 'tasks:fetchCompletedTodos'}),
|
||||
editTask (task) {
|
||||
|
|
@ -217,6 +233,23 @@ export default {
|
|||
}
|
||||
this.activeFilter = filter;
|
||||
},
|
||||
setColumnBackgroundVisibility () {
|
||||
this.$nextTick(() => {
|
||||
const taskListEl = this.$refs.taskList;
|
||||
const tasklistHeight = taskListEl.offsetHeight;
|
||||
let combinedTasksHeights = 0;
|
||||
Array.from(taskListEl.getElementsByClassName('task')).forEach(el => {
|
||||
combinedTasksHeights += el.offsetHeight;
|
||||
});
|
||||
const columnBackgroundStyle = this.$refs.columnBackground.style;
|
||||
|
||||
if (tasklistHeight - combinedTasksHeights < 150) {
|
||||
columnBackgroundStyle.display = 'none';
|
||||
} else {
|
||||
columnBackgroundStyle.display = 'block';
|
||||
}
|
||||
});
|
||||
},
|
||||
filterTask (task) {
|
||||
// View
|
||||
if (!this.activeFilter.filter(task)) return false;
|
||||
|
|
|
|||
|
|
@ -61,10 +61,18 @@
|
|||
.task {
|
||||
margin-bottom: 8px;
|
||||
box-shadow: 0 2px 2px 0 rgba($black, 0.16), 0 1px 4px 0 rgba($black, 0.12);
|
||||
background: $white;
|
||||
background: transparent;
|
||||
border-radius: 2px;
|
||||
z-index: 9;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 1px 8px 0 rgba($black, 0.12), 0 4px 4px 0 rgba($black, 0.16);
|
||||
|
||||
.left-control, .right-control, .task-content {
|
||||
border-color: $purple-500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.task-title {
|
||||
|
|
@ -87,6 +95,12 @@
|
|||
padding: 8px;
|
||||
flex-grow: 1;
|
||||
cursor: pointer;
|
||||
background: $white;
|
||||
border: 1px solid transparent;
|
||||
|
||||
&.no-right-border {
|
||||
border-right: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.checklist {
|
||||
|
|
@ -182,12 +196,20 @@
|
|||
border-top-left-radius: 2px;
|
||||
border-bottom-left-radius: 2px;
|
||||
min-height: 60px;
|
||||
border: 1px solid transparent;
|
||||
border-right: none;
|
||||
|
||||
& + .task-content {
|
||||
border-left: none;
|
||||
}
|
||||
}
|
||||
|
||||
.right-control {
|
||||
border-top-right-radius: 2px;
|
||||
border-bottom-right-radius: 2px;
|
||||
min-height: 56px;
|
||||
border: 1px solid transparent;
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.task-control, .reward-control {
|
||||
|
|
@ -315,7 +337,12 @@ export default {
|
|||
return this.getTaskClasses(this.task, 'control');
|
||||
},
|
||||
contentClass () {
|
||||
return this.getTaskClasses(this.task, 'content');
|
||||
const classes = [];
|
||||
classes.push(this.getTaskClasses(this.task, 'content'));
|
||||
if (this.task.type === 'reward' || this.task.type === 'habit') {
|
||||
classes.push('no-right-border');
|
||||
}
|
||||
return classes;
|
||||
},
|
||||
showStreak () {
|
||||
if (this.task.streak !== undefined) return true;
|
||||
|
|
|
|||
|
|
@ -25,18 +25,18 @@ form(
|
|||
.option(v-if="['daily', 'todo'].indexOf(task.type) > -1")
|
||||
label(v-once) {{ $t('checklist') }}
|
||||
br
|
||||
.checklist-group.input-group(v-for="(item, $index) in task.checklist")
|
||||
input.checklist-item.form-control(type="text", :value="item.text")
|
||||
.inline-edit-input-group.checklist-group.input-group(v-for="(item, $index) in task.checklist")
|
||||
input.inline-edit-input.checklist-item.form-control(type="text", :value="item.text")
|
||||
span.input-group-btn(@click="removeChecklistItem($index)")
|
||||
.svg-icon.destroy-icon(v-html="icons.destroy")
|
||||
input.checklist-item.form-control(type="text", :placeholder="$t('newChecklistItem')", @keydown.enter="addChecklistItem($event)", v-model="newChecklistItem")
|
||||
input.inline-edit-input.checklist-item.form-control(type="text", :placeholder="$t('newChecklistItem')", @keydown.enter="addChecklistItem($event)", v-model="newChecklistItem")
|
||||
.d-flex.justify-content-center(v-if="task.type === 'habit'")
|
||||
.option-item(:class="{'option-item-selected': task.up === true}", @click="task.up = !task.up")
|
||||
.option-item(:class="optionClass(task.up === true)", @click="task.up = !task.up")
|
||||
.option-item-box
|
||||
.task-control.habit-control(:class="controlClass.up + '-control-habit'")
|
||||
.svg-icon.positive(v-html="icons.positive")
|
||||
.option-item-label(v-once) {{ $t('positive') }}
|
||||
.option-item(:class="{'option-item-selected': task.down === true}", @click="task.down = !task.down")
|
||||
.option-item(:class="optionClass(task.down === true)", @click="task.down = !task.down")
|
||||
.option-item-box
|
||||
.task-control.habit-control(:class="controlClass.down + '-control-habit'")
|
||||
.svg-icon.negative(v-html="icons.negative")
|
||||
|
|
@ -46,19 +46,19 @@ form(
|
|||
span.float-left {{ $t('difficulty') }}
|
||||
.svg-icon.info-icon(v-html="icons.information")
|
||||
.d-flex.justify-content-center
|
||||
.option-item(:class="{'option-item-selected': task.priority === 0.1}", @click="task.priority = 0.1")
|
||||
.option-item(:class="optionClass(task.priority === 0.1)", @click="task.priority = 0.1")
|
||||
.option-item-box
|
||||
.svg-icon.difficulty-trivial-icon(v-html="icons.difficultyTrivial")
|
||||
.option-item-label(v-once) {{ $t('trivial') }}
|
||||
.option-item(:class="{'option-item-selected': task.priority === 1}", @click="task.priority = 1")
|
||||
.option-item(:class="optionClass(task.priority === 1)", @click="task.priority = 1")
|
||||
.option-item-box
|
||||
.svg-icon.difficulty-normal-icon(v-html="icons.difficultyNormal")
|
||||
.option-item-label(v-once) {{ $t('easy') }}
|
||||
.option-item(:class="{'option-item-selected': task.priority === 1.5}", @click="task.priority = 1.5")
|
||||
.option-item(:class="optionClass(task.priority === 1.5)", @click="task.priority = 1.5")
|
||||
.option-item-box
|
||||
.svg-icon.difficulty-medium-icon(v-html="icons.difficultyMedium")
|
||||
.option-item-label(v-once) {{ $t('medium') }}
|
||||
.option-item(:class="{'option-item-selected': task.priority === 2}", @click="task.priority = 2")
|
||||
.option-item(:class="optionClass(task.priority === 2)", @click="task.priority = 2")
|
||||
.option-item-box
|
||||
.svg-icon.difficulty-hard-icon(v-html="icons.difficultyHard")
|
||||
.option-item-label(v-once) {{ $t('hard') }}
|
||||
|
|
@ -227,6 +227,12 @@ form(
|
|||
margin-right: 0px;
|
||||
}
|
||||
|
||||
&-selected {
|
||||
.option-item-label {
|
||||
color: inherit !important;
|
||||
}
|
||||
}
|
||||
|
||||
&-box {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
|
|
@ -263,17 +269,6 @@ form(
|
|||
|
||||
.checklist-group {
|
||||
border-top: 1px solid $gray-500;
|
||||
|
||||
.input-group-btn {
|
||||
cursor: pointer;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.destroy-icon {
|
||||
width: 14px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.checklist-item {
|
||||
|
|
@ -283,12 +278,12 @@ form(
|
|||
padding-left: 36px;
|
||||
|
||||
&:last-child {
|
||||
background-size: 10px 10px;
|
||||
background-image: url(~client/assets/svg/for-css/positive.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center left 10px;
|
||||
border-top: 1px solid $gray-500 !important;
|
||||
border-bottom: 1px solid $gray-500 !important;
|
||||
background-size: 10px 10px;
|
||||
background-image: url(~client/assets/svg/for-css/positive.svg);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -326,6 +321,7 @@ import bDropdown from 'bootstrap-vue/lib/components/dropdown';
|
|||
import bDropdownItem from 'bootstrap-vue/lib/components/dropdown-item';
|
||||
import Datepicker from 'vuejs-datepicker';
|
||||
import moment from 'moment';
|
||||
import uuid from 'uuid';
|
||||
|
||||
import informationIcon from 'assets/svg/information.svg';
|
||||
import difficultyTrivialIcon from 'assets/svg/difficulty-trivial.svg';
|
||||
|
|
@ -425,8 +421,19 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
...mapActions({saveTask: 'tasks:save', destroyTask: 'tasks:destroy', createTask: 'tasks:create'}),
|
||||
optionClass (activeCondition) {
|
||||
if (activeCondition) {
|
||||
return [`${this.cssClass}-color`, 'option-item-selected'];
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
addChecklistItem (e) {
|
||||
this.task.checklist.push({text: this.newChecklistItem, completed: false});
|
||||
this.task.checklist.push({
|
||||
id: uuid.v4(),
|
||||
text: this.newChecklistItem,
|
||||
completed: false,
|
||||
});
|
||||
this.newChecklistItem = null;
|
||||
e.preventDefault();
|
||||
},
|
||||
|
|
|
|||
|
|
@ -13,27 +13,41 @@
|
|||
input.form-control.input-search(type="text", :placeholder="$t('search')", v-model="searchText")
|
||||
.filter-panel(v-if="isFilterPanelOpen")
|
||||
.tags-category.d-flex(v-for="tagsType in tagsByType", v-if="tagsType.tags.length > 0", :key="tagsType.key")
|
||||
.tags-header(v-once)
|
||||
strong {{ $t(tagsType.key) }}
|
||||
a.d-block(v-if="tagsType.key === 'tags'", v-once) {{ $t('editTags2') }}
|
||||
.tags-header
|
||||
strong(v-once) {{ $t(tagsType.key) }}
|
||||
a.d-block(v-if="tagsType.key === 'tags' && !editingTags", @click="editTags()") {{ $t('editTags2') }}
|
||||
.tags-list.container
|
||||
.row.no-gutters
|
||||
.col-6(v-for="tag in tagsType.tags",)
|
||||
label.custom-control.custom-checkbox
|
||||
input.custom-control-input(
|
||||
type="checkbox",
|
||||
:checked="isTagSelected(tag)",
|
||||
@change="toggleTag(tag)",
|
||||
)
|
||||
span.custom-control-indicator
|
||||
span.custom-control-description {{ tag.name }}
|
||||
.row(:class="{'no-gutters': !editingTags}")
|
||||
template(v-if="editingTags && tagsType.key === 'tags'")
|
||||
.col-6(v-for="(tag, tagIndex) in tagsSnap")
|
||||
.inline-edit-input-group.tag-edit-item.input-group
|
||||
input.tag-edit-input.inline-edit-input.form-control(type="text", :value="tag.name")
|
||||
span.input-group-btn(@click="removeTag(tagIndex)")
|
||||
.svg-icon.destroy-icon(v-html="icons.destroy")
|
||||
.col-6
|
||||
input.new-tag-item.edit-tag-item.inline-edit-input.form-control(type="text", :placeholder="$t('newTag')", @keydown.enter="addTag($event)", v-model="newTag")
|
||||
template(v-else)
|
||||
.col-6(v-for="(tag, tagIndex) in tagsType.tags")
|
||||
label.custom-control.custom-checkbox
|
||||
input.custom-control-input(
|
||||
type="checkbox",
|
||||
:checked="isTagSelected(tag)",
|
||||
@change="toggleTag(tag)",
|
||||
)
|
||||
span.custom-control-indicator
|
||||
span.custom-control-description {{ tag.name }}
|
||||
|
||||
.filter-panel-footer.clearfix
|
||||
.float-left
|
||||
a.reset-filters(@click="resetFilters()", v-once) {{ $t('resetFilters') }}
|
||||
.float-right
|
||||
a.mr-3.apply-filters(@click="applyFilters()", v-once) {{ $t('applyFilters') }}
|
||||
a.cancel-filters(@click="closeFilterPanel()", v-once) {{ $t('cancel') }}
|
||||
template(v-if="editingTags === true")
|
||||
.text-center
|
||||
a.mr-3.btn-filters-primary(@click="saveTags()", v-once) {{ $t('saveEdits') }}
|
||||
a.btn-filters-secondary(@click="cancelTagsEditing()", v-once) {{ $t('cancel') }}
|
||||
template(v-else)
|
||||
.float-left
|
||||
a.btn-filters-danger(@click="resetFilters()", v-once) {{ $t('resetFilters') }}
|
||||
.float-right
|
||||
a.mr-3.btn-filters-primary(@click="applyFilters()", v-once) {{ $t('applyFilters') }}
|
||||
a.btn-filters-secondary(@click="closeFilterPanel()", v-once) {{ $t('cancel') }}
|
||||
span.input-group-btn
|
||||
button.btn.btn-secondary.filter-button(
|
||||
type="button",
|
||||
|
|
@ -43,13 +57,15 @@
|
|||
.d-flex.align-items-center
|
||||
span(v-once) {{ $t('filter') }}
|
||||
.svg-icon.filter-icon(v-html="icons.filter")
|
||||
.col-1.offset-3
|
||||
//button.btn.btn-success(v-once)
|
||||
.svg-icon.positive(v-html="icons.positive")
|
||||
| {{ $t('create') }}
|
||||
b-dropdown(:text="$t('create')")
|
||||
#create-dropdown.col-1.offset-3
|
||||
b-dropdown(:right="true", :variant="'success'")
|
||||
div(slot="button-content")
|
||||
.svg-icon.positive(v-html="icons.positive")
|
||||
| {{ $t('create') }}
|
||||
b-dropdown-item(v-for="type in columns", :key="type", @click="createTask(type)")
|
||||
| {{$t(type)}}
|
||||
span.dropdown-icon-item(v-once)
|
||||
span.svg-icon.inline(v-html="icons[type]")
|
||||
span.text {{$t(type)}}
|
||||
|
||||
.row.tasks-columns
|
||||
task-column.col-3(
|
||||
|
|
@ -61,6 +77,12 @@
|
|||
)
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
#create-dropdown .dropdown-toggle::after {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~client/assets/scss/colors.scss';
|
||||
|
||||
|
|
@ -80,6 +102,10 @@
|
|||
padding-top: 6px;
|
||||
}
|
||||
|
||||
.dropdown-icon-item .svg-icon {
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
button.btn.btn-secondary.filter-button {
|
||||
box-shadow: none;
|
||||
border-radius: 2px;
|
||||
|
|
@ -144,6 +170,32 @@
|
|||
}
|
||||
}
|
||||
|
||||
.tag-edit-input {
|
||||
border-bottom: 1px solid $gray-500 !important;
|
||||
|
||||
&:focus, &:focus ~ .input-group-btn {
|
||||
border-color: $purple-500 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.new-tag-item {
|
||||
width: 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center left 10px;
|
||||
border-bottom: 1px solid $gray-500 !important;
|
||||
background-size: 10px 10px;
|
||||
padding-left: 40px;
|
||||
background-image: url(~client/assets/svg/for-css/positive.svg);
|
||||
}
|
||||
|
||||
.tag-edit-item .input-group-btn {
|
||||
border-bottom: 1px solid $gray-500 !important;
|
||||
|
||||
&:focus {
|
||||
border-color: $purple-500;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-control-description {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
|
@ -158,15 +210,15 @@
|
|||
}
|
||||
}
|
||||
|
||||
.reset-filters {
|
||||
.btn-filters-danger {
|
||||
color: $red-50;
|
||||
}
|
||||
|
||||
.apply-filters {
|
||||
.btn-filters-primary {
|
||||
color: $blue-10;
|
||||
}
|
||||
|
||||
.cancel-filters {
|
||||
.btn-filters-secondary {
|
||||
color: $gray-300;
|
||||
}
|
||||
}
|
||||
|
|
@ -179,13 +231,19 @@ import TaskModal from './taskModal';
|
|||
|
||||
import positiveIcon from 'assets/svg/positive.svg';
|
||||
import filterIcon from 'assets/svg/filter.svg';
|
||||
import deleteIcon from 'assets/svg/delete.svg';
|
||||
import habitIcon from 'assets/svg/habit.svg';
|
||||
import dailyIcon from 'assets/svg/daily.svg';
|
||||
import todoIcon from 'assets/svg/todo.svg';
|
||||
import rewardIcon from 'assets/svg/reward.svg';
|
||||
|
||||
import uuid from 'uuid';
|
||||
import Vue from 'vue';
|
||||
import bDropdown from 'bootstrap-vue/lib/components/dropdown';
|
||||
import bDropdownItem from 'bootstrap-vue/lib/components/dropdown-item';
|
||||
import throttle from 'lodash/throttle';
|
||||
import cloneDeep from 'lodash/cloneDeep';
|
||||
import { mapState } from 'client/libs/store';
|
||||
import { mapState, mapActions } from 'client/libs/store';
|
||||
import taskDefaults from 'common/script/libs/taskDefaults';
|
||||
|
||||
export default {
|
||||
|
|
@ -204,9 +262,17 @@ export default {
|
|||
icons: Object.freeze({
|
||||
positive: positiveIcon,
|
||||
filter: filterIcon,
|
||||
destroy: deleteIcon,
|
||||
habit: habitIcon,
|
||||
daily: dailyIcon,
|
||||
todo: todoIcon,
|
||||
reward: rewardIcon,
|
||||
}),
|
||||
selectedTags: [],
|
||||
temporarilySelectedTags: [],
|
||||
tagsSnap: null, // tags snapshot when being edited
|
||||
editingTags: false,
|
||||
newTag: null,
|
||||
editingTask: null,
|
||||
creatingTask: null,
|
||||
};
|
||||
|
|
@ -249,6 +315,28 @@ export default {
|
|||
}, 250),
|
||||
},
|
||||
methods: {
|
||||
...mapActions({setUser: 'user:set'}),
|
||||
editTags () {
|
||||
// clone the arrays being edited so that we can revert if needed
|
||||
this.tagsSnap = this.tagsByType.user.tags.slice();
|
||||
this.editingTags = true;
|
||||
},
|
||||
addTag () {
|
||||
this.tagsSnap.push({id: uuid.v4(), name: this.newTag});
|
||||
this.newTag = null;
|
||||
},
|
||||
removeTag (index) {
|
||||
this.tagsSnap.splice(index, 1);
|
||||
},
|
||||
saveTags () {
|
||||
this.setUser({tags: this.tagsSnap});
|
||||
this.cancelTagsEditing();
|
||||
},
|
||||
cancelTagsEditing () {
|
||||
this.editingTags = false;
|
||||
this.tagsSnap = null;
|
||||
this.newTag = null;
|
||||
},
|
||||
editTask (task) {
|
||||
this.editingTask = cloneDeep(task);
|
||||
// Necessary otherwise the first time the modal is not rendered
|
||||
|
|
|
|||
|
|
@ -18,7 +18,16 @@ export function set (store, changes) {
|
|||
const user = store.state.user.data;
|
||||
|
||||
for (let key in changes) {
|
||||
setProps(user, key, changes[key]);
|
||||
if (key === 'tags') {
|
||||
// Keep challenge and group tags
|
||||
const oldTags = user.tags.filter(t => {
|
||||
return t.group || t.challenge;
|
||||
});
|
||||
|
||||
user.tags = changes[key].concat(oldTags);
|
||||
} else {
|
||||
setProps(user, key, changes[key]);
|
||||
}
|
||||
}
|
||||
|
||||
axios.put('/api/v3/user', changes);
|
||||
|
|
|
|||
|
|
@ -251,6 +251,7 @@
|
|||
"featuredset": "Featured Set <%= name %>",
|
||||
"mysterySets": "Mystery Sets",
|
||||
"fetchRecentMessages": "Fetch Recent Messages",
|
||||
"saveEdits": "Save Edits",
|
||||
"showMore": "Show More",
|
||||
"showLess": "Show Less",
|
||||
"hatchedPetNotesPart1": "Visit the ",
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@ import {
|
|||
} from '../../libs/email';
|
||||
import nconf from 'nconf';
|
||||
import get from 'lodash/get';
|
||||
import { model as Tag } from '../../models/tag';
|
||||
|
||||
const TECH_ASSISTANCE_EMAIL = nconf.get('EMAILS:TECH_ASSISTANCE_EMAIL');
|
||||
const DELETE_CONFIRMATION = 'DELETE';
|
||||
|
|
@ -157,6 +158,7 @@ let updatablePaths = [
|
|||
'profile',
|
||||
'stats',
|
||||
'inbox.optOut',
|
||||
'tags',
|
||||
];
|
||||
|
||||
// This tells us for which paths users can call `PUT /user`.
|
||||
|
|
@ -247,8 +249,43 @@ api.updateUser = {
|
|||
throw new NotAuthorized(res.t('mustPurchaseToSet', { val, key }));
|
||||
}
|
||||
|
||||
if (acceptablePUTPaths[key]) {
|
||||
if (acceptablePUTPaths[key] && key !== 'tags') {
|
||||
_.set(user, key, val);
|
||||
} else if (key === 'tags') {
|
||||
if (!Array.isArray(val)) throw new BadRequest('mustBeArray');
|
||||
|
||||
const removedTagsIds = [];
|
||||
|
||||
const oldTags = [];
|
||||
|
||||
// Keep challenge and group tags
|
||||
user.tags.forEach(t => {
|
||||
if (t.group || t.challenge) {
|
||||
oldTags.push(t);
|
||||
} else {
|
||||
removedTagsIds.push(t.id);
|
||||
}
|
||||
});
|
||||
|
||||
user.tags = oldTags;
|
||||
|
||||
val.forEach(t => {
|
||||
let oldI = removedTagsIds.findIndex(id => id === t.id);
|
||||
if (oldI > -1) {
|
||||
removedTagsIds.splice(oldI, 1);
|
||||
}
|
||||
|
||||
user.tags.push(Tag.sanitize(t));
|
||||
});
|
||||
|
||||
// Remove from all the tasks TODO test
|
||||
Tasks.Task.update({
|
||||
userId: user._id,
|
||||
}, {
|
||||
$pull: {
|
||||
tags: {$in: [removedTagsIds]},
|
||||
},
|
||||
}, {multi: true}).exec();
|
||||
} else {
|
||||
throw new NotAuthorized(res.t('messageUserOperationProtected', { operation: key }));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,8 +22,14 @@ export let schema = new Schema({
|
|||
});
|
||||
|
||||
schema.plugin(baseModel, {
|
||||
noSet: ['_id', 'id', 'challenge'],
|
||||
noSet: ['_id', 'challenge', 'group'],
|
||||
_id: false, // use id instead of _id
|
||||
});
|
||||
|
||||
// A list of additional fields that cannot be updated (but can be set on creation)
|
||||
const noUpdate = ['id'];
|
||||
schema.statics.sanitizeUpdate = function sanitizeUpdate (updateObj) {
|
||||
return this.sanitize(updateObj, noUpdate);
|
||||
};
|
||||
|
||||
export let model = mongoose.model('Tag', schema);
|
||||
|
|
|
|||
Loading…
Reference in a new issue