REFACTOR: various refactorings/fixes (#2)
This commit is contained in:
parent
a34e4468c1
commit
1c845cd517
|
@ -1,10 +1,23 @@
|
|||
import debounce from "discourse/lib/debounce";
|
||||
|
||||
export default Ember.Component.extend({
|
||||
classNames: "knowledge-explorer-search",
|
||||
|
||||
didUpdateAttrs() {
|
||||
this._super(...arguments);
|
||||
|
||||
Ember.run.schedule("afterRender", () => {
|
||||
document.querySelector(".knowledge-explorer-search-bar").focus();
|
||||
});
|
||||
},
|
||||
|
||||
debouncedSearch: debounce(function(term) {
|
||||
this.onSearch(term);
|
||||
}, 250),
|
||||
|
||||
actions: {
|
||||
onSearchTermChange(event) {
|
||||
const term = event.target.value;
|
||||
Ember.run.debounce(this, this.onSearch, term, 250);
|
||||
onSearchTermChange(term) {
|
||||
this.debouncedSearch(term);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
import { default as computed } from "ember-addons/ember-computed-decorators";
|
||||
|
||||
export default Ember.Component.extend({
|
||||
classNames: "knowledge-explorer-topic",
|
||||
|
||||
originalPostContent: Ember.computed.readOnly(
|
||||
"topic.post_stream.posts.firstObject.cooked"
|
||||
)
|
||||
|
|
|
@ -1,6 +1,5 @@
|
|||
import {
|
||||
default as computed,
|
||||
observes
|
||||
default as computed
|
||||
} from "ember-addons/ember-computed-decorators";
|
||||
import KnowledgeExplorer from "discourse/plugins/discourse-knowledge-explorer/discourse/models/knowledge-explorer";
|
||||
|
||||
|
@ -15,6 +14,15 @@ export default Ember.Controller.extend({
|
|||
isLoading: false,
|
||||
isLoadingMore: false,
|
||||
loadMoreUrl: Ember.computed.alias("model.topics.load_more_url"),
|
||||
isTopicLoading: false,
|
||||
topics: Ember.computed.alias("model.topics.topic_list.topics"),
|
||||
tags: Ember.computed.readOnly("model.tags"),
|
||||
filterTags: null,
|
||||
filterCategory: null,
|
||||
searchTerm: null,
|
||||
selectedTopic: null,
|
||||
topic: null,
|
||||
|
||||
@computed("loadMoreUrl")
|
||||
canLoadMore(loadMoreUrl) {
|
||||
if (loadMoreUrl === null || this.isLoadingMore) {
|
||||
|
@ -22,15 +30,6 @@ export default Ember.Controller.extend({
|
|||
}
|
||||
return true;
|
||||
},
|
||||
isTopicLoading: false,
|
||||
topics: Ember.computed.alias("model.topics.topic_list.topics"),
|
||||
tags: Ember.computed.readOnly("model.tags"),
|
||||
filterTags: null,
|
||||
filterCategory: null,
|
||||
searchTerm: null,
|
||||
|
||||
selectedTopic: null,
|
||||
topic: null,
|
||||
|
||||
@computed("searchTerm")
|
||||
isSearching(searchTerm) {
|
||||
|
@ -41,6 +40,7 @@ export default Ember.Controller.extend({
|
|||
searchCount(isSearching, topics) {
|
||||
if (isSearching) return topics.length;
|
||||
},
|
||||
|
||||
emptySearchResults: Ember.computed.equal("searchCount", 0),
|
||||
|
||||
@computed("filterTags")
|
||||
|
@ -50,29 +50,40 @@ export default Ember.Controller.extend({
|
|||
|
||||
actions: {
|
||||
setSelectedTopic(topicId) {
|
||||
this.set("isTopicLoading", true);
|
||||
this.set("selectedTopic", topicId);
|
||||
this.setProperties({
|
||||
isTopicLoading: true,
|
||||
selectedTopic: topicId
|
||||
});
|
||||
|
||||
KnowledgeExplorer.getTopic(topicId).then(result => {
|
||||
this.set("topic", result);
|
||||
this.set("isTopicLoading", false);
|
||||
this.setProperties({
|
||||
topic: result,
|
||||
isTopicLoading: false
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
updateSelectedTags(tag) {
|
||||
let filter = this.filterTags;
|
||||
if (filter && filter.includes(tag.id)) {
|
||||
filter = filter.replace(tag.id, "");
|
||||
filter = filter.replace("|", "|");
|
||||
filter = filter.replace(/^\|+|\|+$/g, "");
|
||||
filter = filter
|
||||
.replace(tag.id, "")
|
||||
.replace("|", "|")
|
||||
.replace(/^\|+|\|+$/g, "");
|
||||
} else if (filter) {
|
||||
filter = `${filter}|${tag.id}`;
|
||||
} else {
|
||||
filter = tag.id;
|
||||
}
|
||||
|
||||
this.set("filterTags", filter);
|
||||
this.set("selectedTopic", null);
|
||||
this.setProperties({
|
||||
filterTags: filter,
|
||||
selectedTopic: null
|
||||
});
|
||||
|
||||
this.send("refreshModel");
|
||||
},
|
||||
|
||||
performSearch(term) {
|
||||
if (term === "") {
|
||||
this.set("searchTerm", null);
|
||||
|
@ -84,35 +95,44 @@ export default Ember.Controller.extend({
|
|||
return false;
|
||||
}
|
||||
|
||||
this.set("searchTerm", term);
|
||||
this.set("selectedTopic", null);
|
||||
this.setProperties({
|
||||
searchTerm: term,
|
||||
selectedTopic: null
|
||||
});
|
||||
|
||||
this.send("refreshModel");
|
||||
},
|
||||
|
||||
loadMore() {
|
||||
if (this.canLoadMore) {
|
||||
this.set("isLoadingMore", true);
|
||||
|
||||
KnowledgeExplorer.loadMore(this.loadMoreUrl).then(result => {
|
||||
let topics = this.topics;
|
||||
const topics = this.topics.concat(result.topics.topic_list.topics);
|
||||
|
||||
topics = topics.concat(result.topics.topic_list.topics);
|
||||
|
||||
this.set("topics", topics);
|
||||
this.set("loadMoreUrl", result.topics.load_more_url || null);
|
||||
this.set("isLoadingMore", false);
|
||||
this.setProperties({
|
||||
topics,
|
||||
loadMoreUrl: result.topics.load_more_url || null,
|
||||
isLoadingMore: false
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
refreshModel() {
|
||||
this.set("isLoading", true);
|
||||
|
||||
const params = this.getProperties(
|
||||
"filterCategory",
|
||||
"filterTags",
|
||||
"searchTerm"
|
||||
);
|
||||
|
||||
KnowledgeExplorer.list(params).then(result => {
|
||||
this.set("model", result);
|
||||
this.set("isLoading", false);
|
||||
this.setProperties({
|
||||
model: result,
|
||||
isLoading: false
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
@ -2,6 +2,7 @@ import { withPluginApi } from "discourse/lib/plugin-api";
|
|||
|
||||
export default {
|
||||
name: "setup-knowledge-explorer",
|
||||
|
||||
initialize() {
|
||||
withPluginApi("0.8", api => {
|
||||
api.decorateWidget("hamburger-menu:generalLinks", () => {
|
||||
|
|
|
@ -9,9 +9,11 @@ export default {
|
|||
|
||||
return ajax(`/knowledge-explorer.json?${filters.join("&")}`);
|
||||
},
|
||||
|
||||
loadMore(loadMoreUrl) {
|
||||
return ajax(loadMoreUrl);
|
||||
},
|
||||
|
||||
getTopic(id) {
|
||||
return ajax(`/t/${id}.json`);
|
||||
}
|
||||
|
|
|
@ -1,7 +1,12 @@
|
|||
import { ajax } from "discourse/lib/ajax";
|
||||
import KnowledgeExplorer from "discourse/plugins/discourse-knowledge-explorer/discourse/models/knowledge-explorer";
|
||||
|
||||
export default Ember.Route.extend({
|
||||
queryParams: {
|
||||
searchTerm: {
|
||||
replace: true
|
||||
}
|
||||
},
|
||||
|
||||
model(params) {
|
||||
return KnowledgeExplorer.list(params);
|
||||
}
|
||||
|
|
|
@ -1,7 +1,8 @@
|
|||
<input
|
||||
{{input
|
||||
type="text"
|
||||
value={{searchTerm}}
|
||||
oninput={{action "onSearchTermChange"}}
|
||||
value=(readonly searchTerm)
|
||||
input=(action "onSearchTermChange" value="target.value")
|
||||
class="knowledge-explorer-search-bar"
|
||||
autocorrect="off"
|
||||
autocapitalize="off">
|
||||
autocapitalize="off"
|
||||
}}
|
||||
|
|
|
@ -2,7 +2,8 @@
|
|||
{{#unless tag.active}}
|
||||
{{d-icon "plus"}}
|
||||
{{/unless}}
|
||||
<span class="tag-id">{{tag.id}}</span><span class="tag-count">({{tag.count}})</span>
|
||||
<span class="tag-id">{{tag.id}}</span>
|
||||
<span class="tag-count">({{tag.count}})</span>
|
||||
{{#if tag.active}}
|
||||
{{d-icon "times-circle"}}
|
||||
{{/if}}
|
||||
|
|
|
@ -1,28 +1,32 @@
|
|||
{{#load-more selector=".topic-list tr" action=loadMore}}
|
||||
<table class="topic-list">
|
||||
<thead>
|
||||
<th>Topic</th>
|
||||
<th>Activity</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{#each topics as |topic|}}
|
||||
<tr>
|
||||
<td class="main-link">
|
||||
<span class="link-top-line">
|
||||
{{knowledge-explorer-topic-link topic=topic selectTopic=selectTopic}}
|
||||
</span>
|
||||
<span class="link-bottom-line">
|
||||
{{#each topic.tags as |tag|}}
|
||||
<span class="discourse-tag">{{tag}}</span>
|
||||
{{/each}}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
{{format-date topic.bumped_at format="tiny" noTitle="true"}}
|
||||
</td>
|
||||
</tr>
|
||||
{{/each}}
|
||||
</tbody>
|
||||
</table>
|
||||
<table class="topic-list">
|
||||
<thead>
|
||||
<th>Topic</th>
|
||||
<th>Activity</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{#each topics as |topic|}}
|
||||
<tr>
|
||||
<td class="main-link">
|
||||
<span class="link-top-line">
|
||||
{{knowledge-explorer-topic-link
|
||||
topic=topic
|
||||
selectTopic=selectTopic
|
||||
}}
|
||||
</span>
|
||||
<span class="link-bottom-line">
|
||||
{{#each topic.tags as |tag|}}
|
||||
<span class="discourse-tag">{{tag}}</span>
|
||||
{{/each}}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
{{format-date topic.bumped_at format="tiny" noTitle="true"}}
|
||||
</td>
|
||||
</tr>
|
||||
{{/each}}
|
||||
</tbody>
|
||||
</table>
|
||||
{{/load-more}}
|
||||
|
||||
{{conditional-loading-spinner condition=loading}}
|
||||
|
|
|
@ -1,8 +1,12 @@
|
|||
{{#link-to 'knowledgeExplorer' (query-params topic=null) class='knowledge-explorer-nav-link return'}}
|
||||
{{i18n 'knowledge_explorer.topic.back'}}
|
||||
{{/link-to}}
|
||||
|
||||
<div class="topic-content">
|
||||
<h1>{{topic.title}}</h1>
|
||||
{{{originalPostContent}}}
|
||||
</div>
|
||||
<a class="knowledge-explorer-nav-link more" href="/t/{{topic.id}}">{{i18n 'knowledge_explorer.topic.navigate_to_topic'}}</a>
|
||||
|
||||
<a class="knowledge-explorer-nav-link more" href="/t/{{topic.id}}">
|
||||
{{i18n 'knowledge_explorer.topic.navigate_to_topic'}}
|
||||
</a>
|
||||
|
|
|
@ -1,17 +1,16 @@
|
|||
<div class="knowledge-explorer">
|
||||
<div class="knowledge-explorer-search">
|
||||
{{knowledge-explorer-search
|
||||
onSearch=(action "performSearch")
|
||||
}}
|
||||
</div>
|
||||
{{knowledge-explorer-search
|
||||
searchTerm=(readonly searchTerm)
|
||||
onSearch=(action "performSearch")
|
||||
}}
|
||||
{{#conditional-loading-spinner condition=isLoading}}
|
||||
<div class="knowledge-explorer-browse">
|
||||
<div class="knowledge-explorer-tags">
|
||||
{{#each tags as |tag|}}
|
||||
{{knowledge-explorer-tag
|
||||
tag=tag
|
||||
selectTag=(action "updateSelectedTags")
|
||||
}}
|
||||
{{knowledge-explorer-tag
|
||||
tag=tag
|
||||
selectTag=(action "updateSelectedTags")
|
||||
}}
|
||||
{{/each}}
|
||||
</div>
|
||||
{{#if selectedTopic}}
|
||||
|
@ -20,21 +19,27 @@
|
|||
{{/conditional-loading-spinner}}
|
||||
{{else}}
|
||||
<div class="knowledge-explorer-results">
|
||||
{{#if isSearching}}
|
||||
{{#if emptySearchResults}}
|
||||
<div class="result-count no-result">{{i18n 'search.no_results'}}</div>
|
||||
{{else}}
|
||||
<div class="result-count">{{i18n 'knowledge_explorer.search.results' count=searchCount}}</div>
|
||||
{{#if isSearching}}
|
||||
{{#if emptySearchResults}}
|
||||
<div class="result-count no-result">
|
||||
{{i18n 'search.no_results'}}
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="result-count">
|
||||
{{i18n 'knowledge_explorer.search.results'
|
||||
count=searchCount
|
||||
}}
|
||||
</div>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
{{#unless emptySearchResults}}
|
||||
{{knowledge-explorer-topic-list
|
||||
topics=topics
|
||||
selectTopic=(action "setSelectedTopic")
|
||||
loadMore=(action "loadMore")
|
||||
loading=isLoadingMore
|
||||
}}
|
||||
{{/unless}}
|
||||
{{#unless emptySearchResults}}
|
||||
{{knowledge-explorer-topic-list
|
||||
topics=topics
|
||||
selectTopic=(action "setSelectedTopic")
|
||||
loadMore=(action "loadMore")
|
||||
loading=isLoadingMore
|
||||
}}
|
||||
{{/unless}}
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
|
Loading…
Reference in New Issue