Migrate to global components and use nextcloud multiselect

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

17 files changed, 51 insertions, 111 deletions

diff --git a/src/components/ContactDetails.vue b/src/components/ContactDetails.vue
index 0d50248a..3517b24e 100644
--- a/src/components/ContactDetails.vue
+++ b/src/components/ContactDetails.vue
@@ -107,10 +107,6 @@
 </template>
 
 <script>
-import { PopoverMenu } from 'nextcloud-vue'
-import ClickOutside from 'vue-click-outside'
-import Vue from 'vue'
-import VTooltip from 'v-tooltip'
 import debounce from 'debounce'
 
 import rfcProps from '../models/rfcProps.js'
@@ -121,13 +117,10 @@ import PropertySelect from './Properties/PropertySelect'
 import PropertyGroups from './Properties/PropertyGroups'
 import ContactAvatar from './ContactDetails/ContactDetailsAvatar'
 
-Vue.use(VTooltip)
-
 export default {
 	name: 'ContactDetails',
 
 	components: {
-		PopoverMenu,
 		ContactProperty,
 		PropertySelect,
 		PropertyGroups,
@@ -135,10 +128,6 @@ export default {
 		ContactAvatar
 	},
 
-	directives: {
-		ClickOutside
-	},
-
 	props: {
 		loading: {
 			type: Boolean,
diff --git a/src/components/ContactDetails/ContactDetailsAddNewProp.vue b/src/components/ContactDetails/ContactDetailsAddNewProp.vue
index 404e1a14..9e12ac99 100644
--- a/src/components/ContactDetails/ContactDetailsAddNewProp.vue
+++ b/src/components/ContactDetails/ContactDetailsAddNewProp.vue
@@ -30,7 +30,7 @@
 			<div class="property__label" />
 
 			<!-- type selector -->
-			<multiselect :options="availableProperties" :placeholder="t('contacts', 'Choose property type')" class="multiselect-vue property__value"
+			<multiselect :options="availableProperties" :placeholder="t('contacts', 'Choose property type')" class="property__value"
 				track-by="id" label="name" @input="addProp" />
 		</div>
 	</div>
@@ -39,16 +39,13 @@
 <script>
 import rfcProps from '../../models/rfcProps.js'
 import Contact from '../../models/contact'
-import propertyTitle from '../Properties/PropertyTitle'
-
-import Multiselect from 'vue-multiselect'
+import PropertyTitle from '../Properties/PropertyTitle'
 
 export default {
 	name: 'ContactDetailsAddNewProp',
 
 	components: {
-		propertyTitle,
-		Multiselect
+		PropertyTitle
 	},
 
 	props: {
diff --git a/src/components/ContentList.vue b/src/components/ContentList.vue
index 891c9502..92941911 100644
--- a/src/components/ContentList.vue
+++ b/src/components/ContentList.vue
@@ -31,13 +31,15 @@
 </template>
 
 <script>
-import contentListItem from './ContentList/ContentListItem'
+import ContentListItem from './ContentList/ContentListItem'
 
 export default {
 	name: 'ContentList',
+
 	components: {
-		'content-list-item': contentListItem
+		ContentListItem
 	},
+
 	props: {
 		list: {
 			type: Array,
diff --git a/src/components/ImportScreen.vue b/src/components/ImportScreen.vue
index 954b165b..e8566438 100644
--- a/src/components/ImportScreen.vue
+++ b/src/components/ImportScreen.vue
@@ -33,11 +33,6 @@
 </template>
 
 <script>
-import Vue from 'vue'
-import VTooltip from 'v-tooltip'
-
-Vue.use(VTooltip)
-
 export default {
 	name: 'ImportScreen',
 	computed: {
diff --git a/src/components/Properties/PropertyDateTime.vue b/src/components/Properties/PropertyDateTime.vue
index e912c192..4a68f594 100644
--- a/src/components/Properties/PropertyDateTime.vue
+++ b/src/components/Properties/PropertyDateTime.vue
@@ -30,7 +30,7 @@
 			<!-- type selector -->
 			<multiselect v-if="propModel.options" v-model="localType"
 				:options="options" :searchable="false" :placeholder="t('contacts', 'Select type')"
-				class="multiselect-vue property__label" track-by="id" label="name"
+				class="property__label" track-by="id" label="name"
 				@input="updateType" />
 
 			<!-- if we do not support any type on our model but one is set anyway -->
@@ -51,13 +51,12 @@
 </template>
 
 <script>
-import Multiselect from 'vue-multiselect'
-import { DatetimePicker } from 'nextcloud-vue'
 import debounce from 'debounce'
 import moment from 'moment'
+import { DatetimePicker } from 'nextcloud-vue'
 import { VCardTime } from 'ical.js'
 
-import propertyTitle from './PropertyTitle'
+import PropertyTitle from './PropertyTitle'
 
 /**
  * Format time with locale to display only
@@ -134,9 +133,8 @@ export default {
 	name: 'PropertyDateTime',
 
 	components: {
-		Multiselect,
-		propertyTitle,
-		DatetimePicker
+		DatetimePicker,
+		PropertyTitle
 	},
 
 	props: {
diff --git a/src/components/Properties/PropertyGroups.vue b/src/components/Properties/PropertyGroups.vue
index 7675bbf1..b4de6185 100644
--- a/src/components/Properties/PropertyGroups.vue
+++ b/src/components/Properties/PropertyGroups.vue
@@ -29,7 +29,7 @@
 			<!-- multiselect taggable groups with a limit to 3 groups shown -->
 			<multiselect v-model="localValue" :options="groups" :placeholder="t('contacts', 'Add contact in group')"
 				:limit="3" :multiple="true" :taggable="true"
-				:close-on-select="false" tag-placeholder="create" class="multiselect-vue property__value"
+				:close-on-select="false" tag-placeholder="create" class="property__value"
 				@input="updateValue" @tag="validateGroup" @select="addContactToGroup"
 				@remove="removeContactToGroup">
 
@@ -42,17 +42,12 @@
 </template>
 
 <script>
-import Multiselect from 'vue-multiselect'
 import debounce from 'debounce'
 import Contact from '../../models/contact'
 
 export default {
 	name: 'PropertyGroups',
 
-	components: {
-		Multiselect
-	},
-
 	props: {
 		propModel: {
 			type: Object,
diff --git a/src/components/Properties/PropertyMultipleText.vue b/src/components/Properties/PropertyMultipleText.vue
index 50e2b71e..79386ba2 100644
--- a/src/components/Properties/PropertyMultipleText.vue
+++ b/src/components/Properties/PropertyMultipleText.vue
@@ -30,7 +30,7 @@
 			<!-- type selector -->
 			<multiselect v-if="propModel.options" v-model="localType"
 				:options="options" :searchable="false" :placeholder="t('contacts', 'Select type')"
-				class="multiselect-vue property__label" track-by="id" label="name"
+				class="property__label" track-by="id" label="name"
 				@input="updateType" />
 
 			<!-- if we do not support any type on our model but one is set anyway -->
@@ -69,16 +69,14 @@
 </template>
 
 <script>
-import Multiselect from 'vue-multiselect'
-import propertyTitle from './PropertyTitle'
+import PropertyTitle from './PropertyTitle'
 import debounce from 'debounce'
 
 export default {
 	name: 'PropertyText',
 
 	components: {
-		Multiselect,
-		propertyTitle
+		PropertyTitle
 	},
 
 	props: {
diff --git a/src/components/Properties/PropertySelect.vue b/src/components/Properties/PropertySelect.vue
index 6f2e3e42..f7b7b0bb 100644
--- a/src/components/Properties/PropertySelect.vue
+++ b/src/components/Properties/PropertySelect.vue
@@ -38,23 +38,21 @@
 			<button :title="t('contacts', 'Delete')" class="property__delete icon-delete" @click="deleteProperty" />
 
 			<multiselect v-model="matchedOptions" :options="propModel.options" :placeholder="t('contacts', 'Select option')"
-				class="multiselect-vue property__value" track-by="id" label="name"
+				class="property__value" track-by="id" label="name"
 				@input="updateValue" />
 		</div>
 	</div>
 </template>
 
 <script>
-import Multiselect from 'vue-multiselect'
-import propertyTitle from './PropertyTitle'
+import PropertyTitle from './PropertyTitle'
 import debounce from 'debounce'
 
 export default {
 	name: 'PropertySelect',
 
 	components: {
-		Multiselect,
-		propertyTitle
+		PropertyTitle
 	},
 
 	props: {
diff --git a/src/components/Properties/PropertyText.vue b/src/components/Properties/PropertyText.vue
index d2681784..b67514f0 100644
--- a/src/components/Properties/PropertyText.vue
+++ b/src/components/Properties/PropertyText.vue
@@ -30,7 +30,7 @@
 			<!-- type selector -->
 			<multiselect v-if="propModel.options" v-model="localType"
 				:options="options" :searchable="false" :placeholder="t('contacts', 'Select type')"
-				class="multiselect-vue property__label" track-by="id" label="name"
+				class="property__label" track-by="id" label="name"
 				@input="updateType" />
 
 			<!-- if we do not support any type on our model but one is set anyway -->
@@ -55,16 +55,14 @@
 </template>
 
 <script>
-import Multiselect from 'vue-multiselect'
-import propertyTitle from './PropertyTitle'
+import PropertyTitle from './PropertyTitle'
 import debounce from 'debounce'
 
 export default {
 	name: 'PropertyText',
 
 	components: {
-		Multiselect,
-		propertyTitle
+		PropertyTitle
 	},
 
 	props: {
diff --git a/src/components/Settings/SettingsAddressbook.vue b/src/components/Settings/SettingsAddressbook.vue
index 26931977..aaf9cd4c 100644
--- a/src/components/Settings/SettingsAddressbook.vue
+++ b/src/components/Settings/SettingsAddressbook.vue
@@ -42,24 +42,15 @@
 </template>
 
 <script>
-import Vue from 'vue'
-import { PopoverMenu } from 'nextcloud-vue'
-import ClickOutside from 'vue-click-outside'
-import VueClipboard from 'vue-clipboard2'
-
 import ShareAddressBook from './SettingsAddressbookShare'
 
-Vue.use(VueClipboard)
-
 export default {
 	name: 'SettingsAddressbook',
+
 	components: {
-		PopoverMenu,
 		ShareAddressBook
 	},
-	directives: {
-		ClickOutside
-	},
+
 	props: {
 		addressbook: {
 			type: Object,
diff --git a/src/components/Settings/SettingsAddressbookShare.vue b/src/components/Settings/SettingsAddressbookShare.vue
index 12bbc921..efea02b9 100644
--- a/src/components/Settings/SettingsAddressbookShare.vue
+++ b/src/components/Settings/SettingsAddressbookShare.vue
@@ -34,7 +34,6 @@
 			:placeholder="placeholder"
 			:class="{ 'showContent': inputGiven, 'icon-loading': isLoading }"
 			open-direction="bottom"
-			class="multiselect-vue"
 			@search-change="asyncFind"
 			@input="shareAddressbook">
 			<template slot="singleLabel" slot-scope="props">
@@ -57,23 +56,17 @@
 </template>
 
 <script>
-import clickOutside from 'vue-click-outside'
+
 import api from '../../services/api'
-import Multiselect from 'vue-multiselect'
+
 import addressBookSharee from './SettingsAddressbookSharee'
 import debounce from 'debounce'
 
 export default {
 	name: 'SettingsShareAddressbook',
 	components: {
-		clickOutside,
-		Multiselect,
 		addressBookSharee
 	},
-	directives: {
-		clickOutside,
-		debounce
-	},
 	props: {
 		addressbook: {
 			type: Object,
diff --git a/src/components/Settings/SettingsAddressbookSharee.vue b/src/components/Settings/SettingsAddressbookSharee.vue
index c9a4870d..613bd301 100644
--- a/src/components/Settings/SettingsAddressbookSharee.vue
+++ b/src/components/Settings/SettingsAddressbookSharee.vue
@@ -40,27 +40,23 @@
 </template>
 
 <script>
-import clickOutside from 'vue-click-outside'
 
 export default {
 	name: 'SettingsShareSharee',
-	components: {
-		clickOutside
-	},
-	directives: {
-		clickOutside
-	},
+
 	props: {
 		sharee: {
 			type: Object,
 			required: true
 		}
 	},
+
 	computed: {
 		writeable() {
 			return this.sharee.writeable
 		}
 	},
+
 	methods: {
 		deleteSharee() {
 			setTimeout(() => { this.$store.dispatch('removeSharee', this.sharee) }, 500)
diff --git a/src/components/Settings/SettingsImportContacts.vue b/src/components/Settings/SettingsImportContacts.vue
index 8b43191b..725637e0 100644
--- a/src/components/Settings/SettingsImportContacts.vue
+++ b/src/components/Settings/SettingsImportContacts.vue
@@ -32,29 +32,20 @@
 			:options="options"
 			:disabled="isSingleAddressbook"
 			:placeholder="t('contacts', 'Contacts')"
-			label="displayName"
-			class="multiselect-vue" />
+			label="displayName" />
 	</div>
 </template>
 
 <script>
-import clickOutside from 'vue-click-outside'
-import Multiselect from 'vue-multiselect'
-
 export default {
 	name: 'SettingsImportContacts',
-	components: {
-		clickOutside,
-		Multiselect
-	},
-	directives: {
-		clickOutside
-	},
+
 	data() {
 		return {
 			importDestination: false
 		}
 	},
+
 	computed: {
 		addressbooks() {
 			return this.$store.getters.getAddressbooks
diff --git a/src/components/Settings/SettingsNewAddressbook.vue b/src/components/Settings/SettingsNewAddressbook.vue
index 3a76c020..67ebabf6 100644
--- a/src/components/Settings/SettingsNewAddressbook.vue
+++ b/src/components/Settings/SettingsNewAddressbook.vue
@@ -33,16 +33,10 @@
 </template>
 
 <script>
-import clickOutside from 'vue-click-outside'
 
 export default {
 	name: 'SettingsNewAddressbook',
-	components: {
-		clickOutside
-	},
-	directives: {
-		clickOutside
-	},
+
 	data() {
 		return {
 			loading: false,
diff --git a/src/components/Settings/SettingsSortContacts.vue b/src/components/Settings/SettingsSortContacts.vue
index 07a24e45..6e13f575 100644
--- a/src/components/Settings/SettingsSortContacts.vue
+++ b/src/components/Settings/SettingsSortContacts.vue
@@ -31,24 +31,15 @@
 			:options="options"
 			track-by="key"
 			label="label"
-			class="multiselect-vue"
 			@input="sortContacts" />
 	</div>
 </template>
 
 <script>
-import clickOutside from 'vue-click-outside'
-import Multiselect from 'vue-multiselect'
 
 export default {
 	name: 'SettingsSortContacts',
-	components: {
-		clickOutside,
-		Multiselect
-	},
-	directives: {
-		clickOutside
-	},
+
 	props: {
 		addressbook: {
 			type: Object,
@@ -57,6 +48,7 @@ export default {
 			}
 		}
 	},
+
 	computed: {
 		/* Order Keys */
 		options() {
diff --git a/src/main.js b/src/main.js
index dc600319..5d02fcb9 100644
--- a/src/main.js
+++ b/src/main.js
@@ -27,6 +27,20 @@ import router from './router'
 import store from './store'
 import { sync } from 'vuex-router-sync'
 
+/** GLOBAL COMPONENTS AND DIRECTIVE */
+import { AppNavigation, DatetimePicker, Multiselect, PopoverMenu } from 'nextcloud-vue'
+import ClickOutside from 'vue-click-outside'
+import Tooltip from 'v-tooltip'
+import VueClipboard from 'vue-clipboard2'
+
+Vue.component('AppNavigation', AppNavigation)
+Vue.component('DatetimePicker', DatetimePicker)
+Vue.component('Multiselect', Multiselect)
+Vue.component('PopoverMenu', PopoverMenu)
+Vue.directive('ClickOutside', ClickOutside)
+Vue.directive('Tooltip', Tooltip)
+Vue.use(VueClipboard)
+
 // CSP config for webpack dynamic chunk loading
 // eslint-disable-next-line
 __webpack_nonce__ = btoa(OC.requestToken)
diff --git a/src/views/Contacts.vue b/src/views/Contacts.vue
index bcb8eff0..56843b5e 100644
--- a/src/views/Contacts.vue
+++ b/src/views/Contacts.vue
@@ -48,8 +48,6 @@
 </template>
 
 <script>
-import { AppNavigation } from 'nextcloud-vue'
-
 import SettingsSection from '../components/SettingsSection'
 import ContentList from '../components/ContentList'
 import ContactDetails from '../components/ContactDetails'
@@ -61,8 +59,9 @@ import rfcProps from '../models/rfcProps.js'
 import client from '../services/cdav.js'
 
 export default {
+	name: 'Contacts',
+
 	components: {
-		AppNavigation,
 		SettingsSection,
 		ContentList,
 		ContactDetails,