1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
|
<!--
- SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
- SPDX-License-Identifier: AGPL-3.0-or-later
-->
<template>
<section class="fdow-section">
<HeaderBar :input-id="inputId"
:readable="propertyReadable" />
<NcSelect :aria-label-listbox="t('settings', 'Day to use as the first day of week')"
class="fdow-section__day-select"
:clearable="false"
:input-id="inputId"
label="label"
label-outside
:options="dayOptions"
:value="valueOption"
@option:selected="updateFirstDayOfWeek" />
</section>
</template>
<script lang="ts">
import HeaderBar from './shared/HeaderBar.vue'
import NcSelect from '@nextcloud/vue/components/NcSelect'
import {
ACCOUNT_SETTING_PROPERTY_ENUM,
ACCOUNT_SETTING_PROPERTY_READABLE_ENUM,
} from '../../constants/AccountPropertyConstants'
import { getDayNames, getFirstDay } from '@nextcloud/l10n'
import { savePrimaryAccountProperty } from '../../service/PersonalInfo/PersonalInfoService'
import { handleError } from '../../utils/handlers.ts'
import { loadState } from '@nextcloud/initial-state'
interface DayOption {
value: number,
label: string,
}
const { firstDayOfWeek } = loadState<{firstDayOfWeek?: string}>(
'settings',
'personalInfoParameters',
{},
)
export default {
name: 'FirstDayOfWeekSection',
components: {
HeaderBar,
NcSelect,
},
data() {
let firstDay = -1
if (firstDayOfWeek) {
firstDay = parseInt(firstDayOfWeek)
}
return {
firstDay,
}
},
computed: {
inputId(): string {
return 'account-property-fdow'
},
propertyReadable(): string {
return ACCOUNT_SETTING_PROPERTY_READABLE_ENUM.FIRST_DAY_OF_WEEK
},
dayOptions(): DayOption[] {
const options = [{
value: -1,
label: t('settings', 'Derived from your locale ({weekDayName})', {
weekDayName: getDayNames()[getFirstDay()],
}),
}]
for (const [index, dayName] of getDayNames().entries()) {
options.push({ value: index, label: dayName })
}
return options
},
valueOption(): DayOption | undefined {
return this.dayOptions.find((option) => option.value === this.firstDay)
},
},
methods: {
async updateFirstDayOfWeek(option: DayOption): Promise<void> {
try {
const responseData = await savePrimaryAccountProperty(
ACCOUNT_SETTING_PROPERTY_ENUM.FIRST_DAY_OF_WEEK,
option.value.toString(),
)
this.handleResponse({
value: option.value,
status: responseData.ocs?.meta?.status,
})
window.location.reload()
} catch (e) {
this.handleResponse({
errorMessage: t('settings', 'Unable to update first day of week'),
error: e,
})
}
},
handleResponse({ value, status, errorMessage, error }): void {
if (status === 'ok') {
this.firstDay = value
} else {
this.$emit('update:value', this.firstDay)
handleError(error, errorMessage)
}
},
},
}
</script>
<style lang="scss" scoped>
.fdow-section {
padding: 10px;
&__day-select {
width: 100%;
margin-top: 6px; // align with other inputs
}
}
</style>
|
