CollectionCompose.vue 8.7 KB

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