106 lines
3.8 KiB
Vue
106 lines
3.8 KiB
Vue
|
<template>
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-lg-3 col-xl-2">
|
||
|
|
<!--div class="card bg-dark text-light mb-2" id="filters">
|
||
|
|
<div class="card-body">
|
||
|
|
<h5 class="card-title text-info">Sort & Filter</h5>
|
||
|
|
<div class="form-group" v-for="(column, index) in columns" :key="index">
|
||
|
|
<label>{{ column }}</label>
|
||
|
|
<div class="input-group">
|
||
|
|
<div class="input-group-prepend">
|
||
|
|
<button
|
||
|
|
:class="[ 'btn', column === sortBy ? 'btn-outline-info' : 'btn-outline-secondary' ]"
|
||
|
|
type="button"
|
||
|
|
@click="toggleSort(column)">
|
||
|
|
<font-awesome-icon :icon="getSortIcon(column)"/>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
class="form-control"
|
||
|
|
placeholder="filter"
|
||
|
|
:value="filters[column]"
|
||
|
|
@input="changeFilter(column, $event.target.value)"
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div-->
|
||
|
|
</div>
|
||
|
|
<div class="col-lg-9 col-xl-8">
|
||
|
|
<div class="w-100"
|
||
|
|
v-for="(group, index) in grouped_items"
|
||
|
|
:key="index">
|
||
|
|
<div v-if="group.length>0" class="card card-list-item bg-dark w-100 mb-3">
|
||
|
|
<div class="card-header" :class="'bg-'+sections[index].color" @click="toggle(index)">
|
||
|
|
<font-awesome-icon icon="angle-right" style="width: 1em;" v-if="collapsed[index]"/>
|
||
|
|
<font-awesome-icon icon="angle-down" style="width: 1em;" v-else/>
|
||
|
|
<slot name="section_header" :index="index" :section="sections[index]" :count="group.length"/>
|
||
|
|
</div>
|
||
|
|
<table class="card-body collapse table table-striped table-dark" :class="{show: !collapsed[index]}">
|
||
|
|
<slot class="row" v-for="item in group" name="section_body" :item="item"/>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import router from '../router';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'CollapsableCards',
|
||
|
|
props: {
|
||
|
|
columns: {
|
||
|
|
type: Array,
|
||
|
|
required: true,
|
||
|
|
},
|
||
|
|
items: {
|
||
|
|
type: Array,
|
||
|
|
required: true,
|
||
|
|
},
|
||
|
|
sections: {
|
||
|
|
type: Array,
|
||
|
|
required: true,
|
||
|
|
},
|
||
|
|
keyName: {
|
||
|
|
type: String,
|
||
|
|
required: true,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
collapsed: [],
|
||
|
|
symbols: ['▲', '▼', '▶', '◀'],
|
||
|
|
};
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
this.collapsed = this.sections.map(() => true);
|
||
|
|
/*this.columns.map(e => ({
|
||
|
|
k: e,
|
||
|
|
v: this.$store.getters.getFilters[e]
|
||
|
|
})).filter(e => e.v).forEach(e => this.setFilter(e.k, e.v));*/
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
grouped_items() {
|
||
|
|
return this.sections.map(section => this.items.filter(item => item[this.keyName] === section.slug));
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
toggle(index) {
|
||
|
|
this.collapsed[index] = !this.collapsed[index];
|
||
|
|
this.$forceUpdate();
|
||
|
|
},
|
||
|
|
/*changeFilter(col, val) {
|
||
|
|
this.setFilter(col, val);
|
||
|
|
let newquery = Object.entries({
|
||
|
|
...this.$store.getters.getFilters,
|
||
|
|
[col]: val
|
||
|
|
}).reduce((a, [k, v]) => (v ? {...a, [k]: v} : a), {});
|
||
|
|
router.push({query: newquery});
|
||
|
|
},*/
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|