ResetAppButton.vue 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
  1. <template>
  2. <div class="text-xs-center">
  3. <v-dialog
  4. v-model="showDialog"
  5. width="600"
  6. :fullscreen="$vuetify.breakpoint.smAndDown"
  7. >
  8. <template v-slot:activator="{ on }">
  9. <v-btn small dark v-on="on">Reset app</v-btn>
  10. </template>
  11. <v-card>
  12. <v-card-title class="headline" primary-title>Reset app</v-card-title>
  13. <v-card-text>
  14. Resetting the app will purge the configuration, any cached data, progression or any other data stored client-side.<br><br>
  15. This action is not reversible.
  16. </v-card-text>
  17. <v-divider />
  18. <v-card-actions>
  19. <v-btn color="secondary" flat @click="showDialog = false">Cancel</v-btn>
  20. <v-spacer />
  21. <v-flex xs6>
  22. <v-select
  23. v-model="selectedItems"
  24. :items="items"
  25. label="Data to reset"
  26. multiple
  27. item-text="text"
  28. item-value="value"
  29. return-object
  30. single-line
  31. chips
  32. deletable-chips
  33. >
  34. <template v-slot:prepend-item>
  35. <v-list-tile ripple @click="toggle">
  36. <v-list-tile-action>
  37. <v-icon :color="selectedItems.length > 0 ? 'indigo darken-4' : ''">{{ icon }}</v-icon>
  38. </v-list-tile-action>
  39. <v-list-tile-content>
  40. <v-list-tile-title>Reset All</v-list-tile-title>
  41. </v-list-tile-content>
  42. </v-list-tile>
  43. <v-divider class="mt-2" />
  44. </template>
  45. </v-select>
  46. </v-flex>
  47. <v-btn color="primary" flat @click="reset" :disabled="!(selectedItems.length > 0)">Reset</v-btn>
  48. </v-card-actions>
  49. </v-card>
  50. </v-dialog>
  51. <toast-message ref="toast" />
  52. </div>
  53. </template>
  54. <script>
  55. import { mapActions } from 'vuex'
  56. import ToastMessage from '@/components/ToastMessage.vue'
  57. export default {
  58. name: 'ResetAppButton',
  59. components: {
  60. ToastMessage
  61. },
  62. data() {
  63. return {
  64. showDialog: false,
  65. selectedItems: [],
  66. items: [
  67. { text: 'Host configuration', value: 'hostConfig' },
  68. { text: 'Progression', value: 'progression' }
  69. ]
  70. }
  71. },
  72. computed: {
  73. selectAll() {
  74. return this.selectedItems.length === this.items.length
  75. },
  76. selectSome() {
  77. return this.selectedItems.length > 0 && !this.selectAll
  78. },
  79. icon() {
  80. if (this.selectAll) return 'mdi-close-box'
  81. if (this.selectSome) return 'mdi-minus-box'
  82. return 'mdi-checkbox-blank-outline'
  83. }
  84. },
  85. methods: {
  86. toggle() {
  87. this.$nextTick(() => {
  88. if (this.selectAll) {
  89. this.selectedItems = []
  90. }
  91. else {
  92. this.selectedItems = this.items.slice()
  93. }
  94. })
  95. },
  96. ...mapActions(['resetApp']),
  97. reset() {
  98. const toReset = this.selectedItems.reduce((acc, x) => {
  99. acc[x.value] = true
  100. return acc
  101. }, {})
  102. try {
  103. this.resetApp(toReset)
  104. this.$refs.toast.show('Successfully reseted requested data')
  105. this.showDialog = false
  106. }
  107. catch (err) {
  108. this.$refs.toast.show(err.message, 'error', 10000)
  109. }
  110. this.$router.push('/')
  111. }
  112. }
  113. }
  114. </script>