|
29 | 29 | /> |
30 | 30 | {{ labels.clear_btn }} |
31 | 31 | </button> |
| 32 | + <button |
| 33 | + class="btn btn-secondary" |
| 34 | + :class="logs_no <= 1000 ? 'd-none' : ''" |
| 35 | + @click="openCleanupModal()" |
| 36 | + > |
| 37 | + <i |
| 38 | + v-if="!is_loading" |
| 39 | + class="fa fa-trash" |
| 40 | + /> |
| 41 | + <i |
| 42 | + v-else |
| 43 | + class="fa fa-spinner fa-spin" |
| 44 | + /> |
| 45 | + {{ labels.cleanup.cta }} |
| 46 | + </button> |
32 | 47 | </div> |
33 | 48 | </div> |
34 | 49 | <div class="columns"> |
|
70 | 85 | </div> |
71 | 86 | </template> |
72 | 87 | </div> |
| 88 | + <div |
| 89 | + class="modal rop-cleanup-modal" |
| 90 | + :class="cleanupModalClass" |
| 91 | + > |
| 92 | + <div class="modal-overlay" /> |
| 93 | + <div class="modal-container"> |
| 94 | + <div class="modal-header"> |
| 95 | + <button |
| 96 | + class="btn btn-clear float-right" |
| 97 | + @click="closeCleanupModal()" |
| 98 | + /> |
| 99 | + <div class="modal-title h5"> |
| 100 | + {{ labels.cleanup.title }} |
| 101 | + </div> |
| 102 | + </div> |
| 103 | + <div class="modal-body"> |
| 104 | + {{ labels.cleanup.description }} |
| 105 | + </div> |
| 106 | + <div class="modal-footer"> |
| 107 | + <button |
| 108 | + class="btn btn-success" |
| 109 | + @click="cleanupLogs()" |
| 110 | + > |
| 111 | + {{ labels.cleanup.btn }} |
| 112 | + </button> |
| 113 | + </div> |
| 114 | + </div> |
| 115 | + </div> |
73 | 116 | </div> |
74 | 117 | </div> |
75 | 118 | </template> |
|
86 | 129 | is_loading: false, |
87 | 130 | labels: this.$store.state.labels.logs, |
88 | 131 | upsell_link: ropApiSettings.upsell_link, |
| 132 | + cleanupModal: false, |
89 | 133 | } |
90 | 134 | }, |
91 | 135 | computed: { |
|
95 | 139 | logs_no: function () { |
96 | 140 | return this.$store.state.cron_status.logs_number; |
97 | 141 | }, |
| 142 | + cleanupModalClass: function() { |
| 143 | + return { |
| 144 | + 'active': true === this.cleanupModal |
| 145 | + } |
| 146 | + } |
98 | 147 | }, |
99 | 148 | watch: { |
100 | 149 | logs_no: function () { |
|
153 | 202 | document.body.appendChild(element); |
154 | 203 | element.click(); |
155 | 204 | document.body.removeChild(element); |
156 | | - } |
157 | | -
|
| 205 | + }, |
| 206 | + openCleanupModal() { |
| 207 | + this.cleanupModal = true; |
| 208 | + }, |
| 209 | + closeCleanupModal() { |
| 210 | + this.cleanupModal = false; |
| 211 | + }, |
| 212 | + cleanupLogs: function() { |
| 213 | + if (this.is_loading) { |
| 214 | + this.$log.warn('Request in progress...Bail'); |
| 215 | + return; |
| 216 | + } |
| 217 | + this.is_loading = true; |
| 218 | + this.$store.dispatch('fetchAJAXPromise', { |
| 219 | + req: 'cleanup_logs', |
| 220 | + data: {} |
| 221 | + }).then(response => { |
| 222 | + this.is_loading = false; |
| 223 | + this.cleanupModal = false; |
| 224 | + if (this.$parent.start_status === true) { |
| 225 | + // Stop sharing process if enabled. |
| 226 | + this.$parent.togglePosting(); |
| 227 | + } |
| 228 | + }, error => { |
| 229 | + this.is_loading = false; |
| 230 | + Vue.$log.error('Got nothing from server. Prompt user to check internet connection and try again', error) |
| 231 | + }) |
| 232 | + }, |
158 | 233 | }, |
159 | 234 | } |
160 | 235 | </script> |
|
208 | 283 | background-color: #FBE8E8; |
209 | 284 | } |
210 | 285 | } |
| 286 | + #rop_core .rop-cleanup-modal .modal-container{ |
| 287 | + max-width: 500px; |
| 288 | + padding: 25px; |
| 289 | + .modal-title, .modal-footer{ |
| 290 | + text-align: center; |
| 291 | + } |
| 292 | + .btn-success{ |
| 293 | + border:none; |
| 294 | + background-color:#00a32a; |
| 295 | + color: #fff; |
| 296 | + padding: 0.5rem 1rem; |
| 297 | + height: auto; |
| 298 | + display: inline; |
| 299 | + } |
| 300 | + .btn-success:hover{ |
| 301 | + background-color:#009528; |
| 302 | + } |
| 303 | + .modal-body{ |
| 304 | + font-size: 0.7rem; |
| 305 | + margin: 10px 30px; |
| 306 | + padding: 0px; |
| 307 | + } |
| 308 | + } |
211 | 309 | </style> |
0 commit comments