diff --git a/src/components/ImportTask.vue b/src/components/ImportTask.vue index bc644619ef20358cb6ac97e4559d7fdf77a45867..fb642ab722c761cc8c80988e6413576d0fd1f9e7 100644 --- a/src/components/ImportTask.vue +++ b/src/components/ImportTask.vue @@ -1,77 +1,107 @@ <template> <div id="table-imports"> <table class="ui collapsing celled table"> - <thead> - <tr> - <th>Fichiers importés</th> - <th>Status</th> - </tr> - </thead> - <tbody> - <tr :key="importFile.created_on" v-for="importFile in data"> - <td> - <h4 class="ui header"> - <div :data-tooltip="dataTooltipMsg(importFile.geojson_file_name)" > - {{importFile.geojson_file_name |subString}} - <div class="sub header">ajouté le {{importFile.created_on |setDate}} - </div> - </div> - </h4> - </td> + <thead> + <tr> + <th>Fichiers importés</th> + <th>Status</th> + </tr> + </thead> + <tbody> + <tr :key="importFile.created_on" v-for="importFile in data"> + <td> + <h4 class="ui header"> + <div :data-tooltip="importFile.geojson_file_name"> + {{ importFile.geojson_file_name | subString }} + <div class="sub header"> + ajouté le {{ importFile.created_on | setDate }} + </div> + </div> + </h4> + </td> - <td> - <span v-if="importFile.infos" :data-tooltip="dataTooltipMsg(importFile.infos)" class="ui icon"> - <i v-if="importFile.status == 'processing'" class="orange hourglass half icon"></i> - <i v-else-if="importFile.status == 'finished'" class="green check circle outline icon" ></i> - <i v-else-if="importFile.status == 'failed'" class="red x icon" ></i> - <i v-else class="red ban icon"></i> - </span> - <span v-if="importFile.status == 'pending'" data-tooltip="Statut en attente. Clickez pour rafraichir."> - <i - class="orange sync icon" - v-on:click="reloadPage()" + <td> + <span + v-if="importFile.infos" + :data-tooltip="dataTooltipMsg(importFile.infos)" + class="ui icon" + > + <i + v-if="importFile.status == 'processing'" + class="orange hourglass half icon" + ></i> + <i + v-else-if="importFile.status == 'finished'" + class="green check circle outline icon" + ></i> + <i + v-else-if="importFile.status == 'failed'" + class="red x icon" + ></i> + <i v-else class="red ban icon"></i> + </span> + <span + v-if="importFile.status == 'pending'" + data-tooltip="Statut en attente. Clickez pour rafraichir." + > + <i + v-on:click="fetchImports()" + :class="['orange icon', ready ? 'sync' : 'hourglass half']" /> - </span> + </span> </td> - </tr> - </tbody> + </tr> + </tbody> </table> </div> </template> <script> - export default { - data: function () { + data() { return { open: false, - } - }, - props: ['data'], - filters:{ - setDate : function(value){ + ready: true, + }; + }, + + props: ["data"], + + filters: { + setDate: function (value) { let date = new Date(value); - let d = date.toLocaleDateString('fr', { - year: 'numeric', - month: 'long', - day: 'numeric', + let d = date.toLocaleDateString("fr", { + year: "numeric", + month: "long", + day: "numeric", }); - return d + return d; + }, + subString: function (value) { + return value.substring(0, 27) + ".."; }, - subString : function(value){ - return value.substring(0,27)+".." - } }, - methods:{ - dataTooltipMsg(msg){ - return msg; + + watch: { + data(newValue) { + if (newValue) { + this.ready = true; + } }, - reloadPage() { - this.$router.go() + }, + + methods: { + fetchImports() { + this.$store.dispatch( + "feature_type/GET_IMPORTS", + this.$route.params.feature_type_slug + ); + //* show that the action was triggered, could be improved with animation (doesn't work) + this.ready = false; }, }, -} +}; </script> <style scoped> @@ -79,13 +109,25 @@ export default { cursor: pointer; } -#table-imports{ - padding-top: 1em +#table-imports { + padding-top: 1em; } -/* -td{ - text-overflow: ellipsis; -} */ +@keyframes rotateIn { + from { + transform: rotate3d(0, 0, 1, -200deg); + opacity: 0; + } + to { + transform: translate3d(0, 0, 0); + opacity: 1; + } +} + +.rotateIn { + animation-name: rotateIn; + transform-origin: center; + animation: 2s; +} </style> \ No newline at end of file diff --git a/src/views/feature_type/Feature_type_detail.vue b/src/views/feature_type/Feature_type_detail.vue index 318a944ecfccaf927217b77aa7875ea77c1f29d8..594d19bc149ae4c96e3a4a4f1381e558dc0f6495 100644 --- a/src/views/feature_type/Feature_type_detail.vue +++ b/src/views/feature_type/Feature_type_detail.vue @@ -58,12 +58,12 @@ <div class="ui styled accordion"> <div @click="showImport = !showImport" - :class="['title', { active: showImport }]" + :class="['title', { active: !showImport }]" > <i class="dropdown icon"></i> Importer des signalements </div> - <div :class="['content', { active: showImport }]"> + <div :class="['content', { active: !showImport }]"> <div id="form-import-features" class="ui form"> <div class="field"> <label class="ui icon button" for="json_file"> @@ -93,13 +93,13 @@ </div> </div> <div - @click="showExport = !showExport" - :class="['title', { active: showExport }]" + @click="showImport = !showImport" + :class="['title', { active: showImport }]" > <i class="dropdown icon"></i> Exporter les signalements </div> - <div :class="['content', { active: showExport }]"> + <div :class="['content', { active: showImport }]"> <p> Vous pouvez télécharger l'ensemble des signalements ayant le statut publiés pour ce type. @@ -206,7 +206,6 @@ export default { size: 0, }, showImport: false, - showExport: true, }; },