debian-mirror-gitlab/app/assets/javascripts/snippets/components/edit.vue

250 lines
6.8 KiB
Vue
Raw Normal View History

2020-04-22 19:07:51 +05:30
<script>
import { GlButton, GlLoadingIcon } from '@gitlab/ui';
import Flash from '~/flash';
import { __, sprintf } from '~/locale';
import axios from '~/lib/utils/axios_utils';
import TitleField from '~/vue_shared/components/form/title.vue';
import { getBaseURL, joinPaths, redirectTo } from '~/lib/utils/url_utility';
import FormFooterActions from '~/vue_shared/components/form/form_footer_actions.vue';
import UpdateSnippetMutation from '../mutations/updateSnippet.mutation.graphql';
import CreateSnippetMutation from '../mutations/createSnippet.mutation.graphql';
import { getSnippetMixin } from '../mixins/snippets';
2020-06-23 00:09:42 +05:30
import {
SNIPPET_VISIBILITY_PRIVATE,
SNIPPET_CREATE_MUTATION_ERROR,
SNIPPET_UPDATE_MUTATION_ERROR,
} from '../constants';
2020-04-22 19:07:51 +05:30
import SnippetBlobEdit from './snippet_blob_edit.vue';
import SnippetVisibilityEdit from './snippet_visibility_edit.vue';
import SnippetDescriptionEdit from './snippet_description_edit.vue';
export default {
components: {
SnippetDescriptionEdit,
SnippetVisibilityEdit,
SnippetBlobEdit,
TitleField,
FormFooterActions,
GlButton,
GlLoadingIcon,
},
mixins: [getSnippetMixin],
props: {
markdownPreviewPath: {
type: String,
required: true,
},
markdownDocsPath: {
type: String,
required: true,
},
visibilityHelpLink: {
type: String,
default: '',
required: false,
},
projectPath: {
type: String,
default: '',
required: false,
},
},
data() {
return {
blob: {},
fileName: '',
content: '',
isContentLoading: true,
isUpdating: false,
newSnippet: false,
};
},
computed: {
updatePrevented() {
return this.snippet.title === '' || this.content === '' || this.isUpdating;
},
isProjectSnippet() {
return Boolean(this.projectPath);
},
apiData() {
return {
id: this.snippet.id,
title: this.snippet.title,
description: this.snippet.description,
visibilityLevel: this.snippet.visibilityLevel,
fileName: this.fileName,
content: this.content,
};
},
saveButtonLabel() {
if (this.newSnippet) {
return __('Create snippet');
}
return this.isUpdating ? __('Saving') : __('Save changes');
},
cancelButtonHref() {
2020-05-24 23:13:21 +05:30
if (this.newSnippet) {
return this.projectPath ? `/${this.projectPath}/snippets` : `/snippets`;
}
return this.snippet.webUrl;
2020-04-22 19:07:51 +05:30
},
titleFieldId() {
return `${this.isProjectSnippet ? 'project' : 'personal'}_snippet_title`;
},
descriptionFieldId() {
return `${this.isProjectSnippet ? 'project' : 'personal'}_snippet_description`;
},
},
methods: {
updateFileName(newName) {
this.fileName = newName;
},
flashAPIFailure(err) {
2020-06-23 00:09:42 +05:30
const defaultErrorMsg = this.newSnippet
? SNIPPET_CREATE_MUTATION_ERROR
: SNIPPET_UPDATE_MUTATION_ERROR;
Flash(sprintf(defaultErrorMsg, { err }));
this.isUpdating = false;
2020-04-22 19:07:51 +05:30
},
onNewSnippetFetched() {
this.newSnippet = true;
this.snippet = this.$options.newSnippetSchema;
this.blob = this.snippet.blob;
this.isContentLoading = false;
},
onExistingSnippetFetched() {
this.newSnippet = false;
const { blob } = this.snippet;
this.blob = blob;
this.fileName = blob.name;
const baseUrl = getBaseURL();
const url = joinPaths(baseUrl, blob.rawPath);
axios
.get(url)
.then(res => {
this.content = res.data;
this.isContentLoading = false;
})
.catch(e => this.flashAPIFailure(e));
},
onSnippetFetch(snippetRes) {
if (snippetRes.data.snippets.edges.length === 0) {
this.onNewSnippetFetched();
} else {
this.onExistingSnippetFetched();
}
},
2020-06-23 00:09:42 +05:30
getAttachedFiles() {
const fileInputs = Array.from(this.$el.querySelectorAll('[name="files[]"]'));
return fileInputs.map(node => node.value);
},
createMutation() {
return {
mutation: CreateSnippetMutation,
variables: {
input: {
...this.apiData,
uploadedFiles: this.getAttachedFiles(),
projectPath: this.projectPath,
},
},
};
},
updateMutation() {
return {
mutation: UpdateSnippetMutation,
variables: {
input: this.apiData,
},
};
},
2020-04-22 19:07:51 +05:30
handleFormSubmit() {
this.isUpdating = true;
this.$apollo
2020-06-23 00:09:42 +05:30
.mutate(this.newSnippet ? this.createMutation() : this.updateMutation())
2020-04-22 19:07:51 +05:30
.then(({ data }) => {
const baseObj = this.newSnippet ? data?.createSnippet : data?.updateSnippet;
const errors = baseObj?.errors;
if (errors.length) {
this.flashAPIFailure(errors[0]);
2020-06-23 00:09:42 +05:30
} else {
redirectTo(baseObj.snippet.webUrl);
2020-04-22 19:07:51 +05:30
}
})
.catch(e => {
this.flashAPIFailure(e);
});
},
},
newSnippetSchema: {
title: '',
description: '',
visibilityLevel: SNIPPET_VISIBILITY_PRIVATE,
blob: {},
},
};
</script>
<template>
<form
class="snippet-form js-requires-input js-quick-submit common-note-form"
:data-snippet-type="isProjectSnippet ? 'project' : 'personal'"
2020-06-23 00:09:42 +05:30
data-testid="snippet-edit-form"
@submit.prevent="handleFormSubmit"
2020-04-22 19:07:51 +05:30
>
<gl-loading-icon
v-if="isLoading"
:label="__('Loading snippet')"
size="lg"
class="loading-animation prepend-top-20 append-bottom-20"
/>
<template v-else>
2020-05-24 23:13:21 +05:30
<title-field
:id="titleFieldId"
v-model="snippet.title"
2020-06-23 00:09:42 +05:30
data-qa-selector="snippet_title_field"
2020-05-24 23:13:21 +05:30
required
:autofocus="true"
/>
2020-04-22 19:07:51 +05:30
<snippet-description-edit
:id="descriptionFieldId"
v-model="snippet.description"
:markdown-preview-path="markdownPreviewPath"
:markdown-docs-path="markdownDocsPath"
/>
<snippet-blob-edit
v-model="content"
:file-name="fileName"
:is-loading="isContentLoading"
@name-change="updateFileName"
/>
<snippet-visibility-edit
v-model="snippet.visibilityLevel"
:help-link="visibilityHelpLink"
:is-project-snippet="isProjectSnippet"
/>
<form-footer-actions>
<template #prepend>
<gl-button
category="primary"
2020-06-23 00:09:42 +05:30
type="submit"
2020-04-22 19:07:51 +05:30
variant="success"
:disabled="updatePrevented"
2020-05-24 23:13:21 +05:30
data-qa-selector="submit_button"
2020-06-23 00:09:42 +05:30
data-testid="snippet-submit-btn"
2020-04-22 19:07:51 +05:30
>{{ saveButtonLabel }}</gl-button
>
</template>
<template #append>
2020-06-23 00:09:42 +05:30
<gl-button type="cancel" data-testid="snippet-cancel-btn" :href="cancelButtonHref">{{
2020-05-24 23:13:21 +05:30
__('Cancel')
}}</gl-button>
2020-04-22 19:07:51 +05:30
</template>
</form-footer-actions>
</template>
</form>
</template>