mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-28 22:43:30 +03:00
Updated members list screen design
This commit is contained in:
Rish
parent
cdb87e5112
commit
204e10c114
25
ghost/admin/app/components/gh-members-list-item.js
Normal file
25
ghost/admin/app/components/gh-members-list-item.js
Normal file
@ -0,0 +1,25 @@
|
||||
import Component from '@ember/component';
|
||||
import moment from 'moment';
|
||||
import {alias} from '@ember/object/computed';
|
||||
import {computed} from '@ember/object';
|
||||
import {inject as service} from '@ember/service';
|
||||
|
||||
export default Component.extend({
|
||||
ghostPaths: service(),
|
||||
notifications: service(),
|
||||
router: service(),
|
||||
|
||||
tagName: 'li',
|
||||
classNames: ['gh-list-row', 'gh-tags-list-item'],
|
||||
|
||||
active: false,
|
||||
|
||||
id: alias('member.id'),
|
||||
email: alias('member.email'),
|
||||
name: computed('member.name', function () {
|
||||
return this.member.name || '-';
|
||||
}),
|
||||
subscribedAt: computed('member.createdAt', function () {
|
||||
return moment(this.member.createdAt).format('YYYY-MM-DD HH:mm');
|
||||
})
|
||||
});
|
||||
@ -11,7 +11,6 @@ export default Controller.extend({
|
||||
meta: null,
|
||||
members: null,
|
||||
searchText: '',
|
||||
|
||||
init() {
|
||||
this._super(...arguments);
|
||||
this.set('members', this.store.peekAll('member'));
|
||||
@ -27,13 +26,69 @@ export default Controller.extend({
|
||||
}
|
||||
|
||||
let {name, email} = member;
|
||||
return name.toLowerCase().indexOf(searchText) >= 0
|
||||
|| email.toLowerCase().indexOf(searchText) >= 0;
|
||||
return (name && name.toLowerCase().indexOf(searchText) >= 0)
|
||||
|| (email && email.toLowerCase().indexOf(searchText) >= 0);
|
||||
});
|
||||
|
||||
return filtered;
|
||||
}),
|
||||
|
||||
chartData: computed('members.@each', function () {
|
||||
let {members} = this;
|
||||
let dateFormat = 'DD-MM-YYYY';
|
||||
let monthData = [];
|
||||
let dateLabel = [];
|
||||
let startDate = moment().subtract(29, 'days');
|
||||
for (let i = 0; i < 30; i++) {
|
||||
let m = moment(startDate).add(i, 'days');
|
||||
dateLabel.push(m.format(dateFormat));
|
||||
let membersTillDate = members.filter((member) => {
|
||||
let isValid = moment(member.createdAt).isSameOrBefore(m, 'day');
|
||||
return isValid;
|
||||
}).length;
|
||||
monthData.push(membersTillDate);
|
||||
}
|
||||
return {
|
||||
data: {
|
||||
labels: dateLabel,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Members',
|
||||
data: monthData,
|
||||
fill: false,
|
||||
strokeColor: 'rgba(151,187,205,1)',
|
||||
pointColor: 'rgba(151,187,205,1)',
|
||||
pointStrokeColor: '#fff',
|
||||
pointHighlightFill: '#fff',
|
||||
pointHighlightStroke: 'rgba(151,187,205,1)'
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Total members in last 30 days'
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
type: 'time',
|
||||
time: {
|
||||
format: dateFormat,
|
||||
tooltipFormat: 'll'
|
||||
},
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: 'Date'
|
||||
},
|
||||
display: true
|
||||
}]
|
||||
}
|
||||
}
|
||||
};
|
||||
}),
|
||||
|
||||
fetchMembers: task(function* () {
|
||||
let newFetchDate = new Date();
|
||||
let results;
|
||||
|
||||
@ -0,0 +1,19 @@
|
||||
{{#link-to "member" member class="gh-list-data" title="Edit Member"}}
|
||||
<h3 class="gh-tag-list-name">
|
||||
{{this.email}}
|
||||
</h3>
|
||||
{{/link-to}}
|
||||
|
||||
{{#link-to "member" member class="gh-list-data middarkgrey f8 gh-tag-list-slug" title="Edit Member"}}
|
||||
<span class="gh-tag-list-slug" title="Created at">{{this.name}}</span>
|
||||
{{/link-to}}
|
||||
|
||||
{{#link-to "member" member class="gh-list-data middarkgrey f8 gh-tag-list-slug" title="Subscribed At" }}
|
||||
<span class="nowrap">{{this.subscribedAt}}</span>
|
||||
{{/link-to}}
|
||||
|
||||
{{#link-to "member" member class="gh-list-data" title="Edit Member"}}
|
||||
<div class="flex items-center justify-end w-100">
|
||||
<span class="nr2">{{svg-jar "arrow-right" class="w6 h6 fill-midgrey pa1"}}</span>
|
||||
</div>
|
||||
{{/link-to}}
|
||||
@ -6,8 +6,11 @@
|
||||
@input={{action (mut this.searchText) value="target.value"}} />
|
||||
</div>
|
||||
</GhCanvasHeader>
|
||||
|
||||
<div style="width:100%">
|
||||
{{ember-chart type='line' options=chartOptions.options data=chartData.data height=70}}
|
||||
</div>
|
||||
<section class="view-container h-100">
|
||||
|
||||
<div class="flex justify-between items-center">
|
||||
<h2 class="f-small fw5 midlightgrey ttu">
|
||||
{{#if this.searchText}}
|
||||
@ -23,40 +26,43 @@
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
{{#if this.filteredMembers}}
|
||||
{{!-- members list, styles taken from .apps-grid --}}
|
||||
<div class="flex flex-row flex-wrap items-start br3 mt2 mb10 bg-grouped-table shadow-1">
|
||||
<VerticalCollection
|
||||
@items={{this.filteredMembers}}
|
||||
@key="id"
|
||||
@containerSelector=".gh-main"
|
||||
@estimateHeight=76
|
||||
as |member index|
|
||||
>
|
||||
<div class="flex-grow-1 flex-shrink-1" style="flex-basis: 100%">
|
||||
{{#link-to "member" member classNames="link whitegrey"}}
|
||||
<article class="flex items-center justify-between pa4 pt3 pb3 {{if index "bt"}} highlight-whitegrey">
|
||||
<div class="flex items-center">
|
||||
<GhMemberAvatar @member={{member}} class="w9 h9 mr4" />
|
||||
<div class="flex flex-column">
|
||||
<h3 class="darkgrey ma0 f6 fw6">{{member.name}}</h3>
|
||||
<p class="midgrey ma0 pa0 f7">{{member.email}}</p>
|
||||
</div>
|
||||
<section class="content-list">
|
||||
<ol class="tags-list gh-list">
|
||||
{{#if filteredMembers}}
|
||||
<li class="gh-list-row header">
|
||||
<div class="gh-list-header gh-list-cellwidth-1-2">Member Email</div>
|
||||
<div class="gh-list-header">Member Name</div>
|
||||
<div class="gh-list-header">Subscribed on</div>
|
||||
<div class="gh-list-header"></div>
|
||||
</li>
|
||||
{{#vertical-collection
|
||||
items=filteredMembers
|
||||
key="id"
|
||||
containerSelector=".gh-main"
|
||||
estimateHeight=60
|
||||
bufferSize=20
|
||||
as |member|
|
||||
}}
|
||||
{{gh-members-list-item
|
||||
member=member
|
||||
data-test-member-id=member.id
|
||||
}}
|
||||
{{/vertical-collection}}
|
||||
{{else}}
|
||||
{{#if this.fetchMembers.isRunning}}
|
||||
<div class="gh-content">
|
||||
<GhLoadingSpinner />
|
||||
</div>
|
||||
{{else}}
|
||||
<li class="no-posts-box">
|
||||
<div class="no-posts">
|
||||
{{svg-jar "tags-placeholder" class="gh-tags-placeholder"}}
|
||||
<h3>No members found!</h3>
|
||||
</div>
|
||||
<div class="flex items-center">{{svg-jar "arrow-right" class="w4 h4 fill-midlightgrey"}}</div>
|
||||
</article>
|
||||
{{/link-to}}
|
||||
</div>
|
||||
</VerticalCollection>
|
||||
</div>
|
||||
{{else}}
|
||||
{{#if this.fetchMembers.isRunning}}
|
||||
<div class="gh-content">
|
||||
<GhLoadingSpinner />
|
||||
</div>
|
||||
{{else}}
|
||||
<p class="mt2 pt10 bt b--whitegrey tc midlightgrey">No members found.</p>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
</li>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
</ol>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
@ -54,6 +54,7 @@
|
||||
"ember-cli-app-version": "3.2.0",
|
||||
"ember-cli-babel": "7.12.0",
|
||||
"ember-cli-chai": "0.5.0",
|
||||
"ember-cli-chart": "^3.5.0",
|
||||
"ember-cli-dependency-checker": "3.2.0",
|
||||
"ember-cli-deprecation-workflow": "1.0.1",
|
||||
"ember-cli-eslint": "5.1.0",
|
||||
|
||||
@ -3393,6 +3393,29 @@ charm@^1.0.0:
|
||||
dependencies:
|
||||
inherits "^2.0.1"
|
||||
|
||||
chart.js@^2.8.0:
|
||||
version "2.8.0"
|
||||
resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.8.0.tgz#b703b10d0f4ec5079eaefdcd6ca32dc8f826e0e9"
|
||||
integrity sha512-Di3wUL4BFvqI5FB5K26aQ+hvWh8wnP9A3DWGvXHVkO13D3DSnaSsdZx29cXlEsYKVkn1E2az+ZYFS4t0zi8x0w==
|
||||
dependencies:
|
||||
chartjs-color "^2.1.0"
|
||||
moment "^2.10.2"
|
||||
|
||||
chartjs-color-string@^0.6.0:
|
||||
version "0.6.0"
|
||||
resolved "https://registry.yarnpkg.com/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz#1df096621c0e70720a64f4135ea171d051402f71"
|
||||
integrity sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==
|
||||
dependencies:
|
||||
color-name "^1.0.0"
|
||||
|
||||
chartjs-color@^2.1.0:
|
||||
version "2.3.0"
|
||||
resolved "https://registry.yarnpkg.com/chartjs-color/-/chartjs-color-2.3.0.tgz#0e7e1e8dba37eae8415fd3db38bf572007dd958f"
|
||||
integrity sha512-hEvVheqczsoHD+fZ+tfPUE+1+RbV6b+eksp2LwAhwRTVXEjCSEavvk+Hg3H6SZfGlPh/UfmWKGIvZbtobOEm3g==
|
||||
dependencies:
|
||||
chartjs-color-string "^0.6.0"
|
||||
color-convert "^0.5.3"
|
||||
|
||||
check-error@^1.0.2:
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/check-error/-/check-error-1.0.2.tgz#574d312edd88bb5dd8912e9286dd6c0aed4aac82"
|
||||
@ -3589,6 +3612,11 @@ collection-visit@^1.0.0:
|
||||
map-visit "^1.0.0"
|
||||
object-visit "^1.0.0"
|
||||
|
||||
color-convert@^0.5.3:
|
||||
version "0.5.3"
|
||||
resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-0.5.3.tgz#bdb6c69ce660fadffe0b0007cc447e1b9f7282bd"
|
||||
integrity sha1-vbbGnOZg+t/+CwAHzER+G59ygr0=
|
||||
|
||||
color-convert@^1.9.0, color-convert@^1.9.1:
|
||||
version "1.9.3"
|
||||
resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
|
||||
@ -4678,6 +4706,16 @@ ember-cli-chai@0.5.0:
|
||||
rollup-plugin-commonjs "^8.0.2"
|
||||
rollup-plugin-node-resolve "^3.0.0"
|
||||
|
||||
ember-cli-chart@^3.5.0:
|
||||
version "3.5.0"
|
||||
resolved "https://registry.yarnpkg.com/ember-cli-chart/-/ember-cli-chart-3.5.0.tgz#c20df59413cd3473d17a39b40db810ebb2b45544"
|
||||
integrity sha512-L7HWIOGXKEV/UKR9cioKQXlsDmx2DPAScirx6tQXB5aBx5hOYGSx6QHG2dSzMimI86hD5JstbuqeTyTfmRv+RA==
|
||||
dependencies:
|
||||
chart.js "^2.8.0"
|
||||
ember-cli-babel "^7.7.3"
|
||||
ember-cli-node-assets "^0.2.2"
|
||||
fastboot-transform "^0.1.2"
|
||||
|
||||
ember-cli-dependency-checker@3.2.0:
|
||||
version "3.2.0"
|
||||
resolved "https://registry.yarnpkg.com/ember-cli-dependency-checker/-/ember-cli-dependency-checker-3.2.0.tgz#9202ad9e14d6fda33cffc22a11c343c2a8885330"
|
||||
@ -4844,7 +4882,7 @@ ember-cli-moment-shim@3.7.1, ember-cli-moment-shim@^3.7.1:
|
||||
moment "^2.19.3"
|
||||
moment-timezone "^0.5.13"
|
||||
|
||||
ember-cli-node-assets@0.2.2:
|
||||
ember-cli-node-assets@0.2.2, ember-cli-node-assets@^0.2.2:
|
||||
version "0.2.2"
|
||||
resolved "https://registry.yarnpkg.com/ember-cli-node-assets/-/ember-cli-node-assets-0.2.2.tgz#d2d55626e7cc6619f882d7fe55751f9266022708"
|
||||
integrity sha1-0tVWJufMZhn4gtf+VXUfkmYCJwg=
|
||||
@ -6206,7 +6244,7 @@ fast-sourcemap-concat@^1.4.0:
|
||||
source-map-url "^0.3.0"
|
||||
sourcemap-validator "^1.1.0"
|
||||
|
||||
fastboot-transform@^0.1.3:
|
||||
fastboot-transform@^0.1.2, fastboot-transform@^0.1.3:
|
||||
version "0.1.3"
|
||||
resolved "https://registry.yarnpkg.com/fastboot-transform/-/fastboot-transform-0.1.3.tgz#7dea0b117594afd8772baa6c9b0919644e7f7dcd"
|
||||
integrity sha512-6otygPIJw1ARp1jJb+6KVO56iKBjhO+5x59RSC9qiZTbZRrv+HZAuP00KD3s+nWMvcFDemtdkugki9DNFTTwCQ==
|
||||
@ -8895,7 +8933,7 @@ moment-timezone@^0.5.13:
|
||||
dependencies:
|
||||
moment ">= 2.9.0"
|
||||
|
||||
"moment@>= 2.9.0", moment@^2.19.3:
|
||||
"moment@>= 2.9.0", moment@^2.10.2, moment@^2.19.3:
|
||||
version "2.24.0"
|
||||
resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
|
||||
integrity sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==
|
||||
|
||||
Loading…
Reference in New Issue
Block a user