split out follow’s importer as a separate component

This commit is contained in:
taehoon 2019-03-29 21:58:20 -04:00
parent 9e2fa50b74
commit 562120ae48
4 changed files with 59 additions and 41 deletions

View file

@ -0,0 +1,36 @@
const Importer = {
data () {
return {
file: null,
error: false,
success: false,
uploading: false
}
},
methods: {
change () {
this.file = this.$refs.input.files[0]
},
submit () {
this.uploading = true
// eslint-disable-next-line no-undef
const formData = new FormData()
formData.append('list', this.file)
this.$store.state.api.backendInteractor.followImport({params: formData})
.then((status) => {
if (status) {
this.success = true
} else {
this.error = true
}
this.uploading = false
})
},
dismiss () {
this.success = false
this.error = false
}
}
}
export default Importer

View file

@ -0,0 +1,19 @@
<template>
<div class="importer">
<form>
<input type="file" ref="input" v-on:change="change" />
</form>
<i class="icon-spin4 animate-spin uploading" v-if="uploading"></i>
<button class="btn btn-default" v-else @click="submit">{{$t('general.submit')}}</button>
<div v-if="success">
<i class="icon-cross" @click="dismiss"></i>
<p>{{$t('settings.follows_imported')}}</p>
</div>
<div v-else-if="error">
<i class="icon-cross" @click="dismiss"></i>
<p>{{$t('settings.follow_import_error')}}</p>
</div>
</div>
</template>
<script src="./importer.js"></script>

View file

@ -13,6 +13,7 @@ import SelectableList from '../selectable_list/selectable_list.vue'
import ProgressButton from '../progress_button/progress_button.vue' import ProgressButton from '../progress_button/progress_button.vue'
import EmojiInput from '../emoji-input/emoji-input.vue' import EmojiInput from '../emoji-input/emoji-input.vue'
import Autosuggest from '../autosuggest/autosuggest.vue' import Autosuggest from '../autosuggest/autosuggest.vue'
import Importer from '../importer/importer.vue'
import withSubscription from '../../hocs/with_subscription/with_subscription' import withSubscription from '../../hocs/with_subscription/with_subscription'
import userSearchApi from '../../services/new_api/user_search.js' import userSearchApi from '../../services/new_api/user_search.js'
@ -40,14 +41,10 @@ const UserSettings = {
hideFollowers: this.$store.state.users.currentUser.hide_followers, hideFollowers: this.$store.state.users.currentUser.hide_followers,
showRole: this.$store.state.users.currentUser.show_role, showRole: this.$store.state.users.currentUser.show_role,
role: this.$store.state.users.currentUser.role, role: this.$store.state.users.currentUser.role,
followList: null,
followImportError: false,
followsImported: false,
enableFollowsExport: true, enableFollowsExport: true,
pickAvatarBtnVisible: true, pickAvatarBtnVisible: true,
bannerUploading: false, bannerUploading: false,
backgroundUploading: false, backgroundUploading: false,
followListUploading: false,
bannerPreview: null, bannerPreview: null,
backgroundPreview: null, backgroundPreview: null,
bannerUploadError: null, bannerUploadError: null,
@ -75,7 +72,8 @@ const UserSettings = {
Autosuggest, Autosuggest,
BlockCard, BlockCard,
MuteCard, MuteCard,
ProgressButton ProgressButton,
Importer
}, },
computed: { computed: {
user () { user () {
@ -236,19 +234,6 @@ const UserSettings = {
this.backgroundUploading = false this.backgroundUploading = false
}) })
}, },
importFollows () {
this.followListUploading = true
const followList = this.followList
this.$store.state.api.backendInteractor.followImport({params: followList})
.then((status) => {
if (status) {
this.followsImported = true
} else {
this.followImportError = true
}
this.followListUploading = false
})
},
/* This function takes an Array of Users /* This function takes an Array of Users
* and outputs a file with all the addresses for the user to download * and outputs a file with all the addresses for the user to download
*/ */
@ -283,16 +268,6 @@ const UserSettings = {
setTimeout(() => { this.enableFollowsExport = true }, 2000) setTimeout(() => { this.enableFollowsExport = true }, 2000)
}) })
}, },
followListChange () {
// eslint-disable-next-line no-undef
let formData = new FormData()
formData.append('list', this.$refs.followlist.files[0])
this.followList = formData
},
dismissImported () {
this.followsImported = false
this.followImportError = false
},
confirmDelete () { confirmDelete () {
this.deletingAccount = true this.deletingAccount = true
}, },

View file

@ -171,19 +171,7 @@
<div class="setting-item"> <div class="setting-item">
<h2>{{$t('settings.follow_import')}}</h2> <h2>{{$t('settings.follow_import')}}</h2>
<p>{{$t('settings.import_followers_from_a_csv_file')}}</p> <p>{{$t('settings.import_followers_from_a_csv_file')}}</p>
<form> <Importer />
<input type="file" ref="followlist" v-on:change="followListChange" />
</form>
<i class=" icon-spin4 animate-spin uploading" v-if="followListUploading"></i>
<button class="btn btn-default" v-else @click="importFollows">{{$t('general.submit')}}</button>
<div v-if="followsImported">
<i class="icon-cross" @click="dismissImported"></i>
<p>{{$t('settings.follows_imported')}}</p>
</div>
<div v-else-if="followImportError">
<i class="icon-cross" @click="dismissImported"></i>
<p>{{$t('settings.follow_import_error')}}</p>
</div>
</div> </div>
<div class="setting-item" v-if="enableFollowsExport"> <div class="setting-item" v-if="enableFollowsExport">
<h2>{{$t('settings.follow_export')}}</h2> <h2>{{$t('settings.follow_export')}}</h2>