REFACTOR: various refactorings/fixes (#2)

This commit is contained in:
Joffrey JAFFEUX 2019-11-03 22:49:22 +01:00 committed by Sam
parent a34e4468c1
commit 1c845cd517
11 changed files with 145 additions and 90 deletions

View File

@ -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);
}
}
});

View File

@ -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"
)

View File

@ -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
});
});
}
}

View File

@ -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", () => {

View File

@ -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`);
}

View File

@ -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);
}

View File

@ -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"
}}

View File

@ -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}}

View File

@ -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}}

View File

@ -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>

View File

@ -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>