c3lf-system-3/web/src/store.js

import {createStore} from 'vuex';
import router from './router';

import * as base64 from 'base-64';
import * as utf8 from 'utf8';
import {ticketStateColorLookup, ticketStateIconLookup, http, http_session} from "@/utils";
import sharedStatePlugin from "@/shared-state-plugin";
import persistentStatePlugin from "@/persistent-state-plugin";

const store = createStore({
    state: {
        keyIncrement: 0,
        events: [],
        items: [],
        loadedBoxes: [],
        toasts: [],
        users: [],
        groups: [],
        state_options: [],
        messageTemplates: [],
        messageTemplateVariables: [],
        shippingVouchers: [],

        loadedItems: {},
        loadedTickets: {},

        lastEvent: 'all',
        lastUsed: {},
        searchQuery: '',
        remember: false,
        user: {
            username: null,
            password: null,
            permissions: [],
            token: null,
            expiry: null,
        },

        thumbnailCache: {},
        fetchedData: {
            events: 0,
            items: 0,
            boxes: 0,
            tickets: 0,
            users: 0,
            groups: 0,
            states: 0,
            messageTemplates: 0,
            shippingVouchers: 0,
        },
        persistent_loaded: false,
        shared_loaded: false,
        afterInitHandlers: [],

        showAddBoxModal: false,
        showAddEventModal: false,
        test: ['foo', 'bar', 'baz'],

        shippingVoucherTypes: {
            '2kg-de': '2kg Paket (DE)',
            '5kg-de': '5kg Paket (DE)',
            '10kg-de': '10kg Paket (DE)',
            '2kg-eu': '2kg Paket (EU)',
            '5kg-eu': '5kg Paket (EU)',
            '10kg-eu': '10kg Paket (EU)',
        }
    },
    getters: {
        route: state => router.currentRoute.value,
        session: state => http_session(state.user.token),
        getEventSlug: state => router.currentRoute.value.params.event ? router.currentRoute.value.params.event : state.lastEvent,
        getAllItems: state => Object.values(state.loadedItems).flat(),
        getAllTickets: state => Object.values(state.loadedTickets).flat(),
        getEventItems: (state, getters) => getters.getEventSlug === 'all' ? getters.getAllItems : getters.getAllItems.filter(t => t.event === getters.getEventSlug || (t.event == null && getters.getEventSlug === 'none')),
        getEventTickets: (state, getters) => getters.getEventSlug === 'all' ? getters.getAllTickets : getters.getAllTickets.filter(t => t.event === getters.getEventSlug || (t.event == null && getters.getEventSlug === 'none')),
        isItemsLoaded: (state, getters) => (getters.getEventSlug === 'all' || getters.getEventSlug === 'none') ? !!state.loadedItems : Object.keys(state.loadedItems).includes(getters.getEventSlug),
        isTicketsLoaded: (state, getters) => (getters.getEventSlug === 'all' || getters.getEventSlug === 'none') ? !!state.loadedTickets : Object.keys(state.loadedTickets).includes(getters.getEventSlug),
        getActiveView: state => router.currentRoute.value.name || 'items',
        getFilters: state => router.currentRoute.value.query,
        getBoxes: state => state.loadedBoxes,
        checkPermission: state => (event, perm) => state.user.permissions &&
            (state.user.permissions.includes(`${event}:${perm}`) || state.user.permissions.includes(`*:${perm}`)),
        hasPermissions: state => state.user.permissions && state.user.permissions.length > 0,
        activeUser: state => state.user.username || 'anonymous',
        stateInfo: state => (slug) => {
            const obj = state.state_options.filter((s) => s.value === slug)[0];
            if (obj) {
                return {
                    color: ticketStateColorLookup(obj.value),
                    icon: ticketStateIconLookup(obj.value),
                    slug: obj.value,
                    text: obj.text,
                }
            } else {
                return {
                    color: 'danger',
                    icon: 'exclamation',
                    slug: slug,
                    text: 'Unknown'
                }
            }
        },
        availableShippingVoucherTypes: state => {
            return Object.keys(state.shippingVoucherTypes).map(key => {
                var count = state.shippingVouchers.filter(voucher => voucher.type === key && voucher.issue_thread === null).length;
                return {id: key, count: count, name: state.shippingVoucherTypes[key]};
            });
        },
        layout: (state, getters) => {
            if (router.currentRoute.value.query.layout)
                return router.currentRoute.value.query.layout;
            if (getters.getActiveView === 'items')
                return 'cards';
            if (getters.getActiveView === 'tickets')
                return 'tasks';
        },
        isLoggedIn(state) {
            return state.user && state.user.username !== null && state.user.token !== null;
        },
        getThumbnail: (state) => (url) => {
            if (!url) return null;
            if (!(url in state.thumbnailCache))
                return null;
            return state.thumbnailCache[url];
        },
    },
    mutations: {
        updateLastUsed(state, diff) {
            state.lastUsed = {...state.lastUsed, ...diff};
        },
        updateLastEvent(state, slug) {
            state.lastEvent = slug;
        },
        replaceEvents(state, events) {
            state.events = events;
            state.fetchedData = {...state.fetchedData, events: Date.now()};
        },
        replaceTicketStates(state, states) {
            state.state_options = states;
            state.fetchedData = {...state.fetchedData, states: Date.now()};
        },
        changeView(state, {view, slug}) {
            router.push({path: `/${slug}/${view}`});
        },
        replaceBoxes(state, loadedBoxes) {
            state.loadedBoxes = loadedBoxes;
            state.fetchedData = {...state.fetchedData, boxes: Date.now()};
        },
        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];
            Object.assign(item, updatedItem);
        },
        removeItem(state, 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);
        },
        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(
                ({id}) => id === updatedTicket.id)[0];
            Object.assign(ticket, updatedTicket);
            state.loadedTickets = {...state.loadedTickets};
        },
        replaceUsers(state, users) {
            state.users = users;
            state.fetchedData = {...state.fetchedData, users: Date.now()};
        },
        replaceGroups(state, groups) {
            state.groups = groups;
            state.fetchedData = {...state.fetchedData, groups: Date.now()};
        },
        openAddBoxModal(state) {
            state.showAddBoxModal = true;
        },
        closeAddBoxModal(state) {
            state.showAddBoxModal = false;
        },
        openAddEventModal(state) {
            state.showAddEventModal = true;
        },
        closeAddEventModal(state) {
            state.showAddEventModal = false;
        },
        createToast(state, {title, message, color}) {
            var toast = {title, message, color, key: state.keyIncrement}
            state.toasts.push(toast);
            state.keyIncrement += 1;
            return toast;
        },
        removeToast(state, key) {
            state.toasts = state.toasts.filter(toast => toast.key !== key);
        },
        setRemember(state, remember) {
            state.remember = remember;
        },
        setUser(state, user) {
            state.user.username = user;
        },
        setPassword(state, password) {
            state.user.password = password;
        },
        setPermissions(state, permissions) {
            state.user.permissions = permissions;
        },
        setToken(state, {token, expiry}) {
            const user = {...state.user};
            user.token = token;
            user.expiry = expiry;
            state.user = user;
        },
        setUserInfo(state, user) {
            state.user = user;
        },
        logout(state) {
            const user = {...state.user};
            user.user = null;
            user.password = null;
            user.token = null;
            user.expiry = null;
            user.permissions = null;
            state.user = user;
        },
        setTest(state, test) {
            state.test = test;
        },
        setThumbnail(state, {url, data}) {
            state.thumbnailCache[url] = data;
        },
        setMessageTemplates(state, templates) {
            state.messageTemplates = templates;
            state.fetchedData = {...state.fetchedData, messageTemplates: Date.now()};
        },
        setMessageTemplateVariables(state, variables) {
            state.messageTemplateVariables = variables;
        },
        setShippingVouchers(state, codes) {
            state.shippingVouchers = codes;
            state.fetchedData = {...state.fetchedData, shippingVouchers: Date.now()};
        },
    },
    actions: {
        async login({commit}, {username, password, remember}) {
            commit('setRemember', remember);
            try {
                const data = await fetch('/api/2/login/', {
                    method: 'POST',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify({username: username, password: password}),
                    credentials: 'omit'
                }).then(r => r.json())
                if (data && data.token) {
                    const {data: {permissions}} = await http.get('/2/self/', data.token);
                    commit('setUserInfo', {...data, permissions, username, password});
                    return true;
                } else {
                    return false;
                }
            } catch (e) {
                console.error(e);
                return false;
            }
        },
        async reloadToken({commit, state}) {
            try {
                if (state.user.username && state.user.password) {
                    const data = await fetch('/api/2/login/', {
                        method: 'POST',
                        headers: {'Content-Type': 'application/json'},
                        body: JSON.stringify({username: state.user.username, password: state.user.password}),
                        credentials: 'omit'
                    }).then(r => r.json()).catch(e => console.error(e))
                    if (data && data.token) {
                        commit('setToken', data);
                        return true;
                    }
                }
            } catch (e) {
                console.error(e);
            }
            //credentials failed, logout
            store.commit('logout');
        },
        //async verifyToken({commit, state}) {
        async afterLogin({dispatch, state}) {
            let promises = [];
            promises.push(dispatch('loadBoxes'));
            promises.push(dispatch('fetchTicketStates'));
            promises.push(dispatch('loadEventItems'));
            promises.push(dispatch('loadTickets'));
            if (!state.user.permissions) {
                promises.push(dispatch('loadUserInfo'));
            }
            await Promise.all(promises);
        },
        async afterSharedInit({dispatch, state}) {
            const handlers = state.afterInitHandlers;
            state.afterInitHandlers = [];
            await Promise.all(handlers.map(h => h()).flat());
        },
        scheduleAfterInit({dispatch, state}, handler) {
            if (state.shared_loaded) {
                Promise.all(handler()).then(() => {
                });
            } else {
                state.afterInitHandlers.push(handler);
            }
        },
        async fetchImage({state}, url) {
            return await fetch(url, {headers: {'Authorization': `Token ${state.user.token}`}});
        },
        async loadUserInfo({commit, getters}) {
            const {data, success} = await getters.session.get('/2/self/');
            commit('setPermissions', data.permissions);
        },
        async loadEvents({commit, state, getters}) {
            if (!state.user.token) return;
            if (state.fetchedData.events > Date.now() - 1000 * 60 * 60 * 24) return;
            const {data, success} = await getters.session.get('/2/events/');
            if (data && success) commit('replaceEvents', data);
        },
        async createEvent({commit, dispatch, state, getters}, event) {
            const {data, success} = await getters.session.post('/2/events/', event);
            if (data && success) commit('replaceEvents', [...state.events, data]);
        },
        async deleteEvent({commit, dispatch, state, getters}, event_id) {
            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)])
            }
        },
        async fetchTicketStates({commit, state, getters}) {
            if (!state.user.token) return;
            if (state.fetchedData.states > Date.now() - 1000 * 60 * 60 * 24) return;
            const {data, success} = await getters.session.get('/2/tickets/states/');
            if (data && success) commit('replaceTicketStates', data);
        },
        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}/`});
        },
        async showBoxContent({getters}, box) {
            await router.push({path: `/${getters.getEventSlug}/items/`, query: {box}});
        },
        async loadEventItems({commit, getters, state}) {
            if (!state.user.token) return;
            if (state.fetchedData.items > Date.now() - 1000 * 60 * 60 * 24) return;
            try {
                const slug = getters.getEventSlug;
                const {data, success} = await getters.session.get(`/2/${slug}/items/`);
                if (data && success) {
                    commit('setItems', {slug, items: data});
                }
            } catch (e) {
                console.error("Error loading items");
            }
        },
        async searchEventItems({commit, getters, state}, query) {
            const encoded_query = base64.encode(utf8.encode(query));
            const slug = getters.getEventSlug;
            const {
                data, success
            } = await getters.session.get(`/2/${slug}/items/${encoded_query}/`);
            if (data && success) {
                commit('setItems', {slug, items: data});
            }
        },
        async loadBoxes({commit, state, getters}) {
            if (!state.user.token) return;
            if (state.fetchedData.boxes > Date.now() - 1000 * 60 * 60 * 24) return;
            const {data, success} = await getters.session.get('/2/boxes/');
            if (data && success) commit('replaceBoxes', data);
        },
        async createBox({commit, dispatch, state, getters}, box) {
            const {data, success} = await getters.session.post('/2/boxes/', box);
            commit('replaceBoxes', data);
            dispatch('loadBoxes').then(() => {
                commit('closeAddBoxModal');
            });
        },
        async deleteBox({commit, dispatch, state, getters}, box_id) {
            await getters.session.delete(`/2/boxes/${box_id}/`);
            dispatch('loadBoxes');
        },
        async updateItem({commit, getters, state}, item) {
            const {
                data, success
            } = await getters.session.put(`/2/${getters.getEventSlug}/item/${item.uid}/`, item);
            commit('updateItem', data);
        },
        async markItemReturned({commit, getters, state}, item) {
            await getters.session.patch(`/2/${getters.getEventSlug}/item/${item.uid}/`, {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);
            commit('removeItem', item);
        },
        async postItem({commit, getters, state}, item) {
            commit('updateLastUsed', {box: item.box, cid: item.cid});
            const {data, success} = await getters.session.post(`/2/${getters.getEventSlug}/item/`, item);
            commit('appendItem', data);
        },
        async loadTickets({commit, state, getters}) {
            if (!state.user.token) return;
            //if (state.fetchedData.tickets > Date.now() - 1000 * 60 * 60 * 24) return;
            const {data, success} = await getters.session.get('/2/tickets/');
            if (data && success) commit('replaceTickets', data);
        },
        async searchEventTickets({commit, getters, state}, query) {
            const encoded_query = base64.encode(utf8.encode(query));

            const {
                data, success
            } = await getters.session.get(`/2/${getters.getEventSlug}/tickets/${encoded_query}/`);
            if (data && success) commit('replaceTickets', data);
        },
        async sendMail({commit, dispatch, state, getters}, {id, message}) {
            const {data, success} = await getters.session.post(`/2/tickets/${id}/reply/`, {message},
                state.user.token);
            if (data && success) {
                state.fetchedData.tickets = 0;
                await dispatch('loadTickets');
            }
        },
        async postManualTicket({commit, dispatch, state, getters}, {sender, message, title,}) {
            const {data, success} = await getters.session.post(`/2/tickets/manual/`, {
                name: title, sender, body: message, recipient: 'mail@c3lf.de'
            });
            await dispatch('loadTickets');
        },
        async postComment({commit, dispatch, state, getters}, {id, message}) {
            const {data, success} = await getters.session.post(`/2/tickets/${id}/comment/`, {comment: message});
            if (data && success) {
                state.fetchedData.tickets = 0;
                await dispatch('loadTickets');
            }
        },
        async loadUsers({commit, state, getters}) {
            if (!state.user.token) return;
            if (state.fetchedData.users > Date.now() - 1000 * 60 * 60 * 24) return;
            const {data, success} = await getters.session.get('/2/users/');
            if (data && success) commit('replaceUsers', data);
        },
        async loadGroups({commit, state, getters}) {
            if (!state.user.token) return;
            if (state.fetchedData.groups > Date.now() - 1000 * 60 * 60 * 24) return;
            const {data, success} = await getters.session.get('/2/groups/');
            if (data && success) commit('replaceGroups', data);
        },
        async updateTicket({commit, state, getters}, ticket) {
            const {data, success} = await getters.session.put(`/2/tickets/${ticket.id}/`, ticket);
            commit('updateTicket', data);
        },
        async updateTicketPartial({commit, state, getters}, {id, ...ticket}) {
            const {data, success} = await getters.session.patch(`/2/tickets/${id}/`, ticket);
            commit('updateTicket', data);
        },
        async fetchMessageTemplates({commit, state}) {
            if (!state.user.token) return;
            if (state.messageTemplates.length > 0) return;
            const {data, success} = await http.get('/2/message_templates/', state.user.token);
            if (data && success) {
                commit('setMessageTemplates', data);
            }
        },
        async updateMessageTemplate({dispatch, state}, template) {
            const {data, success} = await http.patch(`/2/message_templates/${template.id}/`,
                {'message': template.message}, state.user.token);
            if (data && success) {
                state.fetchedData.messageTemplates = 0;
                dispatch('fetchMessageTemplates');
            }
        },
        async fetchMessageTemplateVariables({commit, state}) {
            if (!state.user.token) return;
            if (state.messageTemplateVariables.length > 0) return;
            const {data, success} = await http.get('/2/message_template_variables/', state.user.token);
            if (data && success) {
                commit('setMessageTemplateVariables', data);
            }
        },
        async createMessageTemplate({dispatch, state}, template_name) {
            const {data, success} = await http.post('/2/message_templates/', {
                name: template_name,
                message: '-'
            }, state.user.token);
            if (data && success) {
                dispatch('fetchMessageTemplates');
            }
        },
        async fetchShippingVouchers({commit, state, getters}) {
            if (!state.user.token) return;
            if (state.fetchedData.shippingVouchers > Date.now() - 1000 * 60 * 60 * 24) return;
            const {data, success} = await getters.session.get('/2/shipping_vouchers/');
            if (data && success) {
                commit('setShippingVouchers', data);
            }
        },
        async createShippingVoucher({dispatch, state, getters}, code) {
            const {data, success} = await getters.session.post('/2/shipping_vouchers/', code);
            if (data && success) {
                state.fetchedData.shippingVouchers = 0;
                dispatch('fetchShippingVouchers');
            }
        },
        async claimShippingVoucher({dispatch, state, getters}, {ticket, shipping_voucher_type}) {
            const id = state.shippingVouchers.filter(voucher => voucher.type === shipping_voucher_type && voucher.issue_thread === null)[0].id;
            const {data, success} = await getters.session.patch(`/2/shipping_vouchers/${id}/`, {issue_thread: ticket});
            if (data && success) {
                state.fetchedData.shippingVouchers = 0;
                state.fetchedData.tickets = 0;
                await Promise.all([dispatch('loadTickets'), dispatch('fetchShippingVouchers')]);
            }
        }
    },
    plugins: [
        persistentStatePlugin({ // TODO change remember to some kind of enable field
            prefix: "lf_",
            debug: false,
            isLoadedKey: "persistent_loaded",
            state: [
                "remember",
                "user",
                "events",
                "lastUsed",
            ]
        }),
        sharedStatePlugin({
            debug: false,
            isLoadedKey: "shared_loaded",
            clearingMutation: "logout",
            afterInit: "afterSharedInit",
            state: [
                "test",
                "state_options",
                "fetchedData",
                "loadedItems",
                "users",
                "groups",
                "loadedBoxes",
                "loadedTickets",
                "messageTemplates",
                "messageTemplatesVariables",
                "shippingVouchers",
            ],
            watch: [
                "test",
                "state_options",
                "fetchedData",
                "loadedItems",
                "users",
                "groups",
                "loadedBoxes",
                "loadedTickets",
                "messageTemplates",
                "messageTemplatesVariables",
                "shippingVouchers",
            ],
            mutations: [
                //"replaceTickets",
            ],
        }),
    ],
});

store.watch((state) => state.user, (user) => {
    if (store.getters.isLoggedIn) {
        if (router.currentRoute.value.name === 'login' && router.currentRoute.value.query.redirect) {
            router.push(router.currentRoute.value.query.redirect);
        } else if (router.currentRoute.value.name === 'login') {
            router.push('/');
        }
    } else {
        if (router.currentRoute.value.name !== 'login') {
            router.push({
                name: 'login',
                query: {redirect: router.currentRoute.value.fullPath},
            });
        }
    }
});

export default store;