mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-02-24 23:48:13 -05:00
Updated tracked state to be top level attributes
no-issue Glimmer tracked values don't guaruntee that nested property updated will be tracked
This commit is contained in:
Fabien O'Carroll
parent
8b5e2623ad
commit
66764a8c01
2 changed files with 55 additions and 53 deletions
|
|
@ -11,30 +11,32 @@ export default class DashboardController extends Controller {
|
|||
@service settings;
|
||||
|
||||
@tracked
|
||||
events = {
|
||||
data: null,
|
||||
error: null,
|
||||
loading: false
|
||||
};
|
||||
eventsData = null;
|
||||
@tracked
|
||||
mrrStats = {
|
||||
data: null,
|
||||
error: null,
|
||||
loading: false
|
||||
};
|
||||
eventsError = null;
|
||||
@tracked
|
||||
memberCountStats = {
|
||||
data: null,
|
||||
error: null,
|
||||
loading: false
|
||||
};
|
||||
eventsLoading = false;
|
||||
|
||||
@tracked
|
||||
topMembers = {
|
||||
data: null,
|
||||
error: null,
|
||||
loading: false
|
||||
};
|
||||
mrrStatsData = null;
|
||||
@tracked
|
||||
mrrStatsError = null;
|
||||
@tracked
|
||||
mrrStatsLoading = false;
|
||||
|
||||
@tracked
|
||||
memberCountStatsData = null;
|
||||
@tracked
|
||||
memberCountStatsError = null;
|
||||
@tracked
|
||||
memberCountStatsLoading = false;
|
||||
|
||||
@tracked
|
||||
topMembersData = null;
|
||||
@tracked
|
||||
topMembersError = null;
|
||||
@tracked
|
||||
topMembersLoading = false;
|
||||
|
||||
get showTopMembers() {
|
||||
return this.feature.get('emailAnalytics') && this.settings.get('emailTrackOpens');
|
||||
|
|
@ -49,7 +51,7 @@ export default class DashboardController extends Controller {
|
|||
|
||||
loadMRRStats() {
|
||||
this.membersStats.fetchMRR().then((stats) => {
|
||||
this.events.loading = false;
|
||||
this.mrrStatsLoading = false;
|
||||
|
||||
let currencyStats = stats[0] || {
|
||||
data: [],
|
||||
|
|
@ -61,7 +63,7 @@ export default class DashboardController extends Controller {
|
|||
const currentMRR = dateValues.length ? dateValues[dateValues.length - 1] : 0;
|
||||
const rangeStartMRR = dateValues.length ? dateValues[0] : 0;
|
||||
const percentChange = rangeStartMRR !== 0 ? ((currentMRR - rangeStartMRR) / rangeStartMRR) * 100 : 0.0;
|
||||
this.mrrStats.data = {
|
||||
this.mrrStatsData = {
|
||||
current: `${getSymbol(currencyStats.currency)}${currentMRR}`,
|
||||
percentChange,
|
||||
options: {
|
||||
|
|
@ -77,20 +79,20 @@ export default class DashboardController extends Controller {
|
|||
};
|
||||
}
|
||||
}, (error) => {
|
||||
this.mrrStats.error = error;
|
||||
this.events.loading = false;
|
||||
this.mrrStatsError = error;
|
||||
this.mrrStatsLoading = false;
|
||||
});
|
||||
}
|
||||
|
||||
loadMemberCountStats() {
|
||||
this.membersStats.fetchCounts().then((stats) => {
|
||||
this.events.loading = false;
|
||||
this.memberCountStatsLoading = false;
|
||||
|
||||
if (stats) {
|
||||
stats.data = this.membersStats.fillCountDates(stats.data) || {};
|
||||
const dateValues = Object.values(stats.data);
|
||||
|
||||
this.memberCountStats.data = {
|
||||
this.memberCountStatsData = {
|
||||
all: {
|
||||
total: dateValues.length ? dateValues[dateValues.length - 1].total : 0,
|
||||
options: {
|
||||
|
|
@ -120,8 +122,8 @@ export default class DashboardController extends Controller {
|
|||
};
|
||||
}
|
||||
}, (error) => {
|
||||
this.mrrStats.error = error;
|
||||
this.events.loading = false;
|
||||
this.memberCountStatsError = error;
|
||||
this.memberCountStatsLoading = false;
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -131,29 +133,29 @@ export default class DashboardController extends Controller {
|
|||
}
|
||||
|
||||
loadEvents() {
|
||||
this.events.loading = true;
|
||||
this.eventsLoading = true;
|
||||
this.membersStats.fetchTimeline().then(({events}) => {
|
||||
this.events.data = events;
|
||||
this.events.loading = false;
|
||||
this.eventsData = events;
|
||||
this.eventsLoading = false;
|
||||
}, (error) => {
|
||||
this.events.error = error;
|
||||
this.events.loading = false;
|
||||
this.eventsError = error;
|
||||
this.eventsLoading = false;
|
||||
});
|
||||
}
|
||||
|
||||
loadTopMembers() {
|
||||
this.topMembers.loading = true;
|
||||
this.topMembersLoading = true;
|
||||
let query = {
|
||||
filter: 'email_open_rate:-null',
|
||||
order: 'email_open_rate desc',
|
||||
limit: 10
|
||||
};
|
||||
this.store.query('member', query).then((result) => {
|
||||
this.topMembers.data = result;
|
||||
this.topMembers.loading = false;
|
||||
this.topMembersData = result;
|
||||
this.topMembersLoading = false;
|
||||
}, (error) => {
|
||||
this.topMembers.error = error;
|
||||
this.topMembers.loading = false;
|
||||
this.topMembersError = error;
|
||||
this.topMembersLoading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,15 +14,15 @@
|
|||
</div>
|
||||
<div class="gh-dashboard-chart-container">
|
||||
<div class="gh-dashboard-summary">
|
||||
{{#if this.mrrStats.data}}
|
||||
<div class="data">{{this.mrrStats.data.current}}</div>
|
||||
<div class="growth">{{this.mrrStats.data.percentChange}}%</div>
|
||||
{{#if this.mrrStatsData}}
|
||||
<div class="data">{{this.mrrStatsData.current}}</div>
|
||||
<div class="growth">{{this.mrrStatsData.percentChange}}%</div>
|
||||
{{else}}
|
||||
<div class="data">$0</div>
|
||||
<div class="growth">0.0%</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{#if this.mrrStats.data}}
|
||||
{{#if this.mrrStatsData}}
|
||||
<div class="gh-dashboard-chart">
|
||||
<GhMembersChart @nightShift={{feature "nightShift"}} @showSummary={{false}} @showRange={{false}} @chartType="mrr" @chartStats={{this.mrrStats.data}} />
|
||||
</div>
|
||||
|
|
@ -38,12 +38,12 @@
|
|||
<div class="gh-dashboard-summary small">
|
||||
<h4 class="gh-dashboard-header">Total members</h4>
|
||||
<div class="data-container">
|
||||
<div class="data">{{this.memberCountStats.data.all.total}}</div>
|
||||
<div class="data">{{this.memberCountStatsData.all.total}}</div>
|
||||
<div class="growth">0.0%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-dashboard-chart small">
|
||||
<GhMembersChart @nightShift={{feature "nightShift"}} @chartSize="small" @showSummary={{false}} @chartType="all-members" @showRange={{false}} @chartStats={{this.memberCountStats.data.all}} />
|
||||
<GhMembersChart @nightShift={{feature "nightShift"}} @chartSize="small" @showSummary={{false}} @chartType="all-members" @showRange={{false}} @chartStats={{this.memberCountStatsData.all}} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -52,12 +52,12 @@
|
|||
<div class="gh-dashboard-summary small">
|
||||
<h4 class="gh-dashboard-header">Paid members</h4>
|
||||
<div class="data-container">
|
||||
<div class="data">{{this.memberCountStats.data.paid.total}}</div>
|
||||
<div class="data">{{this.memberCountStatsData.paid.total}}</div>
|
||||
<div class="growth">0.0%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-dashboard-chart small">
|
||||
<GhMembersChart @nightShift={{feature "nightShift"}} @chartSize="small" @showSummary={{false}} @chartType="paid-members" @showRange={{false}} @chartStats={{this.memberCountStats.data.paid}} />
|
||||
<GhMembersChart @nightShift={{feature "nightShift"}} @chartSize="small" @showSummary={{false}} @chartType="paid-members" @showRange={{false}} @chartStats={{this.memberCountStatsData.paid}} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -126,17 +126,17 @@
|
|||
<h4 class="gh-dashboard-header secondary">Open rate</h4>
|
||||
</div>
|
||||
<div class="gh-dashboard-list nodata">
|
||||
{{#if this.events.loading}}
|
||||
{{#if this.topMembersLoading}}
|
||||
Loading...
|
||||
{{else}}
|
||||
{{#if this.events.error}}
|
||||
{{#if this.topMembersError}}
|
||||
<p class="error">
|
||||
There was an error loading events
|
||||
<code>{{this.events.error.message}}</code>
|
||||
</p>
|
||||
{{else}}
|
||||
<ul class="gh-dashboard-top-members">
|
||||
{{#each this.topMembers.data as |member|}}
|
||||
{{#each this.topMembersData as |member|}}
|
||||
<li class="gh-dashboard-top-member">
|
||||
<LinkTo class="member-details" @route="members">
|
||||
<GhMemberAvatar @member={{member}} @containerClass="w9 h9 mr3 flex-shrink-0" />
|
||||
|
|
@ -157,16 +157,16 @@
|
|||
<div class="gh-dashboard-box grey activity-feed">
|
||||
<h4 class="gh-dashboard-header">Activity feed</h4>
|
||||
<div class="content">
|
||||
{{#if this.events.loading}}
|
||||
{{#if this.eventsLoading}}
|
||||
Loading...
|
||||
{{else}}
|
||||
{{#if this.events.error}}
|
||||
{{#if this.eventsError}}
|
||||
<p class="error">
|
||||
There was an error loading events
|
||||
<code>{{this.events.error.message}}</code>
|
||||
<code>{{this.eventsError.message}}</code>
|
||||
</p>
|
||||
{{else}}
|
||||
<GhEventTimeline @events={{this.events.data}}/>
|
||||
<GhEventTimeline @events={{this.eventsData}}/>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue