CollectionCompose.vue 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264
  1. <template>
  2. <div class="container">
  3. <div v-if="loaded" class="row">
  4. <div class="col-12 col-md-6 offset-md-3 pt-5">
  5. <div class="text-center pb-4">
  6. <h1>Create Collection</h1>
  7. </div>
  8. </div>
  9. <div class="col-12 col-md-4 pt-3">
  10. <div class="card rounded-0 shadow-none border " style="min-height: 440px;">
  11. <div class="card-body">
  12. <div>
  13. <form>
  14. <div class="form-group">
  15. <label for="title" class="font-weight-bold text-muted">Title</label>
  16. <input type="text" class="form-control" id="title" placeholder="Collection Title" v-model="collection.title">
  17. </div>
  18. <div class="form-group">
  19. <label for="description" class="font-weight-bold text-muted">Description</label>
  20. <textarea class="form-control" id="description" placeholder="Example description here" v-model="collection.description" rows="3">
  21. </textarea>
  22. </div>
  23. <div class="form-group">
  24. <label for="visibility" class="font-weight-bold text-muted">Visibility</label>
  25. <select class="custom-select" v-model="collection.visibility">
  26. <option value="public">Public</option>
  27. <option value="private">Followers Only</option>
  28. </select>
  29. </div>
  30. </form>
  31. <hr>
  32. <p>
  33. <button v-if="posts.length > 0" type="button" class="btn btn-primary font-weight-bold btn-block" @click="publish">Publish</button>
  34. <button v-else type="button" class="btn btn-primary font-weight-bold btn-block disabled" disabled>Publish</button>
  35. </p>
  36. <p>
  37. <button type="button" class="btn btn-outline-primary font-weight-bold btn-block" @click="save">Save</button>
  38. </p>
  39. <p class="mb-0">
  40. <button type="button" class="btn btn-outline-secondary font-weight-bold btn-block" @click="deleteCollection">Delete</button>
  41. </p>
  42. </div>
  43. </div>
  44. </div>
  45. </div>
  46. <div class="col-12 col-md-8 pt-3">
  47. <div>
  48. <ul class="nav nav-tabs">
  49. <li class="nav-item">
  50. <a :class="[tab == 'add' ? 'nav-link font-weight-bold bg-white active' : 'nav-link font-weight-bold text-muted']" href="#" @click.prevent="tab = 'add'">Add Posts</a>
  51. </li>
  52. <li class="nav-item">
  53. <a :class="[tab == 'all' ? 'nav-link font-weight-bold bg-white active' : 'nav-link font-weight-bold text-muted']" href="#" @click.prevent="tab = 'all'">Preview</a>
  54. </li>
  55. </ul>
  56. </div>
  57. <div class="card rounded-0 shadow-none border border-top-0">
  58. <div class="card-body" style="height: 460px; overflow-y: auto">
  59. <div v-if="tab == 'all'" class="row">
  60. <div class="col-4 p-1" v-for="(s, index) in posts">
  61. <a class="card info-overlay card-md-border-0" :href="s.url">
  62. <div class="square">
  63. <span v-if="s.pf_type == 'photo:album'" class="float-right mr-3 post-icon"><i class="fas fa-images fa-2x"></i></span>
  64. <span v-if="s.pf_type == 'video'" class="float-right mr-3 post-icon"><i class="fas fa-video fa-2x"></i></span>
  65. <span v-if="s.pf_type == 'video:album'" class="float-right mr-3 post-icon"><i class="fas fa-film fa-2x"></i></span>
  66. <div class="square-content" v-bind:style="previewBackground(s)">
  67. </div>
  68. <div class="info-overlay-text">
  69. <h5 class="text-white m-auto font-weight-bold">
  70. <span>
  71. <span class="far fa-heart fa-lg p-2 d-flex-inline"></span>
  72. <span class="d-flex-inline">{{s.favourites_count}}</span>
  73. </span>
  74. <span>
  75. <span class="fas fa-retweet fa-lg p-2 d-flex-inline"></span>
  76. <span class="d-flex-inline">{{s.reblogs_count}}</span>
  77. </span>
  78. </h5>
  79. </div>
  80. </div>
  81. </a>
  82. </div>
  83. </div>
  84. <div v-if="tab == 'add'">
  85. <div class="form-group">
  86. <label for="title" class="font-weight-bold text-muted">Add Post by URL</label>
  87. <input type="text" class="form-control" placeholder="https://pixelfed.dev/p/admin/1" v-model="id">
  88. <p class="help-text small text-muted">Only local, public posts can be added</p>
  89. </div>
  90. <div class="form-group pt-4">
  91. <label for="title" class="font-weight-bold text-muted">Add Recent Post</label>
  92. <div>
  93. <div v-for="(s, index) in recentPosts" :class="[selectedPost == s.id ? 'box-shadow border border-warning d-inline-block m-1':'d-inline-block m-1']" @click="selectPost(s)">
  94. <div class="cursor-pointer" :style="'width: 175px; height: 175px; ' + previewBackground(s)"></div>
  95. </div>
  96. </div>
  97. </div>
  98. <hr>
  99. <button type="button" class="btn btn-primary font-weight-bold btn-block" @click="addId">Add Post</button>
  100. </div>
  101. <div v-if="tab == 'order'">
  102. </div>
  103. </div>
  104. </div>
  105. </div>
  106. </div>
  107. </div>
  108. </template>
  109. <script type="text/javascript">
  110. export default {
  111. props: ['collection-id', 'profile-id'],
  112. data() {
  113. return {
  114. loaded: false,
  115. limit: 8,
  116. step: 1,
  117. title: '',
  118. description: '',
  119. visibility: 'private',
  120. collection: {
  121. title: '',
  122. description: '',
  123. visibility: 'public'
  124. },
  125. id: '',
  126. posts: [],
  127. tab: 'add',
  128. tabs: [
  129. 'all',
  130. 'add',
  131. 'order'
  132. ],
  133. recentPosts: [],
  134. selectedPost: '',
  135. }
  136. },
  137. beforeMount() {
  138. axios.get('/api/local/collection/' + this.collectionId)
  139. .then(res => {
  140. this.collection = res.data;
  141. });
  142. },
  143. mounted() {
  144. this.fetchRecentPosts();
  145. this.fetchItems();
  146. },
  147. methods: {
  148. addToIds(id) {
  149. axios.post('/api/local/collection/item', {
  150. collection_id: this.collectionId,
  151. post_id: id
  152. }).then(res => {
  153. this.fetchItems();
  154. this.fetchRecentPosts();
  155. this.tab = 'all';
  156. this.id = '';
  157. }).catch(err => {
  158. swal('Invalid URL', 'The post you entered was invalid', 'error');
  159. this.id = '';
  160. })
  161. },
  162. fetchItems() {
  163. axios.get('/api/local/collection/items/' + this.collectionId)
  164. .then(res => {
  165. this.posts = res.data;
  166. this.loaded = true;
  167. });
  168. },
  169. addId() {
  170. let max = 18;
  171. if(this.posts.length >= max) {
  172. swal('Error', 'You can only add ' + max + ' posts per collection', 'error');
  173. return;
  174. }
  175. let url = this.id;
  176. let origin = window.location.origin;
  177. let split = url.split('/');
  178. if(url.slice(0, origin.length) !== origin) {
  179. swal('Invalid URL', 'You can only add posts from this instance', 'error');
  180. this.id = '';
  181. }
  182. if(url.slice(0, origin.length + 3) !== origin + '/p/' || split.length !== 6) {
  183. swal('Invalid URL', 'Invalid URL', 'error');
  184. this.id = '';
  185. }
  186. this.addToIds(split[5]);
  187. return;
  188. },
  189. previewUrl(status) {
  190. return status.sensitive ? '/storage/no-preview.png?v=' + new Date().getTime() : status.media_attachments[0].preview_url;
  191. },
  192. previewBackground(status) {
  193. let preview = this.previewUrl(status);
  194. return 'background-image: url(' + preview + ');background-size:cover;';
  195. },
  196. fetchRecentPosts() {
  197. axios.get('/api/local/accounts/' + this.profileId + '/statuses', {
  198. params: {
  199. only_media: true,
  200. min_id: 1,
  201. }
  202. }).then(res => {
  203. this.recentPosts = res.data.filter(s => {
  204. let ids = this.posts.map(s => {
  205. return s.id;
  206. });
  207. return s.visibility == 'public' && s.sensitive == false && ids.indexOf(s.id) == -1;
  208. }).slice(0,3);
  209. });
  210. },
  211. selectPost(status) {
  212. this.selectedPost = status.id;
  213. this.id = status.url;
  214. },
  215. publish() {
  216. if(this.posts.length == 0) {
  217. swal('Error', 'You cannot publish an empty collection');
  218. return;
  219. }
  220. axios.post('/api/local/collection/' + this.collectionId + '/publish', {
  221. title: this.collection.title,
  222. description: this.collection.description,
  223. visibility: this.collection.visibility
  224. })
  225. .then(res => {
  226. window.location.href = res.data;
  227. }).catch(err => {
  228. swal('Something went wrong', 'There was a problem with your request, please try again later.', 'error');
  229. });
  230. },
  231. save() {
  232. axios.post('/api/local/collection/' + this.collectionId, {
  233. title: this.collection.title,
  234. description: this.collection.description,
  235. visibility: this.collection.visibility
  236. })
  237. .then(res => {
  238. swal('Saved!', 'You have successfully saved this collection.', 'success');
  239. });
  240. },
  241. deleteCollection() {
  242. let confirm = window.confirm('Are you sure you want to delete this collection?');
  243. if(!confirm) {
  244. return;
  245. }
  246. axios.delete('/api/local/collection/' + this.collectionId)
  247. .then(res => {
  248. window.location.href = '/';
  249. });
  250. }
  251. }
  252. }
  253. </script>