Minor Styling Changes to Eventslots and enrollment functionality

src/flaschengeist.d.ts

@@ -15,7 +15,7 @@ declare namespace FG {
     mail: string;
     birthday?: Date;
     roles: Array<string>;
-    permissions?: list;
+    permissions?: Array<string>;
     avatar_url?: string;
   }
   type Permission = string;

src/plugins/schedule/components/overview/AgendaView.vue

@@ -31,10 +31,23 @@
               <q-separator vertical />
               <q-btn flat dense label="Next" @click="calendarNext" />
             </div>
+            <!-- <q-space /> -->
+
+            <q-btn-toggle
+              class="row absolute-right"
+              v-model="calendarView"
+              flat
+              stretch
+              toggle-color=""
+              :options="[
+                { label: 'Tag', value: 'day-agenda' },
+                { label: 'Woche', value: 'week-agenda' }
+              ]"
+            />
           </q-toolbar>
           <q-calendar
             v-model="selectedDate"
-            view="week-agenda"
+            :view="calendarView"
             :weekdays="[1, 2, 3, 4, 5, 6, 0]"
             locale="de-de"
             style="height: 100%; min-height: 400px;"
@@ -92,15 +105,18 @@ export default defineComponent({
       }
     }
   },
+
   setup(_, { root }) {
     const store = <Store<StateInterface>>root.$store;
-    const state = <ScheduleInterface>store.state.schedule;
+    const state = computed(() => <ScheduleInterface>store.state.schedule);
     const selectedDate = ref(date.formatDate(new Date(), 'YYYY-MM-DD'));
     const proxyDate = ref('');
+    const calendarView = 'week-agenda';
     const events2 = computed(() => {
-      console.log(state.events);
       let agenda: Agendas = {};
-      state.events
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+      console.log('Hier Passiert was');
+      state.value.events
         .filter(event => {
           const thisWeek = date.formatDate(new Date(selectedDate.value), 'w');
           console.log(thisWeek, date.formatDate(event.start, 'w'));
@@ -124,7 +140,6 @@ export default defineComponent({
 
     onBeforeMount(() => {
       void store.dispatch('schedule/getEvents');
-      // void store.dispatch('schedule/getJobTypes');
     });
     function getAgenda(this: any, day: { weekday: string }) {
       // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
@@ -156,7 +171,8 @@ export default defineComponent({
       calendarPrev,
       updateProxy,
       saveNewSelectedDate,
-      proxyDate
+      proxyDate,
+      calendarView
     };
   }
 });

src/plugins/schedule/components/overview/slots/EventSlot.vue

@@ -1,49 +1,76 @@
 <template>
   <q-card
-    class="background: radial-gradient(circle, #35a2ff 0%, #014a88 100%)   justify-start content-center items-center "
+    class="background: radial-gradient(circle, #35a2ff 0%, #014a88 100%)   justify-start content-center items-center rounded-borders border-primary shadow-5	q-mb-xs"
     bordered
   >
-    {{ event.type.name }}
+    <header class="text-primary q-px-xs">
+      <div class="col text-weight-bolder ellipsis">
+        {{ event.type.name }}
+      </div>
 
-    <div v-if="event.description" class=" col-12 q-px-sm" style="font-size: 10px">
+      <div v-if="event.description" class=" col text-weight-medium " style="font-size: 10px">
-      Info
+        Info
-      {{ event.description }}
+        {{ event.description }}
-    </div>
+      </div>
+    </header>
 
     <div v-for="(job, index) in event.jobs" v-bind:key="index">
       <q-separator style="justify-start content-center" />
-      <div>{{ job.start | formatToHour }} - {{ job.end | formatToHour }}</div>
+      <div class="text-weight-medium q-px-xs">
-      <div>
+        {{ job.start | formatToHour }} - {{ job.end | formatToHour }}
+      </div>
+      <div class="q-px-xs">
         {{ job.type.name }}
       </div>
-      <div class="col-12 q-px-sm" style="font-size: 10px">
+      <div class="col-auto q-px-xs" style="font-size: 10px">
         {{ job.comment }}
       </div>
       <div>
         <q-select
           filled
-          v-model="availableUsers"
+          v-model="job.services"
+          :option-label="opt => userDisplay(opt)"
           multiple
-          :options="availableUsers"
+          disable
           use-chips
           stack-label
           label="Dienste"
-          class="col-12 q-px-sm"
+          class="col-auto q-px-xs"
-          style="font-size: 10px "
+          style="font-size: 6px "
           counter
           :max-values="job.required_services"
+          :key="refreshKey"
         >
         </q-select>
+        <div class="row col-12 justify-end">
+          <q-btn v-if="false" />
+          <q-btn
+            v-if="!isUserEnrolled(job) && !jobFull(job)"
+            flat
+            color="primary"
+            label="Eintragen"
+            @click="enrollForJob(job)"
+            :key="refreshKey"
+          />
+          <q-btn
+            v-if="isUserEnrolled(job)"
+            flat
+            color="negative"
+            label="Austragen"
+            @click="signOutFromJob(job)"
+            :key="refreshKey"
+          />
+        </div>
       </div>
     </div>
   </q-card>
 </template>
 
 <script lang="ts">
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
 import { defineComponent, ref } from '@vue/composition-api';
 import { Store } from 'vuex';
 import { StateInterface } from 'src/store';
-import { ScheduleInterface } from '../../../store/schedule';
 import { date } from 'quasar';
 
 interface Props {
@@ -65,18 +92,85 @@ export default defineComponent({
     }
   },
 
-  setup(props: Props, { root }) {
+  setup(props: Props, { root, emit }) {
     const store = <Store<StateInterface>>root.$store;
-    const state = <ScheduleInterface>store.state.schedule;
+    const state = store.state.user;
     const availableUsers = null;
     const refreshKey = ref(0);
 
+    const users = ref(state.users);
+    function refresh() {
+      refreshKey.value += 1;
+    }
+
+    function isUserEnrolled(job: FG.Job) {
+      return (
+        job.services.filter(service => service.userid == state.currentUser?.userid).length >= 1
+      );
+    }
+    function jobFull(job: FG.Job) {
+      console.log('jobFull', job.services.length >= job.required_services);
+      return job.services.length >= job.required_services;
+    }
+    function userDisplay(userid: string) {
+      return state.users.find(user => (user.userid = userid))?.display_name;
+    }
+
+    function enrollForJob(this: any, job: FG.Job) {
+      console.log(job.services);
+      if (state.currentUser) {
+        const newService: FG.Service = {
+          userid: state.currentUser?.userid,
+          value: 1
+        };
+
+        const newUserService = { user: newService };
+        const UpdateInformation = {
+          eventId: <number>this.event.id,
+          JobId: job.id,
+          service: newUserService
+        };
+        void store.dispatch('schedule/updateEvent', UpdateInformation).catch(error => {
+          console.warn(error);
+        });
+      }
+      refresh();
+    }
+    function signOutFromJob(this: any, job: FG.Job) {
+      console.log(job.services);
+      if (state.currentUser) {
+        const newService: FG.Service = {
+          userid: state.currentUser?.userid,
+          value: -1
+        };
+
+        const newUserService = { user: newService };
+        const UpdateInformation = {
+          eventId: <number>this.event.id,
+          JobId: job.id,
+          service: newUserService
+        };
+        void store.dispatch('schedule/updateEvent', UpdateInformation).catch(error => {
+          console.warn(error);
+        });
+      }
+      refresh();
+    }
+
     return {
       refreshKey,
-      availableUsers
+      availableUsers,
+      enrollForJob,
+      state,
+      users,
+      isUserEnrolled,
+      signOutFromJob,
+      jobFull,
+      userDisplay,
+      refresh
     };
   }
 });
 </script>
 
-<style></style>
+<style scoped></style>

src/plugins/schedule/pages/Management.vue

@@ -70,7 +70,7 @@ export default defineComponent({
     }
 
     const tabs: Tab[] = [
-      { name: 'create', label: 'Veranstantungen' },
+      { name: 'create', label: 'Veranstaltungen' },
       { name: 'eventtypes', label: 'Veranstaltungsarten' },
       { name: 'jobtypes', label: 'Dienstarten' }
     ];

src/plugins/schedule/pages/Overview.vue

@@ -71,7 +71,7 @@ export default defineComponent({
     }
 
     const tabs: Tab[] = [
-      { name: 'agendaView', label: 'Wochenkalendar' }
+      { name: 'agendaView', label: 'Kalendar' }
       // { name: 'eventtypes', label: 'Veranstaltungsarten' },
       // { name: 'jobtypes', label: 'Dienstarten' }
     ];

src/plugins/schedule/store/schedule.ts

@@ -81,6 +81,10 @@ const mutations: MutationTree<ScheduleInterface> = {
   },
   setEvents(state, events: FG.Event[]) {
     state.events = events;
+  },
+  updateEvent(state, event: FG.Event) {
+    let eventToChange = state.events.find(ev => ev.id == event.id);
+    eventToChange = event;
   }
 };
 
@@ -165,7 +169,7 @@ const actions: ActionTree<ScheduleInterface, StateInterface> = {
   },
   changeEventTypeName({ commit }, eventtype: { id: number; name: string; oldname: string }) {
     axios
-      .put(`/schedule/event-types/${eventtype.oldname}`, eventtype)
+      .put(`/schedule/event-types/${eventtype.id}`, eventtype)
       .then(() => {
         commit('setEventType', eventtype);
       })
@@ -185,6 +189,22 @@ const actions: ActionTree<ScheduleInterface, StateInterface> = {
       });
     console.log('Events: ', state.events);
   },
+  updateEvent(
+    { commit },
+    updateInformation: { eventId: number; JobId: number; service: FG.Service }
+  ) {
+    axios
+      .put(
+        `/schedule/events/${updateInformation.eventId}/jobs/${updateInformation.JobId}`,
+        updateInformation.service
+      )
+      .then((response: AxiosResponse<FG.Event>) => {
+        commit('updateEvent', response.data);
+      })
+      .catch(err => {
+        console.warn(err);
+      });
+  },
   getEvents({ commit }) {
     axios
       .get('/schedule/events')
@@ -203,6 +223,9 @@ const actions: ActionTree<ScheduleInterface, StateInterface> = {
 const getters: GetterTree<ScheduleInterface, StateInterface> = {
   jobTypes(state) {
     return state.jobTypes;
+  },
+  events(state) {
+    return state.events;
   }
 };