From 1c845cd517a2a521d75c7bbbe48848e222d85794 Mon Sep 17 00:00:00 2001 From: Joffrey JAFFEUX Date: Sun, 3 Nov 2019 22:49:22 +0100 Subject: [PATCH] REFACTOR: various refactorings/fixes (#2) --- .../knowledge-explorer-search.js.es6 | 19 ++++- .../knowledge-explorer-topic.js.es6 | 3 +- .../controllers/knowledge-explorer.js.es6 | 80 ++++++++++++------- .../setup-knowledge-explorer.js.es6 | 1 + .../models/knowledge-explorer.js.es6 | 2 + .../routes/knowledge-explorer.js.es6 | 7 +- .../components/knowledge-explorer-search.hbs | 9 ++- .../components/knowledge-explorer-tag.hbs | 3 +- .../knowledge-explorer-topic-list.hbs | 54 +++++++------ .../components/knowledge-explorer-topic.hbs | 6 +- .../templates/knowledge-explorer.hbs | 51 ++++++------ 11 files changed, 145 insertions(+), 90 deletions(-) diff --git a/assets/javascripts/discourse/components/knowledge-explorer-search.js.es6 b/assets/javascripts/discourse/components/knowledge-explorer-search.js.es6 index d4d9765..1d03bcb 100644 --- a/assets/javascripts/discourse/components/knowledge-explorer-search.js.es6 +++ b/assets/javascripts/discourse/components/knowledge-explorer-search.js.es6 @@ -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); } } }); diff --git a/assets/javascripts/discourse/components/knowledge-explorer-topic.js.es6 b/assets/javascripts/discourse/components/knowledge-explorer-topic.js.es6 index e999dc3..48665d0 100644 --- a/assets/javascripts/discourse/components/knowledge-explorer-topic.js.es6 +++ b/assets/javascripts/discourse/components/knowledge-explorer-topic.js.es6 @@ -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" ) diff --git a/assets/javascripts/discourse/controllers/knowledge-explorer.js.es6 b/assets/javascripts/discourse/controllers/knowledge-explorer.js.es6 index c464968..9457cb0 100644 --- a/assets/javascripts/discourse/controllers/knowledge-explorer.js.es6 +++ b/assets/javascripts/discourse/controllers/knowledge-explorer.js.es6 @@ -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 + }); }); } } diff --git a/assets/javascripts/discourse/initializers/setup-knowledge-explorer.js.es6 b/assets/javascripts/discourse/initializers/setup-knowledge-explorer.js.es6 index 2c6ca92..2449155 100644 --- a/assets/javascripts/discourse/initializers/setup-knowledge-explorer.js.es6 +++ b/assets/javascripts/discourse/initializers/setup-knowledge-explorer.js.es6 @@ -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", () => { diff --git a/assets/javascripts/discourse/models/knowledge-explorer.js.es6 b/assets/javascripts/discourse/models/knowledge-explorer.js.es6 index 91a65f1..c7b7712 100644 --- a/assets/javascripts/discourse/models/knowledge-explorer.js.es6 +++ b/assets/javascripts/discourse/models/knowledge-explorer.js.es6 @@ -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`); } diff --git a/assets/javascripts/discourse/routes/knowledge-explorer.js.es6 b/assets/javascripts/discourse/routes/knowledge-explorer.js.es6 index f79eaf2..00cd6ad 100644 --- a/assets/javascripts/discourse/routes/knowledge-explorer.js.es6 +++ b/assets/javascripts/discourse/routes/knowledge-explorer.js.es6 @@ -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); } diff --git a/assets/javascripts/discourse/templates/components/knowledge-explorer-search.hbs b/assets/javascripts/discourse/templates/components/knowledge-explorer-search.hbs index 2b69478..8e4aca0 100644 --- a/assets/javascripts/discourse/templates/components/knowledge-explorer-search.hbs +++ b/assets/javascripts/discourse/templates/components/knowledge-explorer-search.hbs @@ -1,7 +1,8 @@ - + autocapitalize="off" +}} diff --git a/assets/javascripts/discourse/templates/components/knowledge-explorer-tag.hbs b/assets/javascripts/discourse/templates/components/knowledge-explorer-tag.hbs index 66109a5..e9c425e 100644 --- a/assets/javascripts/discourse/templates/components/knowledge-explorer-tag.hbs +++ b/assets/javascripts/discourse/templates/components/knowledge-explorer-tag.hbs @@ -2,7 +2,8 @@ {{#unless tag.active}} {{d-icon "plus"}} {{/unless}} - {{tag.id}}({{tag.count}}) + {{tag.id}} + ({{tag.count}}) {{#if tag.active}} {{d-icon "times-circle"}} {{/if}} diff --git a/assets/javascripts/discourse/templates/components/knowledge-explorer-topic-list.hbs b/assets/javascripts/discourse/templates/components/knowledge-explorer-topic-list.hbs index 7940da5..467eb1d 100644 --- a/assets/javascripts/discourse/templates/components/knowledge-explorer-topic-list.hbs +++ b/assets/javascripts/discourse/templates/components/knowledge-explorer-topic-list.hbs @@ -1,28 +1,32 @@ {{#load-more selector=".topic-list tr" action=loadMore}} - - - - - - - {{#each topics as |topic|}} - - - - - {{/each}} - -
TopicActivity
- - {{knowledge-explorer-topic-link topic=topic selectTopic=selectTopic}} - - - {{#each topic.tags as |tag|}} - {{tag}} - {{/each}} - - - {{format-date topic.bumped_at format="tiny" noTitle="true"}} -
+ + + + + + + {{#each topics as |topic|}} + + + + + {{/each}} + +
TopicActivity
+ + {{knowledge-explorer-topic-link + topic=topic + selectTopic=selectTopic + }} + + + {{#each topic.tags as |tag|}} + {{tag}} + {{/each}} + + + {{format-date topic.bumped_at format="tiny" noTitle="true"}} +
{{/load-more}} + {{conditional-loading-spinner condition=loading}} diff --git a/assets/javascripts/discourse/templates/components/knowledge-explorer-topic.hbs b/assets/javascripts/discourse/templates/components/knowledge-explorer-topic.hbs index 4f526d5..0e6f802 100644 --- a/assets/javascripts/discourse/templates/components/knowledge-explorer-topic.hbs +++ b/assets/javascripts/discourse/templates/components/knowledge-explorer-topic.hbs @@ -1,8 +1,12 @@ {{#link-to 'knowledgeExplorer' (query-params topic=null) class='knowledge-explorer-nav-link return'}} {{i18n 'knowledge_explorer.topic.back'}} {{/link-to}} +

{{topic.title}}

{{{originalPostContent}}}
-{{i18n 'knowledge_explorer.topic.navigate_to_topic'}} + + + {{i18n 'knowledge_explorer.topic.navigate_to_topic'}} + diff --git a/assets/javascripts/discourse/templates/knowledge-explorer.hbs b/assets/javascripts/discourse/templates/knowledge-explorer.hbs index 3a8e527..0cc3c9c 100644 --- a/assets/javascripts/discourse/templates/knowledge-explorer.hbs +++ b/assets/javascripts/discourse/templates/knowledge-explorer.hbs @@ -1,17 +1,16 @@
-
- {{knowledge-explorer-search - onSearch=(action "performSearch") - }} -
+ {{knowledge-explorer-search + searchTerm=(readonly searchTerm) + onSearch=(action "performSearch") + }} {{#conditional-loading-spinner condition=isLoading}}
{{#each tags as |tag|}} - {{knowledge-explorer-tag - tag=tag - selectTag=(action "updateSelectedTags") - }} + {{knowledge-explorer-tag + tag=tag + selectTag=(action "updateSelectedTags") + }} {{/each}}
{{#if selectedTopic}} @@ -20,21 +19,27 @@ {{/conditional-loading-spinner}} {{else}}
- {{#if isSearching}} - {{#if emptySearchResults}} -
{{i18n 'search.no_results'}}
- {{else}} -
{{i18n 'knowledge_explorer.search.results' count=searchCount}}
+ {{#if isSearching}} + {{#if emptySearchResults}} +
+ {{i18n 'search.no_results'}} +
+ {{else}} +
+ {{i18n 'knowledge_explorer.search.results' + count=searchCount + }} +
+ {{/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}}
{{/if}}