DEV: Convert DirectoryTable to gjs (#30414)

* DEV: Convert DirectoryTable to gjs

* rename + remove
This commit is contained in:
Jarek Radosz 2024-12-23 06:44:26 +01:00 committed by GitHub
parent 5b989fd5ae
commit 6f01584607
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 67 additions and 78 deletions

View File

@ -0,0 +1,65 @@
import Component from "@glimmer/component";
import { action } from "@ember/object";
import didInsert from "@ember/render-modifiers/modifiers/did-insert";
import DirectoryItem from "discourse/components/directory-item";
import ResponsiveTable from "discourse/components/responsive-table";
import TableHeaderToggle from "discourse/components/table-header-toggle";
import directoryColumnIsAutomatic from "discourse/helpers/directory-column-is-automatic";
import { i18n } from "discourse-i18n";
export default class DirectoryTable extends Component {
table;
@action
setupTable(element) {
this.table = element.querySelector(".directory-table");
const columnCount = this.args.showTimeRead
? this.args.columns.length + 1
: this.args.columns.length;
this.table.style.gridTemplateColumns = `minmax(15em, 3fr) repeat(${columnCount}, minmax(max-content, 1fr))`;
}
@action
updateOrderAndAsc(field, asc) {
this.args.updateOrder(field);
this.args.updateAsc(asc);
}
<template>
<ResponsiveTable {{didInsert this.setupTable}}>
<:header>
<TableHeaderToggle @field="username" @order={{@order}} @asc={{@asc}} />
{{#each @columns as |column|}}
<TableHeaderToggle
@onToggle={{this.updateOrderAndAsc}}
@field={{column.name}}
@icon={{column.icon}}
@order={{@order}}
@asc={{@asc}}
@automatic={{directoryColumnIsAutomatic column=column}}
@translated={{column.user_field_id}}
/>
{{/each}}
{{#if @showTimeRead}}
<div class="directory-table__column-header">
<div class="header-contents">
{{i18n "directory.time_read"}}
</div>
</div>
{{/if}}
</:header>
<:body>
{{#each @items as |item|}}
<DirectoryItem
@item={{item}}
@columns={{@columns}}
@showTimeRead={{@showTimeRead}}
/>
{{/each}}
</:body>
</ResponsiveTable>
</template>
}

View File

@ -1,38 +0,0 @@
<ResponsiveTable>
<:header>
<TableHeaderToggle
@field="username"
@order={{this.order}}
@asc={{this.asc}}
/>
{{#each this.columns as |column|}}
<TableHeaderToggle
@onToggle={{this.updateOrder}}
@field={{column.name}}
@icon={{column.icon}}
@order={{this.order}}
@asc={{this.asc}}
@automatic={{directory-column-is-automatic column=column}}
@translated={{column.user_field_id}}
@onActiveRender={{this.setActiveHeader}}
/>
{{/each}}
{{#if this.showTimeRead}}
<div class="directory-table__column-header">
<div class="header-contents">
{{i18n "directory.time_read"}}
</div>
</div>
{{/if}}
</:header>
<:body>
{{#each this.items as |item|}}
<DirectoryItem
@item={{item}}
@columns={{this.columns}}
@showTimeRead={{this.showTimeRead}}
/>
{{/each}}
</:body>
</ResponsiveTable>

View File

@ -1,40 +0,0 @@
import Component from "@ember/component";
import { action } from "@ember/object";
export default class DirectoryTable extends Component {
_table = null;
didInsertElement() {
super.didInsertElement(...arguments);
this.setProperties({
_table: this.element.querySelector(".directory-table"),
_columnCount: this.showTimeRead
? this.columns.length + 1
: this.columns.length,
});
this._table.style.gridTemplateColumns = `minmax(15em, 3fr) repeat(${this._columnCount}, minmax(max-content, 1fr))`;
}
@action
setActiveHeader(header) {
// After render, scroll table left to ensure the order by column is visible
if (!this._table) {
this.set("_table", document.querySelector(".directory-table"));
}
const scrollPixels =
header.offsetLeft + header.offsetWidth + 10 - this._table.offsetWidth;
if (scrollPixels > 0) {
this._table.scrollLeft = scrollPixels;
}
}
@action
updateOrder(field, asc) {
this.setProperties({
order: field,
asc,
});
}
}

View File

@ -73,7 +73,9 @@
@columns={{this.columns}}
@showTimeRead={{this.showTimeRead}}
@order={{this.order}}
@updateOrder={{fn (mut this.order)}}
@asc={{this.asc}}
@updateAsc={{fn (mut this.asc)}}
/>
<ConditionalLoadingSpinner @condition={{this.model.loadingMore}} />
{{else}}