From dd0a064868d8d96249df5445fff2ceaf80ea62e5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?=
 <skjnldsv@protonmail.com>
Date: Thu, 26 Sep 2019 17:51:44 +0200
Subject: Move to global eslint
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
---
 src/components/Actions/ActionCopyNtoFN.vue         |  2 +-
 src/components/Actions/ActionToggleYear.vue        |  5 +-
 src/components/ContactDetails.vue                  | 82 +++++++++++++++-------
 .../ContactDetails/ContactDetailsAddNewProp.vue    | 14 ++--
 .../ContactDetails/ContactDetailsAvatar.vue        | 28 +++++---
 .../ContactDetails/ContactDetailsProperty.vue      | 35 +++++----
 src/components/ContactsList/ContactsListItem.vue   | 26 ++++---
 src/components/Properties/PropertyActions.vue      |  4 +-
 src/components/Properties/PropertyDateTime.vue     | 35 ++++++---
 src/components/Properties/PropertyGroups.vue       | 20 ++++--
 src/components/Properties/PropertyMultipleText.vue | 51 ++++++++++----
 src/components/Properties/PropertySelect.vue       | 17 +++--
 src/components/Properties/PropertyText.vue         | 47 +++++++++----
 src/components/Settings/SettingsAddressbook.vue    |  9 ++-
 .../Settings/SettingsAddressbookShare.vue          |  8 ++-
 .../Settings/SettingsAddressbookSharee.vue         | 12 ++--
 src/components/Settings/SettingsImportContacts.vue | 11 ++-
 src/components/Settings/SettingsNewAddressbook.vue | 24 +++++--
 src/components/SettingsSection.vue                 | 28 ++++----
 19 files changed, 315 insertions(+), 143 deletions(-)

(limited to 'src/components')

diff --git a/src/components/Actions/ActionCopyNtoFN.vue b/src/components/Actions/ActionCopyNtoFN.vue
index ccce1fb8..278239c6 100644
--- a/src/components/Actions/ActionCopyNtoFN.vue
+++ b/src/components/Actions/ActionCopyNtoFN.vue
@@ -27,7 +27,7 @@
 </template>
 <script>
 import { ActionButton } from 'nextcloud-vue'
-import ActionsMixin from 'Mixins/ActionsMixin'
+import ActionsMixin from '../../mixins/ActionsMixin'
 
 export default {
 	name: 'ActionCopyNtoFN',
diff --git a/src/components/Actions/ActionToggleYear.vue b/src/components/Actions/ActionToggleYear.vue
index 9c204fbd..0ad9dacd 100644
--- a/src/components/Actions/ActionToggleYear.vue
+++ b/src/components/Actions/ActionToggleYear.vue
@@ -22,13 +22,14 @@
 
 <template>
 	<ActionCheckbox :checked="omitYear"
-		@check="removeYear" @uncheck="addYear">
+		@check="removeYear"
+		@uncheck="addYear">
 		{{ t('contacts', 'Omit year') }}
 	</ActionCheckbox>
 </template>
 <script>
 import { ActionCheckbox } from 'nextcloud-vue'
-import ActionsMixin from 'Mixins/ActionsMixin'
+import ActionsMixin from '../../mixins/ActionsMixin'
 
 export default {
 	name: 'ActionToggleYear',
diff --git a/src/components/ContactDetails.vue b/src/components/ContactDetails.vue
index 86b0333d..0dd8ead8 100644
--- a/src/components/ContactDetails.vue
+++ b/src/components/ContactDetails.vue
@@ -46,20 +46,39 @@
 				<!-- fullname, org, title -->
 				<div id="contact-header-infos">
 					<h2>
-						<input id="contact-fullname" ref="fullname" v-model="contact.fullName"
-							:readonly="contact.addressbook.readOnly" :placeholder="t('contacts', 'Name')" type="text"
-							autocomplete="off" autocorrect="off" spellcheck="false"
+						<input id="contact-fullname"
+							ref="fullname"
+							v-model="contact.fullName"
+							:readonly="contact.addressbook.readOnly"
+							:placeholder="t('contacts', 'Name')"
+							type="text"
+							autocomplete="off"
+							autocorrect="off"
+							spellcheck="false"
 							name="fullname"
-							@input="debounceUpdateContact" @click="selectInput">
+							@input="debounceUpdateContact"
+							@click="selectInput">
 					</h2>
 					<div id="details-org-container">
-						<input id="contact-org" v-model="contact.org" :readonly="contact.addressbook.readOnly"
-							:placeholder="t('contacts', 'Company')" type="text" autocomplete="off"
-							autocorrect="off" spellcheck="false" name="org"
+						<input id="contact-org"
+							v-model="contact.org"
+							:readonly="contact.addressbook.readOnly"
+							:placeholder="t('contacts', 'Company')"
+							type="text"
+							autocomplete="off"
+							autocorrect="off"
+							spellcheck="false"
+							name="org"
 							@input="debounceUpdateContact">
-						<input id="contact-title" v-model="contact.title" :readonly="contact.addressbook.readOnly"
-							:placeholder="t('contacts', 'Title')" type="text" autocomplete="off"
-							autocorrect="off" spellcheck="false" name="title"
+						<input id="contact-title"
+							v-model="contact.title"
+							:readonly="contact.addressbook.readOnly"
+							:placeholder="t('contacts', 'Title')"
+							type="text"
+							autocomplete="off"
+							autocorrect="off"
+							spellcheck="false"
+							name="title"
 							@input="debounceUpdateContact">
 					</div>
 				</div>
@@ -73,19 +92,24 @@
 							trigger: 'hover focus'
 						}"
 						:class="{'icon-loading-small': loadingUpdate,
-							[`${warning.icon}`]: warning}" class="header-icon" href="#" />
+							[`${warning.icon}`]: warning}"
+						class="header-icon"
+						href="#" />
 
 					<!-- conflict message -->
-					<div v-if="conflict" v-tooltip="{
+					<div v-if="conflict"
+						v-tooltip="{
 							content: conflict,
 							show: true,
 							trigger: 'manual',
-						}" class="header-icon header-icon--pulse icon-history-force-white"
+						}"
+						class="header-icon header-icon--pulse icon-history-force-white"
 						@click="refreshContact" />
 
 					<!-- menu actions -->
 					<Actions class="header-menu" menu-align="right">
-						<ActionLink :href="contact.url" :download="`${contact.displayName}.vcf`"
+						<ActionLink :href="contact.url"
+							:download="`${contact.displayName}.vcf`"
 							icon="icon-download">
 							{{ t('contacts', 'Download') }}
 						</ActionLink>
@@ -99,7 +123,9 @@
 				</div>
 
 				<!-- qrcode -->
-				<Modal v-if="qrcode" id="qrcode-modal" :title="contact.displayName"
+				<Modal v-if="qrcode"
+					id="qrcode-modal"
+					:title="contact.displayName"
 					@close="closeQrModal">
 					<img :src="`data:image/svg+xml;base64,${qrcode}`" class="qrcode" width="400">
 				</Modal>
@@ -115,9 +141,12 @@
 				<!-- passing the debounceUpdateContact so that the contact-property component contains the function
 					and allow us to use it on the rfcProps since the scope is forwarded to the actions -->
 				<ContactProperty v-for="(property, index) in sortedProperties"
-					:key="`${index}-${contact.key}-${property.name}`" :index="index"
-					:sorted-properties="sortedProperties" :property="property"
-					:contact="contact" :local-contact="localContact"
+					:key="`${index}-${contact.key}-${property.name}`"
+					:index="index"
+					:sorted-properties="sortedProperties"
+					:property="property"
+					:contact="contact"
+					:local-contact="localContact"
 					:update-contact="debounceUpdateContact" />
 
 				<!-- addressbook change select - no last property because class is not applied here,
@@ -125,14 +154,19 @@
 					we are hijacking this... (this is supposed to be used with a ICAL.property, but to avoid code
 					duplication, we created a fake propModel and property with our own options here) -->
 				<PropertySelect v-if="addressbooksOptions.length > 1"
-					:prop-model="addressbookModel" :value.sync="addressbook"
-					:is-first-property="true" :is-last-property="true"
+					:prop-model="addressbookModel"
+					:value.sync="addressbook"
+					:is-first-property="true"
+					:is-last-property="true"
 					:property="{}"
 					class="property--addressbooks property--last property--without-actions" />
 
 				<!-- Groups always visible -->
-				<PropertyGroups :prop-model="groupsModel" :value.sync="groups" :contact="contact"
-					:is-read-only="isReadOnly" class="property--groups property--last" />
+				<PropertyGroups :prop-model="groupsModel"
+					:value.sync="groups"
+					:contact="contact"
+					:is-read-only="isReadOnly"
+					class="property--groups property--last" />
 
 				<!-- Last modified-->
 				<PropertyRev v-if="contact.rev" :value="contact.rev" />
@@ -151,8 +185,8 @@ import qr from 'qr-image'
 import { stringify } from 'ical.js'
 import { ActionLink, ActionButton } from 'nextcloud-vue'
 
-import rfcProps from 'Models/rfcProps'
-import validate from 'Services/validate'
+import rfcProps from '../models/rfcProps'
+import validate from '../services/validate'
 
 import AddNewProp from './ContactDetails/ContactDetailsAddNewProp'
 import ContactAvatar from './ContactDetails/ContactDetailsAvatar'
diff --git a/src/components/ContactDetails/ContactDetailsAddNewProp.vue b/src/components/ContactDetails/ContactDetailsAddNewProp.vue
index abb2985a..13520ac7 100644
--- a/src/components/ContactDetails/ContactDetailsAddNewProp.vue
+++ b/src/components/ContactDetails/ContactDetailsAddNewProp.vue
@@ -29,16 +29,20 @@
 			<div class="property__label" />
 
 			<!-- type selector -->
-			<multiselect :options="availableProperties" :placeholder="t('contacts', 'Choose property type')" class="property__value"
-				track-by="id" label="name" @input="addProp" />
+			<multiselect :options="availableProperties"
+				:placeholder="t('contacts', 'Choose property type')"
+				class="property__value"
+				track-by="id"
+				label="name"
+				@input="addProp" />
 		</div>
 	</div>
 </template>
 
 <script>
-import rfcProps from 'Models/rfcProps'
-import Contact from 'Models/contact'
-import PropertyTitle from 'Components/Properties/PropertyTitle'
+import rfcProps from '../../models/rfcProps'
+import Contact from '../../models/contact'
+import PropertyTitle from '../Properties/PropertyTitle'
 import ICAL from 'ical.js'
 
 export default {
diff --git a/src/components/ContactDetails/ContactDetailsAvatar.vue b/src/components/ContactDetails/ContactDetailsAvatar.vue
index fbfea250..a8762983 100644
--- a/src/components/ContactDetails/ContactDetailsAvatar.vue
+++ b/src/components/ContactDetails/ContactDetailsAvatar.vue
@@ -25,21 +25,30 @@
 	<div class="contact-header-avatar">
 		<div class="contact-header-avatar__wrapper">
 			<div class="contact-header-avatar__background" @click="toggleModal" />
-			<div v-if="contact.photo" :style="{ 'backgroundImage': `url(${contact.photoUrl})` }"
+			<div v-if="contact.photo"
+				:style="{ 'backgroundImage': `url(${contact.photoUrl})` }"
 				class="contact-header-avatar__photo"
 				@click="toggleModal" />
 
 			<div v-click-outside="closeMenu" class="contact-header-avatar__options">
-				<a v-tooltip.bottom="t('contacts', 'Add a new picture')" href="#" class="contact-avatar-options"
+				<a v-tooltip.bottom="t('contacts', 'Add a new picture')"
+					href="#"
+					class="contact-avatar-options"
 					:class="loading ? 'icon-loading-small' : 'icon-picture-force-white'"
 					@click.stop.prevent="toggleMenu" />
-				<input id="contact-avatar-upload" ref="uploadInput" type="file"
-					class="hidden" accept="image/*" @change="processFile">
+				<input id="contact-avatar-upload"
+					ref="uploadInput"
+					type="file"
+					class="hidden"
+					accept="image/*"
+					@change="processFile">
 			</div>
 
 			<Modal v-if="maximizeAvatar"
-				ref="modal" class="contact-header-modal"
-				size="large" :title="contact.displayName"
+				ref="modal"
+				class="contact-header-modal"
+				size="large"
+				:title="contact.displayName"
 				@close="toggleModal">
 				<template #actions>
 					<ActionButton v-if="!isReadOnly" icon="icon-upload" @click="selectFileInput">
@@ -55,8 +64,11 @@
 						{{ t('contacts', 'Download picture') }}
 					</ActionLink>
 				</template>
-				<img ref="img" :src="contact.photoUrl" class="contact-header-modal__photo"
-					:style="{ width, height }" @load="updateImgSize">
+				<img ref="img"
+					:src="contact.photoUrl"
+					class="contact-header-modal__photo"
+					:style="{ width, height }"
+					@load="updateImgSize">
 			</Modal>
 
 			<!-- out of the avatar__options because of the overflow hidden -->
diff --git a/src/components/ContactDetails/ContactDetailsProperty.vue b/src/components/ContactDetails/ContactDetailsProperty.vue
index ac2452f5..ece501e1 100644
--- a/src/components/ContactDetails/ContactDetailsProperty.vue
+++ b/src/components/ContactDetails/ContactDetailsProperty.vue
@@ -22,23 +22,34 @@
 
 <template>
 	<!-- If not in the rfcProps then we don't want to display it -->
-	<component :is="componentInstance" v-if="propModel && propType !== 'unknown'" ref="component"
-		:select-type.sync="selectType" :prop-model="propModel" :value.sync="value"
-		:is-first-property="isFirstProperty" :property="property" :is-last-property="isLastProperty"
-		:class="{'property--last': isLastProperty}" :local-contact="localContact" :prop-name="propName"
-		:prop-type="propType" :options="sortedModelOptions" :is-read-only="isReadOnly"
-		@delete="deleteProp" @update="updateContact" />
+	<component :is="componentInstance"
+		v-if="propModel && propType !== 'unknown'"
+		ref="component"
+		:select-type.sync="selectType"
+		:prop-model="propModel"
+		:value.sync="value"
+		:is-first-property="isFirstProperty"
+		:property="property"
+		:is-last-property="isLastProperty"
+		:class="{'property--last': isLastProperty}"
+		:local-contact="localContact"
+		:prop-name="propName"
+		:prop-type="propType"
+		:options="sortedModelOptions"
+		:is-read-only="isReadOnly"
+		@delete="deleteProp"
+		@update="updateContact" />
 </template>
 
 <script>
 import { Property } from 'ical.js'
-import rfcProps from 'Models/rfcProps'
-import Contact from 'Models/contact'
+import rfcProps from '../../models/rfcProps'
+import Contact from '../../models/contact'
 
-import PropertyText from 'Components/Properties/PropertyText'
-import PropertyMultipleText from 'Components/Properties/PropertyMultipleText'
-import PropertyDateTime from 'Components/Properties/PropertyDateTime'
-import PropertySelect from 'Components/Properties/PropertySelect'
+import PropertyText from '../Properties/PropertyText'
+import PropertyMultipleText from '../Properties/PropertyMultipleText'
+import PropertyDateTime from '../Properties/PropertyDateTime'
+import PropertySelect from '../Properties/PropertySelect'
 
 export default {
 	name: 'ContactDetailsProperty',
diff --git a/src/components/ContactsList/ContactsListItem.vue b/src/components/ContactsList/ContactsListItem.vue
index d71a2a69..af6846e6 100644
--- a/src/components/ContactsList/ContactsListItem.vue
+++ b/src/components/ContactsList/ContactsListItem.vue
@@ -1,9 +1,12 @@
 <template>
 	<transition name="delete-slide-left">
-		<div v-if="!deleteTimeout" :id="id"
+		<div v-if="!deleteTimeout"
+			:id="id"
 			:class="{active: selectedContact === contact.key}"
-			tabindex="0" class="app-content-list-item"
-			@click.prevent.stop="selectContact" @keypress.enter.prevent.stop="selectContact">
+			tabindex="0"
+			class="app-content-list-item"
+			@click.prevent.stop="selectContact"
+			@keypress.enter.prevent.stop="selectContact">
 			<!-- keyboard accessibility will focus the input and not the label -->
 			<!--
 			<input ref="selected" :id="contact.key" type="checkbox"
@@ -25,12 +28,17 @@
 			</div>
 
 			<!-- undo actions -->
-			<div v-if="!contact.addressbook.readOnly && !deleteTimeout" class="icon-delete" tabindex="0"
-				@click.prevent.stop="deleteContact" @keypress.enter.prevent.stop="deleteContact" />
+			<div v-if="!contact.addressbook.readOnly && !deleteTimeout"
+				class="icon-delete"
+				tabindex="0"
+				@click.prevent.stop="deleteContact"
+				@keypress.enter.prevent.stop="deleteContact" />
 		</div>
 
 		<!-- Deleted contact (pending) -->
-		<div v-else :id="id" key="deleted"
+		<div v-else
+			:id="id"
+			key="deleted"
 			class="deleted app-content-list-item">
 			<div :style="{ backgroundColor: 'grey' }" class="app-content-list-item-icon">
 				{{ contact.displayName | firstLetter }}
@@ -41,9 +49,11 @@
 			<div class="app-content-list-item-line-one">
 				{{ contact.displayName }}
 			</div>
-			<div v-tooltip.auto="t('contacts', 'Deleting the contact in {countdown} seconds', { countdown })" class="icon-history"
+			<div v-tooltip.auto="t('contacts', 'Deleting the contact in {countdown} seconds', { countdown })"
+				class="icon-history"
 				tabindex="0"
-				@click.prevent.stop="cancelDeletion" @keypress.enter.prevent.stop="cancelDeletion" />
+				@click.prevent.stop="cancelDeletion"
+				@keypress.enter.prevent.stop="cancelDeletion" />
 		</div>
 	</transition>
 </template>
diff --git a/src/components/Properties/PropertyActions.vue b/src/components/Properties/PropertyActions.vue
index bbf908ed..19ce5f02 100644
--- a/src/components/Properties/PropertyActions.vue
+++ b/src/components/Properties/PropertyActions.vue
@@ -25,7 +25,9 @@
 		<ActionButton icon="icon-delete" @click="deleteProperty">
 			{{ t('contacts', 'Delete') }}
 		</ActionButton>
-		<actions :is="action" v-for="(action, index) in actions" :key="index"
+		<actions :is="action"
+			v-for="(action, index) in actions"
+			:key="index"
 			:component="propertyComponent" />
 	</Actions>
 </template>
diff --git a/src/components/Properties/PropertyDateTime.vue b/src/components/Properties/PropertyDateTime.vue
index 6c909adf..8e49bb56 100644
--- a/src/components/Properties/PropertyDateTime.vue
+++ b/src/components/Properties/PropertyDateTime.vue
@@ -23,15 +23,23 @@
 <template>
 	<div v-if="propModel" :class="`grid-span-${gridLength}`" class="property">
 		<!-- title if first element -->
-		<PropertyTitle v-if="isFirstProperty && propModel.icon" :icon="propModel.icon" :readable-name="propModel.readableName"
+		<PropertyTitle v-if="isFirstProperty && propModel.icon"
+			:icon="propModel.icon"
+			:readable-name="propModel.readableName"
 			:info="propModel.info" />
 
 		<div class="property__row">
 			<!-- type selector -->
-			<multiselect v-if="propModel.options" v-model="localType"
-				:options="options" :searchable="false" :placeholder="t('contacts', 'Select type')"
-				:disabled="isReadOnly" class="property__label" track-by="id"
-				label="name" @input="updateType" />
+			<multiselect v-if="propModel.options"
+				v-model="localType"
+				:options="options"
+				:searchable="false"
+				:placeholder="t('contacts', 'Select type')"
+				:disabled="isReadOnly"
+				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 -->
 			<div v-else-if="selectType" class="property__label">
@@ -44,10 +52,17 @@
 			</div>
 
 			<!-- Real input where the picker shows -->
-			<DatetimePicker :value="vcardTimeLocalValue.toJSDate()" :minute-step="10" :lang="lang"
-				:clearable="false" :first-day-of-week="firstDay" :type="inputType"
-				:readonly="isReadOnly" :format="dateFormat" class="property__value"
-				confirm @confirm="debounceUpdateValue" />
+			<DatetimePicker :value="vcardTimeLocalValue.toJSDate()"
+				:minute-step="10"
+				:lang="lang"
+				:clearable="false"
+				:first-day-of-week="firstDay"
+				:type="inputType"
+				:readonly="isReadOnly"
+				:format="dateFormat"
+				class="property__value"
+				confirm
+				@confirm="debounceUpdateValue" />
 
 			<!-- props actions -->
 			<PropertyActions :actions="actions" :property-component="this" @delete="deleteProperty" />
@@ -62,7 +77,7 @@ import { DatetimePicker } from 'nextcloud-vue'
 import { getLocale } from 'nextcloud-l10n'
 import { VCardTime } from 'ical.js'
 
-import PropertyMixin from 'Mixins/PropertyMixin'
+import PropertyMixin from '../../mixins/PropertyMixin'
 import PropertyTitle from './PropertyTitle'
 import PropertyActions from './PropertyActions'
 
diff --git a/src/components/Properties/PropertyGroups.vue b/src/components/Properties/PropertyGroups.vue
index c6e6c419..41964ef5 100644
--- a/src/components/Properties/PropertyGroups.vue
+++ b/src/components/Properties/PropertyGroups.vue
@@ -30,11 +30,19 @@
 			</div>
 
 			<!-- multiselect taggable groups with a limit to 3 groups shown -->
-			<multiselect v-model="localValue" :options="groups" :placeholder="t('contacts', 'Add contact in group')"
-				:multiple="true" :taggable="true" :close-on-select="false"
-				:readonly="isReadOnly" :tag-width="60"
-				tag-placeholder="create" class="property__value"
-				@input="updateValue" @tag="validateGroup" @select="addContactToGroup"
+			<multiselect v-model="localValue"
+				:options="groups"
+				:placeholder="t('contacts', 'Add contact in group')"
+				:multiple="true"
+				:taggable="true"
+				:close-on-select="false"
+				:readonly="isReadOnly"
+				:tag-width="60"
+				tag-placeholder="create"
+				class="property__value"
+				@input="updateValue"
+				@tag="validateGroup"
+				@select="addContactToGroup"
 				@remove="removeContactToGroup">
 				<!-- show how many groups are hidden and add tooltip -->
 				<span slot="limit" v-tooltip.auto="formatGroupsTitle" class="multiselect__limit">
@@ -50,7 +58,7 @@
 
 <script>
 import debounce from 'debounce'
-import Contact from 'Models/contact'
+import Contact from '../../models/contact'
 
 export default {
 	name: 'PropertyGroups',
diff --git a/src/components/Properties/PropertyMultipleText.vue b/src/components/Properties/PropertyMultipleText.vue
index 84753871..6579fb12 100644
--- a/src/components/Properties/PropertyMultipleText.vue
+++ b/src/components/Properties/PropertyMultipleText.vue
@@ -23,16 +23,25 @@
 <template>
 	<div v-if="propModel" :class="`grid-span-${gridLength}`" class="property">
 		<!-- title if first element -->
-		<PropertyTitle v-if="isFirstProperty && propModel.icon" :icon="propModel.icon" :readable-name="propModel.readableName"
+		<PropertyTitle v-if="isFirstProperty && propModel.icon"
+			:icon="propModel.icon"
+			:readable-name="propModel.readableName"
 			:info="propModel.info" />
 
 		<div class="property__row">
 			<!-- type selector -->
-			<multiselect v-if="propModel.options" v-model="localType"
-				:options="options" :placeholder="t('contacts', 'Select type')"
-				:taggable="true" tag-placeholder="create" :disabled="isReadOnly"
-				class="property__label" track-by="id" label="name"
-				@tag="createLabel" @input="updateType" />
+			<multiselect v-if="propModel.options"
+				v-model="localType"
+				:options="options"
+				:placeholder="t('contacts', 'Select type')"
+				:taggable="true"
+				tag-placeholder="create"
+				:disabled="isReadOnly"
+				class="property__label"
+				track-by="id"
+				label="name"
+				@tag="createLabel"
+				@input="updateType" />
 
 			<!-- if we do not support any type on our model but one is set anyway -->
 			<div v-else-if="selectType" class="property__label">
@@ -46,12 +55,17 @@
 			</div>
 
 			<!-- show the first input if not a structured value -->
-			<input v-if="!property.isStructuredValue" v-model.trim="localValue[0]" :readonly="isReadOnly"
-				class="property__value" type="text" @input="updateValue">
+			<input v-if="!property.isStructuredValue"
+				v-model.trim="localValue[0]"
+				:readonly="isReadOnly"
+				class="property__value"
+				type="text"
+				@input="updateValue">
 
 			<!-- props actions -->
 			<PropertyActions class="property__actions--floating"
-				:actions="actions" :property-component="this"
+				:actions="actions"
+				:property-component="this"
 				@delete="deleteProperty" />
 		</div>
 
@@ -61,25 +75,32 @@
 				<div class="property__label">
 					{{ propModel.readableValues[index] }}
 				</div>
-				<input v-model.trim="localValue[index]" :readonly="isReadOnly" class="property__value"
-					type="text" @input="updateValue">
+				<input v-model.trim="localValue[index]"
+					:readonly="isReadOnly"
+					class="property__value"
+					type="text"
+					@input="updateValue">
 			</div>
 		</template>
 
 		<!-- no order enforced: just iterate on all the values -->
 		<template v-else>
-			<div v-for="(value, index) in filteredValue" :key="index"
+			<div v-for="(value, index) in filteredValue"
+				:key="index"
 				class="property__row">
 				<div class="property__label" />
-				<input v-model.trim="filteredValue[index]" :readonly="isReadOnly" class="property__value"
-					type="text" @input="updateValue">
+				<input v-model.trim="filteredValue[index]"
+					:readonly="isReadOnly"
+					class="property__value"
+					type="text"
+					@input="updateValue">
 			</div>
 		</template>
 	</div>
 </template>
 
 <script>
-import PropertyMixin from 'Mixins/PropertyMixin'
+import PropertyMixin from '../../mixins/PropertyMixin'
 import PropertyTitle from './PropertyTitle'
 import PropertyActions from './PropertyActions'
 
diff --git a/src/components/Properties/PropertySelect.vue b/src/components/Properties/PropertySelect.vue
index 4b5893d3..0f54d507 100644
--- a/src/components/Properties/PropertySelect.vue
+++ b/src/components/Properties/PropertySelect.vue
@@ -23,7 +23,9 @@
 <template>
 	<div v-if="propModel" :class="`grid-span-${gridLength}`" class="property">
 		<!-- title if first element -->
-		<PropertyTitle v-if="isFirstProperty && propModel.icon" :icon="propModel.icon" :readable-name="propModel.readableName"
+		<PropertyTitle v-if="isFirstProperty && propModel.icon"
+			:icon="propModel.icon"
+			:readable-name="propModel.readableName"
 			:info="propModel.info" />
 
 		<div class="property__row">
@@ -37,9 +39,14 @@
 				{{ propModel.readableName }}
 			</div>
 
-			<multiselect v-model="matchedOptions" :options="propModel.options" :placeholder="t('contacts', 'Select option')"
-				:disabled="isSingleOption || isReadOnly" class="property__value" track-by="id"
-				label="name" @input="updateValue" />
+			<multiselect v-model="matchedOptions"
+				:options="propModel.options"
+				:placeholder="t('contacts', 'Select option')"
+				:disabled="isSingleOption || isReadOnly"
+				class="property__value"
+				track-by="id"
+				label="name"
+				@input="updateValue" />
 
 			<!-- props actions -->
 			<PropertyActions :actions="actions" :property-component="this" @delete="deleteProperty" />
@@ -48,7 +55,7 @@
 </template>
 
 <script>
-import PropertyMixin from 'Mixins/PropertyMixin'
+import PropertyMixin from '../../mixins/PropertyMixin'
 import PropertyTitle from './PropertyTitle'
 import PropertyActions from './PropertyActions'
 
diff --git a/src/components/Properties/PropertyText.vue b/src/components/Properties/PropertyText.vue
index 05ec9861..3089da96 100644
--- a/src/components/Properties/PropertyText.vue
+++ b/src/components/Properties/PropertyText.vue
@@ -23,16 +23,25 @@
 <template>
 	<div v-if="propModel" :class="`grid-span-${gridLength}`" class="property">
 		<!-- title if first element -->
-		<PropertyTitle v-if="isFirstProperty && propModel.icon" :icon="propModel.icon" :readable-name="propModel.readableName"
+		<PropertyTitle v-if="isFirstProperty && propModel.icon"
+			:icon="propModel.icon"
+			:readable-name="propModel.readableName"
 			:info="propModel.info" />
 
 		<div class="property__row">
 			<!-- type selector -->
-			<multiselect v-if="propModel.options" v-model="localType"
-				:options="options" :placeholder="t('contacts', 'Select type')"
-				:taggable="true" tag-placeholder="create" :disabled="isReadOnly"
-				class="property__label" track-by="id" label="name"
-				@tag="createLabel" @input="updateType" />
+			<multiselect v-if="propModel.options"
+				v-model="localType"
+				:options="options"
+				:placeholder="t('contacts', 'Select type')"
+				:taggable="true"
+				tag-placeholder="create"
+				:disabled="isReadOnly"
+				class="property__label"
+				track-by="id"
+				label="name"
+				@tag="createLabel"
+				@input="updateType" />
 
 			<!-- if we do not support any type on our model but one is set anyway -->
 			<div v-else-if="selectType" class="property__label">
@@ -45,18 +54,30 @@
 			</div>
 
 			<!-- textarea for note -->
-			<textarea v-if="propName === 'note'" id="textarea" ref="textarea"
-				v-model.trim="localValue" :type="type" :readonly="isReadOnly"
+			<textarea v-if="propName === 'note'"
+				id="textarea"
+				ref="textarea"
+				v-model.trim="localValue"
+				:type="type"
+				:readonly="isReadOnly"
 				class="property__value"
-				@input="updateValueNoDebounce" @mousemove="resizeGrid" @keypress="resizeGrid" />
+				@input="updateValueNoDebounce"
+				@mousemove="resizeGrid"
+				@keypress="resizeGrid" />
 
 			<!-- OR default to input -->
-			<input v-else v-model.trim="localValue" :type="type"
-				:readonly="isReadOnly" :class="{'property__value--with-ext': haveExtHandler}" class="property__value"
+			<input v-else
+				v-model.trim="localValue"
+				:type="type"
+				:readonly="isReadOnly"
+				:class="{'property__value--with-ext': haveExtHandler}"
+				class="property__value"
 				@input="updateValue">
 
 			<!-- external link -->
-			<a v-if="haveExtHandler" :href="externalHandler" class="property__ext icon-external"
+			<a v-if="haveExtHandler"
+				:href="externalHandler"
+				class="property__ext icon-external"
 				target="_blank" />
 
 			<!-- props actions -->
@@ -67,7 +88,7 @@
 
 <script>
 import debounce from 'debounce'
-import PropertyMixin from 'Mixins/PropertyMixin'
+import PropertyMixin from '../../mixins/PropertyMixin'
 import PropertyTitle from './PropertyTitle'
 import PropertyActions from './PropertyActions'
 
diff --git a/src/components/Settings/SettingsAddressbook.vue b/src/components/Settings/SettingsAddressbook.vue
index 2e505158..b136aed8 100644
--- a/src/components/Settings/SettingsAddressbook.vue
+++ b/src/components/Settings/SettingsAddressbook.vue
@@ -28,10 +28,13 @@
 		</span>
 
 		<!-- sharing button -->
-		<a v-if="!addressbook.readOnly" v-tooltip.top="sharedWithTooltip"
+		<a v-if="!addressbook.readOnly"
+			v-tooltip.top="sharedWithTooltip"
 			:class="{'addressbook__share--shared': hasShares}"
-			:title="sharedWithTooltip" href="#"
-			class="addressbook__share icon-shared" @click="toggleShare" />
+			:title="sharedWithTooltip"
+			href="#"
+			class="addressbook__share icon-shared"
+			@click="toggleShare" />
 
 		<!-- popovermenu -->
 		<Actions class="addressbook__menu" menu-align="right">
diff --git a/src/components/Settings/SettingsAddressbookShare.vue b/src/components/Settings/SettingsAddressbookShare.vue
index eb3c29ca..ef5cd9aa 100644
--- a/src/components/Settings/SettingsAddressbookShare.vue
+++ b/src/components/Settings/SettingsAddressbookShare.vue
@@ -39,14 +39,16 @@
 			@input="shareAddressbook" />
 		<!-- list of user or groups addressbook is shared with -->
 		<ul v-if="addressbook.shares.length > 0" class="addressbook-shares__list">
-			<address-book-sharee v-for="sharee in addressbook.shares" :key="sharee.uri"
-				:sharee="sharee" :addressbook="addressbook" />
+			<address-book-sharee v-for="sharee in addressbook.shares"
+				:key="sharee.uri"
+				:sharee="sharee"
+				:addressbook="addressbook" />
 		</ul>
 	</div>
 </template>
 
 <script>
-import client from 'Services/cdav'
+import client from '../../services/cdav'
 
 import addressBookSharee from './SettingsAddressbookSharee'
 import debounce from 'debounce'
diff --git a/src/components/Settings/SettingsAddressbookSharee.vue b/src/components/Settings/SettingsAddressbookSharee.vue
index d7bea024..350aaa0b 100644
--- a/src/components/Settings/SettingsAddressbookSharee.vue
+++ b/src/components/Settings/SettingsAddressbookSharee.vue
@@ -23,10 +23,11 @@
 <template>
 	<li class="addressbook-sharee">
 		<span :class="{
-			'icon-loading-small': loading,
-			'icon-group': sharee.isGroup && !loading,
-			'icon-user': !sharee.isGroup && !loading
-		}" class="icon" />
+				'icon-loading-small': loading,
+				'icon-group': sharee.isGroup && !loading,
+				'icon-user': !sharee.isGroup && !loading
+			}"
+			class="icon" />
 		<span class="addressbook-sharee__identifier">
 			{{ sharee.displayName }}
 		</span>
@@ -42,7 +43,8 @@
 			<label :for="uid">
 				{{ t('contacts', 'can edit') }}
 			</label>
-			<a :class="{'addressbook-sharee__utils--disabled': loading}" href="#"
+			<a :class="{'addressbook-sharee__utils--disabled': loading}"
+				href="#"
 				title="Delete"
 				class="icon-delete"
 				@click="deleteSharee" />
diff --git a/src/components/Settings/SettingsImportContacts.vue b/src/components/Settings/SettingsImportContacts.vue
index c44c4939..9f2c13d0 100644
--- a/src/components/Settings/SettingsImportContacts.vue
+++ b/src/components/Settings/SettingsImportContacts.vue
@@ -23,8 +23,11 @@
 <template>
 	<div class="import-contact">
 		<template v-if="!isNoAddressbookAvailable">
-			<input id="contact-import" :disabled="isImporting" type="file"
-				class="hidden-visually" @change="processFile">
+			<input id="contact-import"
+				:disabled="isImporting"
+				type="file"
+				class="hidden-visually"
+				@change="processFile">
 			<label id="upload" for="contact-import" class="button import-contact__multiselect-label icon-upload">
 				{{ isImporting ? t('contacts', 'Importing into') : t('contacts', 'Import into') }}
 			</label>
@@ -36,7 +39,9 @@
 				label="displayName"
 				class="import-contact__multiselect" />
 		</template>
-		<button v-else id="upload" for="contact-import"
+		<button v-else
+			id="upload"
+			for="contact-import"
 			class="button import-contact__multiselect-label import-contact__multiselect--no-select icon-error">
 			{{ t('contacts', 'Importing is disabled because there are no address books available') }}
 		</button>
diff --git a/src/components/Settings/SettingsNewAddressbook.vue b/src/components/Settings/SettingsNewAddressbook.vue
index 67ebabf6..b8e338b9 100644
--- a/src/components/Settings/SettingsNewAddressbook.vue
+++ b/src/components/Settings/SettingsNewAddressbook.vue
@@ -21,12 +21,24 @@
 -->
 
 <template>
-	<form id="new-addressbook-form" :disabled="loading" :class="{'icon-loading-small': loading}"
-		name="new-addressbook-form" class="new-addressbook" @submit.prevent.stop="addAddressbook">
-		<input id="new-addressbook" ref="addressbook" v-model="displayName"
-			:disabled="loading" :placeholder="t('contacts', 'Address book name')" :pattern="addressBookRegex"
-			class="new-addressbook-input" type="text" autocomplete="off"
-			autocorrect="off" spellcheck="false" minlength="1"
+	<form id="new-addressbook-form"
+		:disabled="loading"
+		:class="{'icon-loading-small': loading}"
+		name="new-addressbook-form"
+		class="new-addressbook"
+		@submit.prevent.stop="addAddressbook">
+		<input id="new-addressbook"
+			ref="addressbook"
+			v-model="displayName"
+			:disabled="loading"
+			:placeholder="t('contacts', 'Address book name')"
+			:pattern="addressBookRegex"
+			class="new-addressbook-input"
+			type="text"
+			autocomplete="off"
+			autocorrect="off"
+			spellcheck="false"
+			minlength="1"
 			required>
 		<input class="icon-confirm" type="submit" value="">
 	</form>
diff --git a/src/components/SettingsSection.vue b/src/components/SettingsSection.vue
index de3de5ad..f6c47365 100644
--- a/src/components/SettingsSection.vue
+++ b/src/components/SettingsSection.vue
@@ -23,28 +23,30 @@
 <template>
 	<div>
 		<ul id="addressbook-list">
-			<address-book v-for="addressbook in addressbooks" :key="addressbook.id" :addressbook="addressbook" />
+			<SettingsAddressbook v-for="addressbook in addressbooks" :key="addressbook.id" :addressbook="addressbook" />
 		</ul>
-		<add-address-book :addressbooks="addressbooks" />
-		<import-contacts :addressbooks="addressbooks" class="settings-section"
-			@clicked="onClickImport" @fileLoaded="onLoad" />
-		<sort-contacts class="settings-section" />
+		<SettingsNewAddressbook :addressbooks="addressbooks" />
+		<SettingsImportContacts :addressbooks="addressbooks"
+			class="settings-section"
+			@clicked="onClickImport"
+			@fileLoaded="onLoad" />
+		<SettingsSortContacts class="settings-section" />
 	</div>
 </template>
 
 <script>
-import addressBook from 'Components/Settings/SettingsAddressbook'
-import addAddressBook from 'Components/Settings/SettingsNewAddressbook'
-import importContacts from 'Components/Settings/SettingsImportContacts'
-import sortContacts from 'Components/Settings/SettingsSortContacts'
+import SettingsAddressbook from './Settings/SettingsAddressbook'
+import SettingsNewAddressbook from './Settings/SettingsNewAddressbook'
+import SettingsImportContacts from './Settings/SettingsImportContacts'
+import SettingsSortContacts from './Settings/SettingsSortContacts'
 
 export default {
 	name: 'SettingsSection',
 	components: {
-		addressBook,
-		addAddressBook,
-		importContacts,
-		sortContacts
+		SettingsAddressbook,
+		SettingsNewAddressbook,
+		SettingsImportContacts,
+		SettingsSortContacts
 	},
 	computed: {
 		// store getters
-- 
cgit v1.2.3