Initial version of main component, Vuex store and service of issue discussions refactor.
This commit is contained in:
parent
4b87ecd37d
commit
0273b1188b
5 changed files with 95 additions and 8 deletions
37
app/assets/javascripts/notes/components/issue_notes.vue
Normal file
37
app/assets/javascripts/notes/components/issue_notes.vue
Normal file
|
@ -0,0 +1,37 @@
|
|||
<script>
|
||||
import Vue from 'vue';
|
||||
import Vuex from 'vuex';
|
||||
import storeOptions from '../stores/issue_notes_store';
|
||||
|
||||
Vue.use(Vuex);
|
||||
const store = new Vuex.Store(storeOptions);
|
||||
|
||||
export default {
|
||||
name: 'IssueNotes',
|
||||
store,
|
||||
data() {
|
||||
return {
|
||||
isLoading: true,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
const path = this.$el.parentNode.dataset.discussionsPath;
|
||||
this.$store.dispatch('fetchNotes', path)
|
||||
.finally(() => {
|
||||
this.isLoading = false;
|
||||
});
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div id="notes">
|
||||
<div
|
||||
v-if="isLoading"
|
||||
class="loading">
|
||||
<i
|
||||
aria-hidden="true"
|
||||
class="fa fa-spinner fa-spin" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
|
@ -1,8 +1,10 @@
|
|||
import Vue from 'vue';
|
||||
import Vuex from 'vuex';
|
||||
import IssueNotes from './components/issue_notes.vue';
|
||||
|
||||
Vue.use(Vuex);
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// instantiate Vue here...
|
||||
});
|
||||
document.addEventListener('DOMContentLoaded', () => new Vue({
|
||||
el: '#js-notes',
|
||||
components: { IssueNotes },
|
||||
template: `
|
||||
<issue-notes />
|
||||
`,
|
||||
}));
|
||||
|
|
10
app/assets/javascripts/notes/services/issue_notes_service.js
Normal file
10
app/assets/javascripts/notes/services/issue_notes_service.js
Normal file
|
@ -0,0 +1,10 @@
|
|||
import Vue from 'vue';
|
||||
import VueResource from 'vue-resource';
|
||||
|
||||
Vue.use(VueResource);
|
||||
|
||||
export default {
|
||||
fetchNotes(endpoint) {
|
||||
return Vue.http.get(endpoint);
|
||||
},
|
||||
};
|
37
app/assets/javascripts/notes/stores/issue_notes_store.js
Normal file
37
app/assets/javascripts/notes/stores/issue_notes_store.js
Normal file
|
@ -0,0 +1,37 @@
|
|||
/* global Flash */
|
||||
/* eslint-disable no-param-reassign */
|
||||
|
||||
import service from '../services/issue_notes_service';
|
||||
|
||||
const state = {
|
||||
notes: [],
|
||||
};
|
||||
|
||||
const getters = {};
|
||||
|
||||
const mutations = {
|
||||
setNotes(vmState, notes) {
|
||||
vmState.notes = notes;
|
||||
},
|
||||
};
|
||||
|
||||
const actions = {
|
||||
fetchNotes(context, path) {
|
||||
return service
|
||||
.fetchNotes(path)
|
||||
.then(res => res.json())
|
||||
.then((res) => {
|
||||
context.commit('setNotes', res);
|
||||
})
|
||||
.catch(() => {
|
||||
new Flash('Something went while fetching issue comments. Please try again.'); // eslint-disable-line
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
state,
|
||||
getters,
|
||||
mutations,
|
||||
actions,
|
||||
};
|
|
@ -3,10 +3,11 @@
|
|||
= link_to 'Reopen issue', issue_path(@issue, issue: {state_event: :reopen}, format: 'json'), data: {original_text: "Reopen issue", alternative_text: "Comment & reopen issue"}, class: "btn btn-nr btn-reopen btn-comment js-note-target-reopen #{issue_button_visibility(@issue, false)}", title: 'Reopen issue'
|
||||
= link_to 'Close issue', issue_path(@issue, issue: {state_event: :close}, format: 'json'), data: {original_text: "Close issue", alternative_text: "Comment & close issue"}, class: "btn btn-nr btn-close btn-comment js-note-target-close #{issue_button_visibility(@issue, true)}", title: 'Close issue'
|
||||
|
||||
#js-notes
|
||||
%section{ data: { discussions_path: discussions_namespace_project_issue_path(@project.namespace, @project, @issue, format: :json) } }
|
||||
#js-notes
|
||||
- content_for :page_specific_javascripts do
|
||||
= webpack_bundle_tag 'common_vue'
|
||||
= webpack_bundle_tag 'notes'
|
||||
|
||||
#notes{ data: { discussions_path: discussions_namespace_project_issue_path(@project.namespace, @project, @issue, format: :json) } }
|
||||
#notes
|
||||
= render 'shared/notes/notes_with_form', :autocomplete => true
|
||||
|
|
Loading…
Reference in a new issue