refactor(dav): migrate ExampleContentDownloadButton to Typescript and script-setup

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
This commit is contained in:
Ferdinand Thiessen 2025-10-23 00:03:30 +02:00
parent 954cdd4621
commit e04597d8a1
No known key found for this signature in database
GPG key ID: 45FAE7268762B400
2 changed files with 47 additions and 57 deletions

View file

@ -2,46 +2,11 @@
- SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
- SPDX-License-Identifier: AGPL-3.0-or-later
-->
<template>
<div>
<CalendarAvailability
:slots.sync="slots"
:loading="loading"
:l10n-to="t('dav', 'to')"
:l10n-delete-slot="t('dav', 'Delete slot')"
:l10n-empty-day="t('dav', 'No working hours set')"
:l10n-add-slot="t('dav', 'Add slot')"
:l10n-week-day-list-label="t('dav', 'Weekdays')"
:l10n-monday="t('dav', 'Monday')"
:l10n-tuesday="t('dav', 'Tuesday')"
:l10n-wednesday="t('dav', 'Wednesday')"
:l10n-thursday="t('dav', 'Thursday')"
:l10n-friday="t('dav', 'Friday')"
:l10n-saturday="t('dav', 'Saturday')"
:l10n-sunday="t('dav', 'Sunday')"
:l10n-start-picker-label="(dayName) => t('dav', 'Pick a start time for {dayName}', { dayName })"
:l10n-end-picker-label="(dayName) => t('dav', 'Pick a end time for {dayName}', { dayName })" />
<NcCheckboxRadioSwitch v-model="automated">
{{ t('dav', 'Automatically set user status to "Do not disturb" outside of availability to mute all notifications.') }}
</NcCheckboxRadioSwitch>
<NcButton
:disabled="loading || saving"
variant="primary"
@click="save">
{{ t('dav', 'Save') }}
</NcButton>
</div>
</template>
<script setup lang="ts">
import { CalendarAvailability } from '@nextcloud/calendar-availability-vue'
import { getCapabilities } from '@nextcloud/capabilities'
import {
showError,
showSuccess,
} from '@nextcloud/dialogs'
import { showError, showSuccess } from '@nextcloud/dialogs'
import { loadState } from '@nextcloud/initial-state'
import { t } from '@nextcloud/l10n'
import { onMounted, ref } from 'vue'
@ -106,6 +71,39 @@ async function save() {
}
</script>
<template>
<div>
<CalendarAvailability
v-model:slots="slots"
:loading="loading"
:l10n-to="t('dav', 'to')"
:l10n-delete-slot="t('dav', 'Delete slot')"
:l10n-empty-day="t('dav', 'No working hours set')"
:l10n-add-slot="t('dav', 'Add slot')"
:l10n-week-day-list-label="t('dav', 'Weekdays')"
:l10n-monday="t('dav', 'Monday')"
:l10n-tuesday="t('dav', 'Tuesday')"
:l10n-wednesday="t('dav', 'Wednesday')"
:l10n-thursday="t('dav', 'Thursday')"
:l10n-friday="t('dav', 'Friday')"
:l10n-saturday="t('dav', 'Saturday')"
:l10n-sunday="t('dav', 'Sunday')"
:l10n-start-picker-label="(dayName) => t('dav', 'Pick a start time for {dayName}', { dayName })"
:l10n-end-picker-label="(dayName) => t('dav', 'Pick a end time for {dayName}', { dayName })" />
<NcCheckboxRadioSwitch v-model="automated">
{{ t('dav', 'Automatically set user status to "Do not disturb" outside of availability to mute all notifications.') }}
</NcCheckboxRadioSwitch>
<NcButton
:disabled="loading || saving"
variant="primary"
@click="save">
{{ t('dav', 'Save') }}
</NcButton>
</div>
</template>
<style lang="scss" scoped>
:deep(.availability-day) {
padding: 0 10px 0 10px;

View file

@ -3,8 +3,20 @@
- SPDX-License-Identifier: AGPL-3.0-or-later
-->
<script setup lang="ts">
import { NcButton } from '@nextcloud/vue'
import IconDownload from 'vue-material-design-icons/TrayArrowDown.vue'
defineProps<{
/**
* The href link for the download
*/
href: string
}>()
</script>
<template>
<NcButton variant="tertiary" :href="href">
<NcButton variant="tertiary" :href>
<template #icon>
<slot name="icon" />
</template>
@ -19,26 +31,6 @@
</NcButton>
</template>
<script>
import { NcButton } from '@nextcloud/vue'
import IconDownload from 'vue-material-design-icons/TrayArrowDown.vue'
export default {
name: 'ExampleContentDownloadButton',
components: {
NcButton,
IconDownload,
},
props: {
href: {
type: String,
required: true,
},
},
}
</script>
<style lang="scss" scoped>
.download-button {
display: flex;