Table View for tasks #76
|
@ -1,6 +1,14 @@
|
|||
<template>
|
||||
<div class="table-view">
|
||||
<div class="card">
|
||||
<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>
|
||||
|
@ -17,6 +25,8 @@
|
|||
<fancycheckbox v-model="activeColumns.createdBy">Created By</fancycheckbox>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
|
||||
<table class="table is-hoverable is-fullwidth">
|
||||
<thead>
|
||||
|
@ -38,15 +48,21 @@
|
|||
</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.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.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.labels">
|
||||
<labels :labels="t.labels"/>
|
||||
</td>
|
||||
<td v-if="activeColumns.assignees">
|
||||
<user
|
||||
:user="a"
|
||||
|
@ -111,6 +127,7 @@
|
|||
],
|
||||
data() {
|
||||
return {
|
||||
showActiveColumnsFilter: false,
|
||||
activeColumns: {
|
||||
id: true,
|
||||
done: true,
|
||||
|
|
|
@ -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)
|
||||
|
||||
|
|
|
@ -28,6 +28,7 @@
|
|||
span {
|
||||
font-size: 0.8em;
|
||||
vertical-align: top;
|
||||
padding-left: .5em;
|
||||
}
|
||||
|
||||
svg {
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user