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

<template>
  <q-card
    class="q-mx-xs q-mt-sm justify-start content-center items-center rounded-borders shadow-5"
    bordered
  >
    <q-card-section class="text-primary q-pa-xs">
      <div class="text-weight-bolder text-center" style="font-size: 1.5vw">
        {{ event.type.name }}
        <template v-if="event.name"
          >: <span style="font-size: 1.2vw">{{ event.name }}</span>
        </template>
      </div>
      <div v-if="event.description" class="text-weight-medium" style="font-size: 1vw">
        {{ event.description }}
      </div>
    </q-card-section>
    <q-separator />
    <q-card-section class="q-pa-xs">
      <!-- Jobs -->
      <JobSlot
        v-for="(job, index) in event.jobs"
        :key="index"
        v-model="event.jobs[index]"
        class="col q-my-xs"
        :event-id="event.id"
      />
    </q-card-section>
    <q-card-actions v-if="canEdit || canDelete" vertical align="center">
      <router-link v-if="canEdit" :to="{ name: 'events-edit', params: { id: event.id } }">
        <template #default>
          <q-btn color="secondary" flat label="Bearbeiten" style="min-width: 95%" />
        </template>
      </router-link>
      <q-btn
        v-if="canDelete"
        color="negative"
        flat
        label="Löschen"
        style="min-width: 95%"
        @click="remove"
      />
    </q-card-actions>
  </q-card>
</template>

<script lang="ts">
import { defineComponent, computed, PropType } from 'vue';
import { hasPermission } from 'src/utils/permission';
import { PERMISSIONS } from 'src/plugins/schedule/permissions';
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,
    removeEvent: (val: number) => typeof val === 'number',
  },
  setup(props, { emit }) {
    const canDelete = computed(() => hasPermission(PERMISSIONS.DELETE));
    const canEdit = computed(
      () =>
        hasPermission(PERMISSIONS.EDIT) &&
        (props.modelValue?.end || props.modelValue.start) > new Date()
    );
    const event = computed({
      get: () => props.modelValue,
      set: (v) => emit('update:modelValue', v),
    });

    function remove() {
      emit('removeEvent', props.modelValue.id);
    }

    return {
      canDelete,
      canEdit,
      remove,
      event,
    };
  },
});
</script>

<style scoped></style>