migrate to vue 3
This commit is contained in:
parent
bb07a6b641
commit
bb71c44aa7
16 changed files with 318 additions and 432 deletions
|
|
@ -15,6 +15,7 @@
|
|||
<script>
|
||||
import Modal from '@/components/Modal';
|
||||
import EditItem from '@/components/EditItem';
|
||||
import {mapActions, mapState} from "vuex";
|
||||
|
||||
export default {
|
||||
name: 'AddItemModal',
|
||||
|
|
@ -23,12 +24,16 @@ export default {
|
|||
data: () => ({
|
||||
item: {}
|
||||
}),
|
||||
computed: {
|
||||
...mapState(['lastUsed'])
|
||||
},
|
||||
created() {
|
||||
this.item = {box: this.$store.state.lastUsed.box || '', cid: this.$store.state.lastUsed.cid || ''};
|
||||
this.item = {box: this.lastUsed.box || '', cid: this.lastUsed.cid || ''};
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['postItem']),
|
||||
saveNewItem() {
|
||||
this.$store.dispatch('postItem', this.item).then(() => {
|
||||
this.postItem(this.item).then(() => {
|
||||
this.$emit('close');
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import {mapActions} from 'vuex';
|
||||
import Modal from '@/components/Modal';
|
||||
import EditItem from '@/components/EditItem';
|
||||
|
||||
|
|
@ -32,11 +33,12 @@ export default {
|
|||
}
|
||||
}),
|
||||
created() {
|
||||
this.ticket = {box: this.$store.state.lastUsed.box || '', cid: this.$store.state.lastUsed.cid || ''};
|
||||
this.ticket = {};
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['postManualTicket']),
|
||||
saveNewTicket() {
|
||||
this.$store.dispatch('postManualTicket', this.ticket).then(() => {
|
||||
this.postManualTicket(this.ticket).then(() => {
|
||||
this.$emit('close');
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,31 +1,6 @@
|
|||
<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"
|
||||
|
|
@ -48,6 +23,8 @@
|
|||
|
||||
<script>
|
||||
|
||||
import {mapGetters} from "vuex";
|
||||
|
||||
export default {
|
||||
name: 'CollapsableCards',
|
||||
props: {
|
||||
|
|
@ -75,25 +52,18 @@ export default {
|
|||
};
|
||||
},
|
||||
created() {
|
||||
const query = this.$router.currentRoute.query.collapsed;
|
||||
const query = this.$router.currentRoute ? (this.$router.currentRoute.query ? this.$router.currentRoute.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() {
|
||||
return this.sections.map(section => this.items.filter(item => item[this.keyName] === section.slug));
|
||||
},
|
||||
|
||||
...mapGetters(['route']),
|
||||
},
|
||||
methods: {
|
||||
packInt(arr) {
|
||||
|
|
@ -112,8 +82,11 @@ export default {
|
|||
collapsed: {
|
||||
handler() {
|
||||
const encoded = this.packInt(this.collapsed).toString()
|
||||
if (this.$router.currentRoute.query.collapsed !== encoded)
|
||||
this.$router.push({...this.$router.currentRoute, query: {...this.$router.currentRoute.query, collapsed: encoded}});
|
||||
if (this.route.query.collapsed !== encoded)
|
||||
this.$router.push({
|
||||
...this.$router.currentRoute,
|
||||
query: {...this.$router.currentRoute.query, collapsed: encoded}
|
||||
});
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
|
|
|
|||
|
|
@ -119,13 +119,13 @@ export default {
|
|||
emits: ['addItemClicked', 'addTicketClicked'],
|
||||
computed: {
|
||||
...mapState(['events']),
|
||||
...mapGetters(['getEventSlug', 'getActiveView', "checkPermission", "hasPermissions", "layout"]),
|
||||
...mapGetters(['getEventSlug', 'getActiveView', "checkPermission", "hasPermissions", "layout", "route"]),
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['changeEvent', 'changeView', 'searchEventItems']),
|
||||
...mapMutations(['logout']),
|
||||
navigateTo(link) {
|
||||
if (this.$router.currentRoute.path !== link)
|
||||
if (this.route.path !== link)
|
||||
this.$router.push(link);
|
||||
},
|
||||
isItemView() {
|
||||
|
|
@ -135,9 +135,9 @@ export default {
|
|||
return this.getActiveView === 'tickets' || this.getActiveView === 'ticket';
|
||||
},
|
||||
setLayout(layout) {
|
||||
if (this.$router.currentRoute.query.layout === layout)
|
||||
if (this.route.query.layout === layout)
|
||||
return;
|
||||
this.$router.push({...this.$router.currentRoute, query: {...this.$router.currentRoute.query, layout}});
|
||||
this.$router.push({...this.route, query: {...this.route.query, layout}});
|
||||
},
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,48 +0,0 @@
|
|||
<template>
|
||||
<div class="toast" :class="color && ('border-' + color)" role="alert" ref="toast" data-autohide="false">
|
||||
<div class="toast-header" :class="[color && ('bg-' + color), color && 'text-light']">
|
||||
<strong class="mr-auto pr-3">{{ title }}</strong>
|
||||
<small>{{ displayTime }}</small>
|
||||
<button type="button" class="ml-2 mb-1 close" @click="close()">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="toast-body" v-html="message">{{ message }}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import $ from 'jquery';
|
||||
import 'bootstrap/js/dist/toast';
|
||||
import {DateTime} from 'luxon';
|
||||
|
||||
export default {
|
||||
name: 'Toast',
|
||||
props: ['title', 'message', 'color'],
|
||||
data: () => ({
|
||||
creationTime: DateTime.local(),
|
||||
displayTime: 'just now',
|
||||
timer: undefined
|
||||
}),
|
||||
mounted() {
|
||||
const {toast} = this.$refs;
|
||||
$(toast).toast('show');
|
||||
this.timer = setInterval(this.updateDisplayTime, 1000);
|
||||
},
|
||||
methods: {
|
||||
close() {
|
||||
const {toast} = this.$refs;
|
||||
$(toast).toast('hide');
|
||||
window.setTimeout(() => {
|
||||
this.$emit('close');
|
||||
}, 500);
|
||||
},
|
||||
updateDisplayTime() {
|
||||
this.displayTime = this.creationTime.toRelative();
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
clearInterval(this.timer);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue