ResetAppMenu.vue 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
  1. <template>
  2. <div class="text-xs-center">
  3. <v-dialog
  4. v-model="showDialog"
  5. width="800"
  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 xs8>
  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: 'ResetAppMenu',
  59. components: {
  60. ToastMessage
  61. },
  62. data() {
  63. return {
  64. showDialog: false,
  65. selectedItems: [],
  66. items: [
  67. { text: 'GDPR consent', value: 'gdprConsent' },
  68. { text: 'Host configuration and User/Experiment ID', value: 'hostConfig' },
  69. { text: 'Progression', value: 'progression' },
  70. { text: 'Scenes list', value: 'scenesList' }
  71. ]
  72. }
  73. },
  74. computed: {
  75. selectAll() {
  76. return this.selectedItems.length === this.items.length
  77. },
  78. selectSome() {
  79. return this.selectedItems.length > 0 && !this.selectAll
  80. },
  81. icon() {
  82. if (this.selectAll) return 'mdi-close-box'
  83. if (this.selectSome) return 'mdi-minus-box'
  84. return 'mdi-checkbox-blank-outline'
  85. }
  86. },
  87. methods: {
  88. ...mapActions(['resetApp']),
  89. show() {
  90. this.showDialog = true
  91. },
  92. toggle() {
  93. this.$nextTick(() => {
  94. if (this.selectAll) {
  95. this.selectedItems = []
  96. }
  97. else {
  98. this.selectedItems = this.items.slice()
  99. }
  100. })
  101. },
  102. reset() {
  103. const toReset = this.selectedItems.reduce((acc, x) => {
  104. acc[x.value] = true
  105. return acc
  106. }, {})
  107. try {
  108. this.resetApp(toReset)
  109. this.$refs.toast.show('Successfully reseted requested data')
  110. this.showDialog = false
  111. }
  112. catch (err) {
  113. console.error('Failed to reset the app', err)
  114. this.$refs.toast.show('Failed to reset the app. ' + err.message, 'error', 10000)
  115. }
  116. this.$router.push('/')
  117. }
  118. }
  119. }
  120. </script>