flaschengeist-schedule/src/components/management/EditJobSlot.vue

<template>
  <q-card class="fit">
    <q-card-section
      v-if="!active"
      class="fit row justify-start content-center items-center text-center"
      @click="$emit('activate')"
    >
      <div class="text-h6 col-12">{{ formatStartEnd(modelValue.start, modelValue.end) }}</div>
      <div class="text-subtitle1 col-12">{{ typeName }} ({{ modelValue.required_services }})</div>
      <div class="text-body2 text-italic text-left col-12">{{ modelValue.comment }}</div>
    </q-card-section>
    <q-card-section v-else>
      <q-form ref="form" class="fit row justify-start content-center items-center">
        <IsoDateInput
          v-model="job.start"
          class="col-xs-12 col-sm-6 q-pa-sm"
          label="Beginn"
          type="datetime"
          :rules="[notEmpty]"
        />
        <IsoDateInput
          v-model="job.end"
          class="col-xs-12 col-sm-6 q-pa-sm"
          label="Ende"
          type="datetime"
          :rules="[notEmpty, isAfterDate]"
        />
        <q-select
          v-model="job.type"
          filled
          use-input
          label="Dienstart"
          input-debounce="0"
          class="col-xs-12 col-sm-6 q-pa-sm"
          :options="jobtypes"
          option-label="name"
          option-value="id"
          map-options
          clearable
          :rules="[notEmpty]"
        />
        <q-input
          v-model="job.required_services"
          filled
          class="col-xs-12 col-sm-6 q-pa-sm"
          label="Dienstanzahl"
          type="number"
          :rules="[notEmpty]"
        />
        <q-input
          v-model="job.comment"
          class="col-12 q-pa-sm"
          label="Kommentar"
          type="textarea"
          filled
        />
      </q-form>
    </q-card-section>
    <q-card-actions>
      <q-btn label="Schicht löschen" color="negative" :disabled="canDelete" @click="$emit('remove-job')" />
    </q-card-actions>
  </q-card>
</template>

<script lang="ts">
import { defineComponent, computed, onBeforeMount, ref, PropType } from 'vue';
import { IsoDateInput } from '@flaschengeist/api/components';
import { formatStartEnd, notEmpty } from '@flaschengeist/api';
import { useEventStore } from '../../store';
import { QForm } from 'quasar';

export default defineComponent({
  name: 'JobSlot',
  components: { IsoDateInput },
  props: {
    active: {
      type: Boolean,
      required: true,
    },
    modelValue: {
      required: true,
      type: Object as PropType<FG.Job>,
    },
    canDelete: {
      type: Boolean,
      default: false,
    },
  },
  emits: {
    activate: () => true,
    'remove-job': () => true,
    'update:modelValue': (job: FG.Job) => !!job,
  },
  setup(props, { emit, expose }) {
    const store = useEventStore();

    onBeforeMount(() => store.getJobTypes());

    const form = ref<QForm>();

    const jobtypes = computed(() => store.jobTypes);

    const typeName = computed(() =>
      typeof props.modelValue.type === 'object'
        ? props.modelValue.type.name
        : jobtypes.value.find((j) => j.id === props.modelValue.type)?.name || 'Kein Typ gesetzt!'
    );

    const job = new Proxy(props.modelValue, {
      get(target, prop) {
        if (typeof prop === 'string') {
          return (props.modelValue as unknown as Record<string, unknown>)[prop];
        }
      },
      set(obj, prop, value) {
        if (typeof prop === 'string') {
          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
          emit('update:modelValue', Object.assign({}, props.modelValue, { [prop]: value }));
        }
        return true;
      },
    });

    function isAfterDate(val: Date) {
      return props.modelValue.start < val || 'Ende muss hinter dem Start liegen';
    }

    expose({
      validate: () => form.value?.validate() || Promise.resolve(true)
    });

    return {
      form,
      formatStartEnd,
      isAfterDate,
      job,
      jobtypes,
      notEmpty,
      typeName,
    };
  },
});

</script>

<style></style>