Move templates to vue files, load collections
This commit is contained in:
Raimund Schlüßler
parent
4ba450279e
commit
928026cb5e
23 changed files with 989 additions and 879 deletions
139
js/app/app.vue
139
js/app/app.vue
|
|
@ -22,50 +22,123 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
|
|||
<template>
|
||||
<div id="content" class="app-tasks">
|
||||
<div id="app-navigation">
|
||||
<ul>
|
||||
<router-link
|
||||
tag="li"
|
||||
v-for="view in views"
|
||||
:to="'/' + view.id"
|
||||
:key="view.id"
|
||||
:class="'icon-' + view.id"
|
||||
active-class="active">
|
||||
<a class="sprite">
|
||||
<span class="title">{{ view.name }}</span>
|
||||
</a>
|
||||
</router-link>
|
||||
</ul>
|
||||
<theList/>
|
||||
<theSettings/>
|
||||
</div>
|
||||
|
||||
<div id="app-content">
|
||||
<router-view class="content-wrapper"></router-view>
|
||||
<div id="app-content"
|
||||
ng-class="{'with-app-sidebar':route.taskID}">
|
||||
<div class="content-wrapper">
|
||||
<div id="add-task"
|
||||
class="add-task handler"
|
||||
ng-show="showInput()"
|
||||
ng-class="{'focus':status.focusTaskInput}">
|
||||
<form ng-submit="addTask(status.taskName)" name="addTaskForm">
|
||||
<input id="target"
|
||||
ng-disabled="isAddingTask"
|
||||
ng-click="focusTaskInput()"
|
||||
class="transparent"
|
||||
ng-model="status.taskName"
|
||||
ng-keydown="checkTaskInput($event)"/>
|
||||
<!-- placeholder="{{ getAddString() }}"/> -->
|
||||
</form>
|
||||
</div>
|
||||
<div class="app-navigation-entry-utils">
|
||||
<div class="app-navigation-entry-utils-menu-button" title="<?php p($l->t('Change sort order')); ?>">
|
||||
<button class="sortorder-dropdown-button">
|
||||
<span class="icon" ng-class="getSortOrderIcon()"></span>
|
||||
<span class="icon sort-indicator" ng-class="{'icon-sort-up': settingsmodel.getById('various').sortDirection, 'icon-sort-down': !settingsmodel.getById('various').sortDirection}"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-navigation-entry-menu bubble sortorder-dropdown">
|
||||
<ul>
|
||||
<li ng-click="setSortOrder($event, 'default')" ng-class="{active: settingsmodel.getById('various').sortOrder == 'default'}" class="handler">
|
||||
<a>
|
||||
<span class="icon icon-list"></span>
|
||||
<span class="label">{{ t('tasks', 'Default') }}</span>
|
||||
<span class="icon sort-indicator" ng-class="{'icon-sort-up': settingsmodel.getById('various').sortDirection, 'icon-sort-down': !settingsmodel.getById('various').sortDirection}"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li ng-click="setSortOrder($event, 'due')" ng-class="{active: settingsmodel.getById('various').sortOrder == 'due'}">
|
||||
<a>
|
||||
<span class="icon icon-calendar"></span>
|
||||
<span class="label">{{ t('tasks', 'Due date') }}</span>
|
||||
<span class="icon sort-indicator" ng-class="{'icon-sort-up': settingsmodel.getById('various').sortDirection, 'icon-sort-down': !settingsmodel.getById('various').sortDirection}"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li ng-click="setSortOrder($event, 'start')" ng-class="{active: settingsmodel.getById('various').sortOrder == 'start'}">
|
||||
<a>
|
||||
<span class="icon icon-calendar"></span>
|
||||
<span class="label">{{ t('tasks', 'Start date') }}</span>
|
||||
<span class="icon sort-indicator" ng-class="{'icon-sort-up': settingsmodel.getById('various').sortDirection, 'icon-sort-down': !settingsmodel.getById('various').sortDirection}"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li ng-click="setSortOrder($event, 'priority')" ng-class="{active: settingsmodel.getById('various').sortOrder == 'priority'}">
|
||||
<a>
|
||||
<span class="icon icon-task-star"></span>
|
||||
<span class="label">{{ t('tasks', 'Priority') }}</span>
|
||||
<span class="icon sort-indicator" ng-class="{'icon-sort-up': settingsmodel.getById('various').sortDirection, 'icon-sort-down': !settingsmodel.getById('various').sortDirection}"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li ng-click="setSortOrder($event, 'alphabetically')" ng-class="{active: settingsmodel.getById('various').sortOrder == 'alphabetically'}">
|
||||
<a>
|
||||
<span class="icon icon-alphabetically"></span>
|
||||
<span class="label">{{ t('tasks', 'Alphabetically') }}</span>
|
||||
<span class="icon sort-indicator" ng-class="{'icon-sort-up': settingsmodel.getById('various').sortDirection, 'icon-sort-down': !settingsmodel.getById('various').sortDirection}"></span>
|
||||
</a>
|
||||
</li>
|
||||
<!-- <li ng-click="setSortOrder($event, 'manual')" ng-class="{active: settingsmodel.getById('various').sortOrder == 'manual'}">
|
||||
<a>
|
||||
<span class="icon icon-manual"></span>
|
||||
<span class="label">{{ t('tasks', 'Manually') }</span>
|
||||
<span class="icon sort-indicator" ng-class="{'icon-sort-up': settingsmodel.getById('various').sortDirection, 'icon-sort-down': !settingsmodel.getById('various').sortDirection}"></span>
|
||||
</a>
|
||||
</li> -->
|
||||
</ul>
|
||||
</div>
|
||||
<div class="task-list">
|
||||
<router-view />
|
||||
<div id="searchresults"></div>
|
||||
<div class="task-item template">
|
||||
<div class="task-body">
|
||||
<div class="percentdone"></div>
|
||||
<a class="task-checkbox" name="toggleCompleted" ng-click="toggleCompleted()">
|
||||
<span class="icon task-checkbox"></span>
|
||||
</a>
|
||||
<a class="icon task-separator"></a>
|
||||
<a class="task-star" ng-click="toggleStarred(task.id)">
|
||||
<span class="icon task-star faded"></span>
|
||||
</a>
|
||||
<!-- <a class="duedate" ng-class="{overdue: TasksModel.overdue(task.due)}">{{ task.due | dateTaskList }}</a> -->
|
||||
<div class="title-wrapper">
|
||||
<span class="title"></span>
|
||||
<span class="icon task-attachment"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="app-sidebar">
|
||||
<theDetails/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex';
|
||||
import TheList from './components/TheList.vue';
|
||||
import TheSettings from './components/TheSettings.vue';
|
||||
import TheDetails from './components/TheDetails.vue';
|
||||
|
||||
export default {
|
||||
name: 'app',
|
||||
data: function () {
|
||||
return {
|
||||
active: 'items',
|
||||
views: [
|
||||
{
|
||||
name: t('inventory', 'Items'),
|
||||
id: "items"
|
||||
},
|
||||
{
|
||||
name: t('inventory', 'Places'),
|
||||
id: "places"
|
||||
},
|
||||
{
|
||||
name: t('inventory', 'Categories'),
|
||||
id: "categories"
|
||||
}
|
||||
]
|
||||
};
|
||||
components: {
|
||||
'theSettings': TheSettings,
|
||||
'theList': TheList,
|
||||
'theDetails': TheDetails
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -20,18 +20,23 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
|
|||
-->
|
||||
|
||||
<template>
|
||||
<div>
|
||||
TheCalendarCollections
|
||||
</div>
|
||||
<ul class="colorpicker-list">
|
||||
<li ng-repeat="color in colors"
|
||||
ng-class="{ selected: (color===selected) }"
|
||||
ng-click="pick(color)"
|
||||
ng-style="{ 'background-color':color}; "></li>
|
||||
<li class="randomcolour"
|
||||
ng-click="randomizeColour()"
|
||||
ng-style="{ 'background-color':random}; ">
|
||||
<span class="icon icon-random"></span>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex';
|
||||
|
||||
export default {
|
||||
computed: mapState({
|
||||
}),
|
||||
components: {
|
||||
}
|
||||
name: 'colorpicker'
|
||||
}
|
||||
</script>
|
||||
|
|
@ -20,8 +20,94 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
|
|||
-->
|
||||
|
||||
<template>
|
||||
<div>
|
||||
Task
|
||||
<div class="task-body-component">
|
||||
<div class="task-body"
|
||||
type="task"
|
||||
:taskID="task.uri"
|
||||
ng-class="{active: route.taskID==task.uri, subtasks: hasSubtasks(task), completedsubtasks: hasCompletedSubtasks(task), subtaskshidden: task.hideSubtasks, attachment: task.note!=''}">
|
||||
|
||||
<div class="percentbar" ng-if="task.complete > 0 ">
|
||||
<div class="percentdone"
|
||||
:style="{ width: task.complete, 'background-color': task.calendar.color }">
|
||||
<!-- aria-label="{{ task.complete | percentDetails}}"> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a class="task-checkbox handler"
|
||||
name="toggleCompleted"
|
||||
ng-click="toggleCompleted(task)"
|
||||
role="checkbox"
|
||||
:aria-checked="task.completed"
|
||||
:aria-label="t('tasks', 'Task is completed')">
|
||||
<span class="icon task-checkbox reactive" :class="{'icon-checkmark': task.completed}"></span>
|
||||
</a>
|
||||
<a class="icon task-separator"></a>
|
||||
<a class="task-star handler" ng-click="toggleStarred(task)">
|
||||
<span class="icon icon-task-star right large reactive" :class="{'icon-task-star-high':task.priority > 5, 'icon-task-star-medium':task.priority == 5, 'icon-task-star-low':task.priority > 0 && task.priority < 5}">
|
||||
</span>
|
||||
</a>
|
||||
<a class="task-addsubtask handler add-subtask"
|
||||
ng-show="task.calendar.writable"
|
||||
ng-click="showSubtaskInput(task.uid)"
|
||||
oc-click-focus="{selector: '.add-subtask input', timeout: 0}">
|
||||
<span class="icon icon-add right large reactive" :title="t('tasks', 'Add a subtask to subtasks') + ' ' + task.summary"></span>
|
||||
</a>
|
||||
<a class="handler" ng-click="toggleSubtasks(task)">
|
||||
<span class="icon right large subtasks reactive"
|
||||
ng-class="task.hideSubtasks ? 'icon-subtasks-hidden' : 'icon-subtasks-visible'"
|
||||
:title="t('tasks', 'Toggle subtasks')">
|
||||
</span>
|
||||
</a>
|
||||
<a class="handler" ng-click="toggleCompletedSubtasks(task)">
|
||||
<span class="icon icon-toggle right large toggle-completed-subtasks reactive"
|
||||
ng-class="{'active': !task.hideCompletedSubtasks}"
|
||||
:title="t('tasks', 'Toggle completed subtasks')">
|
||||
</span>
|
||||
</a>
|
||||
<a>
|
||||
<span class="icon icon-note right large"></span>
|
||||
</a>
|
||||
<!-- <a class="duedate" ng-class="{overdue: TasksModel.overdue(task.due)}">{{ task.due | dateTaskList }}</a> -->
|
||||
<a ng-show="route.collectionID=='week'" class="listname" >{{ task.calendar.displayname }}</a>
|
||||
<div class="title-wrapper">
|
||||
<span class="title" ng-bind-html="task.summary | linky:'_blank':{rel: 'nofollow'}"></span>
|
||||
<span class="categories-list">
|
||||
<ul>
|
||||
<li ng-repeat="category in task.categories"><span>{{ category }}</span></li>
|
||||
</ul>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="subtasks-container"
|
||||
ng-class="{subtaskshidden: hideSubtasks(task)}">
|
||||
<ol dnd-list="draggedTasks"
|
||||
:calendarID="task.calendar.uri"
|
||||
dnd-drop="dropAsSubtask(event, item, index)"
|
||||
dnd-dragover="dragover(event, index)">
|
||||
<li class="task-item ui-draggable handler add-subtask"
|
||||
ng-show="status.addSubtaskTo == task.uid">
|
||||
<form ng-submit="addTask(status.subtaskName,task.uid,task.calendar,task)" name="addTaskForm">
|
||||
<input class="transparent"
|
||||
ng-disabled="isAddingTask"
|
||||
ng-click="focusInput()"
|
||||
ng-model="status.subtaskName"
|
||||
ng-keydown="checkTaskInput($event)"/>
|
||||
<!-- placeholder="{{ getSubAddString(task.summary) }}"/> -->
|
||||
</form>
|
||||
</li>
|
||||
<li :taskID="task.uri"
|
||||
class="task-item ui-draggable handler subtask"
|
||||
ng-repeat="task in getSubTasks(filtered,task) | orderBy:getSortOrder():settingsmodel.getById('various').sortDirection"
|
||||
ng-click="openDetails(task.uri,$event)"
|
||||
:class="{done: task.completed}"
|
||||
dnd-draggable="task"
|
||||
dnd-dragstart="dragStart(event)"
|
||||
dnd-dragend="dragEnd(event)">
|
||||
<!-- dnd-effect-allowed="{{ allow(task) }}"> -->
|
||||
<task-body-component />
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -29,6 +115,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
|
|||
import { mapState } from 'vuex';
|
||||
|
||||
export default {
|
||||
name: 'task-body-component',
|
||||
computed: mapState({
|
||||
}),
|
||||
components: {
|
||||
|
|
|
|||
|
|
@ -1,37 +0,0 @@
|
|||
<!--
|
||||
Nextcloud - Tasks
|
||||
|
||||
@author Raimund Schlüßler
|
||||
@copyright 2018 Raimund Schlüßler <raimund.schluessler@mailbox.org>
|
||||
|
||||
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>
|
||||
Collections
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex';
|
||||
|
||||
export default {
|
||||
computed: mapState({
|
||||
}),
|
||||
components: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
92
js/app/components/TheCollections/Calendar.vue
Normal file
92
js/app/components/TheCollections/Calendar.vue
Normal file
|
|
@ -0,0 +1,92 @@
|
|||
<!--
|
||||
Nextcloud - Tasks
|
||||
|
||||
@author Raimund Schlüßler
|
||||
@copyright 2018 Raimund Schlüßler <raimund.schluessler@mailbox.org>
|
||||
|
||||
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>
|
||||
<div class="grouped-tasks"
|
||||
ng-class="{'completed-hidden':!settingsmodel.getById('various').showHidden}">
|
||||
<ol class="tasks"
|
||||
:calendarID="$route.params.calendarId"
|
||||
collectionID="uncompleted"
|
||||
type="list"
|
||||
dnd-list="draggedTasks"
|
||||
dnd-drop="dropAsRootTask(event, item, index)"
|
||||
dnd-dragover="dragover(event, index)">
|
||||
<li class="task-item ui-draggable handler"
|
||||
:taskID="task.uri"
|
||||
ng-click="openDetails(task.uri,$event)"
|
||||
ng-class="{done: task.completed}"
|
||||
dnd-draggable="task"
|
||||
dnd-dragstart="dragStart(event)"
|
||||
dnd-dragend="dragEnd(event)"
|
||||
v-for="task in tasks"
|
||||
:key="task.id">
|
||||
<!-- ng-repeat="task in filtered = filteredTasks() | filter:hasNoParent(task) | filter:filterTasks(task,route.calendarID) | filter:{'completed':'false'} | orderBy:getSortOrder():settingsmodel.getById('various').sortDirection"> -->
|
||||
<!-- dnd-effect-allowed="{{ allow(task) }}"> -->
|
||||
<task />
|
||||
</li>
|
||||
</ol>
|
||||
<h2 class="heading-hiddentasks icon-triangle-s handler" ng-show="getCount(route.calendarID,'completed')" ng-click="toggleHidden()">
|
||||
<!-- {{ getCountString(route.calendarID,'completed') }} -->
|
||||
</h2>
|
||||
<ol class="completed-tasks"
|
||||
:calendarID="$route.params.calendarId"
|
||||
collectionID="completed"
|
||||
type="list"
|
||||
dnd-list="draggedTasks"
|
||||
dnd-drop="dropAsRootTask(event, item, index)"
|
||||
dnd-dragover="dragover(event, index)">
|
||||
<li class="task-item handler"
|
||||
:taskID="task.uri"
|
||||
ng-click="openDetails(task.uri,$event)"
|
||||
ng-class="{done: task.completed}"
|
||||
dnd-draggable="task"
|
||||
dnd-dragstart="dragStart(event)"
|
||||
dnd-dragend="dragEnd(event)"
|
||||
v-for="task in tasks"
|
||||
:key="task.id">
|
||||
<!-- ng-repeat="task in filtered = filteredTasks() | filter:hasNoParent(task) | filter:filterTasks(task,route.calendarID) | filter:{'completed':true} | orderBy:'completed_date':true"> -->
|
||||
<!-- dnd-effect-allowed="{{ allow(task) }}"> -->
|
||||
<task />
|
||||
</li>
|
||||
</ol>
|
||||
<div class="loadmore handler" ng-hide="loadedCompleted(route.calendarID)">
|
||||
<span ng-click="getCompletedTasks(route.calendarID)">{{ t('tasks', 'Load remaining completed tasks.') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex';
|
||||
import Task from '../Task.vue';
|
||||
|
||||
export default {
|
||||
computed: Object.assign({},
|
||||
mapState({
|
||||
tasks: state => state.tasks
|
||||
})
|
||||
),
|
||||
components: {
|
||||
'task': Task
|
||||
}
|
||||
}
|
||||
</script>
|
||||
76
js/app/components/TheCollections/General.vue
Normal file
76
js/app/components/TheCollections/General.vue
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
<!--
|
||||
Nextcloud - Tasks
|
||||
|
||||
@author Raimund Schlüßler
|
||||
@copyright 2018 Raimund Schlüßler <raimund.schluessler@mailbox.org>
|
||||
|
||||
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 ng-repeat="calendar in calendars | filter:filterLists()" class="grouped-tasks ui-droppable" :rel="calendar.uri"> -->
|
||||
<div>
|
||||
<div v-for="calendar in calendars"
|
||||
:key="calendar.id"
|
||||
class="grouped-tasks ui-droppable"
|
||||
:rel="calendar.uri">
|
||||
<h2 class="heading">
|
||||
<text>{{ calendar.displayname }}</text>
|
||||
</h2>
|
||||
<ol class="tasks"
|
||||
:calendarID="calendar.uri"
|
||||
:collectionID="$route.params.collectionId"
|
||||
type="list"
|
||||
dnd-list="draggedTasks"
|
||||
dnd-drop="dropAsRootTask(event, item, index)"
|
||||
dnd-dragover="dragover(event, index)">
|
||||
<li class="task-item ui-draggable handler"
|
||||
:taskID="task.uri"
|
||||
ng-animate="'animate'"
|
||||
ng-click="openDetails(task.uri,$event)"
|
||||
ng-class="{done: task.completed}"
|
||||
dnd-draggable="task"
|
||||
dnd-dragstart="dragStart(event)"
|
||||
dnd-dragend="dragEnd(event)"
|
||||
v-for="task in tasks"
|
||||
:key="task.id">
|
||||
<!-- ng-repeat="task in filtered = filteredTasks() | filter:hasNoParent(task) | filter:filterTasks(task,calendar.uri) | filter:filterTasks(task,route.collectionID) | orderBy:getSortOrder():settingsmodel.getById('various').sortDirection"> -->
|
||||
<!-- dnd-effect-allowed="{{ allow(task) }}"> -->
|
||||
<task-body />
|
||||
</li>
|
||||
</ol>
|
||||
<div class="loadmore handler" ng-hide="loadedCompleted(calendar.uri) || route.collectionID != 'completed'">
|
||||
<span ng-click="getCompletedTasks(calendar.uri)">{{ t('tasks', 'Load remaining completed tasks.') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex';
|
||||
import TaskBody from '../Task.vue';
|
||||
|
||||
export default {
|
||||
computed: Object.assign({},
|
||||
mapState({
|
||||
calendars: state => state.calendars,
|
||||
tasks: state => state.tasks
|
||||
})
|
||||
),
|
||||
components: {
|
||||
'task-body': TaskBody
|
||||
}
|
||||
}
|
||||
</script>
|
||||
66
js/app/components/TheCollections/Week.vue
Normal file
66
js/app/components/TheCollections/Week.vue
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
<!--
|
||||
Nextcloud - Tasks
|
||||
|
||||
@author Raimund Schlüßler
|
||||
@copyright 2018 Raimund Schlüßler <raimund.schluessler@mailbox.org>
|
||||
|
||||
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 ng-repeat="day in days | filter:dayHasEntry(day)" class="grouped-tasks ui-droppable">
|
||||
<h2 class="heading">
|
||||
<!-- <text>{{ day | day }}</text> -->
|
||||
</h2>
|
||||
<ol class="tasks"
|
||||
listID=""
|
||||
:collectionID="$route.params.collectionId"
|
||||
type="list"
|
||||
dnd-list="draggedTasks"
|
||||
dnd-drop="dropAsRootTask(event, item, index)"
|
||||
dnd-dragover="dragover(event, index)">
|
||||
<li class="task-item ui-draggable handler"
|
||||
:taskID="task.uri"
|
||||
ng-animate="'animate'"
|
||||
ng-click="openDetails(task.uri,$event)"
|
||||
ng-class="{done: task.completed}"
|
||||
dnd-draggable="task"
|
||||
dnd-dragstart="dragStart(event)"
|
||||
dnd-dragend="dragEnd(event)"
|
||||
v-for="task in tasks"
|
||||
:key="task.id">
|
||||
<!-- ng-repeat="task in filtered = filteredTasks() | filter:taskAtDay(task,day) | filter:hasNoParent(task) | filter:{'completed':'false'} | orderBy:getSortOrder():settingsmodel.getById('various').sortDirection"> -->
|
||||
<!-- dnd-effect-allowed="{{ allow(task) }}"> -->
|
||||
<task />
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex';
|
||||
import Task from '../Task.vue';
|
||||
|
||||
export default {
|
||||
computed: Object.assign({},
|
||||
mapState({
|
||||
tasks: state => state.tasks
|
||||
})
|
||||
),
|
||||
components: {
|
||||
'task': Task
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -20,8 +20,243 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
|
|||
-->
|
||||
|
||||
<template>
|
||||
<div>
|
||||
Settings
|
||||
<div ng-click="endEdit($event)"
|
||||
class="content-wrapper handler">
|
||||
<div class="flex-container"
|
||||
ng-show="TaskState()=='found'"
|
||||
ng-class="{'disabled': !task.calendar.writable}">
|
||||
<div class="title" ng-class="{'editing':route.parameter=='name'}">
|
||||
<a class="checkbox reactive"
|
||||
ng-click="toggleCompleted(task)"
|
||||
role="checkbox"
|
||||
:aria-checked="task.completed"
|
||||
:aria-label="t('tasks', 'Task is completed')">
|
||||
<span class="icon detail-checkbox" ng-class="{'icon-checkmark':task.completed, 'disabled': !task.calendar.writable}"></span>
|
||||
</a>
|
||||
<a class="star reactive" ng-click="toggleStarred(task)">
|
||||
<span class="icon icon-task-star"
|
||||
:class="{'icon-task-star-high': task.priority>5, 'icon-task-star-medium':task.priority==5, 'icon-task-star-low':task.priority > 0 && task.priority < 5, 'disabled': !task.calendar.writable}"></span>
|
||||
</a>
|
||||
<div class="title-text handler"
|
||||
:class="{'strike-through':task.completed}"
|
||||
ng-click="editName($event, task)"
|
||||
oc-click-focus="{selector: '#editName', timeout: 0}"
|
||||
ng-bind-html="task.summary | linky:'_blank':{rel: 'nofollow'}">
|
||||
</div>
|
||||
<div class="expandable-container handler">
|
||||
<div class="expandingArea active">
|
||||
<pre><span>{{ task.summary }}</span><br /></pre>
|
||||
<textarea id="editName"
|
||||
maxlength="200"
|
||||
ng-model="task.summary"
|
||||
ng-keydown="endName($event)"
|
||||
ng-change="triggerUpdate(task)">
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="body">
|
||||
<ul class="sections">
|
||||
<li class="section detail-start handler"
|
||||
ng-class="{'date':isDue(task.start), 'editing':route.parameter=='startdate', 'high':isOverDue(task.start)}"
|
||||
ng-click="editStart($event, task)">
|
||||
<div>
|
||||
<span class="icon icon-calendar" ng-class="{'icon-calendar-due':isDue(task.start),
|
||||
'icon-calendar-overdue':isOverDue(task.start)}"></span>
|
||||
<span class="section-title">
|
||||
<!-- <text>{{ task.start | startDetails }}</text> -->
|
||||
</span>
|
||||
<div class="section-edit">
|
||||
<!-- <input class="datepicker-input medium"
|
||||
type="text"
|
||||
key-value=""
|
||||
placeholder="dd.mm.yyyy"
|
||||
value="{{ task.start | dateTaskList }}"
|
||||
datepicker="start">
|
||||
<input class="timepicker-input medium handler"
|
||||
ng-hide="task.allDay"
|
||||
type="text"
|
||||
key-value=""
|
||||
placeholder="hh:mm"
|
||||
value="{{ task.start | timeTaskList }}"
|
||||
timepicker="start"> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="utils">
|
||||
<a>
|
||||
<span class="icon detail-save icon-checkmark-color handler end-edit reactive"></span>
|
||||
</a>
|
||||
<a class="handler end-edit" ng-click="deleteStartDate(task)">
|
||||
<span class="icon icon-trash reactive"></span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="section detail-date handler"
|
||||
ng-class="{'date':isDue(task.due), 'editing':route.parameter=='duedate', 'high':isOverDue(task.due)}"
|
||||
ng-click="editDueDate($event, task)">
|
||||
<div>
|
||||
<span class="icon icon-calendar" ng-class="{'icon-calendar-due':isDue(task.due), 'icon-calendar-overdue':isOverDue(task.due)}"></span>
|
||||
<span class="section-title">
|
||||
<!-- <text>{{ task.due | dateDetails }}</text> -->
|
||||
</span>
|
||||
<div class="section-edit">
|
||||
<!-- <input class="datepicker-input medium"
|
||||
type="text"
|
||||
key-value=""
|
||||
placeholder="dd.mm.yyyy"
|
||||
value="{{ task.due | dateTaskList }}"
|
||||
datepicker="due">
|
||||
<input class="timepicker-input medium"
|
||||
ng-hide="task.allDay"
|
||||
type="text"
|
||||
key-value=""
|
||||
placeholder="hh:mm"
|
||||
value="{{ task.due | timeTaskList }}"
|
||||
timepicker="due"> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="utils">
|
||||
<a>
|
||||
<span class="icon detail-save icon-checkmark-color handler end-edit reactive"></span>
|
||||
</a>
|
||||
<a class="handler end-edit" ng-click="deleteDueDate(task)">
|
||||
<span class="icon icon-trash reactive"></span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="section detail-all-day handler reactive"
|
||||
ng-click="toggleAllDay(task)"
|
||||
ng-if="isAllDayPossible(task)"
|
||||
role="checkbox"
|
||||
:aria-checked="task.allDay">
|
||||
<div>
|
||||
<span class="icon detail-checkbox" ng-class="{'icon-checkmark': task.allDay, 'disabled': !task.calendar.writable}"></span>
|
||||
<span class="section-title">
|
||||
<text>{{ t('tasks', 'All day') }}</text>
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="section detail-priority handler"
|
||||
ng-class="{'editing':route.parameter=='priority','high':task.priority>5,'medium':task.priority==5,'low':task.priority > 0 && task.priority < 5, 'date':task.priority>0}"
|
||||
ng-click="editPriority($event, task)">
|
||||
<div>
|
||||
<span class="icon icon-task-star"
|
||||
:class="{'icon-task-star-high':task.priority>5,'icon-task-star-medium':task.priority==5,'icon-task-star-low':task.priority > 0 && task.priority < 5}"></span>
|
||||
<span class="section-title">
|
||||
<!-- <text>{{ task.priority | priorityDetails}}</text> -->
|
||||
</span>
|
||||
<div class="section-edit">
|
||||
<input class="priority-input"
|
||||
type="text"
|
||||
ng-model="task.priority"
|
||||
ng-change="triggerUpdate(task)">
|
||||
<input type="range"
|
||||
ng-model="task.priority"
|
||||
min="0"
|
||||
max="9"
|
||||
step="1"
|
||||
ng-change="triggerUpdate(task)">
|
||||
</div>
|
||||
</div>
|
||||
<div class="utils">
|
||||
<a>
|
||||
<span class="icon detail-save icon-checkmark-color handler end-edit reactive"></span>
|
||||
</a>
|
||||
<a class="handler end-edit" ng-click="deletePriority(task)">
|
||||
<span class="icon icon-trash reactive"></span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="section detail-complete handler"
|
||||
ng-class="{'editing':route.parameter=='percent', 'date':task.complete>0}"
|
||||
ng-click="editPercent($event, task)">
|
||||
<div>
|
||||
<span class="icon icon-percent" ng-class="{'icon-percent-active':task.complete>0}"></span>
|
||||
<span class="section-title">
|
||||
<!-- <text>{{ task.complete | percentDetails}}</text> -->
|
||||
</span>
|
||||
<div class="section-edit">
|
||||
<input class="percent-input"
|
||||
type="text"
|
||||
ng-model="task.complete"
|
||||
ng-change="setPercentComplete(task, task.complete)">
|
||||
<input type="range"
|
||||
ng-model="task.complete"
|
||||
min="0"
|
||||
max="100"
|
||||
step="1"
|
||||
ng-change="setPercentComplete(task, task.complete)">
|
||||
</div>
|
||||
</div>
|
||||
<div class="utils">
|
||||
<a>
|
||||
<span class="icon detail-save icon-checkmark-color handler end-edit reactive"></span>
|
||||
</a>
|
||||
<a class="handler end-edit" ng-click="deletePercent(task)">
|
||||
<span class="icon icon-trash reactive"></span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="section detail-categories" ng-class="{'active':task.cats.length>0}">
|
||||
<div>
|
||||
<span class="icon icon-tag detail-categories" ng-class="{'icon-tag-active':task.cats.length>0}"></span>
|
||||
<!-- Edit line 1080 to show placeholder -->
|
||||
<div class="detail-categories-container">
|
||||
<!-- <ui-select
|
||||
multiple
|
||||
tagging
|
||||
tagging-label="<?php p($l->t('(New category)')); ?>"
|
||||
ng-model="task.cats"
|
||||
theme="select2"
|
||||
ng-disabled="!task.calendar.writable"
|
||||
style="width: 100%;"
|
||||
on-remove="removeCategory($item, $model)"
|
||||
on-select="addCategory($item, $model)">
|
||||
<ui-select-match placeholder="<?php p($l->t('Select categories...')); ?>">{{$item}}</ui-select-match>
|
||||
<ui-select-choices repeat="category in settingsmodel.getById('various').categories | filter:$select.search">
|
||||
{{category}}
|
||||
</ui-select-choices>
|
||||
</ui-select> -->
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="section detail-note">
|
||||
<div class="note">
|
||||
<div class="note-body selectable handler"
|
||||
ng-click="editNote($event, task)"
|
||||
oc-click-focus="{selector: '.expandingArea textarea', timeout: 0}">
|
||||
<div class="content-fakeable" ng-class="{'editing':route.parameter=='note'}">
|
||||
<div class="display-view" ng-bind-html="task.note | linky:'_blank':{rel: 'nofollow'}"></div>
|
||||
<div class="edit-view">
|
||||
<div class="expandingArea active">
|
||||
<pre><span>{{ task.note }}</span><br /><br /></pre>
|
||||
<textarea ng-model="task.note" ng-change="triggerUpdate(task)"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<a class="handler left close-all reactive"
|
||||
ng-click="deleteTask(task)"
|
||||
ng-show="task.calendar.writable">
|
||||
<span class="icon icon-trash"></span>
|
||||
</a>
|
||||
<a class="handler right close-all reactive">
|
||||
<span class="icon icon-hide"></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div ng-show="TaskState()=='loading'" class="notice">
|
||||
<span>{{ t('tasks', 'Loading the task...') }}</span>
|
||||
<div class="loading" style="height: 50px;"></div>
|
||||
</div>
|
||||
<div ng-show="TaskState()==null" class="notice">
|
||||
<span>{{ t('tasks', 'Task not found!') }}</span>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -32,6 +267,20 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
|
|||
computed: mapState({
|
||||
}),
|
||||
components: {
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
task: {
|
||||
calendar: {
|
||||
writable: true
|
||||
},
|
||||
complete: 4,
|
||||
completed: false,
|
||||
priority: 5,
|
||||
cats: [],
|
||||
note: "Migrate this app to vue."
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,37 +0,0 @@
|
|||
<!--
|
||||
Nextcloud - Tasks
|
||||
|
||||
@author Raimund Schlüßler
|
||||
@copyright 2018 Raimund Schlüßler <raimund.schluessler@mailbox.org>
|
||||
|
||||
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>
|
||||
TheCalendarCollections
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex';
|
||||
|
||||
export default {
|
||||
computed: mapState({
|
||||
}),
|
||||
components: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
177
js/app/components/TheList.vue
Normal file
177
js/app/components/TheList.vue
Normal file
|
|
@ -0,0 +1,177 @@
|
|||
<!--
|
||||
Nextcloud - Tasks
|
||||
|
||||
@author Raimund Schlüßler
|
||||
@copyright 2018 Raimund Schlüßler <raimund.schluessler@mailbox.org>
|
||||
|
||||
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>
|
||||
<ul id="collections">
|
||||
<router-link
|
||||
v-for="collection in collections"
|
||||
tag="li"
|
||||
v-bind:id="'collection_' + collection.id"
|
||||
v-bind:collectionID="collection.id"
|
||||
:to="'/collections/' + collection.id"
|
||||
:key="collection.id"
|
||||
class="collection reactive" :class="collection.icon"
|
||||
active-class="active"
|
||||
ng-class="{'animate-up': hideCollection(collection.id)}"
|
||||
dnd-list="draggedTasks"
|
||||
dnd-drop="dropCollection(event, index, item)"
|
||||
dnd-dragover="dragoverCollection(event, index)">
|
||||
<a class="sprite">
|
||||
<span class="date" v-if="collection.id=='today'">{{ dayOfMonth }}</span>
|
||||
<span class="title">{{ collection.displayname }}</span>
|
||||
</a>
|
||||
<div class="app-navigation-entry-utils">
|
||||
<ul>
|
||||
<!-- <li class="app-navigation-entry-utils-counter">{{ getCollectionString(collection.id) | counterFormatter }}</li> -->
|
||||
</ul>
|
||||
</div>
|
||||
</router-link>
|
||||
<router-link
|
||||
v-for="calendar in calendars"
|
||||
tag="li"
|
||||
v-bind:id="'list_' + calendar.uri"
|
||||
v-bind:calendarID="calendar.uri"
|
||||
:to="'/calendars/' + calendar.uri"
|
||||
:key="calendar.uri"
|
||||
class="list with-menu handler editing"
|
||||
active-class="active"
|
||||
ng-class="edit:route.listparameter == 'name' && route.calendarID == calendar.uri,
|
||||
caldav: route.listparameter == 'caldav' && route.calendarID == calendar.uri}"
|
||||
dnd-list="draggedTasks"
|
||||
dnd-drop="dropList(event, index, item)"
|
||||
dnd-dragover="dragoverList(event, index)">
|
||||
<div class="app-navigation-entry-bullet" :style="'background-color: ' + calendar.color + ';'"></div>
|
||||
<a ng-dblclick="startRename(calendar)">
|
||||
<span class="title">{{ calendar.displayname }}</span>
|
||||
</a>
|
||||
<div class="app-navigation-entry-utils">
|
||||
<ul>
|
||||
<!-- <li class="app-navigation-entry-utils-counter">{{ getListCount(calendar.uri,'all') | counterFormatter }}</li> -->
|
||||
<li class="app-navigation-entry-utils-menu-button" v-show="calendar.writable"><button></button></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="app-navigation-entry-menu" v-show="calendar.writable">
|
||||
<ul>
|
||||
<li>
|
||||
<a ng-click="startEdit(calendar)">
|
||||
<span class="icon-rename"></span>
|
||||
<span>{{ t('tasks', 'Edit') }}</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a ng-click="showCalDAVUrl(calendar)">
|
||||
<span class="icon-public"></span>
|
||||
<span>{{ t('tasks', 'Link') }}</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a :href="calendar.exportUrl" :download="calendar.uri + '.ics'">
|
||||
<span class="icon-download"></span>
|
||||
<span>{{ t('tasks', 'Download') }}</span>
|
||||
</a>
|
||||
</li>
|
||||
<li confirmation="delete(calendar)" confirmation-message="deleteMessage(calendar)">
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="app-navigation-entry-edit name" ng-class="{error: nameError}">
|
||||
<form>
|
||||
<input ng-model="calendar.displayname"
|
||||
class="edit hasTooltip"
|
||||
type="text"
|
||||
ng-keyup="checkEdit($event,calendar)"
|
||||
autofocus-on-insert>
|
||||
<input type="cancel"
|
||||
value=""
|
||||
class="action icon-close"
|
||||
ng-click="cancelEdit(calendar)"
|
||||
v-bind:title="t('tasks', 'Cancel')">
|
||||
<input type="submit"
|
||||
value=""
|
||||
class="action icon-checkmark"
|
||||
ng-click="saveEdit(calendar)"
|
||||
v-bind:title="t('tasks', 'Save')">
|
||||
</form>
|
||||
<colorpicker class="colorpicker" selected="calendar.color"/>
|
||||
</div>
|
||||
<div class="app-navigation-entry-edit caldav">
|
||||
<form>
|
||||
<input class="caldav"
|
||||
ng-value="calendar.caldav"
|
||||
readonly
|
||||
type="text"/>
|
||||
<input type="cancel"
|
||||
value=""
|
||||
class="action icon-close"
|
||||
ng-click="hideCalDAVUrl()"
|
||||
v-bind:title="t('tasks', 'Cancel')">
|
||||
</form>
|
||||
</div>
|
||||
</router-link>
|
||||
<li class="newList handler icon-add reactive editing" ng-class="{edit: status.addingList}">
|
||||
<a class="addlist icon sprite"
|
||||
ng-click="startCreate()"
|
||||
oc-click-focus="{selector: '#newList', timeout: 0}">
|
||||
<span class="title">{{ t('tasks', 'Add List...') }}</span>
|
||||
</a>
|
||||
<div class="app-navigation-entry-edit name" ng-class="{error: nameError}">
|
||||
<form ng-disabled="isAddingList">
|
||||
<input id="newList"
|
||||
ng-model="status.newListName"
|
||||
class="edit hasTooltip"
|
||||
type="text"
|
||||
autofocus-on-insert
|
||||
v-bind:placeholder="t('tasks', 'New List')"
|
||||
ng-keyup="checkNew($event,status.newListName)">
|
||||
<input type="cancel"
|
||||
value=""
|
||||
class="action icon-close"
|
||||
ng-click="cancelCreate()"
|
||||
v-bind:title="t('tasks', 'Cancel')">
|
||||
<input type="submit"
|
||||
value=""
|
||||
class="action icon-checkmark"
|
||||
ng-click="create($event)"
|
||||
v-bind:title="t('tasks', 'Save')">
|
||||
</form>
|
||||
<colorpicker class="colorpicker" selected="color"/>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex';
|
||||
import Colorpicker from './Colorpicker.vue';
|
||||
|
||||
export default {
|
||||
computed: Object.assign({},
|
||||
mapState({
|
||||
collections: state => state.collections,
|
||||
calendars: state => state.calendars,
|
||||
dayOfMonth: state => state.dayOfMonth
|
||||
})
|
||||
),
|
||||
components: {
|
||||
'colorpicker': Colorpicker,
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -22,21 +22,21 @@
|
|||
import Vue from "vue";
|
||||
import VueRouter from "vue-router";
|
||||
|
||||
import TheGeneralCollections from "./TheGeneralCollections.vue";
|
||||
import TheWeekCollection from "./TheWeekCollection.vue";
|
||||
import TheCalendarCollections from "./TheCalendarCollections.vue";
|
||||
import CollectionGeneral from "./TheCollections/General.vue";
|
||||
import CollectionWeek from "./TheCollections/Week.vue";
|
||||
import CollectionCalendar from "./TheCollections/Calendar.vue";
|
||||
|
||||
const routes = [
|
||||
// using
|
||||
// { path: '/collections', component: Collections, alias: '/' },
|
||||
// { path: '/collections/all', component: CollectionGeneral, alias: '/' },
|
||||
// instead of
|
||||
{ path: '/', redirect: '/collections/all' },
|
||||
{ path: '/collections/:collectionId', component: TheGeneralCollections},
|
||||
// would also be an option, but it currently does not work
|
||||
// reliably with router-link due to
|
||||
// https://github.com/vuejs/vue-router/issues/419
|
||||
{ path: '/collections/week', component: TheWeekCollection},
|
||||
{ path: '/calendars/:id', component: TheCalendarCollections, props: true},
|
||||
{ path: '/collections/week', component: CollectionWeek},
|
||||
{ path: '/collections/:collectionId', component: CollectionGeneral},
|
||||
{ path: '/calendars/:id', component: CollectionCalendar, props: true},
|
||||
];
|
||||
|
||||
Vue.use(VueRouter);
|
||||
|
|
|
|||
|
|
@ -20,8 +20,41 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
|
|||
-->
|
||||
|
||||
<template>
|
||||
<div>
|
||||
Settings
|
||||
<div id="app-settings" ng-controller="SettingsController">
|
||||
<div id="app-settings-header">
|
||||
<button class="settings-button" data-apps-slide-toggle="#app-settings-content">
|
||||
<span>{{ t('tasks', 'Settings') }}</span>
|
||||
</button>
|
||||
</div>
|
||||
<div id="app-settings-content">
|
||||
<ul>
|
||||
<li>
|
||||
<label for="startOfWeek">{{ t('tasks', 'Start of week') }}</label>
|
||||
<select id="startOfWeek"
|
||||
ng-change="setStartOfWeek()"
|
||||
ng-model="settingsmodel.getById('various').startOfWeek"
|
||||
ng-options="startOfWeekOption.id as startOfWeekOption.name for startOfWeekOption in startOfWeekOptions">
|
||||
</select>
|
||||
</li>
|
||||
<li class="headline">
|
||||
{{ t('tasks', 'Visibility of Smart Collections') }}
|
||||
</li>
|
||||
<li v-for="collection in collections"
|
||||
:key="collection.id">
|
||||
<div class="label-container">
|
||||
<span class="icon" :class="collection.icon">
|
||||
<text ng-show="collection.id=='today'">{{ dayOfMonth }}</text>
|
||||
</span>
|
||||
<label :for="'visibilityCollection-' + collection.id" class="title">{{ collection.displayname }}</label>
|
||||
</div>
|
||||
<select :id="'visibilityCollection-' + collection.id"
|
||||
ng-change="setVisibility(collection.id)"
|
||||
ng-model="collection.show"
|
||||
ng-options="collectionOption.id as collectionOption.name for collectionOption in collectionOptions">
|
||||
</select>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -29,8 +62,13 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
|
|||
import { mapState } from 'vuex';
|
||||
|
||||
export default {
|
||||
computed: mapState({
|
||||
}),
|
||||
computed: Object.assign({},
|
||||
mapState({
|
||||
collections: state => state.collections,
|
||||
calendars: state => state.calendars,
|
||||
dayOfMonth: state => state.dayOfMonth
|
||||
})
|
||||
),
|
||||
components: {
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,37 +0,0 @@
|
|||
<!--
|
||||
Nextcloud - Tasks
|
||||
|
||||
@author Raimund Schlüßler
|
||||
@copyright 2018 Raimund Schlüßler <raimund.schluessler@mailbox.org>
|
||||
|
||||
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>
|
||||
TheWeekCollection
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex';
|
||||
|
||||
export default {
|
||||
computed: mapState({
|
||||
}),
|
||||
components: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -66,7 +66,7 @@ OCA.Tasks.App = new Vue({
|
|||
}
|
||||
},
|
||||
beforeMount() {
|
||||
this.$store.dispatch('loadTasks');
|
||||
this.$store.dispatch('loadCollections');
|
||||
},
|
||||
methods: {
|
||||
filter(query) {
|
||||
|
|
|
|||
32
js/app/services/requests.js
Normal file
32
js/app/services/requests.js
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
/**
|
||||
* Nextcloud - Tasks
|
||||
*
|
||||
* @author Raimund Schlüßler
|
||||
* @copyright 2018 Raimund Schlüßler <raimund.schluessler@mailbox.org>
|
||||
*
|
||||
* 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/>.
|
||||
*
|
||||
*/
|
||||
'use strict';
|
||||
|
||||
import Axios from 'axios';
|
||||
Axios.defaults.headers.common.requesttoken = OC.requestToken;
|
||||
|
||||
export default {
|
||||
get(url) {
|
||||
return Axios.get(url)
|
||||
.then((response) => Promise.resolve(response))
|
||||
.catch((error) => Promise.reject(error));
|
||||
}
|
||||
};
|
||||
|
|
@ -22,33 +22,55 @@
|
|||
|
||||
import Vue from 'vue';
|
||||
import Vuex from 'vuex';
|
||||
import Axios from 'axios';
|
||||
Axios.defaults.headers.common.requesttoken = OC.requestToken;
|
||||
import Requests from './services/requests';
|
||||
|
||||
Vue.use(Vuex);
|
||||
|
||||
export default new Vuex.Store({
|
||||
state: {
|
||||
tasks: []
|
||||
tasks: [],
|
||||
collections: [
|
||||
],
|
||||
calendars: [
|
||||
{
|
||||
uri: "test-1",
|
||||
displayname: "Test 1",
|
||||
color: "#eef",
|
||||
writable: true
|
||||
},
|
||||
{
|
||||
uri: "test-2",
|
||||
displayname: "Test 2",
|
||||
color: "#eef",
|
||||
writable: false
|
||||
},
|
||||
{
|
||||
uri: "test-3",
|
||||
displayname: "Test 3",
|
||||
color: "#112233",
|
||||
writable: true
|
||||
}
|
||||
],
|
||||
dayOfMonth: 23
|
||||
},
|
||||
mutations: {
|
||||
setTasks(state, payload) {
|
||||
state.tasks = payload.tasks;
|
||||
setCollections(state, payload) {
|
||||
state.collections = payload.collections;
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
loadTasks({commit}) {
|
||||
loadCollections({commit}) {
|
||||
return new Promise(function(resolve) {
|
||||
// Axios.get(OC.generateUrl('apps/tasks/tasks'))
|
||||
// .then(function (response) {
|
||||
// commit('setTasks' , {
|
||||
// tasks: response.data.data.tasks
|
||||
// });
|
||||
// resolve();
|
||||
// })
|
||||
// .catch(function (error) {
|
||||
// console.log(error);
|
||||
// });
|
||||
Requests.get(OC.generateUrl('apps/tasks/collections'))
|
||||
.then(response => {
|
||||
commit('setCollections' , {
|
||||
collections: response.data.data.collections
|
||||
});
|
||||
resolve();
|
||||
})
|
||||
.catch(error => {
|
||||
console.log(error);
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +0,0 @@
|
|||
<ul class="colorpicker-list">
|
||||
<li ng-repeat="color in colors"
|
||||
ng-class="{ selected: (color===selected) }"
|
||||
ng-click="pick(color)"
|
||||
ng-style="{ 'background-color':color}; "></li>
|
||||
<li class="randomcolour"
|
||||
ng-click="randomizeColour()"
|
||||
ng-style="{ 'background-color':random}; ">
|
||||
<span class="icon icon-random"></span>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -2,255 +2,3 @@
|
|||
script('tasks', 'merged');
|
||||
style('tasks', 'style');
|
||||
?>
|
||||
|
||||
<div id="app-navigation" ng-controller="ListController">
|
||||
<ul id="collections">
|
||||
<li id="collection_{{ collection.id }}"
|
||||
class="collection {{ collection.icon }} reactive"
|
||||
collectionID="{{collection.id}}"
|
||||
ng-repeat="collection in collections"
|
||||
ng-class="{'animate-up': hideCollection(collection.id), active: collection.id==route.collectionID}"
|
||||
dnd-list="draggedTasks"
|
||||
dnd-drop="dropCollection(event, index, item)"
|
||||
dnd-dragover="dragoverCollection(event, index)">
|
||||
<a href="#/collections/{{ collection.id }}" class="sprite">
|
||||
<span class="date" ng-if="collection.id=='today'"><?php p($_['DOM']); ?></span>
|
||||
<span class="title">{{ collection.displayname }}</span>
|
||||
</a>
|
||||
<div class="app-navigation-entry-utils">
|
||||
<ul>
|
||||
<li class="app-navigation-entry-utils-counter">{{ getCollectionString(collection.id) | counterFormatter }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li id="list_{{ calendar.uri }}"
|
||||
class="list with-menu handler editing"
|
||||
calendarID="{{calendar.uri}}"
|
||||
ng-repeat="calendar in calendars"
|
||||
ng-class="{ active: calendar.uri==route.calendarID, edit:route.listparameter == 'name' && route.calendarID == calendar.uri,
|
||||
caldav: route.listparameter == 'caldav' && route.calendarID == calendar.uri}"
|
||||
dnd-list="draggedTasks"
|
||||
dnd-drop="dropList(event, index, item)"
|
||||
dnd-dragover="dragoverList(event, index)">
|
||||
<div class="app-navigation-entry-bullet" style="background-color: {{ calendar.color }};"></div>
|
||||
<a href="#/calendars/{{ calendar.uri }}" ng-dblclick="startRename(calendar)">
|
||||
<span class="title">{{ calendar.displayname }}</span>
|
||||
</a>
|
||||
<div class="app-navigation-entry-utils">
|
||||
<ul>
|
||||
<li class="app-navigation-entry-utils-counter">{{ getListCount(calendar.uri,'all') | counterFormatter }}</li>
|
||||
<li class="app-navigation-entry-utils-menu-button" ng-show="calendar.writable"><button></button></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="app-navigation-entry-menu" ng-show="calendar.writable">
|
||||
<ul>
|
||||
<li>
|
||||
<a ng-click="startEdit($event, calendar)">
|
||||
<span class="icon-rename"></span>
|
||||
<span><?php p($l->t('Edit')); ?></span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a ng-click="showCalDAVUrl($event, calendar)">
|
||||
<span class="icon-public"></span>
|
||||
<span><?php p($l->t('Link')); ?></span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{calendar.exportUrl}}" download="{{calendar.uri}}.ics">
|
||||
<span class="icon-download"></span>
|
||||
<span><?php p($l->t('Download')); ?></span>
|
||||
</a>
|
||||
</li>
|
||||
<li confirmation="delete(calendar)" confirmation-message="deleteMessage(calendar)">
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="app-navigation-entry-edit name" ng-class="{error: nameError}">
|
||||
<form>
|
||||
<input ng-model="calendar.displayname"
|
||||
class="edit hasTooltip"
|
||||
type="text"
|
||||
ng-keyup="checkEdit($event,calendar)"
|
||||
autofocus-on-insert>
|
||||
<input type="cancel"
|
||||
value=""
|
||||
class="action icon-close"
|
||||
ng-click="cancelEdit(calendar)"
|
||||
title="<?php p($l->t('Cancel')); ?>">
|
||||
<input type="submit"
|
||||
value=""
|
||||
class="action icon-checkmark"
|
||||
ng-click="saveEdit(calendar)"
|
||||
title="<?php p($l->t('Save')); ?>">
|
||||
</form>
|
||||
<colorpicker class="colorpicker"
|
||||
selected="calendar.color">
|
||||
</colorpicker>
|
||||
</div>
|
||||
<div class="app-navigation-entry-edit caldav">
|
||||
<form>
|
||||
<input class="caldav"
|
||||
ng-value="calendar.caldav"
|
||||
readonly
|
||||
type="text"/>
|
||||
<input type="cancel"
|
||||
value=""
|
||||
class="action icon-close"
|
||||
ng-click="hideCalDAVUrl()"
|
||||
title="<?php p($l->t('Cancel')); ?>">
|
||||
</form>
|
||||
</div>
|
||||
</li>
|
||||
<li class="newList handler icon-add reactive editing" ng-class="{edit: status.addingList}">
|
||||
<a class="addlist icon sprite"
|
||||
ng-click="startCreate($event)"
|
||||
oc-click-focus="{selector: '#newList', timeout: 0}">
|
||||
<span class="title"><?php p($l->t('Add List...')); ?></span>
|
||||
</a>
|
||||
<div class="app-navigation-entry-edit name" ng-class="{error: nameError}">
|
||||
<form ng-disabled="isAddingList">
|
||||
<input id="newList"
|
||||
ng-model="status.newListName"
|
||||
class="edit hasTooltip"
|
||||
type="text"
|
||||
autofocus-on-insert
|
||||
placeholder="<?php p($l->t('New List')); ?>"
|
||||
ng-keyup="checkNew($event,status.newListName)">
|
||||
<input type="cancel"
|
||||
value=""
|
||||
class="action icon-close"
|
||||
ng-click="cancelCreate()"
|
||||
title="<?php p($l->t('Cancel')); ?>">
|
||||
<input type="submit"
|
||||
value=""
|
||||
class="action icon-checkmark"
|
||||
ng-click="create($event)"
|
||||
title="<?php p($l->t('Save')); ?>">
|
||||
</form>
|
||||
<colorpicker class="colorpicker" selected="color"></colorpicker>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div id="app-settings" ng-controller="SettingsController">
|
||||
<div id="app-settings-header">
|
||||
<button class="settings-button" data-apps-slide-toggle="#app-settings-content">
|
||||
<span><?php p($l->t('Settings')); ?></span>
|
||||
</button>
|
||||
</div>
|
||||
<div id="app-settings-content">
|
||||
<ul>
|
||||
<li>
|
||||
<label for="startOfWeek"><?php p($l->t('Start of week')); ?></label>
|
||||
<select id="startOfWeek"
|
||||
ng-change="setStartOfWeek()"
|
||||
ng-model="settingsmodel.getById('various').startOfWeek"
|
||||
ng-options="startOfWeekOption.id as startOfWeekOption.name for startOfWeekOption in startOfWeekOptions">
|
||||
</select>
|
||||
</li>
|
||||
<li class="headline">
|
||||
<?php p($l->t('Visibility of Smart Collections')); ?>
|
||||
</li>
|
||||
<li ng-repeat="collection in collections">
|
||||
<div class="label-container">
|
||||
<span class="icon {{ collection.icon }}">
|
||||
<text ng-show="collection.id=='today'"><?php p($_['DOM']); ?></text>
|
||||
</span>
|
||||
<label for="visibilityCollection-{{collection.id}}" class="title">{{ collection.displayname }}</label>
|
||||
</div>
|
||||
<select id="visibilityCollection-{{collection.id}}"
|
||||
ng-change="setVisibility(collection.id)"
|
||||
ng-model="collection.show"
|
||||
ng-options="collectionOption.id as collectionOption.name for collectionOption in collectionOptions">
|
||||
</select>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="app-content"
|
||||
ng-controller="TasksController"
|
||||
ng-class="{'with-app-sidebar':route.taskID}">
|
||||
<div class="content-wrapper">
|
||||
<div id="add-task"
|
||||
class="add-task handler"
|
||||
ng-show="showInput()"
|
||||
ng-class="{'focus':status.focusTaskInput}">
|
||||
<form ng-submit="addTask(status.taskName)" name="addTaskForm">
|
||||
<input id="target"
|
||||
ng-disabled="isAddingTask"
|
||||
ng-click="focusTaskInput()"
|
||||
class="transparent"
|
||||
placeholder="{{ getAddString() }}"
|
||||
ng-model="status.taskName"
|
||||
ng-keydown="checkTaskInput($event)"/>
|
||||
</form>
|
||||
</div>
|
||||
<div class="app-navigation-entry-utils">
|
||||
<div class="app-navigation-entry-utils-menu-button" title="<?php p($l->t('Change sort order')); ?>">
|
||||
<button class="sortorder-dropdown-button">
|
||||
<span class="icon" ng-class="getSortOrderIcon()"></span>
|
||||
<span class="icon sort-indicator" ng-class="{'icon-sort-up': settingsmodel.getById('various').sortDirection, 'icon-sort-down': !settingsmodel.getById('various').sortDirection}"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-navigation-entry-menu bubble sortorder-dropdown">
|
||||
<ul>
|
||||
<li ng-click="setSortOrder($event, 'default')" ng-class="{active: settingsmodel.getById('various').sortOrder == 'default'}" class="handler">
|
||||
<a>
|
||||
<span class="icon icon-list"></span>
|
||||
<span class="label"><?php p($l->t('Default')); ?></span>
|
||||
<span class="icon sort-indicator" ng-class="{'icon-sort-up': settingsmodel.getById('various').sortDirection, 'icon-sort-down': !settingsmodel.getById('various').sortDirection}"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li ng-click="setSortOrder($event, 'due')" ng-class="{active: settingsmodel.getById('various').sortOrder == 'due'}">
|
||||
<a>
|
||||
<span class="icon icon-calendar"></span>
|
||||
<span class="label"><?php p($l->t('Due date')); ?></span>
|
||||
<span class="icon sort-indicator" ng-class="{'icon-sort-up': settingsmodel.getById('various').sortDirection, 'icon-sort-down': !settingsmodel.getById('various').sortDirection}"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li ng-click="setSortOrder($event, 'start')" ng-class="{active: settingsmodel.getById('various').sortOrder == 'start'}">
|
||||
<a>
|
||||
<span class="icon icon-calendar"></span>
|
||||
<span class="label"><?php p($l->t('Start date')); ?></span>
|
||||
<span class="icon sort-indicator" ng-class="{'icon-sort-up': settingsmodel.getById('various').sortDirection, 'icon-sort-down': !settingsmodel.getById('various').sortDirection}"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li ng-click="setSortOrder($event, 'priority')" ng-class="{active: settingsmodel.getById('various').sortOrder == 'priority'}">
|
||||
<a>
|
||||
<span class="icon icon-task-star"></span>
|
||||
<span class="label"><?php p($l->t('Priority')); ?></span>
|
||||
<span class="icon sort-indicator" ng-class="{'icon-sort-up': settingsmodel.getById('various').sortDirection, 'icon-sort-down': !settingsmodel.getById('various').sortDirection}"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li ng-click="setSortOrder($event, 'alphabetically')" ng-class="{active: settingsmodel.getById('various').sortOrder == 'alphabetically'}">
|
||||
<a>
|
||||
<span class="icon icon-alphabetically"></span>
|
||||
<span class="label"><?php p($l->t('Alphabetically')); ?></span>
|
||||
<span class="icon sort-indicator" ng-class="{'icon-sort-up': settingsmodel.getById('various').sortDirection, 'icon-sort-down': !settingsmodel.getById('various').sortDirection}"></span>
|
||||
</a>
|
||||
</li>
|
||||
<!-- <li ng-click="setSortOrder($event, 'manual')" ng-class="{active: settingsmodel.getById('various').sortOrder == 'manual'}">
|
||||
<a>
|
||||
<span class="icon icon-manual"></span>
|
||||
<span class="label"><?php p($l->t('Manually')); ?></span>
|
||||
<span class="icon sort-indicator" ng-class="{'icon-sort-up': settingsmodel.getById('various').sortDirection, 'icon-sort-down': !settingsmodel.getById('various').sortDirection}"></span>
|
||||
</a>
|
||||
</li> -->
|
||||
</ul>
|
||||
</div>
|
||||
<div class="task-list">
|
||||
<?php print_unescaped($this->inc('part.tasklist')); ?>
|
||||
<?php print_unescaped($this->inc('part.collectionall')); ?>
|
||||
<?php print_unescaped($this->inc('part.collectionweek')); ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="app-sidebar" ng-class="{'disappear':!route.taskID}">
|
||||
<?php print_unescaped($this->inc('part.details')); ?>
|
||||
</div>
|
||||
<script type="text/ng-template" id="part.taskbody">
|
||||
<?php print_unescaped($this->inc('part.taskbody')); ?>
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,31 +0,0 @@
|
|||
<!-- <div ng-switch-when="starred || completed || all || today || current"> -->
|
||||
<div ng-if="route.collectionID == 'starred' || route.collectionID == 'completed' || route.collectionID == 'all' || route.collectionID == 'today' || route.collectionID == 'current'">
|
||||
<div ng-repeat="calendar in calendars | filter:filterLists()" class="grouped-tasks ui-droppable" rel="{{ calendar.uri }}">
|
||||
<h2 class="heading">
|
||||
<text>{{ calendar.displayname }}</text>
|
||||
</h2>
|
||||
<ol class="tasks"
|
||||
calendarID="{{calendar.uri}}"
|
||||
collectionID="{{route.collectionID}}"
|
||||
type="list"
|
||||
dnd-list="draggedTasks"
|
||||
dnd-drop="dropAsRootTask(event, item, index)"
|
||||
dnd-dragover="dragover(event, index)">
|
||||
<li class="task-item ui-draggable handler"
|
||||
taskID="{{task.uri}}"
|
||||
ng-animate="'animate'"
|
||||
ng-repeat="task in filtered = filteredTasks() | filter:hasNoParent(task) | filter:filterTasks(task,calendar.uri) | filter:filterTasks(task,route.collectionID) | orderBy:getSortOrder():settingsmodel.getById('various').sortDirection"
|
||||
ng-click="openDetails(task.uri,$event)"
|
||||
ng-class="{done: task.completed}"
|
||||
dnd-draggable="task"
|
||||
dnd-dragstart="dragStart(event)"
|
||||
dnd-dragend="dragEnd(event)"
|
||||
dnd-effect-allowed="{{ allow(task) }}">
|
||||
<?php print_unescaped($this->inc('part.taskbody')); ?>
|
||||
</li>
|
||||
</ol>
|
||||
<div class="loadmore handler" ng-hide="loadedCompleted(calendar.uri) || route.collectionID != 'completed'">
|
||||
<span ng-click="getCompletedTasks(calendar.uri)"> <?php p($l->t('Load remaining completed tasks.')); ?> </span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
<div ng-if="route.collectionID=='week'">
|
||||
<div ng-repeat="day in days | filter:dayHasEntry(day)" class="grouped-tasks ui-droppable">
|
||||
<h2 class="heading">
|
||||
<text>{{ day | day }}</text>
|
||||
</h2>
|
||||
<ol class="tasks"
|
||||
listID=""
|
||||
collectionID="{{route.collectionID}}"
|
||||
type="list"
|
||||
dnd-list="draggedTasks"
|
||||
dnd-drop="dropAsRootTask(event, item, index)"
|
||||
dnd-dragover="dragover(event, index)">
|
||||
<li class="task-item ui-draggable handler"
|
||||
taskID="{{task.uri}}"
|
||||
ng-animate="'animate'"
|
||||
ng-repeat="task in filtered = filteredTasks() | filter:taskAtDay(task,day) | filter:hasNoParent(task) | filter:{'completed':'false'} | orderBy:getSortOrder():settingsmodel.getById('various').sortDirection"
|
||||
ng-click="openDetails(task.uri,$event)"
|
||||
ng-class="{done: task.completed}"
|
||||
dnd-draggable="task"
|
||||
dnd-dragstart="dragStart(event)"
|
||||
dnd-dragend="dragEnd(event)"
|
||||
dnd-effect-allowed="{{ allow(task) }}">
|
||||
<?php print_unescaped($this->inc('part.taskbody')); ?>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,238 +0,0 @@
|
|||
<div ng-controller="DetailsController"
|
||||
ng-click="endEdit($event)"
|
||||
class="content-wrapper handler">
|
||||
<div class="flex-container"
|
||||
ng-show="TaskState()=='found'"
|
||||
ng-class="{'disabled': !task.calendar.writable}">
|
||||
<div class="title" ng-class="{'editing':route.parameter=='name'}">
|
||||
<a class="checkbox reactive"
|
||||
ng-click="toggleCompleted(task)"
|
||||
role="checkbox"
|
||||
aria-checked="{{task.completed}}"
|
||||
aria-label="<?php p($l->t('Task is completed')); ?>">
|
||||
<span class="icon detail-checkbox" ng-class="{'icon-checkmark':task.completed, 'disabled': !task.calendar.writable}"></span>
|
||||
</a>
|
||||
<a class="star reactive" ng-click="toggleStarred(task)">
|
||||
<span class="icon icon-task-star"
|
||||
ng-class="{'icon-task-star-high':task.priority>5,'icon-task-star-medium':task.priority==5,'icon-task-star-low':task.priority > 0 && task.priority < 5, 'disabled': !task.calendar.writable}"></span>
|
||||
</a>
|
||||
<div class="title-text handler"
|
||||
ng-class="{'strike-through':task.completed}"
|
||||
ng-click="editName($event, task)"
|
||||
oc-click-focus="{selector: '#editName', timeout: 0}"
|
||||
ng-bind-html="task.summary | linky:'_blank':{rel: 'nofollow'}">
|
||||
</div>
|
||||
<div class="expandable-container handler">
|
||||
<div class="expandingArea active">
|
||||
<pre><span>{{ task.summary }}</span><br /></pre>
|
||||
<textarea id="editName"
|
||||
maxlength="200"
|
||||
ng-model="task.summary"
|
||||
ng-keydown="endName($event)"
|
||||
ng-change="triggerUpdate(task)">
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="body">
|
||||
<ul class="sections">
|
||||
<li class="section detail-start handler"
|
||||
ng-class="{'date':isDue(task.start), 'editing':route.parameter=='startdate', 'high':isOverDue(task.start)}"
|
||||
ng-click="editStart($event, task)">
|
||||
<div>
|
||||
<span class="icon icon-calendar" ng-class="{'icon-calendar-due':isDue(task.start),
|
||||
'icon-calendar-overdue':isOverDue(task.start)}"></span>
|
||||
<span class="section-title">
|
||||
<text>{{ task.start | startDetails }}</text>
|
||||
</span>
|
||||
<div class="section-edit">
|
||||
<input class="datepicker-input medium"
|
||||
type="text"
|
||||
key-value=""
|
||||
placeholder="dd.mm.yyyy"
|
||||
value="{{ task.start | dateTaskList }}"
|
||||
datepicker="start">
|
||||
<input class="timepicker-input medium handler"
|
||||
ng-hide="task.allDay"
|
||||
type="text"
|
||||
key-value=""
|
||||
placeholder="hh:mm"
|
||||
value="{{ task.start | timeTaskList }}"
|
||||
timepicker="start">
|
||||
</div>
|
||||
</div>
|
||||
<div class="utils">
|
||||
<a>
|
||||
<span class="icon detail-save icon-checkmark-color handler end-edit reactive"></span>
|
||||
</a>
|
||||
<a class="handler end-edit" ng-click="deleteStartDate(task)">
|
||||
<span class="icon icon-trash reactive"></span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="section detail-date handler"
|
||||
ng-class="{'date':isDue(task.due), 'editing':route.parameter=='duedate', 'high':isOverDue(task.due)}"
|
||||
ng-click="editDueDate($event, task)">
|
||||
<div>
|
||||
<span class="icon icon-calendar" ng-class="{'icon-calendar-due':isDue(task.due), 'icon-calendar-overdue':isOverDue(task.due)}"></span>
|
||||
<span class="section-title">
|
||||
<text>{{ task.due | dateDetails }}</text>
|
||||
</span>
|
||||
<div class="section-edit">
|
||||
<input class="datepicker-input medium"
|
||||
type="text"
|
||||
key-value=""
|
||||
placeholder="dd.mm.yyyy"
|
||||
value="{{ task.due | dateTaskList }}"
|
||||
datepicker="due">
|
||||
<input class="timepicker-input medium"
|
||||
ng-hide="task.allDay"
|
||||
type="text"
|
||||
key-value=""
|
||||
placeholder="hh:mm"
|
||||
value="{{ task.due | timeTaskList }}"
|
||||
timepicker="due">
|
||||
</div>
|
||||
</div>
|
||||
<div class="utils">
|
||||
<a>
|
||||
<span class="icon detail-save icon-checkmark-color handler end-edit reactive"></span>
|
||||
</a>
|
||||
<a class="handler end-edit" ng-click="deleteDueDate(task)">
|
||||
<span class="icon icon-trash reactive"></span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="section detail-all-day handler reactive"
|
||||
ng-click="toggleAllDay(task)"
|
||||
ng-if="isAllDayPossible(task)"
|
||||
role="checkbox"
|
||||
aria-checked="{{task.allDay}}">
|
||||
<div>
|
||||
<span class="icon detail-checkbox" ng-class="{'icon-checkmark': task.allDay, 'disabled': !task.calendar.writable}"></span>
|
||||
<span class="section-title">
|
||||
<text><?php p($l->t('All day')); ?></text>
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="section detail-priority handler"
|
||||
ng-class="{'editing':route.parameter=='priority','high':task.priority>5,'medium':task.priority==5,'low':task.priority > 0 && task.priority < 5, 'date':task.priority>0}"
|
||||
ng-click="editPriority($event, task)">
|
||||
<div>
|
||||
<span class="icon icon-task-star"
|
||||
ng-class="{'icon-task-star-high':task.priority>5,'icon-task-star-medium':task.priority==5,'icon-task-star-low':task.priority > 0 && task.priority < 5}"></span>
|
||||
<span class="section-title">
|
||||
<text>{{ task.priority | priorityDetails}}</text>
|
||||
</span>
|
||||
<div class="section-edit">
|
||||
<input class="priority-input"
|
||||
type="text"
|
||||
ng-model="task.priority"
|
||||
ng-change="triggerUpdate(task)">
|
||||
<input type="range"
|
||||
ng-model="task.priority"
|
||||
min="0"
|
||||
max="9"
|
||||
step="1"
|
||||
ng-change="triggerUpdate(task)">
|
||||
</div>
|
||||
</div>
|
||||
<div class="utils">
|
||||
<a>
|
||||
<span class="icon detail-save icon-checkmark-color handler end-edit reactive"></span>
|
||||
</a>
|
||||
<a class="handler end-edit" ng-click="deletePriority(task)">
|
||||
<span class="icon icon-trash reactive"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="section detail-complete handler"
|
||||
ng-class="{'editing':route.parameter=='percent', 'date':task.complete>0}"
|
||||
ng-click="editPercent($event, task)">
|
||||
<div>
|
||||
<span class="icon icon-percent" ng-class="{'icon-percent-active':task.complete>0}"></span>
|
||||
<span class="section-title">
|
||||
<text>{{ task.complete | percentDetails}}</text>
|
||||
</span>
|
||||
<div class="section-edit">
|
||||
<input class="percent-input"
|
||||
type="text"
|
||||
ng-model="task.complete"
|
||||
ng-change="setPercentComplete(task, task.complete)">
|
||||
<input type="range"
|
||||
ng-model="task.complete"
|
||||
min="0"
|
||||
max="100"
|
||||
step="1"
|
||||
ng-change="setPercentComplete(task, task.complete)">
|
||||
</div>
|
||||
</div>
|
||||
<div class="utils">
|
||||
<a>
|
||||
<span class="icon detail-save icon-checkmark-color handler end-edit reactive"></span>
|
||||
</a>
|
||||
<a class="handler end-edit" ng-click="deletePercent(task)">
|
||||
<span class="icon icon-trash reactive"></span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="section detail-categories" ng-class="{'active':task.cats.length>0}">
|
||||
<div>
|
||||
<span class="icon icon-tag detail-categories" ng-class="{'icon-tag-active':task.cats.length>0}"></span>
|
||||
<!-- Edit line 1080 to show placeholder -->
|
||||
<div class="detail-categories-container">
|
||||
<ui-select
|
||||
multiple
|
||||
tagging
|
||||
tagging-label="<?php p($l->t('(New category)')); ?>"
|
||||
ng-model="task.cats"
|
||||
theme="select2"
|
||||
ng-disabled="!task.calendar.writable"
|
||||
style="width: 100%;"
|
||||
on-remove="removeCategory($item, $model)"
|
||||
on-select="addCategory($item, $model)">
|
||||
<ui-select-match placeholder="<?php p($l->t('Select categories...')); ?>">{{$item}}</ui-select-match>
|
||||
<ui-select-choices repeat="category in settingsmodel.getById('various').categories | filter:$select.search">
|
||||
{{category}}
|
||||
</ui-select-choices>
|
||||
</ui-select>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="section detail-note">
|
||||
<div class="note">
|
||||
<div class="note-body selectable handler"
|
||||
ng-click="editNote($event, task)"
|
||||
oc-click-focus="{selector: '.expandingArea textarea', timeout: 0}">
|
||||
<div class="content-fakeable" ng-class="{'editing':route.parameter=='note'}">
|
||||
<div class="display-view" ng-bind-html="task.note | linky:'_blank':{rel: 'nofollow'}"></div>
|
||||
<div class="edit-view">
|
||||
<div class="expandingArea active">
|
||||
<pre><span>{{ task.note }}</span><br /><br /></pre>
|
||||
<textarea ng-model="task.note" ng-change="triggerUpdate(task)"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<a class="handler left close-all reactive"
|
||||
ng-click="deleteTask(task)"
|
||||
ng-show="task.calendar.writable">
|
||||
<span class="icon icon-trash"></span>
|
||||
</a>
|
||||
<a class="handler right close-all reactive">
|
||||
<span class="icon icon-hide"></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div ng-show="TaskState()=='loading'" class="notice">
|
||||
<?php p($l->t('Loading the task...')); ?>
|
||||
<div class="loading" style="height: 50px;"></div>
|
||||
</div>
|
||||
<div ng-show="TaskState()==null" class="notice">
|
||||
<?php p($l->t('Task not found!')); ?>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,87 +0,0 @@
|
|||
<div class="task-body"
|
||||
type="task"
|
||||
taskID="{{ task.uri }}"
|
||||
ng-class="{active: route.taskID==task.uri, subtasks: hasSubtasks(task), completedsubtasks: hasCompletedSubtasks(task), subtaskshidden: task.hideSubtasks, attachment: task.note!=''}">
|
||||
|
||||
<div class="percentbar" ng-if="task.complete > 0 ">
|
||||
<div class="percentdone"
|
||||
style="width:{{ task.complete }}%; background-color:{{ task.calendar.color }};"
|
||||
aria-label="{{ task.complete | percentDetails}}">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a class="task-checkbox handler"
|
||||
name="toggleCompleted"
|
||||
ng-click="toggleCompleted(task)"
|
||||
role="checkbox"
|
||||
aria-checked="{{task.completed}}"
|
||||
aria-label="<?php p($l->t('Task is completed')); ?>">
|
||||
<span class="icon task-checkbox reactive" ng-class="{'icon-checkmark': task.completed}"></span>
|
||||
</a>
|
||||
<a class="icon task-separator"></a>
|
||||
<a class="task-star handler" ng-click="toggleStarred(task)">
|
||||
<span class="icon icon-task-star right large reactive"ng-class="{'icon-task-star-high':task.priority > 5, 'icon-task-star-medium':task.priority == 5, 'icon-task-star-low':task.priority > 0 && task.priority < 5}">
|
||||
</span>
|
||||
</a>
|
||||
<a class="task-addsubtask handler add-subtask"
|
||||
ng-show="task.calendar.writable"
|
||||
ng-click="showSubtaskInput(task.uid)"
|
||||
oc-click-focus="{selector: '.add-subtask input', timeout: 0}">
|
||||
<span class="icon icon-add right large reactive" title="<?php p($l->t('add a subtask to')); ?> {{ task.summary }}"></span>
|
||||
</a>
|
||||
<a class="handler" ng-click="toggleSubtasks(task)">
|
||||
<span class="icon right large subtasks reactive"
|
||||
ng-class="task.hideSubtasks ? 'icon-subtasks-hidden' : 'icon-subtasks-visible'"
|
||||
title="<?php p($l->t('Toggle subtasks')); ?>">
|
||||
</span>
|
||||
</a>
|
||||
<a class="handler" ng-click="toggleCompletedSubtasks(task)">
|
||||
<span class="icon icon-toggle right large toggle-completed-subtasks reactive"
|
||||
ng-class="{'active': !task.hideCompletedSubtasks}"
|
||||
title="<?php p($l->t('Toggle completed subtasks')); ?>">
|
||||
</span>
|
||||
</a>
|
||||
<a>
|
||||
<span class="icon icon-note right large"></span>
|
||||
</a>
|
||||
<a class="duedate" ng-class="{overdue: TasksModel.overdue(task.due)}">{{ task.due | dateTaskList }}</a>
|
||||
<a ng-show="route.collectionID=='week'" class="listname" >{{ task.calendar.displayname }}</a>
|
||||
<div class="title-wrapper">
|
||||
<span class="title" ng-bind-html="task.summary | linky:'_blank':{rel: 'nofollow'}"></span>
|
||||
<span class="categories-list">
|
||||
<ul>
|
||||
<li ng-repeat="category in task.categories"><span>{{ category }}</span></li>
|
||||
</ul>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="subtasks-container"
|
||||
ng-class="{subtaskshidden: hideSubtasks(task)}">
|
||||
<ol dnd-list="draggedTasks"
|
||||
calendarID="{{task.calendar.uri}}"
|
||||
dnd-drop="dropAsSubtask(event, item, index)"
|
||||
dnd-dragover="dragover(event, index)">
|
||||
<li class="task-item ui-draggable handler add-subtask"
|
||||
ng-show="status.addSubtaskTo == task.uid">
|
||||
<form ng-submit="addTask(status.subtaskName,task.uid,task.calendar,task)" name="addTaskForm">
|
||||
<input class="transparent"
|
||||
placeholder="{{ getSubAddString(task.summary) }}"
|
||||
ng-disabled="isAddingTask"
|
||||
ng-click="focusInput()"
|
||||
ng-model="status.subtaskName"
|
||||
ng-keydown="checkTaskInput($event)"/>
|
||||
</form>
|
||||
</li>
|
||||
<li taskID="{{ task.uri }}"
|
||||
class="task-item ui-draggable handler subtask"
|
||||
ng-repeat="task in getSubTasks(filtered,task) | orderBy:getSortOrder():settingsmodel.getById('various').sortDirection"
|
||||
ng-click="openDetails(task.uri,$event)"
|
||||
ng-class="{done: task.completed}"
|
||||
ng-include="'part.taskbody'"
|
||||
dnd-draggable="task"
|
||||
dnd-dragstart="dragStart(event)"
|
||||
dnd-dragend="dragEnd(event)"
|
||||
dnd-effect-allowed="{{ allow(task) }}">
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
<!-- <div ng-switch-default> -->
|
||||
<div ng-if="route.collectionID != 'week' && route.collectionID != 'starred' && route.collectionID != 'completed' && route.collectionID != 'all' && route.collectionID != 'today' && route.collectionID != 'current'">
|
||||
<div class="grouped-tasks"
|
||||
ng-class="{'completed-hidden':!settingsmodel.getById('various').showHidden}">
|
||||
<ol class="tasks"
|
||||
calendarID="{{route.calendarID}}"
|
||||
collectionID="uncompleted"
|
||||
type="list"
|
||||
dnd-list="draggedTasks"
|
||||
dnd-drop="dropAsRootTask(event, item, index)"
|
||||
dnd-dragover="dragover(event, index)">
|
||||
<li class="task-item ui-draggable handler"
|
||||
taskID="{{ task.uri }}"
|
||||
ng-repeat="task in filtered = filteredTasks() | filter:hasNoParent(task) | filter:filterTasks(task,route.calendarID) | filter:{'completed':'false'} | orderBy:getSortOrder():settingsmodel.getById('various').sortDirection"
|
||||
ng-click="openDetails(task.uri,$event)"
|
||||
ng-class="{done: task.completed}"
|
||||
dnd-draggable="task"
|
||||
dnd-dragstart="dragStart(event)"
|
||||
dnd-dragend="dragEnd(event)"
|
||||
dnd-effect-allowed="{{ allow(task) }}">
|
||||
<?php print_unescaped($this->inc('part.taskbody')); ?>
|
||||
</li>
|
||||
</ol>
|
||||
<h2 class="heading-hiddentasks icon-triangle-s handler" ng-show="getCount(route.calendarID,'completed')" ng-click="toggleHidden()">
|
||||
{{ getCountString(route.calendarID,'completed') }}
|
||||
</h2>
|
||||
<ol class="completed-tasks"
|
||||
calendarID="{{route.calendarID}}"
|
||||
collectionID="completed"
|
||||
type="list"
|
||||
dnd-list="draggedTasks"
|
||||
dnd-drop="dropAsRootTask(event, item, index)"
|
||||
dnd-dragover="dragover(event, index)">
|
||||
<li class="task-item handler"
|
||||
taskID="{{ task.uri }}"
|
||||
ng-repeat="task in filtered = filteredTasks() | filter:hasNoParent(task) | filter:filterTasks(task,route.calendarID) | filter:{'completed':true} | orderBy:'completed_date':true"
|
||||
ng-click="openDetails(task.uri,$event)"
|
||||
ng-class="{done: task.completed}"
|
||||
dnd-draggable="task"
|
||||
dnd-dragstart="dragStart(event)"
|
||||
dnd-dragend="dragEnd(event)"
|
||||
dnd-effect-allowed="{{ allow(task) }}">
|
||||
<?php print_unescaped($this->inc('part.taskbody')); ?>
|
||||
</li>
|
||||
</ol>
|
||||
<div class="loadmore handler" ng-hide="loadedCompleted(route.calendarID)">
|
||||
<span ng-click="getCompletedTasks(route.calendarID)"><?php p($l->t('Load remaining completed tasks.')); ?></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Reference in a new issue