Mercurial > gemma

comparison client/src/components/map/contextbox/Staging.vue @ 1503:b76b23b3df61

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
staging-area: added refresh button
author Thomas Junk <thomas.junk@intevation.de>
date Wed, 05 Dec 2018 11:56:27 +0100
parents 9b81ac91a43e
children 53fdbe1d9678
comparison
equal deleted inserted replaced
1502:0abcc82ef976 1503:b76b23b3df61
1 <template> 1 <template>
2 <div class="w-90"> 2 <div class="w-90 stagingcard">
3 <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center"> 3 <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center">
4 <font-awesome-icon 4 <font-awesome-icon
5 class="mr-2"
5 icon="clipboard-check" 6 icon="clipboard-check"
6 class="mr-2"
7 ></font-awesome-icon> 7 ></font-awesome-icon>
8 <translate>Staging Area</translate> 8 <translate>Staging Area</translate>
9 </h6> 9 </h6>
10 <table class="table mb-0"> 10 <table class="table">
11 <thead> 11 <thead>
12 <tr> 12 <tr>
13 <th><translate>Name</translate></th> 13 <th><translate>Name</translate></th>
14 <th><translate>Type</translate></th> 14 <th><translate>Type</translate></th>
15 <th><translate>Date</translate></th> 15 <th><translate>Date</translate></th>
18 <th>&nbsp;</th> 18 <th>&nbsp;</th>
19 <th>&nbsp;</th> 19 <th>&nbsp;</th>
20 </tr> 20 </tr>
21 </thead> 21 </thead>
22 <tbody v-if="filteredData.length"> 22 <tbody v-if="filteredData.length">
23 <tr v-for="data in filteredData" :key="data.id"> 23 <tr :key="data.id" v-for="data in filteredData">
24 <td> 24 <td>
25 <a @click="zoomTo(data.id)" href="#">{{ 25 <a @click="zoomTo(data.id)" href="#">{{
26 data.summary.bottleneck 26 data.summary.bottleneck
27 }}</a> 27 }}</a>
28 </td> 28 </td>
30 <td>{{ data.summary.date }}</td> 30 <td>{{ data.summary.date }}</td>
31 <td>{{ data.enqueued.split("T")[0] }}</td> 31 <td>{{ data.enqueued.split("T")[0] }}</td>
32 <td>{{ data.user }}</td> 32 <td>{{ data.user }}</td>
33 <td> 33 <td>
34 <button 34 <button
35 @click="toggleApproval(data.id, $options.STATES.APPROVED)"
36 :class="{ 35 :class="{
37 btn: true, 36 btn: true,
38 'btn-sm': true, 37 'btn-sm': true,
39 'btn-outline-success': needsApproval(data) || isRejected(data), 38 'btn-outline-success': needsApproval(data) || isRejected(data),
40 'btn-success': isApproved(data) 39 'btn-success': isApproved(data)
41 }" 40 }"
41 @click="toggleApproval(data.id, $options.STATES.APPROVED)"
42 > 42 >
43 <font-awesome-icon icon="check"></font-awesome-icon> 43 <font-awesome-icon icon="check"></font-awesome-icon>
44 </button> 44 </button>
45 </td> 45 </td>
46 <td> 46 <td>
47 <button 47 <button
48 @click="toggleApproval(data.id, $options.STATES.REJECTED)"
49 :class="{ 48 :class="{
50 btn: true, 49 btn: true,
51 'btn-sm': true, 50 'btn-sm': true,
52 'btn-outline-danger': needsApproval(data) || isApproved(data), 51 'btn-outline-danger': needsApproval(data) || isApproved(data),
53 'btn-danger': isRejected(data) 52 'btn-danger': isRejected(data)
54 }" 53 }"
54 @click="toggleApproval(data.id, $options.STATES.REJECTED)"
55 > 55 >
56 <font-awesome-icon icon="times"></font-awesome-icon> 56 <font-awesome-icon icon="times"></font-awesome-icon>
57 </button> 57 </button>
58 </td> 58 </td>
59 </tr> 59 </tr>
65 </td> 65 </td>
66 </tr> 66 </tr>
67 </tbody> 67 </tbody>
68 </table> 68 </table>
69 <div class="p-3" v-if="filteredData.length"> 69 <div class="p-3" v-if="filteredData.length">
70 <button @click="confirmReview" class="btn btn-info"> 70 <button @click="confirmReview" class="confirm-button btn btn-info">
71 <translate>Confirm</translate> 71 <translate>Confirm</translate>
72 </button> 72 </button>
73 </div>
74 <div class="p-3">
75 <button @click="loadData" class="refresh btn btn-dark">Refresh</button>
73 </div> 76 </div>
74 </div> 77 </div>
75 </template> 78 </template>
76 79
77 <script> 80 <script>
197 } 200 }
198 }; 201 };
199 </script> 202 </script>
200 203
201 <style lang="scss" scoped> 204 <style lang="scss" scoped>
205 .refresh {
206 position: absolute;
207 left: $offset;
208 bottom: $offset;
209 }
202 .table th, 210 .table th,
203 td { 211 td {
204 font-size: 0.9rem; 212 font-size: 0.9rem;
205 border-top: 0px !important; 213 border-top: 0px !important;
206 border-bottom-width: 1px; 214 border-bottom-width: 1px;
207 text-align: left; 215 text-align: left;
208 padding: 0.5rem !important; 216 padding: 0.5rem !important;
209 } 217 }
218
219 .stagingcard {
220 position: relative;
221 min-height: 150px;
222 }
223
224 .confirm-button {
225 position: absolute;
226 right: $offset;
227 bottom: $offset;
228 }
210 </style> 229 </style>