Commit c37d8f14 authored by Kushal Pandya's avatar Kushal Pandya

Merge branch '207134-frontend-refactor-gl-mentions' into 'master'

Refactor GlMentions component

See merge request gitlab-org/gitlab!34187
parents e28e7298 f2a0bda4
<script>
import escape from 'lodash/escape';
import sanitize from 'sanitize-html';
import { escape } from 'lodash';
import Tribute from 'tributejs';
import axios from '~/lib/utils/axios_utils';
import { spriteIcon } from '~/lib/utils/common_utils';
......@@ -11,11 +10,11 @@ import { spriteIcon } from '~/lib/utils/common_utils';
* @param original An object from the array returned from the `autocomplete_sources/members` API
* @returns {string} An HTML template
*/
function createMenuItemTemplate({ original }) {
function menuItemTemplate({ original }) {
const rectAvatarClass = original.type === 'Group' ? 'rect-avatar' : '';
const avatarClasses = `avatar avatar-inline center s26 ${rectAvatarClass}
align-items-center d-inline-flex justify-content-center`;
gl-display-inline-flex gl-align-items-center gl-justify-content-center`;
const avatarTag = original.avatar_url
? `<img
......@@ -24,42 +23,20 @@ function createMenuItemTemplate({ original }) {
class="${avatarClasses}"/>`
: `<div class="${avatarClasses}">${original.username.charAt(0).toUpperCase()}</div>`;
const name = escape(sanitize(original.name));
const name = escape(original.name);
const count = original.count && !original.mentionsDisabled ? ` (${original.count})` : '';
const icon = original.mentionsDisabled
? spriteIcon('notifications-off', 's16 vertical-align-middle prepend-left-5')
? spriteIcon('notifications-off', 's16 gl-vertical-align-middle gl-ml-3')
: '';
return `${avatarTag}
${original.username}
<small class="small font-weight-normal gl-reset-color">${name}${count}</small>
<small class="gl-text-small gl-font-weight-normal gl-reset-color">${name}${count}</small>
${icon}`;
}
/**
* Creates the list of users to show in the mentions dropdown.
*
* @param inputText The text entered by the user in the mentions input field
* @param processValues Callback function to set the list of users to show in the mentions dropdown
*/
function getMembers(inputText, processValues) {
if (this.members) {
processValues(this.members);
} else if (this.dataSources.members) {
axios
.get(this.dataSources.members)
.then(response => {
this.members = response.data;
processValues(response.data);
})
.catch(() => {});
} else {
processValues([]);
}
}
export default {
name: 'GlMentions',
props: {
......@@ -72,30 +49,49 @@ export default {
data() {
return {
members: undefined,
options: {
trigger: '@',
fillAttr: 'username',
lookup(value) {
return value.name + value.username;
},
menuItemTemplate: createMenuItemTemplate.bind(this),
values: getMembers.bind(this),
},
};
},
mounted() {
this.tribute = new Tribute({
trigger: '@',
fillAttr: 'username',
lookup: value => value.name + value.username,
menuItemTemplate,
values: this.getMembers,
});
const input = this.$slots.default[0].elm;
this.tribute = new Tribute(this.options);
this.tribute.attach(input);
},
beforeDestroy() {
const input = this.$slots.default[0].elm;
if (this.tribute) {
this.tribute.detach(input);
},
methods: {
/**
* Creates the list of users to show in the mentions dropdown.
*
* @param inputText - The text entered by the user in the mentions input field
* @param processValues - Callback function to set the list of users to show in the mentions dropdown
*/
getMembers(inputText, processValues) {
if (this.members) {
processValues(this.members);
} else if (this.dataSources.members) {
axios
.get(this.dataSources.members)
.then(response => {
this.members = response.data;
processValues(response.data);
})
.catch(() => {});
} else {
processValues([]);
}
},
render(h) {
return h('div', this.$slots.default);
},
render(createElement) {
return createElement('div', this.$slots.default);
},
};
</script>
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment