diff options
author | John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> | 2019-03-26 09:22:57 +0100 |
---|---|---|
committer | John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> | 2019-03-26 09:52:55 +0100 |
commit | cb3c7a848f0573b448702f74276bdb0a292dd6f4 (patch) | |
tree | 65101ac7e0b6c91d1fefa26e3add46f8fa94ada4 /src | |
parent | 96b16c29158135158313c0a4575c1a6e29125e7b (diff) |
Do not close on import done and use modal for import
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
Diffstat (limited to 'src')
-rw-r--r-- | src/App.vue | 2 | ||||
-rw-r--r-- | src/components/ImportScreen.vue | 8 | ||||
-rw-r--r-- | src/main.js | 1 | ||||
-rw-r--r-- | src/store/addressbooks.js | 2 | ||||
-rw-r--r-- | src/store/importState.js | 4 | ||||
-rw-r--r-- | src/views/Contacts.vue | 53 |
6 files changed, 57 insertions, 13 deletions
diff --git a/src/App.vue b/src/App.vue index a5d94527..06ab1b3e 100644 --- a/src/App.vue +++ b/src/App.vue @@ -26,6 +26,6 @@ <script> export default { - name: 'App' + name: 'ContactsRoot' } </script> diff --git a/src/components/ImportScreen.vue b/src/components/ImportScreen.vue index 711e6836..6da8a09a 100644 --- a/src/components/ImportScreen.vue +++ b/src/components/ImportScreen.vue @@ -23,7 +23,10 @@ <template> <div class="emptycontent import-screen"> <p class="icon-upload" /> - <h3 class="import-screen__header"> + <h3 v-if="stage === 'done'" class="import-screen__header"> + {{ t('contacts', 'Done importing {total} contacts into', { total }) }} {{ addressbook }} + </h3> + <h3 v-else class="import-screen__header"> {{ t('contacts', 'Importing {total} contacts into', { total }) }} {{ addressbook }} </h3> <progress :max="total" :value="progress" class="import-screen__progress" /> @@ -54,6 +57,9 @@ export default { addressbook() { return this.importState.addressbook }, + stage() { + return this.importState.stage + }, total() { return this.importState.total }, diff --git a/src/main.js b/src/main.js index 53e1e9a9..bc6e37a3 100644 --- a/src/main.js +++ b/src/main.js @@ -72,6 +72,7 @@ if (window.location.pathname.split('/')[1] === 'index.php' export default new Vue({ el: '#content', + name: 'ContactsApp', router, store, render: h => h(App) diff --git a/src/store/addressbooks.js b/src/store/addressbooks.js index 8521c30c..264735f3 100644 --- a/src/store/addressbooks.js +++ b/src/store/addressbooks.js @@ -433,7 +433,7 @@ const actions = { }) Promise.all(requests).then(() => { - context.commit('changeStage', 'default') + context.commit('changeStage', 'done') }) }, diff --git a/src/store/importState.js b/src/store/importState.js index 98bb39a8..f969725e 100644 --- a/src/store/importState.js +++ b/src/store/importState.js @@ -73,7 +73,7 @@ const mutations = { * Change stage to the indicated one * * @param {Object} state the store data - * @param {string} stage the name of the stage ('default', 'importing', 'parsing') + * @param {string} stage the name of the stage ('default', 'importing', 'parsing', 'done') */ changeStage(state, stage) { state.importState.stage = stage @@ -139,7 +139,7 @@ const actions = { * and reset if the parsing starts * * @param {Object} context the store mutations - * @param {string} stage the name of the stage ('default', 'importing', 'parsing') + * @param {string} stage the name of the stage ('default', 'importing', 'parsing', 'done') */ changeStage(context, stage) { context.commit('changeStage', stage) diff --git a/src/views/Contacts.vue b/src/views/Contacts.vue index 6e5b4a09..ce4ba79e 100644 --- a/src/views/Contacts.vue +++ b/src/views/Contacts.vue @@ -58,6 +58,10 @@ </template> </div> </template> + <modal v-if="isImporting" :clear-view-delay="-1" :can-close="isImportDone" + @close="closeImport"> + <import-screen /> + </modal> </app-content> </template> @@ -67,7 +71,8 @@ import { AppNavigation, AppNavigationItem, AppNavigationNew, - AppNavigationSettings + AppNavigationSettings, + Modal } from 'nextcloud-vue' import moment from 'moment' import download from 'downloadjs' @@ -98,7 +103,8 @@ export default { SettingsSection, ContactsList, ContactDetails, - ImportScreen + ImportScreen, + Modal }, // passed by the router @@ -117,7 +123,9 @@ export default { data() { return { loading: true, - searchQuery: '' + searchQuery: '', + // are we in mobile mode + isMobile: window.outerWidth <= 768 } }, @@ -142,16 +150,19 @@ export default { return this.$store.getters.getImportState }, + // importing states + isImporting() { + return this.importState.stage !== 'default' + }, + isImportDone() { + return this.importState.stage === 'done' + }, + // first enabled addressbook of the list defaultAddressbook() { return this.addressbooks.find(addressbook => !addressbook.readOnly && addressbook.enabled) }, - // are we in mobile mode - isMobile() { - return document.querySelector('body').offsetWidth < 768 - }, - /** * Contacts list based on the selected group. * Those filters are pretty fast, so let's only @@ -293,6 +304,12 @@ export default { this.$store.commit('setOrder', localStorage.getItem('orderKey')) } }) + + window.addEventListener('resize', this.onResize) + }, + + beforeDestroy() { + window.removeEventListener('resize', this.onResize) }, methods: { @@ -457,6 +474,26 @@ export default { selectedContact: undefined } }) + }, + + /** + * Done importing, the user closed the import status screen + */ + closeImport() { + // TODO: remove after https://github.com/nextcloud/nextcloud-vue/pull/323 + if (this.isImportDone) { + this.$store.dispatch('changeStage', 'default') + } + }, + + /** + * Trigerred when window is resized + * + * @param {Object} event the event + */ + onResize(event) { + // Update mobile mode + this.isMobile = window.outerWidth <= 768 } } } |