Skip to content

Commit f82ad68

Browse files
sarupbanskotasarupbanskota
committed
fix: gate period filter behind q=v2 query param, limit sorting to Last Seen only
- Duration dropdown only renders when ?q=v2 is in the URL - Removed sorting from all columns except Last Seen - Default sort restored to original: attempts desc, last seen desc, joined desc - Last Seen sort toggles: desc -> asc -> default
1 parent aae06dc commit f82ad68

4 files changed

Lines changed: 180 additions & 179 deletions

File tree

‎app/components/team-page/members-table.hbs‎

Lines changed: 144 additions & 137 deletions
Original file line numberDiff line numberDiff line change
@@ -1,147 +1,154 @@
1-
<TeamPage::Section @title="Team Members" ...attributes>
2-
<:headerRight>
3-
<div class="flex items-center gap-2 text-sm text-gray-500" data-test-period-filter>
4-
<span>View activity within</span>
5-
<div class="relative">
6-
<button
7-
type="button"
8-
class="inline-flex items-center gap-1 px-3 py-1.5 border border-gray-300 rounded-md bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-offset-1"
9-
data-test-period-toggle
10-
{{on "click" this.togglePeriodDropdown}}
11-
>
12-
{{this.selectedPeriodLabel}}
13-
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
14-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
15-
</svg>
16-
</button>
17-
{{#if this.isPeriodDropdownOpen}}
18-
<div class="fixed inset-0 z-[5]" {{on "click" this.closePeriodDropdown}}></div>
19-
<div
20-
class="absolute right-0 mt-1 w-32 bg-white border border-gray-200 rounded-md shadow-lg z-10"
21-
data-test-period-dropdown
1+
{{#if @enablePeriodFilter}}
2+
<TeamPage::Section @title="Team Members" ...attributes>
3+
<:headerRight>
4+
<div class="flex items-center gap-2 text-sm text-gray-500" data-test-period-filter>
5+
<span>View activity within</span>
6+
<div class="relative">
7+
<button
8+
type="button"
9+
class="inline-flex items-center gap-1 px-3 py-1.5 border border-gray-300 rounded-md bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-offset-1"
10+
data-test-period-toggle
11+
{{on "click" this.togglePeriodDropdown}}
2212
>
23-
{{#each this.periodOptions as |option|}}
24-
<button
25-
type="button"
26-
class="w-full text-left px-3 py-2 text-sm hover:bg-gray-50 {{if (eq option.value this.selectedPeriod) 'text-teal-600 font-medium' 'text-gray-700'}}"
27-
data-test-period-option={{option.value}}
28-
{{on "click" (fn this.handlePeriodSelect option.value)}}
13+
{{this.selectedPeriodLabel}}
14+
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
15+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
16+
</svg>
17+
</button>
18+
{{#if this.isPeriodDropdownOpen}}
19+
<div class="fixed inset-0 z-[5]" {{on "click" this.closePeriodDropdown}}></div>
20+
<div
21+
class="absolute right-0 mt-1 w-32 bg-white border border-gray-200 rounded-md shadow-lg z-10"
22+
data-test-period-dropdown
23+
>
24+
{{#each this.periodOptions as |option|}}
25+
<button
26+
type="button"
27+
class="w-full text-left px-3 py-2 text-sm hover:bg-gray-50 {{if (eq option.value this.selectedPeriod) 'text-teal-600 font-medium' 'text-gray-700'}}"
28+
data-test-period-option={{option.value}}
29+
{{on "click" (fn this.handlePeriodSelect option.value)}}
30+
>
31+
{{option.label}}
32+
</button>
33+
{{/each}}
34+
</div>
35+
{{/if}}
36+
</div>
37+
</div>
38+
</:headerRight>
39+
40+
<:default>
41+
<div class="overflow-x-auto -mx-4 md:-mx-6">
42+
<table class="min-w-full">
43+
<thead>
44+
<tr class="border-b border-gray-200">
45+
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Member</th>
46+
<th
47+
class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:text-gray-700 select-none"
48+
{{on "click" this.handleLastSeenSortClick}}
49+
data-test-sort-header="lastSeen"
2950
>
30-
{{option.label}}
31-
</button>
51+
<span class="inline-flex items-center gap-1">
52+
Last Seen
53+
{{#if this.lastSeenSortDirection}}
54+
<svg class="w-3 h-3 {{if (eq this.lastSeenSortDirection 'asc') '' 'rotate-180'}}" fill="currentColor" viewBox="0 0 20 20">
55+
<path fill-rule="evenodd" d="M5.293 7.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L10 4.414l-3.293 3.293a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
56+
</svg>
57+
{{/if}}
58+
</span>
59+
</th>
60+
<th class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Joined</th>
61+
<th class="px-3 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Attempts</th>
62+
<th class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Courses</th>
63+
<th class="px-3 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider"></th>
64+
</tr>
65+
</thead>
66+
<tbody>
67+
{{#each this.sortedMemberships as |membership|}}
68+
<TeamPage::MembersTable::Row
69+
@membership={{membership}}
70+
@currentUserIsTeamAdmin={{this.currentUserIsTeamAdmin}}
71+
@attempts={{this.getAttempts membership}}
72+
/>
3273
{{/each}}
33-
</div>
34-
{{/if}}
74+
</tbody>
75+
</table>
3576
</div>
36-
</div>
37-
</:headerRight>
3877

39-
<:default>
40-
<div class="overflow-x-auto -mx-4 md:-mx-6">
41-
<table class="min-w-full">
42-
<thead>
43-
<tr class="border-b border-gray-200">
44-
<th
45-
class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:text-gray-700 select-none"
46-
{{on "click" (fn this.handleSortClick "member")}}
47-
data-test-sort-header="member"
48-
>
49-
<span class="inline-flex items-center gap-1">
50-
Member
51-
{{#if (eq this.sortColumn "member")}}
52-
<svg class="w-3 h-3 {{if (eq this.sortDirection 'asc') '' 'rotate-180'}}" fill="currentColor" viewBox="0 0 20 20">
53-
<path fill-rule="evenodd" d="M5.293 7.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L10 4.414l-3.293 3.293a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
54-
</svg>
55-
{{/if}}
56-
</span>
57-
</th>
58-
<th
59-
class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:text-gray-700 select-none"
60-
{{on "click" (fn this.handleSortClick "lastSeen")}}
61-
data-test-sort-header="lastSeen"
62-
>
63-
<span class="inline-flex items-center gap-1">
64-
Last Seen
65-
{{#if (eq this.sortColumn "lastSeen")}}
66-
<svg class="w-3 h-3 {{if (eq this.sortDirection 'asc') '' 'rotate-180'}}" fill="currentColor" viewBox="0 0 20 20">
67-
<path fill-rule="evenodd" d="M5.293 7.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L10 4.414l-3.293 3.293a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
68-
</svg>
69-
{{/if}}
70-
</span>
71-
</th>
72-
<th
73-
class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:text-gray-700 select-none"
74-
{{on "click" (fn this.handleSortClick "joined")}}
75-
data-test-sort-header="joined"
76-
>
77-
<span class="inline-flex items-center gap-1">
78-
Joined
79-
{{#if (eq this.sortColumn "joined")}}
80-
<svg class="w-3 h-3 {{if (eq this.sortDirection 'asc') '' 'rotate-180'}}" fill="currentColor" viewBox="0 0 20 20">
81-
<path fill-rule="evenodd" d="M5.293 7.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L10 4.414l-3.293 3.293a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
82-
</svg>
83-
{{/if}}
84-
</span>
85-
</th>
86-
<th
87-
class="px-3 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:text-gray-700 select-none"
88-
{{on "click" (fn this.handleSortClick "attempts")}}
89-
data-test-sort-header="attempts"
90-
>
91-
<span class="inline-flex items-center gap-1 justify-end">
92-
Attempts
93-
{{#if (eq this.sortColumn "attempts")}}
94-
<svg class="w-3 h-3 {{if (eq this.sortDirection 'asc') '' 'rotate-180'}}" fill="currentColor" viewBox="0 0 20 20">
95-
<path fill-rule="evenodd" d="M5.293 7.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L10 4.414l-3.293 3.293a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
96-
</svg>
97-
{{/if}}
98-
</span>
99-
</th>
100-
<th
101-
class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:text-gray-700 select-none"
102-
{{on "click" (fn this.handleSortClick "courses")}}
103-
data-test-sort-header="courses"
104-
>
105-
<span class="inline-flex items-center gap-1">
106-
Courses
107-
{{#if (eq this.sortColumn "courses")}}
108-
<svg class="w-3 h-3 {{if (eq this.sortDirection 'asc') '' 'rotate-180'}}" fill="currentColor" viewBox="0 0 20 20">
109-
<path fill-rule="evenodd" d="M5.293 7.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L10 4.414l-3.293 3.293a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
110-
</svg>
111-
{{/if}}
112-
</span>
113-
</th>
114-
<th class="px-3 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider"></th>
115-
</tr>
116-
</thead>
117-
<tbody>
118-
{{#each this.sortedMemberships as |membership|}}
119-
<TeamPage::MembersTable::Row
120-
@membership={{membership}}
121-
@currentUserIsTeamAdmin={{this.currentUserIsTeamAdmin}}
122-
@attempts={{this.getAttempts membership}}
123-
/>
124-
{{/each}}
125-
</tbody>
126-
</table>
127-
</div>
78+
<div class="mt-6">
79+
<div class="inline-flex border-b border-teal-500 uppercase text-teal-500 font-bold text-sm mb-4">
80+
Invite URL
81+
</div>
12882

129-
<div class="mt-6">
130-
<div class="inline-flex border-b border-teal-500 uppercase text-teal-500 font-bold text-sm mb-4">
131-
Invite URL
132-
</div>
83+
{{#if this.currentUserIsTeamAdmin}}
84+
<div class="mb-3 text-gray-600 text-sm" data-test-invite-url-description>
85+
To invite new members, send them this invite URL.
86+
</div>
13387

134-
{{#if this.currentUserIsTeamAdmin}}
135-
<div class="mb-3 text-gray-600 text-sm" data-test-invite-url-description>
136-
To invite new members, send them this invite URL.
88+
<CopyableCode @code="{{@team.inviteUrl}}" />
89+
{{else}}
90+
<div class="text-gray-600 text-sm" data-test-invite-url-description>
91+
To invite new members, ask one of the team admins for an invite URL.
92+
</div>
93+
{{/if}}
13794
</div>
95+
</:default>
96+
</TeamPage::Section>
97+
{{else}}
98+
<TeamPage::Section @title="Team Members" ...attributes>
99+
<div class="overflow-x-auto -mx-4 md:-mx-6">
100+
<table class="min-w-full">
101+
<thead>
102+
<tr class="border-b border-gray-200">
103+
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Member</th>
104+
<th
105+
class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:text-gray-700 select-none"
106+
{{on "click" this.handleLastSeenSortClick}}
107+
data-test-sort-header="lastSeen"
108+
>
109+
<span class="inline-flex items-center gap-1">
110+
Last Seen
111+
{{#if this.lastSeenSortDirection}}
112+
<svg class="w-3 h-3 {{if (eq this.lastSeenSortDirection 'asc') '' 'rotate-180'}}" fill="currentColor" viewBox="0 0 20 20">
113+
<path fill-rule="evenodd" d="M5.293 7.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L10 4.414l-3.293 3.293a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
114+
</svg>
115+
{{/if}}
116+
</span>
117+
</th>
118+
<th class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Joined</th>
119+
<th class="px-3 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Attempts</th>
120+
<th class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Courses</th>
121+
<th class="px-3 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider"></th>
122+
</tr>
123+
</thead>
124+
<tbody>
125+
{{#each this.sortedMemberships as |membership|}}
126+
<TeamPage::MembersTable::Row
127+
@membership={{membership}}
128+
@currentUserIsTeamAdmin={{this.currentUserIsTeamAdmin}}
129+
@attempts={{this.getAttempts membership}}
130+
/>
131+
{{/each}}
132+
</tbody>
133+
</table>
134+
</div>
138135

139-
<CopyableCode @code="{{@team.inviteUrl}}" />
140-
{{else}}
141-
<div class="text-gray-600 text-sm" data-test-invite-url-description>
142-
To invite new members, ask one of the team admins for an invite URL.
136+
<div class="mt-6">
137+
<div class="inline-flex border-b border-teal-500 uppercase text-teal-500 font-bold text-sm mb-4">
138+
Invite URL
143139
</div>
144-
{{/if}}
145-
</div>
146-
</:default>
147-
</TeamPage::Section>
140+
141+
{{#if this.currentUserIsTeamAdmin}}
142+
<div class="mb-3 text-gray-600 text-sm" data-test-invite-url-description>
143+
To invite new members, send them this invite URL.
144+
</div>
145+
146+
<CopyableCode @code="{{@team.inviteUrl}}" />
147+
{{else}}
148+
<div class="text-gray-600 text-sm" data-test-invite-url-description>
149+
To invite new members, ask one of the team admins for an invite URL.
150+
</div>
151+
{{/if}}
152+
</div>
153+
</TeamPage::Section>
154+
{{/if}}

0 commit comments

Comments
 (0)