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 369 additions and 391 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,41 +53,79 @@ ...@@ -78,41 +53,79 @@
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 ''
102 fmt = (typeof fmt == 'undefined') ? 'D MMM YYYY' : fmt;
103 return moment(value, 'YYYY-MM-DD').format(fmt);
115 }, 104 },
105 getSortParam: function(sortOrder) {
106 return sortOrder.map(function(sort) {
107 return (sort.direction === 'desc' ? '+' : '') + sort.field
108 }).join(',')
109 },
110 setFilter(){
111 this.moreParams = {
112 search: this.moreParams.search
113 };
114 this.$refs.vuetable.changePage(1);
115 this.$nextTick(() => {
116 this.$refs.vuetable.reload();
117 });
118 },
119 searchKeyword(){
120 clearTimeout(this.timeout);
121 this.timeout = setTimeout(() => {
122 this.setFilter();
123 }, 500);
124 },
125 resetFilter(){
126 this.moreParams.search = '';
127 this.setFilter();
128 },
116 onPaginationData(paginationData){ 129 onPaginationData(paginationData){
117 this.$refs.pagination.setPaginationData(paginationData); 130 this.$refs.pagination.setPaginationData(paginationData);
118 this.$refs.paginationInfo.setPaginationData(paginationData); 131 this.$refs.paginationInfo.setPaginationData(paginationData);
...@@ -120,28 +133,26 @@ ...@@ -120,28 +133,26 @@
120 onChangePage(page){ 133 onChangePage(page){
121 this.$refs.vuetable.changePage(page); 134 this.$refs.vuetable.changePage(page);
122 }, 135 },
123 setFilter(){ 136 showModal(){
124 this.moreParams = { 137 $('#flag-creation-modal').show();
125 filter: this.moreParams.filter 138 },
126 }; 139 closeModal(){
127 140 $('#flag-creation-modal').hide();
128 this.$nextTick(() => { 141 },
129 this.$refs.vuetable.refresh(); 142 addFlagValue(){
130 }); 143 this.flag.accepted_values.push({
131 }, 144 value: null,
132 resetFilter(){ 145 encrypted_value: null
133 this.moreParams.filter = ''; 146 })
134 this.setFilter(); 147 },
135 }, 148 removeFlagValue(index){
136 getSortParam: function(sortOrder) { 149 this.flag.accepted_values.splice(index, 1)
137 return sortOrder.map(function(sort) { 150 },
138 return (sort.direction === 'desc' ? '+' : '') + sort.field 151 copyNameIfNotEncrypted(){
139 }).join(',') 152 if(!this.flag.is_encrypted) this.flag.encrypted_name = this.flag.name
140 }, 153 },
141 togglePostFormModal(){ 154 copyValueOfIfNotEncrypted(acceptedValue){
142 this.resetFields(); 155 if(!this.flag.is_encrypted) acceptedValue.encrypted_value = acceptedValue.value
143 this.isEditing = false;
144 this.dialogPostFormVisible = true;
145 }, 156 },
146 _checkIfFlagIsEncrypted(){ 157 _checkIfFlagIsEncrypted(){
147 if(!this.flag.is_encrypted){ 158 if(!this.flag.is_encrypted){
...@@ -163,41 +174,59 @@ ...@@ -163,41 +174,59 @@
163 if(this.flag.is_filtered) return false 174 if(this.flag.is_filtered) return false
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,358 +250,307 @@ ...@@ -221,358 +250,307 @@
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',
232 }); 261 msg: data.message
262 });
233 this.$nextTick(() => { 263 this.$nextTick(() => {
234 this.$refs.vuetable.reload(); 264 this.$refs.vuetable.reload();
235 }); 265 });
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',
260 }); 288 msg: data.message
261 return false; 289 });
262 } 290 return false;
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',
268 }); 297 msg: data.message
269 this.$nextTick(() => { 298 });
270 this.$refs.vuetable.reload(); 299 this.$nextTick(() => {
271 }); 300 this.$refs.vuetable.reload();
301 });
272 }); 302 });
273 }, 303 }
274 resetFields(){ 304 });
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 }
308 },
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
330 <div class="row"> 316 <div class="row">
331 <div class="col-md-8"> 317 <div class="col-sm-12">
332 <!-- label / search --> 318 <div class="row">
333 <div class="filter-field"> 319 <div class="col-sm-3">
334 <div class="input-group input-group-sm"> 320 <div class="form-group">
335 <span class="input-group-addon" id="sizing-addon3"><i class="fa fa-search"></i></span> 321 <div class="form-inline">
336 <input type="text" placeholder="Search" class="form-control" id="search" @keypress.enter="setFilter" v-model="moreParams.filter"> 322 <div class="ui icon input" style="width: 100%">
323 <input type="text" placeholder="Search..." v-model="moreParams.search" @keyup.enter="setFilter" @keyup="searchKeyword">
324 <i class="inverted circular search link icon" @click="setFilter"></i>
325 </div>
326 </div>
327 </div>
328 </div>
329
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>
337 </div> 337 </div>
338 </div> 338 </div>
339 <!-- /label / search -->
340 <div class="clearfix"></div>
341 </div> 339 </div>
342 <div class="col-md-4">
343 <button type="button" class="btn btn-default btn-success btn-md pull-right" @click="togglePostFormModal">Create</button>
344 </div>
345 </div>
346 <vuetable ref="vuetable"
347 api-url="/admin/api/get_flags_for_table"
348 :fields="tableOptions.columns"
349 :query-params="{ sort: 'sortOrder', page: 'page', perPage: 'perPage' }"
350 :css="tableOptions.css"
351 :sort-order="sortOrder"
352 :per-page="tableOptions.perPage"
353 :append-params="moreParams"
354 pagination-path=""
355 @vuetable:loading="loading = true"
356 @vuetable:load-success="loading = false"
357 @vuetable:pagination-data="onPaginationData">
358 <template slot="actions" scope="props">
359 <div class="table-button-container" v-if="!parseInt(props.rowData.is_default)">
360 <div class="btn-group">
361 <button
362 type="button"
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>
374 Edit
375 </a>
376 </li>
377 <li>
378 <a href="#" @click="toggleDelete(props.rowData)">
379 <i class="fa fa-trash"></i>
380 Delete
381 </a>
382 </li>
383 </ul>
384 </div>
385 </div>
386 </template>
387 </vuetable>
388 <div class="table-pagination">
389 <vuetable-pagination-info ref="paginationInfo" :css="{ infoClass: 'col-md-6' }"></vuetable-pagination-info>
390 <vuetable-pagination
391 ref="pagination"
392 @vuetable-pagination:change-page="onChangePage"
393 :css="paginationCss"></vuetable-pagination>
394 <div class="clearfix"></div>
395 </div> 340 </div>
396 <el-dialog :title="isEditing ? 'Edit Flag' : 'Create New Flag'" :close-on-click-modal="false" class="field-options-dialog" v-model="dialogPostFormVisible"> 341
397 <form @submit.prevent action="#"> 342 <div class="row">
398 <div class="panel panel-danger" :class="errorPosition" v-if="errors && errors.length"> 343 <div class="col-sm-12">
399 <div class="panel-body"> 344 <div class="ui">
400 <ul> 345 <vuetable ref="vuetable"
401 <li class="text-left text-danger error-text" v-for="(error, index) in errors" :key="index"> 346 api-url="/admin/api/get_flags_for_table"
402 {{ error }} 347 :fields="tableOptions.columns"
403 </li> 348 :query-params="{ sort: 'sortOrder', page: 'page', perPage: 'perPage' }"
404 </ul> 349 :css="tableOptions.css"
350 :sort-order="sortOrder"
351 :per-page="tableOptions.perPage"
352 :append-params="moreParams"
353 pagination-path=""
354 @vuetable:loading="loading = true"
355 @vuetable:load-success="loading = false"
356 @vuetable:pagination-data="onPaginationData">
357 <template slot="actions" scope="props">
358 <div class="table-button-container text-center" v-if="!parseInt(props.rowData.is_default)">
359 <a href="#"
360 @click="toggleEdit(props.rowData)"
361 class="btn bs-btn btn-xs btn-lineDark">
362 <i class="fa fa-pencil"></i>
363 Edit
364 </a>
365 <a href="#"
366 @click="toggleDelete(props.rowData)"
367 class="btn bs-btn btn-xs btn-lineDark">
368 <i class="fa fa-trash"></i>
369 Delete
370 </a>
371 </div>
372 </template>
373 </vuetable>
374 <div class="table-pagination">
375 <vuetable-pagination-info ref="paginationInfo" :css="{ infoClass: 'col-md-6' }"></vuetable-pagination-info>
376 <vuetable-pagination
377 ref="pagination"
378 @vuetable-pagination:change-page="onChangePage"
379 :css="paginationCss"></vuetable-pagination>
380 <div class="clearfix"></div>
405 </div> 381 </div>
406 </div> 382 </div>
407 <div class="form-group"> 383 </div>
408 <div class="row"> 384 </div>
409 <div class="col-xs-12"> 385
410 <label for="is_encrypted"> 386 <div class="modal" role="dialog" id="flag-creation-modal">
411 Encrypted? <el-switch 387 <div class="modal-dialog" role="document">
412 v-model="flag.is_encrypted" 388 <div class="modal-content">
413 on-color="#13ce66" 389 <div class="modal-header">
414 off-color="#ff4949" 390 <h3 class="modal-title pull-left">
415 on-text="Yes" 391 {{ isEditing ? 'Edit Flag' : 'Create New Flag' }}
416 off-text="No" 392 </h3>
417 :width="68"> 393 <button type="button pull-right" class="close" @click="closeModal" aria-label="Close">
418 </el-switch> 394 <span aria-hidden="true">&times;</span>
419 </label> 395 </button>
420 <label for="is_encrypted">
421 Filtered? <el-switch
422 v-model="flag.is_filtered"
423 on-color="#13ce66"
424 off-color="#ff4949"
425 on-text="Yes"
426 off-text="No"
427 :width="68">
428 </el-switch>
429 </label>
430 <label for="is_encrypted" v-if="!flag.is_filtered">
431 Has Default Value? <el-switch
432 v-model="flag.has_default"
433 on-color="#13ce66"
434 off-color="#ff4949"
435 on-text="Yes"
436 off-text="No"
437 :width="68">
438 </el-switch>
439 </label>
440 </div>
441 </div>
442 </div> 396 </div>
443 <div class="form-group"> 397 <div class="modal-body">
444 <div class="row"> 398 <form @submit.prevent action="#">
445 <div :class="{ 'col-xs-10': !flag.is_encrypted , 'col-xs-5': flag.is_encrypted, 'col-xs-12': !flag.is_encrypted && !flag.is_filtered}"> 399 <div class="panel panel-danger" v-if="errors && errors.length">
446 <label for="flag_name" class="control-label">Flag Name:</label> 400 <div class="panel-body">
447 <input type="text" 401 <ul>
448 name="flag_name" id="flag_name" 402 <li class="text-left text-danger error-text" v-for="(error, index) in errors" :key="index">
449 class="form-control interview-control -text round-field" 403 {{ error }}
450 v-model="flag.name" 404 </li>
451 @input="copyNameIfNotEncrypted" 405 </ul>
452 autocomplete="off">
453 </div>
454 <div class="encryption-arrows" v-if="flag.is_encrypted">
455 <div class="text-center" style="margin-top: 36px;">
456 <i class="fa fa-arrows-h" style="font-size: 1.5em;font-weight: 300;"></i>
457 </div> 406 </div>
458 </div> 407 </div>
459 <div class="col-xs-5" v-if="flag.is_encrypted"> 408 <div class="form-group">
460 <label for="encrypted_name" class="control-label">Encrypted Flag Name:</label> 409 <div class="row">
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"> 410 <div class="col-xs-12">
411 <label for="is_encrypted">
412 <input
413 type="checkbox"
414 name="is_encrypted"
415 id="is_encrypted"
416 v-model="flag.is_encrypted"> Encrypted?
417 </label>
418 <label for="is_filtered">
419 <input
420 type="checkbox"
421 name="is_filtered"
422 id="is_filtered"
423 v-model="flag.is_filtered"> Filtered?
424 </label>
425 <label for="has_default" v-if="!flag.is_filtered">
426 <input
427 type="checkbox"
428 name="has_default"
429 id="has_default"
430 v-model="flag.has_default"> Has Default Value?
431 </label>
432 </div>
433 </div>
462 </div> 434 </div>
463 </div> 435 <div class="form-group">
464 </div> 436 <div class="row">
465 <div class="form-group" v-if="flag.has_default && !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}">
466 <div class="row"> 438 <label style="margin-bottom: 10px;" for="flag_name" class="control-label">Flag Name:</label>
467 <div class="col-xs-12"> 439 <input type="text"
468 <label for="accepted_value" class="control-label">Default Value:</label> 440 name="flag_name" id="flag_name"
469 <input type="text" 441 class="form-control interview-control -text round-field"
470 name="accepted_value" 442 v-model="flag.name"
471 id="accepted_value" 443 @input="copyNameIfNotEncrypted"
472 class="form-control interview-control -text round-field" 444 autocomplete="off">
473 v-model="flag.default" 445 </div>
474 autocomplete="off"> 446 <div class="encryption-arrows" v-if="flag.is_encrypted">
447 <div class="text-center" style="margin-top: 32px;">
448 <i class="fa fa-arrows-h" style="font-size: 1.5em;font-weight: 300;"></i>
449 </div>
450 </div>
451 <div class="col-xs-5" v-if="flag.is_encrypted">
452 <label style="margin-bottom: 10px;" for="encrypted_name" class="control-label">Encrypted Flag Name:</label>
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">
454 </div>
455 </div>
475 </div> 456 </div>
476 </div> 457 <div class="form-group" v-if="flag.has_default && !flag.is_filtered">
477 </div> 458 <div class="row">
478 <div class="form-group" 459 <div class="col-xs-12">
479 v-for="(accepted_value, index) in flag.accepted_values" 460 <label for="accepted_value" class="control-label">Default Value:</label>
480 :key="index" 461 <input type="text"
481 v-if="flag.is_filtered"> 462 name="accepted_value"
482 <div class="row"> 463 id="accepted_value"
483 <div :class="{ 'col-xs-10': !flag.is_encrypted , 'col-xs-5': flag.is_encrypted}"> 464 class="form-control interview-control -text round-field"
484 <label for="accepted_value" class="control-label">Value:</label>
485 <label :for="`as_default_${index}`" class="pull-right">
486 Set as Default
487 <input type="checkbox"
488 v-model="flag.default" 465 v-model="flag.default"
489 :true-value="accepted_value.encrypted_value" 466 autocomplete="off">
490 :false-value="null" 467 </div>
491 :name="`as_default_${index}`"
492 :id="`as_default_${index}`">
493 </label>
494 <input type="text"
495 name="accepted_value"
496 id="accepted_value"
497 class="form-control interview-control -text round-field"
498 v-model="accepted_value.value"
499 @input="copyValueOfIfNotEncrypted(accepted_value)"
500 autocomplete="off">
501 </div>
502 <div class="encryption-arrows" v-if="flag.is_encrypted">
503 <div class="text-center" style="margin-top: 36px;">
504 <i class="fa fa-arrows-h" style="font-size: 1.5em;font-weight: 300;"></i>
505 </div> 468 </div>
506 </div> 469 </div>
507 <div class="col-xs-5" v-if="flag.is_encrypted"> 470 <div class="form-group"
508 <label for="encrypted_accepted_value" class="control-label">Encrypted Value:</label> 471 v-for="(accepted_value, index) in flag.accepted_values"
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"> 472 :key="index"
510 </div> 473 v-if="flag.is_filtered">
511 <div style="margin-top: 26px;"> 474 <div class="row">
512 <button type="button" 475 <div :class="{ 'col-xs-10': !flag.is_encrypted , 'col-xs-5': flag.is_encrypted}">
513 class="btn btn-md btn-success" 476 <label for="accepted_value" class="control-label">Value:</label>
514 @click="addFlagValue" 477 <label style="margin-bottom: 10px;" :for="`as_default_${index}`" class="pull-right">
515 v-if="index == (flag.accepted_values.length - 1)"> 478 Set as Default
516 <i class="fa fa-plus"></i> 479 <input type="checkbox"
517 </button> 480 v-model="flag.default"
518 <button type="button" 481 :true-value="accepted_value.encrypted_value"
519 class="btn btn-md btn-danger" 482 :false-value="null"
520 @click="removeFlagValue(index)" 483 :name="`as_default_${index}`"
521 v-if="index > 0"> 484 :id="`as_default_${index}`">
522 <i class="fa fa-minus"></i> 485 </label>
523 </button> 486 <input type="text"
487 name="accepted_value"
488 id="accepted_value"
489 class="form-control interview-control -text round-field"
490 v-model="accepted_value.value"
491 @input="copyValueOfIfNotEncrypted(accepted_value)"
492 autocomplete="off">
493 </div>
494 <div class="encryption-arrows" v-if="flag.is_encrypted">
495 <div class="text-center" style="margin-top: 32px;">
496 <i class="fa fa-arrows-h" style="font-size: 1.5em;font-weight: 300;"></i>
497 </div>
498 </div>
499 <div class="col-xs-5" v-if="flag.is_encrypted">
500 <label style="margin-bottom: 10px;" for="encrypted_accepted_value" class="control-label">Encrypted Value:</label>
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">
502 </div>
503 <div style="margin-top: 32px;">
504 <button type="button"
505 class="btn bs-btn btn-xs btn-primary"
506 @click="addFlagValue"
507 v-if="index == (flag.accepted_values.length - 1)">
508 <i class="fa fa-plus"></i>
509 </button>
510 <button type="button"
511 class="btn bs-btn btn-xs btn-danger"
512 @click="removeFlagValue(index)"
513 v-if="index > 0">
514 <i class="fa fa-minus"></i>
515 </button>
516 </div>
517 </div>
524 </div> 518 </div>
525 </div> 519 </form>
520 </div>
521 <div class="modal-footer">
522 <button type="button" class="btn btn-default" @click="closeModal">Cancel</button>
523 <button type="button" class="btn btn-primary" @click="createFlag" v-if="!isEditing">Create</button>
524 <button type="button" class="btn btn-primary" @click="update" v-else>Save</button>
525 </div>
526 </div> 526 </div>
527 </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> 527 </div>
542 </sweet-modal> 528 </div>
543
544 <sweet-modal icon="warning" ref="moreWarningModal" hide-close-button overlay-theme="dark" modal-theme="dark">
545 This may have impact on existing campaigns.
546 </sweet-modal>
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; 535 }
554 font-size: 14px;
555 }
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){ 543 }
564 margin-right: -5px;
565 }
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; 547 }
570 }
571 }
572 548
573 .encryption-arrows{ 549 .ui.form select.custom{
574 display: inline-block; 550 height: 43px;
575 float: left; 551 }
576 } 552 .encryption-arrows{
553 display: inline-block;
554 float: left;
577 } 555 }
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!