Remove view_model adapters and make main components including convert repo_edit_button to vue template
This commit is contained in:
Luke "Jared" Bennett
parent
8c91087841
commit
03716dd38c
6 changed files with 100 additions and 99 deletions
57
app/assets/javascripts/repo/components/repo.vue
Normal file
57
app/assets/javascripts/repo/components/repo.vue
Normal file
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
};
|
||||
|
|
@ -1,3 +1,2 @@
|
|||
%a.btn.btn-default#editable-mode{ "href"=>"#", "@click.prevent" => "editClicked", "v-cloak" => 1, "v-if" => "isCommitable" }
|
||||
%i{ ":class" => "buttonIcon" }
|
||||
%span {{buttonLabel}}
|
||||
%a.btn.btn-default#editable-mode
|
||||
%repo-edit-button
|
||||
|
|
|
|||
|
|
@ -1 +1,2 @@
|
|||
#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
|
||||
|
|
|
|||
Loading…
Reference in a new issue