TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-07 03:22:21 +03:00
Code Issues Projects Releases Wiki Activity

Added basic add/delete action on filter UI

Browse Source 
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 2021-08-04 15:52:47 +05:30
parent 9ee66f8b85
commit 1492527b3e
2 changed files with 82 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

129
ghost/admin/app/components/gh-members-filter.hbs
View File

@ -18,93 +18,48 @@
> >
<h3>Filter list</h3> <h3>Filter list</h3>
<section class="gh-filters"> <section class="gh-filters">
<div class="gh-filter-block"> {{#each this.filters as |filter|}}
<GhFormGroup @property="filter-1" @classNames="max-width"> <div class="gh-filter-block">
<div class="gh-filter-inputgroup"> <GhFormGroup @property={{filter.id}} @classNames="max-width">
<span class="gh-select"> <div class="gh-filter-inputgroup">
<OneWaySelect <span class="gh-select">
@options={{this.availableFilterProperties}} <OneWaySelect
@optionValuePath="name" @value={{filter.type}}
@optionLabelPath="label" @options={{this.availableFilterProperties}}
@optionTargetPath="name" @optionValuePath="name"
@groupLabelPath="group" @optionLabelPath="label"
/> @optionTargetPath="name"
{{svg-jar "arrow-down-small"}} @groupLabelPath="group"
</span> />
<span class="gh-select"> {{svg-jar "arrow-down-small"}}
<OneWaySelect </span>
@options={{this.availableFilterRelations}} <span class="gh-select">
@optionValuePath="name" <OneWaySelect
@optionLabelPath="label" @value={{filter.relation}}
@optionTargetPath="name" @options={{this.availableFilterRelations}}
/> @optionValuePath="name"
{{svg-jar "arrow-down-small"}} @optionLabelPath="label"
</span> @optionTargetPath="name"
<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> {{svg-jar "arrow-down-small"}}
</div> </span>
<GhErrorMessage @errors={{member.errors}} @property="filter-property-1" /> <GhTextInput @name="filter-value-1" @value={{filter.value}} />
</GhFormGroup> <button
</div> 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-divider">And</div> --}}
<div class="gh-filter-block"> <button type="button"
<GhFormGroup @property="filter-2" @classNames="max-width"> class="gh-btn gh-btn-text gh-btn-link green gh-btn-icon gh-add-filter"
<div class="gh-filter-inputgroup"> {{action "addFilter"}}
<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">
<span>{{svg-jar "add"}} Add filter</span> <span>{{svg-jar "add"}} Add filter</span>
</button> </button>
</section> </section>
@ -192,4 +147,4 @@
{{#if order.name}}{{order.name}}{{else}}<span class="red">Unknown</span>{{/if}} {{#if order.name}}{{order.name}}{{else}}<span class="red">Unknown</span>{{/if}}
</PowerSelect> </PowerSelect>
</div> </div>
{{/if}} {{/if}}

53
ghost/admin/app/components/gh-members-filter.js
View File

@ -1,18 +1,21 @@
import Component from '@glimmer/component'; import Component from '@glimmer/component';
import {A} from '@ember/array';
import {action} from '@ember/object';
import {inject as service} from '@ember/service'; import {inject as service} from '@ember/service';
import {tracked} from '@glimmer/tracking';
const FILTER_PROPERTIES = [ const FILTER_PROPERTIES = [
// Basic // Basic
{label: 'Name', name: 'x', group: 'Basic'}, {label: 'Name', name: 'name', group: 'Basic'},
{label: 'Email', name: 'x', group: 'Basic'}, {label: 'Email', name: 'email', group: 'Basic'},
{label: 'Location', name: 'x', group: 'Basic'}, {label: 'Location', name: 'location', group: 'Basic'},
{label: 'Newsletter subscription status', name: 'x', group: 'Basic'}, {label: 'Newsletter subscription status', name: 'newsletter-subscription-status', group: 'Basic'},
{label: 'Label', name: 'x', group: 'Basic'}, {label: 'Label', name: 'label', group: 'Basic'},
// Member subscription // Member subscription
{label: 'Member status', name: 'x', group: 'Subscription'}, {label: 'Member status', name: 'member-status', group: 'Subscription'},
{label: 'Tier', name: 'x', group: 'Subscription'}, {label: 'Tier', name: 'tier', group: 'Subscription'},
{label: 'Billing period', name: 'x', group: 'Subscription'}, {label: 'Billing period', name: 'billing-period', group: 'Subscription'},
// Emails // Emails
{label: 'Emails sent (all time)', name: 'x', group: 'Email'}, {label: 'Emails sent (all time)', name: 'x', group: 'Email'},
@ -28,19 +31,43 @@ const FILTER_PROPERTIES = [
]; ];
const FILTER_RELATIONS = [ const FILTER_RELATIONS = [
{label: 'is', name: 'x'}, {label: 'is', name: 'is'},
{label: 'is not', name: 'x'}, {label: 'is not', name: 'is-not'},
{label: 'contains', name: 'x'}, {label: 'contains', name: 'contains'},
{label: 'exists', name: 'x'}, {label: 'exists', name: 'exists'},
{label: 'does not exist', name: 'x'} {label: 'does not exist', name: 'does-not-exist'}
]; ];
export default class GhMembersFilterComponent extends Component { export default class GhMembersFilterComponent extends Component {
@service session @service session
@tracked filters = A([
{
id: `filter-0`,
type: 'email',
relation: 'is-not',
value: ''
}
]);
constructor(...args) { constructor(...args) {
super(...args); super(...args);
this.availableFilterProperties = FILTER_PROPERTIES; this.availableFilterProperties = FILTER_PROPERTIES;
this.availableFilterRelations = FILTER_RELATIONS; 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);
}
} }