diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-09-19 01:45:44 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-09-19 01:45:44 +0000 |
commit | 85dc423f7090da0a52c73eb66faf22ddb20efff9 (patch) | |
tree | 9160f299afd8c80c038f08e1545be119f5e3f1e1 /app/assets/javascripts/issuable_create | |
parent | 15c2c8c66dbe422588e5411eee7e68f1fa440bb8 (diff) | |
download | gitlab-ce-85dc423f7090da0a52c73eb66faf22ddb20efff9.tar.gz |
Add latest changes from gitlab-org/gitlab@13-4-stable-ee
Diffstat (limited to 'app/assets/javascripts/issuable_create')
-rw-r--r-- | app/assets/javascripts/issuable_create/components/issuable_create_root.vue | 44 | ||||
-rw-r--r-- | app/assets/javascripts/issuable_create/components/issuable_form.vue | 127 |
2 files changed, 171 insertions, 0 deletions
diff --git a/app/assets/javascripts/issuable_create/components/issuable_create_root.vue b/app/assets/javascripts/issuable_create/components/issuable_create_root.vue new file mode 100644 index 00000000000..1ef42976032 --- /dev/null +++ b/app/assets/javascripts/issuable_create/components/issuable_create_root.vue @@ -0,0 +1,44 @@ +<script> +import IssuableForm from './issuable_form.vue'; + +export default { + components: { + IssuableForm, + }, + props: { + descriptionPreviewPath: { + type: String, + required: true, + }, + descriptionHelpPath: { + type: String, + required: true, + }, + labelsFetchPath: { + type: String, + required: true, + }, + labelsManagePath: { + type: String, + required: true, + }, + }, +}; +</script> + +<template> + <div class="issuable-create-container"> + <slot name="title"></slot> + <hr /> + <issuable-form + :description-preview-path="descriptionPreviewPath" + :description-help-path="descriptionHelpPath" + :labels-fetch-path="labelsFetchPath" + :labels-manage-path="labelsManagePath" + > + <template #actions="issuableMeta"> + <slot name="actions" v-bind="issuableMeta"></slot> + </template> + </issuable-form> + </div> +</template> diff --git a/app/assets/javascripts/issuable_create/components/issuable_form.vue b/app/assets/javascripts/issuable_create/components/issuable_form.vue new file mode 100644 index 00000000000..17e51b3dbac --- /dev/null +++ b/app/assets/javascripts/issuable_create/components/issuable_form.vue @@ -0,0 +1,127 @@ +<script> +import { GlForm, GlFormInput } from '@gitlab/ui'; +import MarkdownField from '~/vue_shared/components/markdown/field.vue'; +import LabelsSelect from '~/vue_shared/components/sidebar/labels_select_vue/labels_select_root.vue'; + +import { DropdownVariant } from '~/vue_shared/components/sidebar/labels_select_vue/constants'; + +export default { + LabelSelectVariant: DropdownVariant, + components: { + GlForm, + GlFormInput, + MarkdownField, + LabelsSelect, + }, + props: { + descriptionPreviewPath: { + type: String, + required: true, + }, + descriptionHelpPath: { + type: String, + required: true, + }, + labelsFetchPath: { + type: String, + required: true, + }, + labelsManagePath: { + type: String, + required: true, + }, + }, + data() { + return { + issuableTitle: '', + issuableDescription: '', + selectedLabels: [], + }; + }, + methods: { + handleUpdateSelectedLabels(labels) { + if (labels.length) { + this.selectedLabels = labels; + } + }, + }, +}; +</script> + +<template> + <gl-form class="common-note-form gfm-form" @submit.stop.prevent> + <div data-testid="issuable-title" class="form-group row"> + <label for="issuable-title" class="col-form-label col-sm-2">{{ __('Title') }}</label> + <div class="col-sm-10"> + <gl-form-input + id="issuable-title" + v-model="issuableTitle" + :autofocus="true" + :placeholder="__('Title')" + /> + </div> + </div> + <div data-testid="issuable-description" class="form-group row"> + <label for="issuable-description" class="col-form-label col-sm-2">{{ + __('Description') + }}</label> + <div class="col-sm-10"> + <markdown-field + :markdown-preview-path="descriptionPreviewPath" + :markdown-docs-path="descriptionHelpPath" + :add-spacing-classes="false" + :show-suggest-popover="true" + > + <textarea + id="issuable-description" + ref="textarea" + slot="textarea" + v-model="issuableDescription" + dir="auto" + class="note-textarea qa-issuable-form-description rspec-issuable-form-description js-gfm-input js-autosize markdown-area" + :aria-label="__('Description')" + :placeholder="__('Write a comment or drag your files hereā¦')" + ></textarea> + </markdown-field> + </div> + </div> + <div class="row"> + <div class="col-lg-6"> + <div data-testid="issuable-labels" class="form-group row"> + <label for="issuable-labels" class="col-form-label col-md-2 col-lg-4">{{ + __('Labels') + }}</label> + <div class="col-md-8 col-sm-10"> + <div class="issuable-form-select-holder"> + <labels-select + :allow-label-edit="true" + :allow-label-create="true" + :allow-multiselect="true" + :allow-scoped-labels="true" + :labels-fetch-path="labelsFetchPath" + :labels-manage-path="labelsManagePath" + :selected-labels="selectedLabels" + :labels-list-title="__('Select label')" + :footer-create-label-title="__('Create project label')" + :footer-manage-label-title="__('Manage project labels')" + :variant="$options.LabelSelectVariant.Embedded" + @updateSelectedLabels="handleUpdateSelectedLabels" + /> + </div> + </div> + </div> + </div> + </div> + <div + data-testid="issuable-create-actions" + class="footer-block row-content-block gl-display-flex" + > + <slot + name="actions" + :issuable-title="issuableTitle" + :issuable-description="issuableDescription" + :selected-labels="selectedLabels" + ></slot> + </div> + </gl-form> +</template> |