fixup! feat: Reusable duration selector

Signed-off-by: SebastianKrupinski <krupinskis05@gmail.com>

Author: SebastianKrupinski

src/components/Editor/DurationSelector.vue

@@ -70,7 +70,7 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const emit = defineEmits<{
-	'update:model-value': [value: number | string]
+	'update:modelValue': [value: number | string]
 }>()
 const internalSelectedOption = ref<SelectOption | null>(null)
 const customDays = ref<SelectOption | null>(null)
@@ -117,7 +117,6 @@ const selectedOption = computed<SelectOption | null>({
 				id: predefined.value,
 				label: predefined.label,
 			}
-			internalSelectedOption.value = option
 			return option
 		}
 
@@ -127,7 +126,6 @@ const selectedOption = computed<SelectOption | null>({
 				id: 'custom',
 				label: t('calendar', 'Custom'),
 			}
-			internalSelectedOption.value = customOption
 			return customOption
 		}
 
@@ -177,12 +175,24 @@ const minutesOptions = computed<SelectOption[]>(() => {
 
 // Watchers
 watch(() => props.modelValue, (newValue: number | string) => {
-	// Only update custom fields if custom is actually selected and we have a value
-	if (isCustomSelected.value && newValue) {
-		const minutes = typeof newValue === 'string' ? iso8601ToMinutes(newValue) : newValue
-		if (minutes > 0) {
-			updateCustomFields(minutes)
+	const minutes = typeof newValue === 'string' ? iso8601ToMinutes(newValue) : newValue || 0
+
+	// Calculate which option should be selected
+	const predefined = props.predefinedOptions.find((opt: DurationOption) => opt.value === minutes)
+	if (predefined) {
+		internalSelectedOption.value = {
+			id: predefined.value,
+			label: predefined.label,
+		}
+	} else if (props.showCustom && minutes > 0) {
+		internalSelectedOption.value = {
+			id: 'custom',
+			label: t('calendar', 'Custom'),
 		}
+		// Also update custom fields
+		updateCustomFields(minutes)
+	} else {
+		internalSelectedOption.value = null
 	}
 }, { immediate: true })
 
@@ -220,9 +230,9 @@ function onCustomMinutesChange(option: SelectOption): void {
 
 function emitDuration(minutes: number): void {
 	if (props.format === 'iso8601') {
-		emit('update:model-value', minutesToISO8601(minutes))
+		emit('update:modelValue', minutesToISO8601(minutes))
 	} else {
-		emit('update:model-value', minutes)
+		emit('update:modelValue', minutes)
 	}
 }
 
@@ -316,7 +326,7 @@ function minutesToISO8601(totalMinutes: number): string {
 </script>
 
 <template>
-	<div class="property-duration">
+	<div class="duration-selector">
 		<NcSelect
 			:value="selectedOption"
 			:options="allOptions"
@@ -330,15 +340,15 @@ function minutesToISO8601(totalMinutes: number): string {
 		</NcSelect>
 
 		<!-- Custom duration controls (shown when "Custom" is selected) -->
-		<div v-if="isCustomSelected" class="property-duration__custom-controls">
+		<div v-if="isCustomSelected" class="duration-selector__custom-controls">
 			<NcSelect
 				v-if="showDays"
 				:value="customDays"
 				:options="daysOptions"
 				:label-outside="true"
 				:placeholder="t('calendar', 'Days')"
 				:clearable="false"
-				class="property-duration__custom-select"
+				class="duration-selector__custom-select"
 				@input="onCustomDaysChange">
 				<template #selected-option="option">
 					{{ option.label }}
@@ -352,7 +362,7 @@ function minutesToISO8601(totalMinutes: number): string {
 				:label-outside="true"
 				:placeholder="t('calendar', 'Hours')"
 				:clearable="false"
-				class="property-duration__custom-select"
+				class="duration-selector__custom-select"
 				@input="onCustomHoursChange">
 				<template #selected-option="option">
 					{{ option.label }}
@@ -366,7 +376,7 @@ function minutesToISO8601(totalMinutes: number): string {
 				:label-outside="true"
 				:placeholder="t('calendar', 'Minutes')"
 				:clearable="false"
-				class="property-duration__custom-select"
+				class="duration-selector__custom-select"
 				@input="onCustomMinutesChange">
 				<template #selected-option="option">
 					{{ option.label }}
@@ -377,7 +387,7 @@ function minutesToISO8601(totalMinutes: number): string {
 </template>
 
 <style lang="scss" scoped>
-.property-duration {
+.duration-selector {
 	display: flex;
 	flex-direction: column;
 	gap: calc(var(--default-grid-baseline) * 2);
@@ -386,7 +396,7 @@ function minutesToISO8601(totalMinutes: number): string {
 	overflow: hidden;
 }
 
-.property-duration__custom-controls {
+.duration-selector__custom-controls {
 	display: flex;
 	gap: calc(var(--default-grid-baseline) * 2);
 	flex-wrap: nowrap;
@@ -395,9 +405,11 @@ function minutesToISO8601(totalMinutes: number): string {
 	overflow: hidden;
 }
 
-.property-duration__custom-select {
+.duration-selector__custom-select {
 	flex: 1 1 0;
-	min-width: 0;
+	min-width: 0 !important;
 	max-width: 100%;
+	margin: 0;
+	width: 100%;
 }
 </style>

src/views/Proposal/ProposalEditor.vue

@@ -101,7 +101,7 @@
 							:show-days="false"
 							:max-hours="12"
 							:minute-step="15"
-							@update:model-value="changeDuration" />
+							@update:modelValue="changeDuration" />
 						<InviteesListSearch
 							class="proposal-editor__proposal-participants-selector"
 							:already-invited-emails="existingParticipantAddressess"
@@ -1079,6 +1079,10 @@ export default {
 	overflow-y: auto;
 	margin-bottom: calc(var(--default-grid-baseline) * 2);
 	min-height: 0;
+
+	> * {
+		flex-shrink: 0;
+	}
 }
 
 .proposal-editor__row-actions {