stash
This commit is contained in:
parent
5d14c28e08
commit
f0b45649af
5 changed files with 152 additions and 7 deletions
105
web/src/components/SlotTable.vue
Normal file
105
web/src/components/SlotTable.vue
Normal 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>
|
||||
|
|
@ -77,6 +77,7 @@ const routes = [
|
|||
]
|
||||
},
|
||||
{path: '/user', name: 'user', component: Empty, meta: {requiresAuth: true}},
|
||||
//{path: '*', component: Error},
|
||||
];
|
||||
|
||||
const router = createRouter({
|
||||
|
|
|
|||
|
|
@ -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
|
||||
:columns="['id', 'name', 'state', 'last_activity', 'assigned_to']"
|
||||
:items="tickets"
|
||||
<SlotTable
|
||||
:columns="['id', 'name', 'state', 'last_activity', 'assigned_to', 'actions', 'actions2']"
|
||||
: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']),
|
||||
|
|
|
|||
|
|
@ -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/',
|
||||
|
|
|
|||
Loading…
Reference in a new issue