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

<template>
  <q-card
    class="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">
        {{ 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" :key="index">
      <q-separator style="justify-start content-center" />
      <JobSlot v-model="event.jobs[index]" :event-id="event.id" />
    </div>
  </q-card>
</template>

<script lang="ts">
import { defineComponent, computed, PropType } from 'vue';
import JobSlot from './JobSlot.vue';

export default defineComponent({
  name: 'Eventslot',
  components: { JobSlot },
  props: {
    modelValue: {
      required: true,
      type: Object as PropType<FG.Event>,
    },
  },
  emits: { 'update:modelValue': (val: FG.Event) => !!val },
  setup(props, { emit }) {
    const event = computed({
      get: () => props.modelValue,
      set: (v) => emit('update:modelValue', v),
    });
    return {
      event,
    };
  },
});
</script>

<style scoped></style>