Mercurial > gemma
comparison client/src/components/staging/StagingDetail.vue @ 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 | de4e4dcb8f87 |
comparison
equal
deleted
inserted
replaced
1620:2e4ec4251c57 | 1621:eeddc5dcb80c |
---|---|
1 <template> | 1 <template> |
2 <div class="mt-3 d-flex flex-row w-100"> | 2 <div class="pb-2 d-flex flex-column w-100"> |
3 <div class="mt-auto mb-auto small name text-left"> | 3 <div class="d-flex flex-row"> |
4 <div class="mt-auto d-flex flex-row mb-auto small name text-left"> | |
5 <a | |
6 v-if="!isBottleneck(data.kind.toUpperCase())" | |
7 @click="zoomTo()" | |
8 href="#" | |
9 >{{ data.summary.bottleneck }}</a | |
10 > | |
11 <span v-else class="mr-auto ml-auto">*</span> | |
12 </div> | |
13 <div class="mt-auto mb-auto small text-left type"> | |
14 {{ data.kind.toUpperCase() }} | |
15 </div> | |
16 <div class="mt-auto mb-auto small text-left date"> | |
17 {{ formatSurveyDate(data.summary.date) }} | |
18 </div> | |
19 <div class="mt-auto mb-auto small text-left imported"> | |
20 {{ formatSurveyDate(data.enqueued.split("T")[0]) }} | |
21 </div> | |
22 <div class="mt-auto mb-auto small text-left username"> | |
23 {{ data.user }} | |
24 </div> | |
25 <div class="controls d-flex flex-row justify-content-end"> | |
26 <div> | |
27 <button | |
28 :class="{ | |
29 'ml-3': true, | |
30 'mr-3': true, | |
31 btn: true, | |
32 'btn-sm': true, | |
33 'btn-outline-success': needsApproval(data) || isRejected(data), | |
34 'btn-success': isApproved(data) | |
35 }" | |
36 @click="toggleApproval(data.id, $options.STATES.APPROVED)" | |
37 > | |
38 <font-awesome-icon icon="check"></font-awesome-icon> | |
39 </button> | |
40 </div> | |
41 <div> | |
42 <button | |
43 :class="{ | |
44 'mr-3': true, | |
45 btn: true, | |
46 'btn-sm': true, | |
47 'btn-outline-danger': needsApproval(data) || isApproved(data), | |
48 'btn-danger': isRejected(data) | |
49 }" | |
50 @click="toggleApproval(data.id, $options.STATES.REJECTED)" | |
51 > | |
52 <font-awesome-icon icon="times"></font-awesome-icon> | |
53 </button> | |
54 </div> | |
55 <div v-if="isBottleneck(data.kind.toUpperCase())"> | |
56 <div | |
57 @click="showDetails()" | |
58 class="mt-auto mb-auto text-info text-left" | |
59 > | |
60 <font-awesome-icon | |
61 v-if="show" | |
62 icon="angle-up" | |
63 fixed-width | |
64 ></font-awesome-icon> | |
65 <font-awesome-icon | |
66 v-if="loading" | |
67 icon="spinner" | |
68 fixed-width | |
69 ></font-awesome-icon> | |
70 <font-awesome-icon | |
71 v-if="!show && !loading" | |
72 icon="angle-down" | |
73 fixed-width | |
74 ></font-awesome-icon> | |
75 </div> | |
76 </div> | |
77 <div v-else class="empty"></div> | |
78 </div> | |
79 </div> | |
80 <div class="d-flex flex-row" v-if="show"> | |
4 <a | 81 <a |
5 v-if="!isBottleneck(data.kind.toUpperCase())" | 82 class="small" |
6 @click="zoomTo()" | 83 v-for="(bottleneck, index) in data.summary.bottlenecks" |
84 :key="index" | |
7 href="#" | 85 href="#" |
8 >{{ data.summary.bottleneck }}</a | 86 >{{ bottleneck }}</a |
9 > | 87 > |
10 <span v-else class="">*</span> | |
11 </div> | |
12 <div class="mt-auto mb-auto small text-left type"> | |
13 {{ data.kind.toUpperCase() }} | |
14 </div> | |
15 <div class="mt-auto mb-auto small text-left date"> | |
16 {{ formatSurveyDate(data.summary.date) }} | |
17 </div> | |
18 <div class="mt-auto mb-auto small text-left imported"> | |
19 {{ formatSurveyDate(data.enqueued.split("T")[0]) }} | |
20 </div> | |
21 <div class="mt-auto mb-auto small text-left username">{{ data.user }}</div> | |
22 <div class="controls d-flex flex-row justify-content-end"> | |
23 <div> | |
24 <button | |
25 :class="{ | |
26 'ml-3': true, | |
27 'mr-3': true, | |
28 btn: true, | |
29 'btn-sm': true, | |
30 'btn-outline-success': needsApproval(data) || isRejected(data), | |
31 'btn-success': isApproved(data) | |
32 }" | |
33 @click="toggleApproval(data.id, $options.STATES.APPROVED)" | |
34 > | |
35 <font-awesome-icon icon="check"></font-awesome-icon> | |
36 </button> | |
37 </div> | |
38 <div> | |
39 <button | |
40 :class="{ | |
41 'mr-3': true, | |
42 btn: true, | |
43 'btn-sm': true, | |
44 'btn-outline-danger': needsApproval(data) || isApproved(data), | |
45 'btn-danger': isRejected(data) | |
46 }" | |
47 @click="toggleApproval(data.id, $options.STATES.REJECTED)" | |
48 > | |
49 <font-awesome-icon icon="times"></font-awesome-icon> | |
50 </button> | |
51 </div> | |
52 <div v-if="isBottleneck(data.kind.toUpperCase())"> | |
53 <div @click="showDetails()" class="mt-auto mb-auto text-info text-left"> | |
54 <font-awesome-icon | |
55 v-if="show" | |
56 icon="angle-up" | |
57 fixed-width | |
58 ></font-awesome-icon> | |
59 <font-awesome-icon | |
60 v-if="loading" | |
61 icon="spinner" | |
62 fixed-width | |
63 ></font-awesome-icon> | |
64 <font-awesome-icon | |
65 v-if="!show && !loading" | |
66 icon="angle-down" | |
67 fixed-width | |
68 ></font-awesome-icon> | |
69 </div> | |
70 </div> | |
71 <div v-else class="empty"></div> | |
72 </div> | 88 </div> |
73 </div> | 89 </div> |
74 </template> | 90 </template> |
75 | 91 |
76 <script> | 92 <script> |