DEV: Convert raw-hbs to view only components (#222)
- Convert raw.hbs files to co-located view only components
This commit is contained in:
Isaac Janzen
GitHub
parent
332ae394e8
commit
29cfa6383c
|
|
@ -68,7 +68,7 @@
|
|||
{{#each this.rows as |row|}}
|
||||
<QueryRowContent
|
||||
@row={{row}}
|
||||
@columnTemplates={{this.columnTemplates}}
|
||||
@columnComponents={{this.columnComponents}}
|
||||
@lookupUser={{this.lookupUser}}
|
||||
@lookupBadge={{this.lookupBadge}}
|
||||
@lookupPost={{this.lookupPost}}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,29 @@ import { schedule } from "@ember/runloop";
|
|||
import { action } from "@ember/object";
|
||||
import { tracked } from "@glimmer/tracking";
|
||||
import { inject as service } from "@ember/service";
|
||||
import { findRawTemplate } from "discourse-common/lib/raw-templates";
|
||||
import TopicViewComponent from "./result-types/topic";
|
||||
import TextViewComponent from "./result-types/text";
|
||||
import PostViewComponent from "./result-types/post";
|
||||
import ReltimeViewComponent from "./result-types/reltime";
|
||||
import BadgeViewComponent from "./result-types/badge";
|
||||
import UrlViewComponent from "./result-types/url";
|
||||
import UserViewComponent from "./result-types/user";
|
||||
import GroupViewComponent from "./result-types/group";
|
||||
import HtmlViewComponent from "./result-types/html";
|
||||
import CategoryViewComponent from "./result-types/category";
|
||||
|
||||
const VIEW_COMPONENTS = {
|
||||
topic: TopicViewComponent,
|
||||
text: TextViewComponent,
|
||||
post: PostViewComponent,
|
||||
reltime: ReltimeViewComponent,
|
||||
badge: BadgeViewComponent,
|
||||
url: UrlViewComponent,
|
||||
user: UserViewComponent,
|
||||
group: GroupViewComponent,
|
||||
html: HtmlViewComponent,
|
||||
category: CategoryViewComponent,
|
||||
};
|
||||
|
||||
export default class QueryResult extends Component {
|
||||
@service site;
|
||||
|
|
@ -54,18 +76,16 @@ export default class QueryResult extends Component {
|
|||
});
|
||||
}
|
||||
|
||||
get columnTemplates() {
|
||||
get columnComponents() {
|
||||
if (!this.columns) {
|
||||
return [];
|
||||
}
|
||||
return this.columns.map((_, idx) => {
|
||||
let viewName = "text";
|
||||
let type = "text";
|
||||
if (this.colRender[idx]) {
|
||||
viewName = this.colRender[idx];
|
||||
type = this.colRender[idx];
|
||||
}
|
||||
|
||||
const template = findRawTemplate(`javascripts/explorer/${viewName}`);
|
||||
return { name: viewName, template };
|
||||
return { name: type, component: VIEW_COMPONENTS[type] };
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,11 @@
|
|||
<tr>
|
||||
{{#each this.results as |result|}}
|
||||
<td>{{result}}</td>
|
||||
<td>
|
||||
<result.component
|
||||
@ctx={{result.ctx}}
|
||||
@params={{result.params}}
|
||||
@textValue={{result.textValue}}
|
||||
/>
|
||||
</td>
|
||||
{{/each}}
|
||||
</tr>
|
||||
|
|
@ -9,7 +9,7 @@ import { get } from "@ember/object";
|
|||
import { isEmpty } from "@ember/utils";
|
||||
import { escapeExpression } from "discourse/lib/utilities";
|
||||
import { cached } from "@glimmer/tracking";
|
||||
import { findRawTemplate } from "discourse-common/lib/raw-templates";
|
||||
import TextViewComponent from "./result-types/text";
|
||||
|
||||
export default class QueryRowContent extends Component {
|
||||
constructor() {
|
||||
|
|
@ -24,7 +24,8 @@ export default class QueryRowContent extends Component {
|
|||
|
||||
@cached
|
||||
get results() {
|
||||
return this.args.columnTemplates.map((t, idx) => {
|
||||
return this.args.columnComponents.map((t, idx) => {
|
||||
const params = {};
|
||||
const value = this.args.row[idx],
|
||||
id = parseInt(value, 10);
|
||||
|
||||
|
|
@ -33,13 +34,19 @@ export default class QueryRowContent extends Component {
|
|||
id,
|
||||
baseuri: getURL(""),
|
||||
};
|
||||
const params = {};
|
||||
|
||||
if (this.args.row[idx] === null) {
|
||||
return "NULL";
|
||||
return {
|
||||
component: TextViewComponent,
|
||||
textValue: "NULL",
|
||||
};
|
||||
} else if (t.name === "text") {
|
||||
return escapeExpression(this.args.row[idx]);
|
||||
return {
|
||||
component: TextViewComponent,
|
||||
textValue: escapeExpression(this.args.row[idx]),
|
||||
};
|
||||
}
|
||||
|
||||
const lookupFunc = this.args[`lookup${capitalize(t.name)}`];
|
||||
if (lookupFunc) {
|
||||
ctx[t.name] = lookupFunc.call(this.args, id);
|
||||
|
|
@ -57,16 +64,16 @@ export default class QueryRowContent extends Component {
|
|||
}
|
||||
|
||||
try {
|
||||
return htmlSafe((t.template || this.fallbackTemplate)(ctx, params));
|
||||
return {
|
||||
component: t.component || TextViewComponent,
|
||||
ctx,
|
||||
params,
|
||||
};
|
||||
} catch (e) {
|
||||
return "error";
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
fallbackTemplate() {
|
||||
return findRawTemplate("javascripts/explorer/text");
|
||||
}
|
||||
}
|
||||
|
||||
function icon_or_image_replacement(str, ctx) {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,9 @@
|
|||
<a
|
||||
href="{{@ctx.baseuri}}/badges/{{@ctx.badge.id}}/{{@ctx.badge.name}}"
|
||||
class="user-badge {{@ctx.badge.badgeTypeClassName}}"
|
||||
title={{@ctx.badge.display_name}}
|
||||
data-badge-name={{@ctx.badge.name}}
|
||||
>
|
||||
{{icon-or-image @ctx.badge.icon}}
|
||||
<span class="badge-display-name">{{@ctx.badge.display_name}}</span>
|
||||
</a>
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{{#if @ctx.category}}
|
||||
{{category-link @ctx.category}}
|
||||
{{else}}
|
||||
<a href="{{@ctx.baseuri}}/t/{{@ctx.id}}">{{@ctx.id}}</a>
|
||||
{{/if}}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{{#if @ctx.group}}
|
||||
<a href="{{@ctx.baseuri}}/groups/{{@ctx.group.name}}">{{@ctx.group.name}}</a>
|
||||
{{else}}
|
||||
{{@ctx.id}}
|
||||
{{/if}}
|
||||
|
|
@ -0,0 +1 @@
|
|||
{{html-safe @textValue}}
|
||||
|
|
@ -1,14 +1,14 @@
|
|||
{{#if post}}
|
||||
{{#if @ctx.post}}
|
||||
<aside
|
||||
class="quote"
|
||||
data-post={{post.post_number}}
|
||||
data-topic={{post.topic_id}}
|
||||
data-post={{@ctx.post.post_number}}
|
||||
data-topic={{@ctx.post.topic_id}}
|
||||
>
|
||||
<div class="title">
|
||||
<div class="quote-controls">
|
||||
{{! template-lint-disable no-invalid-link-text }}
|
||||
<a
|
||||
href="/t/via-quote/{{post.topic_id}}/{{post.post_number}}"
|
||||
href="/t/via-quote/{{@ctx.post.topic_id}}/{{@ctx.post.post_number}}"
|
||||
title="go to the quoted post"
|
||||
class="quote-other-topic"
|
||||
>
|
||||
|
|
@ -17,18 +17,18 @@
|
|||
|
||||
<a
|
||||
class="result-post-link"
|
||||
href="/t/{{post.topic_id}}/{{post.post_number}}"
|
||||
href="/t/{{@ctx.post.topic_id}}/{{@ctx.post.post_number}}"
|
||||
>
|
||||
{{avatar post imageSize="tiny"}}{{post.username}}:
|
||||
{{avatar @ctx.post imageSize="tiny"}}{{@ctx.post.username}}:
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<blockquote>
|
||||
<p>
|
||||
{{html-safe post.excerpt}}
|
||||
{{html-safe @ctx.post.excerpt}}
|
||||
</p>
|
||||
</blockquote>
|
||||
</aside>
|
||||
{{else}}
|
||||
{{id}}
|
||||
{{@ctx.id}}
|
||||
{{/if}}
|
||||
|
|
@ -0,0 +1 @@
|
|||
{{reltime @textValue}}
|
||||
|
|
@ -0,0 +1 @@
|
|||
{{@textValue}}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
{{#if @ctx.topic}}
|
||||
<a href="{{@ctx.baseuri}}/t/{{@ctx.topic.slug}}/{{@ctx.topic.id}}">
|
||||
{{html-safe @ctx.topic.fancy_title}}
|
||||
</a>
|
||||
({{@ctx.topic.posts_count}})
|
||||
{{else}}
|
||||
<a href="{{@ctx.baseuri}}/t/{{@ctx.id}}">{{@ctx.id}}</a>
|
||||
{{/if}}
|
||||
|
|
@ -0,0 +1 @@
|
|||
<a href={{@ctx.href}}>{{@ctx.target}}</a>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
{{#if @ctx.user}}
|
||||
<a
|
||||
href="{{@ctx.baseuri}}/u/{{@ctx.user.username}}/activity"
|
||||
data-user-card={{@ctx.user.username}}
|
||||
>
|
||||
{{avatar @ctx.user imageSize="tiny"}}
|
||||
{{@ctx.user.username}}
|
||||
</a>
|
||||
{{else}}
|
||||
{{@ctx.id}}
|
||||
{{/if}}
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
{{! source: badge-button component }}
|
||||
<a
|
||||
href="{{baseuri}}/badges/{{badge.id}}/{{badge.name}}"
|
||||
class="user-badge {{badge.badgeTypeClassName}}"
|
||||
title={{badge.display_name}}
|
||||
data-badge-name={{badge.name}}
|
||||
>
|
||||
{{icon-or-image badge.icon}}
|
||||
<span class="badge-display-name">{{badge.display_name}}</span>
|
||||
</a>
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
{{#if category}}
|
||||
{{category-link category}}
|
||||
{{else}}
|
||||
<a href="{{baseuri}}/t/{{id}}">{{id}}</a>
|
||||
{{/if}}
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
{{#if group}}
|
||||
<a href="{{baseuri}}/groups/{{group.name}}">{{group.name}}</a>
|
||||
{{else}}
|
||||
{{id}}
|
||||
{{/if}}
|
||||
|
|
@ -1 +0,0 @@
|
|||
{{html-safe value}}
|
||||
|
|
@ -1 +0,0 @@
|
|||
{{reltime value}}
|
||||
|
|
@ -1 +0,0 @@
|
|||
{{value}}
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
{{#if topic}}
|
||||
<a href="{{baseuri}}/t/{{topic.slug}}/{{topic.id}}">
|
||||
{{html-safe topic.fancy_title}}
|
||||
</a>
|
||||
({{topic.posts_count}})
|
||||
{{else}}
|
||||
<a href="{{baseuri}}/t/{{id}}">{{id}}</a>
|
||||
{{/if}}
|
||||
|
|
@ -1 +0,0 @@
|
|||
<a href={{href}}>{{target}}</a>
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
{{#if user}}
|
||||
<a
|
||||
href="{{baseuri}}/u/{{user.username}}/activity"
|
||||
data-user-card={{user.username}}
|
||||
>
|
||||
{{avatar user imageSize="tiny"}}
|
||||
{{user.username}}
|
||||
</a>
|
||||
{{else}}
|
||||
{{id}}
|
||||
{{/if}}
|
||||
Loading…
Reference in New Issue