Commit e0b33e27 authored by Luke "Jared" Bennett's avatar Luke "Jared" Bennett

move edit button to its own view model abstract object

parent ebec3843
import $ from 'jquery'; import $ from 'jquery';
import Vue from 'vue';
import Translate from '../vue_shared/translate';
import EditButton from './repo_edit_button';
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 { initRepoViewModel } from './view_models/repo_view_model';
import { initRepoEditButtonViewModel } from './view_models/repo_edit_button_view_model';
Vue.use(Translate);
function initDropdowns() { function initDropdowns() {
$('.project-refs-target-form').hide(); $('.project-refs-target-form').hide();
...@@ -42,15 +38,14 @@ function setInitialStore(data) { ...@@ -42,15 +38,14 @@ function setInitialStore(data) {
function initRepo() { function initRepo() {
const repo = document.getElementById('repo'); const repo = document.getElementById('repo');
const editButton = document.getElementById('editable-mode');
setInitialStore(repo.dataset); setInitialStore(repo.dataset);
addEventsForNonVueEls(); addEventsForNonVueEls();
initDropdowns(); initDropdowns();
initRepoViewModel(repo); initRepoViewModel(repo);
initRepoEditButtonViewModel(editButton);
const editButton = document.getElementById('editable-mode');
Store.editButton = new EditButton(editButton);
} }
$(initRepo); $(initRepo);
......
import Vue from 'vue';
import Store from './stores/repo_store';
import RepoMixin from './mixins/repo_mixin';
import { __ } from '../locale';
export default class RepoEditButton {
constructor(el) {
this.initVue(el);
}
initVue(el) {
this.vue = new Vue({
el,
mixins: [RepoMixin],
data: () => Store,
computed: {
buttonLabel() {
return this.editMode ? __('Cancel edit') : __('Edit');
},
buttonIcon() {
return this.editMode ? [] : ['fa', 'fa-pencil'];
},
},
methods: {
editClicked() {
if (this.changedFiles.length) {
this.dialog.open = true;
return;
}
this.editMode = !this.editMode;
},
},
});
}
}
...@@ -8,7 +8,6 @@ const RepoStore = { ...@@ -8,7 +8,6 @@ const RepoStore = {
service: '', service: '',
editor: '', editor: '',
sidebar: '', sidebar: '',
editButton: '',
editMode: false, editMode: false,
isTree: false, isTree: false,
isRoot: false, isRoot: false,
......
import Vue from 'vue';
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],
data: () => Store,
computed: {
buttonLabel() {
return this.editMode ? __('Cancel edit') : __('Edit');
},
buttonIcon() {
return this.editMode ? [] : ['fa', 'fa-pencil'];
},
},
methods: {
editClicked() {
if (this.changedFiles.length) {
this.dialog.open = true;
return;
}
this.editMode = !this.editMode;
},
},
};
function initRepoEditButtonViewModel(el) {
RepoEditButton.el = el;
return new Vue(RepoEditButton);
}
export {
RepoEditButton as default,
initRepoEditButtonViewModel,
};
...@@ -8,6 +8,9 @@ import RepoMixin from '../mixins/repo_mixin'; ...@@ -8,6 +8,9 @@ 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);
const Repo = { const Repo = {
el: undefined, el: undefined,
......
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