diff options
Diffstat (limited to 'app/assets/javascripts/mr_notes/index.js')
-rw-r--r-- | app/assets/javascripts/mr_notes/index.js | 51 |
1 files changed, 48 insertions, 3 deletions
diff --git a/app/assets/javascripts/mr_notes/index.js b/app/assets/javascripts/mr_notes/index.js index e3c5bf06b3d..3c0c9995cc2 100644 --- a/app/assets/javascripts/mr_notes/index.js +++ b/app/assets/javascripts/mr_notes/index.js @@ -1,20 +1,32 @@ +import $ from 'jquery'; import Vue from 'vue'; +import { mapActions, mapState, mapGetters } from 'vuex'; +import initDiffsApp from '../diffs'; import notesApp from '../notes/components/notes_app.vue'; import discussionCounter from '../notes/components/discussion_counter.vue'; -import store from '../notes/stores'; +import store from './stores'; +import MergeRequest from '../merge_request'; export default function initMrNotes() { + const mrShowNode = document.querySelector('.merge-request'); + // eslint-disable-next-line no-new + new MergeRequest({ + action: mrShowNode.dataset.mrAction, + }); + // eslint-disable-next-line no-new new Vue({ el: '#js-vue-mr-discussions', + name: 'MergeRequestDiscussions', components: { notesApp, }, + store, data() { - const notesDataset = document.getElementById('js-vue-mr-discussions') - .dataset; + const notesDataset = document.getElementById('js-vue-mr-discussions').dataset; const noteableData = JSON.parse(notesDataset.noteableData); noteableData.noteableType = notesDataset.noteableType; + noteableData.targetType = notesDataset.targetType; return { noteableData, @@ -22,12 +34,42 @@ export default function initMrNotes() { notesData: JSON.parse(notesDataset.notesData), }; }, + computed: { + ...mapGetters(['discussionTabCounter']), + ...mapState({ + activeTab: state => state.page.activeTab, + }), + }, + watch: { + discussionTabCounter() { + this.updateDiscussionTabCounter(); + }, + }, + mounted() { + this.notesCountBadge = $('.issuable-details').find('.notes-tab .badge'); + this.setActiveTab(window.mrTabs.getCurrentAction()); + + window.mrTabs.eventHub.$on('MergeRequestTabChange', tab => { + this.setActiveTab(tab); + }); + $(document).on('visibilitychange', this.updateDiscussionTabCounter); + }, + beforeDestroy() { + $(document).off('visibilitychange', this.updateDiscussionTabCounter); + }, + methods: { + ...mapActions(['setActiveTab']), + updateDiscussionTabCounter() { + this.notesCountBadge.text(this.discussionTabCounter); + }, + }, render(createElement) { return createElement('notes-app', { props: { noteableData: this.noteableData, notesData: this.notesData, userData: this.currentUserData, + shouldShow: this.activeTab === 'show', }, }); }, @@ -36,6 +78,7 @@ export default function initMrNotes() { // eslint-disable-next-line no-new new Vue({ el: '#js-vue-discussion-counter', + name: 'DiscussionCounter', components: { discussionCounter, }, @@ -44,4 +87,6 @@ export default function initMrNotes() { return createElement('discussion-counter'); }, }); + + initDiffsApp(store); } |