diff --git a/src/views/feature_type/Feature_type_detail.vue b/src/views/feature_type/Feature_type_detail.vue
index e0f5a81964d158b83879203e8cf672a9f09ad50e..318a944ecfccaf927217b77aa7875ea77c1f29d8 100644
--- a/src/views/feature_type/Feature_type_detail.vue
+++ b/src/views/feature_type/Feature_type_detail.vue
@@ -71,12 +71,12 @@
<span class="label">{{ fileToImport.name }}</span>
</label>
<input
+ @change="onFileChange"
type="file"
accept="application/json, .json, .geojson"
style="display: none"
name="json_file"
id="json_file"
- @change="onFileChange"
/>
</div>
<button
@@ -198,6 +198,18 @@ export default {
components: {
ImportTask: ImportTask,
},
+
+ data() {
+ return {
+ fileToImport: {
+ name: "Sélectionner un fichier GeoJSON ...",
+ size: 0,
+ },
+ showImport: false,
+ showExport: true,
+ };
+ },
+
computed: {
...mapGetters(["project"]),
...mapState("feature", ["features"]),
@@ -209,11 +221,11 @@ export default {
(el) => el.slug === this.$route.params.feature_type_slug
);
}
- return null
+ return null;
+ },
+ lastFeatures: function () {
+ return this.features.slice(0, 5);
},
- lastFeatures: function() {
- return this.features.slice(0, 5)
- }
},
watch: {
@@ -224,27 +236,12 @@ export default {
},
},
- data() {
- return {
- fileToImport: {
- name: "Sélectionner un fichier GeoJSON ...",
- size: 0,
- },
- showImport: false,
- showExport: true,
- };
- },
-
methods: {
onFileChange(e) {
- var files = e.target.files || e.dataTransfer.files;
+ const files = e.target.files || e.dataTransfer.files;
if (!files.length) return;
- this.fileToImport = files[0]; // todo : remove this value from state as it stored
- this.$store.commit(
- "feature_type/SET_FILE_TO_IMPORT",
- this.fileToImport
- );
- //console.log(this.fileToImport)
+ this.fileToImport = files[0]; // todo : remove this value from state as it stored (first attempt didn't work)
+ this.$store.commit("feature_type/SET_FILE_TO_IMPORT", this.fileToImport);
},
importGeoJson() {
diff --git a/src/views/feature_type/Feature_type_edit.vue b/src/views/feature_type/Feature_type_edit.vue
index 4fb4088543b3e83d1880fd2dd5e9af07f10790e6..2a59401332d1ec9d3a253783a9cc71d2e1ff2b62 100644
--- a/src/views/feature_type/Feature_type_edit.vue
+++ b/src/views/feature_type/Feature_type_edit.vue
@@ -477,7 +477,7 @@ export default {
const customForm = {
label: { value: key || "" },
name: { value: key || "" },
- position: { value: this.dataKey }, // * use dataKey already incremented by addCustomForm
+ position: this.dataKey, // * use dataKey already incremented by addCustomForm
field_type: { value: this.transformProperties(val) }, // * guessed from the type
options: { value: [] }, // * not available in export
};
diff --git a/src/views/project/Project_edit.vue b/src/views/project/Project_edit.vue
index 1ed31528592fb070d22e3f81f92f67691977a5ae..a9008db614f0694885d49f34b4e1798bbf75de1b 100644
--- a/src/views/project/Project_edit.vue
+++ b/src/views/project/Project_edit.vue
@@ -33,21 +33,16 @@
id="form-input-file-logo"
:src="form.thumbnail"
/>
- <label
- @click.prevent="selectImg"
- class="ui icon button"
- for="thumbnail"
+ <!-- @click.prevent="selectImg" -->
+ <label class="ui icon button" for="thumbnail"
><!-- // todo : send image to the backend and display it after -->
<i class="file icon"></i>
- <!-- // ? [...form.thumbnail.split("/")].pop() -->
<span class="label">{{
- form.thumbnail
- ? form.thumbnail_name
- : "Sélectionner une image ..."
+ form.thumbnail_name ? form.thumbnail_name : fileToImport.name
}}</span>
</label>
<input
- @change="processImgData"
+ @change="onFileChange"
class="file-selection"
type="file"
accept="image/jpeg, image/png"
@@ -174,10 +169,14 @@ export default {
return {
action: "create",
level_permissions_choices: [
- {name: "Utilisateur anonyme", value: "anonymous"},
- {name: "Utilisateur connecté", value: "logged_user"},
- {name: "Contributeur", value: "contributor"},
+ { name: "Utilisateur anonyme", value: "anonymous" },
+ { name: "Utilisateur connecté", value: "logged_user" },
+ { name: "Contributeur", value: "contributor" },
],
+ fileToImport: {
+ name: "Sélectionner une image ...",
+ size: 0,
+ },
form: {
title: "",
slug: "",
@@ -188,8 +187,8 @@ export default {
thumbnail: require("@/assets/img/default.png"), // todo : utiliser l'image par défaut
thumbnail_name: "", // todo: delete after getting image in jpg or png instead of data64 (require post to django)
creator: null,
- access_level_pub_feature: {name: "", value: ""},
- access_level_arch_feature: {name: "", value: ""},
+ access_level_pub_feature: { name: "", value: "" },
+ access_level_arch_feature: { name: "", value: "" },
archive_feature: 0,
delete_feature: 0,
nb_features: 0,
@@ -225,30 +224,54 @@ export default {
filename = filename.substr(0, len) + (n.length > len ? "[...]" : "");
return filename + "." + ext;
},
- processImgData(e) {
- // * read image file
- const file = e.target.files[0];
- if (file) {
- this.form.thumbnail_name = file.name;
- }
- let reader = new FileReader();
- let _this = this;
+ goBack() {
+ const routerHistory = this.$router.options.routerHistory;
+ this.$router.push(routerHistory[routerHistory.length - 1] || "/");
+ },
+
+ onFileChange(e) {
+ // * read image file
+ const files = e.target.files || e.dataTransfer.files;
+ if (!files.length) return; //* abort if no file
+ this.fileToImport = files[0]; //* stock the file to post later
+ let reader = new FileReader(); //* read the file to display in the page
+ let _this = this; //* this will be different in onload function
reader.onload = function (e) {
_this.form.thumbnail = e.target.result;
};
-
- reader.readAsDataURL(file);
- // todo : send file to the back (?) (not in base64)
- },
- selectImg() {
- // * call click on hidden input field
- document.getElementsByClassName("file-selection")[0].click();
+ reader.readAsDataURL(this.fileToImport);
},
- goBack() {
- const routerHistory = this.$router.options.routerHistory;
- this.$router.push(routerHistory[routerHistory.length - 1] || "/");
+ // todo : send file to the back
+ postProjectThumbnail(projectSlug) {
+ //* send img to the backend when feature_type is created
+ if (this.fileToImport.size > 0) {
+ var formData = new FormData();
+ formData.append("file", this.fileToImport);
+ let url =
+ process.env.VUE_APP_DJANGO_API_BASE +
+ "projects/" +
+ projectSlug +
+ "/thumbnail/";
+ return axios
+ .post(url, formData, {
+ headers: {
+ "Content-Type": "multipart/form-data",
+ },
+ })
+ .then((response) => {
+ console.log("postProjectThumbnail", response);
+ if (response && response.status === 200) {
+ //dispatch("GET_IMPORTS", feature_type_slug);
+ console.log("SUCCESS");
+ }
+ return response;
+ })
+ .catch((error) => {
+ throw error;
+ });
+ }
},
async postForm() {
@@ -270,11 +293,12 @@ export default {
.post(`${process.env.VUE_APP_DJANGO_API_BASE}projects/`, projectData)
.then((response) => {
console.log(response);
- if (response && response.status === 201) {
- this.$store.commit("ADD_PROJECT", response.data)
- this.$router.push("/")
- // todo : send thumbnail after
+ if (response && response.status === 201 && response.data) {
+ this.$store.commit("ADD_PROJECT", response.data);
+ this.$router.push("/");
+ // todo : send thumbnail after feature_type was created
//postProjectThumbnail()
+ this.postProjectThumbnail(response.data.slug);
}
})
.catch((error) => {
@@ -283,6 +307,7 @@ export default {
console.log("POST this data : ", projectData);
},
},
+
created() {
this.definePageType();
if (this.action !== "create") {