1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
|
import $ from 'jquery';
import {stripTags} from '../utils.js';
import {hideElem, queryElemChildren, showElem} from '../utils/dom.js';
import {POST} from '../modules/fetch.js';
import {showErrorToast} from '../modules/toast.js';
const {appSubUrl} = window.config;
export function initRepoTopicBar() {
const mgrBtn = document.getElementById('manage_topic');
if (!mgrBtn) return;
const editDiv = document.getElementById('topic_edit');
const viewDiv = document.getElementById('repo-topics');
const topicDropdown = editDiv.querySelector('.ui.dropdown');
let lastErrorToast;
mgrBtn.addEventListener('click', () => {
hideElem(viewDiv);
showElem(editDiv);
topicDropdown.querySelector('input.search').focus();
});
document.querySelector('#cancel_topic_edit').addEventListener('click', () => {
lastErrorToast?.hideToast();
hideElem(editDiv);
showElem(viewDiv);
mgrBtn.focus();
});
document.getElementById('save_topic').addEventListener('click', async (e) => {
lastErrorToast?.hideToast();
const topics = editDiv.querySelector('input[name=topics]').value;
const data = new FormData();
data.append('topics', topics);
const response = await POST(e.target.getAttribute('data-link'), {data});
if (response.ok) {
const responseData = await response.json();
if (responseData.status === 'ok') {
queryElemChildren(viewDiv, '.repo-topic', (el) => el.remove());
if (topics.length) {
const topicArray = topics.split(',');
topicArray.sort();
for (const topic of topicArray) {
// it should match the code in repo/home.tmpl
const link = document.createElement('a');
link.classList.add('repo-topic', 'ui', 'large', 'label');
link.href = `${appSubUrl}/explore/repos?q=${encodeURIComponent(topic)}&topic=1`;
link.textContent = topic;
mgrBtn.parentNode.insertBefore(link, mgrBtn); // insert all new topics before manage button
}
}
hideElem(editDiv);
showElem(viewDiv);
}
} else if (response.status === 422) {
// how to test: input topic like " invalid topic " (with spaces), and select it from the list, then "Save"
const responseData = await response.json();
lastErrorToast = showErrorToast(responseData.message, {duration: 5000});
if (responseData.invalidTopics.length > 0) {
const {invalidTopics} = responseData;
const topicLabels = queryElemChildren(topicDropdown, 'a.ui.label');
for (const [index, value] of topics.split(',').entries()) {
if (invalidTopics.includes(value)) {
topicLabels[index].classList.remove('green');
topicLabels[index].classList.add('red');
}
}
}
}
});
$(topicDropdown).dropdown({
allowAdditions: true,
forceSelection: false,
fullTextSearch: 'exact',
fields: {name: 'description', value: 'data-value'},
saveRemoteData: false,
label: {
transition: 'horizontal flip',
duration: 200,
variation: false,
},
apiSettings: {
url: `${appSubUrl}/explore/topics/search?q={query}`,
throttle: 500,
cache: false,
onResponse(res) {
const formattedResponse = {
success: false,
results: [],
};
const query = stripTags(this.urlData.query.trim());
let found_query = false;
const current_topics = [];
for (const el of queryElemChildren(topicDropdown, 'a.ui.label.visible')) {
current_topics.push(el.getAttribute('data-value'));
}
if (res.topics) {
let found = false;
for (let i = 0; i < res.topics.length; i++) {
// skip currently added tags
if (current_topics.includes(res.topics[i].topic_name)) {
continue;
}
if (res.topics[i].topic_name.toLowerCase() === query.toLowerCase()) {
found_query = true;
}
formattedResponse.results.push({description: res.topics[i].topic_name, 'data-value': res.topics[i].topic_name});
found = true;
}
formattedResponse.success = found;
}
if (query.length > 0 && !found_query) {
formattedResponse.success = true;
formattedResponse.results.unshift({description: query, 'data-value': query});
} else if (query.length > 0 && found_query) {
formattedResponse.results.sort((a, b) => {
if (a.description.toLowerCase() === query.toLowerCase()) return -1;
if (b.description.toLowerCase() === query.toLowerCase()) return 1;
if (a.description > b.description) return -1;
if (a.description < b.description) return 1;
return 0;
});
}
return formattedResponse;
},
},
onLabelCreate(value) {
value = value.toLowerCase().trim();
this.attr('data-value', value).contents().first().replaceWith(value);
return $(this);
},
onAdd(addedValue, _addedText, $addedChoice) {
addedValue = addedValue.toLowerCase().trim();
$addedChoice[0].setAttribute('data-value', addedValue);
$addedChoice[0].setAttribute('data-text', addedValue);
},
});
}
|
