summaryrefslogtreecommitdiffstats
path: root/src/components/AppNavigation/SettingsSection.vue
blob: 58f80ed475f067364a216f90bcae4d6fc8f14c8c (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
<!--
  - @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com>
  -
  - @author John Molakvoæ <skjnldsv@protonmail.com>
  - @author Matthias Heinisch <nextcloud@matthiasheinisch.de>
  -
  - @license GNU AGPL version 3 or any later version
  -
  - This program is free software: you can redistribute it and/or modify
  - it under the terms of the GNU Affero General Public License as
  - published by the Free Software Foundation, either version 3 of the
  - License, or (at your option) any later version.
  -
  - This program is distributed in the hope that it will be useful,
  - but WITHOUT ANY WARRANTY; without even the implied warranty of
  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  - GNU Affero General Public License for more details.
  -
  - You should have received a copy of the GNU Affero General Public License
  - along with this program. If not, see <http://www.gnu.org/licenses/>.
  -
  -->

<template>
	<div>
		<SettingsSortContacts class="settings-section" />
		<CheckboxRadioSwitch :checked="enableSocialSync"
			:loading="enableSocialSyncLoading"
			:disabled="enableSocialSyncLoading"
			class="social-sync__checkbox"
			@update:checked="toggleSocialSync">
			<div class="social-sync__checkbox__label">
				<span>
					{{ t('contacts', 'Update avatars from social media') }}
					<em>{{ t('contacts', '(refreshed once per week)') }}</em>
				</span>
			</div>
		</CheckboxRadioSwitch>
		<div class="settings-addressbook-list__header">
			<span>{{ t('contacts', 'Address books') }}</span>
		</div>
		<ul id="addressbook-list">
			<SettingsAddressbook v-for="addressbook in addressbooks" :key="addressbook.id" :addressbook="addressbook" />
		</ul>
		<SettingsNewAddressbook :addressbooks="addressbooks" />
		<SettingsImportContacts :addressbooks="addressbooks"
			class="settings-section"
			@clicked="onClickImport"
			@file-loaded="onLoad" />
	</div>
</template>

<script>
import axios from '@nextcloud/axios'
import { generateUrl } from '@nextcloud/router'
import { loadState } from '@nextcloud/initial-state'
import SettingsAddressbook from './Settings/SettingsAddressbook'
import SettingsNewAddressbook from './Settings/SettingsNewAddressbook'
import SettingsImportContacts from './Settings/SettingsImportContacts'
import SettingsSortContacts from './Settings/SettingsSortContacts'
import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch'

export default {
	name: 'SettingsSection',
	components: {
		SettingsAddressbook,
		SettingsNewAddressbook,
		SettingsImportContacts,
		SettingsSortContacts,
		CheckboxRadioSwitch,
	},
	data() {
		return {
			allowSocialSync: loadState('contacts', 'allowSocialSync') !== 'no',
			enableSocialSync: loadState('contacts', 'enableSocialSync') !== 'no',
			enableSocialSyncLoading: false,
		}
	},
	computed: {
		// store getters
		addressbooks() {
			return this.$store.getters.getAddressbooks
		},
	},
	methods: {
		onClickImport(event) {
			this.$emit('clicked', event)
		},
		async toggleSocialSync() {
			this.enableSocialSync = !this.enableSocialSync
			this.enableSocialSyncLoading = true

			// store value
			let setting = 'yes'
			this.enableSocialSync ? setting = 'yes' : setting = 'no'
			try {
				await axios.put(generateUrl('apps/contacts/api/v1/social/config/user/enableSocialSync'), {
					allow: setting,
				})
			} finally {
				this.enableSocialSyncLoading = false
			}
		},
		onLoad(event) {
			this.$emit('file-loaded', false)
		},
	},
}
</script>

<style lang="scss" scoped>
.social-sync__checkbox {
	margin-top: 5px;

	::v-deep .checkbox-radio-switch__label {
		height: unset !important;
	}

	::v-deep .checkbox-radio-switch__icon {
		width: 44px;
		flex-shrink: 0;
		flex-grow: 0;
	}
}
</style>