diff options
author | suntala <33031346+suntala@users.noreply.github.com> | 2018-09-21 18:32:58 +0200 |
---|---|---|
committer | suntala <33031346+suntala@users.noreply.github.com> | 2018-09-21 18:32:58 +0200 |
commit | 2cc340bce43a4cc8401cc5270edd32b001a57084 (patch) | |
tree | 47eaa5d2c0b3fba646cdcf63e30532e08ce3c266 /src | |
parent | a15d21d6a99852c1b5e978c8d119a7b4c6736009 (diff) | |
parent | 767aabd09bb2ccacb2522db23323c3c3bc8f11a1 (diff) |
Merge branch 'vue' into vue-property-hint-#630
Diffstat (limited to 'src')
-rw-r--r-- | src/components/Settings/SettingsAddressbook.vue | 85 |
1 files changed, 74 insertions, 11 deletions
diff --git a/src/components/Settings/SettingsAddressbook.vue b/src/components/Settings/SettingsAddressbook.vue index 864643e5..32862b81 100644 --- a/src/components/Settings/SettingsAddressbook.vue +++ b/src/components/Settings/SettingsAddressbook.vue @@ -77,7 +77,12 @@ export default { editingName: false, copied: false, copySuccess: true, - readOnly: this.addressbook.readOnly + readOnly: this.addressbook.readOnly, + toggleEnabledLoading: false, + deleteAddressbookLoading: false, + renameLoading: false, + downloadLoading: false, + copyLoading: false } }, computed: { @@ -89,7 +94,7 @@ export default { let menu = [ { href: this.addressbook.url, - icon: 'icon-public', + icon: this.copyLoading ? 'icon-loading-small' : 'icon-public', text: !this.copied ? t('contacts', 'Copy link') : this.copySuccess @@ -99,16 +104,16 @@ export default { }, { href: this.addressbook.url + '?export', - icon: 'icon-download', + icon: this.downloadLoading ? 'icon-loading-small' : 'icon-download', text: t('contacts', 'Download'), - action: null + action: this.downloadAddressbook } ] // check if addressbook is readonly if (!this.readOnly) { menu.push({ - icon: 'icon-rename', + icon: this.renameLoading ? 'icon-loading-small' : 'icon-rename', // check if editing name input: this.editingName ? 'text' : null, text: !this.editingName ? t('contacts', 'Rename') : '', @@ -118,7 +123,8 @@ export default { }, { text: this.enabled ? t('contacts', 'Enabled') : t('contacts', 'Disabled'), - input: 'checkbox', + icon: this.toggleEnabledLoading ? 'icon-loading-small' : null, + input: this.toggleEnabledLoading ? null : 'checkbox', key: 'enableAddressbook', model: this.enabled, action: this.toggleAddressbookEnabled @@ -128,7 +134,7 @@ export default { // check to ensure last addressbook is not deleted. if (this.$store.getters.getAddressbooks.length > 1) { menu.push({ - icon: 'icon-delete', + icon: this.deleteAddressbookLoading ? 'icon-loading-small' : 'icon-delete', text: t('contacts', 'Delete'), action: this.deleteAddressbook }) @@ -136,6 +142,13 @@ export default { return menu } }, + 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 @@ -151,10 +164,40 @@ export default { this.shareOpen = !this.shareOpen }, toggleAddressbookEnabled() { - this.$store.dispatch('toggleAddressbookEnabled', this.addressbook) + // change to loading status + this.toggleEnabledLoading = true + setTimeout(() => { + try { + this.$store.dispatch('toggleAddressbookEnabled', this.addressbook) + } catch (err) { + // error handling + } finally { + // stop loading status regardless of outcome + this.toggleEnabledLoading = false + } + }, 500) + }, + downloadAddressbook() { + // change to loading status + this.downloadLoading = true + setTimeout(() => { + // stop loading status regardless of outcome + this.downloadLoading = false + }, 1500) }, deleteAddressbook() { - this.$store.dispatch('deleteAddressbook', this.addressbook) + // change to loading status + this.deleteAddressbookLoading = true + setTimeout(() => { + try { + this.$store.dispatch('deleteAddressbook', this.addressbook) + } catch (err) { + // error handling + } finally { + // stop loading status regardless of outcome + this.deleteAddressbookLoading = false + } + }, 500) }, renameAddressbook() { this.editingName = true @@ -163,9 +206,25 @@ export default { let addressbook = this.addressbook // New name for addressbook - inputed value from form let newName = e.target[0].value - this.$store.dispatch('renameAddressbook', { addressbook, newName }).then(this.editingName = false) + // change to loading status + this.renameLoading = true + setTimeout(() => { + try { + this.$store.dispatch('renameAddressbook', { addressbook, newName }) // .then(e.target.parent.classList.add()) + } catch (err) { + // error handling + } finally { + this.editingName = false + // stop loading status regardless of outcome + this.renameLoading = false + // close popover menu + this.menuOpen = false + } + }, 500) }, copyLink() { + // change to loading status + this.copyLoading = true // copy link for addressbook to clipboard this.$copyText(this.addressbook.url).then(e => { this.copySuccess = true @@ -176,7 +235,11 @@ export default { }) // timeout sets the text back to copy to show text was copied - setTimeout(() => { this.copied = false }, 1500) + setTimeout(() => { + // stop loading status regardless of outcome + this.copyLoading = false + this.copied = false + }, 1500) } } } |