This commit is contained in:
j3d1 2024-01-22 19:20:27 +01:00
parent 5d14c28e08
commit f0b45649af
5 changed files with 152 additions and 7 deletions

View file

@ -0,0 +1,105 @@
<template>
<table class="table table-striped table-dark">
<thead>
<tr>
<th scope="col" v-for="(column, index) in columns" :key="index"
v-if="columnHasData[index]||columnHasSlot[index]">
<div class="input-group" v-if="columnHasData[index]">
<div class="input-group-prepend">
<button
:class="[ 'btn', column === sortBy ? 'btn-outline-info' : 'btn-outline-secondary' ]"
@click="toggleSort(column)"
>
{{ column }}
<span :class="{ 'text-info': column === sortBy }">
<font-awesome-icon :icon="getSortIcon(column)"/>
</span>
</button>
</div>
<input
type="text"
class="form-control"
placeholder="filter"
:value="filters[column]"
@input="changeFilter(column, $event.target.value)"
>
</div>
<span v-else-if="columnHasSlot[index]">
{{ column }}
</span>
</th>
<th>
<slot name="header_actions"/>
</th>
</tr>
</thead>
<tbody>
<tr v-for="item in internalItems" :key="item[keyName]" @click="$emit('itemActivated', item)">
<td v-for="(column, index) in columns" :key="index" v-if="columnHasSlot[index]||columnHasData[index]">
<slot v-if="columnHasSlot[index]" :name="column" :item="item"/>
<span v-else-if="columnHasData[index]">
{{ item[column] }}
</span>
<span v-else>
{{ column }}
</span>
</td>
<td>
<slot v-bind:item="item" name="actions"/>
</td>
</tr>
</tbody>
</table>
</template>
<script>
import DataContainer from '@/mixins/data-container';
import router from '../router';
export default {
name: 'SlotTable',
mixins: [DataContainer],
data() {
return {
columnHasSlot: [],
columnHasData: []
}
},
created() {
this.columns.map(e => ({
k: e,
v: this.$store.getters.getFilters[e]
})).filter(e => e.v).forEach(e => this.setFilter(e.k, e.v));
},
mounted() {
this.columnHasSlot = this.columns.map(e => Object.keys(this.$slots).includes(e));
this.columnHasData = this.columns.map(e => this.items.reduce((a, b) => a || b[e] !== undefined, false));
//console.log(this.columnHasData, this.columnHasSlot, this.columns, Object.keys(this.$slots), this.$slots);
for (let slot in this.$slots) {
console.log(`Slot: ${slot}`);
console.log(`Data: ${this.$slots[slot]}`);
}
},
beforeUpdate() {
this.columnHasSlot = this.columns.map(e => Object.keys(this.$slots).includes(e));
this.columnHasData = this.columns.map(e => this.items.reduce((a, b) => a || b[e] !== undefined, false));
},
methods: {
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>
<style>
.table-body-move {
transition: transform 1s;
}
</style>

View file

@ -77,6 +77,7 @@ const routes = [
] ]
}, },
{path: '/user', name: 'user', component: Empty, meta: {requiresAuth: true}}, {path: '/user', name: 'user', component: Empty, meta: {requiresAuth: true}},
//{path: '*', component: Error},
]; ];
const router = createRouter({ const router = createRouter({

View file

@ -2,13 +2,13 @@
<div class="container-fluid px-xl-5 mt-3"> <div class="container-fluid px-xl-5 mt-3">
<div class="row"> <div class="row">
<div class="col-xl-8 offset-xl-2"> <div class="col-xl-8 offset-xl-2">
<Table <SlotTable
:columns="['id', 'name', 'state', 'last_activity', 'assigned_to']" :columns="['id', 'name', 'state', 'last_activity', 'assigned_to', 'actions', 'actions2']"
:items="tickets" :items="tickets.map(formatTicket)"
:keyName="'id'" :keyName="'id'"
v-if="layout === 'table'" v-if="layout === 'table'"
> >
<template #actions="{ item }"> <template v-slot:actions="{item}">
<div class="btn-group"> <div class="btn-group">
<a class="btn btn-primary" :href="'/'+ getEventSlug + '/ticket/' + item.id" title="view" <a class="btn btn-primary" :href="'/'+ getEventSlug + '/ticket/' + item.id" title="view"
@click.prevent="gotoDetail(item)"> @click.prevent="gotoDetail(item)">
@ -17,7 +17,7 @@
</a> </a>
</div> </div>
</template> </template>
</Table> </SlotTable>
</div> </div>
</div> </div>
<CollapsableCards v-if="layout === 'tasks'" :items="tickets" <CollapsableCards v-if="layout === 'tasks'" :items="tickets"
@ -54,12 +54,12 @@ import Modal from '@/components/Modal';
import EditItem from '@/components/EditItem'; import EditItem from '@/components/EditItem';
import {mapActions, mapGetters, mapState} from 'vuex'; import {mapActions, mapGetters, mapState} from 'vuex';
import Lightbox from '../components/Lightbox'; import Lightbox from '../components/Lightbox';
import Table from '@/components/Table'; import SlotTable from "@/components/SlotTable.vue";
import CollapsableCards from "@/components/CollapsableCards.vue"; import CollapsableCards from "@/components/CollapsableCards.vue";
export default { export default {
name: 'Tickets', name: 'Tickets',
components: {Lightbox, Table, Cards, Modal, EditItem, CollapsableCards}, components: {Lightbox, SlotTable, Cards, Modal, EditItem, CollapsableCards},
computed: { computed: {
...mapState(['tickets']), ...mapState(['tickets']),
...mapGetters(['stateInfo', 'getEventSlug', 'layout']), ...mapGetters(['stateInfo', 'getEventSlug', 'layout']),

View file

@ -7,6 +7,45 @@ module.exports = {
"Access-Control-Allow-Headers": "*", "Access-Control-Allow-Headers": "*",
"Access-Control-Allow-Methods": "*" "Access-Control-Allow-Methods": "*"
}, },
//devMiddleware: {
// //location /redirect_media/ {
// // internal;
// // alias /var/www/c3lf-sys3/userfiles/;
// //}
// //
// //location /redirect_thumbnail/ {
// // internal;
// // alias /var/www/c3lf-sys3/userfiles/thumbnails/;
// //}
// modifyResponse: function (res) {
// path = res.headers['x-accel-redirect'];
// let re_path;
// if (path && path.includes('/redirect_thumbnail/')) {
// re_path = path.replace('/redirect_thumbnail/', '../userfiles/thumbnails/');
// }else if (path && path.includes('/redirect_media/')) {
// re_path = path.replace('/redirect_media/', '../userfiles/');
// }
// const body = require(re_path);
// res.headers['content-type'] = 'image/jpeg';
// res.headers['content-length'] = body.length;
// res.body = body;
// return res;
// },
//},
/*setupMiddlewares: (middlewares, devServer) => {
devServer.app.use(basicAuth({
users: {
'c3lf': 'findetalles'
},
challenge: true
}));
return middlewares;
},*/
/*watchOptions: {
poll: true,
ignored: /node_modules/,
},*/
proxy: { proxy: {
'^/media/2': { '^/media/2': {
target: 'https://staging.c3lf.de/', target: 'https://staging.c3lf.de/',