debian-mirror-gitlab/app/assets/javascripts/badges/components/badge_form.vue

238 lines
6.5 KiB
Vue
Raw Normal View History

2018-05-09 12:01:36 +05:30
<script>
2020-04-08 14:13:33 +05:30
import { escape, debounce } from 'lodash';
2018-05-09 12:01:36 +05:30
import { mapActions, mapState } from 'vuex';
2020-01-01 13:55:28 +05:30
import { GlLoadingIcon, GlFormInput, GlFormGroup } from '@gitlab/ui';
2018-05-09 12:01:36 +05:30
import createFlash from '~/flash';
import { s__, sprintf } from '~/locale';
import LoadingButton from '~/vue_shared/components/loading_button.vue';
import createEmptyBadge from '../empty_badge';
import Badge from './badge.vue';
const badgePreviewDelayInMilliseconds = 1500;
export default {
name: 'BadgeForm',
components: {
Badge,
LoadingButton,
2018-12-13 13:39:08 +05:30
GlLoadingIcon,
2020-01-01 13:55:28 +05:30
GlFormInput,
GlFormGroup,
2018-05-09 12:01:36 +05:30
},
props: {
isEditing: {
type: Boolean,
required: true,
},
},
2018-11-20 20:47:30 +05:30
data() {
return {
wasValidated: false,
};
},
2018-05-09 12:01:36 +05:30
computed: {
...mapState([
'badgeInAddForm',
'badgeInEditForm',
'docsUrl',
'isRendering',
'isSaving',
'renderedBadge',
]),
badge() {
if (this.isEditing) {
return this.badgeInEditForm;
}
return this.badgeInAddForm;
},
helpText() {
const placeholders = ['project_path', 'project_id', 'default_branch', 'commit_sha']
.map(placeholder => `<code>%{${placeholder}}</code>`)
.join(', ');
return sprintf(
s__('Badges|The %{docsLinkStart}variables%{docsLinkEnd} GitLab supports: %{placeholders}'),
{
docsLinkEnd: '</a>',
2020-04-08 14:13:33 +05:30
docsLinkStart: `<a href="${escape(this.docsUrl)}">`,
2018-05-09 12:01:36 +05:30
placeholders,
},
false,
);
},
renderedImageUrl() {
return this.renderedBadge ? this.renderedBadge.renderedImageUrl : '';
},
renderedLinkUrl() {
return this.renderedBadge ? this.renderedBadge.renderedLinkUrl : '';
},
2020-01-01 13:55:28 +05:30
name: {
get() {
return this.badge ? this.badge.name : '';
},
set(name) {
const badge = this.badge || createEmptyBadge();
this.updateBadgeInForm({
...badge,
name,
});
},
},
2018-05-09 12:01:36 +05:30
imageUrl: {
get() {
return this.badge ? this.badge.imageUrl : '';
},
set(imageUrl) {
const badge = this.badge || createEmptyBadge();
this.updateBadgeInForm({
...badge,
imageUrl,
});
},
},
linkUrl: {
get() {
return this.badge ? this.badge.linkUrl : '';
},
set(linkUrl) {
const badge = this.badge || createEmptyBadge();
this.updateBadgeInForm({
...badge,
linkUrl,
});
},
},
2018-11-20 20:47:30 +05:30
badgeImageUrlExample() {
const exampleUrl =
2019-07-07 11:18:12 +05:30
'https://example.gitlab.com/%{project_path}/badges/%{default_branch}/pipeline.svg';
2018-11-20 20:47:30 +05:30
return sprintf(s__('Badges|e.g. %{exampleUrl}'), {
exampleUrl,
});
},
badgeLinkUrlExample() {
const exampleUrl = 'https://example.gitlab.com/%{project_path}';
return sprintf(s__('Badges|e.g. %{exampleUrl}'), {
exampleUrl,
});
2018-05-09 12:01:36 +05:30
},
},
methods: {
...mapActions(['addBadge', 'renderBadge', 'saveBadge', 'stopEditing', 'updateBadgeInForm']),
2020-04-08 14:13:33 +05:30
debouncedPreview: debounce(function preview() {
2018-05-09 12:01:36 +05:30
this.renderBadge();
}, badgePreviewDelayInMilliseconds),
onCancel() {
this.stopEditing();
},
onSubmit() {
2018-11-20 20:47:30 +05:30
const form = this.$el;
if (!form.checkValidity()) {
this.wasValidated = true;
2018-05-09 12:01:36 +05:30
return Promise.resolve();
}
if (this.isEditing) {
return this.saveBadge()
.then(() => {
createFlash(s__('Badges|The badge was saved.'), 'notice');
2018-11-20 20:47:30 +05:30
this.wasValidated = false;
2018-05-09 12:01:36 +05:30
})
.catch(error => {
createFlash(
s__('Badges|Saving the badge failed, please check the entered URLs and try again.'),
);
throw error;
});
}
return this.addBadge()
.then(() => {
createFlash(s__('Badges|A new badge was added.'), 'notice');
2018-11-20 20:47:30 +05:30
this.wasValidated = false;
2018-05-09 12:01:36 +05:30
})
.catch(error => {
createFlash(
s__('Badges|Adding the badge failed, please check the entered URLs and try again.'),
);
throw error;
});
},
},
};
</script>
<template>
<form
2018-11-20 20:47:30 +05:30
:class="{ 'was-validated': wasValidated }"
class="prepend-top-default append-bottom-default needs-validation"
novalidate
2018-05-09 12:01:36 +05:30
@submit.prevent.stop="onSubmit"
>
2020-01-01 13:55:28 +05:30
<gl-form-group :label="s__('Badges|Name')" label-for="badge-name">
<gl-form-input id="badge-name" v-model="name" />
</gl-form-group>
2018-05-09 12:01:36 +05:30
<div class="form-group">
2019-02-15 15:39:39 +05:30
<label for="badge-link-url" class="label-bold">{{ s__('Badges|Link') }}</label>
2018-11-20 20:47:30 +05:30
<p v-html="helpText"></p>
2018-05-09 12:01:36 +05:30
<input
id="badge-link-url"
v-model="linkUrl"
2018-11-20 20:47:30 +05:30
type="URL"
2018-11-08 19:23:39 +05:30
class="form-control"
2018-11-20 20:47:30 +05:30
required
2018-05-09 12:01:36 +05:30
@input="debouncedPreview"
/>
2019-02-15 15:39:39 +05:30
<div class="invalid-feedback">{{ s__('Badges|Please fill in a valid URL') }}</div>
<span class="form-text text-muted"> {{ badgeLinkUrlExample }} </span>
2018-05-09 12:01:36 +05:30
</div>
<div class="form-group">
2019-02-15 15:39:39 +05:30
<label for="badge-image-url" class="label-bold">{{ s__('Badges|Badge image URL') }}</label>
2018-11-20 20:47:30 +05:30
<p v-html="helpText"></p>
2018-05-09 12:01:36 +05:30
<input
id="badge-image-url"
v-model="imageUrl"
2018-11-20 20:47:30 +05:30
type="URL"
2018-11-08 19:23:39 +05:30
class="form-control"
2018-11-20 20:47:30 +05:30
required
2018-05-09 12:01:36 +05:30
@input="debouncedPreview"
/>
2019-02-15 15:39:39 +05:30
<div class="invalid-feedback">{{ s__('Badges|Please fill in a valid URL') }}</div>
<span class="form-text text-muted"> {{ badgeImageUrlExample }} </span>
2018-05-09 12:01:36 +05:30
</div>
<div class="form-group">
<label for="badge-preview">{{ s__('Badges|Badge image preview') }}</label>
<badge
v-show="renderedBadge && !isRendering"
2018-11-08 19:23:39 +05:30
id="badge-preview"
2018-05-09 12:01:36 +05:30
:image-url="renderedImageUrl"
:link-url="renderedLinkUrl"
/>
2019-02-15 15:39:39 +05:30
<p v-show="isRendering"><gl-loading-icon :inline="true" /></p>
<p v-show="!renderedBadge && !isRendering" class="disabled-content">
{{ s__('Badges|No image to preview') }}
2018-05-09 12:01:36 +05:30
</p>
</div>
2019-02-15 15:39:39 +05:30
<div v-if="isEditing" class="row-content-block">
2018-05-09 12:01:36 +05:30
<loading-button
:loading="isSaving"
2018-11-20 20:47:30 +05:30
:label="s__('Badges|Save changes')"
2018-11-08 19:23:39 +05:30
type="submit"
container-class="btn btn-success"
2018-05-09 12:01:36 +05:30
/>
2019-02-15 15:39:39 +05:30
<button class="btn btn-cancel" type="button" @click="onCancel">{{ __('Cancel') }}</button>
2018-05-09 12:01:36 +05:30
</div>
2019-02-15 15:39:39 +05:30
<div v-else class="form-group">
2018-11-20 20:47:30 +05:30
<loading-button
:loading="isSaving"
:label="s__('Badges|Add badge')"
type="submit"
container-class="btn btn-success"
/>
</div>
2018-05-09 12:01:36 +05:30
</form>
</template>