Ghost/ghost/admin/app/controllers/member.js
Kevin Ansfield 5a1b3d90fb Updated members list to use paginated loading
no issue

- disabled members search/filter/chart as they won't work without all members loaded into memory (they will be added back later)
- added `ember-ella-sparse` to handle a sparse array of members
- updated `fetchMembersTask` to return a sparse array instance
- updated components that work on a `member` instance to use `.get` because all items in a sparse array are proxy objects
- changed list loading behaviour to not refresh the list from the API unless the client-side list is more than a minute old - allows for much snappier nav between list and details screens
2020-05-20 16:39:32 +01:00

159 lines
4.7 KiB
JavaScript

import Controller, {inject as controller} from '@ember/controller';
import EmberObject, {action, defineProperty} from '@ember/object';
import boundOneWay from 'ghost-admin/utils/bound-one-way';
import moment from 'moment';
import {alias} from '@ember/object/computed';
import {inject as service} from '@ember/service';
import {task} from 'ember-concurrency-decorators';
import {tracked} from '@glimmer/tracking';
const SCRATCH_PROPS = ['name', 'email', 'note'];
export default class MemberController extends Controller {
@controller members;
@service session;
@service dropdown;
@service notifications;
@service router;
@service store;
@tracked isLoading = false;
@tracked showDeleteMemberModal = false;
@tracked showImpersonateMemberModal = false;
@tracked showUnsavedChangesModal = false;
leaveScreenTransition = null;
// Computed properties -----------------------------------------------------
@alias('model') member;
get scratchMember() {
let scratchMember = EmberObject.create({member: this.member});
SCRATCH_PROPS.forEach(prop => defineProperty(scratchMember, prop, boundOneWay(`member.${prop}`)));
return scratchMember;
}
get subscribedAt() {
// member can be a proxy object in a sparse array so .get is required
let memberSince = moment(this.member.get('createdAtUTC')).from(moment());
let createdDate = moment(this.member.get('createdAtUTC')).format('MMM DD, YYYY');
return `${createdDate} (${memberSince})`;
}
// Actions -----------------------------------------------------------------
@action
setProperty(propKey, value) {
this._saveMemberProperty(propKey, value);
}
@action
toggleDeleteMemberModal() {
this.showDeleteMemberModal = !this.showDeleteMemberModal;
}
@action
toggleImpersonateMemberModal() {
this.showImpersonateMemberModal = !this.showImpersonateMemberModal;
}
@action
save() {
return this.saveTask.perform();
}
@action
deleteMember() {
return this.member.destroyRecord().then(() => {
return this.transitionToRoute('members');
}, (error) => {
return this.notifications.showAPIError(error, {key: 'member.delete'});
});
}
@action
toggleUnsavedChangesModal(transition) {
let leaveTransition = this.leaveScreenTransition;
if (!transition && this.showUnsavedChangesModal) {
this.leaveScreenTransition = null;
this.showUnsavedChangesModal = false;
return;
}
if (!leaveTransition || transition.targetName === leaveTransition.targetName) {
this.leaveScreenTransition = transition;
// if a save is running, wait for it to finish then transition
if (this.save.isRunning) {
return this.save.last.then(() => {
transition.retry();
});
}
// we genuinely have unsaved data, show the modal
this.showUnsavedChangesModal = true;
}
}
@action
leaveScreen() {
this.member.rollbackAttributes();
return this.leaveScreenTransition.retry();
}
// Tasks -------------------------------------------------------------------
@task({drop: true})
*saveTask() {
let {member, scratchMember} = this;
// if Cmd+S is pressed before the field loses focus make sure we're
// saving the intended property values
let scratchProps = scratchMember.getProperties(SCRATCH_PROPS);
member.setProperties(scratchProps);
try {
yield member.save();
member.updateLabels();
// replace 'member.new' route with 'member' route
this.replaceRoute('member', member);
return member;
} catch (error) {
if (error) {
this.notifications.showAPIError(error, {key: 'member.save'});
}
}
}
@task
*fetchMemberTask(memberId) {
this.isLoading = true;
this.member = yield this.store.findRecord('member', memberId, {
reload: true
});
this.isLoading = false;
}
// Private -----------------------------------------------------------------
_saveMemberProperty(propKey, newValue) {
let currentValue = this.member.get(propKey);
if (newValue) {
newValue = newValue.trim();
}
// avoid modifying empty values and triggering inadvertant unsaved changes modals
if (newValue !== false && !newValue && !currentValue) {
return;
}
this.member.set(propKey, newValue);
}
}