aboutsummaryrefslogtreecommitdiffstats
path: root/apps/dav/src/views/ExampleContactSettings.vue
blob: d4d1c7d31d0c7abf857880a7ec6a59b394845b4d (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
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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!--
  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
  - SPDX-License-Identifier: AGPL-3.0-or-later
-->

<template>
	<NcSettingsSection id="exmaple-content"
		:name="$t('dav', 'Example Content')"
		class="example-content-setting"
		:description="$t('dav', 'Set example content to be created on new user first login.')">
		<div class="example-content-setting__contacts">
			<input id="enable-default-contact"
				v-model="enableDefaultContact"
				type="checkbox"
				class="checkbox"
				@change="updateEnableDefaultContact">
			<label for="enable-default-contact"> {{ $t('dav',"Default contact is added to the user's own address book on user's first login.") }} </label>
			<div v-if="enableDefaultContact" class="example-content-setting__contacts__buttons">
				<NcButton type="primary"
					class="example-content-setting__contacts__buttons__button"
					@click="toggleModal">
					<template #icon>
						<IconUpload :size="20" />
					</template>
					{{ $t('dav', 'Import contact') }}
				</NcButton>
				<NcButton type="secondary"
					class="example-content-setting__contacts__buttons__button"
					@click="resetContact">
					<template #icon>
						<IconRestore :size="20" />
					</template>
					{{ $t('dav', 'Reset to default contact') }}
				</NcButton>
			</div>
		</div>
		<NcDialog :open.sync="isModalOpen"
			:name="$t('dav', 'Import contacts')"
			:buttons="buttons">
			<div>
				<p>{{ $t('dav', 'Importing a new .vcf file will delete the existing default contact and replace it with the new one. Do you want to continue?') }}</p>
			</div>
		</NcDialog>
		<input id="example-contact-import"
			ref="exampleContactImportInput"
			:disabled="loading"
			type="file"
			accept=".vcf"
			class="hidden-visually"
			@change="processFile">
	</NcSettingsSection>
</template>
<script>
import axios from '@nextcloud/axios'
import { generateUrl } from '@nextcloud/router'
import { loadState } from '@nextcloud/initial-state'
import { NcDialog, NcButton, NcSettingsSection } from '@nextcloud/vue'
import { showError, showSuccess } from '@nextcloud/dialogs'
import IconUpload from 'vue-material-design-icons/Upload.vue'
import IconRestore from 'vue-material-design-icons/Restore.vue'
import IconCancel from '@mdi/svg/svg/cancel.svg?raw'
import IconCheck from '@mdi/svg/svg/check.svg?raw'

const enableDefaultContact = loadState('dav', 'enableDefaultContact') === 'yes'

export default {
	name: 'ExampleContactSettings',
	components: {
		NcDialog,
		NcButton,
		NcSettingsSection,
		IconUpload,
		IconRestore,
	},
	data() {
		return {
			enableDefaultContact,
			isModalOpen: false,
			loading: false,
			buttons: [
				{
					label: this.$t('dav', 'Cancel'),
					icon: IconCancel,
					callback: () => { this.isModalOpen = false },
				},
				{
					label: this.$t('dav', 'Import'),
					type: 'primary',
					icon: IconCheck,
					callback: () => { this.clickImportInput() },
				},
			],
		}
	},
	methods: {
		updateEnableDefaultContact() {
			axios.put(generateUrl('apps/dav/api/defaultcontact/config'), {
				allow: this.enableDefaultContact ? 'yes' : 'no',
			}).catch(() => {
				this.enableDefaultContact = !this.enableDefaultContact
				showError(this.$t('dav', 'Error while saving settings'))
			})
		},
		toggleModal() {
			this.isModalOpen = !this.isModalOpen
		},
		clickImportInput() {
			this.$refs.exampleContactImportInput.click()
		},
		resetContact() {
			this.loading = true
			axios.put(generateUrl('/apps/dav/api/defaultcontact/contact'))
				.then(() => {
					showSuccess(this.$t('dav', 'Contact reset successfully'))
				})
				.catch((error) => {
					console.error('Error importing contact:', error)
					showError(this.$t('dav', 'Error while resetting contact'))
				})
				.finally(() => {
					this.loading = false
				})
		},
		processFile(event) {
			this.loading = true

			const file = event.target.files[0]
			const reader = new FileReader()

			reader.onload = async () => {
				this.isModalOpen = false
				try {
					await axios.put(generateUrl('/apps/dav/api/defaultcontact/contact'), { contactData: reader.result })
					showSuccess(this.$t('dav', 'Contact imported successfully'))
				} catch (error) {
					console.error('Error importing contact:', error)
					showError(this.$t('dav', 'Error while importing contact'))
				} finally {
					this.loading = false
					event.target.value = ''
				}
			}
			reader.readAsText(file)
		},
	},
}
</script>
<style lang="scss" scoped>
.example-content-setting{
	&__contacts{
		&__buttons{
			margin-top: 1rem;
			display: flex;
			&__button{
				margin-inline-end: 5px;
			}
		}
	}
}
</style>