c3lf/c3lf-system-3
7
0
Fork 0
Code Issues 53 Pull requests 1 Projects 2 Releases Wiki Activity Actions

add basic view for item history
All checks were successful
/ test (pull_request) Successful in 48s
Details
/ test (push) Successful in 50s
Details
/ deploy (push) Successful in 4m51s
Details

Browse source
This commit is contained in:
j3d1 2024-11-27 19:39:58 +01:00
parent eb9e9088ca
commit 2a2ef61fc4
18 changed files with 630 additions and 311 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
web/src/App.vue
View file

@ -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;

12
web/src/components/AuthenticatedImage.vue
View file

@ -42,9 +42,8 @@ export default {
url: this.src,
data: this.image_data
});
}
},
mounted() {
deferImage() {
setTimeout(() => {
if (this.cached) {
const c = this.getThumbnail(this.src);
@ -56,5 +55,14 @@ export default {
this.loadImage();
}, 0);
}
},
watch: {
src: function (newVal, oldVal) {
this.deferImage()
}
},
mounted() {
this.deferImage();
}
}
</script>

6
web/src/components/CollapsableCards.vue
View file

@ -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,

3
web/src/components/EditItem.vue
View file

@ -12,6 +12,8 @@
field="description"
:validation-fn="str => str && str.length > 0"
/>
<div class="form-group">
<label for="box">box</label>
<InputCombo
label="box"
:model="item"
@ -20,6 +22,7 @@
:options="boxes"
/>
</div>
</div>
</template>
<script>

76
web/src/components/Timeline.vue
View file

@ -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 */

39
web/src/components/TimelineMail.vue
View file

@ -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
View 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>

72
web/src/components/TimelineRelatedItem.vue
View file

@ -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-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>
<!--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-->
</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
View 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
web/src/components/inputs/AsyncButton.vue
View file

@ -24,7 +24,6 @@ export default {
},
methods: {
async handleClick() {
console.log("AsyncButton.handleClick() called");
if (this.task && typeof this.task === 'function') {
this.disabled = true;
try {

3
web/src/components/inputs/InputCombo.vue
View file

@ -1,6 +1,4 @@
<template>
<div class="form-group">
<label :for="label">{{ label }}</label>
<div class="input-group">
<div class="input-group-prepend">
<button
@ -34,7 +32,6 @@
</div>
<Addon type="Combo Box" :is-valid="isValid"/>
</div>
</div>
</template>
<script>

9
web/src/components/inputs/InputPhoto.vue
View file

@ -2,9 +2,10 @@
<div>
<img
v-if="!capturing"
class="img-fluid rounded mx-auto d-block mb-3 img-preview"
:class="imgClass || ['img-fluid', 'rounded', 'mx-auto', 'd-block', 'mb-3', 'img-preview']"
:src="dataImage"
alt="Image not available."
@click="e=>$emit('detail', e)"
/>
<video
v-if="capturing"
@ -44,19 +45,21 @@
</template>
<script>
import {mapMutations} from 'vuex';
import {mapActions, mapMutations} from 'vuex';
export default {
name: 'InputPhoto',
props: ['model', 'field', 'onCapture'],
props: ['model', 'field', 'onCapture', 'imgClass'],
data: () => ({
capturing: false,
streaming: false,
stream: undefined,
dataImage: undefined
}),
emits: ['detail'],
methods: {
...mapMutations(['createToast']),
...mapActions(['fetchImage']),
openStream() {
if (!this.capturing) {
this.capturing = true;

11
web/src/router.js
View file

@ -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'}
},
{

37
web/src/store.js
View file

@ -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) {
@ -457,6 +455,13 @@ const store = createStore({
await dispatch('loadTickets');
}
},
async postItemComment({commit, dispatch, state, getters}, {id, message}) {
const {data, success} = await getters.session.post(`/2/${getters.getEventSlug}/item/${id}/comment/`, {comment: message});
if (data && success) {
state.fetchedData.items = 0;
await dispatch('loadEventItems');
}
},
async loadUsers({commit, state, getters}) {
if (!state.user.token) return;
if (state.fetchedData.users > Date.now() - 1000 * 60 * 60 * 24) return;

186
web/src/views/Item.vue Normal file
View file

@ -0,0 +1,186 @@
<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">
<InputPhoto
v-if="!!editingItem"
:model="editingItem"
field="file"
:on-capture="storeImage"
imgClass="d-block card-img"
/>
<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">
<InputString
v-if="!!editingItem"
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">
<div class="btn-group">
<button class="btn btn-outline-success"
@click.stop="confirm('return Item?') && markItemReturnedAndClose(item)"
title="returned">
<font-awesome-icon icon="check"/>&nbsp;mark&nbsp;returned
</button>
<button class="btn btn-outline-danger"
@click.stop="confirm('delete Item?') && deleteItemAndClose(item)"
title="delete">
<font-awesome-icon icon="trash"/>&nbsp;delete
</button>
</div>
<InputCombo
v-if="!!editingItem"
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>
</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 router from "@/router";
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";
import AsyncButton from "@/components/inputs/AsyncButton.vue";
export default {
name: 'Item',
components: {
AsyncButton,
EditItem,
Modal, InputPhoto, AuthenticatedImage, InputString, InputCombo, AsyncLoader, ClipboardButton, Timeline
},
data() {
return {
newComment: "",
editingItem: null,
}
},
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.id, box: obj.name}));
}
},
methods: {
...mapActions(['deleteItem', 'markItemReturned', 'updateTicketPartial', 'postItemComment']),
...mapActions(['loadTickets', 'fetchTicketStates', 'loadUsers', 'scheduleAfterInit', 'updateItem']),
...mapActions(['claimShippingVoucher', 'fetchShippingVouchers', 'loadEventItems', 'loadBoxes']),
...mapMutations(['openLightboxModalWith']),
async addCommentAndClear() {
await this.postItemComment({
id: this.item.id,
message: this.newComment
})
this.newComment = "";
},
async saveEditingItem() { // Saves the edited copy of the item.
await this.updateItem(this.editingItem);
this.editingItem = {...this.item}
},
storeImage(image) {
this.editingItem.dataImage = image;
},
confirm(message) {
return window.confirm(message);
},
async markItemReturnedAndClose(item) {
await this.markItemReturned(item);
router.back();
},
async deleteItemAndClose(item) {
await this.deleteItem(item);
router.back();
}
},
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>

54
web/src/views/Items.vue
View file

@ -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);

130
web/src/views/Ticket.vue
View file

@ -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&nbsp;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&nbsp;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
})]);

20
web/src/views/Tickets.vue
View file

@ -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 {