stash

web/src/components/SlotTable.vue

@@ -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>

web/src/router.js

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

web/src/views/Tickets.vue

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

web/vue.config.js

@@ -7,6 +7,45 @@ module.exports = {
             "Access-Control-Allow-Headers": "*",
             "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: {
             '^/media/2': {
                 target: 'https://staging.c3lf.de/',