diff options
Diffstat (limited to 'app/assets/javascripts/issuable_show')
4 files changed, 78 insertions, 11 deletions
diff --git a/app/assets/javascripts/issuable_show/components/issuable_body.vue b/app/assets/javascripts/issuable_show/components/issuable_body.vue index e6a05c1ab8b..c084f328f42 100644 --- a/app/assets/javascripts/issuable_show/components/issuable_body.vue +++ b/app/assets/javascripts/issuable_show/components/issuable_body.vue @@ -36,10 +36,18 @@ export default { type: Boolean, required: true, }, + enableAutosave: { + type: Boolean, + required: true, + }, editFormVisible: { type: Boolean, required: true, }, + showFieldTitle: { + type: Boolean, + required: true, + }, descriptionPreviewPath: { type: String, required: true, @@ -57,6 +65,14 @@ export default { return this.issuable.updatedBy; }, }, + methods: { + handleKeydownTitle(e, issuableMeta) { + this.$emit('keydown-title', e, issuableMeta); + }, + handleKeydownDescription(e, issuableMeta) { + this.$emit('keydown-description', e, issuableMeta); + }, + }, }; </script> @@ -67,8 +83,12 @@ export default { v-if="editFormVisible" :issuable="issuable" :enable-autocomplete="enableAutocomplete" + :enable-autosave="enableAutosave" + :show-field-title="showFieldTitle" :description-preview-path="descriptionPreviewPath" :description-help-path="descriptionHelpPath" + @keydown-title="handleKeydownTitle" + @keydown-description="handleKeydownDescription" > <template #edit-form-actions="issuableMeta"> <slot name="edit-form-actions" v-bind="issuableMeta"></slot> diff --git a/app/assets/javascripts/issuable_show/components/issuable_edit_form.vue b/app/assets/javascripts/issuable_show/components/issuable_edit_form.vue index 7b9a83a740f..93e4db8b99c 100644 --- a/app/assets/javascripts/issuable_show/components/issuable_edit_form.vue +++ b/app/assets/javascripts/issuable_show/components/issuable_edit_form.vue @@ -23,6 +23,14 @@ export default { type: Boolean, required: true, }, + enableAutosave: { + type: Boolean, + required: true, + }, + showFieldTitle: { + type: Boolean, + required: true, + }, descriptionPreviewPath: { type: String, required: true, @@ -33,19 +41,27 @@ export default { }, }, data() { - const { title, description } = this.issuable; - return { - title, - description, + title: '', + description: '', }; }, + watch: { + issuable: { + handler(value) { + this.title = value?.title || ''; + this.description = value?.description || ''; + }, + deep: true, + immediate: true, + }, + }, created() { eventHub.$on('update.issuable', this.resetAutosave); eventHub.$on('close.form', this.resetAutosave); }, mounted() { - this.initAutosave(); + if (this.enableAutosave) this.initAutosave(); }, beforeDestroy() { eventHub.$off('update.issuable', this.resetAutosave); @@ -73,6 +89,12 @@ export default { this.autosaveTitle.reset(); this.autosaveDescription.reset(); }, + handleKeydown(e, inputType) { + this.$emit(`keydown-${inputType}`, e, { + issuableTitle: this.title, + issuableDescription: this.description, + }); + }, }, }; </script> @@ -82,9 +104,9 @@ export default { <gl-form-group data-testid="title" :label="__('Title')" - :label-sr-only="true" + :label-sr-only="!showFieldTitle" label-for="issuable-title" - class="col-12" + class="col-12 gl-px-0" > <gl-form-input id="issuable-title" @@ -94,14 +116,16 @@ export default { :aria-label="__('Title')" :autofocus="true" class="qa-title-input" + @keydown="handleKeydown($event, 'title')" /> </gl-form-group> <gl-form-group data-testid="description" :label="__('Description')" - :label-sr-only="true" + :label-sr-only="!showFieldTitle" label-for="issuable-description" - class="col-12 common-note-form" + label-class="gl-pb-0!" + class="col-12 gl-px-0 common-note-form" > <markdown-field :markdown-preview-path="descriptionPreviewPath" @@ -120,11 +144,12 @@ export default { class="note-textarea js-gfm-input js-autosize markdown-area qa-description-textarea" dir="auto" + @keydown="handleKeydown($event, 'description')" ></textarea> </template> </markdown-field> </gl-form-group> - <div data-testid="actions" class="col-12 gl-mt-3 gl-mb-3 clearfix"> + <div data-testid="actions" class="col-12 gl-mt-3 gl-mb-3 gl-px-0 clearfix"> <slot name="edit-form-actions" :issuable-title="title" diff --git a/app/assets/javascripts/issuable_show/components/issuable_header.vue b/app/assets/javascripts/issuable_show/components/issuable_header.vue index 3815c50cac6..5404753631d 100644 --- a/app/assets/javascripts/issuable_show/components/issuable_header.vue +++ b/app/assets/javascripts/issuable_show/components/issuable_header.vue @@ -112,7 +112,7 @@ export default { </div> <div data-testid="header-actions" - class="detail-page-header-actions js-issuable-actions js-issuable-buttons gl-display-flex gl-display-md-block" + class="detail-page-header-actions gl-display-flex gl-display-md-block" > <slot name="header-actions"></slot> </div> diff --git a/app/assets/javascripts/issuable_show/components/issuable_show_root.vue b/app/assets/javascripts/issuable_show/components/issuable_show_root.vue index b41f5e270a8..2443338e8c4 100644 --- a/app/assets/javascripts/issuable_show/components/issuable_show_root.vue +++ b/app/assets/javascripts/issuable_show/components/issuable_show_root.vue @@ -35,11 +35,21 @@ export default { required: false, default: false, }, + enableAutosave: { + type: Boolean, + required: false, + default: true, + }, editFormVisible: { type: Boolean, required: false, default: false, }, + showFieldTitle: { + type: Boolean, + required: false, + default: false, + }, descriptionPreviewPath: { type: String, required: false, @@ -51,6 +61,14 @@ export default { default: '', }, }, + methods: { + handleKeydownTitle(e, issuableMeta) { + this.$emit('keydown-title', e, issuableMeta); + }, + handleKeydownDescription(e, issuableMeta) { + this.$emit('keydown-description', e, issuableMeta); + }, + }, }; </script> @@ -77,10 +95,14 @@ export default { :status-icon="statusIcon" :enable-edit="enableEdit" :enable-autocomplete="enableAutocomplete" + :enable-autosave="enableAutosave" :edit-form-visible="editFormVisible" + :show-field-title="showFieldTitle" :description-preview-path="descriptionPreviewPath" :description-help-path="descriptionHelpPath" @edit-issuable="$emit('edit-issuable', $event)" + @keydown-title="handleKeydownTitle" + @keydown-description="handleKeydownDescription" > <template #status-badge> <slot name="status-badge"></slot> |