jandl-taskmanager-app/app/src/plugins/tm@modal/task/_components/a-timeblock.vue

<template>
  <div class="timeblock w-100">
    <div v-if="deletable && editable" class="x-button">
      <button class="x-button" @click="$emit('removeTimeblock')">x</button>
    </div>
    <div class="datepicker-wrapper">
      <Z-datepicker
        :model-value="timeblock.date"
        label="Dátum"
        format="dd.MM.yyyy"
        locale="sk"
        select-text="Vybrať"
        cancel-text="Zrušiť"
        placeholder="Dátum"
        :auto-apply="true"
        :enable-time-picker="false"
        class="mb-5 modal-input datepicker-input"
        @update:model-value="updateDate"
      />
    </div>
    <div class="splitted-time-inputs">
      <v-text-field
        :value="timeblock.starts_at_time"
        :class="{ error: v$?.timeblock.starts_at_time.$errors.length }"
        type="time"
        variant="solo"
        bg-color="white"
        label="Začiatok"
        @input="updateStartTime"
      />
      <v-text-field
        :value="timeblock.ends_at_time"
        :class="{ error: v$?.timeblock.ends_at_time.$errors.length }"
        type="time"
        variant="solo"
        bg-color="white"
        label="Koniec"
        @input="updateEndTime"
      />
    </div>
  </div>
</template>

<script>
import useVuelidate from '@vuelidate/core';
import { requiredIf } from '@vuelidate/validators';
import ZDatepicker from '@/plugins/tm@_components/z-datepicker.vue';

export default {
  components: {
    ZDatepicker,
  },

  props: {
    timeblock: {
      type: Object,
      required: true,
    },

    deletable: {
      type: Boolean,
      default: false,
    },

    editable: {
      type: Boolean,
      default: false,
    },

    index: {
      type: Number,
    },
  },

  data() {
    return {
      v$: useVuelidate(),
    };
  },

  validations() {
    return {
      timeblock: {
        starts_at_time: { required: requiredIf(this.timeblock.date) },
        ends_at_time: { required: requiredIf(this.timeblock.date) },
      },
    };
  },

  methods: {
    updateDate(date) {
      const updated = { ...this.timeblock, date };
      this.$emit('updateTimeblock', updated);
    },

    updateStartTime(event) {
      const updated = { ...this.timeblock, starts_at_time: event.target.value };
      this.$emit('updateTimeblock', updated);
    },

    updateEndTime(event) {
      const updated = { ...this.timeblock, ends_at_time: event.target.value };
      this.$emit('updateTimeblock', updated);
    },
  },
};
</script>

<style lang="sass" scoped>
.timeblock
    position: relative
    border-top: 1px solid #e0e0e0
    padding: 20px 0 5px 0
    .splitted-time-inputs
        display: flex !important
        flex-direction: row !important
        gap: 15px
        margin-bottom: -11px

    .x-button
        display: flex
        justify-content: flex-end
        align-items: center
        position: relative
        bottom: 5px

        button
            margin-right: 5px

.error input
    border: 1px solid red !important

.datepicker-wrapper
    width: 100%
</style>