vikunja
/
frontend
Archived
6
39
Fork 49
Code Issues 1 Pull Requests 4 Projects Releases 26 Activity

Table View for tasks #76

Merged
konrad merged 23 commits from feature/table-view into master 2020-04-01 20:13:57 +00:00
Conversation 0 Commits 23 Files Changed 21 +102 -64
4 changed files with 102 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit e30c733367 - Show all commits

145
src/components/tasks/TableView.vue
View File

@ -1,75 +1,91 @@
<template>
<div class="table-view">
<div class="card">
<div class="card-content">
<fancycheckbox v-model="activeColumns.id">#</fancycheckbox>
<fancycheckbox v-model="activeColumns.done">Done</fancycheckbox>
<fancycheckbox v-model="activeColumns.text">Name</fancycheckbox>
<fancycheckbox v-model="activeColumns.priority">Priority</fancycheckbox>
<fancycheckbox v-model="activeColumns.labels">Labels</fancycheckbox>
<fancycheckbox v-model="activeColumns.assignees">Assignees</fancycheckbox>
<fancycheckbox v-model="activeColumns.dueDate">Due Date</fancycheckbox>
<fancycheckbox v-model="activeColumns.startDate">Start Date</fancycheckbox>
<fancycheckbox v-model="activeColumns.endDate">End Date</fancycheckbox>
<fancycheckbox v-model="activeColumns.percentDone">% Done</fancycheckbox>
<fancycheckbox v-model="activeColumns.created">Created</fancycheckbox>
<fancycheckbox v-model="activeColumns.updated">Updated</fancycheckbox>
<fancycheckbox v-model="activeColumns.createdBy">Created By</fancycheckbox>
</div>
<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 v-model="activeColumns.id">#</fancycheckbox>
<fancycheckbox v-model="activeColumns.done">Done</fancycheckbox>
<fancycheckbox v-model="activeColumns.text">Name</fancycheckbox>
<fancycheckbox v-model="activeColumns.priority">Priority</fancycheckbox>
<fancycheckbox v-model="activeColumns.labels">Labels</fancycheckbox>
<fancycheckbox v-model="activeColumns.assignees">Assignees</fancycheckbox>
<fancycheckbox v-model="activeColumns.dueDate">Due Date</fancycheckbox>
<fancycheckbox v-model="activeColumns.startDate">Start Date</fancycheckbox>
<fancycheckbox v-model="activeColumns.endDate">End Date</fancycheckbox>
<fancycheckbox v-model="activeColumns.percentDone">% Done</fancycheckbox>
<fancycheckbox v-model="activeColumns.created">Created</fancycheckbox>
<fancycheckbox v-model="activeColumns.updated">Updated</fancycheckbox>
<fancycheckbox 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">#</th>
<th v-if="activeColumns.done">Done</th>
<th v-if="activeColumns.text">Name</th>
<th v-if="activeColumns.priority">Priority</th>
<th v-if="activeColumns.labels">Labels</th>
<th v-if="activeColumns.assignees">Assignees</th>
<th v-if="activeColumns.dueDate">Due&nbsp;Date</th>
<th v-if="activeColumns.startDate">Start&nbsp;Date</th>
<th v-if="activeColumns.endDate">End&nbsp;Date</th>
<th v-if="activeColumns.percentDone">%&nbsp;Done</th>
<th v-if="activeColumns.created">Created</th>
<th v-if="activeColumns.updated">Updated</th>
<th v-if="activeColumns.createdBy">Created&nbsp;By</th>
</tr>
<tr>
<th v-if="activeColumns.id">#</th>
<th v-if="activeColumns.done">Done</th>
<th v-if="activeColumns.text">Name</th>
<th v-if="activeColumns.priority">Priority</th>
<th v-if="activeColumns.labels">Labels</th>
<th v-if="activeColumns.assignees">Assignees</th>
<th v-if="activeColumns.dueDate">Due&nbsp;Date</th>
<th v-if="activeColumns.startDate">Start&nbsp;Date</th>
<th v-if="activeColumns.endDate">End&nbsp;Date</th>
<th v-if="activeColumns.percentDone">%&nbsp;Done</th>
<th v-if="activeColumns.created">Created</th>
<th v-if="activeColumns.updated">Updated</th>
<th v-if="activeColumns.createdBy">Created&nbsp;By</th>
</tr>
</thead>
<tbody>
<tr v-for="t in tasks" :key="t.id">
<td v-if="activeColumns.id"><router-link :to="{name: 'taskDetailView', 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: 'taskDetailView', 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>
<tr v-for="t in tasks" :key="t.id">
<td v-if="activeColumns.id">
<router-link :to="{name: 'taskDetailView', 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: 'taskDetailView', 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>
@ -111,6 +127,7 @@
],
data() {
return {
showActiveColumnsFilter: false,
activeColumns: {
id: true,
done: true,

2
src/main.js
View File

@ -64,6 +64,7 @@ import { faClock } from '@fortawesome/free-regular-svg-icons'
import { faHistory } from '@fortawesome/free-solid-svg-icons'
import { faSearch } from '@fortawesome/free-solid-svg-icons'
import { faCheckDouble } from '@fortawesome/free-solid-svg-icons'
import { faTh } from '@fortawesome/free-solid-svg-icons'
import { faComments } from '@fortawesome/free-regular-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
@ -104,6 +105,7 @@ library.add(faHistory)
library.add(faSearch)
library.add(faCheckDouble)
library.add(faComments)
library.add(faTh)
Vue.component('icon', FontAwesomeIcon)

1
src/styles/components/base/fancycheckbox.scss
View File

@ -28,6 +28,7 @@
span {
font-size: 0.8em;
vertical-align: top;
padding-left: .5em;
}
svg {

18
src/styles/components/table-view.scss
View File

@ -11,4 +11,22 @@
margin: 0;
}
}
.column-filter {
text-align: right;
width: 100%;
max-width: 180px;
position: absolute;
right: 3em;
margin-top: -80px;
.card {
text-align: left;
margin-top: 1em;
}
.fancycheckbox {
display: block;
}
}
}