Mercurial > gemma
changeset 1621:eeddc5dcb80c
staging now with details
| author | Thomas Junk <thomas.junk@intevation.de> |
|---|---|
| date | Tue, 18 Dec 2018 16:25:03 +0100 |
| parents | 2e4ec4251c57 |
| children | a3a3fc630620 |
| files | client/src/components/staging/Staging.vue client/src/components/staging/StagingDetail.vue |
| diffstat | 2 files changed, 83 insertions(+), 66 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/staging/Staging.vue Tue Dec 18 16:09:44 2018 +0100 +++ b/client/src/components/staging/Staging.vue Tue Dec 18 16:25:03 2018 +0100 @@ -20,8 +20,9 @@ </div> <div class="ml-3 controls"></div> </div> - <div class="ml-3 mr-3 mt-2" v-if="filteredData.length"> + <div class="ml-3 mr-3 mt-3" v-if="filteredData.length"> <StagingDetail + class="mb-3 border-bottom" :key="data.id" v-for="data in filteredData" :data="data"
--- a/client/src/components/staging/StagingDetail.vue Tue Dec 18 16:09:44 2018 +0100 +++ b/client/src/components/staging/StagingDetail.vue Tue Dec 18 16:25:03 2018 +0100 @@ -1,74 +1,90 @@ <template> - <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 - > - <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)" + <div class="pb-2 d-flex flex-column w-100"> + <div class="d-flex flex-row"> + <div class="mt-auto d-flex flex-row 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> + <span v-else class="mr-auto ml-auto">*</span> + </div> + <div class="mt-auto mb-auto small text-left type"> + {{ data.kind.toUpperCase() }} </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 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 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 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 v-else class="empty"></div> + </div> + <div class="d-flex flex-row" v-if="show"> + <a + class="small" + v-for="(bottleneck, index) in data.summary.bottlenecks" + :key="index" + href="#" + >{{ bottleneck }}</a + > </div> </div> </template>