Commit 03716dd3 authored by Luke "Jared" Bennett's avatar Luke "Jared" Bennett

Remove view_model adapters and make main components including convert...

Remove view_model adapters and make main components including convert repo_edit_button to vue template
parent 8c910878
import Vue from 'vue'; <script>
import RepoSidebar from '../components/repo_sidebar.vue'; import RepoSidebar from './repo_sidebar.vue';
import RepoCommitSection from '../components/repo_commit_section.vue'; import RepoCommitSection from './repo_commit_section.vue';
import RepoTabs from '../components/repo_tabs.vue'; import RepoTabs from './repo_tabs.vue';
import RepoFileButtons from '../components/repo_file_buttons.vue'; import RepoFileButtons from './repo_file_buttons.vue';
import RepoBinaryViewer from '../components/repo_binary_viewer.vue'; import RepoBinaryViewer from './repo_binary_viewer.vue';
import RepoMixin from '../mixins/repo_mixin'; import RepoMixin from '../mixins/repo_mixin';
import PopupDialog from '../../vue_shared/components/popup_dialog.vue'; import PopupDialog from '../../vue_shared/components/popup_dialog.vue';
import Store from '../stores/repo_store'; import Store from '../stores/repo_store';
import MonacoLoaderHelper from '../helpers/monaco_loader_helper'; import MonacoLoaderHelper from '../helpers/monaco_loader_helper';
import Translate from '../../vue_shared/translate';
Vue.use(Translate); export default {
const Repo = {
el: undefined,
data: () => Store, 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], mixins: [RepoMixin],
components: { components: {
'repo-sidebar': RepoSidebar, 'repo-sidebar': RepoSidebar,
...@@ -57,14 +33,25 @@ const Repo = { ...@@ -57,14 +33,25 @@ const Repo = {
}, },
}, },
}; };
</script>
function initRepoViewModel(el) { <template>
Repo.el = el; <div class="tree-content-holder">
<repo-sidebar/><div class="panel-right" :class="{'edit-mode': editMode}">
return new Vue(Repo); <repo-tabs/>
} <repo-file-buttons/>
<repo-editor/>
export { <repo-binary-viewer/>
Repo as default, </div>
initRepoViewModel, <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>
import Vue from 'vue'; <script>
import Store from '../stores/repo_store'; import Store from '../stores/repo_store';
import RepoMixin from '../mixins/repo_mixin'; import RepoMixin from '../mixins/repo_mixin';
import Translate from '../../vue_shared/translate';
import { __ } from '../../locale';
Vue.use(Translate); export default {
const RepoEditButton = {
el: undefined,
mixins: [RepoMixin],
data: () => Store, data: () => Store,
mixins: [RepoMixin],
computed: { computed: {
buttonLabel() { buttonLabel() {
return this.editMode ? __('Cancel edit') : __('Edit'); return this.editMode ? this.__('Cancel edit') : this.__('Edit');
}, },
buttonIcon() { buttonIcon() {
...@@ -28,15 +23,12 @@ const RepoEditButton = { ...@@ -28,15 +23,12 @@ const RepoEditButton = {
this.editMode = !this.editMode; this.editMode = !this.editMode;
}, },
}, },
};
function initRepoEditButtonViewModel(el) {
RepoEditButton.el = el;
return new Vue(RepoEditButton);
} }
</script>
export { <template>
RepoEditButton as default, <a href="#" @click.prevent="editClicked" v-cloak v-if="isCommitable">
initRepoEditButtonViewModel, <i :class="buttonIcon"></i>
}; <span>{{buttonLabel}}</span>
</a>
</template>
import $ from 'jquery'; import $ from 'jquery';
import Vue from 'vue';
import Service from './services/repo_service'; import Service from './services/repo_service';
import Store from './stores/repo_store'; import Store from './stores/repo_store';
import { initRepoViewModel } from './view_models/repo_view_model'; import Repo from './components/repo.vue';
import { initRepoEditButtonViewModel } from './view_models/repo_edit_button_view_model'; import RepoEditButton from './components/repo_edit_button.vue';
import Translate from '../vue_shared/translate';
function initDropdowns() { function initDropdowns() {
$('.project-refs-target-form').hide(); $('.project-refs-target-form').hide();
...@@ -36,7 +38,25 @@ function setInitialStore(data) { ...@@ -36,7 +38,25 @@ function setInitialStore(data) {
Store.checkIsCommitable(); 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 repo = document.getElementById('repo');
const editButton = document.getElementById('editable-mode'); const editButton = document.getElementById('editable-mode');
...@@ -44,10 +64,12 @@ function initRepo() { ...@@ -44,10 +64,12 @@ function initRepo() {
addEventsForNonVueEls(); addEventsForNonVueEls();
initDropdowns(); initDropdowns();
initRepoViewModel(repo); Vue.use(Translate);
initRepoEditButtonViewModel(editButton);
initRepo(repo);
initRepoEditButton(editButton);
} }
$(initRepo); $(initRepoBundle);
export default initRepo; export default initRepoBundle;
%a.btn.btn-default#editable-mode{ "href"=>"#", "@click.prevent" => "editClicked", "v-cloak" => 1, "v-if" => "isCommitable" } %a.btn.btn-default#editable-mode
%i{ ":class" => "buttonIcon" } %repo-edit-button
%span {{buttonLabel}}
#repo{ data: { url: content_url, project_name: project.name, refs_url: refs_project_path(project, format: :json), project_url: project_path(project), project_id: project.id, can_commit: (!!can_push_branch?(project, @ref)).to_s } } #repo{ data: { url: content_url, project_name: project.name, refs_url: refs_project_path(project, format: :json), project_url: project_path(project), project_id: project.id, can_commit: (!!can_push_branch?(project, @ref)).to_s } }
%repo
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment