import $ from 'jquery'; import Pikaday from 'pikaday'; import GfmAutoComplete from 'ee_else_ce/gfm_auto_complete'; import Autosave from '~/autosave'; import { parsePikadayDate, pikadayToString } from '~/lib/utils/datetime_utility'; import { queryToObject, objectToQuery } from '~/lib/utils/url_utility'; import UsersSelect from '~/users_select'; import ZenMode from '~/zen_mode'; const MR_SOURCE_BRANCH = 'merge_request[source_branch]'; const MR_TARGET_BRANCH = 'merge_request[target_branch]'; const DATA_ISSUES_NEW_PATH = 'data-new-issue-path'; function organizeQuery(obj, isFallbackKey = false) { if (!obj[MR_SOURCE_BRANCH] && !obj[MR_TARGET_BRANCH]) { return obj; } if (isFallbackKey) { return { [MR_SOURCE_BRANCH]: obj[MR_SOURCE_BRANCH], }; } return { [MR_SOURCE_BRANCH]: obj[MR_SOURCE_BRANCH], [MR_TARGET_BRANCH]: obj[MR_TARGET_BRANCH], }; } function format(searchTerm, isFallbackKey = false) { const queryObject = queryToObject(searchTerm, { legacySpacesDecode: true }); const organizeQueryObject = organizeQuery(queryObject, isFallbackKey); const formattedQuery = objectToQuery(organizeQueryObject); return formattedQuery; } function getSearchTerm(newIssuePath) { const { search, pathname } = document.location; return newIssuePath === pathname ? '' : format(search); } function getFallbackKey() { const searchTerm = format(document.location.search, true); return ['autosave', document.location.pathname, searchTerm].join('/'); } export default class IssuableForm { static addAutosave(map, id, element, searchTerm, fallbackKey) { if (!element) return; map.set( id, new Autosave(element, [document.location.pathname, searchTerm, id], `${fallbackKey}=${id}`), ); } constructor(form) { if (form.length === 0) { return; } this.form = form; this.resetAutosave = this.resetAutosave.bind(this); this.handleSubmit = this.handleSubmit.bind(this); // prettier-ignore this.draftRegex = new RegExp( '^\\s*(' + // Line start, then any amount of leading whitespace '\\[draft\\]\\s*' + // [Draft] and any following whitespace '|draft:\\s*' + // Draft: and any following whitespace '|\\(draft\\)\\s*' + // (Draft) and any following whitespace ')+' + // At least one repeated match of the preceding parenthetical '\\s*', // Any amount of trailing whitespace 'i', // Match any case(s) ); this.gfmAutoComplete = new GfmAutoComplete( gl.GfmAutoComplete && gl.GfmAutoComplete.dataSources, ).setup(); this.usersSelect = new UsersSelect(); this.reviewersSelect = new UsersSelect(undefined, '.js-reviewer-search'); this.zenMode = new ZenMode(); this.searchTerm = getSearchTerm(form[0].getAttribute(DATA_ISSUES_NEW_PATH)); this.fallbackKey = getFallbackKey(); this.titleField = this.form.find('input[name*="[title]"]'); this.descriptionField = this.form.find('textarea[name*="[description]"]'); this.draftCheck = document.querySelector('input.js-toggle-draft'); if (!(this.titleField.length && this.descriptionField.length)) { return; } this.autosaves = this.initAutosave(); this.form.on('submit', this.handleSubmit); this.form.on('click', '.btn-cancel, .js-reset-autosave', this.resetAutosave); this.initDraft(); const $issuableDueDate = $('#issuable-due-date'); if ($issuableDueDate.length) { const calendar = new Pikaday({ field: $issuableDueDate.get(0), theme: 'gitlab-theme animate-picker', format: 'yyyy-mm-dd', container: $issuableDueDate.parent().get(0), parse: (dateString) => parsePikadayDate(dateString), toString: (date) => pikadayToString(date), onSelect: (dateText) => { $issuableDueDate.val(calendar.toString(dateText)); if (this.autosaves.has('due_date')) this.autosaves.get('due_date').save(); }, firstDay: gon.first_day_of_week, }); calendar.setDate(parsePikadayDate($issuableDueDate.val())); } } initAutosave() { const autosaveMap = new Map(); IssuableForm.addAutosave( autosaveMap, 'title', this.form.find('input[name*="[title]"]').get(0), this.searchTerm, this.fallbackKey, ); IssuableForm.addAutosave( autosaveMap, 'description', this.form.find('textarea[name*="[description]"]').get(0), this.searchTerm, this.fallbackKey, ); IssuableForm.addAutosave( autosaveMap, 'confidential', this.form.find('input:checkbox[name*="[confidential]"]').get(0), this.searchTerm, this.fallbackKey, ); IssuableForm.addAutosave( autosaveMap, 'due_date', this.form.find('input[name*="[due_date]"]').get(0), this.searchTerm, this.fallbackKey, ); return autosaveMap; } handleSubmit() { return this.resetAutosave(); } resetAutosave() { this.autosaves.forEach((autosaveItem) => { autosaveItem?.reset(); }); } initDraft() { if (this.draftCheck) { this.draftCheck.addEventListener('click', () => this.writeDraftStatus()); this.titleField.on('keyup blur', () => this.readDraftStatus()); this.readDraftStatus(); } } isMarkedDraft() { return this.draftRegex.test(this.titleField.val()); } readDraftStatus() { this.draftCheck.checked = this.isMarkedDraft(); } writeDraftStatus() { if (this.draftCheck.checked) { this.addDraft(); } else { this.removeDraft(); } } removeDraft() { return this.titleField.val(this.titleField.val().replace(this.draftRegex, '')); } addDraft() { this.titleField.val(`Draft: ${this.titleField.val()}`); } }