Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-24 23:48:13 -05:00
Code Issues Activity

Updated tracked state to be top level attributes

Browse source 
no-issue

Glimmer tracked values don't guaruntee that nested property updated will be tracked
This commit is contained in:
Fabien O'Carroll 2021-02-19 17:17:28 +00:00
parent 8b5e2623ad
commit 66764a8c01
2 changed files with 55 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

78
ghost/admin/app/controllers/dashboard.js
View file

@ -11,30 +11,32 @@ export default class DashboardController extends Controller {
@service settings; @service settings;
@tracked @tracked
events = { eventsData = null;
data: null,
error: null,
loading: false
};
@tracked @tracked
mrrStats = { eventsError = null;
data: null,
error: null,
loading: false
};
@tracked @tracked
memberCountStats = { eventsLoading = false;
data: null,
error: null,
loading: false
};
@tracked @tracked
topMembers = { mrrStatsData = null;
data: null, @tracked
error: null, mrrStatsError = null;
loading: false @tracked
}; mrrStatsLoading = false;
@tracked
memberCountStatsData = null;
@tracked
memberCountStatsError = null;
@tracked
memberCountStatsLoading = false;
@tracked
topMembersData = null;
@tracked
topMembersError = null;
@tracked
topMembersLoading = false;
get showTopMembers() { get showTopMembers() {
return this.feature.get('emailAnalytics') && this.settings.get('emailTrackOpens'); return this.feature.get('emailAnalytics') && this.settings.get('emailTrackOpens');
@ -49,7 +51,7 @@ export default class DashboardController extends Controller {
loadMRRStats() { loadMRRStats() {
this.membersStats.fetchMRR().then((stats) => { this.membersStats.fetchMRR().then((stats) => {
this.events.loading = false; this.mrrStatsLoading = false;
let currencyStats = stats[0] || { let currencyStats = stats[0] || {
data: [], data: [],
@ -61,7 +63,7 @@ export default class DashboardController extends Controller {
const currentMRR = dateValues.length ? dateValues[dateValues.length - 1] : 0; const currentMRR = dateValues.length ? dateValues[dateValues.length - 1] : 0;
const rangeStartMRR = dateValues.length ? dateValues[0] : 0; const rangeStartMRR = dateValues.length ? dateValues[0] : 0;
const percentChange = rangeStartMRR !== 0 ? ((currentMRR - rangeStartMRR) / rangeStartMRR) * 100 : 0.0; const percentChange = rangeStartMRR !== 0 ? ((currentMRR - rangeStartMRR) / rangeStartMRR) * 100 : 0.0;
this.mrrStats.data = { this.mrrStatsData = {
current: `${getSymbol(currencyStats.currency)}${currentMRR}`, current: `${getSymbol(currencyStats.currency)}${currentMRR}`,
percentChange, percentChange,
options: { options: {
@ -77,20 +79,20 @@ export default class DashboardController extends Controller {
}; };
} }
}, (error) => { }, (error) => {
this.mrrStats.error = error; this.mrrStatsError = error;
this.events.loading = false; this.mrrStatsLoading = false;
}); });
} }
loadMemberCountStats() { loadMemberCountStats() {
this.membersStats.fetchCounts().then((stats) => { this.membersStats.fetchCounts().then((stats) => {
this.events.loading = false; this.memberCountStatsLoading = false;
if (stats) { if (stats) {
stats.data = this.membersStats.fillCountDates(stats.data) || {}; stats.data = this.membersStats.fillCountDates(stats.data) || {};
const dateValues = Object.values(stats.data); const dateValues = Object.values(stats.data);
this.memberCountStats.data = { this.memberCountStatsData = {
all: { all: {
total: dateValues.length ? dateValues[dateValues.length - 1].total : 0, total: dateValues.length ? dateValues[dateValues.length - 1].total : 0,
options: { options: {
@ -120,8 +122,8 @@ export default class DashboardController extends Controller {
}; };
} }
}, (error) => { }, (error) => {
this.mrrStats.error = error; this.memberCountStatsError = error;
this.events.loading = false; this.memberCountStatsLoading = false;
}); });
} }
@ -131,29 +133,29 @@ export default class DashboardController extends Controller {
} }
loadEvents() { loadEvents() {
this.events.loading = true; this.eventsLoading = true;
this.membersStats.fetchTimeline().then(({events}) => { this.membersStats.fetchTimeline().then(({events}) => {
this.events.data = events; this.eventsData = events;
this.events.loading = false; this.eventsLoading = false;
}, (error) => { }, (error) => {
this.events.error = error; this.eventsError = error;
this.events.loading = false; this.eventsLoading = false;
}); });
} }
loadTopMembers() { loadTopMembers() {
this.topMembers.loading = true; this.topMembersLoading = true;
let query = { let query = {
filter: 'email_open_rate:-null', filter: 'email_open_rate:-null',
order: 'email_open_rate desc', order: 'email_open_rate desc',
limit: 10 limit: 10
}; };
this.store.query('member', query).then((result) => { this.store.query('member', query).then((result) => {
this.topMembers.data = result; this.topMembersData = result;
this.topMembers.loading = false; this.topMembersLoading = false;
}, (error) => { }, (error) => {
this.topMembers.error = error; this.topMembersError = error;
this.topMembers.loading = false; this.topMembersLoading = false;
}); });
} }
} }

30
ghost/admin/app/templates/dashboard.hbs
View file

@ -14,15 +14,15 @@
</div> </div>
<div class="gh-dashboard-chart-container"> <div class="gh-dashboard-chart-container">
<div class="gh-dashboard-summary"> <div class="gh-dashboard-summary">
{{#if this.mrrStats.data}} {{#if this.mrrStatsData}}
<div class="data">{{this.mrrStats.data.current}}</div> <div class="data">{{this.mrrStatsData.current}}</div>
<div class="growth">{{this.mrrStats.data.percentChange}}%</div> <div class="growth">{{this.mrrStatsData.percentChange}}%</div>
{{else}} {{else}}
<div class="data">$0</div> <div class="data">$0</div>
<div class="growth">0.0%</div> <div class="growth">0.0%</div>
{{/if}} {{/if}}
</div> </div>
{{#if this.mrrStats.data}} {{#if this.mrrStatsData}}
<div class="gh-dashboard-chart"> <div class="gh-dashboard-chart">
<GhMembersChart @nightShift={{feature "nightShift"}} @showSummary={{false}} @showRange={{false}} @chartType="mrr" @chartStats={{this.mrrStats.data}} /> <GhMembersChart @nightShift={{feature "nightShift"}} @showSummary={{false}} @showRange={{false}} @chartType="mrr" @chartStats={{this.mrrStats.data}} />
</div> </div>
@ -38,12 +38,12 @@
<div class="gh-dashboard-summary small"> <div class="gh-dashboard-summary small">
<h4 class="gh-dashboard-header">Total members</h4> <h4 class="gh-dashboard-header">Total members</h4>
<div class="data-container"> <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 class="growth">0.0%</div>
</div> </div>
</div> </div>
<div class="gh-dashboard-chart small"> <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> </div>
</div> </div>
@ -52,12 +52,12 @@
<div class="gh-dashboard-summary small"> <div class="gh-dashboard-summary small">
<h4 class="gh-dashboard-header">Paid members</h4> <h4 class="gh-dashboard-header">Paid members</h4>
<div class="data-container"> <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 class="growth">0.0%</div>
</div> </div>
</div> </div>
<div class="gh-dashboard-chart small"> <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> </div>
</div> </div>
@ -126,17 +126,17 @@
<h4 class="gh-dashboard-header secondary">Open rate</h4> <h4 class="gh-dashboard-header secondary">Open rate</h4>
</div> </div>
<div class="gh-dashboard-list nodata"> <div class="gh-dashboard-list nodata">
{{#if this.events.loading}} {{#if this.topMembersLoading}}
Loading... Loading...
{{else}} {{else}}
{{#if this.events.error}} {{#if this.topMembersError}}
<p class="error"> <p class="error">
There was an error loading events There was an error loading events
<code>{{this.events.error.message}}</code> <code>{{this.events.error.message}}</code>
</p> </p>
{{else}} {{else}}
<ul class="gh-dashboard-top-members"> <ul class="gh-dashboard-top-members">
{{#each this.topMembers.data as |member|}} {{#each this.topMembersData as |member|}}
<li class="gh-dashboard-top-member"> <li class="gh-dashboard-top-member">
<LinkTo class="member-details" @route="members"> <LinkTo class="member-details" @route="members">
<GhMemberAvatar @member={{member}} @containerClass="w9 h9 mr3 flex-shrink-0" /> <GhMemberAvatar @member={{member}} @containerClass="w9 h9 mr3 flex-shrink-0" />
@ -157,16 +157,16 @@
<div class="gh-dashboard-box grey activity-feed"> <div class="gh-dashboard-box grey activity-feed">
<h4 class="gh-dashboard-header">Activity feed</h4> <h4 class="gh-dashboard-header">Activity feed</h4>
<div class="content"> <div class="content">
{{#if this.events.loading}} {{#if this.eventsLoading}}
Loading... Loading...
{{else}} {{else}}
{{#if this.events.error}} {{#if this.eventsError}}
<p class="error"> <p class="error">
There was an error loading events There was an error loading events
<code>{{this.events.error.message}}</code> <code>{{this.eventsError.message}}</code>
</p> </p>
{{else}} {{else}}
<GhEventTimeline @events={{this.events.data}}/> <GhEventTimeline @events={{this.eventsData}}/>
{{/if}} {{/if}}
{{/if}} {{/if}}
</div> </div>