add frontend to edit event details

core/inventory/serializers.py

@@ -1,25 +1,49 @@
 from django.utils import timezone
 from rest_framework import serializers
+from rest_framework.relations import SlugRelatedField
 
 from files.models import File
 from inventory.models import Event, Container, Item
 from mail.models import EventAddress
 
 
-class EventAdressSerializer(serializers.ModelSerializer):
-    class Meta:
-        model = EventAddress
-        fields = ['address']
+#class EventAdressSerializer(serializers.ModelSerializer):
+#    class Meta:
+#        model = EventAddress
+#        fields = ['address']
+
+#    def to_internal_value(self, data):
+#        if not isinstance(data, str):
+#            raise serializers.ValidationError('This field must be a string.')
+#
+#    def create(self, validated_data):
+#        return EventAddress.objects.create(**validated_data)
+#
+#    def validate(self, data):
+#        return isinstance(data, str)
+
 
 
 class EventSerializer(serializers.ModelSerializer):
-    addresses = EventAdressSerializer(many=True, required=False)
+    #addresses = EventAdressSerializer(many=True, required=False)
+    addresses = SlugRelatedField(many=True, slug_field='address', queryset=EventAddress.objects.all())
 
     class Meta:
         model = Event
         fields = ['eid', 'slug', 'name', 'start', 'end', 'pre_start', 'post_end', 'addresses']
         read_only_fields = ['eid']
 
+#    def update(self, instance, validated_data):
+#        addresses = validated_data.pop('addresses', None)
+#        instance.save(validated_data)
+#        if addresses:
+#            for address in addresses:
+#                nested_instance, created = EventAddress.objects.get_or_create(address=address)
+#                instance.addresses.add(nested_instance)
+#
+#        return instance
+
+
 
 class ContainerSerializer(serializers.ModelSerializer):
     itemCount = serializers.SerializerMethodField()

core/inventory/tests/v2/test_events.py

@@ -47,6 +47,18 @@ class EventTestCase(TestCase):
         self.assertEqual(Event.objects.all()[0].slug, 'EVENT2')
         self.assertEqual(Event.objects.all()[0].name, 'Event 2 new')
 
+    def test_update_event(self):
+        from rest_framework.test import APIClient
+        event = Event.objects.create(slug='EVENT1', name='Event 1')
+        response = APIClient().patch(f'/api/2/events/{event.eid}/', {'addresses': ['foo@bar.baz', 'foo1@bar.baz']})
+        self.assertEqual(response.status_code, 200)
+        self.assertEqual(response.json()['slug'], 'EVENT1')
+        self.assertEqual(response.json()['name'], 'Event 1')
+        self.assertEqual(len(Event.objects.all()), 1)
+        self.assertEqual(Event.objects.all()[0].slug, 'EVENT1')
+        self.assertEqual(Event.objects.all()[0].name, 'Event 1')
+        self.assertEqual(1, len(response.json()[0]['addresses']))
+
     def test_remove_event(self):
         event = Event.objects.create(slug='EVENT1', name='Event 1')
         Event.objects.create(slug='EVENT2', name='Event 2')
@@ -65,4 +77,3 @@ class EventTestCase(TestCase):
         self.assertEqual('TEST1', response.json()[0]['slug'])
         self.assertEqual('Event', response.json()[0]['name'])
         self.assertEqual(1, len(response.json()[0]['addresses']))
-

web/src/components/ExpandableTable.vue

@@ -0,0 +1,124 @@
+<template>
+    <table class="table table-striped table-dark">
+        <thead>
+        <tr>
+            <th>
+            </th>
+            <th scope="col" v-for="(column, index) in columns" :key="index">
+                <div class="input-group">
+                    <div class="input-group-prepend">
+                        <button
+                            :class="[ 'btn', column === sortBy ? 'btn-outline-info' : 'btn-outline-secondary' ]"
+                            @click="toggleSort(column)"
+                        >
+                            {{ column }}
+                            <span :class="{ 'text-info': column === sortBy }">
+                                    <font-awesome-icon :icon="getSortIcon(column)"/>
+                                </span>
+                        </button>
+                    </div>
+                    <input
+                        type="text"
+                        class="form-control"
+                        placeholder="filter"
+                        :value="filters[column]"
+                        @input="changeFilter(column, $event.target.value)"
+                    >
+                </div>
+            </th>
+            <th>
+                <slot name="header_actions"/>
+            </th>
+        </tr>
+        </thead>
+        <tbody v-for="(item, index) in internalItems" :key="item[keyName]" style="border-top: none">
+        <tr @click="toggle(index)">
+            <td>
+                <font-awesome-icon icon="angle-right" style="width: 1em;" v-if="collapsed[index]"/>
+                <font-awesome-icon icon="angle-down" style="width: 1em;" v-else/>
+            </td>
+            <td v-for="(column, index) in columns" :key="index">{{ item[column] }}</td>
+            <td>
+                <slot v-bind:id="index" v-bind:item="item" name="actions"/>
+            </td>
+        </tr>
+        <tr v-if="!collapsed[index]">
+            <td :colspan="columns.length + 2">
+                <slot v-bind:id="index" v-bind:item="item" name="detail"/>
+            </td>
+        </tr>
+        </tbody>
+    </table>
+</template>
+
+<script>
+import DataContainer from '@/mixins/data-container';
+import router from '../router';
+import {mapGetters} from "vuex";
+
+export default {
+    name: 'ExpandableTable',
+    mixins: [DataContainer],
+    created() {
+        this.columns.map(e => ({
+            k: e,
+            v: this.$store.getters.getFilters[e]
+        })).filter(e => e.v).forEach(e => this.setFilter(e.k, e.v));
+
+        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.internalItems.length);
+        } else {
+            this.collapsed = this.internalItems.map(() => true);
+        }
+    },
+    data() {
+        return {
+            collapsed: [],
+        };
+    },
+    computed: {
+        ...mapGetters(['route']),
+    },
+    methods: {
+        changeFilter(col, val) {
+            this.setFilter(col, val);
+            let newquery = Object.entries({
+                ...this.$store.getters.getFilters,
+                [col]: val
+            }).reduce((a, [k, v]) => (v ? {...a, [k]: v} : a), {});
+            router.push({query: newquery});
+        },
+        packInt(arr) {
+            return arr.reduce((a, e, i) => a + (e ? 0 : 2 ** i), 0);
+        },
+        unpackInt(n, l) {
+            return [...Array(l)].map((e, i) => (n & 2 ** i) === 0);
+        },
+        toggle(index) {
+            const collapsed = [...this.collapsed]
+            collapsed[index] = !collapsed[index];
+            this.collapsed = collapsed;
+        },
+    },
+    watch: {
+        collapsed: {
+            handler() {
+                const encoded = this.packInt(this.collapsed).toString()
+                if (this.route.query.collapsed !== encoded)
+                    this.$router.push({
+                        ...this.route,
+                        query: {...this.route.query, collapsed: encoded}
+                    });
+            },
+            deep: true,
+        },
+    },
+};
+</script>
+
+<style>
+.table-body-move {
+    transition: transform 1s;
+}
+</style>

web/src/store.js

@@ -320,6 +320,13 @@ const store = createStore({
                 commit('replaceEvents', [...state.events.filter(e => e.eid !== 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])
+            }
+        },
         async fetchTicketStates({commit, state}) {
             if (!state.user.token) return;
             if (state.fetchedData.states > Date.now() - 1000 * 60 * 60 * 24) return;

web/src/views/admin/Events.vue

@@ -1,50 +1,102 @@
 <template>
-    <Table
-        :columns="['slug', 'name']"
-        :items="events"
-        :keyName="'slug'"
-    >
-        <template v-slot:header_actions>
-            <button class="btn btn-success" @click.prevent="openAddEventModal">
-                <font-awesome-icon icon="plus"/>
-                Create Event
-            </button>
-        </template>
-        <template v-slot:actions="{ item }">
-            <div class="btn-group">
-                <button class="btn btn-secondary" @click.stop="changeEvent(item)">
-                    <font-awesome-icon icon="archive"/>
-                    use
+    <AsyncLoader :loaded="events.length > 0">
+        <ExpandableTable v-if="!!events" :columns="['slug', 'name']" :items="events" :keyName="'slug'">
+            <template v-slot:header_actions>
+                <button class="btn btn-success" @click.prevent="openAddEventModal">
+                    <font-awesome-icon icon="plus"/>
+                    Create Event
                 </button>
-                <button class="btn btn-danger" @click.stop="safeDeleteEvent(item.eid)">
-                    <font-awesome-icon icon="trash"/>
-                    delete
-                </button>
-            </div>
-        </template>
-    </Table>
+            </template>
+            <template v-slot:actions="{ item }">
+                <div class="btn-group">
+                    <button class="btn btn-secondary" @click.stop="changeEvent(item)" style="white-space: nowrap;">
+                        <font-awesome-icon icon="archive"/>&nbsp;use
+                    </button>
+                    <button class="btn btn-danger" @click.stop="safeDeleteEvent(item.eid)" style="white-space: nowrap;">
+                        <font-awesome-icon icon="trash"/>&nbsp;delete
+                    </button>
+                </div>
+            </template>
+            <template v-slot:detail="{id, item }">
+                <div class="row">
+                    <div class="col">
+                        <input type="date" class="form-control form-control-sm" title="Buildup Start"
+                               v-model="item.pre_start" disabled style="opacity: 1"
+                               :max="item.start" @focus="prepare_date_field">
+                    </div>
+                    <div class="col">
+                        <input type="date" class="form-control form-control-sm" title="Official Event Start"
+                               v-model="item.start" disabled style="opacity: 1"
+                               :min="item.pre_start" :max="item.end" @focus="prepare_date_field">
+                    </div>
+                    <div class="col">
+                        <input type="date" class="form-control form-control-sm" title="Official Event End"
+                               v-model="item.end" disabled style="opacity: 1"
+                               :min="item.start" :max="item.post_end" @focus="prepare_date_field">
+                    </div>
+                    <div class="col">
+                        <input type="date" class="form-control form-control-sm" title="Teardown End"
+                               v-model="item.post_end" disabled style="opacity: 1"
+                               :min="item.end" @focus="prepare_date_field">
+                    </div>
+                </div>
+                <div class="mt-3">
+                    <label class="mr-3">Addresses: </label>
+                    <div v-for="(address, a_id) in item.addresses" class="btn-group btn-group-sm mr-3"
+                         @click.stop="deleteAddress(id, a_id)">
+                        <button class="btn btn-secondary" disabled style="opacity: 1">
+                            {{ address }}
+                        </button>
+                        <button class="btn btn-danger">
+                            <font-awesome-icon icon="trash"/>
+                        </button>
+                    </div>
+                    <div class="btn-group btn-group-sm">
+                        <input type="text" v-model="new_address[id]">
+                        <button class="btn btn-secondary" @click.stop="addAddress(id)" style="white-space: nowrap;">
+                            <font-awesome-icon icon="envelope"/>&nbsp;add
+                        </button>
+                    </div>
+                </div>
+            </template>
+        </ExpandableTable>
+    </AsyncLoader>
 </template>
 
 <script>
 import {mapActions, mapMutations, mapState} from 'vuex';
-import Table from '@/components/Table';
+import ExpandableTable from "@/components/ExpandableTable.vue";
+import AsyncLoader from "@/components/AsyncLoader.vue";
 
 export default {
     name: 'Events',
-    components: {Table},
+    components: {AsyncLoader, ExpandableTable},
     computed: mapState(['events']),
+    data() {
+        return {new_address: []}
+    },
     methods: {
-        ...mapActions(['changeEvent', 'deleteEvent']),
+        ...mapActions(['changeEvent', 'deleteEvent', 'updateEvent']),
         ...mapMutations(['openAddEventModal']),
         safeDeleteEvent(id) {
             if (confirm('do you want to completely delete this event and related data?')) {
                 this.deleteEvent(id)
             }
         },
+        addAddress(id) {
+            const a = this.new_address[id];
+            if (!this.events[id].addresses.includes(a))
+                this.events[id].addresses.push(a)
+            this.new_address[id] = ""
+            this.updateEvent({id: this.events[id].eid, partial_event: {addresses: this.events[id].addresses}});
+        },
+        deleteAddress(id, a_id) {
+            this.events[id].addresses = this.events[id].addresses.filter((e, i) => i !== a_id);
+            this.updateEvent({id: this.events[id].eid, partial_event: {addresses: this.events[id].addresses}});
+        }
     },
 };
 </script>
 
 <style scoped>
-
 </style>