add basic view for item history
This commit is contained in:
parent
eb9e9088ca
commit
a86653ea61
16 changed files with 612 additions and 307 deletions
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<div style="min-height: 100vh; display: flex; flex-direction: column;">
|
||||
<Lightbox v-if="lightboxHash" :hash="lightboxHash" @close="openLightboxModalWith(null)"/>
|
||||
<AddItemModal v-if="addItemModalOpen && isLoggedIn" @close="closeAddItemModal()" isModal="true"/>
|
||||
<AddTicketModal v-if="addTicketModalOpen && isLoggedIn" @close="closeAddTicketModal()" isModal="true"/>
|
||||
<AddBoxModal v-if="showAddBoxModal && isLoggedIn" @close="closeAddBoxModal()" isModal="true"/>
|
||||
|
|
@ -16,20 +17,22 @@ import {mapState, mapMutations, mapActions, mapGetters} from 'vuex';
|
|||
import AddTicketModal from "@/components/AddTicketModal.vue";
|
||||
import AddBoxModal from "@/components/AddBoxModal.vue";
|
||||
import AddEventModal from "@/components/AddEventModal.vue";
|
||||
import Lightbox from "@/components/Lightbox.vue";
|
||||
|
||||
export default {
|
||||
name: 'app',
|
||||
components: {AddBoxModal, AddEventModal, Navbar, AddItemModal, AddTicketModal},
|
||||
components: {Lightbox, AddBoxModal, AddEventModal, Navbar, AddItemModal, AddTicketModal},
|
||||
computed: {
|
||||
...mapState(['loadedItems', 'layout', 'toasts', 'showAddBoxModal', 'showAddEventModal']),
|
||||
...mapState(['loadedItems', 'layout', 'toasts', 'showAddBoxModal', 'showAddEventModal', 'lightboxHash']),
|
||||
...mapGetters(['isLoggedIn']),
|
||||
},
|
||||
data: () => ({
|
||||
addItemModalOpen: false,
|
||||
addTicketModalOpen: false
|
||||
addTicketModalOpen: false,
|
||||
}),
|
||||
methods: {
|
||||
...mapMutations(['removeToast', 'createToast', 'closeAddBoxModal', 'openAddBoxModal', 'closeAddEventModal']),
|
||||
...mapMutations(['removeToast', 'createToast', 'closeAddBoxModal', 'openAddBoxModal', 'closeAddEventModal',
|
||||
'openLightboxModalWith']),
|
||||
...mapActions(['loadEvents', 'scheduleAfterInit']),
|
||||
openAddItemModal() {
|
||||
this.addItemModalOpen = true;
|
||||
|
|
@ -42,7 +45,7 @@ export default {
|
|||
},
|
||||
closeAddTicketModal() {
|
||||
this.addTicketModalOpen = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
created: function () {
|
||||
document.title = document.location.hostname;
|
||||
|
|
|
|||
|
|
@ -42,19 +42,27 @@ export default {
|
|||
url: this.src,
|
||||
data: this.image_data
|
||||
});
|
||||
},
|
||||
deferImage() {
|
||||
setTimeout(() => {
|
||||
if (this.cached) {
|
||||
const c = this.getThumbnail(this.src);
|
||||
if (c) {
|
||||
this.image_data = c;
|
||||
return;
|
||||
}
|
||||
}
|
||||
this.loadImage();
|
||||
}, 0);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
src: function (newVal, oldVal) {
|
||||
this.deferImage()
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(() => {
|
||||
if (this.cached) {
|
||||
const c = this.getThumbnail(this.src);
|
||||
if (c) {
|
||||
this.image_data = c;
|
||||
return;
|
||||
}
|
||||
}
|
||||
this.loadImage();
|
||||
}, 0);
|
||||
this.deferImage();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -52,7 +52,7 @@ export default {
|
|||
};
|
||||
},
|
||||
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 {
|
||||
|
|
@ -84,8 +84,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,
|
||||
|
|
|
|||
|
|
@ -12,13 +12,16 @@
|
|||
field="description"
|
||||
:validation-fn="str => str && str.length > 0"
|
||||
/>
|
||||
<InputCombo
|
||||
label="box"
|
||||
:model="item"
|
||||
nameKey="box"
|
||||
uniqueKey="cid"
|
||||
:options="boxes"
|
||||
/>
|
||||
<div class="form-group">
|
||||
<label for="box">box</label>
|
||||
<InputCombo
|
||||
label="box"
|
||||
:model="item"
|
||||
nameKey="box"
|
||||
uniqueKey="cid"
|
||||
:options="boxes"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -21,6 +21,9 @@
|
|||
<span class="timeline-item-icon faded-icon" v-else-if="item.type === 'shipping_voucher'">
|
||||
<font-awesome-icon icon="truck"/>
|
||||
</span>
|
||||
<span class="timeline-item-icon faded-icon" v-else-if="item.type === 'placement'">
|
||||
<font-awesome-icon icon="archive"/>
|
||||
</span>
|
||||
<span class="timeline-item-icon faded-icon" v-else>
|
||||
<font-awesome-icon icon="pen"/>
|
||||
</span>
|
||||
|
|
@ -30,40 +33,15 @@
|
|||
<TimelineAssignment v-else-if="item.type === 'assignment'" :item="item"/>
|
||||
<TimelineRelatedItem v-else-if="item.type === 'item_relation'" :item="item"/>
|
||||
<TimelineShippingVoucher v-else-if="item.type === 'shipping_voucher'" :item="item"/>
|
||||
<TimelinePlacement v-else-if="item.type === 'placement'" :item="item"/>
|
||||
<TimelineRelatedTicket v-else-if="item.type === 'issue_relation'" :item="item"/>
|
||||
<p v-else>{{ item }}</p>
|
||||
</li>
|
||||
<li class="timeline-item">
|
||||
<span class="timeline-item-icon | faded-icon">
|
||||
<font-awesome-icon icon="comment"/>
|
||||
</span>
|
||||
<div class="new-comment card bg-dark">
|
||||
<div class="">
|
||||
<textarea placeholder="add comment..." v-model="newComment" class="form-control">
|
||||
</textarea>
|
||||
<AsyncButton class="btn btn-primary float-right" :task="addCommentAndClear">
|
||||
<font-awesome-icon icon="comment"/>
|
||||
Save Comment
|
||||
</AsyncButton>
|
||||
</div>
|
||||
</div>
|
||||
<slot name="timeline_action1"/>
|
||||
</li>
|
||||
<li class="timeline-item">
|
||||
<span class="timeline-item-icon | faded-icon">
|
||||
<font-awesome-icon icon="envelope"/>
|
||||
</span>
|
||||
<div class="new-mail card bg-dark">
|
||||
<div class="card-header">
|
||||
{{ newestMailSubject }}
|
||||
</div>
|
||||
<div>
|
||||
<textarea placeholder="reply mail..." v-model="newMail" class="form-control">
|
||||
</textarea>
|
||||
<AsyncButton class="btn btn-primary float-right" :task="sendMailAndClear">
|
||||
<font-awesome-icon icon="envelope"/>
|
||||
Send Mail
|
||||
</AsyncButton>
|
||||
</div>
|
||||
</div>
|
||||
<slot name="timeline_action2"/>
|
||||
</li>
|
||||
</ol>
|
||||
</template>
|
||||
|
|
@ -78,12 +56,20 @@ import TimelineAssignment from "@/components/TimelineAssignment.vue";
|
|||
import TimelineRelatedItem from "@/components/TimelineRelatedItem.vue";
|
||||
import TimelineShippingVoucher from "@/components/TimelineShippingVoucher.vue";
|
||||
import AsyncButton from "@/components/inputs/AsyncButton.vue";
|
||||
import TimelinePlacement from "@/components/TimelinePlacement.vue";
|
||||
import TimelineRelatedTicket from "@/components/TimelineRelatedTicket.vue";
|
||||
|
||||
export default {
|
||||
name: 'Timeline',
|
||||
components: {
|
||||
TimelineShippingVoucher, AsyncButton,
|
||||
TimelineRelatedItem, TimelineAssignment, TimelineStateChange, TimelineComment, TimelineMail
|
||||
TimelineRelatedTicket,
|
||||
TimelinePlacement,
|
||||
TimelineShippingVoucher,
|
||||
TimelineRelatedItem,
|
||||
TimelineAssignment,
|
||||
TimelineStateChange,
|
||||
TimelineComment,
|
||||
TimelineMail
|
||||
},
|
||||
props: {
|
||||
timeline: {
|
||||
|
|
@ -91,33 +77,13 @@ export default {
|
|||
default: () => []
|
||||
}
|
||||
},
|
||||
emits: ['sendMail', 'addComment'],
|
||||
data: () => ({
|
||||
newMail: "",
|
||||
newComment: ""
|
||||
}),
|
||||
computed: {
|
||||
...mapGetters(['stateInfo']),
|
||||
newestMailSubject() {
|
||||
const mail = this.timeline.filter(item => item.type === 'mail').pop();
|
||||
return mail ? mail.subject : "";
|
||||
},
|
||||
...mapGetters(['stateInfo'])
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['sendMail', 'postComment']),
|
||||
sendMailAndClear: async function () {
|
||||
await this.sendMail(this.newMail);
|
||||
this.newMail = "";
|
||||
},
|
||||
addCommentAndClear: async function () {
|
||||
await this.postComment(this.newComment);
|
||||
this.newComment = "";
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
<style lang="scss">
|
||||
|
||||
*,
|
||||
*:before,
|
||||
|
|
@ -136,10 +102,10 @@ a {
|
|||
color: inherit;
|
||||
}
|
||||
|
||||
img {
|
||||
/*img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
}*/
|
||||
|
||||
/* End basic CSS override */
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
<template>
|
||||
<div class="timeline-item-wrapper">
|
||||
<Lightbox v-if="lightboxHash" :hash="lightboxHash" @close="closeLightboxModal()"/>
|
||||
<div class="timeline-item-description">
|
||||
<i class="avatar | small">
|
||||
<font-awesome-icon icon="user"/>
|
||||
|
|
@ -23,7 +22,7 @@
|
|||
</div>
|
||||
<div class="card-footer" v-if="item.attachments.length">
|
||||
<ul>
|
||||
<li v-for="attachment in item.attachments" @click="openLightboxModalWith(attachment)">
|
||||
<li v-for="attachment in item.attachments" @click="openLightboxModalWith(attachment.hash)">
|
||||
<AuthenticatedImage :src="`/media/2/256/${attachment.hash}/`" :alt="attachment.name"
|
||||
v-if="attachment.mime_type.startsWith('image/')" cached/>
|
||||
<AuthenticatedDataLink :href="`/media/2/${attachment.hash}/`" :download="attachment.name"
|
||||
|
|
@ -32,26 +31,6 @@
|
|||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!--button class="show-replies">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrow-forward"
|
||||
width="44" height="44" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
|
||||
stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
|
||||
<path d="M15 11l4 4l-4 4m4 -4h-11a4 4 0 0 1 0 -8h1"/>
|
||||
</svg>
|
||||
Show 3 replies
|
||||
<span class="avatar-list">
|
||||
<i class="avatar | small">
|
||||
<font-awesome-icon icon="user"/>
|
||||
</i>
|
||||
<i class="avatar | small">
|
||||
<font-awesome-icon icon="user"/>
|
||||
</i>
|
||||
<i class="avatar | small">
|
||||
<font-awesome-icon icon="user"/>
|
||||
</i>
|
||||
</span>
|
||||
</button-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -59,16 +38,11 @@
|
|||
|
||||
import AuthenticatedImage from "@/components/AuthenticatedImage.vue";
|
||||
import AuthenticatedDataLink from "@/components/AuthenticatedDataLink.vue";
|
||||
import Lightbox from "@/components/Lightbox.vue";
|
||||
import {mapMutations} from "vuex";
|
||||
|
||||
export default {
|
||||
name: 'TimelineMail',
|
||||
components: {Lightbox, AuthenticatedImage, AuthenticatedDataLink},
|
||||
data() {
|
||||
return {
|
||||
lightboxHash: null,
|
||||
}
|
||||
},
|
||||
components: {AuthenticatedImage, AuthenticatedDataLink},
|
||||
props: {
|
||||
'item': {
|
||||
type: Object,
|
||||
|
|
@ -85,12 +59,7 @@ export default {
|
|||
|
||||
},
|
||||
methods: {
|
||||
openLightboxModalWith(attachment) {
|
||||
this.lightboxHash = attachment.hash;
|
||||
},
|
||||
closeLightboxModal() { // Closes the editing modal and discards the edited copy of the item.
|
||||
this.lightboxHash = null;
|
||||
},
|
||||
...mapMutations(['openLightboxModalWith'])
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
85
web/src/components/TimelinePlacement.vue
Normal file
85
web/src/components/TimelinePlacement.vue
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
<template>
|
||||
<div class="timeline-item-description">
|
||||
<i class="avatar | small">
|
||||
<font-awesome-icon icon="user"/>
|
||||
</i>
|
||||
<span><a href="#">$USER</a> has placed item in '{{item.box}}' (#{{item.cid}}) at <time
|
||||
:datetime="timestamp">{{ timestamp }}</time>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'TimelinePlacement',
|
||||
props: {
|
||||
'item': {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
'timestamp': function () {
|
||||
return new Date(this.item.timestamp).toLocaleString();
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* End basic CSS override */
|
||||
|
||||
|
||||
.timeline-item-description {
|
||||
display: flex;
|
||||
padding-top: 6px;
|
||||
gap: 8px;
|
||||
color: var(--gray);
|
||||
|
||||
img {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
/*color: var(--c-grey-500);*/
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
outline: 0; /* Don't actually do this */
|
||||
color: var(--info);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.avatar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
aspect-ratio: 1 / 1;
|
||||
flex-shrink: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
||||
&.small {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
img {
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
|
@ -1,12 +1,15 @@
|
|||
<template>
|
||||
<div class="timeline-item-wrapper">
|
||||
<Lightbox v-if="lightboxHash" :hash="lightboxHash" @close="closeLightboxModal()"/>
|
||||
<div class="timeline-item-description">
|
||||
<i class="avatar | small">
|
||||
<font-awesome-icon icon="user"/>
|
||||
</i>
|
||||
<span><!--a href="#">$USER</a--> linked item <span class="badge badge-secondary">#{{ item.item.uid }} </span> on <time
|
||||
:datetime="timestamp">{{ timestamp }}</time> as <span class="badge badge-primary">{{ item.status }}</span>
|
||||
<span><!--a href="#">$USER</a--> linked item <span class="badge badge-secondary">#{{
|
||||
item.item.id
|
||||
}} </span> on <time
|
||||
:datetime="timestamp">{{ timestamp }}</time> as <span class="badge badge-primary">{{
|
||||
item.status
|
||||
}}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="card bg-dark">
|
||||
|
|
@ -15,56 +18,19 @@
|
|||
<AuthenticatedImage v-if="item.item.file" cached
|
||||
:src="`/media/2/256/${item.item.file}/`"
|
||||
class="d-block card-img-left"
|
||||
@click="openLightboxModalWith(item.item)"
|
||||
@click="openLightboxModalWith(item.item.file)"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card-body">
|
||||
<h6 class="card-subtitle text-secondary">uid: {{ item.item.uid }} box: {{ item.item.box }}</h6>
|
||||
<h6 class="card-title">{{ item.item.description }}</h6>
|
||||
<!--div class="row mx-auto mt-2">
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-outline-success"
|
||||
@click.stop="confirm('return Item?') && markItemReturned(item.item)"
|
||||
title="returned">
|
||||
<font-awesome-icon icon="check"/>
|
||||
</button>
|
||||
<button class="btn btn-outline-secondary" @click.stop="openEditingModalWith(item.item)"
|
||||
title="edit">
|
||||
<font-awesome-icon icon="edit"/>
|
||||
</button>
|
||||
<button class="btn btn-outline-danger"
|
||||
@click.stop="confirm('delete Item?') && deleteItem(item.item)"
|
||||
title="delete">
|
||||
<font-awesome-icon icon="trash"/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<p>{{ item }}</p-->
|
||||
<h6 class="card-subtitle text-secondary">id: {{ item.item.id }} box: {{ item.item.box }}</h6>
|
||||
<router-link :to="{name: 'item', params: {id: item.item.id}}">
|
||||
<h6 class="card-title">{{ item.item.description }}</h6>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--button class="show-replies">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrow-forward"
|
||||
width="44" height="44" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
|
||||
stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
|
||||
<path d="M15 11l4 4l-4 4m4 -4h-11a4 4 0 0 1 0 -8h1"/>
|
||||
</svg>
|
||||
Show 3 replies
|
||||
<span class="avatar-list">
|
||||
<i class="avatar | small">
|
||||
<font-awesome-icon icon="user"/>
|
||||
</i>
|
||||
<i class="avatar | small">
|
||||
<font-awesome-icon icon="user"/>
|
||||
</i>
|
||||
<i class="avatar | small">
|
||||
<font-awesome-icon icon="user"/>
|
||||
</i>
|
||||
</span>
|
||||
</button-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -72,16 +38,11 @@
|
|||
|
||||
import AuthenticatedImage from "@/components/AuthenticatedImage.vue";
|
||||
import AuthenticatedDataLink from "@/components/AuthenticatedDataLink.vue";
|
||||
import Lightbox from "@/components/Lightbox.vue";
|
||||
import {mapMutations} from "vuex";
|
||||
|
||||
export default {
|
||||
name: 'TimelineRelatedItem',
|
||||
components: {Lightbox, AuthenticatedImage, AuthenticatedDataLink},
|
||||
data() {
|
||||
return {
|
||||
lightboxHash: null,
|
||||
}
|
||||
},
|
||||
components: {AuthenticatedImage, AuthenticatedDataLink},
|
||||
props: {
|
||||
'item': {
|
||||
type: Object,
|
||||
|
|
@ -98,13 +59,8 @@ export default {
|
|||
|
||||
},
|
||||
methods: {
|
||||
openLightboxModalWith(attachment) {
|
||||
this.lightboxHash = attachment.hash;
|
||||
},
|
||||
closeLightboxModal() { // Closes the editing modal and discards the edited copy of the item.
|
||||
this.lightboxHash = null;
|
||||
},
|
||||
},
|
||||
...mapMutations(['openLightboxModalWith'])
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
|
|||
94
web/src/components/TimelineRelatedTicket.vue
Normal file
94
web/src/components/TimelineRelatedTicket.vue
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
<template>
|
||||
<div class="timeline-item-wrapper">
|
||||
<div class="timeline-item-description">
|
||||
<i class="avatar | small">
|
||||
<font-awesome-icon icon="user"/>
|
||||
</i>
|
||||
<span> linked ticket <span class="badge badge-secondary">#{{ item.issue_thread.id }} </span> on
|
||||
<time :datetime="timestamp">{{ timestamp }}</time> as
|
||||
<span class="badge badge-primary">{{ item.status }}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="timeline-item-description">
|
||||
<router-link :to="{name: 'ticket', params: {id: item.issue_thread.id}}">
|
||||
<h6 class="card-title">Ticket #{{ item.issue_thread.id }} - {{ item.issue_thread.name }}</h6>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'TimelineRelatedTicket',
|
||||
components: {},
|
||||
props: {
|
||||
'item': {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
'timestamp': function () {
|
||||
return new Date(this.item.timestamp).toLocaleString();
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.timeline-item-description {
|
||||
display: flex;
|
||||
padding-top: 6px;
|
||||
gap: 8px;
|
||||
color: var(--gray);
|
||||
|
||||
img {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
/*color: var(--c-grey-500);*/
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
outline: 0; /* Don't actually do this */
|
||||
color: var(--info);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.card {
|
||||
border: 1px solid var(--gray);
|
||||
}
|
||||
|
||||
.avatar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
aspect-ratio: 1 / 1;
|
||||
flex-shrink: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
||||
&.small {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
img {
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,39 +1,36 @@
|
|||
<template>
|
||||
<div class="form-group">
|
||||
<label :for="label">{{ label }}</label>
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<button
|
||||
class="btn btn-outline-secondary dropdown-toggle"
|
||||
type="button"
|
||||
data-toggle="dropdown"
|
||||
>Search
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a
|
||||
v-for="(option, index) in sortedOptions"
|
||||
:key="index"
|
||||
class="dropdown-item"
|
||||
@click="setInternalValue(option)"
|
||||
:class="{ active: option == selectedOption }"
|
||||
>
|
||||
{{ option[nameKey] }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<input type="text" class="form-control" :id="label" v-model="internalName">
|
||||
<div class="input-group-append">
|
||||
<button
|
||||
class="btn"
|
||||
:class="{ 'btn-info disabled': isValid, 'btn-success': !isValid }"
|
||||
v-if="!isValid"
|
||||
@click="addOption()"
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<button
|
||||
class="btn btn-outline-secondary dropdown-toggle"
|
||||
type="button"
|
||||
data-toggle="dropdown"
|
||||
>Search
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a
|
||||
v-for="(option, index) in sortedOptions"
|
||||
:key="index"
|
||||
class="dropdown-item"
|
||||
@click="setInternalValue(option)"
|
||||
:class="{ active: option == selectedOption }"
|
||||
>
|
||||
<font-awesome-icon icon="plus"/>
|
||||
</button>
|
||||
{{ option[nameKey] }}
|
||||
</a>
|
||||
</div>
|
||||
<Addon type="Combo Box" :is-valid="isValid"/>
|
||||
</div>
|
||||
<input type="text" class="form-control" :id="label" v-model="internalName">
|
||||
<div class="input-group-append">
|
||||
<button
|
||||
class="btn"
|
||||
:class="{ 'btn-info disabled': isValid, 'btn-success': !isValid }"
|
||||
v-if="!isValid"
|
||||
@click="addOption()"
|
||||
>
|
||||
<font-awesome-icon icon="plus"/>
|
||||
</button>
|
||||
</div>
|
||||
<Addon type="Combo Box" :is-valid="isValid"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
import {createRouter, createWebHistory} from 'vue-router'
|
||||
import store from '@/store';
|
||||
|
||||
import Items from './views/Items';
|
||||
import Boxes from './views/Boxes';
|
||||
import Files from './views/Files';
|
||||
import HowTo from './views/HowTo';
|
||||
import Item from "@/views/Item.vue";
|
||||
import Items from '@/views/Items';
|
||||
import Boxes from '@/views/Boxes';
|
||||
import Files from '@/views/Files';
|
||||
import HowTo from '@/views/HowTo';
|
||||
import Login from '@/views/Login.vue';
|
||||
import Register from '@/views/Register.vue';
|
||||
import Dashboard from "@/views/admin/Dashboard.vue";
|
||||
|
|
@ -27,7 +28,7 @@ const routes = [
|
|||
{requiresAuth: true, requiresPermission: 'view_item'}
|
||||
},
|
||||
{
|
||||
path: '/:event/item/:uid/', name: 'item', component: Items, meta:
|
||||
path: '/:event/item/:id/', name: 'item', component: Item, meta:
|
||||
{requiresAuth: true, requiresPermission: 'view_item'}
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -34,6 +34,7 @@ const store = createStore({
|
|||
expiry: null,
|
||||
},
|
||||
|
||||
lightboxHash: null,
|
||||
thumbnailCache: {},
|
||||
fetchedData: {
|
||||
events: 0,
|
||||
|
|
@ -145,38 +146,34 @@ const store = createStore({
|
|||
setItems(state, {slug, items}) {
|
||||
state.loadedItems[slug] = items;
|
||||
state.loadedItems = {...state.loadedItems};
|
||||
console.log(state.loadedItems)
|
||||
},
|
||||
replaceItems(state, items) {
|
||||
const groups = Object.groupBy(items, i => i.event ? i.event : 'none')
|
||||
for (const [key, value] of Object.entries(groups)) state.loadedItems[key] = value;
|
||||
state.loadedItems = {...state.loadedItems};
|
||||
console.log(state.loadedItems)
|
||||
},
|
||||
updateItem(state, updatedItem) {
|
||||
const item = state.loadedItems[updatedItem.event?updatedItem.event:'none'].filter(
|
||||
({uid}) => uid === updatedItem.uid)[0];
|
||||
const item = state.loadedItems[updatedItem.event ? updatedItem.event : 'none'].filter(
|
||||
({id}) => id === updatedItem.id)[0];
|
||||
Object.assign(item, updatedItem);
|
||||
},
|
||||
removeItem(state, item) {
|
||||
state.loadedItems[item.event?item.event:'none'] = state.loadedItems[item.event].filter(it => it !== item);
|
||||
state.loadedItems[item.event ? item.event : 'none'] = state.loadedItems[item.event].filter(it => it !== item);
|
||||
},
|
||||
appendItem(state, item) {
|
||||
state.loadedItems[item.event?item.event:'none'].push(item);
|
||||
state.loadedItems[item.event ? item.event : 'none'].push(item);
|
||||
},
|
||||
setTickets(state, {slug, tickets}) {
|
||||
state.loadedTickets[slug] = tickets;
|
||||
state.loadedTickets = {...state.loadedTickets};
|
||||
console.log(state.loadedTickets)
|
||||
},
|
||||
replaceTickets(state, tickets) {
|
||||
const groups = Object.groupBy(tickets, t => t.event ? t.event : 'none')
|
||||
for (const [key, value] of Object.entries(groups)) state.loadedTickets[key] = value;
|
||||
state.loadedTickets = {...state.loadedTickets};
|
||||
console.log(state.loadedTickets)
|
||||
},
|
||||
updateTicket(state, updatedTicket) {
|
||||
const ticket = state.loadedTickets[updatedTicket.event?updatedTicket.event:'none'].filter(
|
||||
const ticket = state.loadedTickets[updatedTicket.event ? updatedTicket.event : 'none'].filter(
|
||||
({id}) => id === updatedTicket.id)[0];
|
||||
Object.assign(ticket, updatedTicket);
|
||||
state.loadedTickets = {...state.loadedTickets};
|
||||
|
|
@ -189,6 +186,9 @@ const store = createStore({
|
|||
state.groups = groups;
|
||||
state.fetchedData = {...state.fetchedData, groups: Date.now()};
|
||||
},
|
||||
openLightboxModalWith(state, hash) {
|
||||
state.lightboxHash = hash;
|
||||
},
|
||||
openAddBoxModal(state) {
|
||||
state.showAddBoxModal = true;
|
||||
},
|
||||
|
|
@ -336,14 +336,13 @@ const store = createStore({
|
|||
const {data, success} = await getters.session.delete(`/2/events/${event_id}/`);
|
||||
if (success) {
|
||||
await dispatch('loadEvents')
|
||||
commit('replaceEvents', [...state.events.filter(e => e.eid !== event_id)])
|
||||
commit('replaceEvents', [...state.events.filter(e => e.id !== 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])
|
||||
commit('replaceEvents', [...state.events.filter(e => e.id !== id), data])
|
||||
}
|
||||
},
|
||||
async fetchTicketStates({commit, state, getters}) {
|
||||
|
|
@ -354,7 +353,6 @@ const store = createStore({
|
|||
},
|
||||
async changeEvent({dispatch, getters, commit}, eventName) {
|
||||
await router.push({path: `/${eventName.slug}/${getters.getActiveView}/`});
|
||||
//dispatch('loadEventItems');
|
||||
},
|
||||
async changeView({getters}, link) {
|
||||
await router.push({path: `/${getters.getEventSlug}/${link.path}/`});
|
||||
|
|
@ -405,16 +403,16 @@ const store = createStore({
|
|||
async updateItem({commit, getters, state}, item) {
|
||||
const {
|
||||
data, success
|
||||
} = await getters.session.put(`/2/${getters.getEventSlug}/item/${item.uid}/`, item);
|
||||
} = await getters.session.put(`/2/${getters.getEventSlug}/item/${item.id}/`, item);
|
||||
commit('updateItem', data);
|
||||
},
|
||||
async markItemReturned({commit, getters, state}, item) {
|
||||
await getters.session.patch(`/2/${getters.getEventSlug}/item/${item.uid}/`, {returned: true},
|
||||
await getters.session.patch(`/2/${getters.getEventSlug}/item/${item.id}/`, {returned: true},
|
||||
state.user.token);
|
||||
commit('removeItem', item);
|
||||
},
|
||||
async deleteItem({commit, getters, state}, item) {
|
||||
await getters.session.delete(`/2/${getters.getEventSlug}/item/${item.uid}/`, item);
|
||||
await getters.session.delete(`/2/${getters.getEventSlug}/item/${item.id}/`, item);
|
||||
commit('removeItem', item);
|
||||
},
|
||||
async postItem({commit, getters, state}, item) {
|
||||
|
|
|
|||
181
web/src/views/Item.vue
Normal file
181
web/src/views/Item.vue
Normal file
|
|
@ -0,0 +1,181 @@
|
|||
<template>
|
||||
<AsyncLoader :loaded="!!item.id">
|
||||
<div class="container-fluid px-xl-5 mt-3">
|
||||
<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 bg-dark">
|
||||
<AuthenticatedImage v-if="item.file" cached
|
||||
:src="`/media/2/256/${item.file}/`"
|
||||
class="d-block card-img"
|
||||
@click="openLightboxModalWith(item.file)"
|
||||
/>
|
||||
<div class="card-body">
|
||||
<h6 class="card-subtitle text-secondary">id: {{ item.id }} box: {{ item.box }}</h6>
|
||||
<h6 class="card-title">{{ item.description }}</h6>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<InputPhoto
|
||||
:model="editingItem"
|
||||
field="file"
|
||||
:on-capture="storeImage"
|
||||
/>
|
||||
<InputString
|
||||
label="description"
|
||||
:model="editingItem"
|
||||
field="description"
|
||||
:validation-fn="str => str && str.length > 0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-8">
|
||||
<div class="card bg-dark text-light mb-2" id="filters">
|
||||
<div class="card-header">
|
||||
<h3>Item #{{ item.id }} - {{ item.description }}</h3>
|
||||
</div>
|
||||
<Timeline :timeline="item.timeline">
|
||||
<!--template v-slot:timeline_action1>
|
||||
<span class="timeline-item-icon | faded-icon">
|
||||
<font-awesome-icon icon="comment"/>
|
||||
</span>
|
||||
<div class="new-comment card bg-dark">
|
||||
<div class="">
|
||||
<textarea placeholder="add comment..." v-model="newComment"
|
||||
class="form-control">
|
||||
</textarea>
|
||||
<AsyncButton class="btn btn-primary float-right" :task="addCommentAndClear">
|
||||
<font-awesome-icon icon="comment"/>
|
||||
Save Comment
|
||||
</AsyncButton>
|
||||
</div>
|
||||
</div>
|
||||
</template-->
|
||||
</Timeline>
|
||||
<div class="card-footer d-flex justify-content-between">
|
||||
<!--button class="btn btn-secondary mr-2" @click="$router.go(-1)">Back</button-->
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-outline-success"
|
||||
@click.stop="confirm('return Item?') && markItemReturned(item)"
|
||||
title="returned">
|
||||
<font-awesome-icon icon="check"/> mark returned
|
||||
</button>
|
||||
<button class="btn btn-outline-danger"
|
||||
@click.stop="confirm('delete Item?') && deleteItem(item)"
|
||||
title="delete">
|
||||
<font-awesome-icon icon="trash"/> delete
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<InputCombo
|
||||
label="box"
|
||||
:model="editingItem"
|
||||
nameKey="box"
|
||||
uniqueKey="cid"
|
||||
:options="boxes"
|
||||
style="width: auto;"
|
||||
/>
|
||||
|
||||
<button type="button" class="btn btn-success" @click="saveEditingItem()">Save Changes
|
||||
</button>
|
||||
{{ editingItem }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-xl-2" v-if="item.related_issues && item.related_issues.length">
|
||||
<div class="card bg-dark text-light mb-2" id="filters">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title text-info">Related</h5>
|
||||
</div>
|
||||
<div class="card bg-dark" v-for="issue in item.related_issues" v-bind:key="item.id">
|
||||
<div class="card-body">
|
||||
<router-link :to="{name: 'ticket', params: {id: issue.id}}">
|
||||
<h6 class="card-title">Ticket #{{ issue.id }} - {{ issue.name }}</h6>
|
||||
</router-link>
|
||||
<h6 class="card-subtitle text-secondary">state: {{ issue.state }}</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</AsyncLoader>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import {mapActions, mapGetters, mapMutations, mapState} from 'vuex';
|
||||
import Timeline from "@/components/Timeline.vue";
|
||||
import ClipboardButton from "@/components/inputs/ClipboardButton.vue";
|
||||
import AsyncLoader from "@/components/AsyncLoader.vue";
|
||||
import InputCombo from "@/components/inputs/InputCombo.vue";
|
||||
import InputString from "@/components/inputs/InputString.vue";
|
||||
import AuthenticatedImage from "@/components/AuthenticatedImage.vue";
|
||||
import InputPhoto from "@/components/inputs/InputPhoto.vue";
|
||||
import Modal from "@/components/Modal.vue";
|
||||
import EditItem from "@/components/EditItem.vue";
|
||||
|
||||
export default {
|
||||
name: 'Item',
|
||||
components: {
|
||||
EditItem,
|
||||
Modal, InputPhoto, AuthenticatedImage, InputString, InputCombo, AsyncLoader, ClipboardButton, Timeline
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
newComment: "",
|
||||
editingItem: {},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['state_options', 'users']),
|
||||
...mapGetters(['availableShippingVoucherTypes', 'getAllItems', 'route', 'getBoxes']),
|
||||
item() {
|
||||
const id = parseInt(this.route.params.id)
|
||||
const ret = this.getAllItems.find(item => item.id === id);
|
||||
return ret ? ret : {};
|
||||
},
|
||||
boxes() {
|
||||
return this.getBoxes.map(obj => ({cid: obj.cid, box: obj.name}));
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['deleteItem', 'markItemReturned', 'updateTicketPartial', 'postComment']),
|
||||
...mapActions(['loadTickets', 'fetchTicketStates', 'loadUsers', 'scheduleAfterInit', 'updateItem']),
|
||||
...mapActions(['claimShippingVoucher', 'fetchShippingVouchers', 'loadEventItems', 'loadBoxes']),
|
||||
...mapMutations(['openLightboxModalWith']),
|
||||
addCommentAndClear: async function () {
|
||||
await this.postComment({
|
||||
id: this.ticket.id,
|
||||
message: this.newComment
|
||||
})
|
||||
this.newComment = "";
|
||||
},
|
||||
closeEditingModal() {
|
||||
this.editingItem = null;
|
||||
},
|
||||
async saveEditingItem() { // Saves the edited copy of the item.
|
||||
await this.updateItem(this.editingItem);
|
||||
this.editingItem = {...this.item}
|
||||
},
|
||||
storeImage(image) {
|
||||
this.item.dataImage = image;
|
||||
},
|
||||
confirm(message) {
|
||||
return window.confirm(message);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.scheduleAfterInit(() => [Promise.all([this.loadEventItems(), this.loadBoxes()]).then(() => {
|
||||
this.selected_state = this.item.state;
|
||||
this.selected_assignee = this.item.assigned_to
|
||||
this.editingItem = {...this.item}
|
||||
})]);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -1,26 +1,13 @@
|
|||
<template>
|
||||
<AsyncLoader :loaded="isItemsLoaded">
|
||||
<div class="container-fluid px-xl-5 mt-3">
|
||||
<Modal title="Edit Item" v-if="editingItem" @close="closeEditingModal()">
|
||||
<template #body>
|
||||
<EditItem
|
||||
:item="editingItem"
|
||||
badge="uid"
|
||||
/>
|
||||
</template>
|
||||
<template #buttons>
|
||||
<button type="button" class="btn btn-secondary" @click="closeEditingModal()">Cancel</button>
|
||||
<button type="button" class="btn btn-success" @click="saveEditingItem()">Save Changes</button>
|
||||
</template>
|
||||
</Modal>
|
||||
<Lightbox v-if="lightboxHash" :hash="lightboxHash" @close="closeLightboxModal()"/>
|
||||
<div class="row" v-if="layout === 'table'">
|
||||
<div class="col-xl-8 offset-xl-2">
|
||||
<Table
|
||||
:columns="['uid', 'description', 'box']"
|
||||
:columns="['id', 'description', 'box']"
|
||||
:items="getEventItems"
|
||||
:keyName="'uid'"
|
||||
@itemActivated="openLightboxModalWith($event)"
|
||||
:keyName="'id'"
|
||||
@itemActivated="showItemDetail"
|
||||
>
|
||||
<template #actions="{ item }">
|
||||
<div class="btn-group">
|
||||
|
|
@ -43,11 +30,11 @@
|
|||
</div>
|
||||
<Cards
|
||||
v-if="layout === 'cards'"
|
||||
:columns="['uid', 'description', 'box']"
|
||||
:columns="['id', 'description', 'box']"
|
||||
:items="getEventItems"
|
||||
:keyName="'uid'"
|
||||
:keyName="'id'"
|
||||
v-slot="{ item }"
|
||||
@itemActivated="openLightboxModalWith($event)"
|
||||
@itemActivated="item => openLightboxModalWith(item.file)"
|
||||
>
|
||||
<AuthenticatedImage v-if="item.file" cached
|
||||
:src="`/media/2/256/${item.file}/`"
|
||||
|
|
@ -55,14 +42,14 @@
|
|||
/>
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">{{ item.description }}</h6>
|
||||
<h6 class="card-subtitle text-secondary">uid: {{ item.uid }} box: {{ item.box }}</h6>
|
||||
<h6 class="card-subtitle text-secondary">id: {{ item.id }} box: {{ item.box }}</h6>
|
||||
<div class="row mx-auto mt-2">
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-outline-success"
|
||||
@click.stop="confirm('return Item?') && markItemReturned(item)" title="returned">
|
||||
<font-awesome-icon icon="check"/>
|
||||
</button>
|
||||
<button class="btn btn-outline-secondary" @click.stop="openEditingModalWith(item)"
|
||||
<button class="btn btn-outline-secondary" @click.stop="showItemDetail(item)"
|
||||
title="edit">
|
||||
<font-awesome-icon icon="edit"/>
|
||||
</button>
|
||||
|
|
@ -84,10 +71,10 @@ import Table from '@/components/Table';
|
|||
import Cards from '@/components/Cards';
|
||||
import Modal from '@/components/Modal';
|
||||
import EditItem from '@/components/EditItem';
|
||||
import {mapActions, mapGetters, mapState} from 'vuex';
|
||||
import Lightbox from '../components/Lightbox';
|
||||
import {mapActions, mapGetters, mapMutations} from 'vuex';
|
||||
import AuthenticatedImage from "@/components/AuthenticatedImage.vue";
|
||||
import AsyncLoader from "@/components/AsyncLoader.vue";
|
||||
import router from "@/router";
|
||||
|
||||
export default {
|
||||
name: 'Items',
|
||||
|
|
@ -95,28 +82,15 @@ export default {
|
|||
lightboxHash: null,
|
||||
editingItem: null,
|
||||
}),
|
||||
components: {AsyncLoader, AuthenticatedImage, Lightbox, Table, Cards, Modal, EditItem},
|
||||
components: {AsyncLoader, AuthenticatedImage, Table, Cards, Modal, EditItem},
|
||||
computed: {
|
||||
...mapState([]),
|
||||
...mapGetters(['getEventItems', 'isItemsLoaded', 'layout']),
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['deleteItem', 'markItemReturned', 'loadEventItems', 'updateItem', 'scheduleAfterInit']),
|
||||
openLightboxModalWith(item) {
|
||||
this.lightboxHash = item.file;
|
||||
},
|
||||
closeLightboxModal() { // Closes the editing modal and discards the edited copy of the item.
|
||||
this.lightboxHash = null;
|
||||
},
|
||||
openEditingModalWith(item) { // Opens the editing modal with a copy of the selected item.
|
||||
this.editingItem = item;
|
||||
},
|
||||
closeEditingModal() {
|
||||
this.editingItem = null;
|
||||
},
|
||||
saveEditingItem() { // Saves the edited copy of the item.
|
||||
this.updateItem(this.editingItem);
|
||||
this.closeEditingModal();
|
||||
...mapMutations(['openLightboxModalWith']),
|
||||
showItemDetail(item) {
|
||||
router.push({name: 'item', params: {id: item.id}});
|
||||
},
|
||||
confirm(message) {
|
||||
return window.confirm(message);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<AsyncLoader :loaded="ticket.id">
|
||||
<AsyncLoader :loaded="!!ticket.id">
|
||||
<div class="container-fluid px-xl-5 mt-3">
|
||||
<div class="row">
|
||||
<div class="col-xl-8 offset-xl-2">
|
||||
|
|
@ -7,7 +7,42 @@
|
|||
<div class="card-header">
|
||||
<h3>Ticket #{{ ticket.id }} - {{ ticket.name }}</h3>
|
||||
</div>
|
||||
<Timeline :timeline="ticket.timeline" @sendMail="handleMail" @addComment="handleComment"/>
|
||||
<Timeline :timeline="ticket.timeline">
|
||||
<template v-slot:timeline_action1>
|
||||
<span class="timeline-item-icon | faded-icon">
|
||||
<font-awesome-icon icon="comment"/>
|
||||
</span>
|
||||
<div class="new-comment card bg-dark">
|
||||
<div>
|
||||
<textarea placeholder="add comment..." v-model="newComment"
|
||||
class="form-control">
|
||||
</textarea>
|
||||
<AsyncButton class="btn btn-primary float-right" :task="addCommentAndClear">
|
||||
<font-awesome-icon icon="comment"/>
|
||||
Save Comment
|
||||
</AsyncButton>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:timeline_action2>
|
||||
<span class="timeline-item-icon | faded-icon">
|
||||
<font-awesome-icon icon="envelope"/>
|
||||
</span>
|
||||
<div class="new-mail card bg-dark">
|
||||
<div class="card-header">
|
||||
{{ newestMailSubject }}
|
||||
</div>
|
||||
<div>
|
||||
<textarea placeholder="reply mail..." v-model="newMail" class="form-control">
|
||||
</textarea>
|
||||
<AsyncButton class="btn btn-primary float-right" :task="sendMailAndClear">
|
||||
<font-awesome-icon icon="envelope"/>
|
||||
Send Mail
|
||||
</AsyncButton>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Timeline>
|
||||
<div class="card-footer d-flex justify-content-between">
|
||||
<button class="btn btn-secondary mr-2" @click="$router.go(-1)">Back</button>
|
||||
<!--button class="btn btn-danger" @click="deleteItem({type: 'tickets', id: ticket.id})">
|
||||
|
|
@ -16,11 +51,14 @@
|
|||
</button-->
|
||||
<div class="btn-group">
|
||||
<select class="form-control" v-model="selected_assignee">
|
||||
<option v-for="user in users" :value="user.username">{{ user.username }}</option>
|
||||
<option v-for="user in users" :value="user.username">{{
|
||||
user.username
|
||||
}}
|
||||
</option>
|
||||
</select>
|
||||
<button class="form-control btn btn-success"
|
||||
@click="assignTicket(ticket)"
|
||||
:disabled="!selected_assignee || (selected_assignee == ticket.assigned_to)">
|
||||
:disabled="!selected_assignee || (selected_assignee === ticket.assigned_to)">
|
||||
Assign Ticket
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -33,7 +71,7 @@
|
|||
</select>
|
||||
<button class="form-control btn btn-success"
|
||||
@click="changeTicketStatus(ticket)"
|
||||
:disabled="(selected_state == ticket.state)">
|
||||
:disabled="(selected_state === ticket.state)">
|
||||
Change Status
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -58,25 +96,53 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-xl-2 d-lg-none d-xl-block"
|
||||
v-if="ticket.related_items && ticket.related_items.length">
|
||||
<div class="card bg-dark text-light mb-2" id="filters">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title text-info">Related</h5>
|
||||
<div class="card bg-dark" v-for="item in ticket.related_items" v-bind:key="item.id">
|
||||
<AuthenticatedImage v-if="item.file" cached
|
||||
:src="`/media/2/256/${item.file}/`"
|
||||
class="d-block card-img"
|
||||
@click="openLightboxModalWith(item.file)"
|
||||
/>
|
||||
<div class="card-body">
|
||||
<!--h6 class="card-title text-info"><span class="badge badge-primary">{{ item.relation_status }}</span></--h6-->
|
||||
<h6 class="card-subtitle text-secondary">id: {{ item.id }} box: {{
|
||||
item.box
|
||||
}}</h6>
|
||||
<router-link :to="{name: 'item', params: {id: item.id}}">
|
||||
<h6 class="card-title">{{ item.description }}</h6>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</AsyncLoader>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapActions, mapGetters, mapState} from 'vuex';
|
||||
import {mapActions, mapGetters, mapMutations, mapState} from 'vuex';
|
||||
import Timeline from "@/components/Timeline.vue";
|
||||
import ClipboardButton from "@/components/inputs/ClipboardButton.vue";
|
||||
import AsyncLoader from "@/components/AsyncLoader.vue";
|
||||
import AuthenticatedImage from "@/components/AuthenticatedImage.vue";
|
||||
import AsyncButton from "@/components/inputs/AsyncButton.vue";
|
||||
|
||||
export default {
|
||||
name: 'Ticket',
|
||||
components: {AsyncLoader, ClipboardButton, Timeline},
|
||||
components: {AsyncButton, AuthenticatedImage, AsyncLoader, ClipboardButton, Timeline},
|
||||
data() {
|
||||
return {
|
||||
selected_state: null,
|
||||
selected_assignee: null,
|
||||
shipping_voucher_type: null,
|
||||
newMail: "",
|
||||
newComment: ""
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -90,46 +156,52 @@ export default {
|
|||
shippingEmail() {
|
||||
const domain = document.location.hostname;
|
||||
return `ticket+${this.ticket.uuid}@${domain}`;
|
||||
}
|
||||
},
|
||||
newestMailSubject() {
|
||||
const mail = this.ticket.timeline ? this.ticket.timeline.filter(item => item.type === 'mail').pop() : null;
|
||||
return mail ? mail.subject : "";
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['deleteItem', 'markItemReturned', 'sendMail', 'updateTicketPartial', 'postComment']),
|
||||
...mapActions(['loadTickets', 'fetchTicketStates', 'loadUsers', 'scheduleAfterInit']),
|
||||
...mapActions(['claimShippingVoucher', 'fetchShippingVouchers']),
|
||||
handleMail(mail) {
|
||||
this.sendMail({
|
||||
id: this.ticket.id,
|
||||
message: mail
|
||||
})
|
||||
},
|
||||
handleComment(comment) {
|
||||
this.postComment({
|
||||
id: this.ticket.id,
|
||||
message: comment
|
||||
})
|
||||
},
|
||||
changeTicketStatus(ticket) {
|
||||
ticket.state = this.selected_state;
|
||||
...mapMutations(['openLightboxModalWith']),
|
||||
changeTicketStatus() {
|
||||
this.ticket.state = this.selected_state;
|
||||
this.updateTicketPartial({
|
||||
id: ticket.id,
|
||||
id: this.ticket.id,
|
||||
state: this.selected_state,
|
||||
})
|
||||
},
|
||||
assignTicket(ticket) {
|
||||
ticket.assigned_to = this.selected_assignee;
|
||||
assignTicket() {
|
||||
this.ticket.assigned_to = this.selected_assignee;
|
||||
this.updateTicketPartial({
|
||||
id: ticket.id,
|
||||
id: this.ticket.id,
|
||||
assigned_to: this.selected_assignee
|
||||
})
|
||||
},
|
||||
sendMailAndClear: async function () {
|
||||
await this.sendMail({
|
||||
id: this.ticket.id,
|
||||
message: this.newMail,
|
||||
})
|
||||
this.newMail = "";
|
||||
},
|
||||
addCommentAndClear: async function () {
|
||||
await this.postComment({
|
||||
id: this.ticket.id,
|
||||
message: this.newComment
|
||||
})
|
||||
this.newComment = "";
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.scheduleAfterInit(() => [Promise.all([this.fetchTicketStates(), this.loadTickets(), this.loadUsers(), this.fetchShippingVouchers()]).then(() => {
|
||||
if (this.ticket.state == "pending_new") {
|
||||
if (this.ticket.state === "pending_new") {
|
||||
this.selected_state = "pending_open";
|
||||
this.changeTicketStatus(this.ticket)
|
||||
this.changeTicketStatus()
|
||||
}
|
||||
;
|
||||
this.selected_state = this.ticket.state;
|
||||
this.selected_assignee = this.ticket.assigned_to
|
||||
})]);
|
||||
|
|
|
|||
|
|
@ -12,11 +12,11 @@
|
|||
>
|
||||
<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)">
|
||||
<router-link :to="{name: 'ticket', params: {id: item.id}}" class="btn btn-primary"
|
||||
title="view">
|
||||
<font-awesome-icon icon="eye"/>
|
||||
View
|
||||
</a>
|
||||
</router-link>
|
||||
</div>
|
||||
</template>
|
||||
</Table>
|
||||
|
|
@ -39,11 +39,11 @@
|
|||
<td v-if="getEventSlug==='all'">{{ item.event }}</td>
|
||||
<td>
|
||||
<div class="btn-group">
|
||||
<a class="btn btn-primary" :href="'/'+ getEventSlug + '/ticket/' + item.id" title="view"
|
||||
@click.prevent="gotoDetail(item)">
|
||||
<router-link :to="{name: 'ticket', params: {id: item.id}}" class="btn btn-primary"
|
||||
title="view">
|
||||
<font-awesome-icon icon="eye"/>
|
||||
View
|
||||
</a>
|
||||
</router-link>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
@ -55,24 +55,22 @@
|
|||
|
||||
<script>
|
||||
import Cards from '@/components/Cards';
|
||||
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 CollapsableCards from "@/components/CollapsableCards.vue";
|
||||
import AsyncLoader from "@/components/AsyncLoader.vue";
|
||||
import router from "@/router";
|
||||
|
||||
export default {
|
||||
name: 'Tickets',
|
||||
components: {AsyncLoader, Lightbox, Table, Cards, Modal, EditItem, CollapsableCards},
|
||||
components: {AsyncLoader, Table, Cards, CollapsableCards},
|
||||
computed: {
|
||||
...mapGetters(['getEventTickets', 'isTicketsLoaded', 'stateInfo', 'getEventSlug', 'layout']),
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['loadTickets', 'fetchTicketStates', 'scheduleAfterInit']),
|
||||
gotoDetail(ticket) {
|
||||
this.$router.push({name: 'ticket', params: {id: ticket.id}});
|
||||
router.push({name: 'ticket', params: {id: ticket.id}});
|
||||
},
|
||||
formatTicket(ticket) {
|
||||
return {
|
||||
|
|
|
|||
Loading…
Reference in a new issue