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>