2019-04-29 21:41:39 +00:00
< template >
2020-04-01 20:13:57 +00:00
< div class = "loader-container" : class = "{ 'is-loading': taskCollectionService.loading}" >
2020-01-31 10:05:53 +00:00
< div class = "search" >
< div class = "field has-addons" : class = "{ 'hidden': !showTaskSearch }" >
< div class = "control has-icons-left has-icons-right" >
< input
class = "input"
type = "text"
placeholder = "Search"
v - focus
v - model = "searchTerm"
@ keyup . enter = "searchTasks"
@ blur = "hideSearchBar()" / >
< span class = "icon is-left" >
< icon icon = "search" / >
< / span >
< / div >
< div class = "control" >
< button
class = "button noshadow is-primary"
@ click = "searchTasks"
: class = "{'is-loading': taskCollectionService.loading}"
: disabled = "searchTerm === ''" >
Search
< / button >
< / div >
< / div >
< button class = "button" @ click = "showTaskSearch = !showTaskSearch" v-if ="!showTaskSearch" >
< span class = "icon" >
< icon icon = "search" / >
< / span >
< / button >
< / div >
2020-03-04 19:27:27 +00:00
2020-04-12 21:54:46 +00:00
< div class = "field task-add" v-if ="!list.isArchived" >
2020-03-04 19:27:27 +00:00
< div class = "field is-grouped" >
2019-04-29 21:41:39 +00:00
< p class = "control has-icons-left is-expanded" : class = "{ 'is-loading': taskService.loading}" >
2020-03-04 19:27:27 +00:00
< input v -focus class = "input" : class = "{ 'disabled': taskService.loading}" v -model = " newTaskText " type = "text" placeholder = "Add a new task..." @keyup.enter ="addTask()" / >
2019-04-29 21:41:39 +00:00
< span class = "icon is-small is-left" >
< icon icon = "tasks" / >
< / span >
< / p >
< p class = "control" >
2020-03-04 19:27:27 +00:00
< button class = "button is-success" : disabled = "newTaskText.length < 3" @click ="addTask()" >
< span class = "icon is-small" >
< icon icon = "plus" / >
< / span >
2019-04-29 21:41:39 +00:00
Add
< / button >
< / p >
< / div >
2020-03-04 19:27:27 +00:00
< p class = "help is-danger" v-if ="showError && newTaskText.length < 3" >
Please specify at least three characters .
< / p >
< / div >
2019-04-29 21:41:39 +00:00
< div class = "columns" >
< div class = "column" >
2019-12-03 18:09:12 +00:00
< div class = "tasks" v-if ="tasks && tasks.length > 0" :class="{'short': isTaskEdit}" >
2020-03-23 22:24:14 +00:00
< div class = "task" v-for ="t in tasks" :key="t.id" >
2020-05-09 17:21:17 +00:00
< single -task -in -list :the-task ="t" @taskUpdated ="updateTasks" task -detail -route = " task.detail " / >
2020-04-12 21:54:46 +00:00
< div @click ="editTask(t.id)" class = "icon settings" v-if ="!list.isArchived" >
2019-10-19 19:41:23 +00:00
< icon icon = "pencil-alt" / >
2019-04-29 21:41:39 +00:00
< / div >
< / div >
< / div >
< / div >
< div class = "column is-4" v-if ="isTaskEdit" >
< div class = "card taskedit" >
2019-11-03 12:44:40 +00:00
< header class = "card-header" >
< p class = "card-header-title" >
Edit Task
< / p >
< a class = "card-header-icon" @ click = "isTaskEdit = false" >
< span class = "icon" >
< icon icon = "angle-right" / >
< / span >
< / a >
< / header >
< div class = "card-content" >
< div class = "content" >
< edit -task :task ="taskEditTask" / >
< / div >
< / div >
2019-04-29 21:41:39 +00:00
< / div >
< / div >
< / div >
2019-12-03 18:09:12 +00:00
< nav class = "pagination is-centered" role = "navigation" aria -label = " pagination " v-if ="taskCollectionService.totalPages > 1" >
2020-04-01 20:13:57 +00:00
< router -link class = "pagination-previous" : to = "getRouteForPagination(currentPage - 1)" tag = "button" : disabled = "currentPage === 1" > Previous < / r o u t e r - l i n k >
< router -link class = "pagination-next" : to = "getRouteForPagination(currentPage + 1)" tag = "button" : disabled = "currentPage === taskCollectionService.totalPages" > Next page < / r o u t e r - l i n k >
2019-12-03 18:09:12 +00:00
< ul class = "pagination-list" >
< template v-for ="(p, i) in pages" >
< li :key ="'page'+i" v-if ="p.isEllipsis" > < span class = "pagination-ellipsis" > & hellip ; < / span > < / li >
< li :key ="'page'+i" v-else >
2020-04-01 20:13:57 +00:00
< router -link :to ="getRouteForPagination(p.number)" : class = "{'is-current': p.number === currentPage}" class = "pagination-link" : aria -label = " ' Goto page ' + p.number " > { { p . number } } < / r o u t e r - l i n k >
2019-12-03 18:09:12 +00:00
< / li >
< / template >
< / ul >
< / nav >
2020-04-25 23:11:34 +00:00
<!-- This router view is used to show the task popup while keeping the kanban board itself -- >
< transition name = "modal" >
< router -view / >
< / transition >
2019-04-29 21:41:39 +00:00
< / div >
< / template >
< script >
2020-04-25 23:11:34 +00:00
import TaskService from '../../../services/task'
import EditTask from '../../tasks/edit-task'
import TaskModel from '../../../models/task'
import SingleTaskInList from '../../tasks/reusable/singleTaskInList'
import taskList from '../../tasks/helpers/taskList'
2020-05-22 15:28:26 +00:00
import { saveListView } from '../../../helpers/saveListView'
2019-04-29 21:41:39 +00:00
export default {
2020-04-25 23:11:34 +00:00
name : 'List' ,
2019-04-29 21:41:39 +00:00
data ( ) {
return {
taskService : TaskService ,
2019-11-03 12:44:40 +00:00
list : { } ,
isTaskEdit : false ,
2019-04-29 21:41:39 +00:00
taskEditTask : TaskModel ,
newTaskText : '' ,
2020-01-31 10:05:53 +00:00
2020-03-04 19:27:27 +00:00
showError : false ,
2019-04-29 21:41:39 +00:00
}
} ,
2020-04-01 20:13:57 +00:00
mixins : [
taskList ,
] ,
2019-11-03 12:44:40 +00:00
components : {
2020-03-23 22:24:14 +00:00
SingleTaskInList ,
2019-04-29 21:41:39 +00:00
EditTask ,
2019-11-03 12:44:40 +00:00
} ,
2019-04-29 21:41:39 +00:00
created ( ) {
this . taskService = new TaskService ( )
2020-05-21 09:12:59 +00:00
// Save the current list view to local storage
// We use local storage and not vuex here to make it persistent across reloads.
2020-05-22 15:28:26 +00:00
saveListView ( this . $route . params . listId , this . $route . name )
2019-04-29 21:41:39 +00:00
} ,
methods : {
2019-12-17 22:03:55 +00:00
// This function initializes the tasks page and loads the first page of tasks
2020-03-23 17:39:55 +00:00
initTasks ( page , search = '' ) {
2019-12-17 22:03:55 +00:00
this . taskEditTask = null
this . isTaskEdit = false
2020-03-23 17:39:55 +00:00
this . loadTasks ( page , search )
2019-12-17 22:03:55 +00:00
} ,
2019-04-29 21:41:39 +00:00
addTask ( ) {
2020-03-04 19:27:27 +00:00
if ( this . newTaskText . length < 3 ) {
this . showError = true
return
}
this . showError = false
2020-05-16 10:31:16 +00:00
let task = new TaskModel ( { title : this . newTaskText , listId : this . $route . params . listId } )
2019-04-29 21:41:39 +00:00
this . taskService . create ( task )
. then ( r => {
2019-12-07 16:35:42 +00:00
this . tasks . push ( r )
this . sortTasks ( )
2019-05-21 17:28:52 +00:00
this . newTaskText = ''
2020-01-30 21:47:08 +00:00
this . success ( { message : 'The task was successfully created.' } , this )
2019-04-29 21:41:39 +00:00
} )
. catch ( e => {
2020-01-30 21:47:08 +00:00
this . error ( e , this )
2019-04-29 21:41:39 +00:00
} )
} ,
editTask ( id ) {
// Find the selected task and set it to the current object
2020-04-17 10:19:53 +00:00
let theTask = this . getTaskById ( id ) // Somehow this does not work if we directly assign this to this.taskEditTask
2019-11-03 12:44:40 +00:00
this . taskEditTask = theTask
2019-04-29 21:41:39 +00:00
this . isTaskEdit = true
} ,
2020-04-17 10:19:53 +00:00
getTaskById ( id ) {
2019-12-07 16:35:42 +00:00
for ( const t in this . tasks ) {
if ( this . tasks [ t ] . id === parseInt ( id ) ) {
return this . tasks [ t ]
}
}
return { } // FIXME: This should probably throw something to make it clear to the user noting was found
} ,
2020-03-23 22:24:14 +00:00
updateTasks ( updatedTask ) {
for ( const t in this . tasks ) {
if ( this . tasks [ t ] . id === updatedTask . id ) {
this . $set ( this . tasks , t , updatedTask )
break
}
}
this . sortTasks ( )
} ,
2019-04-29 21:41:39 +00:00
}
}
< / script >