Mercurial > gemma
diff client/src/components/ImportStretches.vue @ 1942:d1b7b1c70410
import stretch: listview with edit-function
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Mon, 21 Jan 2019 16:53:12 +0100 |
parents | 1aa864cccddc |
children | 84e475938b75 |
line wrap: on
line diff
--- a/client/src/components/ImportStretches.vue Mon Jan 21 15:49:51 2019 +0100 +++ b/client/src/components/ImportStretches.vue Mon Jan 21 16:53:12 2019 +0100 @@ -4,23 +4,45 @@ <font-awesome-icon icon="road" class="mr-2"></font-awesome-icon> <translate>Define stretches</translate> </h6> - <div v-if="!edit" class="mb-3"> - <div class="mt-3 mb-2 mr-3 ml-3 d-flex flex-row border-bottom"> - <div class="header id">id</div> - <div class="header funktion">funktion</div> - <div class="header startrhm">startrhm</div> - <div class="header endrhm">endrhm</div> - </div> - <div - class=" mr-3 ml-3 d-flex flex-row" - v-for="stretch in stretches" - :key="stretch.id" - > - <div class="id">{{ stretch.id }}</div> - <div class="funktion">{{ stretch.funktion }}</div> - <div class="startrhm">{{ stretch.startrhm }}</div> - <div class="endrhm">{{ stretch.endrhm }}</div> - </div> + <div v-if="!edit" class="mb-3 mr-3 ml-3 text-left"> + <table v-if="stretches.length > 0" class="table"> + <thead> + <tr> + <th class="header"><translate>Name</translate></th> + <th class="header"><translate>Datum</translate></th> + <th class="header"><translate>Source organization</translate></th> + <th class="tools"> </th> + <th class="tools"> </th> + </tr> + </thead> + <tbody> + <tr class="small" v-for="(stretch, index) in stretches" :key="index"> + <td class=""> + <a @click="moveMapToStretch(index)" href="#">{{ + stretch.properties.name + }}</a> + </td> + <td class=""> + {{ formatSurveyDate(stretch.properties["date_info"]) }} + </td> + <td>{{ stretch.properties["source_organization"] }}</td> + <td> + <font-awesome-icon + @click="editStretch(index)" + icon="pencil-alt" + fixed-width + ></font-awesome-icon> + </td> + <td> + <font-awesome-icon + @click="deleteStretch(index)" + icon="trash" + fixed-width + ></font-awesome-icon> + </td> + </tr> + </tbody> + </table> <div class="mt-3" v-if="stretches.length == 0"> <translate>No results.</translate> </div> @@ -226,6 +248,8 @@ */ import { mapState, mapGetters } from "vuex"; import { displayError, displayInfo } from "@/lib/errors.js"; +import { formatSurveyDate } from "@/lib/date.js"; +import center from "@turf/center"; export default { name: "importstretches", @@ -256,15 +280,46 @@ }, mounted() { this.edit = false; - // this.$store.dispatch("imports/loadStretches").catch(error => { - // const { status, data } = error.response; - // displayError({ - // title: this.$gettext("Backend Error"), - // message: `${status}: ${data.message || data}` - // }); - // }); + this.loadStretches(); }, methods: { + editStretch(index) { + const { date_info, name, objnam, nobjnam } = this.stretches[ + index + ].properties; + this.date_info = date_info; + this.id = name; + this.nobjbn = nobjnam; + this.objbn = objnam; + this.source = this.stretches[index]; + this.edit = true; + }, + deleteStretch(index) { + displayInfo({ + title: this.$gettext("Not implemented"), + message: this.$gettext("Deleting " + this.stretches[index].id) + }); + }, + moveMapToStretch(index) { + const { coordinates } = center(this.stretches[index]).geometry; + this.$store.commit("map/moveMap", { + coordinates: coordinates, + zoom: 17, + preventZoomOut: true + }); + }, + formatSurveyDate(d) { + return formatSurveyDate(d); + }, + loadStretches() { + this.$store.dispatch("imports/loadStretches").catch(error => { + const { status, data } = error.response; + displayError({ + title: this.$gettext("Backend Error"), + message: `${status}: ${data.message || data}` + }); + }); + }, clean() { this.id = ""; this.funktion = ""; @@ -339,6 +394,7 @@ }); this.clean(); this.edit = false; + this.loadStretches(); }) .catch(error => { console.log(error); @@ -375,24 +431,4 @@ }; </script> -<style lang="scss" scoped> -.id { - text-align: left; - width: 25%; -} - -.funktion { - text-align: left; - width: 25%; -} - -.endrhm { - text-align: left; - width: 25%; -} - -.startrhm { - text-align: left; - width: 25%; -} -</style> +<style lang="scss" scoped></style>