discourse/app/assets/javascripts/admin/addon/components/admin-reports.gjs
Krzysztof Kotlarek 043117ca13
FEATURE: separate admin page for whats new and reports (#26216)
Currently, a new sidebar link for what's new and reports is going to the main dashboard page and activates the proper tab.

It might be problematic, especially, when the instance has a lot of problems. In that case, it would be difficult for admin to find reports or what’s new which is rendered at the bottom of the page.

Therefore separate pages for reports and what's new were created.

Reports were moved to a component that is shared between a separate page and the dashboard.
2024-03-20 14:23:18 +11:00

93 lines
2.8 KiB
Plaintext

import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";
import { Input } from "@ember/component";
import didInsert from "@ember/render-modifiers/modifiers/did-insert";
import { LinkTo } from "@ember/routing";
import { service } from "@ember/service";
import { htmlSafe } from "@ember/template";
import ConditionalLoadingSpinner from "discourse/components/conditional-loading-spinner";
import { ajax } from "discourse/lib/ajax";
import dIcon from "discourse-common/helpers/d-icon";
import i18n from "discourse-common/helpers/i18n";
import { bind } from "discourse-common/utils/decorators";
export default class AdminReports extends Component {
@service siteSettings;
@tracked reports = null;
@tracked filter = "";
@tracked isLoading = false;
@bind
loadReports() {
this.isLoading = true;
ajax("/admin/reports")
.then((json) => {
this.reports = json.reports;
})
.finally(() => (this.isLoading = false));
}
get filteredReports() {
if (!this.reports) {
return [];
}
let filteredReports = this.reports;
if (this.filter) {
const lowerCaseFilter = this.filter.toLowerCase();
filteredReports = filteredReports.filter((report) => {
return (
(report.title || "").toLowerCase().includes(lowerCaseFilter) ||
(report.description || "").toLowerCase().includes(lowerCaseFilter)
);
});
}
const hiddenReports = (this.siteSettings.dashboard_hidden_reports || "")
.split("|")
.filter(Boolean);
filteredReports = filteredReports.filter(
(report) => !hiddenReports.includes(report.type)
);
return filteredReports;
}
<template>
<div {{didInsert this.loadReports}}>
<ConditionalLoadingSpinner @condition={{this.isLoading}}>
<div class="admin-reports-header">
<h2>{{i18n "admin.reports.title"}}</h2>
<Input
class="admin-reports-header__filter"
placeholder={{i18n "admin.filter_reports"}}
@value={{this.filter}}
/>
</div>
<div class="alert alert-info">
{{dIcon "book"}}
{{htmlSafe (i18n "admin.reports.meta_doc")}}
</div>
<ul class="admin-reports-list">
{{#each this.filteredReports as |report|}}
<li class="admin-reports-list__report">
<LinkTo @route="adminReports.show" @model={{report.type}}>
<h3
class="admin-reports-list__report-title"
>{{report.title}}</h3>
{{#if report.description}}
<p class="admin-reports-list__report-description">
{{report.description}}
</p>
{{/if}}
</LinkTo>
</li>
{{/each}}
</ul>
</ConditionalLoadingSpinner>
</div>
</template>
}