aboutsummaryrefslogtreecommitdiffstats
path: root/apps/files/src/views/DialogConfirmFileExtension.vue
blob: cc1ee363f9807708a1c70c0e7863b44b1855ce6f (plain)
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
<!--
 - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
 - SPDX-License-Identifier: AGPL-3.0-or-later
-->

<script setup lang="ts">
import type { IDialogButton } from '@nextcloud/dialogs'
import { t } from '@nextcloud/l10n'
import { computed, ref } from 'vue'
import { useUserConfigStore } from '../store/userconfig.ts'

import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
import NcDialog from '@nextcloud/vue/components/NcDialog'
import svgIconCancel from '@mdi/svg/svg/cancel.svg?raw'
import svgIconCheck from '@mdi/svg/svg/check.svg?raw'

const props = defineProps<{
	oldExtension?: string
	newExtension?: string
}>()

const emit = defineEmits<{
	(e: 'close', v: boolean): void
}>()

const userConfigStore = useUserConfigStore()
const dontShowAgain = computed({
	get: () => !userConfigStore.userConfig.show_dialog_file_extension,
	set: (value: boolean) => userConfigStore.update('show_dialog_file_extension', !value),
})

const buttons = computed<IDialogButton[]>(() => [
	{
		label: props.oldExtension
			? t('files', 'Keep {old}', { old: props.oldExtension })
			: t('files', 'Keep without extension'),
		icon: svgIconCancel,
		type: 'secondary',
		callback: () => closeDialog(false),
	},
	{
		label: props.newExtension
			? t('files', 'Use {new}', { new: props.newExtension })
			: t('files', 'Remove extension'),
		icon: svgIconCheck,
		type: 'primary',
		callback: () => closeDialog(true),
	},
])

/** Open state of the dialog */
const open = ref(true)

/**
 * Close the dialog and emit the response
 * @param value User selected response
 */
function closeDialog(value: boolean) {
	emit('close', value)
	open.value = false
}
</script>

<template>
	<NcDialog :buttons="buttons"
		:open="open"
		:can-close="false"
		:name="t('files', 'Change file extension')"
		size="small">
		<p v-if="newExtension && oldExtension">
			{{ t('files', 'Changing the file extension from "{old}" to "{new}" may render the file unreadable.', { old: oldExtension, new: newExtension }) }}
		</p>
		<p v-else-if="oldExtension">
			{{ t('files', 'Removing the file extension "{old}" may render the file unreadable.', { old: oldExtension }) }}
		</p>
		<p v-else-if="newExtension">
			{{ t('files', 'Adding the file extension "{new}" may render the file unreadable.', { new: newExtension }) }}
		</p>

		<NcCheckboxRadioSwitch v-model="dontShowAgain"
			class="dialog-confirm-file-extension__checkbox"
			type="checkbox">
			{{ t('files', 'Do not show this dialog again.') }}
		</NcCheckboxRadioSwitch>
	</NcDialog>
</template>

<style scoped>
.dialog-confirm-file-extension__checkbox {
	margin-top: 1rem;
}
</style>