make Importer component reusable

This commit is contained in:
taehoon 2019-03-30 05:10:57 -04:00
parent 18bb209ace
commit 6d0e98a1c2
5 changed files with 50 additions and 17 deletions

View File

@ -1,10 +1,34 @@
const Importer = {
props: {
submitHandler: {
type: Function,
required: true
},
submitButtonLabel: {
type: String,
default () {
return this.$t('importer.submit')
}
},
successMessage: {
type: String,
default () {
return this.$t('importer.success')
}
},
errorMessage: {
type: String,
default () {
return this.$t('importer.error')
}
}
},
data () {
return {
file: null,
error: false,
success: false,
uploading: false
submitting: false
}
},
methods: {
@ -12,16 +36,12 @@ const Importer = {
this.file = this.$refs.input.files[0]
},
submit () {
this.uploading = true
this.$store.state.api.backendInteractor.followImport(this.file)
.then((status) => {
if (status) {
this.success = true
} else {
this.error = true
}
this.uploading = false
})
this.dismiss()
this.submitting = true
this.submitHandler(this.file)
.then(() => { this.success = true })
.catch(() => { this.error = true })
.finally(() => { this.submitting = false })
},
dismiss () {
this.success = false

View File

@ -3,15 +3,15 @@
<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>
<i class="icon-spin4 animate-spin importer-uploading" v-if="submitting"></i>
<button class="btn btn-default" v-else @click="submit">{{submitButtonLabel}}</button>
<div v-if="success">
<i class="icon-cross" @click="dismiss"></i>
<p>{{$t('settings.follows_imported')}}</p>
<p>{{successMessage}}</p>
</div>
<div v-else-if="error">
<i class="icon-cross" @click="dismiss"></i>
<p>{{$t('settings.follow_import_error')}}</p>
<p>{{errorMessage}}</p>
</div>
</div>
</template>
@ -20,7 +20,7 @@
<style lang="scss">
.importer {
.uploading {
&-uploading {
font-size: 1.5em;
margin: 0.25em;
}

View File

@ -234,6 +234,14 @@ const UserSettings = {
this.backgroundUploading = false
})
},
importFollows (file) {
return this.$store.state.api.backendInteractor.followImport(file)
.then((status) => {
if (!status) {
throw new Error('failed')
}
})
},
/* This function takes an Array of Users
* and outputs a file with all the addresses for the user to download
*/

View File

@ -171,7 +171,7 @@
<div class="setting-item">
<h2>{{$t('settings.follow_import')}}</h2>
<p>{{$t('settings.import_followers_from_a_csv_file')}}</p>
<Importer />
<Importer :submitHandler="importFollows" :successMessage="$t('settings.follows_imported')" :errorMessage="$t('settings.follow_import_error')" />
</div>
<div class="setting-item" v-if="enableFollowsExport">
<h2>{{$t('settings.follow_export')}}</h2>

View File

@ -31,6 +31,11 @@
"save_without_cropping": "Save without cropping",
"cancel": "Cancel"
},
"importer": {
"submit": "Submit",
"success": "Imported successfully.",
"error": "An error occured while importing this file."
},
"login": {
"login": "Log in",
"description": "Log in with OAuth",