mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-02-24 23:48:13 -05:00
Added multiple product option to Portal links
refs https://github.com/TryGhost/Team/issues/825 With multiple products, it's possible to link to any products from themes. - updates links area in Portal to be able to handle multiple products - the new product selector for links is behind the alpha flag
This commit is contained in:
Rishabh
parent
1bfee18cbe
commit
42691c5cc9
3 changed files with 196 additions and 67 deletions
|
|
@ -1,4 +1,4 @@
|
|||
<div class="gh-portal-links-container">
|
||||
<div class="gh-portal-links-container" {{did-insert (perform this.fetchProducts)}}>
|
||||
<div class="gh-portal-links-main">
|
||||
<h2>Links</h2>
|
||||
<p>Use these {{if isLink "links" "data attributes"}} in your theme to show pages of Portal.</p>
|
||||
|
|
@ -81,69 +81,159 @@
|
|||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class='pagename'>Sign up/Monthly</td>
|
||||
<td class='page-url'>
|
||||
<div class="gh-portal-page-url-container">
|
||||
<div class="page-url-label">
|
||||
{{#if isLink}}
|
||||
<span class="page-url-disabled">{{this.siteUrl}}/</span><span>#/portal/signup/monthly</span>
|
||||
{{else}}
|
||||
data-portal="signup/monthly"
|
||||
{{/if}}
|
||||
{{#if (and (feature "multipleProducts") (gt this.products.length 1))}}
|
||||
<tr>
|
||||
<td colspan="2"><hr class="gh-portal-links-group-divider" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class='pagename bold'>Product</td>
|
||||
<td class='page-url'>
|
||||
<span
|
||||
class="gh-select mt2"
|
||||
data-select-text="test"
|
||||
tabindex="0"
|
||||
>
|
||||
<OneWaySelect
|
||||
@id="portal-product-link"
|
||||
@name="portal[product-link]"
|
||||
@options={{this.productOptions}}
|
||||
@optionValuePath="name"
|
||||
@optionLabelPath="label"
|
||||
@value={{this.selectedProduct}}
|
||||
@update={{action "setSelectedProduct"}}
|
||||
/>
|
||||
{{svg-jar "arrow-down-small"}}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class='pagename'>Sign up/Monthly</td>
|
||||
<td class='page-url'>
|
||||
<div class="gh-portal-page-url-container">
|
||||
<div class="page-url-label">
|
||||
{{#if isLink}}
|
||||
<span class="page-url-disabled">{{this.siteUrl}}/</span><span>#/portal/signup{{this.selectedProductIdPath}}/monthly</span>
|
||||
{{else}}
|
||||
data-portal="signup{{this.selectedProductIdPath}}/monthly"
|
||||
{{/if}}
|
||||
</div>
|
||||
<button type="button" {{action (perform this.copyProductSignupLink "monthly")}} class="gh-portal-setting-copy">
|
||||
{{#if (and this.copyProductSignupLink.isRunning (eq this.copiedSignupInterval "monthly"))}}
|
||||
{{svg-jar "check-circle" class="w3 v-mid mr2 stroke-darkgrey"}} Copied
|
||||
{{else}}
|
||||
<span data-tooltip="Copy">{{svg-jar "copy" class="w4 v-mid fill-darkgrey"}}</span>
|
||||
{{/if}}
|
||||
</button>
|
||||
</div>
|
||||
<button type="button" {{action (perform this.copyStaticLink "signup/monthly")}} class="gh-portal-setting-copy">
|
||||
{{#if (and this.copyStaticLink.isRunning (eq this.copiedPrice "signup/monthly"))}}
|
||||
{{svg-jar "check-circle" class="w3 v-mid mr2 stroke-darkgrey"}} Copied
|
||||
{{else}}
|
||||
<span data-tooltip="Copy">{{svg-jar "copy" class="w4 v-mid fill-darkgrey"}}</span>
|
||||
{{/if}}
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class='pagename'>Sign up/Yearly</td>
|
||||
<td class='page-url'>
|
||||
<div class="gh-portal-page-url-container">
|
||||
<div class="page-url-label">
|
||||
{{#if isLink}}
|
||||
<span class="page-url-disabled">{{this.siteUrl}}/</span><span>#/portal/signup/yearly</span>
|
||||
{{else}}
|
||||
data-portal="signup/yearly"
|
||||
{{/if}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class='pagename'>Sign up/Yearly</td>
|
||||
<td class='page-url'>
|
||||
<div class="gh-portal-page-url-container">
|
||||
<div class="page-url-label">
|
||||
{{#if isLink}}
|
||||
<span class="page-url-disabled">{{this.siteUrl}}/</span><span>#/portal/signup{{this.selectedProductIdPath}}yearly</span>
|
||||
{{else}}
|
||||
data-portal="signup{{this.selectedProductIdPath}}/yearly"
|
||||
{{/if}}
|
||||
</div>
|
||||
<button type="button" {{action (perform this.copyProductSignupLink "yearly")}} class="gh-portal-setting-copy">
|
||||
{{#if (and this.copyProductSignupLink.isRunning (eq this.copiedSignupInterval "yearly"))}}
|
||||
{{svg-jar "check-circle" class="w3 v-mid mr2 stroke-darkgrey"}} Copied
|
||||
{{else}}
|
||||
<span data-tooltip="Copy">{{svg-jar "copy" class="w4 v-mid fill-darkgrey"}}</span>
|
||||
{{/if}}
|
||||
</button>
|
||||
</div>
|
||||
<button type="button" {{action (perform this.copyStaticLink "signup/yearly")}} class="gh-portal-setting-copy">
|
||||
{{#if (and this.copyStaticLink.isRunning (eq this.copiedPrice "signup/yearly"))}}
|
||||
{{svg-jar "check-circle" class="w3 v-mid mr2 stroke-darkgrey"}} Copied
|
||||
{{else}}
|
||||
<span data-tooltip="Copy">{{svg-jar "copy" class="w4 v-mid fill-darkgrey"}}</span>
|
||||
{{/if}}
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class='pagename'>Sign up/Free</td>
|
||||
<td class='page-url'>
|
||||
<div class="gh-portal-page-url-container">
|
||||
<div class="page-url-label">
|
||||
{{#if isLink}}
|
||||
<span class="page-url-disabled">{{this.siteUrl}}/</span><span>#/portal/signup/free</span>
|
||||
{{else}}
|
||||
data-portal="signup/free"
|
||||
{{/if}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class='pagename'>Sign up/Free</td>
|
||||
<td class='page-url'>
|
||||
<div class="gh-portal-page-url-container">
|
||||
<div class="page-url-label">
|
||||
{{#if isLink}}
|
||||
<span class="page-url-disabled">{{this.siteUrl}}/</span><span>#/portal/signup/free</span>
|
||||
{{else}}
|
||||
data-portal="signup/free"
|
||||
{{/if}}
|
||||
</div>
|
||||
<button type="button" {{action (perform this.copyStaticLink "signup/free")}} class="gh-portal-setting-copy">
|
||||
{{#if (and this.copyStaticLink.isRunning (eq this.copiedPrice "signup/free"))}}
|
||||
{{svg-jar "check-circle" class="w3 v-mid mr2 stroke-darkgrey"}} Copied
|
||||
{{else}}
|
||||
<span data-tooltip="Copy">{{svg-jar "copy" class="w4 v-mid fill-darkgrey"}}</span>
|
||||
{{/if}}
|
||||
</button>
|
||||
</div>
|
||||
<button type="button" {{action (perform this.copyStaticLink "signup/free")}} class="gh-portal-setting-copy">
|
||||
{{#if (and this.copyStaticLink.isRunning (eq this.copiedPrice "signup/free"))}}
|
||||
{{svg-jar "check-circle" class="w3 v-mid mr2 stroke-darkgrey"}} Copied
|
||||
{{else}}
|
||||
<span data-tooltip="Copy">{{svg-jar "copy" class="w4 v-mid fill-darkgrey"}}</span>
|
||||
{{/if}}
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</td>
|
||||
</tr>
|
||||
{{else}}
|
||||
<tr>
|
||||
<td class='pagename'>Sign up/Monthly</td>
|
||||
<td class='page-url'>
|
||||
<div class="gh-portal-page-url-container">
|
||||
<div class="page-url-label">
|
||||
{{#if isLink}}
|
||||
<span class="page-url-disabled">{{this.siteUrl}}/</span><span>#/portal/signup/monthly</span>
|
||||
{{else}}
|
||||
data-portal="signup/monthly"
|
||||
{{/if}}
|
||||
</div>
|
||||
<button type="button" {{action (perform this.copyStaticLink "signup/monthly")}} class="gh-portal-setting-copy">
|
||||
{{#if (and this.copyStaticLink.isRunning (eq this.copiedPrice "signup/monthly"))}}
|
||||
{{svg-jar "check-circle" class="w3 v-mid mr2 stroke-darkgrey"}} Copied
|
||||
{{else}}
|
||||
<span data-tooltip="Copy">{{svg-jar "copy" class="w4 v-mid fill-darkgrey"}}</span>
|
||||
{{/if}}
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class='pagename'>Sign up/Yearly</td>
|
||||
<td class='page-url'>
|
||||
<div class="gh-portal-page-url-container">
|
||||
<div class="page-url-label">
|
||||
{{#if isLink}}
|
||||
<span class="page-url-disabled">{{this.siteUrl}}/</span><span>#/portal/signup/yearly</span>
|
||||
{{else}}
|
||||
data-portal="signup/yearly"
|
||||
{{/if}}
|
||||
</div>
|
||||
<button type="button" {{action (perform this.copyStaticLink "signup/yearly")}} class="gh-portal-setting-copy">
|
||||
{{#if (and this.copyStaticLink.isRunning (eq this.copiedPrice "signup/yearly"))}}
|
||||
{{svg-jar "check-circle" class="w3 v-mid mr2 stroke-darkgrey"}} Copied
|
||||
{{else}}
|
||||
<span data-tooltip="Copy">{{svg-jar "copy" class="w4 v-mid fill-darkgrey"}}</span>
|
||||
{{/if}}
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class='pagename'>Sign up/Free</td>
|
||||
<td class='page-url'>
|
||||
<div class="gh-portal-page-url-container">
|
||||
<div class="page-url-label">
|
||||
{{#if isLink}}
|
||||
<span class="page-url-disabled">{{this.siteUrl}}/</span><span>#/portal/signup/free</span>
|
||||
{{else}}
|
||||
data-portal="signup/free"
|
||||
{{/if}}
|
||||
</div>
|
||||
<button type="button" {{action (perform this.copyStaticLink "signup/free")}} class="gh-portal-setting-copy">
|
||||
{{#if (and this.copyStaticLink.isRunning (eq this.copiedPrice "signup/free"))}}
|
||||
{{svg-jar "check-circle" class="w3 v-mid mr2 stroke-darkgrey"}} Copied
|
||||
{{else}}
|
||||
<span data-tooltip="Copy">{{svg-jar "copy" class="w4 v-mid fill-darkgrey"}}</span>
|
||||
{{/if}}
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{{/if}}
|
||||
<tr>
|
||||
<td colspan="2"><hr class="gh-portal-links-group-divider" /></td>
|
||||
</tr>
|
||||
|
|
@ -212,4 +302,4 @@
|
|||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -12,6 +12,9 @@ export default Component.extend({
|
|||
isLink: true,
|
||||
prices: null,
|
||||
copiedPrice: null,
|
||||
copiedSignupInterval: null,
|
||||
selectedProduct: null,
|
||||
products: null,
|
||||
|
||||
toggleValue: computed('isLink', function () {
|
||||
return this.isLink ? 'Data attributes' : 'Links';
|
||||
|
|
@ -20,6 +23,25 @@ export default Component.extend({
|
|||
sectionHeaderLabel: computed('isLink', function () {
|
||||
return this.isLink ? 'Link' : 'Data attribute';
|
||||
}),
|
||||
selectedProductIdPath: computed('selectedProduct', function () {
|
||||
const selectedProduct = this.get('selectedProduct');
|
||||
if (selectedProduct) {
|
||||
return `/${selectedProduct.name}`;
|
||||
}
|
||||
return '';
|
||||
}),
|
||||
|
||||
productOptions: computed('products.[]', function () {
|
||||
if (this.get('products')) {
|
||||
return this.get('products').map((product) => {
|
||||
return {
|
||||
label: product.name,
|
||||
name: product.id
|
||||
};
|
||||
});
|
||||
}
|
||||
return [];
|
||||
}),
|
||||
|
||||
init() {
|
||||
this._super(...arguments);
|
||||
|
|
@ -29,8 +51,21 @@ export default Component.extend({
|
|||
actions: {
|
||||
toggleShowLinks() {
|
||||
this.toggleProperty('isLink');
|
||||
},
|
||||
setSelectedProduct(product) {
|
||||
this.set('selectedProduct', product);
|
||||
}
|
||||
},
|
||||
fetchProducts: task(function* () {
|
||||
const products = yield this.store.query('product', {include: 'monthly_price,yearly_price'}) || [];
|
||||
this.set('products', products);
|
||||
if (products.length > 0) {
|
||||
this.set('selectedProduct', {
|
||||
name: products.firstObject.id,
|
||||
label: products.firstObject.name
|
||||
});
|
||||
}
|
||||
}),
|
||||
copyStaticLink: task(function* (id) {
|
||||
this.set('copiedPrice', id);
|
||||
let data = '';
|
||||
|
|
@ -42,13 +77,13 @@ export default Component.extend({
|
|||
copyTextToClipboard(data);
|
||||
yield timeout(this.isTesting ? 50 : 3000);
|
||||
}),
|
||||
copySignupLink: task(function* (price) {
|
||||
this.set('copiedPrice', price.id);
|
||||
copyProductSignupLink: task(function* (interval) {
|
||||
this.set('copiedSignupInterval', interval);
|
||||
let data = '';
|
||||
if (this.isLink) {
|
||||
data = `#/portal/signup/${price.id}`;
|
||||
data = `#/portal/signup${this.selectedProductIdPath}/${interval}`;
|
||||
} else {
|
||||
data = `data-portal="signup/${price.id}"`;
|
||||
data = `data-portal="signup${this.selectedProductIdPath}/${interval}"`;
|
||||
}
|
||||
copyTextToClipboard(data);
|
||||
yield timeout(this.isTesting ? 50 : 3000);
|
||||
|
|
|
|||
|
|
@ -499,6 +499,10 @@
|
|||
width: 130px;
|
||||
}
|
||||
|
||||
.gh-portal-links-table tr td.pagename.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.gh-portal-page-url-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
|
@ -580,4 +584,4 @@
|
|||
|
||||
.gh-portal-setting-section.redirects p {
|
||||
margin-top: 4px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue