krikkert/habitica
1
0
Fork 0
mirror of https://github.com/HabitRPG/habitica.git synced 2025-12-16 14:17:22 +01:00
Code Issues Packages Projects Releases Wiki Activity

Revert "Task page : task filters (#9898)"

Browse Source 
This reverts commit 9919faeed8.
This commit is contained in:
Matteo Pagliazzi
2018-02-22 12:28:24 +01:00
parent deaf7fee81
commit d5e4be85e9
9 changed files with 127 additions and 605 deletions
Download Patch File Download Diff File Expand all files Collapse all files

220
website/client/components/tasks/column.vue
View File

@@ -8,14 +8,14 @@
v-if='type === "reward"')
.d-flex
h2.tasks-column-title
| {{ $t(typeLabel) }}
| {{ $t(types[type].label) }}
.badge.badge-pill.badge-purple.column-badge(v-if="badgeCount > 0") {{ badgeCount }}
.filters.d-flex.justify-content-end
.filter.small-text(
v-for="filter in typeFilters",
:class="{active: activeFilter.label === filter}",
v-for="filter in types[type].filters",
:class="{active: activeFilters[type].label === filter.label}",
@click="activateFilter(type, filter)",
) {{ $t(filter) }}
) {{ $t(filter.label) }}
.tasks-list(ref="tasksWrapper")
textarea.quick-add(
:rows="quickAddRows",
@@ -26,19 +26,19 @@
)
transition(name="quick-add-tip-slide")
.quick-add-tip.small-text(v-show="quickAddFocused", v-html="$t('addMultipleTip')")
clear-completed-todos(v-if="activeFilter.label === 'complete2'")
clear-completed-todos(v-if="activeFilters[type].label === 'complete2'")
.column-background(
v-if="isUser === true",
:class="{'initial-description': initialColumnDescription}",
ref="columnBackground",
)
.svg-icon(v-html="icons[type]", :class="`icon-${type}`", v-once)
h3(v-once) {{$t('theseAreYourTasks', {taskType: $t(typeLabel)})}}
h3(v-once) {{$t('theseAreYourTasks', {taskType: $t(types[type].label)})}}
.small-text {{$t(`${type}sDesc`)}}
draggable.sortable-tasks(
ref="tasksList",
@update='sorted',
:options='{disabled: activeFilter.label === "scheduled"}',
:options='{disabled: activeFilters[type].label === "scheduled"}',
)
task(
v-for="task in taskList",
@@ -245,10 +245,10 @@
<script>
import Task from './task';
import ClearCompletedTodos from './clearCompletedTodos';
import sortBy from 'lodash/sortBy';
import throttle from 'lodash/throttle';
import isEmpty from 'lodash/isEmpty';
import buyMixin from 'client/mixins/buy';
import { mapState, mapActions, mapGetters } from 'client/libs/store';
import { mapState, mapActions } from 'client/libs/store';
import shopItem from '../shops/shopItem';
import BuyQuestModal from 'client/components/shops/quests/buyQuestModal.vue';
@@ -258,12 +258,6 @@ import inAppRewards from 'common/script/libs/inAppRewards';
import spells from 'common/script/content/spells';
import taskDefaults from 'common/script/libs/taskDefaults';
import {
getTypeLabel,
getFilterLabels,
getActiveFilter,
} from 'client/libs/store/helpers/filterTasks.js';
import svgPin from 'assets/svg/pin.svg';
import habitIcon from 'assets/svg/habit.svg';
import dailyIcon from 'assets/svg/daily.svg';
@@ -282,6 +276,42 @@ export default {
},
props: ['type', 'isUser', 'searchText', 'selectedTags', 'taskListOverride', 'group'], // @TODO: maybe we should store the group on state?
data () {
// @TODO refactor this so that filter functions aren't in data
const types = Object.freeze({
habit: {
label: 'habits',
filters: [
{label: 'all', filter: () => true, default: true},
{label: 'yellowred', filter: t => t.value < 1}, // weak
{label: 'greenblue', filter: t => t.value >= 1}, // strong
],
},
daily: {
label: 'dailies',
filters: [
{label: 'all', filter: () => true, default: true},
{label: 'due', filter: t => !t.completed && shouldDo(new Date(), t, this.userPreferences)},
{label: 'notDue', filter: t => t.completed || !shouldDo(new Date(), t, this.userPreferences)},
],
},
todo: {
label: 'todos',
filters: [
{label: 'remaining', filter: t => !t.completed, default: true}, // active
{label: 'scheduled', filter: t => !t.completed && t.date, sort: t => t.date},
{label: 'complete2', filter: t => t.completed},
],
},
reward: {
label: 'rewards',
filters: [
{label: 'all', filter: () => true, default: true},
{label: 'custom', filter: () => true}, // all rewards made by the user
{label: 'wishlist', filter: () => false}, // not user tasks
],
},
});
const icons = Object.freeze({
habit: habitIcon,
daily: dailyIcon,
@@ -290,15 +320,14 @@ export default {
pin: svgPin,
});
let typeLabel = '';
let typeFilters = [];
let activeFilter = {};
let activeFilters = {};
for (let type in types) {
activeFilters[type] = types[type].filters.find(f => f.default === true);
}
return {
typeLabel,
typeFilters,
activeFilter,
types,
activeFilters,
icons,
openedCompletedTodos: false,
@@ -310,38 +339,45 @@ export default {
selectedItemToBuy: {},
};
},
created () {
// Set Task Column Label
this.typeLabel = getTypeLabel(this.type);
// Get Category Filter Labels
this.typeFilters = getFilterLabels(this.type);
// Set default filter for task column
this.activateFilter(this.type);
},
computed: {
...mapState({
tasks: 'tasks.data',
user: 'user.data',
userPreferences: 'user.data.preferences',
}),
...mapGetters({
getFilteredTaskList: 'tasks:getFilteredTaskList',
getUnfilteredTaskList: 'tasks:getUnfilteredTaskList',
getUserPreferences: 'user:preferences',
getUserBuffs: 'user:buffs',
}),
onUserPage () {
let onUserPage = Boolean(this.taskList.length) && (!this.taskListOverride || this.taskListOverride.length === 0);
if (!onUserPage) {
this.activateFilter('daily', this.types.daily.filters[0]);
this.types.reward.filters = [];
}
return onUserPage;
},
taskList () {
// @TODO: This should not default to user's tasks. It should require that you pass options in
const filter = this.activeFilters[this.type];
let filteredTaskList = isEmpty(this.taskListOverride) ?
this.getFilteredTaskList({
type: this.type,
filterType: this.activeFilter.label,
}) :
this.taskListOverride;
let taskList = this.tasks[`${this.type}s`];
if (this.taskListOverride) taskList = this.taskListOverride;
let taggedList = this.filterByTagList(filteredTaskList, this.selectedTags);
let searchedList = this.filterBySearchText(taggedList, this.searchText);
if (taskList.length > 0 && ['scheduled', 'due'].indexOf(filter.label) === -1) {
let taskListSorted = this.$store.dispatch('tasks:order', [
taskList,
this.user.tasksOrder,
]);
return searchedList;
taskList = taskListSorted[`${this.type}s`];
}
if (filter.sort) {
taskList = sortBy(taskList, filter.sort);
}
return taskList.filter(t => {
return this.filterTask(t);
});
},
inAppRewards () {
let watchRefresh = this.forceRefresh; // eslint-disable-line
@@ -357,7 +393,7 @@ export default {
};
for (let key in seasonalSkills) {
if (this.getUserBuffs(key)) {
if (this.user.stats.buffs[key]) {
let debuff = seasonalSkills[key];
let item = Object.assign({}, spells.special[debuff]);
item.text = item.text();
@@ -370,7 +406,7 @@ export default {
return rewards;
},
hasRewardsList () {
return this.isUser === true && this.type === 'reward' && this.activeFilter.label !== 'custom';
return this.isUser === true && this.type === 'reward' && this.activeFilters[this.type].label !== 'custom';
},
initialColumnDescription () {
// Show the column description in the middle only if there are no elements (tasks or in app items)
@@ -378,12 +414,13 @@ export default {
if (this.inAppRewards && this.inAppRewards.length >= 0) return false;
}
return this.taskList.length === 0;
return this.tasks[`${this.type}s`].length === 0;
},
dailyDueDefaultView () {
if (this.type === 'daily' && this.user.preferences.dailyDueDefaultView) {
this.activateFilter('daily', this.typeFilters[1]);
if (this.user.preferences.dailyDueDefaultView) {
this.activateFilter('daily', this.types.daily.filters[1]);
}
return this.user.preferences.dailyDueDefaultView;
},
quickAddPlaceholder () {
@@ -394,14 +431,16 @@ export default {
// 0 means the badge will not be shown
// It is shown for the all and due views of dailies
// and for the active and scheduled views of todos.
if (this.type === 'todo' && this.activeFilter.label !== 'complete2') {
return this.taskList.length;
if (this.type === 'todo') {
if (this.activeFilters.todo.label !== 'complete2') return this.taskList.length;
} else if (this.type === 'daily') {
if (this.activeFilter.label === 'due') {
const activeFilter = this.activeFilters.daily.label;
if (activeFilter === 'due') {
return this.taskList.length;
} else if (this.activeFilter.label === 'all') {
} else if (activeFilter === 'all') {
return this.taskList.reduce((count, t) => {
return !t.completed && shouldDo(new Date(), t, this.getUserPreferences) ? count + 1 : count;
return !t.completed && shouldDo(new Date(), t, this.userPreferences) ? count + 1 : count;
}, 0);
}
}
@@ -418,9 +457,7 @@ export default {
},
dailyDueDefaultView () {
if (!this.dailyDueDefaultView) return;
if (this.type === 'daily' && this.dailyDueDefaultView) {
this.activateFilter('daily', this.typeFilters[1]);
}
this.activateFilter('daily', this.types.daily.filters[1]);
},
quickAddFocused (newValue) {
if (newValue) this.quickAddRows = this.quickAddText.split('\n').length;
@@ -454,7 +491,7 @@ export default {
const filteredList = this.taskList;
const taskToMove = filteredList[data.oldIndex];
const taskIdToMove = taskToMove._id;
let originTasks = this.getUnfilteredTaskList(this.type);
let originTasks = this.tasks[`${this.type}s`];
if (this.taskListOverride) originTasks = this.taskListOverride;
// Server
@@ -481,7 +518,7 @@ export default {
},
async moveTo (task, where) { // where is 'top' or 'bottom'
const taskIdToMove = task._id;
const list = this.getUnfilteredTaskList(this.type);
const list = this.tasks[`${this.type}s`];
const oldPosition = list.findIndex(t => t._id === taskIdToMove);
const moved = list.splice(oldPosition, 1);
@@ -521,14 +558,12 @@ export default {
editTask (task) {
this.$emit('editTask', task);
},
activateFilter (type, filter = '') {
// Needs a separate API call as this data may not reside in store
if (type === 'todo' && filter === 'complete2') {
activateFilter (type, filter) {
if (type === 'todo' && filter.label === 'complete2') {
this.loadCompletedTodos();
}
// this.activeFilters[type] = filter;
this.activeFilter = getActiveFilter(type, filter);
this.activeFilters[type] = filter;
},
setColumnBackgroundVisibility () {
this.$nextTick(() => {
@@ -556,36 +591,35 @@ export default {
}
});
},
filterByTagList (taskList, tagList = []) {
let filteredTaskList = taskList;
// fitler requested tasks by tags
if (!isEmpty(tagList)) {
filteredTaskList = taskList.filter(
task => tagList.every(tag => task.tags.indexOf(tag) !== -1)
);
filterTask (task) {
// View
if (!this.activeFilters[task.type].filter(task)) return false;
// Tags
const selectedTags = this.selectedTags;
if (selectedTags && selectedTags.length > 0) {
const hasAllSelectedTag = selectedTags.every(tagId => {
return task.tags.indexOf(tagId) !== -1;
});
if (!hasAllSelectedTag) return false;
}
return filteredTaskList;
},
filterBySearchText (taskList, searchText = '') {
let filteredTaskList = taskList;
// filter requested tasks by search text
if (searchText) {
// to ensure broadest case insensitive search matching
let searchTextLowerCase = searchText.toLowerCase();
filteredTaskList = taskList.filter(
task => {
// eslint rule disabled for block to allow nested binary expression
/* eslint-disable no-extra-parens */
return (
task.text.toLowerCase().indexOf(searchTextLowerCase) > -1 ||
(task.note && task.note.toLowerCase().indexOf(searchTextLowerCase) > -1) ||
(task.checklist && task.checklist.length > 0 &&
task.checklist.some(checkItem => checkItem.text.toLowerCase().indexOf(searchTextLowerCase) > -1))
);
/* eslint-enable no-extra-parens */
});
// Text
const searchText = this.searchText;
if (!searchText) return true;
if (task.text.toLowerCase().indexOf(searchText) !== -1) return true;
if (task.notes.toLowerCase().indexOf(searchText) !== -1) return true;
if (task.checklist && task.checklist.length) {
const checklistItemIndex = task.checklist.findIndex(({text}) => {
return text.toLowerCase().indexOf(searchText) !== -1;
});
return checklistItemIndex !== -1;
}
return filteredTaskList;
},
openBuyDialog (rewardItem) {
if (rewardItem.locked) return;