CollectionComponent.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370
  1. <template>
  2. <div class="w-100 h-100">
  3. <div v-if="!loaded" style="height: 80vh;" class="d-flex justify-content-center align-items-center">
  4. <img src="/img/pixelfed-icon-grey.svg" class="">
  5. </div>
  6. <div class="row mt-3" v-if="loaded">
  7. <div class="col-12 p-0 mb-3">
  8. <picture class="d-flex align-items-center justify-content-center">
  9. <div class="dims"></div>
  10. <div style="z-index:500;position: absolute;" class="text-white">
  11. <p class="display-4 text-center pt-3">{{title || 'Untitled Collection'}}</p>
  12. <p class="lead text-center mb-3">{{description}}</p>
  13. <p class="text-center">
  14. {{posts.length}} photos · by <a :href="'/' + profileUsername" class="font-weight-bold text-white">{{profileUsername}}</a>
  15. </p>
  16. <p v-if="owner == true" class="pt-3 text-center">
  17. <span>
  18. <button class="btn btn-outline-light btn-sm" @click.prevent="addToCollection" onclick="this.blur();">
  19. <span v-if="loadingPostList == false">Add Photo</span>
  20. <span v-else class="px-4">
  21. <div class="spinner-border spinner-border-sm" role="status">
  22. <span class="sr-only">Loading...</span>
  23. </div>
  24. </span>
  25. </button>
  26. &nbsp; &nbsp;
  27. <button class="btn btn-outline-light btn-sm" @click.prevent="editCollection" onclick="this.blur();">Edit</button>
  28. &nbsp; &nbsp;
  29. <button class="btn btn-outline-light btn-sm" @click.prevent="deleteCollection">Delete</button>
  30. </span>
  31. </p>
  32. </div>
  33. <img :src="previewUrl(posts[0])"
  34. alt=""
  35. style="width:100%; height: 600px; object-fit: cover;"
  36. >
  37. </picture>
  38. </div>
  39. <div class="col-12 p-0">
  40. <masonry
  41. :cols="{default: 2, 700: 2, 400: 1}"
  42. :gutter="{default: '5px'}"
  43. >
  44. <div v-for="(s, index) in posts">
  45. <a class="card info-overlay card-md-border-0 mb-1" :href="s.url">
  46. <img :src="previewUrl(s)" class="img-fluid w-100">
  47. </a>
  48. </div>
  49. </masonry>
  50. </div>
  51. </div>
  52. <b-modal ref="editModal" id="edit-modal" hide-footer centered title="Edit Collection" body-class="">
  53. <form>
  54. <div class="form-group">
  55. <label for="title" class="font-weight-bold text-muted">Title</label>
  56. <input type="text" class="form-control" id="title" placeholder="Untitled Collection" v-model="title">
  57. </div>
  58. <div class="form-group">
  59. <label for="description" class="font-weight-bold text-muted">Description</label>
  60. <textarea class="form-control" id="description" placeholder="Add a description here ..." v-model="description" rows="3"></textarea>
  61. </div>
  62. <div class="form-group">
  63. <label for="visibility" class="font-weight-bold text-muted">Visibility</label>
  64. <select class="custom-select" v-model="visibility">
  65. <option value="public">Public</option>
  66. <option value="private">Followers Only</option>
  67. </select>
  68. </div>
  69. <div class="d-flex justify-content-between align-items-center pt-3">
  70. <a class="text-primary font-weight-bold text-decoration-none" href="#" @click.prevent="showEditPhotosModal">Edit Photos</a>
  71. <button type="button" class="btn btn-primary btn-sm py-1 font-weight-bold px-3 float-right" @click.prevent="updateCollection">Save</button>
  72. </div>
  73. </form>
  74. </b-modal>
  75. <b-modal ref="addPhotoModal" id="add-photo-modal" hide-footer centered title="Add Photo" body-class="m-3">
  76. <div class="form-group">
  77. <label for="title" class="font-weight-bold text-muted">Add Recent Post</label>
  78. <div class="row m-1" v-if="postsList.length > 0">
  79. <div v-for="(p, index) in postsList" :key="'postList-'+index" class="col-4 p-1 cursor-pointer" @click="addRecentId(p)">
  80. <div class="square">
  81. <div class="square-content" v-bind:style="'background-image: url(' + p.media_attachments[0].url + ');'"></div>
  82. </div>
  83. </div>
  84. <div class="col-12">
  85. <hr>
  86. </div>
  87. </div>
  88. </div>
  89. <form>
  90. <div class="form-group">
  91. <label for="title" class="font-weight-bold text-muted">Add Post by URL</label>
  92. <input type="text" class="form-control" placeholder="https://pixelfed.dev/p/admin/1" v-model="photoId">
  93. <p class="help-text small text-muted">Only local, public posts can be added</p>
  94. </div>
  95. <button type="button" class="btn btn-primary btn-sm py-1 font-weight-bold px-3 float-right" @click.prevent="pushId">
  96. <span v-if="addingPostToCollection" class="px-4">
  97. <div class="spinner-border spinner-border-sm" role="status">
  98. <span class="sr-only">Loading...</span>
  99. </div>
  100. </span>
  101. <span v-else>
  102. Add Photo
  103. </span>
  104. </button>
  105. </form>
  106. </b-modal>
  107. <b-modal ref="editPhotosModal" id="edit-photos-modal" hide-footer centered title="Edit Collection Photos" body-class="m-3">
  108. <div class="form-group">
  109. <p class="font-weight-bold text-dark text-center">Select a Photo to Delete</p>
  110. <div class="row m-1 scrollbar-hidden" v-if="posts.length > 0" style="max-height: 350px;overflow-y: auto;">
  111. <div v-for="(p, index) in posts" :key="'plm-'+index" class="col-4 p-1 cursor-pointer">
  112. <div :class="[markedForDeletion.indexOf(p.id) == -1 ? 'square' : 'square delete-border']" @click="markPhotoForDeletion(p.id)">
  113. <div class="square-content" v-bind:style="'background-image: url(' + p.media_attachments[0].url + ');'"></div>
  114. </div>
  115. </div>
  116. </div>
  117. <div v-show="markedForDeletion.length > 0">
  118. <button type="button" @click.prevent="confirmDeletion" class="btn btn-primary font-weight-bold py-0 btn-block mb-0 mt-4">Delete {{markedForDeletion.length}} {{markedForDeletion.length == 1 ? 'photo':'photos'}}</button>
  119. </div>
  120. </div>
  121. </b-modal>
  122. </div>
  123. </template>
  124. <style type="text/css" scoped>
  125. .dims {
  126. position: absolute;
  127. top: 0;
  128. right: 0;
  129. bottom: 0;
  130. left: 0;
  131. background: rgba(0,0,0,.68);
  132. z-index: 300;
  133. }
  134. .scrollbar-hidden::-webkit-scrollbar {
  135. display: none;
  136. }
  137. .delete-border {
  138. border: 4px solid #ff0000;
  139. }
  140. .delete-border .square-content {
  141. background-color: red;
  142. background-blend-mode: screen;
  143. }
  144. </style>
  145. <script type="text/javascript">
  146. import VueMasonry from 'vue-masonry-css'
  147. Vue.use(VueMasonry);
  148. export default {
  149. props: [
  150. 'collection-id',
  151. 'collection-title',
  152. 'collection-description',
  153. 'collection-visibility',
  154. 'profile-id',
  155. 'profile-username'
  156. ],
  157. data() {
  158. return {
  159. config: window.App.config,
  160. loaded: false,
  161. posts: [],
  162. ids: [],
  163. currentUser: false,
  164. owner: false,
  165. title: this.collectionTitle,
  166. description: this.collectionDescription,
  167. visibility: this.collectionVisibility,
  168. photoId: '',
  169. postsList: [],
  170. loadingPostList: false,
  171. addingPostToCollection: false,
  172. markedForDeletion: []
  173. }
  174. },
  175. beforeMount() {
  176. this.fetchCurrentUser();
  177. this.fetchItems();
  178. },
  179. mounted() {
  180. },
  181. methods: {
  182. fetchCurrentUser() {
  183. if(document.querySelectorAll('body')[0].classList.contains('loggedIn') == true) {
  184. axios.get('/api/pixelfed/v1/accounts/verify_credentials').then(res => {
  185. this.currentUser = res.data;
  186. this.owner = this.currentUser.id == this.profileId;
  187. window._sharedData.curUser = res.data;
  188. window.App.util.navatar();
  189. });
  190. }
  191. },
  192. fetchItems() {
  193. axios.get('/api/local/collection/items/' + this.collectionId)
  194. .then(res => {
  195. this.posts = res.data;
  196. this.ids = this.posts.map(p => {
  197. return p.id;
  198. });
  199. this.loaded = true;
  200. });
  201. },
  202. previewUrl(status) {
  203. return status.sensitive ? '/storage/no-preview.png?v=' + new Date().getTime() : status.media_attachments[0].preview_url;
  204. },
  205. previewBackground(status) {
  206. let preview = this.previewUrl(status);
  207. return 'background-image: url(' + preview + ');';
  208. },
  209. addToCollection() {
  210. let self = this;
  211. this.loadingPostList = true;
  212. if(this.postsList.length == 0) {
  213. axios.get('/api/pixelfed/v1/accounts/'+this.profileId+'/statuses', {
  214. params: {
  215. min_id: 1,
  216. limit: 13
  217. }
  218. })
  219. .then(res => {
  220. self.postsList = res.data.filter(l => {
  221. return self.ids.indexOf(l.id) == -1;
  222. }).splice(0,9);
  223. self.loadingPostList = false;
  224. self.$refs.addPhotoModal.show();
  225. }).catch(err => {
  226. self.loadingPostList = false;
  227. swal('An Error Occured', 'We cannot process your request at this time, please try again later.', 'error');
  228. })
  229. } else {
  230. this.$refs.addPhotoModal.show();
  231. this.loadingPostList = false;
  232. }
  233. },
  234. pushId() {
  235. let max = this.config.uploader.max_collection_length;
  236. let addingPostToCollection = true;
  237. let self = this;
  238. if(this.posts.length >= max) {
  239. swal('Error', 'You can only add ' + max + ' posts per collection', 'error');
  240. return;
  241. }
  242. let url = this.photoId;
  243. let origin = window.location.origin;
  244. let split = url.split('/');
  245. if(url.slice(0, origin.length) !== origin) {
  246. swal('Invalid URL', 'You can only add posts from this instance', 'error');
  247. this.photoId = '';
  248. }
  249. if(url.slice(0, origin.length + 3) !== origin + '/p/' || split.length !== 6) {
  250. swal('Invalid URL', 'Invalid URL', 'error');
  251. this.photoId = '';
  252. }
  253. axios.post('/api/local/collection/item', {
  254. collection_id: this.collectionId,
  255. post_id: split[5]
  256. }).then(res => {
  257. self.ids.push(...split[5]);
  258. }).catch(err => {
  259. swal('Invalid URL', 'The post you entered was invalid', 'error');
  260. this.photoId = '';
  261. });
  262. self.$refs.addPhotoModal.hide();
  263. window.location.reload();
  264. },
  265. editCollection() {
  266. this.$refs.editModal.show();
  267. },
  268. deleteCollection() {
  269. if(this.owner == false) {
  270. return;
  271. }
  272. let confirmed = window.confirm('Are you sure you want to delete this collection?');
  273. if(confirmed) {
  274. axios.delete('/api/local/collection/' + this.collectionId)
  275. .then(res => {
  276. window.location.href = '/';
  277. });
  278. } else {
  279. return;
  280. }
  281. },
  282. updateCollection() {
  283. this.$refs.editModal.hide();
  284. axios.post('/api/local/collection/' + this.collectionId, {
  285. title: this.title,
  286. description: this.description,
  287. visibility: this.visibility
  288. }).then(res => {
  289. console.log(res.data);
  290. });
  291. },
  292. showEditPhotosModal() {
  293. this.$refs.editModal.hide();
  294. this.$refs.editPhotosModal.show();
  295. },
  296. markPhotoForDeletion(id) {
  297. this.markedForDeletion.indexOf(id) == -1 ?
  298. this.markedForDeletion.push(id) :
  299. this.markedForDeletion = this.markedForDeletion.filter(d => {
  300. return d != id;
  301. });
  302. },
  303. confirmDeletion() {
  304. let self = this;
  305. let confirmed = window.confirm('Are you sure you want to delete this?');
  306. if(confirmed) {
  307. this.markedForDeletion.forEach(mfd => {
  308. axios.delete('/api/local/collection/item', {
  309. params: {
  310. collection_id: self.collectionId,
  311. post_id: mfd
  312. }
  313. })
  314. .then(res => {
  315. self.removeItem(mfd);
  316. this.$refs.editPhotosModal.hide();
  317. })
  318. .catch(err => {
  319. swal(
  320. 'Oops!',
  321. 'An error occured with your request, please try again later.',
  322. 'error'
  323. );
  324. })
  325. });
  326. this.markedForDeletion = [];
  327. }
  328. },
  329. removeItem(id) {
  330. this.posts = this.posts.filter(post => {
  331. return post.id != id;
  332. });
  333. },
  334. addRecentId(post) {
  335. let self = this;
  336. axios.post('/api/local/collection/item', {
  337. collection_id: self.collectionId,
  338. post_id: post.id
  339. }).then(res => {
  340. window.location.reload();
  341. }).catch(err => {
  342. swal('Oops!', 'An error occured, please try selecting another post.', 'error');
  343. this.photoId = '';
  344. });
  345. }
  346. }
  347. }
  348. </script>