From 54283b9431e5133b030aae8bf138262d5c2bd141 Mon Sep 17 00:00:00 2001 From: Rish Date: Wed, 2 Oct 2019 17:05:50 +0530 Subject: [PATCH] Updated members list/detail screens base structure no issue --- app/components/gh-member-avatar.js | 15 ++--- app/components/gh-member-settings-form.js | 13 +---- app/components/gh-members-list-item.js | 4 +- app/controllers/member.js | 18 +++--- app/controllers/members.js | 58 +------------------ app/styles/app-dark.css | 2 + app/styles/app.css | 2 + app/styles/components/lists.css | 2 +- app/styles/layouts/member.css | 13 +++++ app/styles/layouts/members.css | 3 + .../components/gh-member-settings-form.hbs | 43 ++++++++------ .../components/gh-members-list-item.hbs | 14 ++--- app/templates/member.hbs | 12 ++-- app/templates/members.hbs | 11 +--- 14 files changed, 83 insertions(+), 127 deletions(-) create mode 100644 app/styles/layouts/member.css create mode 100644 app/styles/layouts/members.css diff --git a/app/components/gh-member-avatar.js b/app/components/gh-member-avatar.js index 4620dfaec..a3277bdd5 100644 --- a/app/components/gh-member-avatar.js +++ b/app/components/gh-member-avatar.js @@ -16,11 +16,12 @@ export default Component.extend({ tagName: '', member: null, - initialsClass: 'f6 fw4', - - backgroundStyle: computed('member.name', function () { - let name = this.member.name; + initialsClass: computed('sizeClass', function () { + return this.sizeClass || 'f6 fw4'; + }), + backgroundStyle: computed('member.{name,email}', function () { + let name = this.member.name || this.member.email; if (name) { let color = stringToHslColor(name, 55, 55); return htmlSafe(`background-color: ${color}`); @@ -29,11 +30,11 @@ export default Component.extend({ return htmlSafe(''); }), - initials: computed('member.name', function () { - let name = this.member.name; + initials: computed('member.{name,email}', function () { + let name = this.member.name || this.member.email; if (name) { let names = name.split(' '); - let intials = [names[0][0], names[names.length - 1][0]]; + let intials = names.length > 1 ? [names[0][0], names[names.length - 1][0]] : [names[0][0]]; return intials.join('').toUpperCase(); } return ''; diff --git a/app/components/gh-member-settings-form.js b/app/components/gh-member-settings-form.js index 964b25d8c..adf2af648 100644 --- a/app/components/gh-member-settings-form.js +++ b/app/components/gh-member-settings-form.js @@ -1,31 +1,22 @@ -/* global key */ import Component from '@ember/component'; -import Ember from 'ember'; import boundOneWay from 'ghost-admin/utils/bound-one-way'; -import {computed} from '@ember/object'; -import {htmlSafe} from '@ember/string'; -import {reads} from '@ember/object/computed'; import {inject as service} from '@ember/service'; -const {Handlebars} = Ember; - export default Component.extend({ feature: service(), config: service(), mediaQueries: service(), - member: null, - isViewingSubview: false, + scratchDescription: '', + // Allowed actions setProperty: () => {}, showDeleteTagModal: () => {}, scratchName: boundOneWay('member.name'), scratchEmail: boundOneWay('member.email'), - scratchDescription: '', - actions: { setProperty(property, value) { this.setProperty(property, value); diff --git a/app/components/gh-members-list-item.js b/app/components/gh-members-list-item.js index 0209d010d..ada62e405 100644 --- a/app/components/gh-members-list-item.js +++ b/app/components/gh-members-list-item.js @@ -20,6 +20,8 @@ export default Component.extend({ return this.member.name || '-'; }), subscribedAt: computed('member.createdAt', function () { - return moment(this.member.createdAt).format('YYYY-MM-DD HH:mm'); + let memberSince = moment(this.member.createdAt).from(moment()); + let createdDate = moment(this.member.createdAt).format('MMM DD, YYYY'); + return `Created on ${createdDate} (${memberSince})`; }) }); diff --git a/app/controllers/member.js b/app/controllers/member.js index 6b0a016d8..a40b82291 100644 --- a/app/controllers/member.js +++ b/app/controllers/member.js @@ -1,4 +1,5 @@ import Controller from '@ember/controller'; +import moment from 'moment'; import {alias} from '@ember/object/computed'; import {computed} from '@ember/object'; import {inject as controller} from '@ember/controller'; @@ -30,9 +31,14 @@ export default Controller.extend({ }; }), + subscribedAt: computed('member.createdAt', function () { + let createdDate = moment(this.member.createdAt).format('MMM DD, YYYY'); + return `Subscribed ${createdDate}`; + }), + actions: { - setProperty(propKey, value) { - // this._saveTagProperty(propKey, value); + setProperty() { + return; }, toggleDeleteTagModal() { this.toggleProperty('showDeleteMemberModal'); @@ -44,17 +50,9 @@ export default Controller.extend({ this.members.decrementProperty('meta.pagination.total'); } this.router.transitionTo('members'); - }, - save() { - return this.save.perform(); } }, - save: task(function* () { - // DO NOTHING ATM - return; - }), - fetchMember: task(function* (memberId) { yield this.store.findRecord('member', memberId, { reload: true diff --git a/app/controllers/members.js b/app/controllers/members.js index d10b80570..8cd465dae 100644 --- a/app/controllers/members.js +++ b/app/controllers/members.js @@ -32,63 +32,7 @@ export default Controller.extend({ 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; diff --git a/app/styles/app-dark.css b/app/styles/app-dark.css index 6dde80c01..1b3495a0b 100644 --- a/app/styles/app-dark.css +++ b/app/styles/app-dark.css @@ -53,6 +53,8 @@ @import "layouts/user.css"; @import "layouts/about.css"; @import "layouts/tags.css"; +@import "layouts/member.css"; +@import "layouts/members.css"; @import "layouts/error.css"; @import "layouts/apps.css"; @import "layouts/packages.css"; diff --git a/app/styles/app.css b/app/styles/app.css index 08845828c..3f384491b 100644 --- a/app/styles/app.css +++ b/app/styles/app.css @@ -53,6 +53,8 @@ @import "layouts/user.css"; @import "layouts/about.css"; @import "layouts/tags.css"; +@import "layouts/member.css"; +@import "layouts/members.css"; @import "layouts/error.css"; @import "layouts/apps.css"; @import "layouts/packages.css"; diff --git a/app/styles/components/lists.css b/app/styles/components/lists.css index c90f3662c..49b598264 100644 --- a/app/styles/components/lists.css +++ b/app/styles/components/lists.css @@ -79,7 +79,7 @@ } .gh-list-row:nth-of-type(2) .gh-list-data { - border: none; + border-top: none; } .gh-list-data.show-on-hover > *, diff --git a/app/styles/layouts/member.css b/app/styles/layouts/member.css new file mode 100644 index 000000000..cbd023730 --- /dev/null +++ b/app/styles/layouts/member.css @@ -0,0 +1,13 @@ +.member-detail-main-info { + display: flex; + align-items: center; + margin-bottom: 30px; +} + +.member-basic-info-form input:disabled { + background: var(--lightgrey); +} + +.member-basic-info-form textarea:disabled { + background: var(--lightgrey); +} \ No newline at end of file diff --git a/app/styles/layouts/members.css b/app/styles/layouts/members.css new file mode 100644 index 000000000..b55d8a032 --- /dev/null +++ b/app/styles/layouts/members.css @@ -0,0 +1,3 @@ +.members-list .gh-list-row:nth-of-type(2) .gh-list-data { + border-top: var(--whitegrey) 1px solid; +} \ No newline at end of file diff --git a/app/templates/components/gh-member-settings-form.hbs b/app/templates/components/gh-member-settings-form.hbs index 6a6e7b489..a6c73128b 100644 --- a/app/templates/components/gh-member-settings-form.hbs +++ b/app/templates/components/gh-member-settings-form.hbs @@ -1,9 +1,10 @@ -

Basic settings

+

Basic info

{{#gh-form-group errors=member.errors hasValidated=member.hasValidated property="name"}} {{gh-text-input + disabled=true id="member-name" name="name" value=(readonly scratchName) @@ -16,27 +17,31 @@ {{#gh-form-group errors=member.errors hasValidated=member.hasValidated property="email"}} {{gh-text-input - value=(readonly scratchSlug) - id="member-email" - name="email" - tabindex="2" - focus-out=(action 'setProperty' 'email' scratchEmail) - input=(action (mut scratchSlug) value="target.value")}} + disabled=true + value=(readonly scratchEmail) + id="member-email" + name="email" + tabindex="2" + focus-out=(action 'setProperty' 'email' scratchEmail) + input=(action (mut scratchEmail) value="target.value")}} {{/gh-form-group}} +
+
{{#gh-form-group errors=member.errors hasValidated=tag.hasValidated property="note"}} - - {{gh-textarea - id="member-description" - name="description" - class="gh-tag-details-textarea" - tabindex="3" - value=(readonly scratchDescription) - input=(action (mut scratchDescription) value="target.value") - focus-out=(action 'setProperty' 'description' scratchDescription) - }} - {{gh-error-message errors=tag.errors property="description"}} -

Maximum: 500 characters. You’ve used {{gh-count-down-characters scratchDescription 500}}

+ + {{gh-textarea + disabled=true + id="member-description" + name="description" + class="gh-tag-details-textarea" + tabindex="3" + value=(readonly scratchDescription) + input=(action (mut scratchDescription) value="target.value") + focus-out=(action 'setProperty' 'description' scratchDescription) + }} + {{gh-error-message errors=tag.errors property="description"}} +

Maximum: 500 characters. You’ve used {{gh-count-down-characters scratchDescription 500}}

{{/gh-form-group}}
\ No newline at end of file diff --git a/app/templates/components/gh-members-list-item.hbs b/app/templates/components/gh-members-list-item.hbs index 02cbf26df..737661ee0 100644 --- a/app/templates/components/gh-members-list-item.hbs +++ b/app/templates/components/gh-members-list-item.hbs @@ -1,11 +1,11 @@ {{#link-to "member" member class="gh-list-data" title="Edit Member"}} -

- {{this.email}} -

-{{/link-to}} - -{{#link-to "member" member class="gh-list-data middarkgrey f8 gh-tag-list-slug" title="Edit Member"}} - {{this.name}} +
+ +
+

{{this.name}}

+

{{this.email}}

+
+
{{/link-to}} {{#link-to "member" member class="gh-list-data middarkgrey f8 gh-tag-list-slug" title="Subscribed At" }} diff --git a/app/templates/member.hbs b/app/templates/member.hbs index 2eb1cd41a..5a3c2eac1 100644 --- a/app/templates/member.hbs +++ b/app/templates/member.hbs @@ -1,15 +1,19 @@
-
+

{{#link-to "members" data-test-link="members-back"}}Members{{/link-to}} {{svg-jar "arrow-right"}} {{member.email}}

-
- {{gh-task-button task=save class="gh-btn gh-btn-blue gh-btn-icon" data-test-button="save"}} -
+
+ +
+

{{member.email}}

+

{{this.subscribedAt}}

+
+
{{gh-member-settings-form member=member setProperty=(action "setProperty") showDeleteTagModal=(action "toggleDeleteTagModal")}} diff --git a/app/templates/members.hbs b/app/templates/members.hbs index 019f0b16a..3004e9229 100644 --- a/app/templates/members.hbs +++ b/app/templates/members.hbs @@ -6,9 +6,6 @@ @input={{action (mut this.searchText) value="target.value"}} /> -
- {{ember-chart type='line' options=chartOptions.options data=chartData.data height=70}} -
@@ -27,14 +24,8 @@
-
    +
      {{#if filteredMembers}} -
    1. -
      Member Email
      -
      Member Name
      -
      Subscribed on
      -
      -
      2. {{#vertical-collection items=filteredMembers key="id"