diff options
Diffstat (limited to 'app/assets/javascripts/projects/settings_service_desk/components/service_desk_template_dropdown.vue')
-rw-r--r-- | app/assets/javascripts/projects/settings_service_desk/components/service_desk_template_dropdown.vue | 115 |
1 files changed, 115 insertions, 0 deletions
diff --git a/app/assets/javascripts/projects/settings_service_desk/components/service_desk_template_dropdown.vue b/app/assets/javascripts/projects/settings_service_desk/components/service_desk_template_dropdown.vue new file mode 100644 index 00000000000..bdd9f940d79 --- /dev/null +++ b/app/assets/javascripts/projects/settings_service_desk/components/service_desk_template_dropdown.vue @@ -0,0 +1,115 @@ +<script> +import fuzzaldrinPlus from 'fuzzaldrin-plus'; +import { GlDropdown, GlDropdownSectionHeader, GlDropdownItem, GlSearchBoxByType } from '@gitlab/ui'; +import { __ } from '~/locale'; + +export default { + components: { + GlDropdown, + GlDropdownSectionHeader, + GlDropdownItem, + GlSearchBoxByType, + }, + props: { + selectedTemplate: { + type: String, + required: false, + default: '', + }, + templates: { + type: Array, + required: true, + }, + selectedFileTemplateProjectId: { + type: Number, + required: false, + default: null, + }, + }, + data() { + return { + searchTerm: '', + }; + }, + computed: { + templateOptions() { + if (this.searchTerm) { + const filteredTemplates = []; + for (let i = 0; i < this.templates.length; i += 2) { + const sectionName = this.templates[i]; + const availableTemplates = this.templates[i + 1]; + + const matchedTemplates = fuzzaldrinPlus.filter(availableTemplates, this.searchTerm, { + key: 'name', + }); + + if (matchedTemplates.length > 0) { + filteredTemplates.push(sectionName, matchedTemplates); + } + } + + return filteredTemplates; + } + + return this.templates; + }, + }, + methods: { + templateClick(template) { + // Clicking on the same template should unselect it + if ( + template.name === this.selectedTemplate && + template.project_id === this.selectedFileTemplateProjectId + ) { + this.$emit('change', { + selectedFileTemplateProjectId: null, + selectedTemplate: null, + }); + return; + } + + this.$emit('change', { + selectedFileTemplateProjectId: template.project_id, + selectedTemplate: template.key, + }); + }, + }, + i18n: { + defaultDropdownText: __('Choose a template'), + }, +}; +</script> +<template> + <gl-dropdown + id="service-desk-template-select" + :text="selectedTemplate || $options.i18n.defaultDropdownText" + :header-text="$options.i18n.defaultDropdownText" + data-qa-selector="service_desk_template_dropdown" + :block="true" + class="service-desk-template-select" + toggle-class="gl-m-0" + > + <template #header> + <gl-search-box-by-type v-model.trim="searchTerm" /> + </template> + <template v-for="item in templateOptions"> + <gl-dropdown-section-header v-if="!Array.isArray(item)" :key="item"> + {{ item }} + </gl-dropdown-section-header> + <template v-else> + <gl-dropdown-item + v-for="template in item" + :key="template.key" + :is-check-item="true" + :is-checked=" + template.project_id === selectedFileTemplateProjectId && + template.name === selectedTemplate + " + @click="() => templateClick(template)" + > + {{ template.name }} + </gl-dropdown-item> + </template> + </template> + </gl-dropdown> +</template> |