Mercurial > gemma
changeset 1620:2e4ec4251c57
refac: staging rebuilt with divs instead tables to accomplish detailsview
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Tue, 18 Dec 2018 16:09:44 +0100 |
parents | 3093bab05c81 |
children | eeddc5dcb80c |
files | client/src/assets/application.scss client/src/components/importqueue/Importqueue.vue client/src/components/staging/Staging.vue client/src/components/staging/StagingDetail.vue |
diffstat | 4 files changed, 166 insertions(+), 68 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/assets/application.scss Tue Dec 18 13:26:26 2018 +0100 +++ b/client/src/assets/application.scss Tue Dec 18 16:09:44 2018 +0100 @@ -57,6 +57,11 @@ transform: translate(-50%, -50%); } +.header { + font-weight: bold; + font-size: 0.9em; +} + .ui-element { pointer-events: auto; }
--- a/client/src/components/importqueue/Importqueue.vue Tue Dec 18 13:26:26 2018 +0100 +++ b/client/src/components/importqueue/Importqueue.vue Tue Dec 18 16:09:44 2018 +0100 @@ -295,11 +295,6 @@ width: 20%; } -.header { - font-weight: bold; - font-size: 0.9em; -} - .details thead { display: block; }
--- a/client/src/components/staging/Staging.vue Tue Dec 18 13:26:26 2018 +0100 +++ b/client/src/components/staging/Staging.vue Tue Dec 18 16:09:44 2018 +0100 @@ -7,39 +7,34 @@ ></font-awesome-icon> <translate>Staging Area</translate> </h6> - <table class="table"> - <thead> - <tr> - <th><translate>Name</translate></th> - <th><translate>Type</translate></th> - <th><translate>Date</translate></th> - <th><translate>Imported</translate></th> - <th><translate>Username</translate></th> - <th> </th> - <th> </th> - </tr> - </thead> - <tbody v-if="filteredData.length"> + <div> + <div class="mt-3 ml-3 mr-3 text-left flex-row d-flex border-bottom"> + <div class="header text-left name"><translate>Name</translate></div> + <div class="header text-left type"><translate>Type</translate></div> + <div class="header text-left date"><translate>Date</translate></div> + <div class="header text-left imported"> + <translate>Imported</translate> + </div> + <div class="header text-left username"> + <translate>Username</translate> + </div> + <div class="ml-3 controls"></div> + </div> + <div class="ml-3 mr-3 mt-2" v-if="filteredData.length"> <StagingDetail :key="data.id" v-for="data in filteredData" :data="data" ></StagingDetail> - </tbody> - <tbody v-else> - <tr> - <td class="text-center" colspan="6"> - <translate>No results.</translate> - </td> - </tr> - </tbody> - </table> - <div class="p-3" v-if="filteredData.length"> + </div> + </div> + <div class="mt-3 p-3" v-if="filteredData.length"> <button @click="confirmReview" class="confirm-button btn btn-info"> <translate>Confirm</translate> </button> </div> - <div class="p-3"> + <div v-else class="mr-auto ml-auto"><translate>No results.</translate></div> + <div class="mt-1 p-3"> <button @click="loadData" class="refresh btn btn-dark">Refresh</button> </div> </div> @@ -145,6 +140,30 @@ </script> <style lang="scss" scoped> +.name { + width: 120px; +} + +.date { + width: 90px; +} + +.type { + width: 40px; +} + +.imported { + width: 90px; +} + +.username { + width: 150px; +} + +.controls { + width: 60px; +} + .refresh { position: absolute; left: $offset;
--- a/client/src/components/staging/StagingDetail.vue Tue Dec 18 13:26:26 2018 +0100 +++ b/client/src/components/staging/StagingDetail.vue Tue Dec 18 16:09:44 2018 +0100 @@ -1,39 +1,76 @@ <template> - <tr> - <td> - <a @click="zoomTo(data.id)" href="#">{{ data.summary.bottleneck }}</a> - </td> - <td>{{ data.kind.toUpperCase() }}</td> - <td>{{ formatSurveyDate(data.summary.date) }}</td> - <td>{{ formatSurveyDate(data.enqueued.split("T")[0]) }}</td> - <td>{{ data.user }}</td> - <td> - <button - :class="{ - btn: true, - 'btn-sm': true, - 'btn-outline-success': needsApproval(data) || isRejected(data), - 'btn-success': isApproved(data) - }" - @click="toggleApproval(data.id, $options.STATES.APPROVED)" + <div class="mt-3 d-flex flex-row w-100"> + <div class="mt-auto mb-auto small name text-left"> + <a + v-if="!isBottleneck(data.kind.toUpperCase())" + @click="zoomTo()" + href="#" + >{{ data.summary.bottleneck }}</a > - <font-awesome-icon icon="check"></font-awesome-icon> - </button> - </td> - <td> - <button - :class="{ - btn: true, - 'btn-sm': true, - 'btn-outline-danger': needsApproval(data) || isApproved(data), - 'btn-danger': isRejected(data) - }" - @click="toggleApproval(data.id, $options.STATES.REJECTED)" - > - <font-awesome-icon icon="times"></font-awesome-icon> - </button> - </td> - </tr> + <span v-else class="">*</span> + </div> + <div class="mt-auto mb-auto small text-left type"> + {{ data.kind.toUpperCase() }} + </div> + <div class="mt-auto mb-auto small text-left date"> + {{ formatSurveyDate(data.summary.date) }} + </div> + <div class="mt-auto mb-auto small text-left imported"> + {{ formatSurveyDate(data.enqueued.split("T")[0]) }} + </div> + <div class="mt-auto mb-auto small text-left username">{{ data.user }}</div> + <div class="controls d-flex flex-row justify-content-end"> + <div> + <button + :class="{ + 'ml-3': true, + 'mr-3': true, + btn: true, + 'btn-sm': true, + 'btn-outline-success': needsApproval(data) || isRejected(data), + 'btn-success': isApproved(data) + }" + @click="toggleApproval(data.id, $options.STATES.APPROVED)" + > + <font-awesome-icon icon="check"></font-awesome-icon> + </button> + </div> + <div> + <button + :class="{ + 'mr-3': true, + btn: true, + 'btn-sm': true, + 'btn-outline-danger': needsApproval(data) || isApproved(data), + 'btn-danger': isRejected(data) + }" + @click="toggleApproval(data.id, $options.STATES.REJECTED)" + > + <font-awesome-icon icon="times"></font-awesome-icon> + </button> + </div> + <div v-if="isBottleneck(data.kind.toUpperCase())"> + <div @click="showDetails()" class="mt-auto mb-auto text-info text-left"> + <font-awesome-icon + v-if="show" + icon="angle-up" + fixed-width + ></font-awesome-icon> + <font-awesome-icon + v-if="loading" + icon="spinner" + fixed-width + ></font-awesome-icon> + <font-awesome-icon + v-if="!show && !loading" + icon="angle-down" + fixed-width + ></font-awesome-icon> + </div> + </div> + <div v-else class="empty"></div> + </div> + </div> </template> <script> @@ -57,7 +94,23 @@ export default { name: "stagingdetail", props: ["data"], + data() { + return { + show: false, + loading: false + }; + }, methods: { + showDetails() { + if (this.show) { + this.show = false; + return; + } + this.show = true; + }, + isBottleneck(kind) { + return kind === "BN"; + }, formatSurveyDate(date) { return formatSurveyDate(date); }, @@ -70,10 +123,8 @@ isApproved(item) { return item.status === STATES.APPROVED; }, - zoomTo(id) { - if (!id) return; - const soundingResult = this.filteredData.filter(x => x.id == id)[0]; - const { lat, lon, bottleneck, date } = soundingResult.summary; + zoomTo() { + const { lat, lon, bottleneck, date } = this.data.summary; const coordinates = [lat, lon]; this.$store.commit("map/moveMap", { @@ -98,4 +149,32 @@ }; </script> -<style lang="scss" scoped></style> +<style lang="scss" scoped> +.empty { + margin-right: 20px; +} + +.name { + width: 120px; +} + +.date { + width: 90px; +} + +.type { + width: 40px; +} + +.imported { + width: 90px; +} + +.username { + width: 150px; +} + +.controls { + width: 60px; +} +</style>