flaschengeist-frontend/src/plugins/schedule/components/overview/slots/EventSlot.vue

<template>
  <q-card
    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
  >
    <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 text-weight-medium " style="font-size: 10px">
        Info
        {{ event.description }}
      </div>
    </header>

    <div v-for="(job, index) in event.jobs" v-bind:key="index">
      <q-separator style="justify-start content-center" />
      <div class="text-weight-medium q-px-xs">
        {{ job.start | formatToHour }} - {{ job.end | formatToHour }}
      </div>
      <div class="q-px-xs">
        {{ job.type.name }}
      </div>
      <div class="col-auto q-px-xs" style="font-size: 10px">
        {{ job.comment }}
      </div>
      <div>
        <q-select
          filled
          v-model="job.services"
          :option-label="opt => userDisplay(opt)"
          multiple
          disable
          use-chips
          stack-label
          label="Dienste"
          class="col-auto q-px-xs"
          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, onBeforeMount } from '@vue/composition-api';
import { Store } from 'vuex';
import { StateInterface } from 'src/store';
import { date } from 'quasar';

interface Props {
  event: FG.Event;
}
export default defineComponent({
  name: 'Eventslot',
  components: {},
  props: {
    event: {
      required: true
    }
  },
  filters: {
    formatToHour: function(value: Date) {
      if (value) {
        return date.formatDate(value, 'HH:mm');
      }
    }
  },

  setup(props: Props, { root, emit }) {
    const store = <Store<StateInterface>>root.$store;
    const state = store.state.user;
    const availableUsers = null;
    const refreshKey = ref(0);

    const users = ref(state.users);
    function refresh() {
      root.$router.go(0);
      refreshKey.value += 1;
    }
    onBeforeMount(() => {
      store.dispatch('user/getUsers').catch(error => {
        console.warn(error);
      });
    });

    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,
      enrollForJob,
      state,
      users,
      isUserEnrolled,
      signOutFromJob,
      jobFull,
      userDisplay,
      refresh
    };
  }
});
</script>

<style scoped></style>