mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-01-05 09:50:34 +03:00
Added basic add/delete action on filter UI
refs https://github.com/TryGhost/Team/issues/943 Adds basic add/delete button action on dynamic filter UI to create custom filter blocks
This commit is contained in:
Rishabh
parent
9ee66f8b85
commit
1492527b3e
@ -18,93 +18,48 @@
|
||||
>
|
||||
<h3>Filter list</h3>
|
||||
<section class="gh-filters">
|
||||
<div class="gh-filter-block">
|
||||
<GhFormGroup @property="filter-1" @classNames="max-width">
|
||||
<div class="gh-filter-inputgroup">
|
||||
<span class="gh-select">
|
||||
<OneWaySelect
|
||||
@options={{this.availableFilterProperties}}
|
||||
@optionValuePath="name"
|
||||
@optionLabelPath="label"
|
||||
@optionTargetPath="name"
|
||||
@groupLabelPath="group"
|
||||
/>
|
||||
{{svg-jar "arrow-down-small"}}
|
||||
</span>
|
||||
<span class="gh-select">
|
||||
<OneWaySelect
|
||||
@options={{this.availableFilterRelations}}
|
||||
@optionValuePath="name"
|
||||
@optionLabelPath="label"
|
||||
@optionTargetPath="name"
|
||||
/>
|
||||
{{svg-jar "arrow-down-small"}}
|
||||
</span>
|
||||
<GhTextInput @id="filter-value-1" @name="filter-value-1" />
|
||||
<button class="gh-delete-filter" title="Delete filter">{{svg-jar "close"}}<span class="hidden">Delete filter</span></button>
|
||||
</div>
|
||||
<GhErrorMessage @errors={{member.errors}} @property="filter-property-1" />
|
||||
</GhFormGroup>
|
||||
</div>
|
||||
{{#each this.filters as |filter|}}
|
||||
<div class="gh-filter-block">
|
||||
<GhFormGroup @property={{filter.id}} @classNames="max-width">
|
||||
<div class="gh-filter-inputgroup">
|
||||
<span class="gh-select">
|
||||
<OneWaySelect
|
||||
@value={{filter.type}}
|
||||
@options={{this.availableFilterProperties}}
|
||||
@optionValuePath="name"
|
||||
@optionLabelPath="label"
|
||||
@optionTargetPath="name"
|
||||
@groupLabelPath="group"
|
||||
/>
|
||||
{{svg-jar "arrow-down-small"}}
|
||||
</span>
|
||||
<span class="gh-select">
|
||||
<OneWaySelect
|
||||
@value={{filter.relation}}
|
||||
@options={{this.availableFilterRelations}}
|
||||
@optionValuePath="name"
|
||||
@optionLabelPath="label"
|
||||
@optionTargetPath="name"
|
||||
/>
|
||||
{{svg-jar "arrow-down-small"}}
|
||||
</span>
|
||||
<GhTextInput @name="filter-value-1" @value={{filter.value}} />
|
||||
<button
|
||||
class="gh-delete-filter" title="Delete filter"
|
||||
{{action "deleteFilter" filter.id}}
|
||||
>
|
||||
{{svg-jar "close"}} <span class="hidden">Delete filter</span>
|
||||
</button>
|
||||
</div>
|
||||
<GhErrorMessage @errors={{member.errors}} @property="filter-property-1" />
|
||||
</GhFormGroup>
|
||||
</div>
|
||||
{{/each}}
|
||||
{{!-- <div class="gh-filter-block-divider">And</div> --}}
|
||||
<div class="gh-filter-block">
|
||||
<GhFormGroup @property="filter-2" @classNames="max-width">
|
||||
<div class="gh-filter-inputgroup">
|
||||
<span class="gh-select">
|
||||
<OneWaySelect
|
||||
@options={{this.availableFilterProperties}}
|
||||
@optionValuePath="name"
|
||||
@optionLabelPath="label"
|
||||
@optionTargetPath="name"
|
||||
@groupLabelPath="group"
|
||||
/>
|
||||
{{svg-jar "arrow-down-small"}}
|
||||
</span>
|
||||
<span class="gh-select">
|
||||
<OneWaySelect
|
||||
@options={{this.availableFilterRelations}}
|
||||
@optionValuePath="name"
|
||||
@optionLabelPath="label"
|
||||
@optionTargetPath="name"
|
||||
/>
|
||||
{{svg-jar "arrow-down-small"}}
|
||||
</span>
|
||||
<GhTextInput @id="filter-value-2" @name="filter-value-2" />
|
||||
<button class="gh-delete-filter" title="Delete filter">{{svg-jar "close"}}<span class="hidden">Delete filter</span></button>
|
||||
</div>
|
||||
<GhErrorMessage @errors={{member.errors}} @property="filter-property-2" />
|
||||
</GhFormGroup>
|
||||
</div>
|
||||
{{!-- <div class="gh-filter-block-divider">And</div> --}}
|
||||
<div class="gh-filter-block">
|
||||
<GhFormGroup @property="filter-3" @classNames="max-width">
|
||||
<div class="gh-filter-inputgroup">
|
||||
<span class="gh-select">
|
||||
<OneWaySelect
|
||||
@options={{this.availableFilterProperties}}
|
||||
@optionValuePath="name"
|
||||
@optionLabelPath="label"
|
||||
@optionTargetPath="name"
|
||||
@groupLabelPath="group"
|
||||
/>
|
||||
{{svg-jar "arrow-down-small"}}
|
||||
</span>
|
||||
<span class="gh-select">
|
||||
<OneWaySelect
|
||||
@options={{this.availableFilterRelations}}
|
||||
@optionValuePath="name"
|
||||
@optionLabelPath="label"
|
||||
@optionTargetPath="name"
|
||||
/>
|
||||
{{svg-jar "arrow-down-small"}}
|
||||
</span>
|
||||
<GhTextInput @id="filter-value-3" @name="filter-value-3" />
|
||||
<button class="gh-delete-filter" title="Delete filter">{{svg-jar "close"}}<span class="hidden">Delete filter</span></button>
|
||||
</div>
|
||||
<GhErrorMessage @errors={{member.errors}} @property="filter-property-3" />
|
||||
</GhFormGroup>
|
||||
</div>
|
||||
<button type="button" class="gh-btn gh-btn-text gh-btn-link green gh-btn-icon gh-add-filter">
|
||||
<button type="button"
|
||||
class="gh-btn gh-btn-text gh-btn-link green gh-btn-icon gh-add-filter"
|
||||
{{action "addFilter"}}
|
||||
>
|
||||
<span>{{svg-jar "add"}} Add filter</span>
|
||||
</button>
|
||||
</section>
|
||||
@ -192,4 +147,4 @@
|
||||
{{#if order.name}}{{order.name}}{{else}}<span class="red">Unknown</span>{{/if}}
|
||||
</PowerSelect>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
|
||||
@ -1,18 +1,21 @@
|
||||
import Component from '@glimmer/component';
|
||||
import {A} from '@ember/array';
|
||||
import {action} from '@ember/object';
|
||||
import {inject as service} from '@ember/service';
|
||||
import {tracked} from '@glimmer/tracking';
|
||||
|
||||
const FILTER_PROPERTIES = [
|
||||
// Basic
|
||||
{label: 'Name', name: 'x', group: 'Basic'},
|
||||
{label: 'Email', name: 'x', group: 'Basic'},
|
||||
{label: 'Location', name: 'x', group: 'Basic'},
|
||||
{label: 'Newsletter subscription status', name: 'x', group: 'Basic'},
|
||||
{label: 'Label', name: 'x', group: 'Basic'},
|
||||
{label: 'Name', name: 'name', group: 'Basic'},
|
||||
{label: 'Email', name: 'email', group: 'Basic'},
|
||||
{label: 'Location', name: 'location', group: 'Basic'},
|
||||
{label: 'Newsletter subscription status', name: 'newsletter-subscription-status', group: 'Basic'},
|
||||
{label: 'Label', name: 'label', group: 'Basic'},
|
||||
|
||||
// Member subscription
|
||||
{label: 'Member status', name: 'x', group: 'Subscription'},
|
||||
{label: 'Tier', name: 'x', group: 'Subscription'},
|
||||
{label: 'Billing period', name: 'x', group: 'Subscription'},
|
||||
{label: 'Member status', name: 'member-status', group: 'Subscription'},
|
||||
{label: 'Tier', name: 'tier', group: 'Subscription'},
|
||||
{label: 'Billing period', name: 'billing-period', group: 'Subscription'},
|
||||
|
||||
// Emails
|
||||
{label: 'Emails sent (all time)', name: 'x', group: 'Email'},
|
||||
@ -28,19 +31,43 @@ const FILTER_PROPERTIES = [
|
||||
];
|
||||
|
||||
const FILTER_RELATIONS = [
|
||||
{label: 'is', name: 'x'},
|
||||
{label: 'is not', name: 'x'},
|
||||
{label: 'contains', name: 'x'},
|
||||
{label: 'exists', name: 'x'},
|
||||
{label: 'does not exist', name: 'x'}
|
||||
{label: 'is', name: 'is'},
|
||||
{label: 'is not', name: 'is-not'},
|
||||
{label: 'contains', name: 'contains'},
|
||||
{label: 'exists', name: 'exists'},
|
||||
{label: 'does not exist', name: 'does-not-exist'}
|
||||
];
|
||||
|
||||
export default class GhMembersFilterComponent extends Component {
|
||||
@service session
|
||||
@tracked filters = A([
|
||||
{
|
||||
id: `filter-0`,
|
||||
type: 'email',
|
||||
relation: 'is-not',
|
||||
value: ''
|
||||
}
|
||||
]);
|
||||
|
||||
constructor(...args) {
|
||||
super(...args);
|
||||
this.availableFilterProperties = FILTER_PROPERTIES;
|
||||
this.availableFilterRelations = FILTER_RELATIONS;
|
||||
}
|
||||
|
||||
@action
|
||||
addFilter() {
|
||||
this.filters.pushObject({
|
||||
id: `filter-${this.filters.length}`,
|
||||
type: 'email',
|
||||
relation: 'is-not',
|
||||
value: ''
|
||||
});
|
||||
}
|
||||
|
||||
@action
|
||||
deleteFilter(filterId) {
|
||||
const filterToDelete = this.filters.findBy('id', filterId);
|
||||
this.filters.removeObject(filterToDelete);
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user