add alternative layout for /tickets page

web/src/components/CollapsableCards.vue

@@ -0,0 +1,105 @@
+<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>

web/src/components/Navbar.vue

@@ -48,6 +48,14 @@
                     <font-awesome-icon icon="list"/>
                 </button>
             </div>
+            <div class="btn-group btn-group-toggle mr-1" v-if="isTicketView()">
+                <button :class="['btn', 'btn-info', { active: layout === 'tasks' }]" @click="setLayout('tasks')">
+                    <font-awesome-icon icon="tasks"/>
+                </button>
+                <button :class="['btn', 'btn-info', { active: layout === 'table' }]" @click="setLayout('table')">
+                    <font-awesome-icon icon="list"/>
+                </button>
+            </div>
             <button type="button" class="btn text-nowrap btn-success mr-1" @click="$emit('addItemClicked')"
                     v-if="isItemView()">
                 <font-awesome-icon icon="plus"/>
@@ -108,13 +116,13 @@ export default {
             {'title': 'howto engel', 'path': '/howto/'},
         ]
     }),
+    emits: ['addItemClicked', 'addTicketClicked'],
     computed: {
-        ...mapState(['events', 'layout']),
-        ...mapGetters(['getEventSlug', 'getActiveView', "checkPermission", "hasPermissions"]),
+        ...mapState(['events']),
+        ...mapGetters(['getEventSlug', 'getActiveView', "checkPermission", "hasPermissions", "layout"]),
     },
     methods: {
         ...mapActions(['changeEvent', 'changeView', 'searchEventItems']),
-        ...mapMutations(['setLayout', 'logout']),
         navigateTo(link) {
             if (this.$router.currentRoute.path !== link)
                 this.$router.push(link);
@@ -124,7 +132,12 @@ export default {
         },
         isTicketView() {
             return this.getActiveView === 'tickets' || this.getActiveView === 'ticket';
-        }
+        },
+        setLayout(layout) {
+            if (this.$router.currentRoute.query.layout === layout)
+                return;
+            this.$router.push({...this.$router.currentRoute, query: {...this.$router.currentRoute.query, layout}});
+        },
     }
 };
 </script>