Skip to content

Janis / btflags

Go to a project
Toggle navigation
Toggle navigation pinning
343e6dd1 by Joshua Tundag
Options

update example

1 parent 24a15569
Inline Side-by-side
Showing 1 changed file with 228 additions and 250 deletions
examples/Table.vue
1 <script> 1 <script>
2 import FlagsService from './../services/Flags'; 2 import Vue from 'vue'
3 export default { 3 export default {
4 props: {
5 errorPosition: {
6 default: 'static'
7 }
8 },
9 created(){
10 },
11 data(){ 4 data(){
12 return { 5 return {
13 isEditing: false,
14 dialogPostFormVisible: false,
15 selected: null,
16 flag: {
17 name: null,
18 is_encrypted: true,
19 is_filtered: true,
20 encrypted_name: null,
21 has_default: false,
22 default: null,
23 accepted_values: [
24 {
25 value: null,
26 encrypted_value: null
27 }
28 ]
29 },
30 errors: [],
31 tableOptions: { 6 tableOptions: {
32 perPage: 10, 7 perPage: 10,
33 columns: [ 8 columns: [
...@@ -67,10 +42,10 @@ ...@@ -67,10 +42,10 @@
67 } 42 }
68 ], 43 ],
69 css: { 44 css: {
70 tableClass: 'table table-bordered table-hover table-striped', 45 tableClass: 'ui red selectable celled stackable attached table vuetable-wrapper',
71 loadingClass: 'loading', 46 loadingClass: 'loading',
72 ascendingIcon: 'fa fa-caret-up', 47 ascendingIcon: 'blue chevron up icon',
73 descendingIcon: 'fa fa-caret-down', 48 descendingIcon: 'blue chevron down icon',
74 detailRowClass: 'vuetable-detail-row', 49 detailRowClass: 'vuetable-detail-row',
75 sortHandleIcon: 'grey sidebar icon' 50 sortHandleIcon: 'grey sidebar icon'
76 } 51 }
...@@ -78,70 +53,106 @@ ...@@ -78,70 +53,106 @@
78 loading: false, 53 loading: false,
79 sortOrder: [ 54 sortOrder: [
80 { 55 {
81 field: 'flags.name', 56 field: 'u.date_created',
82 direction: 'desc' 57 direction: 'asc'
83 } 58 }
84 ], 59 ],
85 moreParams: { 60 moreParams: {
86 filter: null, 61 search: null
87 date_range: '',
88 date_from: null,
89 date_to: null,
90 }, 62 },
91 paginationCss: { 63 paginationCss: {
92 wrapperClass: 'col-md-6 text-right', 64 wrapperClass: 'ui right floated pagination menu',
93 activeClass: 'active large', 65 activeClass: 'active large',
94 disabledClass: 'disabled', 66 disabledClass: 'disabled',
95 pageClass: 'item', 67 pageClass: 'item',
96 linkClass: 'icon item', 68 linkClass: 'icon item',
97 paginationClass: 'pagination-box pagination', 69 paginationClass: 'ui bottom attached segment grid',
98 paginationInfoClass: 'col-md-6', 70 paginationInfoClass: 'left floated left aligned six wide column',
99 icons: { 71 icons: {
100 first: 'fa fa-angle-double-left', 72 first: 'angle double left icon',
101 prev: 'fa fa-chevron-left', 73 prev: 'left chevron icon',
102 next: 'fa fa-chevron-right', 74 next: 'right chevron icon',
103 last: 'fa fa-angle-double-right' 75 last: 'angle double right icon',
104 } 76 }
105 }, 77 },
106 paginationInfoClass: 'col-md-6',
107 tmpDateTo: null,
108 tmpDateFrom: null, 78 tmpDateFrom: null,
109 total: 0 79 tmpDateTo: null,
80 timeout: null,
81 errors: [],
82 isEditing: false,
83 flag: {
84 name: null,
85 is_encrypted: true,
86 is_filtered: true,
87 encrypted_name: null,
88 has_default: false,
89 default: null,
90 accepted_values: [
91 {
92 value: null,
93 encrypted_value: null
94 }
95 ]
96 }
110 }; 97 };
111 }, 98 },
112 methods: { 99 methods: {
113 __capitalize(str){ 100 __formatDate(value, fmt){
114 return str.replace(/\b\w/g, (l) => l.toUpperCase()); 101 if (value == null) return ''
115 }, 102 fmt = (typeof fmt == 'undefined') ? 'D MMM YYYY' : fmt;
116 onPaginationData(paginationData){ 103 return moment(value, 'YYYY-MM-DD').format(fmt);
117 this.$refs.pagination.setPaginationData(paginationData);
118 this.$refs.paginationInfo.setPaginationData(paginationData);
119 }, 104 },
120 onChangePage(page){ 105 getSortParam: function(sortOrder) {
121 this.$refs.vuetable.changePage(page); 106 return sortOrder.map(function(sort) {
107 return (sort.direction === 'desc' ? '+' : '') + sort.field
108 }).join(',')
122 }, 109 },
123 setFilter(){ 110 setFilter(){
124 this.moreParams = { 111 this.moreParams = {
125 filter: this.moreParams.filter 112 search: this.moreParams.search
126 }; 113 };
127 114 this.$refs.vuetable.changePage(1);
128 this.$nextTick(() => { 115 this.$nextTick(() => {
129 this.$refs.vuetable.refresh(); 116 this.$refs.vuetable.reload();
130 }); 117 });
131 }, 118 },
119 searchKeyword(){
120 clearTimeout(this.timeout);
121 this.timeout = setTimeout(() => {
122 this.setFilter();
123 }, 500);
124 },
132 resetFilter(){ 125 resetFilter(){
133 this.moreParams.filter = ''; 126 this.moreParams.search = '';
134 this.setFilter(); 127 this.setFilter();
135 }, 128 },
136 getSortParam: function(sortOrder) { 129 onPaginationData(paginationData){
137 return sortOrder.map(function(sort) { 130 this.$refs.pagination.setPaginationData(paginationData);
138 return (sort.direction === 'desc' ? '+' : '') + sort.field 131 this.$refs.paginationInfo.setPaginationData(paginationData);
139 }).join(',')
140 }, 132 },
141 togglePostFormModal(){ 133 onChangePage(page){
142 this.resetFields(); 134 this.$refs.vuetable.changePage(page);
143 this.isEditing = false; 135 },
144 this.dialogPostFormVisible = true; 136 showModal(){
137 $('#flag-creation-modal').show();
138 },
139 closeModal(){
140 $('#flag-creation-modal').hide();
141 },
142 addFlagValue(){
143 this.flag.accepted_values.push({
144 value: null,
145 encrypted_value: null
146 })
147 },
148 removeFlagValue(index){
149 this.flag.accepted_values.splice(index, 1)
150 },
151 copyNameIfNotEncrypted(){
152 if(!this.flag.is_encrypted) this.flag.encrypted_name = this.flag.name
153 },
154 copyValueOfIfNotEncrypted(acceptedValue){
155 if(!this.flag.is_encrypted) acceptedValue.encrypted_value = acceptedValue.value
145 }, 156 },
146 _checkIfFlagIsEncrypted(){ 157 _checkIfFlagIsEncrypted(){
147 if(!this.flag.is_encrypted){ 158 if(!this.flag.is_encrypted){
...@@ -164,40 +175,58 @@ ...@@ -164,40 +175,58 @@
164 if(!this.flag.has_default) this.flag.default = null; 175 if(!this.flag.has_default) this.flag.default = null;
165 }, 176 },
166 createFlag(){ 177 createFlag(){
178 this.closeModal();
167 this.loading = true; 179 this.loading = true;
168 this.errors = []; 180 this.errors = [];
169 this._checkIfFlagIsFiltered(); 181 this._checkIfFlagIsFiltered();
170 this._checkIfFlagIsEncrypted(); 182 this._checkIfFlagIsEncrypted();
171 this._checkIfFlagHasDefaultValue(); 183 this._checkIfFlagHasDefaultValue();
172 FlagsService.create(this.flag) 184 this.$http.post('/admin/api/create_flag', this.flag)
173 .then(({data}) => { 185 .then(({data}) => {
174 data = typeof data == 'string' || data instanceof String ? JSON.parse(data) : data; 186 data = typeof data == 'string' || data instanceof String ? JSON.parse(data) : data;
175 187
176 if(!data.success){ 188 if(!data.success){
177 this.loading = false; 189 this.loading = false;
178 this.errors = data.errors; 190 this.errors = data.errors;
191 this.showModal();
179 return false; 192 return false;
180 } 193 }
181 194
182 this.resetFields(); 195 this.resetFields();
183 this.dialogPostFormVisible = false; 196 this.closeModal();
184 this.loading = false; 197 this.loading = false;
185 this.errors = []; 198 this.errors = [];
186 this.$notify({ 199 Lobibox.notify('success', {
187 title: 'Success', 200 size: 'mini',
188 message: data.message, 201 rounded: false,
189 type: 'success' 202 position: 'center top',
190 }); 203 msg: data.message
204 })
191 this.$nextTick(() => { 205 this.$nextTick(() => {
192 this.$refs.vuetable.reload(); 206 this.$refs.vuetable.reload();
193 }); 207 });
194 }); 208 });
195 }, 209 },
210 resetFields(){
211 this.flag = {
212 name: null,
213 is_encrypted: true,
214 is_filtered: true,
215 encrypted_name: null,
216 has_default: false,
217 default: null,
218 accepted_values: [
219 {
220 value: null,
221 encrypted_value: null
222 }
223 ]
224 }
225 },
196 toggleEdit(flag){ 226 toggleEdit(flag){
197 this.showWarningMessage();
198 this.isEditing = true; 227 this.isEditing = true;
199 this.resetFields(); 228 this.resetFields();
200 this.dialogPostFormVisible = true; 229 this.showModal();
201 this.flag = Object.assign( 230 this.flag = Object.assign(
202 JSON.parse(JSON.stringify(flag)), 231 JSON.parse(JSON.stringify(flag)),
203 { 232 {
...@@ -212,7 +241,7 @@ ...@@ -212,7 +241,7 @@
212 this._checkIfFlagIsFiltered(); 241 this._checkIfFlagIsFiltered();
213 this._checkIfFlagIsEncrypted(); 242 this._checkIfFlagIsEncrypted();
214 this._checkIfFlagHasDefaultValue(); 243 this._checkIfFlagHasDefaultValue();
215 FlagsService.update(this.flag) 244 this.$http.post('/admin/api/update_flag', this.flag)
216 .then(({data}) => { 245 .then(({data}) => {
217 if(!data.success){ 246 if(!data.success){
218 this.loading = false; 247 this.loading = false;
...@@ -221,14 +250,15 @@ ...@@ -221,14 +250,15 @@
221 } 250 }
222 251
223 this.resetFields(); 252 this.resetFields();
224 this.dialogPostFormVisible = false; 253 this.closeModal();
225 this.isEditing = false; 254 this.isEditing = false;
226 this.loading = false; 255 this.loading = false;
227 this.errors = []; 256 this.errors = [];
228 this.$notify({ 257 Lobibox.notify('success', {
229 title: 'Success', 258 size: 'mini',
230 message: data.message, 259 rounded: false,
231 type: 'success' 260 position: 'center top',
261 msg: data.message
232 }); 262 });
233 this.$nextTick(() => { 263 this.$nextTick(() => {
234 this.$refs.vuetable.reload(); 264 this.$refs.vuetable.reload();
...@@ -236,113 +266,82 @@ ...@@ -236,113 +266,82 @@
236 }); 266 });
237 }, 267 },
238 toggleDelete(flag){ 268 toggleDelete(flag){
239 this.showWarningMessage(); 269 swal({
240 this.selected = flag; 270 title: "Confirm",
241 this.$refs.deleteConfirmationModal.open(); 271 text: "Are you sure you want to delete this flag?",
242 }, 272 icon: "warning",
243 cancelDelete(){ 273 buttons: true,
244 this.selected = null; 274 dangerMode: true,
245 this.$refs.deleteConfirmationModal.close(); 275 })
246 }, 276 .then((willDelete) => {
247 remove(){ 277 if (willDelete) {
248 this.loading = true; 278 this.loading = true;
249 FlagsService.delete(this.selected) 279 Vue.http.post('/admin/api/delete_flag', flag)
250 .then(({data}) => { 280 .then(({data}) => {
251 this.loading = false; 281 this.loading = false;
252 this.selected = null;
253 this.$refs.deleteConfirmationModal.close();
254 282
255 if(!data.success){ 283 if(!data.success){
256 this.$notify({ 284 Lobibox.notify('success', {
257 title: 'Error', 285 size: 'mini',
258 message: data.message, 286 rounded: false,
259 type: 'error' 287 position: 'center top',
288 msg: data.message
260 }); 289 });
261 return false; 290 return false;
262 } 291 }
263 292
264 this.$notify({ 293 Lobibox.notify('success', {
265 title: 'Success', 294 size: 'mini',
266 message: data.message, 295 rounded: false,
267 type: 'success' 296 position: 'center top',
297 msg: data.message
268 }); 298 });
269 this.$nextTick(() => { 299 this.$nextTick(() => {
270 this.$refs.vuetable.reload(); 300 this.$refs.vuetable.reload();
271 }); 301 });
272 }); 302 });
273 },
274 resetFields(){
275 this.flag = {
276 name: null,
277 is_encrypted: true,
278 is_filtered: true,
279 encrypted_name: null,
280 has_default: false,
281 default: null,
282 accepted_values: [
283 {
284 value: null,
285 encrypted_value: null
286 }
287 ]
288 }
289 },
290 addFlagValue(){
291 this.flag.accepted_values.push({
292 value: null,
293 encrypted_value: null
294 })
295 },
296 removeFlagValue(index){
297 this.flag.accepted_values.splice(index, 1)
298 },
299 copyNameIfNotEncrypted(){
300 if(!this.flag.is_encrypted) this.flag.encrypted_name = this.flag.name
301 },
302 copyValueOfIfNotEncrypted(acceptedValue){
303 if(!this.flag.is_encrypted) acceptedValue.encrypted_value = acceptedValue.value
304 },
305 showWarningMessage(){
306 this.$refs.moreWarningModal.open();
307 } 303 }
308 }, 304 });
309 watch: {
310 dialogPostFormVisible(to){
311 if(!to) this.errors = [];
312 },
313 'flag.is_filtered'(to, from){
314 this.flag.has_default = false
315 if(!from) this.flag.default = null;
316 },
317 'flag.default'(to, from){
318 if(to) this.flag.has_default = true
319 },
320 'flag.has_default'(to, from){
321 if(!to) this.flag.default = null;
322 } 305 }
323 } 306 }
324 } 307 }
325 </script> 308 </script>
326 309
327 <template> 310 <template>
328 <div id="lfusa-flag-table"> 311 <div id="customers-list" class="ui segment">
329 <lfusa-loading-overlay :loading="loading"></lfusa-loading-overlay> 312 <div class="ui active dimmer" v-if="loading">
313 <div class="ui massive text loader">Loading</div>
314 </div>
315
316 <div class="row">
317 <div class="col-sm-12">
330 <div class="row"> 318 <div class="row">
331 <div class="col-md-8"> 319 <div class="col-sm-3">
332 <!-- label / search --> 320 <div class="form-group">
333 <div class="filter-field"> 321 <div class="form-inline">
334 <div class="input-group input-group-sm"> 322 <div class="ui icon input" style="width: 100%">
335 <span class="input-group-addon" id="sizing-addon3"><i class="fa fa-search"></i></span> 323 <input type="text" placeholder="Search..." v-model="moreParams.search" @keyup.enter="setFilter" @keyup="searchKeyword">
336 <input type="text" placeholder="Search" class="form-control" id="search" @keypress.enter="setFilter" v-model="moreParams.filter"> 324 <i class="inverted circular search link icon" @click="setFilter"></i>
325 </div>
337 </div> 326 </div>
338 </div> 327 </div>
339 <!-- /label / search -->
340 <div class="clearfix"></div>
341 </div> 328 </div>
342 <div class="col-md-4"> 329
343 <button type="button" class="btn btn-default btn-success btn-md pull-right" @click="togglePostFormModal">Create</button> 330 <div class="col-sm-3">
331 <button type="button"
332 class="ui positive button icon"
333 title="Create New"
334 @click="showModal">
335 Create New
336 </button>
344 </div> 337 </div>
345 </div> 338 </div>
339 </div>
340 </div>
341
342 <div class="row">
343 <div class="col-sm-12">
344 <div class="ui">
346 <vuetable ref="vuetable" 345 <vuetable ref="vuetable"
347 api-url="/admin/api/get_flags_for_table" 346 api-url="/admin/api/get_flags_for_table"
348 :fields="tableOptions.columns" 347 :fields="tableOptions.columns"
...@@ -356,32 +355,19 @@ ...@@ -356,32 +355,19 @@
356 @vuetable:load-success="loading = false" 355 @vuetable:load-success="loading = false"
357 @vuetable:pagination-data="onPaginationData"> 356 @vuetable:pagination-data="onPaginationData">
358 <template slot="actions" scope="props"> 357 <template slot="actions" scope="props">
359 <div class="table-button-container" v-if="!parseInt(props.rowData.is_default)"> 358 <div class="table-button-container text-center" v-if="!parseInt(props.rowData.is_default)">
360 <div class="btn-group"> 359 <a href="#"
361 <button 360 @click="toggleEdit(props.rowData)"
362 type="button" 361 class="btn bs-btn btn-xs btn-lineDark">
363 class="btn btn-xs btn-success dropdown-toggle"
364 data-toggle="dropdown"
365 aria-haspopup="true"
366 aria-expanded="false">
367 More
368 <span class="caret"></span>
369 </button>
370 <ul class="dropdown-menu">
371 <li>
372 <a href="#" @click="toggleEdit(props.rowData)">
373 <i class="fa fa-pencil"></i> 362 <i class="fa fa-pencil"></i>
374 Edit 363 Edit
375 </a> 364 </a>
376 </li> 365 <a href="#"
377 <li> 366 @click="toggleDelete(props.rowData)"
378 <a href="#" @click="toggleDelete(props.rowData)"> 367 class="btn bs-btn btn-xs btn-lineDark">
379 <i class="fa fa-trash"></i> 368 <i class="fa fa-trash"></i>
380 Delete 369 Delete
381 </a> 370 </a>
382 </li>
383 </ul>
384 </div>
385 </div> 371 </div>
386 </template> 372 </template>
387 </vuetable> 373 </vuetable>
...@@ -393,9 +379,24 @@ ...@@ -393,9 +379,24 @@
393 :css="paginationCss"></vuetable-pagination> 379 :css="paginationCss"></vuetable-pagination>
394 <div class="clearfix"></div> 380 <div class="clearfix"></div>
395 </div> 381 </div>
396 <el-dialog :title="isEditing ? 'Edit Flag' : 'Create New Flag'" :close-on-click-modal="false" class="field-options-dialog" v-model="dialogPostFormVisible"> 382 </div>
383 </div>
384 </div>
385
386 <div class="modal" role="dialog" id="flag-creation-modal">
387 <div class="modal-dialog" role="document">
388 <div class="modal-content">
389 <div class="modal-header">
390 <h3 class="modal-title pull-left">
391 {{ isEditing ? 'Edit Flag' : 'Create New Flag' }}
392 </h3>
393 <button type="button pull-right" class="close" @click="closeModal" aria-label="Close">
394 <span aria-hidden="true">&times;</span>
395 </button>
396 </div>
397 <div class="modal-body">
397 <form @submit.prevent action="#"> 398 <form @submit.prevent action="#">
398 <div class="panel panel-danger" :class="errorPosition" v-if="errors && errors.length"> 399 <div class="panel panel-danger" v-if="errors && errors.length">
399 <div class="panel-body"> 400 <div class="panel-body">
400 <ul> 401 <ul>
401 <li class="text-left text-danger error-text" v-for="(error, index) in errors" :key="index"> 402 <li class="text-left text-danger error-text" v-for="(error, index) in errors" :key="index">
...@@ -408,34 +409,25 @@ ...@@ -408,34 +409,25 @@
408 <div class="row"> 409 <div class="row">
409 <div class="col-xs-12"> 410 <div class="col-xs-12">
410 <label for="is_encrypted"> 411 <label for="is_encrypted">
411 Encrypted? <el-switch 412 <input
412 v-model="flag.is_encrypted" 413 type="checkbox"
413 on-color="#13ce66" 414 name="is_encrypted"
414 off-color="#ff4949" 415 id="is_encrypted"
415 on-text="Yes" 416 v-model="flag.is_encrypted"> Encrypted?
416 off-text="No"
417 :width="68">
418 </el-switch>
419 </label> 417 </label>
420 <label for="is_encrypted"> 418 <label for="is_filtered">
421 Filtered? <el-switch 419 <input
422 v-model="flag.is_filtered" 420 type="checkbox"
423 on-color="#13ce66" 421 name="is_filtered"
424 off-color="#ff4949" 422 id="is_filtered"
425 on-text="Yes" 423 v-model="flag.is_filtered"> Filtered?
426 off-text="No"
427 :width="68">
428 </el-switch>
429 </label> 424 </label>
430 <label for="is_encrypted" v-if="!flag.is_filtered"> 425 <label for="has_default" v-if="!flag.is_filtered">
431 Has Default Value? <el-switch 426 <input
432 v-model="flag.has_default" 427 type="checkbox"
433 on-color="#13ce66" 428 name="has_default"
434 off-color="#ff4949" 429 id="has_default"
435 on-text="Yes" 430 v-model="flag.has_default"> Has Default Value?
436 off-text="No"
437 :width="68">
438 </el-switch>
439 </label> 431 </label>
440 </div> 432 </div>
441 </div> 433 </div>
...@@ -443,7 +435,7 @@ ...@@ -443,7 +435,7 @@
443 <div class="form-group"> 435 <div class="form-group">
444 <div class="row"> 436 <div class="row">
445 <div :class="{ 'col-xs-10': !flag.is_encrypted , 'col-xs-5': flag.is_encrypted, 'col-xs-12': !flag.is_encrypted && !flag.is_filtered}"> 437 <div :class="{ 'col-xs-10': !flag.is_encrypted , 'col-xs-5': flag.is_encrypted, 'col-xs-12': !flag.is_encrypted && !flag.is_filtered}">
446 <label for="flag_name" class="control-label">Flag Name:</label> 438 <label style="margin-bottom: 10px;" for="flag_name" class="control-label">Flag Name:</label>
447 <input type="text" 439 <input type="text"
448 name="flag_name" id="flag_name" 440 name="flag_name" id="flag_name"
449 class="form-control interview-control -text round-field" 441 class="form-control interview-control -text round-field"
...@@ -452,12 +444,12 @@ ...@@ -452,12 +444,12 @@
452 autocomplete="off"> 444 autocomplete="off">
453 </div> 445 </div>
454 <div class="encryption-arrows" v-if="flag.is_encrypted"> 446 <div class="encryption-arrows" v-if="flag.is_encrypted">
455 <div class="text-center" style="margin-top: 36px;"> 447 <div class="text-center" style="margin-top: 32px;">
456 <i class="fa fa-arrows-h" style="font-size: 1.5em;font-weight: 300;"></i> 448 <i class="fa fa-arrows-h" style="font-size: 1.5em;font-weight: 300;"></i>
457 </div> 449 </div>
458 </div> 450 </div>
459 <div class="col-xs-5" v-if="flag.is_encrypted"> 451 <div class="col-xs-5" v-if="flag.is_encrypted">
460 <label for="encrypted_name" class="control-label">Encrypted Flag Name:</label> 452 <label style="margin-bottom: 10px;" for="encrypted_name" class="control-label">Encrypted Flag Name:</label>
461 <input type="text" name="encrypted_name" id="encrypted_name" class="form-control interview-control -text round-field" v-model="flag.encrypted_name" autocomplete="off"> 453 <input type="text" name="encrypted_name" id="encrypted_name" class="form-control interview-control -text round-field" v-model="flag.encrypted_name" autocomplete="off">
462 </div> 454 </div>
463 </div> 455 </div>
...@@ -482,7 +474,7 @@ ...@@ -482,7 +474,7 @@
482 <div class="row"> 474 <div class="row">
483 <div :class="{ 'col-xs-10': !flag.is_encrypted , 'col-xs-5': flag.is_encrypted}"> 475 <div :class="{ 'col-xs-10': !flag.is_encrypted , 'col-xs-5': flag.is_encrypted}">
484 <label for="accepted_value" class="control-label">Value:</label> 476 <label for="accepted_value" class="control-label">Value:</label>
485 <label :for="`as_default_${index}`" class="pull-right"> 477 <label style="margin-bottom: 10px;" :for="`as_default_${index}`" class="pull-right">
486 Set as Default 478 Set as Default
487 <input type="checkbox" 479 <input type="checkbox"
488 v-model="flag.default" 480 v-model="flag.default"
...@@ -500,23 +492,23 @@ ...@@ -500,23 +492,23 @@
500 autocomplete="off"> 492 autocomplete="off">
501 </div> 493 </div>
502 <div class="encryption-arrows" v-if="flag.is_encrypted"> 494 <div class="encryption-arrows" v-if="flag.is_encrypted">
503 <div class="text-center" style="margin-top: 36px;"> 495 <div class="text-center" style="margin-top: 32px;">
504 <i class="fa fa-arrows-h" style="font-size: 1.5em;font-weight: 300;"></i> 496 <i class="fa fa-arrows-h" style="font-size: 1.5em;font-weight: 300;"></i>
505 </div> 497 </div>
506 </div> 498 </div>
507 <div class="col-xs-5" v-if="flag.is_encrypted"> 499 <div class="col-xs-5" v-if="flag.is_encrypted">
508 <label for="encrypted_accepted_value" class="control-label">Encrypted Value:</label> 500 <label style="margin-bottom: 10px;" for="encrypted_accepted_value" class="control-label">Encrypted Value:</label>
509 <input type="text" name="encrypted_accepted_value" id="encrypted_accepted_value" class="form-control interview-control -text round-field" v-model="accepted_value.encrypted_value" autocomplete="off"> 501 <input type="text" name="encrypted_accepted_value" id="encrypted_accepted_value" class="form-control interview-control -text round-field" v-model="accepted_value.encrypted_value" autocomplete="off">
510 </div> 502 </div>
511 <div style="margin-top: 26px;"> 503 <div style="margin-top: 32px;">
512 <button type="button" 504 <button type="button"
513 class="btn btn-md btn-success" 505 class="btn bs-btn btn-xs btn-primary"
514 @click="addFlagValue" 506 @click="addFlagValue"
515 v-if="index == (flag.accepted_values.length - 1)"> 507 v-if="index == (flag.accepted_values.length - 1)">
516 <i class="fa fa-plus"></i> 508 <i class="fa fa-plus"></i>
517 </button> 509 </button>
518 <button type="button" 510 <button type="button"
519 class="btn btn-md btn-danger" 511 class="btn bs-btn btn-xs btn-danger"
520 @click="removeFlagValue(index)" 512 @click="removeFlagValue(index)"
521 v-if="index > 0"> 513 v-if="index > 0">
522 <i class="fa fa-minus"></i> 514 <i class="fa fa-minus"></i>
...@@ -525,54 +517,40 @@ ...@@ -525,54 +517,40 @@
525 </div> 517 </div>
526 </div> 518 </div>
527 </form> 519 </form>
528 <span slot="footer" class="dialog-footer">
529 <el-button @click="dialogPostFormVisible = false">Cancel</el-button>
530 <el-button type="primary" @click="createFlag" v-if="!isEditing">Create</el-button>
531 <el-button type="primary" @click="update" v-else>Save</el-button>
532 </span>
533 </el-dialog>
534
535 <sweet-modal icon="warning" ref="deleteConfirmationModal" hide-close-button blocking overlay-theme="dark" modal-theme="dark">
536 Are you sure you want to delete this flag?
537
538 <div slot="button">
539 <button type="button" class="btn btn-md modal-btn -default" @click="cancelDelete" v-if="!loading">No</button>
540 <button type="button" class="btn btn-md modal-btn -danger" @click="remove">Yes</button>
541 </div> 520 </div>
542 </sweet-modal> 521 <div class="modal-footer">
543 522 <button type="button" class="btn btn-default" @click="closeModal">Cancel</button>
544 <sweet-modal icon="warning" ref="moreWarningModal" hide-close-button overlay-theme="dark" modal-theme="dark"> 523 <button type="button" class="btn btn-primary" @click="createFlag" v-if="!isEditing">Create</button>
545 This may have impact on existing campaigns. 524 <button type="button" class="btn btn-primary" @click="update" v-else>Save</button>
546 </sweet-modal> 525 </div>
526 </div>
527 </div>
528 </div>
547 </div> 529 </div>
548 </template> 530 </template>
549 531
550 <style lang="sass"> 532 <style scoped>
551 #lfusa-flag-table { 533 .table>caption+thead>tr:first-child>td, .table>caption+thead>tr:first-child>th, .table>colgroup+thead>tr:first-child>td, .table>colgroup+thead>tr:first-child>th, .table>thead:first-child>tr:first-child>td, .table>thead:first-child>tr:first-child>th{
552 .interview-control.-text { 534 font-size: 0.9em !important;
553 height: 40px;
554 font-size: 14px;
555 } 535 }
556 536
557 .dropdown-menu{ 537 .ui.right.floated.pagination.menu{
558 min-width: 90px; 538 clear: both;
559 } 539 }
560 540
561 .vuetable-pagination-info{ 541 .vuetable-pagination-info{
562 .btn-nav.icon.item.disabled:first-child, 542 padding-top: 10px;
563 .btn-nav.icon.item.disabled:nth-child(2){
564 margin-right: -5px;
565 } 543 }
566 544
567 .btn-nav.icon.item.disabled:last-child, 545 .ui.input.custom{
568 .btn-nav.icon.item.disabled:nth-last-child(2){ 546 width: 100%;
569 margin-left: -5px;
570 }
571 } 547 }
572 548
549 .ui.form select.custom{
550 height: 43px;
551 }
573 .encryption-arrows{ 552 .encryption-arrows{
574 display: inline-block; 553 display: inline-block;
575 float: left; 554 float: left;
576 } 555 }
577 }
578 </style> 556 </style>
...\ No newline at end of file ...\ No newline at end of file
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!