{% extends "base.html" %} {% block header_script_files %} {% endblock %} {% block header %} {{ emit_tep('single_collection_page_header', collection=collection) }} {% endblock %} {% block content %}
{% endblock %} {% block modals %} {{ emit_tep('single_collection_page_modals', collection=collection) }} {% endblock %} {% block button_container %} {{ emit_tep('single_collection_page_button_container', collection=collection) }} {% endblock %} {% block script %} Vue.directive('sortable', { inserted (el, binding, vnode) { let options = binding.value; options.onUpdate = (e) => vnode.data.on.sorted(e); const sortable = Sortable.create(el, binding.value); } }) Vue.component('issue-modals', { props: ['issue', 'owner'], template: `
{{ emit_tep('single_collection_page_issue_modals', collection=collection) }}
`, methods: { toggleRead() { app.$refs.issues.$children.find(child => { return child.$vnode.key == this.issue.issue_id }).toggleRead() }, removeFromCollection() { app.$refs.issues.$children.find(child => { return child.$vnode.key == this.issue.issue_id }).removeFromCollection() }, setCover() { app.$refs.issues.$children.find(child => { return child.$vnode.key == this.issue.issue_id }).setCover() }, }, data() { return { curuser: {{ current_user.id }} } }, delimiters: ["[[","]]"] }) Vue.component('collection-modals', { props: ['collection'], template: `
{% if collection.collection_user_id == current_user.id %} {% endif %} {{ emit_tep('single_collection_page_collection_modals', collection=collection) }}
`, methods: { removeCollection() { app.removeCollection() }, editCollection() { app.editCollection() }, }, delimiters: ["[[","]]"] }) Vue.component('collection-jumbo', { props: ['collection'], template: `

[[ collection.collection_name ]]

[[ statusText ]] [[ collection.user.username ]] {{ emit_tep('single_collection_page_badge_row', collection=collection) }}
{{ emit_tep('single_collection_page_button_row', collection=collection) }}
{% if collection.collection_user_id == current_user.id %} {% endif %}
`, computed: { statusClass() { let classname = 'bg-danger'; if (this.collection.collection_public) { classname = 'bg-success'; }; return classname; }, statusText() { let text = 'Private'; if (this.collection.collection_public) { text = 'Public'; } return text; } }, delimiters: ["[[","]]"] }) Vue.component('issues', { props: ['issues'], template: `
`, methods: { handleSorted(event) { app.handleSorted(event) }, }, sortOptions: { draggable: '.js-sortable-block', handle: '.js-drag-handle', delay: 300, delayOnTouchOnly: true }, delimiters: ["[[","]]"], }) Vue.component('issue', { props: ['issue'], template: `
  • {% if collection.collection_user_id == current_user.id %}
    {% endif %}
  • `, computed: { statusClass() { let classname = 'text-danger'; if (this.issue.read_status[0].read_status) { classname = 'text-success'; } return classname; }, }, methods: { setCover() { app.setCover() }, toggleRead() { axios.put('{{ url_for('api.api_put_single_issue', issue_id='ISSUEID') }}'.replace('ISSUEID', this.issue.issue_id), { data: { read_status: !this.issue.read_status[0].read_status } }) .then(res => { if(res.data.status_code == '200') { stashrToast('Toggled Read Status', 'success'); this.issue.read_status[0].read_status = !this.issue.read_status[0].read_status } else { stashrToast(res.data.message, 'error') } }) .catch(err => console.log(err)) }, removeFromCollection() { app.removeFromCollection() }, changeModal() { app.changeModal(this.issue) } }, data() { return { hover: false } }, delimiters: ["[[","]]"], }) var app = new Vue({ el: '#app', data: { collection: [], issues: [], issue: [], }, created() { this.getCollection() this.getIssues() }, methods: { getCollection() { console.log('gettingcollection') console.log('{{ url_for('api.api_get_single_collection', collection_slug=collection_slug) }}') axios.get('{{ url_for('api.api_get_single_collection', collection_slug=collection_slug) }}') .then(res => { this.collection = res.data.results }) .catch(err => console.log(err)) }, getIssues() { axios.get('{{ url_for('api.api_get_collection_all_issues', collection_slug=collection_slug) }}', { params: { offset: this.issues.length } }) .then(res => { if(res.data.number_of_page_results > 0) { res.data.results.forEach(result => { this.issues.push(result) }) if(this.issues.length < res.data.number_of_total_results) { this.getIssues() } } this.issue = this.issues[0] }) }, changeModal(issue) { this.issue = issue }, editCollection() { new_name = document.getElementById('collection_name').value; new_public = document.getElementById('collection_public').checked; new_description = document.getElementById('collection_description').value; axios.put('{{ url_for('api.api_put_single_collection', collection_slug=collection_slug) }}', { data: { collection_name: new_name, collection_public: new_public, collection_description: new_description, } }) .then(res => { if(res.data.status_code=='200'){ stashrToast('Updated Collection', 'success') this.collection.collection_name = new_name; this.collection.collection_description = new_description; this.collection.collection_public = new_public; }else{ stashrToast(res.data.message, 'error') } }) .catch(err => console.log(err)) }, setCover() { axios.put('{{ url_for('api.api_put_single_collection', collection_slug='COLLECTIONID') }}'.replace('COLLECTIONID', this.collection.collection_id), { data: { collection_cover_image: this.issue.issue_id } }) .then(res => { if(res.data.status_code == '200') { stashrToast('Cover Image Set', 'success'); app.$refs.jumbo.collection.collection_cover_image = this.issue.issue_id; } else { stashrToast(res.data.message, 'error') } }) .catch(err => console.log(err)) }, handleSorted(event) { axios.put('{{ url_for('api.api_put_single_collection', collection_slug='COLLECTIONID') }}'.replace('COLLECTIONID', this.collection.collection_id), { data: { old_index: event.oldIndex, new_index: event.newIndex } }) .then(res => { if(res.data.status_code== '200') { stashrToast('Updated Order', 'success') } else { stashrToast(res.data.message, 'error') } }) .catch(err => console.log(err)) }, removeFromCollection() { axios.delete('{{ url_for('api.api_delete_collection_issue', collection_slug=collection_slug, issue_id='ISSUEID') }}'.replace('ISSUEID', this.issue.issue_id)) .then(res => { if(res.data.status_code == '200') { stashrToast('Removed from Collection', 'success') } else { stashrToast(res.data.message, 'error') } }) .catch(err => console.log(err)) this.issues = this.issues.filter(issue => issue.issue_id !== this.issue.issue_id) // this.issues = this.issues.filter(remove => this.remove.issue_id !== app.issue.issue_id) }, removeCollection() { console.log('removing collection') axios.delete('{{ url_for('api.api_delete_single_collection', collection_slug=collection_slug) }}') .then(res =>{ window.location.replace('{{ url_for('all_collections_page') }}') }) .catch(err => console.log(err)) }, }, delimiters: ["[[","]]"] }) {{ emit_tep('single_collection_page_script', collection=collection) }} {% endblock %}