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

190 lines
4.2 KiB
Vue
Raw Normal View History

2020-06-23 00:09:42 +05:30
<script>
2021-10-27 15:23:28 +05:30
import {
GlFormGroup,
GlFormCheckbox,
GlFormInput,
GlFormSelect,
GlFormTextarea,
GlSafeHtmlDirective as SafeHtml,
} from '@gitlab/ui';
2021-03-11 19:13:27 +05:30
import { capitalize, lowerCase, isEmpty } from 'lodash';
import { mapGetters } from 'vuex';
2021-11-18 22:05:49 +05:30
import { VALIDATE_INTEGRATION_FORM_EVENT } from '~/integrations/constants';
2021-03-11 19:13:27 +05:30
import eventHub from '../event_hub';
2020-06-23 00:09:42 +05:30
export default {
name: 'DynamicField',
components: {
GlFormGroup,
GlFormCheckbox,
GlFormInput,
GlFormSelect,
GlFormTextarea,
},
2021-10-27 15:23:28 +05:30
directives: {
SafeHtml,
},
2020-06-23 00:09:42 +05:30
props: {
choices: {
type: Array,
required: false,
default: null,
},
help: {
type: String,
required: false,
default: null,
},
name: {
type: String,
required: true,
},
placeholder: {
type: String,
required: false,
default: null,
},
required: {
type: Boolean,
required: false,
},
title: {
type: String,
required: false,
default: null,
},
type: {
type: String,
required: true,
},
value: {
type: String,
required: false,
default: null,
},
},
data() {
return {
model: this.value,
validated: false,
};
},
computed: {
2020-07-28 23:09:34 +05:30
...mapGetters(['isInheriting']),
2020-06-23 00:09:42 +05:30
isCheckbox() {
return this.type === 'checkbox';
},
isPassword() {
return this.type === 'password';
},
isSelect() {
return this.type === 'select';
},
isTextarea() {
return this.type === 'textarea';
},
isNonEmptyPassword() {
return this.isPassword && !isEmpty(this.value);
},
humanizedTitle() {
return this.title || capitalize(lowerCase(this.name));
},
passwordRequired() {
return isEmpty(this.value) && this.required;
},
options() {
2021-03-08 18:12:59 +05:30
return this.choices.map((choice) => {
2020-06-23 00:09:42 +05:30
return {
value: choice[1],
text: choice[0],
};
});
},
fieldId() {
return `service_${this.name}`;
},
fieldName() {
return `service[${this.name}]`;
},
sharedProps() {
return {
id: this.fieldId,
name: this.fieldName,
2020-07-28 23:09:34 +05:30
state: this.valid,
readonly: this.isInheriting,
2020-06-23 00:09:42 +05:30
};
},
valid() {
2020-07-28 23:09:34 +05:30
return !this.required || !isEmpty(this.model) || this.isNonEmptyPassword || !this.validated;
2020-06-23 00:09:42 +05:30
},
},
created() {
if (this.isNonEmptyPassword) {
this.model = null;
}
2021-11-18 22:05:49 +05:30
eventHub.$on(VALIDATE_INTEGRATION_FORM_EVENT, this.validateForm);
2020-06-23 00:09:42 +05:30
},
beforeDestroy() {
2021-11-18 22:05:49 +05:30
eventHub.$off(VALIDATE_INTEGRATION_FORM_EVENT, this.validateForm);
2020-06-23 00:09:42 +05:30
},
methods: {
validateForm() {
this.validated = true;
},
},
2021-10-27 15:23:28 +05:30
helpHtmlConfig: {
ADD_ATTR: ['target'], // allow external links, can be removed after https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1427 is implemented
},
2020-06-23 00:09:42 +05:30
};
</script>
<template>
<gl-form-group
2021-04-29 21:17:54 +05:30
:label="humanizedTitle"
2020-06-23 00:09:42 +05:30
:label-for="fieldId"
:invalid-feedback="__('This field is required.')"
:state="valid"
>
2020-07-28 23:09:34 +05:30
<template #description>
2021-10-27 15:23:28 +05:30
<span v-safe-html:[$options.helpHtmlConfig]="help"></span>
2020-07-28 23:09:34 +05:30
</template>
2020-06-23 00:09:42 +05:30
<template v-if="isCheckbox">
2020-07-28 23:09:34 +05:30
<input :name="fieldName" type="hidden" :value="model || false" />
<gl-form-checkbox :id="fieldId" v-model="model" :disabled="isInheriting">
2020-06-23 00:09:42 +05:30
{{ humanizedTitle }}
</gl-form-checkbox>
</template>
2020-07-28 23:09:34 +05:30
<template v-else-if="isSelect">
<input type="hidden" :name="fieldName" :value="model" />
<gl-form-select :id="fieldId" v-model="model" :options="options" :disabled="isInheriting" />
</template>
2020-06-23 00:09:42 +05:30
<gl-form-textarea
v-else-if="isTextarea"
v-model="model"
v-bind="sharedProps"
:placeholder="placeholder"
:required="required"
/>
<gl-form-input
v-else-if="isPassword"
v-model="model"
v-bind="sharedProps"
:type="type"
autocomplete="new-password"
:placeholder="placeholder"
:required="passwordRequired"
2020-07-28 23:09:34 +05:30
:data-qa-selector="`${fieldId}_field`"
2020-06-23 00:09:42 +05:30
/>
<gl-form-input
v-else
v-model="model"
v-bind="sharedProps"
:type="type"
:placeholder="placeholder"
:required="required"
2020-07-28 23:09:34 +05:30
:data-qa-selector="`${fieldId}_field`"
2020-06-23 00:09:42 +05:30
/>
</gl-form-group>
</template>