Split event and resource filtering apart

refs https://github.com/TryGhost/Toolbox/issues/356

- events and resources needed to be filtered and sent to the API
  differently
- this commit splits them apart and wires up the toggles to query params
  and therefore API requests
This commit is contained in:
Daniel Lockyer 2022-08-22 17:12:36 +02:00
parent 71e541f2c4
commit adaecde430
No known key found for this signature in database
GPG Key ID: D21186F0B47295AD
6 changed files with 84 additions and 27 deletions

View File

@ -1,6 +1,6 @@
<GhBasicDropdown @verticalPosition="below" as |dd|>
<dd.Trigger class="gh-btn gh-btn-icon gh-btn-action-icon">
<span class={{if @excludedEvents "gh-btn-label-green"}}>
<span class={{if (or @excludedEvents @excludedResources) "gh-btn-label-green"}}>
{{svg-jar "filter"}}
Filter events
</span>
@ -11,11 +11,11 @@
<ul class="ember-power-select-options" role="listbox">
{{#each this.eventTypes as |type idx|}}
<li class="form-group ember-power-select-option mb0 for-checkbox">
<label class="checkbox" for="type-{{idx}}">
<label class="checkbox" for="event-type-{{idx}}">
<input
type="checkbox"
checked={{type.isSelected}}
id="type-{{idx}}"
id="event-type-{{idx}}"
name="eventTypes"
class="gh-input post-settings-featured"
{{on "input" (fn this.toggleEventType type.event)}}>
@ -24,6 +24,22 @@
</label>
</li>
{{/each}}
<hr />
{{#each this.resourceTypes as |type idx|}}
<li class="form-group ember-power-select-option mb0 for-checkbox">
<label class="checkbox" for="resource-type-{{idx}}">
<input
type="checkbox"
checked={{type.isSelected}}
id="resource-type-{{idx}}"
name="resourceTypes"
class="gh-input post-settings-featured"
{{on "input" (fn this.toggleResourceType type.event)}}>
<span class="input-toggle-component"></span>
<p>{{type.name}}</p>
</label>
</li>
{{/each}}
</ul>
</dd.Content>
</GhBasicDropdown>

View File

@ -3,9 +3,12 @@ import {action} from '@ember/object';
import {inject as service} from '@ember/service';
const ALL_EVENT_TYPES = [
{event: 'created', icon: 'event-filter-signup', name: 'Created'},
{event: 'added', icon: 'event-filter-signup', name: 'Added'},
{event: 'edited', icon: 'event-filter-login', name: 'Edited'},
{event: 'deleted', icon: 'event-filter-subscription', name: 'Deleted'},
{event: 'deleted', icon: 'event-filter-subscription', name: 'Deleted'}
];
const ALL_RESOURCE_TYPES = [
{event: 'post', icon: 'event-filter-payment', name: 'Posts'},
{event: 'pages', icon: 'event-filter-payment', name: 'Pages'},
{event: 'tag', icon: 'event-filter-newsletter', name: 'Tags'},
@ -18,20 +21,24 @@ export default class AuditLogEventFilter extends Component {
@service settings;
@service feature;
get availableEventTypes() {
const extended = [...ALL_EVENT_TYPES];
if (this.args.hiddenEvents?.length) {
return extended.filter(t => !this.args.hiddenEvents.includes(t.event));
} else {
return extended;
}
}
excludedEvents = null;
excludedResources = null;
get eventTypes() {
const excludedEvents = (this.args.excludedEvents || '').split(',');
return this.availableEventTypes.map(type => ({
return ALL_EVENT_TYPES.map(type => ({
event: type.event,
icon: type.icon,
name: type.name,
isSelected: !excludedEvents.includes(type.event)
}));
}
get resourceTypes() {
const excludedEvents = (this.args.excludedResources || '').split(',');
return ALL_RESOURCE_TYPES.map(type => ({
event: type.event,
icon: type.icon,
name: type.name,
@ -49,8 +56,27 @@ export default class AuditLogEventFilter extends Component {
excludedEvents.add(eventType);
}
const excludeString = Array.from(excludedEvents).join(',');
this.excludedEvents = Array.from(excludedEvents).join(',');
this.args.onChange({
excludedEvents: this.excludedEvents,
excludedResources: this.excludedResources
});
}
this.args.onChange(excludeString || null);
@action
toggleResourceType(resourceType) {
const excludedResources = new Set(this.resourceTypes.reject(type => type.isSelected).map(type => type.event));
if (excludedResources.has(resourceType)) {
excludedResources.delete(resourceType);
} else {
excludedResources.add(resourceType);
}
this.excludedResources = Array.from(excludedResources).join(',');
this.args.onChange({
excludedEvents: this.excludedEvents,
excludedResources: this.excludedResources
});
}
}

View File

@ -1 +1 @@
<div class="gh-btn"><span>Filter member {{svg-jar "arrow-down-small"}}</span></div>
<div class="gh-btn"><span>Filter user {{svg-jar "arrow-down-small"}}</span></div>

View File

@ -8,11 +8,16 @@ export default class AuditLogController extends Controller {
@service settings;
@service store;
queryParams = ['excludedResources', 'user'];
queryParams = ['excludedEvents', 'excludedResources', 'user'];
@tracked excludedEvents = null;
@tracked excludedResources = null;
@tracked user = null;
get fullExcludedEvents() {
return (this.excludedEvents || '').split(',');
}
get fullExcludedResources() {
return (this.excludedResources || '').split(',');
}
@ -28,8 +33,8 @@ export default class AuditLogController extends Controller {
}
@action
changeExcludedResources(newList) {
this.router.transitionTo({queryParams: {excludedResources: newList}});
changeExcludedItems({excludedEvents, excludedResources} = {}) {
this.router.transitionTo({queryParams: {excludedEvents, excludedResources}});
}
@action

View File

@ -10,19 +10,29 @@ export default class AuditLogEventFilter extends Helper {
compute(
positionalParams,
{excludedEvents = [], user = ''}
{excludedEvents = [], excludedResources = [], user = ''}
) {
const excludedEventsSet = new Set();
const excludedResourcesSet = new Set();
if (excludedEvents.length) {
excludedEvents.forEach(type => excludedEventsSet.add(type));
}
if (excludedResources.length) {
excludedResources.forEach(type => excludedResourcesSet.add(type));
}
let filterParts = [];
const excludedEventsArray = Array.from(excludedEventsSet).reject(isBlank);
if (excludedEventsArray.length > 0) {
filterParts.push(`resource_type:-[${excludedEventsArray.join(',')}]`);
filterParts.push(`event:-[${excludedEventsArray.join(',')}]`);
}
const excludedResourcesArray = Array.from(excludedResourcesSet).reject(isBlank);
if (excludedResourcesArray.length > 0) {
filterParts.push(`resource_type:-[${excludedResourcesArray.join(',')}]`);
}
if (user) {

View File

@ -11,9 +11,9 @@
</h2>
<div class="view-actions">
<Settings::AuditLog::EventFilter
@excludedEvents={{this.excludedResources}}
@hiddenEvents={{this.hiddenResources}}
@onChange={{this.changeExcludedResources}} />
@excludedEvents={{this.excludedEvents}}
@excludedResources={{this.excludedResources}}
@onChange={{this.changeExcludedItems}} />
<Settings::AuditLog::Search
@selected={{this.userRecord}}
@ -21,7 +21,7 @@
</div>
</GhCanvasHeader>
<div class="view-container">
{{#let (audit-log-event-fetcher filter=(audit-log-event-filter excludedEvents=this.fullExcludedResources user=this.user) pageSize=50) as |eventsFetcher|}}
{{#let (audit-log-event-fetcher filter=(audit-log-event-filter excludedEvents=this.fullExcludedEvents excludedResources=this.fullExcludedResources user=this.user) pageSize=50) as |eventsFetcher|}}
{{#if eventsFetcher.data}}
<div class="gh-list-scrolling">
<Settings::AuditLog::Table @events={{eventsFetcher.data}} />