mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-28 22:43:30 +03:00
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:
parent
71e541f2c4
commit
adaecde430
@ -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>
|
@ -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
|
||||
});
|
||||
}
|
||||
}
|
||||
|
@ -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>
|
||||
|
@ -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
|
||||
|
@ -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) {
|
||||
|
@ -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}} />
|
||||
|
Loading…
Reference in New Issue
Block a user