discourse/app/assets/javascripts/admin/addon/components/embeddable-host.gjs
Krzysztof Kotlarek 407fa69778
UX: admins embedding page follows admin ux guideline (#30122)
Conversion of /admin/customize/embedding page to follow admin UX guidelines.
2025-01-06 13:01:08 +11:00

77 lines
2.1 KiB
Plaintext

import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";
import { action } from "@ember/object";
import { service } from "@ember/service";
import DButton from "discourse/components/d-button";
import categoryBadge from "discourse/helpers/category-badge";
import Category from "discourse/models/category";
import { i18n } from "discourse-i18n";
export default class EmbeddableHost extends Component {
@service dialog;
@tracked category = null;
@tracked tags = null;
@tracked user = null;
constructor() {
super(...arguments);
this.host = this.args.host;
const categoryId =
this.host.category_id || this.site.uncategorized_category_id;
const category = Category.findById(categoryId);
this.category = category;
this.tags = (this.host.tags || []).join(", ");
this.user = this.host.user;
}
@action
delete() {
return this.dialog.confirm({
message: i18n("admin.embedding.confirm_delete"),
didConfirm: () => {
return this.host.destroyRecord().then(() => {
this.args.deleteHost(this.host);
});
},
});
}
<template>
<tr class="d-admin-row__content">
<td class="d-admin-row__detail">
{{this.host.host}}
</td>
<td class="d-admin-row__detail">
{{this.host.allowed_paths}}
</td>
<td class="d-admin-row__detail">
{{categoryBadge this.category allowUncategorized=true}}
</td>
<td class="d-admin-row__detail">
{{this.tags}}
</td>
<td class="d-admin-row__detail">
{{this.user}}
</td>
<td class="d-admin-row__controls">
<div class="d-admin-row__controls-options">
<DButton
class="btn-small admin-embeddable-host-item__edit"
@route="adminEmbedding.edit"
@routeModels={{this.host}}
@label="admin.embedding.edit"
/>
<DButton
@action={{this.delete}}
@label="admin.embedding.delete"
class="btn-default btn-small admin-embeddable-host-item__delete"
/>
</div>
</td>
</tr>
</template>
}