FEATURE: Add a button to toggle the card view (#4)
This commit is contained in:
parent
cff3d510f2
commit
1522f3cd2d
|
@ -8,5 +8,8 @@
|
||||||
},
|
},
|
||||||
"color_schemes": {
|
"color_schemes": {
|
||||||
},
|
},
|
||||||
"component": true
|
"component": true,
|
||||||
|
"modifiers": {
|
||||||
|
"svg_icons": ["id-card", "th-list"]
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,20 @@
|
||||||
|
import Component from "@ember/component";
|
||||||
|
import { inject as service } from "@ember/service";
|
||||||
|
import discourseComputed from "discourse-common/utils/decorators";
|
||||||
|
|
||||||
|
export default Component.extend({
|
||||||
|
router: service("router"),
|
||||||
|
tagName: "",
|
||||||
|
|
||||||
|
@discourseComputed("router.currentRoute.queryParams.cards")
|
||||||
|
showingCards(cardsParam) {
|
||||||
|
return cardsParam === "yes";
|
||||||
|
},
|
||||||
|
|
||||||
|
actions: {
|
||||||
|
toggleCards() {
|
||||||
|
const newValue = this.showingCards ? "no" : "yes";
|
||||||
|
this.router.transitionTo({ queryParams: { cards: newValue } });
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
|
@ -7,18 +7,44 @@ import { ajax } from "discourse/lib/ajax";
|
||||||
export default {
|
export default {
|
||||||
name: "user-card-directory",
|
name: "user-card-directory",
|
||||||
initialize(container) {
|
initialize(container) {
|
||||||
// This component provides a responsive template
|
withPluginApi("0.8.7", (api) => {
|
||||||
// Delete the core mobile one
|
|
||||||
delete Ember.TEMPLATES["mobile/users"];
|
|
||||||
|
|
||||||
withPluginApi("0.8.7", api => {
|
|
||||||
api.modifyClass("route:users", {
|
api.modifyClass("route:users", {
|
||||||
resetController(controller, isExiting) {
|
resetController(controller, isExiting) {
|
||||||
this._super(...arguments);
|
this._super(...arguments);
|
||||||
if (isExiting) {
|
if (isExiting) {
|
||||||
controller.set("cachedUserCardInfo", {});
|
controller.set("cachedUserCardInfo", {});
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
api.modifyClass("route:users", {
|
||||||
|
queryParams: {
|
||||||
|
cards: { refreshModel: true },
|
||||||
|
},
|
||||||
|
|
||||||
|
beforeModel(transition) {
|
||||||
|
this._super(transition);
|
||||||
|
if (
|
||||||
|
settings.default_view === "cards" &&
|
||||||
|
!transition.to.queryParams.cards
|
||||||
|
) {
|
||||||
|
this.transitionTo({ queryParams: { cards: "yes" } });
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
model(params) {
|
||||||
|
return this._super(params).then((model) => {
|
||||||
|
model.showAsCards = params["cards"] === "yes";
|
||||||
|
return model;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
renderTemplate(controller, model) {
|
||||||
|
if (model.showAsCards) {
|
||||||
|
return this.render("users-as-card-directory");
|
||||||
|
}
|
||||||
|
return this._super();
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
api.modifyClass("controller:users", {
|
api.modifyClass("controller:users", {
|
||||||
|
|
|
@ -0,0 +1,6 @@
|
||||||
|
{{d-button
|
||||||
|
icon=(if showingCards "th-list" "id-card")
|
||||||
|
action=(action "toggleCards")
|
||||||
|
title=(theme-prefix (if showingCards "show_table" "show_cards"))
|
||||||
|
class="btn-default open-edit-columns-btn toggle-cards-button"
|
||||||
|
}}
|
|
@ -0,0 +1 @@
|
||||||
|
{{user-card-directory-toggle}}
|
|
@ -41,6 +41,7 @@
|
||||||
class="btn-default open-edit-columns-btn"
|
class="btn-default open-edit-columns-btn"
|
||||||
}}
|
}}
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
{{plugin-outlet name="users-directory-controls" connectorTagName="" tagName="" args=(hash model=model)}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -4,4 +4,5 @@ en:
|
||||||
settings:
|
settings:
|
||||||
hide_current_user: Always hide the current user from the grid
|
hide_current_user: Always hide the current user from the grid
|
||||||
show_stats: Show statistics under each user card
|
show_stats: Show statistics under each user card
|
||||||
filter_by_group: filter by group
|
show_cards: Show as cards
|
||||||
|
show_table: Show as table
|
||||||
|
|
|
@ -1,2 +1,8 @@
|
||||||
hide_current_user: false
|
hide_current_user: false
|
||||||
show_stats: true
|
show_stats: true
|
||||||
|
default_view:
|
||||||
|
type: enum
|
||||||
|
default: "cards"
|
||||||
|
choices:
|
||||||
|
- "cards"
|
||||||
|
- "table"
|
||||||
|
|
|
@ -0,0 +1,156 @@
|
||||||
|
import {
|
||||||
|
acceptance,
|
||||||
|
exists,
|
||||||
|
count,
|
||||||
|
} from "discourse/tests/helpers/qunit-helpers";
|
||||||
|
import { test } from "qunit";
|
||||||
|
import { click, visit } from "@ember/test-helpers";
|
||||||
|
|
||||||
|
acceptance("User Card Directory", function (needs) {
|
||||||
|
needs.pretender((server, helper) => {
|
||||||
|
server.get("/directory_items", () => {
|
||||||
|
return helper.response({
|
||||||
|
directory_items: [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
likes_received: 0,
|
||||||
|
likes_given: 0,
|
||||||
|
topics_entered: 0,
|
||||||
|
topic_count: 0,
|
||||||
|
post_count: 0,
|
||||||
|
posts_read: 0,
|
||||||
|
days_visited: 1,
|
||||||
|
user: {
|
||||||
|
id: 1,
|
||||||
|
username: "foo",
|
||||||
|
name: "Foo",
|
||||||
|
avatar_template:
|
||||||
|
"/letter_avatar_proxy/v4/letter/f/3be4f8/{size}.png",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
likes_received: 0,
|
||||||
|
likes_given: 0,
|
||||||
|
topics_entered: 0,
|
||||||
|
topic_count: 0,
|
||||||
|
post_count: 0,
|
||||||
|
posts_read: 0,
|
||||||
|
days_visited: 1,
|
||||||
|
user: {
|
||||||
|
id: 2,
|
||||||
|
username: "bar",
|
||||||
|
name: "Bar",
|
||||||
|
avatar_template:
|
||||||
|
"/letter_avatar_proxy/v4/letter/b/3be4f8/{size}.png",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
meta: {
|
||||||
|
last_updated_at: "2020-01-01T12:00:00.000Z",
|
||||||
|
total_rows_directory_items: 2,
|
||||||
|
load_more_directory_items:
|
||||||
|
"/directory_items?order=likes_received&page=1&period=weekly",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
server.get("/user-cards.json", () => {
|
||||||
|
return helper.response({
|
||||||
|
user_badges: [],
|
||||||
|
badges: [],
|
||||||
|
badge_types: [],
|
||||||
|
users: [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
username: "foo",
|
||||||
|
name: "Foo",
|
||||||
|
avatar_template:
|
||||||
|
"/letter_avatar_proxy/v4/letter/m/9fc348/{size}.png",
|
||||||
|
last_posted_at: null,
|
||||||
|
last_seen_at: "2018-11-26T11:49:48.721Z",
|
||||||
|
created_at: "2018-09-20T11:14:39.341Z",
|
||||||
|
ignored: false,
|
||||||
|
muted: false,
|
||||||
|
can_ignore_user: true,
|
||||||
|
can_mute_user: true,
|
||||||
|
can_send_private_messages: true,
|
||||||
|
can_send_private_message_to_user: true,
|
||||||
|
trust_level: 1,
|
||||||
|
moderator: false,
|
||||||
|
admin: false,
|
||||||
|
title: null,
|
||||||
|
badge_count: 1,
|
||||||
|
user_fields: {},
|
||||||
|
custom_fields: {},
|
||||||
|
time_read: 0,
|
||||||
|
recent_time_read: 0,
|
||||||
|
primary_group_id: null,
|
||||||
|
primary_group_name: null,
|
||||||
|
primary_group_flair_url: null,
|
||||||
|
primary_group_flair_bg_color: null,
|
||||||
|
primary_group_flair_color: null,
|
||||||
|
featured_topic: null,
|
||||||
|
staged: false,
|
||||||
|
date_of_birth: null,
|
||||||
|
featured_user_badge_ids: [],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
username: "bar",
|
||||||
|
name: "Bar",
|
||||||
|
avatar_template:
|
||||||
|
"/letter_avatar_proxy/v4/letter/m/9fc348/{size}.png",
|
||||||
|
last_posted_at: null,
|
||||||
|
last_seen_at: "2018-11-26T11:49:48.721Z",
|
||||||
|
created_at: "2018-09-20T11:14:39.341Z",
|
||||||
|
ignored: false,
|
||||||
|
muted: false,
|
||||||
|
can_ignore_user: true,
|
||||||
|
can_mute_user: true,
|
||||||
|
can_send_private_messages: true,
|
||||||
|
can_send_private_message_to_user: true,
|
||||||
|
trust_level: 1,
|
||||||
|
moderator: false,
|
||||||
|
admin: false,
|
||||||
|
title: null,
|
||||||
|
badge_count: 1,
|
||||||
|
user_fields: {},
|
||||||
|
custom_fields: {},
|
||||||
|
time_read: 0,
|
||||||
|
recent_time_read: 0,
|
||||||
|
primary_group_id: null,
|
||||||
|
primary_group_name: null,
|
||||||
|
primary_group_flair_url: null,
|
||||||
|
primary_group_flair_bg_color: null,
|
||||||
|
primary_group_flair_color: null,
|
||||||
|
featured_topic: null,
|
||||||
|
staged: false,
|
||||||
|
date_of_birth: null,
|
||||||
|
featured_user_badge_ids: [],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
test("Displays table when cards=no", async function (assert) {
|
||||||
|
await visit("/u?cards=no");
|
||||||
|
assert.ok($("body.users-page").length, "has the body class");
|
||||||
|
assert.equal(count(".directory table tr"), 2, "has a list of users");
|
||||||
|
});
|
||||||
|
|
||||||
|
test("Displays cards when cards=yes", async function (assert) {
|
||||||
|
await visit("/u?cards=yes");
|
||||||
|
assert.equal(count(".user-card-avatar"), 2, "has two cards showing");
|
||||||
|
});
|
||||||
|
|
||||||
|
test("Can toggle between views", async function (assert) {
|
||||||
|
await visit("/u?cards=no");
|
||||||
|
assert.equal(count(".directory table tr"), 2, "has two table rows");
|
||||||
|
await click(".toggle-cards-button");
|
||||||
|
assert.equal(count(".user-card-avatar"), 2, "has two cards");
|
||||||
|
await click(".toggle-cards-button");
|
||||||
|
assert.equal(count(".directory table tr"), 2, "has two table rows");
|
||||||
|
});
|
||||||
|
});
|
Loading…
Reference in New Issue