Skip to content

Commit

Permalink
almost ready for a release and publish
Browse files Browse the repository at this point in the history
  • Loading branch information
roncodes committed Jul 17, 2024
1 parent 8414f17 commit a57d49a
Show file tree
Hide file tree
Showing 37 changed files with 530 additions and 218 deletions.
20 changes: 8 additions & 12 deletions addon/components/extension-card.hbs
Original file line number Diff line number Diff line change
@@ -1,16 +1,12 @@
<button
type="button"
class="rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm w-40 hover:opacity-50 {{@buttonClass}}"
...attributes
{{on "click" this.onClick}}
{{did-update this.onExtensionUpdated @extension}}
>
<div class="flex items-center justify-center rounded-t-lg w-full h-36 {{@iconWrapperClass}}" {{background-url @extension.icon_url overlay=true}}>
<Image src={{@extension.icon_url}} class="w-full h-36 rounded-t-lg {{@iconClass}}" alt={{@extension.name}} @fallbackSrc={{config "defaultValues.extensionIcon"}} />
<button type="button" class="extension-card-container hover:opacity-50 {{@buttonClass}}" ...attributes {{on "click" this.onClick}} {{did-update this.onExtensionUpdated @extension}}>
<div class="extension-card-icon-container {{@iconWrapperClass}}">
<Image src={{@extension.icon_url}} class={{@iconClass}} alt={{@extension.name}} @fallbackSrc={{config "defaultValues.extensionIcon"}} />
</div>
<div class="text-left px-3 py-2 rounded-b-lg bg-white border-t border-gray-200 dark:border-gray-700 dark:bg-gray-900 {{@detailsWrapperClass}}">
<span class="font-semibold text-sm block {{@nameTextClass}}">{{@extension.name}}</span>
<p class="text-xs {{@descriptionTextClass}}">{{n-a @extension.description}}</p>
<div class="extension-card-body-container {{@detailsWrapperClass}}">
<div class="flex flex-col">
<div class="font-semibold text-sm block {{@nameTextClass}}">{{@extension.name}}</div>
<div class="text-xs {{@descriptionTextClass}}">{{n-a @extension.description}}</div>
</div>
{{yield @extension}}
</div>
</button>
2 changes: 1 addition & 1 deletion addon/components/extension-card.js
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ export default class ExtensionCardComponent extends Component {
() => {
window.location.reload(true);
},
1200
1000 * 2
);
removeParamFromCurrentUrl('extension_id');
modal.done();
Expand Down
2 changes: 1 addition & 1 deletion addon/components/extension-modal-title.hbs
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="flex flex-row" ...attributes>
<div class="flex flex-row" ...attributes {{did-update this.handleExtensionChanged @extension}}>
<div class="modal-title--extension-icon-wrapper shadow-sm dark:border-gray-700">
<div class="flex items-center justify-center rounded-lg w-full" {{background-url this.extension.icon_url overlay=true}}>
<Image src={{this.extension.icon_url}} class="w-full rounded-lg" alt={{this.extension.name}} @fallbackSrc={{config "defaultValues.extensionIcon"}} />
Expand Down
13 changes: 10 additions & 3 deletions addon/components/extension-modal-title.js
Original file line number Diff line number Diff line change
@@ -1,13 +1,20 @@
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class ExtensionModalTitleComponent extends Component {
@tracked extension;
@tracked detailsContainerClass = 'mb-4';

constructor(owner, { options, detailsContainerClass }) {
constructor(owner, { options, extension = null, detailsContainerClass = 'mb-4' }) {
super(...arguments);
this.extension = options.extension;
this.detailsContainerClass = detailsContainerClass ?? 'mb-4';
this.extension = options ? options.extension : extension;
this.detailsContainerClass = detailsContainerClass;
}

@action handleExtensionChanged(el, [extension]) {
if (extension) {
this.extension = extension;
}
}
}
26 changes: 26 additions & 0 deletions addon/controllers/developers/analytics.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import Controller from '@ember/controller';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';
import { inject as service } from '@ember/service';
import { task } from 'ember-concurrency';

export default class DevelopersAnalyticsController extends Controller {
@service fetch;
@service notifications;
@tracked selectedExtension;
@tracked extensions = [];
@tracked metrics = {};

@action selectExtension(extension) {
this.selectedExtension = extension;
this.getExtensionAnalytics.perform(extension);
}

@task *getExtensionAnalytics(extension) {
try {
this.metrics = yield this.fetch.get('registry-extensions/analytics', { id: extension.id }, { namespace: '~registry/v1' });
} catch (error) {
this.notifications.serverError(error);
}
}
}
33 changes: 33 additions & 0 deletions addon/controllers/developers/payments/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,37 @@ import { tracked } from '@glimmer/tracking';

export default class DevelopersPaymentsIndexController extends Controller {
@tracked hasStripeConnectAccount = true;
@tracked table;
@tracked page = 1;
@tracked limit = 30;
@tracked sort = '-created_at';
@tracked query = null;
queryParams = ['page', 'limit', 'sort', 'query'];
columns = [
{
label: 'Extension',
valuePath: 'extension.name',
width: '20%',
},
{
label: 'Category',
valuePath: 'extension.category_name',
width: '20%',
},
{
label: 'Customer',
valuePath: 'company.name',
width: '20%',
},
{
label: 'Amount',
valuePath: 'locked_price',
width: '20%',
},
{
label: 'Date',
valuePath: 'created_at',
width: '20%',
},
];
}
2 changes: 1 addition & 1 deletion addon/controllers/installed.js
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ export default class InstalledController extends Controller {
() => {
window.location.reload(true);
},
1200
1000 * 2
);
modal.done();
} catch (error) {
Expand Down
18 changes: 18 additions & 0 deletions addon/controllers/purchased.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import Controller from '@ember/controller';
import { inject as service } from '@ember/service';
import { action } from '@ember/object';

export default class PurchasedController extends Controller {
@service modalsManager;

@action about(extension) {
this.modalsManager.show('modals/extension-details', {
titleComponent: 'extension-modal-title',
modalClass: 'flb--extension-modal modal-lg',
modalHeaderClass: 'flb--extension-modal-header',
acceptButtonText: 'Done',
hideDeclineButton: true,
extension,
});
}
}
1 change: 1 addition & 0 deletions addon/routes.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import buildRoutes from 'ember-engines/routes';

export default buildRoutes(function () {
this.route('installed');
this.route('purchased');
this.route('developers', function () {
this.route('extensions', function () {
this.route('index', { path: '/' });
Expand Down
9 changes: 8 additions & 1 deletion addon/routes/developers/analytics.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,10 @@
import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';

export default class DevelopersAnalyticsRoute extends Route {}
export default class DevelopersAnalyticsRoute extends Route {
@service store;

model() {
return this.store.query('registry-extension', { is_author: 1 });
}
}
2 changes: 1 addition & 1 deletion addon/routes/developers/extensions/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,6 @@ export default class DevelopersExtensionsIndexRoute extends Route {
@service store;

model() {
return this.store.findAll('registry-extension');
return this.store.query('registry-extension', { is_author: 1 });
}
}
11 changes: 11 additions & 0 deletions addon/routes/developers/payments/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,17 @@ import { inject as service } from '@ember/service';
export default class DevelopersPaymentsIndexRoute extends Route {
@service fetch;

queryParams = {
page: { refreshModel: true },
limit: { refreshModel: true },
sort: { refreshModel: true },
query: { refreshModel: true },
};

model() {
return this.fetch.get('payments/author-received', {}, { namespace: '~registry/v1' });
}

async setupController(controller) {
try {
const { hasStripeConnectAccount } = await this.fetch.get('payments/has-stripe-connect-account', {}, { namespace: '~registry/v1' });
Expand Down
10 changes: 10 additions & 0 deletions addon/routes/purchased.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';

export default class PurchasedRoute extends Route {
@service fetch;

model(params = {}) {
return this.fetch.get('registry-extensions/purchased', params, { namespace: '~registry/v1', normalizeToEmberData: true, modelType: 'registry-extension' });
}
}
52 changes: 52 additions & 0 deletions addon/styles/registry-bridge-engine.css
Original file line number Diff line number Diff line change
Expand Up @@ -87,3 +87,55 @@ body[data-theme='dark'] .flb--modal.flb--default-modal.stripe-extension-purchase
body[data-theme='light'] .flb--modal.flb--default-modal.stripe-extension-purchase > .flb--modal-dialog > .flb--modal-content > .flb--modal-header {
display: none !important;
}

.extension-card-container {
border-radius: 0.5rem;
border: 1px solid #e5e7eb;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 5%);
width: 11rem;
}

body[data-theme='dark'] .extension-card-container {
border-color: #4b5563;
}

.extension-card-container > .extension-card-icon-container {
display: flex;
align-items: center;
justify-content: center;
border-radius: 0.5rem 0.5rem 0 0;
width: 100%;
height: 10rem;
}

.extension-card-container > .extension-card-icon-container > img {
width: 100%;
height: 10rem;
object-fit: cover;
border-radius: 0.5rem 0.5rem 0 0;
}

.extension-card-container > .extension-card-body-container {
text-align: left;
padding: 0.5rem 0.75rem;
border-radius: 0 0 0.5rem 0.5rem;
background-color: white;
border-top: 1px solid #e5e7eb;
}

body[data-theme='dark'] .extension-card-container > .extension-card-body-container {
border-top-color: #4b5563;
background-color: #111827;
}

.extension-card-grid-container {
display: flex;
flex-direction: row;
align-items: stretch;
margin-left: -2rem;
}

.extension-card-grid-container > * {
margin-left: 2rem;
margin-bottom: 2rem;
}
1 change: 1 addition & 0 deletions addon/templates/application.hbs
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<EmberWormhole @to="sidebar-menu-items">
<Layout::Sidebar::Item @route="console.extensions.installed" @icon="inbox">Installed</Layout::Sidebar::Item>
<Layout::Sidebar::Item @route="console.extensions.purchased" @icon="bag-shopping">Purchased</Layout::Sidebar::Item>
<Layout::Sidebar::Panel @open={{true}} @title="Explore">
<Layout::Sidebar::Item @route="console.extensions.explore.index" @icon="shapes">Explore All</Layout::Sidebar::Item>
{{#each this.categories as |category|}}
Expand Down
84 changes: 83 additions & 1 deletion addon/templates/developers/analytics.hbs
Original file line number Diff line number Diff line change
@@ -1 +1,83 @@
{{outlet}}
<Layout::Section::Header @title="Analytics">
<DropdownButton
class="h-8"
@text={{if this.selectedExtension this.selectedExtension.name "Select Extension"}}
@textClass="text-sm mr-2"
@buttonClass="flex-row-reverse w-44 justify-between"
@icon="caret-down"
@iconClass="mr-0i"
@size="xs"
@iconPrefix="fas"
@triggerClass="hidden md:flex"
as |dd|
>
<div class="next-dd-menu mt-1 mx-0" aria-labelledby="user-menu">
<div class="p-1">
{{#each @model as |extension|}}
<a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.selectExtension extension)}}>
<div class="flex-1 flex flex-row items-center">
<div class="w-6">
<FaIcon @icon="box-archive" />
</div>
<span>{{extension.name}}</span>
</div>
<div>
{{#if (eq this.selectedExtension.id extension.id)}}
<FaIcon @icon="check" class="text-green-500" />
{{/if}}
</div>
</a>
{{/each}}
</div>
</div>
</DropdownButton>
</Layout::Section::Header>

<Layout::Section::Body class="overflow-y-scroll h-full">
<div class="container">
<div class="max-w-3xl mx-auto mt-4">
<div class="content">
<div class="h-10">
{{#if this.getExtensionAnalytics.isRunning}}
<div class="flex items-center justify-center">
<Spinner
@loadingMessage={{concat "Loading analytical metrics for " this.selectedExtension.name}}
@loadingMessageClass="ml-2 text-black dark:text-white"
@wrapperClass="flex flex-row items-center"
/>
</div>
{{/if}}
</div>
{{#if this.selectedExtension}}
<ExtensionModalTitle @extension={{this.selectedExtension}} class="mb-6" />
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
{{#each-in this.metrics as |key value|}}
<StatWidget @title={{humanize key}} @value={{value}} />
{{/each-in}}
</div>
{{else}}
<div class="flex items-center justify-center flex-col mb-12">
<h1 class="text-black dark:text-white text-lg font-semibold mb-2">Extension Analytics Viewer</h1>
<p class="text-gray-600 dark:text-gray-400">Please select an extension from the list to load and display its associated analytics. Once selected, detailed performance metrics and data
insights will be rendered here.</p>
</div>
<div class="extension-card-grid-container">
{{#each @model as |extension|}}
<button type="button" class="extension-card-container hover:opacity-50" {{on "click" (fn this.selectExtension extension)}}>
<div class="extension-card-icon-container">
<Image src={{extension.icon_url}} class="w-full h-36 rounded-t-lg" alt={{extension.name}} @fallbackSrc={{config "defaultValues.extensionIcon"}} />
</div>
<div class="extension-card-body-container">
<div class="flex flex-col">
<div class="font-semibold text-sm block">{{extension.name}}</div>
<div class="text-xs truncate">{{n-a extension.description}}</div>
</div>
</div>
</button>
{{/each}}
</div>
{{/if}}
</div>
</div>
</div>
</Layout::Section::Body>
Loading

0 comments on commit a57d49a

Please sign in to comment.