RepeatFirstLastSelect.vue

<!--
  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
  - SPDX-License-Identifier: AGPL-3.0-or-later
-->

<template>
	<NcSelect :allow-empty="false"
		:options="options"
		:model-value="selected"
		:disabled="disabled"
		:placeholder="t('tasks', 'first')"
		:clearable="false"
		input-id="value"
		label="label"
		@update:model-value="select" />
</template>

<script>
import { NcSelect } from '@nextcloud/vue'
import { translate as t } from '@nextcloud/l10n'
import { getTranslatedOrdinalNumber } from '../../filters/recurrenceRuleFormat.js'

export default {
	name: 'RepeatFirstLastSelect',
	components: {
		NcSelect,
	},

	props: {
		/**
		 *
		 */
		bySetPosition: {
			type: Number,
			default: null,
		},

		/**
		 *
		 */
		disabled: {
			type: Boolean,
			required: true,
		},
	},

	emits: ['change'],

	computed: {
		options() {
			return [1, 2, 3, 4, 5, -2, -1].map((ordinal) => ({
				label: getTranslatedOrdinalNumber(ordinal),
				value: ordinal,
			}))
		},

		selected() {
			return this.options.find((option) => option.value === this.bySetPosition)
		},
	},

	methods: {
		t,

		select(value) {
			if (!value) {
				return
			}

			console.debug(value)

			this.$emit('change', value.value)
		},
	},
}
</script>