nextcloud-contacts/src/components/Settings/SettingsAddressbook.vue

<!--
  - @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com>
  -
  - @author John Molakvoæ <skjnldsv@protonmail.com>
  - @author Team Popcorn <teampopcornberlin@gmail.com>
  -
  - @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>
	<li :class="{'addressbook--disabled': !addressbook.enabled}" class="addressbook">
		<!-- addressbook name -->
		<span class="addressbook__name">
			{{ addressbook.displayName }}
		</span>

		<!-- sharing button -->
		<a v-if="!addressbook.readOnly"
			v-tooltip.top="sharedWithTooltip"
			:class="{'addressbook__share--shared': hasShares}"
			:title="sharedWithTooltip"
			href="#"
			class="addressbook__share icon-shared"
			@click="toggleShare" />

		<!-- popovermenu -->
		<Actions class="addressbook__menu" menu-align="right">
			<!-- copy addressbook link -->
			<ActionLink
				:href="addressbook.url"
				:icon="copyLoading ? 'icon-loading-small' : 'icon-public'"
				@click.stop.prevent="copyLink">
				{{ copyButtonText }}
			</ActionLink>

			<!-- download addressbook -->
			<ActionLink
				:href="addressbook.url + '?export'"
				icon="icon-download">
				{{ t('contacts', 'Download') }}
			</ActionLink>

			<template v-if="!addressbook.readOnly">
				<!-- rename addressbook -->
				<ActionButton v-if="!editingName"
					icon="icon-rename"
					@click.stop.prevent="renameAddressbook">
					{{ t('contacts', 'Rename') }}
				</ActionButton>
				<ActionInput v-else
					ref="renameInput"
					:disabled="renameLoading"
					:icon="renameLoading ? 'icon-loading-small' : 'icon-rename'"
					:value="addressbook.displayName"
					@submit="updateAddressbookName" />

				<!-- enable/disable addressbook -->
				<ActionCheckbox v-if="!toggleEnabledLoading"
					:checked="enabled"
					@change.stop.prevent="toggleAddressbookEnabled">
					{{ enabled ? t('contacts', 'Enabled') : t('contacts', 'Disabled') }}
				</ActionCheckbox>
				<ActionButton v-else
					icon="icon-loading-small">
					{{ enabled ? t('contacts', 'Enabled') : t('contacts', 'Disabled') }}
				</ActionButton>
			</template>

			<!-- delete addressbook -->
			<ActionButton v-if="hasMultipleAddressbooks"
				:icon="deleteAddressbookLoading ? 'icon-loading-small' : 'icon-delete'"
				@click="confirmDeletion">
				{{ t('contacts', 'Delete') }}
			</ActionButton>
		</Actions>

		<!-- sharing input -->
		<ShareAddressBook v-if="shareOpen && !addressbook.readOnly" :addressbook="addressbook" />
	</li>
</template>

<script>
import { ActionLink, ActionButton, ActionInput, ActionCheckbox } from 'nextcloud-vue'
import ShareAddressBook from './SettingsAddressbookShare'

export default {
	name: 'SettingsAddressbook',

	components: {
		ShareAddressBook,
		ActionLink,
		ActionButton,
		ActionInput,
		ActionCheckbox,
	},

	props: {
		addressbook: {
			type: Object,
			default() {
				return {}
			},
		},
	},
	data() {
		return {
			copied: false,
			copyLoading: false,
			copySuccess: false,
			deleteAddressbookLoading: false,
			editingName: false,
			menuOpen: false,
			renameLoading: false,
			shareOpen: false,
			toggleEnabledLoading: false,
		}
	},
	computed: {
		enabled() {
			return this.addressbook.enabled
		},
		hasShares() {
			return this.addressbook.shares.length > 0
		},
		addressbooks() {
			return this.$store.getters.getAddressbooks
		},
		hasMultipleAddressbooks() {
			return this.addressbooks.length > 1
		},
		// info tooltip about number of shares
		sharedWithTooltip() {
			return this.hasShares
				? n('contacts',
					'Shared with {num} entity',
					'Shared with {num} entities',
					this.addressbook.shares.length, {
						num: this.addressbook.shares.length,
					})
				: '' // disable the tooltip
		},
		copyButtonText() {
			if (this.copied) {
				return this.copySuccess
					? t('contacts', 'Copied')
					: t('contacts', 'Can not copy')
			}
			return t('contacts', 'Copy link')
		},
	},
	watch: {
		menuOpen: function() {
			if (this.menuOpen === false) {
				this.editingName = false
			}
		},
	},
	mounted() {
		// required if popup needs to stay opened after menu click
		this.popupItem = this.$el
	},
	methods: {
		closeMenu() {
			this.menuOpen = false
		},
		toggleMenu() {
			this.menuOpen = !this.menuOpen
		},
		toggleShare() {
			this.shareOpen = !this.shareOpen
		},
		async toggleAddressbookEnabled() {
			// change to loading status
			this.toggleEnabledLoading = true
			try {
				await this.$store.dispatch('toggleAddressbookEnabled', this.addressbook)
			} catch (err) {
				// error handling
				console.error(err)
				OC.Notification.showTemporary(t('contacts', 'Enabled toggle of addressbook was not successful.'))
			} finally {
				// stop loading status regardless of outcome
				this.toggleEnabledLoading = false
			}
		},

		confirmDeletion() {
			OC.dialogs.confirm(
				t('contacts', 'This will delete the addressbook and every contacts within it'),
				t('contacts', 'Delete {addressbook} ?', { addressbook: this.addressbook.displayName }),
				this.deleteAddressbook,
				true
			)
		},

		async deleteAddressbook(confirm) {
			if (confirm) {
				// change to loading status
				this.deleteAddressbookLoading = true
				try {
					await this.$store.dispatch('deleteAddressbook', this.addressbook)
				} catch (err) {
					// error handling
					console.error(err)
					OC.Notification.showTemporary(t('contacts', 'Deletion of addressbook was not successful.'))
				} finally {
					// stop loading status regardless of outcome
					this.deleteAddressbookLoading = false
				}
			}
		},
		renameAddressbook() {
			this.editingName = true
		},
		async updateAddressbookName(e) {
			const addressbook = this.addressbook
			// New name for addressbook - inputed value from form
			const newName = this.$refs.renameInput.$el.querySelector('input[type="text"]').value
			// change to loading status
			this.renameLoading = true
			try {
				await this.$store.dispatch('renameAddressbook', { addressbook, newName })
			} catch (err) {
				// error handling
				console.error(err)
				OC.Notification.showTemporary(t('contacts', 'Renaming of addressbook was not successful.'))
			} finally {
				this.editingName = false
				// stop loading status regardless of outcome
				this.renameLoading = false
				// close popover menu
				this.menuOpen = false
			}
		},
		async copyLink(event) {
			// change to loading status
			this.copyLoading = true

			// copy link for addressbook to clipboard
			try {
				await this.$copyText(window.location.origin + this.addressbook.url)
				this.copySuccess = true
				this.copied = true
				// Notify addressbook was copied
				OC.Notification.showTemporary(t('contacts', 'Addressbook copied to clipboard'))
			} catch (error) {
				this.copySuccess = false
				this.copied = true
				OC.Notification.showTemporary(t('contacts', 'Addressbook was not copied to clipboard.'))
			} finally {
				this.copyLoading = false
				setTimeout(() => {
					// stop loading status regardless of outcome
					this.copied = false
					this.copySuccess = false
				}, 2000)
			}
		},
	},
}
</script>