DEV: Convert `edit-user-directory-columns` modal to component-based API (#23250)
This commit is contained in:
Isaac Janzen
GitHub
parent
5c652dd7a1
commit
98f2e6ab12
|
|
@ -0,0 +1,65 @@
|
||||||
|
<DModal
|
||||||
|
@closeModal={{@closeModal}}
|
||||||
|
@title={{i18n "directory.edit_columns.title"}}
|
||||||
|
class="edit-user-directory-columns-modal"
|
||||||
|
@flash={{this.flash}}
|
||||||
|
>
|
||||||
|
<:body>
|
||||||
|
{{#if this.loading}}
|
||||||
|
{{loading-spinner size="large"}}
|
||||||
|
{{else}}
|
||||||
|
<div class="edit-directory-columns-container">
|
||||||
|
{{#each this.columns as |column|}}
|
||||||
|
<div class="edit-directory-column">
|
||||||
|
<div class="left-content">
|
||||||
|
<label class="column-name">
|
||||||
|
<Input @type="checkbox" @checked={{column.enabled}} />
|
||||||
|
{{#if (directory-column-is-automatic column=column)}}
|
||||||
|
{{directory-table-header-title
|
||||||
|
field=column.name
|
||||||
|
labelKey=this.labelKey
|
||||||
|
icon=column.icon
|
||||||
|
}}
|
||||||
|
{{else if (directory-column-is-user-field column=column)}}
|
||||||
|
{{directory-table-header-title
|
||||||
|
field=column.user_field.name
|
||||||
|
translated=true
|
||||||
|
}}
|
||||||
|
{{else}}
|
||||||
|
{{directory-table-header-title
|
||||||
|
field=(i18n column.name)
|
||||||
|
translated=true
|
||||||
|
}}
|
||||||
|
{{/if}}
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="right-content">
|
||||||
|
<DButton
|
||||||
|
@icon="arrow-up"
|
||||||
|
@class="button-secondary move-column-up"
|
||||||
|
@action={{fn this.moveUp column}}
|
||||||
|
/>
|
||||||
|
<DButton
|
||||||
|
@icon="arrow-down"
|
||||||
|
@class="button-secondary"
|
||||||
|
@action={{fn this.moveDown column}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{{/each}}
|
||||||
|
</div>
|
||||||
|
{{/if}}
|
||||||
|
</:body>
|
||||||
|
<:footer>
|
||||||
|
<DButton
|
||||||
|
class="btn-primary"
|
||||||
|
@label="directory.edit_columns.save"
|
||||||
|
@action={{this.save}}
|
||||||
|
/>
|
||||||
|
<DButton
|
||||||
|
class="btn-secondary reset-to-default"
|
||||||
|
@label="directory.edit_columns.reset_to_default"
|
||||||
|
@action={{this.resetToDefault}}
|
||||||
|
/>
|
||||||
|
</:footer>
|
||||||
|
</DModal>
|
||||||
|
|
@ -0,0 +1,106 @@
|
||||||
|
import Component from "@glimmer/component";
|
||||||
|
import { action } from "@ember/object";
|
||||||
|
import { tracked } from "@glimmer/tracking";
|
||||||
|
import { ajax } from "discourse/lib/ajax";
|
||||||
|
import { extractError, popupAjaxError } from "discourse/lib/ajax-error";
|
||||||
|
import { reload } from "discourse/helpers/page-reloader";
|
||||||
|
|
||||||
|
const UP = "up";
|
||||||
|
const DOWN = "down";
|
||||||
|
|
||||||
|
export default class EditUserDirectoryColumns extends Component {
|
||||||
|
@tracked loading = true;
|
||||||
|
@tracked columns;
|
||||||
|
@tracked labelKey;
|
||||||
|
@tracked flash;
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
super(...arguments);
|
||||||
|
this.setupColumns();
|
||||||
|
}
|
||||||
|
|
||||||
|
@action
|
||||||
|
async setupColumns() {
|
||||||
|
try {
|
||||||
|
const response = await ajax("edit-directory-columns.json");
|
||||||
|
this.loading = false;
|
||||||
|
this.columns = response.directory_columns
|
||||||
|
.sort((a, b) => (a.position > b.position ? 1 : -1))
|
||||||
|
.map((c) => ({ ...c, enabled: Boolean(c.enabled) }));
|
||||||
|
} catch {
|
||||||
|
popupAjaxError;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@action
|
||||||
|
async save() {
|
||||||
|
this.loading = true;
|
||||||
|
this.flash = null;
|
||||||
|
const data = {
|
||||||
|
directory_columns: this.columns.map((c) => ({
|
||||||
|
id: c.id,
|
||||||
|
enabled: c.enabled,
|
||||||
|
position: c.position,
|
||||||
|
})),
|
||||||
|
};
|
||||||
|
|
||||||
|
try {
|
||||||
|
await ajax("edit-directory-columns.json", { type: "PUT", data });
|
||||||
|
reload();
|
||||||
|
} catch (e) {
|
||||||
|
this.loading = false;
|
||||||
|
this.flash = extractError(e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@action
|
||||||
|
resetToDefault() {
|
||||||
|
const resetColumns = this.columns
|
||||||
|
.sort((a, b) => {
|
||||||
|
const a1 = a.automatic_position || (a.user_field?.position || 0) + 1000;
|
||||||
|
const b1 = b.automatic_position || (b.user_field?.position || 0) + 1000;
|
||||||
|
|
||||||
|
if (a1 === b1) {
|
||||||
|
return a.name.localeCompare(b.name);
|
||||||
|
} else {
|
||||||
|
return a1 > b1 ? 1 : -1;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.map((column, index) => ({
|
||||||
|
...column,
|
||||||
|
position: column.automatic_position || index + 1,
|
||||||
|
enabled: column.type === "automatic",
|
||||||
|
}));
|
||||||
|
|
||||||
|
this.columns = resetColumns;
|
||||||
|
}
|
||||||
|
|
||||||
|
@action
|
||||||
|
moveUp(column) {
|
||||||
|
this._moveColumn(UP, column);
|
||||||
|
}
|
||||||
|
|
||||||
|
@action
|
||||||
|
moveDown(column) {
|
||||||
|
this._moveColumn(DOWN, column);
|
||||||
|
}
|
||||||
|
|
||||||
|
_moveColumn(direction, column) {
|
||||||
|
if (
|
||||||
|
(direction === UP && column.position === 1) ||
|
||||||
|
(direction === DOWN && column.position === this.columns.length)
|
||||||
|
) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const positionOnClick = column.position;
|
||||||
|
const newPosition =
|
||||||
|
direction === UP ? positionOnClick - 1 : positionOnClick + 1;
|
||||||
|
const previousColumn = this.columns.find((c) => c.position === newPosition);
|
||||||
|
column.position = newPosition;
|
||||||
|
previousColumn.position = positionOnClick;
|
||||||
|
this.columns = this.columns.sort((a, b) =>
|
||||||
|
a.position > b.position ? 1 : -1
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,105 +0,0 @@
|
||||||
import Controller from "@ember/controller";
|
|
||||||
import ModalFunctionality from "discourse/mixins/modal-functionality";
|
|
||||||
import { ajax } from "discourse/lib/ajax";
|
|
||||||
import EmberObject, { action } from "@ember/object";
|
|
||||||
import { extractError, popupAjaxError } from "discourse/lib/ajax-error";
|
|
||||||
import { reload } from "discourse/helpers/page-reloader";
|
|
||||||
|
|
||||||
const UP = "up";
|
|
||||||
const DOWN = "down";
|
|
||||||
|
|
||||||
export default Controller.extend(ModalFunctionality, {
|
|
||||||
loading: true,
|
|
||||||
columns: null,
|
|
||||||
labelKey: null,
|
|
||||||
|
|
||||||
onShow() {
|
|
||||||
ajax("edit-directory-columns.json")
|
|
||||||
.then((response) => {
|
|
||||||
this.setProperties({
|
|
||||||
loading: false,
|
|
||||||
columns: response.directory_columns
|
|
||||||
.sort((a, b) => (a.position > b.position ? 1 : -1))
|
|
||||||
.map((c) => EmberObject.create(c)),
|
|
||||||
});
|
|
||||||
})
|
|
||||||
.catch(popupAjaxError);
|
|
||||||
},
|
|
||||||
|
|
||||||
@action
|
|
||||||
save() {
|
|
||||||
this.set("loading", true);
|
|
||||||
const data = {
|
|
||||||
directory_columns: this.columns.map((c) =>
|
|
||||||
c.getProperties("id", "enabled", "position")
|
|
||||||
),
|
|
||||||
};
|
|
||||||
|
|
||||||
ajax("edit-directory-columns.json", { type: "PUT", data })
|
|
||||||
.then(() => {
|
|
||||||
reload();
|
|
||||||
})
|
|
||||||
.catch((e) => {
|
|
||||||
this.set("loading", false);
|
|
||||||
this.flash(extractError(e), "error");
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
@action
|
|
||||||
resetToDefault() {
|
|
||||||
let resetColumns = this.columns;
|
|
||||||
resetColumns
|
|
||||||
.sort((a, b) => {
|
|
||||||
const a1 = a.automatic_position || (a.user_field?.position || 0) + 1000;
|
|
||||||
const b1 = b.automatic_position || (b.user_field?.position || 0) + 1000;
|
|
||||||
|
|
||||||
if (a1 === b1) {
|
|
||||||
return a.name.localeCompare(b.name);
|
|
||||||
} else {
|
|
||||||
return a1 > b1 ? 1 : -1;
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.forEach((column, index) => {
|
|
||||||
column.setProperties({
|
|
||||||
position: column.automatic_position || index + 1,
|
|
||||||
enabled: column.type === "automatic",
|
|
||||||
});
|
|
||||||
});
|
|
||||||
this.set("columns", resetColumns);
|
|
||||||
this.notifyPropertyChange("columns");
|
|
||||||
},
|
|
||||||
|
|
||||||
@action
|
|
||||||
moveUp(column) {
|
|
||||||
this._moveColumn(UP, column);
|
|
||||||
},
|
|
||||||
|
|
||||||
@action
|
|
||||||
moveDown(column) {
|
|
||||||
this._moveColumn(DOWN, column);
|
|
||||||
},
|
|
||||||
|
|
||||||
_moveColumn(direction, column) {
|
|
||||||
if (
|
|
||||||
(direction === UP && column.position === 1) ||
|
|
||||||
(direction === DOWN && column.position === this.columns.length)
|
|
||||||
) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const positionOnClick = column.position;
|
|
||||||
const newPosition =
|
|
||||||
direction === UP ? positionOnClick - 1 : positionOnClick + 1;
|
|
||||||
|
|
||||||
const previousColumn = this.columns.find((c) => c.position === newPosition);
|
|
||||||
|
|
||||||
column.set("position", newPosition);
|
|
||||||
previousColumn.set("position", positionOnClick);
|
|
||||||
|
|
||||||
this.set(
|
|
||||||
"columns",
|
|
||||||
this.columns.sort((a, b) => (a.position > b.position ? 1 : -1))
|
|
||||||
);
|
|
||||||
this.notifyPropertyChange("columns");
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
@ -2,11 +2,13 @@ import Controller from "@ember/controller";
|
||||||
import Group from "discourse/models/group";
|
import Group from "discourse/models/group";
|
||||||
import { action } from "@ember/object";
|
import { action } from "@ember/object";
|
||||||
import discourseDebounce from "discourse-common/lib/debounce";
|
import discourseDebounce from "discourse-common/lib/debounce";
|
||||||
import showModal from "discourse/lib/show-modal";
|
|
||||||
import { and, equal } from "@ember/object/computed";
|
import { and, equal } from "@ember/object/computed";
|
||||||
import { longDate } from "discourse/lib/formatter";
|
import { longDate } from "discourse/lib/formatter";
|
||||||
|
import { inject as service } from "@ember/service";
|
||||||
|
import EditUserDirectoryColumnsModal from "discourse/components/modal/edit-user-directory-columns";
|
||||||
|
|
||||||
export default Controller.extend({
|
export default Controller.extend({
|
||||||
|
modal: service(),
|
||||||
queryParams: [
|
queryParams: [
|
||||||
"period",
|
"period",
|
||||||
"order",
|
"order",
|
||||||
|
|
@ -97,7 +99,7 @@ export default Controller.extend({
|
||||||
|
|
||||||
@action
|
@action
|
||||||
showEditColumnsModal() {
|
showEditColumnsModal() {
|
||||||
showModal("edit-user-directory-columns");
|
this.modal.show(EditUserDirectoryColumnsModal);
|
||||||
},
|
},
|
||||||
|
|
||||||
@action
|
@action
|
||||||
|
|
|
||||||
|
|
@ -20,7 +20,6 @@ const KNOWN_LEGACY_MODALS = [
|
||||||
"create-invite-bulk",
|
"create-invite-bulk",
|
||||||
"create-invite",
|
"create-invite",
|
||||||
"edit-topic-timer",
|
"edit-topic-timer",
|
||||||
"edit-user-directory-columns",
|
|
||||||
"explain-reviewable",
|
"explain-reviewable",
|
||||||
"feature-topic-on-profile",
|
"feature-topic-on-profile",
|
||||||
"feature-topic",
|
"feature-topic",
|
||||||
|
|
|
||||||
|
|
@ -1,60 +0,0 @@
|
||||||
<DModalBody @title="directory.edit_columns.title">
|
|
||||||
{{#if this.loading}}
|
|
||||||
{{loading-spinner size="large"}}
|
|
||||||
{{else}}
|
|
||||||
<div class="edit-directory-columns-container">
|
|
||||||
{{#each this.columns as |column|}}
|
|
||||||
<div class="edit-directory-column">
|
|
||||||
<div class="left-content">
|
|
||||||
<label class="column-name">
|
|
||||||
<Input @type="checkbox" @checked={{column.enabled}} />
|
|
||||||
{{#if (directory-column-is-automatic column=column)}}
|
|
||||||
{{directory-table-header-title
|
|
||||||
field=column.name
|
|
||||||
labelKey=this.labelKey
|
|
||||||
icon=column.icon
|
|
||||||
}}
|
|
||||||
{{else if (directory-column-is-user-field column=column)}}
|
|
||||||
{{directory-table-header-title
|
|
||||||
field=column.user_field.name
|
|
||||||
translated=true
|
|
||||||
}}
|
|
||||||
{{else}}
|
|
||||||
{{directory-table-header-title
|
|
||||||
field=(i18n column.name)
|
|
||||||
translated=true
|
|
||||||
}}
|
|
||||||
{{/if}}
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div class="right-content">
|
|
||||||
<DButton
|
|
||||||
@icon="arrow-up"
|
|
||||||
@class="button-secondary move-column-up"
|
|
||||||
@action={{action "moveUp" column}}
|
|
||||||
/>
|
|
||||||
<DButton
|
|
||||||
@icon="arrow-down"
|
|
||||||
@class="button-secondary"
|
|
||||||
@action={{action "moveDown" column}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{{/each}}
|
|
||||||
</div>
|
|
||||||
{{/if}}
|
|
||||||
</DModalBody>
|
|
||||||
|
|
||||||
<div class="modal-footer">
|
|
||||||
<DButton
|
|
||||||
@class="btn-primary"
|
|
||||||
@label="directory.edit_columns.save"
|
|
||||||
@action={{action "save"}}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<DButton
|
|
||||||
@class="btn-secondary reset-to-default"
|
|
||||||
@label="directory.edit_columns.reset_to_default"
|
|
||||||
@action={{action "resetToDefault"}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
Loading…
Reference in New Issue