index.vue 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
  1. <template>
  2. <pw-section class="green" icon="history" :label="$t('environments')" ref="environments" no-legend>
  3. <div class="show-on-large-screen">
  4. <span class="select-wrapper">
  5. <select
  6. v-model="selectedEnvironmentIndex"
  7. :disabled="environments.length == 0"
  8. class="rounded-t-lg"
  9. >
  10. <option :value="-1">No environment</option>
  11. <option v-if="environments.length === 0" value="0">
  12. {{ $t("create_new_environment") }}
  13. </option>
  14. <option v-for="(environment, index) in environments" :value="index" :key="index">
  15. {{ environment.name }}
  16. </option>
  17. </select>
  18. </span>
  19. </div>
  20. <add-environment :show="showModalAdd" @hide-modal="displayModalAdd(false)" />
  21. <edit-environment
  22. :show="showModalEdit"
  23. :editingEnvironment="editingEnvironment"
  24. :editingEnvironmentIndex="editingEnvironmentIndex"
  25. @hide-modal="displayModalEdit(false)"
  26. />
  27. <import-export-environment
  28. :show="showModalImportExport"
  29. @hide-modal="displayModalImportExport(false)"
  30. />
  31. <div class="border-b row-wrapper border-brdColor">
  32. <div>
  33. <button class="icon" @click="displayModalAdd(true)">
  34. <i class="material-icons">add</i>
  35. <span>{{ $t("new") }}</span>
  36. </button>
  37. </div>
  38. <div>
  39. <button class="icon" @click="displayModalImportExport(true)">
  40. {{ $t("import_export") }}
  41. </button>
  42. </div>
  43. </div>
  44. <p v-if="environments.length === 0" class="info">
  45. <i class="material-icons">help_outline</i> {{ $t("create_new_environment") }}
  46. </p>
  47. <div class="virtual-list">
  48. <ul class="flex-col">
  49. <li v-for="(environment, index) in environments" :key="environment.name">
  50. <environment
  51. :environmentIndex="index"
  52. :environment="environment"
  53. @edit-environment="editEnvironment(environment, index)"
  54. />
  55. </li>
  56. </ul>
  57. </div>
  58. </pw-section>
  59. </template>
  60. <style scoped lang="scss">
  61. .virtual-list {
  62. max-height: calc(100vh - 270px);
  63. }
  64. </style>
  65. <script>
  66. import { fb } from "~/helpers/fb"
  67. export default {
  68. data() {
  69. return {
  70. showModalImportExport: false,
  71. showModalAdd: false,
  72. showModalEdit: false,
  73. editingEnvironment: undefined,
  74. editingEnvironmentIndex: undefined,
  75. selectedEnvironmentIndex: -1,
  76. defaultEnvironment: {
  77. name: "My Environment Variables",
  78. variables: [],
  79. },
  80. }
  81. },
  82. computed: {
  83. environments() {
  84. return fb.currentUser !== null
  85. ? fb.currentEnvironments
  86. : this.$store.state.postwoman.environments
  87. },
  88. },
  89. watch: {
  90. selectedEnvironmentIndex(val) {
  91. if (val === -1)
  92. this.$emit("use-environment", {
  93. environment: this.defaultEnvironment,
  94. environments: this.environments,
  95. })
  96. else
  97. this.$emit("use-environment", {
  98. environment: this.environments[val],
  99. environments: this.environments,
  100. })
  101. },
  102. environments: {
  103. handler(val) {
  104. if (val.length === 0) {
  105. this.selectedEnvironmentIndex = -1
  106. this.$emit("use-environment", {
  107. environment: this.defaultEnvironment,
  108. environments: this.environments,
  109. })
  110. } else {
  111. if (this.environments[this.selectedEnvironmentIndex])
  112. this.$emit("use-environment", {
  113. environment: this.environments[this.selectedEnvironmentIndex],
  114. environments: this.environments,
  115. })
  116. else this.selectedEnvironmentIndex = -1
  117. }
  118. },
  119. },
  120. },
  121. async mounted() {
  122. this._keyListener = function (e) {
  123. if (e.key === "Escape") {
  124. e.preventDefault()
  125. this.showModalImportExport = this.showModalAdd = this.showModalEdit = false
  126. }
  127. }
  128. document.addEventListener("keydown", this._keyListener.bind(this))
  129. },
  130. methods: {
  131. displayModalAdd(shouldDisplay) {
  132. this.showModalAdd = shouldDisplay
  133. },
  134. displayModalEdit(shouldDisplay) {
  135. this.showModalEdit = shouldDisplay
  136. if (!shouldDisplay) this.resetSelectedData()
  137. },
  138. displayModalImportExport(shouldDisplay) {
  139. this.showModalImportExport = shouldDisplay
  140. },
  141. editEnvironment(environment, environmentIndex) {
  142. this.$data.editingEnvironment = environment
  143. this.$data.editingEnvironmentIndex = environmentIndex
  144. this.displayModalEdit(true)
  145. this.syncEnvironments()
  146. },
  147. resetSelectedData() {
  148. this.$data.editingEnvironment = undefined
  149. this.$data.editingEnvironmentIndex = undefined
  150. },
  151. syncEnvironments() {
  152. if (fb.currentUser !== null && fb.currentSettings[1]) {
  153. if (fb.currentSettings[1].value) {
  154. fb.writeEnvironments(JSON.parse(JSON.stringify(this.$store.state.postwoman.environments)))
  155. }
  156. }
  157. },
  158. },
  159. beforeDestroy() {
  160. document.removeEventListener("keydown", this._keyListener)
  161. },
  162. }
  163. </script>