cyca/resources/js/components/Importer.vue
Richard Dern 400e3d01f1 Refresh
2022-01-12 00:35:37 +01:00

91 lines
2.6 KiB
Vue
Executable File

<template>
<div>
<div class="form-group">
<label for="importer">{{ __("Import from") }}:</label>
<select v-model="importer" id="importer">
<option
v-for="(importerData, importerName) in availableImporters"
v-bind:key="importerName"
v-bind:value="importerName"
>
{{ importerData["name"] }}
</option>
</select>
</div>
<component
v-bind:is="availableImporters[importer]['view']"
v-on:import="onImport"
></component>
<div v-if="uploading" class="mt-2">
{{ __("Importing, please wait...") }}
</div>
<div v-if="uploaded" class="alert success">
{{ __("Data imported") }}
</div>
<div v-if="error" class="alert error">
{{ __("A problem occurred, interrupting importation") }}
</div>
</div>
</template>
<script>
import ImportFromCyca from "./Importers/ImportFromCyca";
export default {
components: { ImportFromCyca },
props: ["availableImporters"],
data: function () {
return {
importer: "cyca",
uploading: false,
uploaded: false,
error: false,
};
},
methods: {
onImport: function (formData) {
const self = this;
if (self.uploading) {
return;
}
self.uploaded = false;
self.uploading = true;
self.error = false;
formData.append("importer", self.importer);
fetch(route("account.import"), {
body: formData,
method: "POST",
headers: {
"X-Requested-With": "XMLHttpRequest",
"X-CSRF-TOKEN": document
.querySelector('meta[name="csrf-token"]')
.getAttribute("content"),
},
})
.then((response) => {
if (!response.ok) {
self.uploaded = false;
self.error = true;
} else {
self.uploaded = true;
self.error = false;
}
})
.catch((error) => {
self.uploaded = false;
self.error = true;
})
.finally(() => {
self.uploading = false;
});
},
},
};
</script>