diff options
author | Raimund Schlüßler <raimund.schluessler+github@mailbox.org> | 2019-01-25 23:23:11 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2019-01-25 23:23:11 +0300 |
commit | 8918f90bd8eed99096ca6f39075460264c95ef62 (patch) | |
tree | 3ed904b84b9787d5a54b973026d0f20371a82bbb /src/components/TheCollections/General.vue | |
parent | 824e80a4f9aa05dbfed840b184580cf43d725193 (diff) | |
parent | 14738cae182c42b15d686191c9740ac391280e8a (diff) |
Merge pull request #194 from nextcloud/vue
Move app to Vue.js
Diffstat (limited to 'src/components/TheCollections/General.vue')
-rw-r--r-- | src/components/TheCollections/General.vue | 162 |
1 files changed, 162 insertions, 0 deletions
diff --git a/src/components/TheCollections/General.vue b/src/components/TheCollections/General.vue new file mode 100644 index 00000000..3270f995 --- /dev/null +++ b/src/components/TheCollections/General.vue @@ -0,0 +1,162 @@ +<!-- +Nextcloud - Tasks + +@author Raimund Schlüßler +@copyright 2018 Raimund Schlüßler <raimund.schluessler@mailbox.org> +@copyright 2018 Vadim Nicolai <contact@vadimnicolai.com> + +This library is free software; you can redistribute it and/or +modify it under the terms of the GNU AFFERO GENERAL PUBLIC LICENSE +License as published by the Free Software Foundation; either +version 3 of the License, or any later version. + +This library is distributed in the hope that it will be useful, +but WITHOUT ANY WARRANTY; without even the implied warranty of +MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +GNU AFFERO GENERAL PUBLIC LICENSE for more details. + +You should have received a copy of the GNU Affero General Public +License along with this library. If not, see <http://www.gnu.org/licenses/>. + +--> + +<template> + <div v-if="calendar"> + <div v-if="collectionId !== 'completed' && !calendar.readOnly" + id="add-task" + class="add-task" + > + <form name="addTaskForm" @submit="addTask"> + <input v-model="newTaskName" + :placeholder="inputString" + :disabled="isAddingTask" + class="transparent reactive" + @keyup.27="clearNewTask($event)" + > + </form> + </div> + <SortorderDropdown /> + <div class="task-list"> + <div v-for="calendar in filteredCalendars" + :key="calendar.id" + :rel="calendar.id" + class="grouped-tasks ui-droppable" + > + <h2 class="heading"> + {{ calendar.displayName }} + </h2> + <ol :calendarID="calendar.id" + :collectionID="collectionId" + class="tasks" + type="list" + > + <TaskBody v-for="task in sort(calendar.filteredTasks, sortOrder, sortDirection)" + :key="task.id" + :task="task" + /> + </ol> + <LoadCompletedButton v-if="collectionId === 'completed'" :calendar="calendar" /> + </div> + </div> + </div> +</template> + +<script> +import { mapGetters, mapActions } from 'vuex' +import { sort, isTaskInList, isParentInList } from '../../store/storeHelper' +import SortorderDropdown from '../SortorderDropdown' +import LoadCompletedButton from '../LoadCompletedButton' +import TaskBody from '../Task' + +export default { + components: { + 'TaskBody': TaskBody, + 'SortorderDropdown': SortorderDropdown, + 'LoadCompletedButton': LoadCompletedButton + }, + data() { + return { + newTaskName: '', + isAddingTask: false + } + }, + computed: { + + /** + * Returns the calendars which are to be shown for the current collection and + * adds a filteredTasks property to each calendar containing the tasks belonging to the collection. + * + * Calendars have to contain at least one task which + * - belongs to the collection + * - is a root task + * - is uncompleted + * + * @returns {Array} the calendars which should be shown in the collection + */ + filteredCalendars: function() { + var filteredCalendars = [] + this.calendars.forEach(calendar => { + calendar.filteredTasks = Object.values(calendar.tasks).filter(task => { + return isTaskInList(task, this.collectionId) && (!task.related || !isParentInList(task, calendar.tasks)) + }) + if (calendar.filteredTasks.length) { + filteredCalendars.push(calendar) + } + }) + return filteredCalendars + }, + + collectionId: function() { + return this.$route.params.collectionId + }, + + inputString: function() { + switch (this.collectionId) { + case 'starred': + return t('tasks', 'Add an important task to "{calendar}"...', { calendar: this.calendar.displayName }) + case 'today': + return t('tasks', 'Add a task due today to "{calendar}"...', { calendar: this.calendar.displayName }) + case 'current': + return t('tasks', 'Add a current task to "{calendar}"...', { calendar: this.calendar.displayName }) + default: + return t('tasks', 'Add a task to "{calendar}"...', { calendar: this.calendar.displayName }) + } + }, + ...mapGetters({ + calendar: 'getDefaultCalendar', + calendars: 'getSortedCalendars', + sortOrder: 'sortOrder', + sortDirection: 'sortDirection' + }) + }, + methods: { + ...mapActions([ + 'createTask' + ]), + sort, + clearNewTask: function(event) { + event.target.blur() + this.newTaskName = '' + }, + + addTask: function() { + var task = { summary: this.newTaskName } + + // If the task is created in a collection view, + // set the appropriate properties. + if (this.$route.params.collectionId === 'starred') { + task.priority = '1' + } + if (this.$route.params.collectionId === 'today') { + task.due = moment().startOf('day').format('YYYY-MM-DDTHH:mm:ss') + } + if (this.$route.params.collectionId === 'current') { + task.start = moment().format('YYYY-MM-DDTHH:mm:ss') + } + + this.createTask(task) + this.newTaskName = '' + } + } +} +</script> |