mirror of https://github.com/nextcloud/calendar
77 lines
1.6 KiB
Vue
77 lines
1.6 KiB
Vue
<template>
|
|
<NcSelect :value="selectedTimezone"
|
|
:options="options"
|
|
:multiple="false"
|
|
:group-select="false"
|
|
:placeholder="placeholder"
|
|
:clearable="false"
|
|
group-values="regions"
|
|
group-label="continent"
|
|
track-by="timezoneId"
|
|
label="label"
|
|
open-direction="above"
|
|
@input="change" />
|
|
</template>
|
|
|
|
<script>
|
|
import { getReadableTimezoneName, getSortedTimezoneList } from '@nextcloud/calendar-js'
|
|
import { NcSelect } from '@nextcloud/vue'
|
|
import { translate as t } from '@nextcloud/l10n'
|
|
|
|
import getTimezoneManager from '../../services/timezoneDataProviderService.js'
|
|
|
|
export default {
|
|
name: 'TimezoneSelect',
|
|
components: {
|
|
NcSelect,
|
|
},
|
|
props: {
|
|
additionalTimezones: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
value: {
|
|
type: String,
|
|
default: 'floating',
|
|
},
|
|
},
|
|
computed: {
|
|
placeholder() {
|
|
return this.$t('calendar', 'Type to search time zone')
|
|
},
|
|
selectedTimezone: {
|
|
get() {
|
|
for (const additionalTimezone of this.additionalTimezones) {
|
|
if (additionalTimezone.timezoneId === this.value) {
|
|
return additionalTimezone
|
|
}
|
|
}
|
|
|
|
return {
|
|
label: getReadableTimezoneName(this.value),
|
|
timezoneId: this.value,
|
|
}
|
|
},
|
|
},
|
|
options() {
|
|
const timezoneManager = getTimezoneManager()
|
|
return getSortedTimezoneList(
|
|
timezoneManager.listAllTimezones(),
|
|
this.additionalTimezones,
|
|
// TRANSLATORS This refers to global timezones in the timezone picker
|
|
t('calendar', 'Global'),
|
|
)
|
|
},
|
|
},
|
|
methods: {
|
|
change(newValue) {
|
|
if (!newValue) {
|
|
return
|
|
}
|
|
|
|
this.$emit('change', newValue.timezoneId)
|
|
},
|
|
},
|
|
}
|
|
</script>
|