stash
This commit is contained in:
parent
da9634ba15
commit
a42911af3f
5 changed files with 215 additions and 39 deletions
|
|
@ -151,7 +151,8 @@ else:
|
|||
'USER': os.getenv('DB_USER', 'system3'),
|
||||
'PASSWORD': os.getenv('DB_PASSWORD', 'system3'),
|
||||
'OPTIONS': {
|
||||
'charset': 'utf8mb4'
|
||||
'charset': 'utf8mb4',
|
||||
'init_command': "SET sql_mode='STRICT_TRANS_TABLES'"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -73,23 +73,15 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
collapsed: [],
|
||||
symbols: ['▲', '▼', '▶', '◀'],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
const query = this.$router.currentRoute ? (this.$router.currentRoute.query ? this.$router.currentRoute.query.collapsed : null) : null;
|
||||
const query = this.route ? (this.route.query ? this.route.query.collapsed : null) : null;
|
||||
if (query !== null && query !== undefined) {
|
||||
this.collapsed = this.unpackInt(parseInt(query), this.sections.length);
|
||||
} else {
|
||||
this.collapsed = this.sections.map(() => true);
|
||||
}
|
||||
|
||||
//this.$router.push({...this.$router.currentRoute, query: {...this.$router.currentRoute.query, layout}});
|
||||
//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() {
|
||||
|
|
@ -116,8 +108,8 @@ export default {
|
|||
const encoded = this.packInt(this.collapsed).toString()
|
||||
if (this.route.query.collapsed !== encoded)
|
||||
this.$router.push({
|
||||
...this.$router.currentRoute,
|
||||
query: {...this.$router.currentRoute.query, collapsed: encoded}
|
||||
...this.route,
|
||||
query: {...this.route.query, collapsed: encoded}
|
||||
});
|
||||
},
|
||||
deep: true,
|
||||
|
|
|
|||
124
web/src/components/ExpandableTable.vue
Normal file
124
web/src/components/ExpandableTable.vue
Normal file
|
|
@ -0,0 +1,124 @@
|
|||
<template>
|
||||
<table class="table table-striped table-dark">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
</th>
|
||||
<th scope="col" v-for="(column, index) in columns" :key="index">
|
||||
<div class="input-group">
|
||||
<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>
|
||||
</th>
|
||||
<th>
|
||||
<slot name="header_actions"/>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody v-for="(item, index) in internalItems" :key="item[keyName]" style="border-top: none">
|
||||
<tr @click="toggle(index)">
|
||||
<td>
|
||||
<font-awesome-icon icon="angle-right" style="width: 1em;" v-if="collapsed[index]"/>
|
||||
<font-awesome-icon icon="angle-down" style="width: 1em;" v-else/>
|
||||
</td>
|
||||
<td v-for="(column, index) in columns" :key="index">{{ item[column] }}</td>
|
||||
<td>
|
||||
<slot v-bind:id="index" v-bind:item="item" name="actions"/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="!collapsed[index]">
|
||||
<td :colspan="columns.length + 2">
|
||||
<slot v-bind:id="index" v-bind:item="item" name="detail"/>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DataContainer from '@/mixins/data-container';
|
||||
import router from '../router';
|
||||
import {mapGetters} from "vuex";
|
||||
|
||||
export default {
|
||||
name: 'ExpandableTable',
|
||||
mixins: [DataContainer],
|
||||
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));
|
||||
|
||||
const query = this.route ? (this.route.query ? this.route.query.collapsed : null) : null;
|
||||
if (query !== null && query !== undefined) {
|
||||
this.collapsed = this.unpackInt(parseInt(query), this.internalItems.length);
|
||||
} else {
|
||||
this.collapsed = this.internalItems.map(() => true);
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
collapsed: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['route']),
|
||||
},
|
||||
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});
|
||||
},
|
||||
packInt(arr) {
|
||||
return arr.reduce((a, e, i) => a + (e ? 0 : 2 ** i), 0);
|
||||
},
|
||||
unpackInt(n, l) {
|
||||
return [...Array(l)].map((e, i) => (n & 2 ** i) === 0);
|
||||
},
|
||||
toggle(index) {
|
||||
const collapsed = [...this.collapsed]
|
||||
collapsed[index] = !collapsed[index];
|
||||
this.collapsed = collapsed;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
collapsed: {
|
||||
handler() {
|
||||
const encoded = this.packInt(this.collapsed).toString()
|
||||
if (this.route.query.collapsed !== encoded)
|
||||
this.$router.push({
|
||||
...this.route,
|
||||
query: {...this.route.query, collapsed: encoded}
|
||||
});
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.table-body-move {
|
||||
transition: transform 1s;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -359,6 +359,13 @@ const store = createStore({
|
|||
commit('replaceEvents', [...state.events.filter(e => e.eid !== event_id)])
|
||||
}
|
||||
},
|
||||
async updateEvent({commit, dispatch, state}, {id, partial_event}){
|
||||
console.log(id, partial_event);
|
||||
const {data, success} = await http.patch(`/2/events/${id}/`, partial_event, state.user.token);
|
||||
if (success) {
|
||||
commit('replaceEvents', [...state.events.filter(e => e.eid !== id), data])
|
||||
}
|
||||
},
|
||||
async fetchTicketStates({commit, state, getters}) {
|
||||
if (!state.user.token) return;
|
||||
if (state.fetchedData.states > Date.now() - 1000 * 60 * 60 * 24) return;
|
||||
|
|
|
|||
|
|
@ -1,9 +1,6 @@
|
|||
<template>
|
||||
<Table
|
||||
:columns="['slug', 'name']"
|
||||
:items="events"
|
||||
:keyName="'slug'"
|
||||
>
|
||||
<AsyncLoader :loaded="events.length > 0">
|
||||
<ExpandableTable v-if="!!events" :columns="['slug', 'name']" :items="events" :keyName="'slug'">
|
||||
<template v-slot:header_actions>
|
||||
<button class="btn btn-success" @click.prevent="openAddEventModal">
|
||||
<font-awesome-icon icon="plus"/>
|
||||
|
|
@ -12,39 +9,94 @@
|
|||
</template>
|
||||
<template v-slot:actions="{ item }">
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-secondary" @click.stop="changeEvent(item)">
|
||||
<font-awesome-icon icon="archive"/>
|
||||
use
|
||||
<button class="btn btn-secondary" @click.stop="changeEvent(item)" style="white-space: nowrap;">
|
||||
<font-awesome-icon icon="archive"/> use
|
||||
</button>
|
||||
<button class="btn btn-danger" @click.stop="safeDeleteEvent(item.eid)">
|
||||
<font-awesome-icon icon="trash"/>
|
||||
delete
|
||||
<button class="btn btn-danger" @click.stop="safeDeleteEvent(item.eid)" style="white-space: nowrap;">
|
||||
<font-awesome-icon icon="trash"/> delete
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</Table>
|
||||
<template v-slot:detail="{id, item }">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<input type="date" class="form-control form-control-sm" title="Buildup Start"
|
||||
v-model="item.pre_start" disabled style="opacity: 1"
|
||||
:max="item.start" @focus="prepare_date_field">
|
||||
</div>
|
||||
<div class="col">
|
||||
<input type="date" class="form-control form-control-sm" title="Official Event Start"
|
||||
v-model="item.start" disabled style="opacity: 1"
|
||||
:min="item.pre_start" :max="item.end" @focus="prepare_date_field">
|
||||
</div>
|
||||
<div class="col">
|
||||
<input type="date" class="form-control form-control-sm" title="Official Event End"
|
||||
v-model="item.end" disabled style="opacity: 1"
|
||||
:min="item.start" :max="item.post_end" @focus="prepare_date_field">
|
||||
</div>
|
||||
<div class="col">
|
||||
<input type="date" class="form-control form-control-sm" title="Teardown End"
|
||||
v-model="item.post_end" disabled style="opacity: 1"
|
||||
:min="item.end" @focus="prepare_date_field">
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<label class="mr-3">Addresses: </label>
|
||||
<div v-for="(address, a_id) in item.addresses" class="btn-group btn-group-sm mr-3"
|
||||
@click.stop="deleteAddress(id, a_id)">
|
||||
<button class="btn btn-secondary" disabled style="opacity: 1">
|
||||
{{ address }}
|
||||
</button>
|
||||
<button class="btn btn-danger">
|
||||
<font-awesome-icon icon="trash"/>
|
||||
</button>
|
||||
</div>
|
||||
<div class="btn-group btn-group-sm">
|
||||
<input type="text" v-model="new_address[id]">
|
||||
<button class="btn btn-secondary" @click.stop="addAddress(id)" style="white-space: nowrap;">
|
||||
<font-awesome-icon icon="envelope"/> add
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</ExpandableTable>
|
||||
</AsyncLoader>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapActions, mapMutations, mapState} from 'vuex';
|
||||
import Table from '@/components/Table';
|
||||
import ExpandableTable from "@/components/ExpandableTable.vue";
|
||||
import AsyncLoader from "@/components/AsyncLoader.vue";
|
||||
|
||||
export default {
|
||||
name: 'Events',
|
||||
components: {Table},
|
||||
components: {AsyncLoader, ExpandableTable},
|
||||
computed: mapState(['events']),
|
||||
data() {
|
||||
return {new_address: []}
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['changeEvent', 'deleteEvent']),
|
||||
...mapActions(['changeEvent', 'deleteEvent', 'updateEvent']),
|
||||
...mapMutations(['openAddEventModal']),
|
||||
safeDeleteEvent(id) {
|
||||
if (confirm('do you want to completely delete this event and related data?')) {
|
||||
this.deleteEvent(id)
|
||||
}
|
||||
},
|
||||
addAddress(id) {
|
||||
const a = this.new_address[id];
|
||||
if (!this.events[id].addresses.includes(a))
|
||||
this.events[id].addresses.push(a)
|
||||
this.new_address[id] = ""
|
||||
this.updateEvent({id: this.events[id].eid, partial_event: {addresses: this.events[id].addresses}});
|
||||
},
|
||||
deleteAddress(id, a_id) {
|
||||
this.events[id].addresses = this.events[id].addresses.filter((e, i) => i !== a_id);
|
||||
this.updateEvent({id: this.events[id].eid, partial_event: {addresses: this.events[id].addresses}});
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Loading…
Reference in a new issue