From a86653ea61aa1c020dbb4f70608f02410decf73e Mon Sep 17 00:00:00 2001 From: jedi Date: Wed, 27 Nov 2024 19:39:58 +0100 Subject: [PATCH] add basic view for item history --- web/src/App.vue | 13 +- web/src/components/AuthenticatedImage.vue | 28 ++- web/src/components/CollapsableCards.vue | 6 +- web/src/components/EditItem.vue | 17 +- web/src/components/Timeline.vue | 76 +++----- web/src/components/TimelineMail.vue | 39 +--- web/src/components/TimelinePlacement.vue | 85 +++++++++ web/src/components/TimelineRelatedItem.vue | 74 ++------ web/src/components/TimelineRelatedTicket.vue | 94 ++++++++++ web/src/components/inputs/InputCombo.vue | 61 +++---- web/src/router.js | 11 +- web/src/store.js | 30 ++- web/src/views/Item.vue | 181 +++++++++++++++++++ web/src/views/Items.vue | 54 ++---- web/src/views/Ticket.vue | 130 ++++++++++--- web/src/views/Tickets.vue | 20 +- 16 files changed, 612 insertions(+), 307 deletions(-) create mode 100644 web/src/components/TimelinePlacement.vue create mode 100644 web/src/components/TimelineRelatedTicket.vue create mode 100644 web/src/views/Item.vue diff --git a/web/src/App.vue b/web/src/App.vue index bd4956f..d2c9f7d 100644 --- a/web/src/App.vue +++ b/web/src/App.vue @@ -1,5 +1,6 @@ diff --git a/web/src/components/Timeline.vue b/web/src/components/Timeline.vue index 88bfa94..41e1274 100644 --- a/web/src/components/Timeline.vue +++ b/web/src/components/Timeline.vue @@ -21,6 +21,9 @@ + + + @@ -30,40 +33,15 @@ + +

{{ item }}

  • - - - -
    -
    - - - - Save Comment - -
    -
    +
  • - - - -
    -
    - {{ newestMailSubject }} -
    -
    - - - - Send Mail - -
    -
    +
    • @@ -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 = ""; - } - } }; - \ No newline at end of file diff --git a/web/src/components/TimelineRelatedItem.vue b/web/src/components/TimelineRelatedItem.vue index c17a3a8..2670215 100644 --- a/web/src/components/TimelineRelatedItem.vue +++ b/web/src/components/TimelineRelatedItem.vue @@ -1,12 +1,15 @@ @@ -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']) + } }; diff --git a/web/src/components/TimelineRelatedTicket.vue b/web/src/components/TimelineRelatedTicket.vue new file mode 100644 index 0000000..694a4e0 --- /dev/null +++ b/web/src/components/TimelineRelatedTicket.vue @@ -0,0 +1,94 @@ + + + + + \ No newline at end of file diff --git a/web/src/components/inputs/InputCombo.vue b/web/src/components/inputs/InputCombo.vue index 50b5459..fc64d42 100644 --- a/web/src/components/inputs/InputCombo.vue +++ b/web/src/components/inputs/InputCombo.vue @@ -1,39 +1,36 @@ diff --git a/web/src/router.js b/web/src/router.js index bad2970..eb059c8 100644 --- a/web/src/router.js +++ b/web/src/router.js @@ -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'} }, { diff --git a/web/src/store.js b/web/src/store.js index 60dba61..2f5a60d 100644 --- a/web/src/store.js +++ b/web/src/store.js @@ -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) { diff --git a/web/src/views/Item.vue b/web/src/views/Item.vue new file mode 100644 index 0000000..91cbb61 --- /dev/null +++ b/web/src/views/Item.vue @@ -0,0 +1,181 @@ + + + + + + diff --git a/web/src/views/Items.vue b/web/src/views/Items.vue index 2f9e5ed..21b11d1 100644 --- a/web/src/views/Items.vue +++ b/web/src/views/Items.vue @@ -1,26 +1,13 @@