111 lines
3.0 KiB
Vue
111 lines
3.0 KiB
Vue
<template>
|
|
<div class="table-view">
|
|
<table class="table is-hoverable is-fullwidth">
|
|
<thead>
|
|
<tr>
|
|
<th>#</th>
|
|
<th>Name</th>
|
|
<th>Priority</th>
|
|
<th>Labels</th>
|
|
<th>Assignees</th>
|
|
<th>Due Date</th>
|
|
<th>Start Date</th>
|
|
<th>End Date</th>
|
|
<th>% Done</th>
|
|
<th>Created</th>
|
|
<th>Updated</th>
|
|
<th>Created By</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="t in tasks" :key="t.id">
|
|
<td><router-link :to="{name: 'taskDetailView', params: { id: t.id }}">{{ t.id }}</router-link></td>
|
|
<td><router-link :to="{name: 'taskDetailView', params: { id: t.id }}">{{ t.text }}</router-link></td>
|
|
<td>
|
|
<priority-label :priority="t.priority" :show-all="true"/>
|
|
</td>
|
|
<td><labels :labels="t.labels"/></td>
|
|
<td>
|
|
<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"/>
|
|
<date-table-cell :date="t.startDate"/>
|
|
<date-table-cell :date="t.endDate"/>
|
|
<td>{{ t.percentDone }}%</td>
|
|
<date-table-cell :date="t.created"/>
|
|
<date-table-cell :date="t.updated"/>
|
|
<td>
|
|
<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>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import ListModel from '../../models/list'
|
|
import taskList from './helpers/taskList'
|
|
import User from '../global/user'
|
|
import PriorityLabel from './reusable/priorityLabel'
|
|
import Labels from './reusable/labels'
|
|
import DateTableCell from "./reusable/date-table-cell";
|
|
|
|
export default {
|
|
name: 'TableView',
|
|
components: {
|
|
DateTableCell,
|
|
Labels,
|
|
PriorityLabel,
|
|
User,
|
|
},
|
|
mixins: [
|
|
taskList,
|
|
],
|
|
data() {
|
|
return {
|
|
activeColumns: {
|
|
|
|
}
|
|
}
|
|
},
|
|
props: {
|
|
list: {
|
|
type: ListModel,
|
|
required: true,
|
|
}
|
|
},
|
|
created() {
|
|
this.initTasks(1)
|
|
},
|
|
methods: {
|
|
initTasks(page, search = '') {
|
|
this.loadTasks(page, search)
|
|
},
|
|
},
|
|
}
|
|
</script>
|