FEATURE: Add a button to toggle the card view (#4)

This commit is contained in:
David Taylor 2021-07-09 14:33:56 +01:00 committed by GitHub
parent cff3d510f2
commit 1522f3cd2d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 228 additions and 8 deletions

View File

@ -8,5 +8,8 @@
}, },
"color_schemes": { "color_schemes": {
}, },
"component": true "component": true,
"modifiers": {
"svg_icons": ["id-card", "th-list"]
}
} }

View File

@ -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 } });
},
},
});

View File

@ -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", {

View File

@ -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"
}}

View File

@ -0,0 +1 @@
{{user-card-directory-toggle}}

View File

@ -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>

View File

@ -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

View File

@ -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"

View File

@ -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");
});
});