diff options
author | Luke "Jared" Bennett <lbennett@gitlab.com> | 2017-08-03 18:20:23 +0300 |
---|---|---|
committer | Luke "Jared" Bennett <lbennett@gitlab.com> | 2017-08-03 18:20:23 +0300 |
commit | 03716dd38ccfd1399af25580329e8da887fdf5cc (patch) | |
tree | de508c6c225a95c9b868ccd6f7a91283ba907734 /app/assets | |
parent | 8c9108784146409520d86b4f7595ee8eb22c6f78 (diff) |
Remove view_model adapters and make main components including convert repo_edit_button to vue template
Diffstat (limited to 'app/assets')
-rw-r--r-- | app/assets/javascripts/repo/components/repo.vue | 57 | ||||
-rw-r--r-- | app/assets/javascripts/repo/components/repo_edit_button.vue (renamed from app/assets/javascripts/repo/view_models/repo_edit_button_view_model.js) | 30 | ||||
-rw-r--r-- | app/assets/javascripts/repo/index.js | 36 | ||||
-rw-r--r-- | app/assets/javascripts/repo/view_models/repo_view_model.js | 70 |
4 files changed, 97 insertions, 96 deletions
diff --git a/app/assets/javascripts/repo/components/repo.vue b/app/assets/javascripts/repo/components/repo.vue new file mode 100644 index 00000000000..81cdf06b3ab --- /dev/null +++ b/app/assets/javascripts/repo/components/repo.vue @@ -0,0 +1,57 @@ +<script> +import RepoSidebar from './repo_sidebar.vue'; +import RepoCommitSection from './repo_commit_section.vue'; +import RepoTabs from './repo_tabs.vue'; +import RepoFileButtons from './repo_file_buttons.vue'; +import RepoBinaryViewer from './repo_binary_viewer.vue'; +import RepoMixin from '../mixins/repo_mixin'; +import PopupDialog from '../../vue_shared/components/popup_dialog.vue'; +import Store from '../stores/repo_store'; +import MonacoLoaderHelper from '../helpers/monaco_loader_helper'; + +export default { + data: () => Store, + mixins: [RepoMixin], + components: { + 'repo-sidebar': RepoSidebar, + 'repo-tabs': RepoTabs, + 'repo-file-buttons': RepoFileButtons, + 'repo-binary-viewer': RepoBinaryViewer, + 'repo-editor': MonacoLoaderHelper.repoEditorLoader, + 'repo-commit-section': RepoCommitSection, + 'popup-dialog': PopupDialog, + }, + + methods: { + dialogToggled(toggle) { + this.dialog.open = toggle; + }, + + dialogSubmitted(status) { + this.dialog.open = false; + this.dialog.status = status; + }, + }, +}; +</script> + +<template> +<div class="tree-content-holder"> + <repo-sidebar/><div class="panel-right" :class="{'edit-mode': editMode}"> + <repo-tabs/> + <repo-file-buttons/> + <repo-editor/> + <repo-binary-viewer/> + </div> + <repo-commit-section/> + <popup-dialog + :primary-button-label="__('Discard changes')" + :open="dialog.open" + kind="warning" + :title="__('Are you sure?')" + :body="__('Are you sure you want to discard your changes?')" + @toggle="dialogToggled" + @submit="dialogSubmitted" + /> +</div> +</template> diff --git a/app/assets/javascripts/repo/view_models/repo_edit_button_view_model.js b/app/assets/javascripts/repo/components/repo_edit_button.vue index 2eecfaaac56..1e70f911a84 100644 --- a/app/assets/javascripts/repo/view_models/repo_edit_button_view_model.js +++ b/app/assets/javascripts/repo/components/repo_edit_button.vue @@ -1,18 +1,13 @@ -import Vue from 'vue'; +<script> import Store from '../stores/repo_store'; import RepoMixin from '../mixins/repo_mixin'; -import Translate from '../../vue_shared/translate'; -import { __ } from '../../locale'; -Vue.use(Translate); - -const RepoEditButton = { - el: undefined, - mixins: [RepoMixin], +export default { data: () => Store, + mixins: [RepoMixin], computed: { buttonLabel() { - return this.editMode ? __('Cancel edit') : __('Edit'); + return this.editMode ? this.__('Cancel edit') : this.__('Edit'); }, buttonIcon() { @@ -28,15 +23,12 @@ const RepoEditButton = { this.editMode = !this.editMode; }, }, -}; - -function initRepoEditButtonViewModel(el) { - RepoEditButton.el = el; - - return new Vue(RepoEditButton); } +</script> -export { - RepoEditButton as default, - initRepoEditButtonViewModel, -}; +<template> +<a href="#" @click.prevent="editClicked" v-cloak v-if="isCommitable"> + <i :class="buttonIcon"></i> + <span>{{buttonLabel}}</span> +</a> +</template> diff --git a/app/assets/javascripts/repo/index.js b/app/assets/javascripts/repo/index.js index 4a1108cca5c..feba755af2d 100644 --- a/app/assets/javascripts/repo/index.js +++ b/app/assets/javascripts/repo/index.js @@ -1,8 +1,10 @@ import $ from 'jquery'; +import Vue from 'vue'; import Service from './services/repo_service'; import Store from './stores/repo_store'; -import { initRepoViewModel } from './view_models/repo_view_model'; -import { initRepoEditButtonViewModel } from './view_models/repo_edit_button_view_model'; +import Repo from './components/repo.vue'; +import RepoEditButton from './components/repo_edit_button.vue'; +import Translate from '../vue_shared/translate'; function initDropdowns() { $('.project-refs-target-form').hide(); @@ -36,7 +38,25 @@ function setInitialStore(data) { Store.checkIsCommitable(); } -function initRepo() { +function initRepo(el) { + return new Vue({ + el, + components: { + repo: Repo, + }, + }); +} + +function initRepoEditButton(el) { + return new Vue({ + el, + components: { + repoEditButton: RepoEditButton, + }, + }); +} + +function initRepoBundle() { const repo = document.getElementById('repo'); const editButton = document.getElementById('editable-mode'); @@ -44,10 +64,12 @@ function initRepo() { addEventsForNonVueEls(); initDropdowns(); - initRepoViewModel(repo); - initRepoEditButtonViewModel(editButton); + Vue.use(Translate); + + initRepo(repo); + initRepoEditButton(editButton); } -$(initRepo); +$(initRepoBundle); -export default initRepo; +export default initRepoBundle; diff --git a/app/assets/javascripts/repo/view_models/repo_view_model.js b/app/assets/javascripts/repo/view_models/repo_view_model.js deleted file mode 100644 index 134140b30a7..00000000000 --- a/app/assets/javascripts/repo/view_models/repo_view_model.js +++ /dev/null @@ -1,70 +0,0 @@ -import Vue from 'vue'; -import RepoSidebar from '../components/repo_sidebar.vue'; -import RepoCommitSection from '../components/repo_commit_section.vue'; -import RepoTabs from '../components/repo_tabs.vue'; -import RepoFileButtons from '../components/repo_file_buttons.vue'; -import RepoBinaryViewer from '../components/repo_binary_viewer.vue'; -import RepoMixin from '../mixins/repo_mixin'; -import PopupDialog from '../../vue_shared/components/popup_dialog.vue'; -import Store from '../stores/repo_store'; -import MonacoLoaderHelper from '../helpers/monaco_loader_helper'; -import Translate from '../../vue_shared/translate'; - -Vue.use(Translate); - -const Repo = { - el: undefined, - data: () => Store, - template: ` - <div class="tree-content-holder"> - <repo-sidebar/><div class="panel-right" :class="{'edit-mode': editMode}"> - <repo-tabs/> - <repo-file-buttons/> - <repo-editor/> - <repo-binary-viewer/> - </div> - <repo-commit-section/> - <popup-dialog - :primary-button-label="__('Discard changes')" - :open="dialog.open" - kind="warning" - :title="__('Are you sure?')" - :body="__('Are you sure you want to discard your changes?')" - @toggle="dialogToggled" - @submit="dialogSubmitted" - /> - </div> - `, - mixins: [RepoMixin], - components: { - 'repo-sidebar': RepoSidebar, - 'repo-tabs': RepoTabs, - 'repo-file-buttons': RepoFileButtons, - 'repo-binary-viewer': RepoBinaryViewer, - 'repo-editor': MonacoLoaderHelper.repoEditorLoader, - 'repo-commit-section': RepoCommitSection, - 'popup-dialog': PopupDialog, - }, - - methods: { - dialogToggled(toggle) { - this.dialog.open = toggle; - }, - - dialogSubmitted(status) { - this.dialog.open = false; - this.dialog.status = status; - }, - }, -}; - -function initRepoViewModel(el) { - Repo.el = el; - - return new Vue(Repo); -} - -export { - Repo as default, - initRepoViewModel, -}; |