Create modal window for contacts settings

src/components/AppNavigation/ContactsSettings.vue

@@ -0,0 +1,177 @@
+<!--
+  - @copyright Copyright (c) 2022 Julia Kirschenheuter <julia.kirschenheuter@nextcloud.com>
+  -
+  - @author Julia Kirschenheuter <julia.kirschenheuter@nextcloud.com>
+  -
+  - @license AGPL-3.0-or-later
+  -
+  - 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>
+	<AppSettingsDialog id="app-settings-dialog"
+		:title="t('contacts', 'Contacts settings')"
+		:show-navigation="true"
+		:open.sync="showSettings">
+		<AppSettingsSection id="general-settings" :title="t('contacts', 'General settings')">
+			<CheckboxRadioSwitch :checked="enableSocialSync"
+				:loading="enableSocialSyncLoading"
+				:disabled="enableSocialSyncLoading"
+				class="social-sync__checkbox contacts-settings-modal__form__row"
+				@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>
+			<SettingsSortContacts class="contacts-settings-modal__form__row" />
+		</AppSettingsSection>
+		<AppSettingsSection id="address-books" :title="t('contacts', 'Address books')">
+			<div class="contacts-settings-modal__form">
+				<div class="contacts-settings-modal__form__row">
+					<ul id="addressbook-list" class="addressbook-list">
+						<SettingsAddressbook v-for="addressbook in addressbooks" :key="addressbook.id" :addressbook="addressbook" />
+					</ul>
+				</div>
+				<SettingsNewAddressbook class="contacts-settings-modal__form__row settings-new-addressbook" :addressbooks="addressbooks" />
+				<SettingsImportContacts :addressbooks="addressbooks"
+					class="contacts-settings-modal__form__row"
+					@clicked="onClickImport"
+					@file-loaded="onLoad" />
+			</div>
+		</AppSettingsSection>
+	</AppSettingsDialog>
+</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/NcCheckboxRadioSwitch'
+import { CONTACTS_SETTINGS } from '../../models/constants.ts'
+import { NcAppSettingsDialog as AppSettingsDialog, NcAppSettingsSection as AppSettingsSection } from '@nextcloud/vue'
+
+export default {
+	name: 'ContactsSettings',
+	components: {
+		AppSettingsDialog,
+		AppSettingsSection,
+		SettingsAddressbook,
+		SettingsNewAddressbook,
+		SettingsImportContacts,
+		SettingsSortContacts,
+		CheckboxRadioSwitch,
+	},
+	props: {
+		open: {
+			required: true,
+			type: Boolean,
+		},
+	},
+	data() {
+		return {
+			CONTACTS_SETTINGS,
+			allowSocialSync: loadState('contacts', 'allowSocialSync') !== 'no',
+			enableSocialSync: loadState('contacts', 'enableSocialSync') !== 'no',
+			enableSocialSyncLoading: false,
+			showSettings: false,
+		}
+	},
+	computed: {
+		// store getters
+		addressbooks() {
+			return this.$store.getters.getAddressbooks
+		},
+	},
+	watch: {
+		showSettings(value) {
+			if (!value) {
+				this.$emit('update:open', value)
+			}
+		},
+		async open(value) {
+			if (value) {
+				await this.onOpen()
+			}
+		},
+	},
+	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)
+		},
+		async onOpen() {
+			this.showSettings = true
+		},
+	},
+}
+</script>
+
+<style scoped>
+>>> .app-settings__title {
+	padding: 20px 0;
+	margin-bottom: 0;
+}
+
+.app-settings-section {
+	margin-bottom: 45px;
+}
+
+.social-sync__checkbox, .settings-new-addressbook  {
+	margin-bottom: 20px;
+}
+
+.contacts-settings-modal__form__row >>> .material-design-icon {
+	justify-content: flex-start;
+}
+
+.settings-new-addressbook >>> .new-addressbook-input {
+	min-height: 44px;
+	height: 44px;
+	width: 100%;
+}
+
+.settings-new-addressbook >>> .icon-confirm {
+	min-height: 44px;
+	height: 44px;
+	border-color: var(--color-border-dark) !important;
+	border-left: none;
+}
+
+</style>

src/components/AppNavigation/RootNavigation.vue

@@ -177,33 +177,43 @@
 		</template>
 
 		<!-- settings -->
+
 		<template #footer>
-			<AppNavigationSettings v-if="!loading" :title="appNavigationSettingsTitle">
-				<SettingsSection />
-			</AppNavigationSettings>
+			<div class="contacts-settings">
+				<Button v-if="!loading"
+					class="contacts-settings-button"
+					:close-after-click="true"
+					@click="showContactsSettings">
+					<template #icon>
+						<Cog :size="20" />
+					</template>
+					{{ CONTACTS_SETTINGS }}
+				</Button>
+			</div>
 		</template>
+		<ContactsSettings :open.sync="showSettings" />
 	</AppNavigation>
 </template>
 
 <script>
-import { GROUP_ALL_CONTACTS, CHART_ALL_CONTACTS, GROUP_NO_GROUP_CONTACTS, GROUP_RECENTLY_CONTACTED, ELLIPSIS_COUNT, CIRCLE_DESC } from '../../models/constants.ts'
+import { GROUP_ALL_CONTACTS, CHART_ALL_CONTACTS, GROUP_NO_GROUP_CONTACTS, GROUP_RECENTLY_CONTACTED, ELLIPSIS_COUNT, CIRCLE_DESC, CONTACTS_SETTINGS } from '../../models/constants.ts'
 
-import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
 import ActionInput from '@nextcloud/vue/dist/Components/NcActionInput'
 import ActionText from '@nextcloud/vue/dist/Components/NcActionText'
 import AppNavigation from '@nextcloud/vue/dist/Components/NcAppNavigation'
+import Button from '@nextcloud/vue/dist/Components/NcButton'
 import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble'
 import AppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem'
-import AppNavigationSettings from '@nextcloud/vue/dist/Components/NcAppNavigationSettings'
 import AppNavigationCaption from '@nextcloud/vue/dist/Components/NcAppNavigationCaption'
 import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon'
 
 import naturalCompare from 'string-natural-compare'
 
 import CircleNavigationItem from './CircleNavigationItem'
+import Cog from 'vue-material-design-icons/Cog.vue'
+import ContactsSettings from './ContactsSettings'
 import GroupNavigationItem from './GroupNavigationItem'
 import NewCircleIntro from '../EntityPicker/NewCircleIntro'
-import SettingsSection from './SettingsSection'
 
 import isCirclesEnabled from '../../services/isCirclesEnabled'
 import isContactsInteractionEnabled from '../../services/isContactsInteractionEnabled'
@@ -220,15 +230,16 @@ export default {
 	name: 'RootNavigation',
 
 	components: {
-		ActionButton,
 		ActionInput,
 		ActionText,
 		AppNavigation,
+		Button,
 		NcCounterBubble,
 		AppNavigationItem,
-		AppNavigationSettings,
 		AppNavigationCaption,
 		CircleNavigationItem,
+		Cog,
+		ContactsSettings,
 		GroupNavigationItem,
 		IconContact,
 		IconUser,
@@ -237,7 +248,6 @@ export default {
 		IconLoading,
 		IconRecentlyContacted,
 		NewCircleIntro,
-		SettingsSection,
 	},
 
 	mixins: [RouterMixin],
@@ -257,6 +267,7 @@ export default {
 	data() {
 		return {
 			CIRCLE_DESC,
+			CONTACTS_SETTINGS,
 			ELLIPSIS_COUNT,
 			GROUP_ALL_CONTACTS,
 			CHART_ALL_CONTACTS,
@@ -277,13 +288,12 @@ export default {
 
 			collapsedGroups: true,
 			collapsedCircles: true,
+
+			showSettings: false,
 		}
 	},
 
 	computed: {
-		appNavigationSettingsTitle() {
-			return t('contacts', 'Contacts settings')
-		},
 		// store variables
 		circles() {
 			return this.$store.getters.getCircles
@@ -444,6 +454,13 @@ export default {
 		closeNewCircleIntro() {
 			this.isNewCircleModalOpen = false
 		},
+
+		/**
+		 * Shows the contacts settings
+		 */
+		showContactsSettings() {
+			this.showSettings = true
+		},
 	},
 }
 </script>
@@ -471,4 +488,10 @@ $caption-padding: 22px;
 	opacity: .7;
 	font-weight: bold;
 }
+.contacts-settings {
+	padding: calc(var(--default-grid-baseline, 4px)*2);
+}
+.contacts-settings-button {
+	width: 100%;
+}
 </style>

src/components/AppNavigation/Settings/SettingsAddressbook.vue

@@ -305,6 +305,7 @@ export default {
 	align-items: center;
 	white-space: nowrap;
 	text-overflow: ellipsis;
+	padding: 5px 0;
 
 	> .addressbook__name {
 		+ a,
@@ -344,14 +345,17 @@ export default {
 }
 .settings-addressbook-list {
 	display: flex;
-	gap: 4px;
-	li {
-		width: calc(100% - 44px);
+	width: 100%;
+	.material-design-icon {
+		justify-content: flex-start;
 	}
 }
 .addressbook__share {
 	background-color: transparent;
 	border: none;
 	box-shadow: none;
 }
+.addressbook-shares {
+	padding-top: 10px;
+}
 </style>