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
|
<!--
- SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
- SPDX-License-Identifier: AGPL-3.0-or-later
-->
<template>
<NcDialog content-classes="app-changelog-dialog"
:buttons="dialogButtons"
:name="t('updatenotification', 'What\'s new in {app} {version}', { app: appName, version: appVersion })"
:open="open && markdown !== undefined"
size="normal"
@update:open="$emit('update:open', $event)">
<Markdown class="app-changelog-dialog__text" :markdown="markdown" :min-heading-level="3" />
</NcDialog>
</template>
<script setup lang="ts">
import { translate as t } from '@nextcloud/l10n'
import { generateOcsUrl } from '@nextcloud/router'
import { ref, watchEffect } from 'vue'
import axios from '@nextcloud/axios'
import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
import Markdown from './Markdown.vue'
const props = withDefaults(
defineProps<{
appId: string
version?: string
open?: boolean
}>(),
// Default values
{
open: true,
version: undefined,
},
)
const emit = defineEmits<{
/**
* Event that is called when the "Get started"-button is pressed
*/
(e: 'dismiss'): void
(e: 'update:open', v: boolean): void
}>()
const dialogButtons = [
{
label: t('updatenotification', 'Give feedback'),
callback: () => {
window.open(`https://apps.nextcloud.com/apps/${props.appId}#comments`, '_blank', 'noreferrer noopener')
},
},
{
label: t('updatenotification', 'Get started'),
type: 'primary',
callback: () => {
emit('dismiss')
emit('update:open', false)
},
},
]
const appName = ref(props.appId)
const appVersion = ref(props.version ?? '')
const markdown = ref<string>('')
watchEffect(() => {
const url = props.version
? generateOcsUrl('/apps/updatenotification/api/v1/changelog/{app}?version={version}', { version: props.version, app: props.appId })
: generateOcsUrl('/apps/updatenotification/api/v1/changelog/{app}', { version: props.version, app: props.appId })
axios.get(url)
.then(({ data }) => {
appName.value = data.ocs.data.appName
appVersion.value = data.ocs.data.version
markdown.value = data.ocs.data.content
})
.catch((error) => {
if (error?.response?.status === 404) {
appName.value = props.appId
markdown.value = t('updatenotification', 'No changelog available')
} else {
console.error('Failed to load changelog entry', error)
emit('update:open', false)
}
})
})
</script>
<style scoped lang="scss">
:deep(.app-changelog-dialog) {
min-height: 50vh !important;
}
.app-changelog-dialog__text {
padding-inline: 14px;
}
</style>
|
