diff options
author | John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> | 2019-09-26 17:51:44 +0200 |
---|---|---|
committer | John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> | 2019-09-26 18:46:38 +0200 |
commit | dd0a064868d8d96249df5445fff2ceaf80ea62e5 (patch) | |
tree | 76f055c5c9a869b26d78a14f8f4192b467898a49 /src | |
parent | 713545f51649398676c0fe54c6d4f7c842fe0899 (diff) |
Move to global eslint
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
Diffstat (limited to 'src')
28 files changed, 350 insertions, 168 deletions
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" + |