fix problems

admin/src/components/ContributionMessages/ContributionMessagesFormular.vue

@@ -7,9 +7,9 @@
             {{ $t('moderator.show-submission-form') }}
           </BFormCheckbox>
         </BFormGroup>
-        <BFormGroup v-if="showResubmissionDate" class="d-flex my-2" group-class="custom-wrapper">
-          <Datepicker v-model="resubmissionDate" type="date" :lower-limit="now"></Datepicker>
-          <time-picker v-model="resubmissionTime"></time-picker>
+        <BFormGroup v-if="showResubmissionDate">
+          <Datepicker v-model="resubmissionDate" type="date" :lower-limit="now" />
+          <time-picker v-model="resubmissionTime" />
         </BFormGroup>
         <BTabs v-model="tabindex" content-class="mt-3" data-test="message-type-tabs">
           <BTab active>

admin/src/components/input/TimePicker.spec.js

@@ -16,22 +16,26 @@ describe('TimePicker', () => {
     await input.setValue('23:45')
 
     // Check if timeValue is updated
-    expect(wrapper.vm.timeValue).toBe('23:45')
+    expect(wrapper.vm.timeValue).toBe('23:45') // test for Vue 3 composition state directly, if possible
 
     // Check if update:modelValue event is emitted with updated value
-    expect(wrapper.emitted('input')).toBeTruthy()
-    expect(wrapper.emitted('input')[0]).toEqual(['23:45'])
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+    expect(wrapper.emitted('update:modelValue')[0]).toEqual(['23:45'])
   })
 
   it('validates and corrects time format on blur', async () => {
-    const wrapper = mount(TimePicker)
+    const wrapper = mount(TimePicker, {
+      props: {
+        modelValue: '99:99', // Set an invalid value initially
+      },
+    })
 
     const input = wrapper.find('input[type="text"]')
 
     // Simulate user input
     await input.setValue('99:99')
-    expect(wrapper.emitted('input')).toBeTruthy()
-    expect(wrapper.emitted('input')[0]).toEqual(['99:99'])
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+    expect(wrapper.emitted('update:modelValue')[0]).toEqual(['99:99'])
 
     // Trigger blur event
     await input.trigger('blur')
@@ -40,12 +44,16 @@ describe('TimePicker', () => {
     expect(wrapper.vm.timeValue).toBe('23:59') // Maximum allowed value for hours and minutes
 
     // Check if update:modelValue event is emitted with corrected value
-    expect(wrapper.emitted('input')).toBeTruthy()
-    expect(wrapper.emitted('input')[1]).toEqual(['23:59'])
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+    expect(wrapper.emitted('update:modelValue')[1]).toEqual(['23:59'])
   })
 
   it('checks handling of empty input', async () => {
-    const wrapper = mount(TimePicker)
+    const wrapper = mount(TimePicker, {
+      props: {
+        modelValue: '', // Set initial empty value
+      },
+    })
     const input = wrapper.find('input[type="text"]')
 
     // Simulate user input with empty string
@@ -58,7 +66,7 @@ describe('TimePicker', () => {
     expect(wrapper.vm.timeValue).toBe('00:00')
 
     // Check if update:modelValue event is emitted with default value
-    expect(wrapper.emitted('input')).toBeTruthy()
-    expect(wrapper.emitted('input')[1]).toEqual(['00:00'])
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+    expect(wrapper.emitted('update:modelValue')[1]).toEqual(['00:00'])
   })
 })

admin/src/components/input/TimePicker.vue

@@ -11,39 +11,53 @@
 </template>
 
 <script>
+import { ref, watch } from 'vue'
+
 export default {
-  // Code written from chatGPT 3.5
   name: 'TimePicker',
   props: {
-    value: {
+    modelValue: {
       type: String,
       default: '00:00',
     },
   },
-  emits: ['input'],
-  data() {
-    return {
-      timeValue: this.value,
-    }
-  },
-  methods: {
-    updateValues(event) {
+  emits: ['update:modelValue'],
+  setup(props, { emit }) {
+    // reactive state
+    const timeValue = ref(props.modelValue)
+
+    // watch for prop changes
+    watch(
+      () => props.modelValue,
+      (newVal) => {
+        timeValue.value = newVal
+      },
+    )
+
+    const updateValues = (event) => {
       // Allow only numbers and ":"
       const inputValue = event.target.value.replace(/[^0-9:]/g, '')
-      this.timeValue = inputValue
-      this.$emit('input', inputValue)
-    },
-    validateAndCorrect() {
-      let [hours, minutes] = this.timeValue.split(':')
+      timeValue.value = inputValue
+      emit('update:modelValue', inputValue)
+    }
+
+    const validateAndCorrect = () => {
+      let [hours, minutes] = timeValue.value.split(':')
 
       // Validate hours and minutes
       hours = Math.min(parseInt(hours) || 0, 23)
       minutes = Math.min(parseInt(minutes) || 0, 59)
 
       // Update the value with correct format
-      this.timeValue = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`
-      this.$emit('input', this.timeValue)
-    },
+      timeValue.value = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`
+      emit('update:modelValue', timeValue.value)
+    }
+
+    return {
+      timeValue,
+      updateValues,
+      validateAndCorrect,
+    }
   },
 }
 </script>