|
89 | 89 | </div> |
90 | 90 | </div> |
91 | 91 | <div class="column col-12 text-right"> |
| 92 | + <button |
| 93 | + class="btn btn-secondary me-2" |
| 94 | + @click="openCleanupModal()" |
| 95 | + > |
| 96 | + <i |
| 97 | + v-if="!is_loading" |
| 98 | + class="fa fa-trash" |
| 99 | + /> |
| 100 | + <i |
| 101 | + v-else |
| 102 | + class="fa fa-spinner fa-spin" |
| 103 | + /> |
| 104 | + {{ labels.cleanup_cta }} |
| 105 | + </button> |
92 | 106 | <button |
93 | 107 | class="btn btn-secondary" |
94 | 108 | @click="resetAccountData()" |
|
106 | 120 | </div> |
107 | 121 | </div> |
108 | 122 | </div> |
| 123 | + <div |
| 124 | + class="modal rop-cleanup-modal" |
| 125 | + :class="cleanupModalClass" |
| 126 | + > |
| 127 | + <div class="modal-overlay" /> |
| 128 | + <div class="modal-container"> |
| 129 | + <div class="modal-header"> |
| 130 | + <button |
| 131 | + class="btn btn-clear float-right" |
| 132 | + @click="closeCleanupModal()" |
| 133 | + /> |
| 134 | + <div class="modal-title h5"> |
| 135 | + {{ labels.cleanup_title }} |
| 136 | + </div> |
| 137 | + </div> |
| 138 | + <div class="modal-body"> |
| 139 | + {{ labels.cleanup_description }} |
| 140 | + </div> |
| 141 | + <div class="modal-footer"> |
| 142 | + <button |
| 143 | + class="btn btn-success" |
| 144 | + @click="cleanupAccount()" |
| 145 | + >{{ labels.cleanup_now }}</button> |
| 146 | + </div> |
| 147 | + </div> |
| 148 | + </div> |
109 | 149 | </div> |
110 | 150 | </template> |
111 | 151 |
|
|
142 | 182 | labels: this.$store.state.labels.accounts, |
143 | 183 | upsell_link: ropApiSettings.upsell_link, |
144 | 184 | pro_installed: ropApiSettings.pro_installed, |
145 | | - postTimeout: '' |
| 185 | + postTimeout: '', |
| 186 | + cleanupModal: false, |
146 | 187 | } |
147 | 188 | }, |
148 | 189 | computed: { |
|
189 | 230 | }, |
190 | 231 | hasActiveAccountsLimitation: function () { |
191 | 232 | return !this.pro_installed && this.accountsCount >= 2 && this.checkLicense ; |
192 | | - } |
| 233 | + }, |
| 234 | + cleanupModalClass: function () { |
| 235 | + return { |
| 236 | + 'active': this.cleanupModal === true |
| 237 | + } |
| 238 | + }, |
193 | 239 | }, |
194 | 240 | mounted: function () { |
195 | 241 | if (0 === this.is_preloading) { |
|
228 | 274 | Vue.$log.error('Got nothing from server. Prompt user to check internet connection and try again', error) |
229 | 275 | }) |
230 | 276 | }, |
| 277 | + openCleanupModal: function() { |
| 278 | + this.cleanupModal = true; |
| 279 | + }, |
| 280 | + closeCleanupModal: function() { |
| 281 | + this.cleanupModal = false; |
| 282 | + }, |
| 283 | + cleanupAccount: function() { |
| 284 | + if (this.is_loading) { |
| 285 | + this.$log.warn('Request in progress...Bail'); |
| 286 | + return; |
| 287 | + } |
| 288 | + this.is_loading = true; |
| 289 | + this.$store.dispatch('fetchAJAXPromise', { |
| 290 | + req: 'cleanup_accounts', |
| 291 | + data: {} |
| 292 | + }).then(response => { |
| 293 | + this.is_loading = false; |
| 294 | + this.cleanupModal = false; |
| 295 | + if (this.$parent.start_status === true) { |
| 296 | + // Stop sharing process if enabled. |
| 297 | + this.$parent.togglePosting(); |
| 298 | + } |
| 299 | + }, error => { |
| 300 | + this.is_loading = false; |
| 301 | + Vue.$log.error('Got nothing from server. Prompt user to check internet connection and try again', error) |
| 302 | + }) |
| 303 | + }, |
231 | 304 | filteredAccounts: function(accounts) { |
232 | 305 | const result = {}; |
233 | 306 | const query = this.searchAccount?.toLowerCase() || ''; |
|
273 | 346 | margin-bottom: 15px; |
274 | 347 | } |
275 | 348 |
|
| 349 | + #rop_core .rop-cleanup-modal .modal-container{ |
| 350 | + max-width: 500px; |
| 351 | + padding: 25px; |
| 352 | +
|
| 353 | + .modal-title, .modal-footer{ |
| 354 | + text-align: center; |
| 355 | + } |
| 356 | + .btn-success{ |
| 357 | + border:none; |
| 358 | + background-color:#00a32a; |
| 359 | + color: #fff; |
| 360 | + padding: 0.5rem 1rem; |
| 361 | + height: auto; |
| 362 | + display: inline; |
| 363 | + } |
| 364 | + .btn-success:hover{ |
| 365 | + background-color:#009528; |
| 366 | + } |
| 367 | + .modal-body{ |
| 368 | + font-size: 0.7rem; |
| 369 | + margin: 10px 30px; |
| 370 | + padding: 0px; |
| 371 | + } |
| 372 | + } |
| 373 | +
|
276 | 374 | @media ( max-width: 600px ) { |
277 | 375 | #rop_core .panel-body .text-gray { |
278 | 376 | margin-bottom: 10px; |
|
0 commit comments