Collection.vue 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254
  1. <template>
  2. <div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
  3. <div
  4. class="flex items-stretch group"
  5. @dragover.prevent
  6. @drop.prevent="dropEvent"
  7. @dragover="dragging = true"
  8. @drop="dragging = false"
  9. @dragleave="dragging = false"
  10. @dragend="dragging = false"
  11. @contextmenu.prevent="$refs.options.tippy().show()"
  12. >
  13. <span
  14. class="cursor-pointer flex px-4 items-center justify-center"
  15. @click="toggleShowChildren()"
  16. >
  17. <SmartIcon
  18. class="svg-icons"
  19. :class="{ 'text-green-500': isSelected }"
  20. :name="getCollectionIcon"
  21. />
  22. </span>
  23. <span
  24. class="cursor-pointer flex flex-1 min-w-0 py-2 pr-2 transition group-hover:text-secondaryDark"
  25. @click="toggleShowChildren()"
  26. >
  27. <span class="truncate"> {{ collection.name }} </span>
  28. </span>
  29. <div class="flex">
  30. <ButtonSecondary
  31. v-if="doc && !selected"
  32. v-tippy="{ theme: 'tooltip' }"
  33. :title="$t('import.title')"
  34. svg="circle"
  35. color="green"
  36. @click.native="$emit('select-collection')"
  37. />
  38. <ButtonSecondary
  39. v-if="doc && selected"
  40. v-tippy="{ theme: 'tooltip' }"
  41. :title="$t('action.remove')"
  42. svg="check-circle"
  43. color="green"
  44. @click.native="$emit('unselect-collection')"
  45. />
  46. <ButtonSecondary
  47. v-if="!doc"
  48. v-tippy="{ theme: 'tooltip' }"
  49. svg="folder-plus"
  50. :title="$t('folder.new')"
  51. class="hidden group-hover:inline-flex"
  52. @click.native="
  53. $emit('add-folder', {
  54. folder: collection,
  55. path: `${collectionIndex}`,
  56. })
  57. "
  58. />
  59. <span>
  60. <tippy
  61. ref="options"
  62. interactive
  63. trigger="click"
  64. theme="popover"
  65. arrow
  66. >
  67. <template #trigger>
  68. <ButtonSecondary
  69. v-tippy="{ theme: 'tooltip' }"
  70. :title="$t('action.more')"
  71. svg="more-vertical"
  72. />
  73. </template>
  74. <SmartItem
  75. svg="folder-plus"
  76. :label="$t('folder.new')"
  77. @click.native="
  78. () => {
  79. $emit('add-folder', {
  80. folder: collection,
  81. path: `${collectionIndex}`,
  82. })
  83. $refs.options.tippy().hide()
  84. }
  85. "
  86. />
  87. <SmartItem
  88. svg="edit"
  89. :label="$t('action.edit')"
  90. @click.native="
  91. () => {
  92. $emit('edit-collection')
  93. $refs.options.tippy().hide()
  94. }
  95. "
  96. />
  97. <SmartItem
  98. svg="trash-2"
  99. color="red"
  100. :label="$t('action.delete')"
  101. @click.native="
  102. () => {
  103. confirmRemove = true
  104. $refs.options.tippy().hide()
  105. }
  106. "
  107. />
  108. </tippy>
  109. </span>
  110. </div>
  111. </div>
  112. <div v-if="showChildren || isFiltered" class="flex">
  113. <div
  114. class="bg-dividerLight cursor-nsResize flex ml-5.5 transform transition w-1 hover:bg-dividerDark hover:scale-x-125"
  115. @click="toggleShowChildren()"
  116. ></div>
  117. <div class="flex flex-col flex-1 truncate">
  118. <CollectionsMyFolder
  119. v-for="(folder, index) in collection.folders"
  120. :key="`folder-${index}`"
  121. :folder="folder"
  122. :folder-index="index"
  123. :folder-path="`${collectionIndex}/${index}`"
  124. :collection-index="collectionIndex"
  125. :doc="doc"
  126. :save-request="saveRequest"
  127. :collections-type="collectionsType"
  128. :is-filtered="isFiltered"
  129. :picked="picked"
  130. @add-folder="$emit('add-folder', $event)"
  131. @edit-folder="$emit('edit-folder', $event)"
  132. @edit-request="$emit('edit-request', $event)"
  133. @duplicate-request="$emit('duplicate-request', $event)"
  134. @select="$emit('select', $event)"
  135. @remove-request="$emit('remove-request', $event)"
  136. />
  137. <CollectionsMyRequest
  138. v-for="(request, index) in collection.requests"
  139. :key="`request-${index}`"
  140. :request="request"
  141. :collection-index="collectionIndex"
  142. :folder-index="-1"
  143. :folder-name="collection.name"
  144. :folder-path="`${collectionIndex}`"
  145. :request-index="index"
  146. :doc="doc"
  147. :save-request="saveRequest"
  148. :collections-type="collectionsType"
  149. :picked="picked"
  150. @edit-request="$emit('edit-request', $event)"
  151. @duplicate-request="$emit('duplicate-request', $event)"
  152. @select="$emit('select', $event)"
  153. @remove-request="$emit('remove-request', $event)"
  154. />
  155. <div
  156. v-if="
  157. (collection.folders == undefined ||
  158. collection.folders.length === 0) &&
  159. (collection.requests == undefined ||
  160. collection.requests.length === 0)
  161. "
  162. class="flex flex-col text-secondaryLight p-4 items-center justify-center"
  163. >
  164. <img
  165. :src="`/images/states/${$colorMode.value}/pack.svg`"
  166. loading="lazy"
  167. class="flex-col object-contain object-center h-16 mb-4 w-16 inline-flex"
  168. :alt="$t('empty.collection')"
  169. />
  170. <span class="text-center">
  171. {{ $t("empty.collection") }}
  172. </span>
  173. </div>
  174. </div>
  175. </div>
  176. <SmartConfirmModal
  177. :show="confirmRemove"
  178. :title="$t('confirm.remove_collection')"
  179. @hide-modal="confirmRemove = false"
  180. @resolve="removeCollection"
  181. />
  182. </div>
  183. </template>
  184. <script>
  185. import { defineComponent } from "@nuxtjs/composition-api"
  186. import { moveRESTRequest } from "~/newstore/collections"
  187. export default defineComponent({
  188. props: {
  189. collectionIndex: { type: Number, default: null },
  190. collection: { type: Object, default: () => {} },
  191. doc: Boolean,
  192. isFiltered: Boolean,
  193. selected: Boolean,
  194. saveRequest: Boolean,
  195. collectionsType: { type: Object, default: () => {} },
  196. picked: { type: Object, default: () => {} },
  197. },
  198. data() {
  199. return {
  200. showChildren: false,
  201. dragging: false,
  202. selectedFolder: {},
  203. confirmRemove: false,
  204. prevCursor: "",
  205. cursor: "",
  206. pageNo: 0,
  207. }
  208. },
  209. computed: {
  210. isSelected() {
  211. return (
  212. this.picked &&
  213. this.picked.pickedType === "my-collection" &&
  214. this.picked.collectionIndex === this.collectionIndex
  215. )
  216. },
  217. getCollectionIcon() {
  218. if (this.isSelected) return "check-circle"
  219. else if (!this.showChildren && !this.isFiltered) return "folder"
  220. else if (this.showChildren || this.isFiltered) return "folder-open"
  221. else return "folder"
  222. },
  223. },
  224. methods: {
  225. toggleShowChildren() {
  226. if (this.$props.saveRequest)
  227. this.$emit("select", {
  228. picked: {
  229. pickedType: "my-collection",
  230. collectionIndex: this.collectionIndex,
  231. },
  232. })
  233. this.$emit("expand-collection", this.collection.id)
  234. this.showChildren = !this.showChildren
  235. },
  236. removeCollection() {
  237. this.$emit("remove-collection", {
  238. collectionsType: this.collectionsType,
  239. collectionIndex: this.collectionIndex,
  240. collectionID: this.collection.id,
  241. })
  242. },
  243. dropEvent({ dataTransfer }) {
  244. this.dragging = !this.dragging
  245. const folderPath = dataTransfer.getData("folderPath")
  246. const requestIndex = dataTransfer.getData("requestIndex")
  247. moveRESTRequest(folderPath, requestIndex, `${this.collectionIndex}`)
  248. },
  249. },
  250. })
  251. </script>