Ghost/ghost/admin/app/components/gh-post-settings-menu/visibility-segment-select.js
Kevin Ansfield 8cc4c6c4a1 Dropped ember-concurrency-decorators dependency
no issue

- since `ember-concurrency@2.0` it's possible to use the standard imports as decorators removing the need for the extra `ember-concurrency-decorators` dependency and imports
2022-02-09 10:49:38 +00:00

103 lines
2.9 KiB
JavaScript

import Component from '@glimmer/component';
import {action} from '@ember/object';
import {inject as service} from '@ember/service';
import {task} from 'ember-concurrency';
import {tracked} from '@glimmer/tracking';
export default class VisibilitySegmentSelect extends Component {
@service store;
@service feature;
@tracked _options = [];
@tracked products = [];
get renderInPlace() {
return this.args.renderInPlace === undefined ? false : this.args.renderInPlace;
}
constructor() {
super(...arguments);
this.fetchOptionsTask.perform();
}
get options() {
return this._options;
}
get flatOptions() {
const options = [];
function getOptions(option) {
if (option.options) {
return option.options.forEach(getOptions);
}
options.push(option);
}
this._options.forEach(getOptions);
return options;
}
get selectedOptions() {
const tierList = this.args.tiers.map((product) => {
return this.products.find((p) => {
return p.id === product.id;
});
}).filter(d => !!d);
const tierIdList = tierList.map(d => d.id);
return this.flatOptions.filter(option => tierIdList.includes(option.id));
}
@action
setSegment(options) {
let ids = options.mapBy('id').map((id) => {
let product = this.products.find((p) => {
return p.id === id;
});
return {
id: product.id,
slug: product.slug,
name: product.name
};
}) || [];
this.args.onChange?.(ids);
}
@task
*fetchOptionsTask() {
const options = yield [];
if (this.feature.get('multipleProducts')) {
// fetch all products with count
// TODO: add `include: 'count.members` to query once API supports
const products = yield this.store.query('product', {filter: 'type:paid', limit: 'all', include: 'monthly_price,yearly_price,benefits'});
this.products = products;
if (products.length > 0) {
const productsGroup = {
groupName: 'Tiers',
options: []
};
products.forEach((product) => {
productsGroup.options.push({
name: product.name,
id: product.id,
count: product.count?.members,
class: 'segment-product'
});
});
options.push(productsGroup);
if (this.args.selectDefaultProduct && !this.args.tiers) {
this.setSegment([productsGroup.options[0]]);
}
}
}
this._options = options;
}
}