diff options
Diffstat (limited to 'app/assets/javascripts/projects/settings/topics/index.js')
-rw-r--r-- | app/assets/javascripts/projects/settings/topics/index.js | 51 |
1 files changed, 51 insertions, 0 deletions
diff --git a/app/assets/javascripts/projects/settings/topics/index.js b/app/assets/javascripts/projects/settings/topics/index.js new file mode 100644 index 00000000000..3fbd1a61abe --- /dev/null +++ b/app/assets/javascripts/projects/settings/topics/index.js @@ -0,0 +1,51 @@ +import Vue from 'vue'; +import VueApollo from 'vue-apollo'; +import createDefaultClient from '~/lib/graphql'; +import TopicsTokenSelector from './components/topics_token_selector.vue'; + +Vue.use(VueApollo); + +const apolloProvider = new VueApollo({ + defaultClient: createDefaultClient(), +}); + +export default () => { + const el = document.querySelector('.js-topics-selector'); + + if (!el) return null; + + const { hiddenInputId } = el.dataset; + const hiddenInput = document.getElementById(hiddenInputId); + + const selected = hiddenInput.value + ? hiddenInput.value.split(/,\s*/).map((token, index) => ({ + id: index, + name: token, + })) + : []; + + return new Vue({ + el, + apolloProvider, + render(createElement) { + return createElement(TopicsTokenSelector, { + props: { + selected, + }, + on: { + update(tokens) { + const value = tokens.map(({ name }) => name).join(', '); + hiddenInput.value = value; + // Dispatch `input` event so form submit button becomes active + hiddenInput.dispatchEvent( + new Event('input', { + bubbles: true, + cancelable: true, + }), + ); + }, + }, + }); + }, + }); +}; |