konrad
c7845bb9c1
All checks were successful
continuous-integration/drone/push Build is passing
Add error message when trying to create an invalid new task in a bucket Prevent creation of new buckets if the bucket title is empty Disable deleting a bucket if it's the last one Disable dragging tasks when they are being updated Fix transition when opening tasks Send the user to list view by default Show loading spinner when updating multiple tasks Add loading spinner when moving tasks Add loading animation when bucket is loading / updating etc Add bucket title edit Fix creating new buckets Add loading animation Add removing buckets Fix creating a new bucket after tasks were moved Fix warning about labels on tasks Fix labels on tasks not updating after retrieval from api Fix property width Add closing and mobile design Make the task detail popup look good Move list views Move task detail view in a popup Add link to tasks Add saving the new task position after it was moved Fix creating new bucket Fix creating a new task Cleanup Disable user selection for task cards Fix drag placeholder Add dragging style to task Add placeholder + change animation duration More cleanup Cleanup / docs Working of dragging and dropping tasks Adjust markup and styling for new library Change kanban library to something that works Add basic calculation of new positions Don't try to create empty tasks Add indicator if a task is done Add moving tasks between buckets Make empty buckets a little smaller Add gimmick for button description Fix color Fix scrolling bucket layout Add creating a new bucket Add hiding the task input field Co-authored-by: kolaente <k@knt.li> Reviewed-on: #118
234 lines
8.0 KiB
Vue
234 lines
8.0 KiB
Vue
<template>
|
|
<div class="table-view loader-container" :class="{'is-loading': taskCollectionService.loading}">
|
|
<div class="column-filter">
|
|
<button class="button" @click="showActiveColumnsFilter = !showActiveColumnsFilter">
|
|
<span class="icon is-small">
|
|
<icon icon="th"/>
|
|
</span>
|
|
Columns
|
|
</button>
|
|
<transition name="fade">
|
|
<div class="card" v-if="showActiveColumnsFilter">
|
|
<div class="card-content">
|
|
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.id">#</fancycheckbox>
|
|
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.done">Done</fancycheckbox>
|
|
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.text">Name</fancycheckbox>
|
|
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.priority">Priority</fancycheckbox>
|
|
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.labels">Labels</fancycheckbox>
|
|
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.assignees">Assignees</fancycheckbox>
|
|
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.dueDate">Due Date</fancycheckbox>
|
|
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.startDate">Start Date</fancycheckbox>
|
|
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.endDate">End Date</fancycheckbox>
|
|
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.percentDone">% Done</fancycheckbox>
|
|
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.created">Created</fancycheckbox>
|
|
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.updated">Updated</fancycheckbox>
|
|
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.createdBy">Created By</fancycheckbox>
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
</div>
|
|
|
|
<table class="table is-hoverable is-fullwidth">
|
|
<thead>
|
|
<tr>
|
|
<th v-if="activeColumns.id">
|
|
#
|
|
<sort :order="sortBy.id" @click="sort('id')"/>
|
|
</th>
|
|
<th v-if="activeColumns.done">
|
|
Done
|
|
<sort :order="sortBy.done" @click="sort('done')"/>
|
|
</th>
|
|
<th v-if="activeColumns.text">
|
|
Name
|
|
<sort :order="sortBy.text" @click="sort('text')"/>
|
|
</th>
|
|
<th v-if="activeColumns.priority">
|
|
Priority
|
|
<sort :order="sortBy.priority" @click="sort('priority')"/>
|
|
</th>
|
|
<th v-if="activeColumns.labels">
|
|
Labels
|
|
</th>
|
|
<th v-if="activeColumns.assignees">
|
|
Assignees
|
|
</th>
|
|
<th v-if="activeColumns.dueDate">
|
|
Due Date
|
|
<sort :order="sortBy.due_date_unix" @click="sort('due_date_unix')"/>
|
|
</th>
|
|
<th v-if="activeColumns.startDate">
|
|
Start Date
|
|
<sort :order="sortBy.start_date_unix" @click="sort('start_date_unix')"/>
|
|
</th>
|
|
<th v-if="activeColumns.endDate">
|
|
End Date
|
|
<sort :order="sortBy.end_date_unix" @click="sort('end_date_unix')"/>
|
|
</th>
|
|
<th v-if="activeColumns.percentDone">
|
|
% Done
|
|
<sort :order="sortBy.percent_done" @click="sort('percent_done')"/>
|
|
</th>
|
|
<th v-if="activeColumns.created">
|
|
Created
|
|
<sort :order="sortBy.created" @click="sort('created')"/>
|
|
</th>
|
|
<th v-if="activeColumns.updated">
|
|
Updated
|
|
<sort :order="sortBy.updated" @click="sort('updated')"/>
|
|
</th>
|
|
<th v-if="activeColumns.createdBy">
|
|
Created By
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="t in tasks" :key="t.id">
|
|
<td v-if="activeColumns.id">
|
|
<router-link :to="{name: 'task.table.detail', params: { id: t.id }}">{{ t.id }}</router-link>
|
|
</td>
|
|
<td v-if="activeColumns.done">
|
|
<div class="is-done" v-if="t.done">Done</div>
|
|
</td>
|
|
<td v-if="activeColumns.text">
|
|
<router-link :to="{name: 'task.table.detail', params: { id: t.id }}">{{ t.text }}</router-link>
|
|
</td>
|
|
<td v-if="activeColumns.priority">
|
|
<priority-label :priority="t.priority" :show-all="true"/>
|
|
</td>
|
|
<td v-if="activeColumns.labels">
|
|
<labels :labels="t.labels"/>
|
|
</td>
|
|
<td v-if="activeColumns.assignees">
|
|
<user
|
|
:user="a"
|
|
:avatar-size="27"
|
|
:show-username="false"
|
|
:is-inline="true"
|
|
v-for="(a, i) in t.assignees"
|
|
:key="t.id + 'assignee' + a.id + i"
|
|
/>
|
|
</td>
|
|
<date-table-cell :date="t.dueDate" v-if="activeColumns.dueDate"/>
|
|
<date-table-cell :date="t.startDate" v-if="activeColumns.startDate"/>
|
|
<date-table-cell :date="t.endDate" v-if="activeColumns.endDate"/>
|
|
<td v-if="activeColumns.percentDone">{{ t.percentDone }}%</td>
|
|
<date-table-cell :date="t.created" v-if="activeColumns.created"/>
|
|
<date-table-cell :date="t.updated" v-if="activeColumns.updated"/>
|
|
<td v-if="activeColumns.createdBy">
|
|
<user
|
|
:user="t.createdBy"
|
|
:show-username="false"
|
|
:avatar-size="27"/>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<nav class="pagination is-centered" role="navigation" aria-label="pagination" v-if="taskCollectionService.totalPages > 1">
|
|
<router-link class="pagination-previous" :to="getRouteForPagination(currentPage - 1, 'table')" tag="button" :disabled="currentPage === 1">Previous</router-link>
|
|
<router-link class="pagination-next" :to="getRouteForPagination(currentPage + 1, 'table')" tag="button" :disabled="currentPage === taskCollectionService.totalPages">Next page</router-link>
|
|
<ul class="pagination-list">
|
|
<template v-for="(p, i) in pages">
|
|
<li :key="'page'+i" v-if="p.isEllipsis"><span class="pagination-ellipsis">…</span></li>
|
|
<li :key="'page'+i" v-else>
|
|
<router-link :to="getRouteForPagination(p.number, 'table')" :class="{'is-current': p.number === currentPage}" class="pagination-link" :aria-label="'Goto page ' + p.number">{{ p.number }}</router-link>
|
|
</li>
|
|
</template>
|
|
</ul>
|
|
</nav>
|
|
|
|
<!-- This router view is used to show the task popup while keeping the table view itself -->
|
|
<transition name="modal">
|
|
<router-view/>
|
|
</transition>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import taskList from '../../tasks/helpers/taskList'
|
|
import User from '../../global/user'
|
|
import PriorityLabel from '../../tasks/reusable/priorityLabel'
|
|
import Labels from '../../tasks/reusable/labels'
|
|
import DateTableCell from '../../tasks/reusable/date-table-cell'
|
|
import Fancycheckbox from '../../global/fancycheckbox'
|
|
import Sort from '../../tasks/reusable/sort'
|
|
|
|
export default {
|
|
name: 'Table',
|
|
components: {
|
|
Sort,
|
|
Fancycheckbox,
|
|
DateTableCell,
|
|
Labels,
|
|
PriorityLabel,
|
|
User,
|
|
},
|
|
mixins: [
|
|
taskList,
|
|
],
|
|
data() {
|
|
return {
|
|
showActiveColumnsFilter: false,
|
|
activeColumns: {
|
|
id: true,
|
|
done: true,
|
|
text: true,
|
|
priority: false,
|
|
labels: true,
|
|
assignees: true,
|
|
dueDate: true,
|
|
startDate: false,
|
|
endDate: false,
|
|
percentDone: false,
|
|
created: false,
|
|
updated: false,
|
|
createdBy: false,
|
|
},
|
|
sortBy: {
|
|
id: 'desc',
|
|
},
|
|
}
|
|
},
|
|
created() {
|
|
const savedShowColumns = localStorage.getItem('tableViewColumns')
|
|
if (savedShowColumns !== null) {
|
|
this.$set(this, 'activeColumns', JSON.parse(savedShowColumns))
|
|
}
|
|
const savedSortBy = localStorage.getItem('tableViewSortBy')
|
|
if (savedSortBy !== null) {
|
|
this.$set(this, 'sortBy', JSON.parse(savedSortBy))
|
|
}
|
|
|
|
this.initTasks(1)
|
|
},
|
|
methods: {
|
|
initTasks(page, search = '') {
|
|
let params = {sort_by: [], order_by: []}
|
|
Object.keys(this.sortBy).map(s => {
|
|
params.sort_by.push(s)
|
|
params.order_by.push(this.sortBy[s])
|
|
})
|
|
this.loadTasks(page, search, params)
|
|
},
|
|
sort(property) {
|
|
const order = this.sortBy[property]
|
|
if (typeof order === 'undefined' || order === 'none') {
|
|
this.$set(this.sortBy, property, 'desc')
|
|
} else if (order === 'desc') {
|
|
this.$set(this.sortBy, property, 'asc')
|
|
} else {
|
|
this.$delete(this.sortBy, property)
|
|
}
|
|
this.initTasks(this.currentPage, this.searchTerm)
|
|
// Save the order to be able to retrieve them later
|
|
localStorage.setItem('tableViewSortBy', JSON.stringify(this.sortBy))
|
|
},
|
|
saveTaskColumns() {
|
|
localStorage.setItem('tableViewColumns', JSON.stringify(this.activeColumns))
|
|
},
|
|
},
|
|
}
|
|
</script>
|