Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FIX Create campaign success message #37

Merged
merged 14 commits into from
Aug 3, 2017
5 changes: 5 additions & 0 deletions .eslintrc
Original file line number Diff line number Diff line change
Expand Up @@ -5,5 +5,10 @@
},
"rules": {
"init-declarations": 1
},
"parserOptions": {
"ecmaFeatures": {
"experimentalObjectRestSpread": true
}
}
}
Binary file added client/dist/images/empty-campaign-preview.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion client/dist/js/bundle.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion client/dist/styles/bundle.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion client/dist/styles/bundle.css.map

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions client/lang/en.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ if (typeof(ss) === 'undefined' || typeof(ss.i18n) === 'undefined') {
}
} else {
ss.i18n.addDictionary('en', {
"CampaignAdmin.ADDCAMPAIGN": "Add campaign",
"CampaignAdmin.ADDCAMPAIGN": "Add new",
"CampaignAdmin.DELETECAMPAIGN": "Are you sure you want to delete this record?",
"CampaignAdmin.DRAFT": "Draft",
"CampaignAdmin.ITEM_SUMMARY_PLURAL": "%s items",
Expand All @@ -17,4 +17,4 @@ if (typeof(ss) === 'undefined' || typeof(ss.i18n) === 'undefined') {
"CampaignAdmin.REMOVED": "Removed",
"CampaignAdmin.REVERTCAMPAIGN": "Revert"
});
}
}
4 changes: 2 additions & 2 deletions client/lang/src/en.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"CampaignAdmin.ADDCAMPAIGN": "Add campaign",
"CampaignAdmin.ADDCAMPAIGN": "Add new",
"CampaignAdmin.DELETECAMPAIGN": "Are you sure you want to delete this record?",
"CampaignAdmin.DRAFT": "Draft",
"CampaignAdmin.ITEM_SUMMARY_PLURAL": "%s items",
Expand All @@ -9,4 +9,4 @@
"CampaignAdmin.PUBLISHCAMPAIGN": "Publish campaign",
"CampaignAdmin.REMOVED": "Removed",
"CampaignAdmin.REVERTCAMPAIGN": "Revert"
}
}
6 changes: 5 additions & 1 deletion client/src/containers/CampaignAdmin/CampaignAdmin.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { bindActionCreators } from 'redux';
import { withRouter } from 'react-router';
import getFormState from 'lib/getFormState';
import backend from 'lib/Backend';
import * as campaignActions from 'state/campaign/CampaignActions';
import * as breadcrumbsActions from 'state/breadcrumbs/BreadcrumbsActions';
import Breadcrumb from 'components/Breadcrumb/Breadcrumb';
import SilverStripeComponent from 'lib/SilverStripeComponent';
Expand Down Expand Up @@ -119,7 +120,8 @@ class CampaignAdmin extends SilverStripeComponent {
// open the new campaign in edit mode after save completes
const sectionUrl = this.props.sectionConfig.url;
const id = response.record.id;
this.props.router.push(`${sectionUrl}/set/${id}/edit`);
this.props.campaignActions.setNewCampaignCreated(true);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since the id is available, it would be more extensible to include the record or even just the id in the record, rather than just a boolean.
In this case, you could ignore the is or has prefix I mentioned below. But try to keep the naming consistent still setNewItem is perfectly fine.

this.props.router.push(`${sectionUrl}/set/${id}/show`);
}

return response;
Expand Down Expand Up @@ -166,6 +168,7 @@ class CampaignAdmin extends SilverStripeComponent {
const formActionProps = {
title: i18n._t('CampaignAdmin.ADDCAMPAIGN'),
icon: 'plus',
extraClass: 'btn-primary',
handleClick: this.addCampaign.bind(this),
};
const formBuilderProps = {
Expand Down Expand Up @@ -410,6 +413,7 @@ function mapStateToProps(state, ownProps) {
function mapDispatchToProps(dispatch) {
return {
breadcrumbsActions: bindActionCreators(breadcrumbsActions, dispatch),
campaignActions: bindActionCreators(campaignActions, dispatch),
};
}

Expand Down
39 changes: 39 additions & 0 deletions client/src/containers/CampaignAdmin/CampaignAdmin.scss
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,24 @@
}
}
}

.campaign-admin__campaign-preview--empty {
align-items: center;
justify-content: center;
}

.campaign-admin__empty-heading {
font-size: $font-size-h1;
margin-bottom: 1em;
}

.campaign-admin__empty-info {
padding-top: calc(270px + 0.5em);
background-image: url('empty-campaign-preview.png');
background-repeat: no-repeat;
background-position: 50% 0;
font-size: $font-size-lg;
}
}

.campaign-admin__campaign-items {
Expand Down Expand Up @@ -77,6 +95,27 @@
}
}

.list-group-wrapper--empty {
.list-group {
border-bottom: 0;
}

.list-group-item {
background: transparent;
font-style: italic;
border-bottom: 0;
cursor: default;
}

.accordion__title {
cursor: default;

&:before {
display: none;
}
}
}

.campaign-admin__item-links--is-linked {
opacity: 1;

Expand Down
151 changes: 118 additions & 33 deletions client/src/containers/CampaignAdmin/CampaignAdminList.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,7 @@ import CampaignAdminItem from './CampaignAdminItem';
import Breadcrumb from 'components/Breadcrumb/Breadcrumb';
import Preview from 'components/Preview/Preview';
import i18n from 'i18n';

const sectionConfigKey = 'SilverStripe\\CMS\\Controllers\\CMSPagesController';
import classnames from 'classnames';

/**
* Represents a campaign list view
Expand All @@ -29,6 +28,16 @@ class CampaignAdminList extends SilverStripeComponent {
this.handleItemSelected = this.handleItemSelected.bind(this);
this.setBreadcrumbs = this.setBreadcrumbs.bind(this);
this.handleCloseItem = this.handleCloseItem.bind(this);

if (!this.isRecordLoaded()) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

since this is in the constructor, would be a good idea to pass through props to isRecordLoaded it can default to this.props if not provided

this.state = {
loading: true,
};
} else {
this.state = {
loading: false,
};
}
}

componentDidMount() {
Expand All @@ -37,13 +46,28 @@ class CampaignAdminList extends SilverStripeComponent {
this.setBreadcrumbs();

// Only load record if not already present
if (!Object.keys(this.props.record).length) {
if (!this.isRecordLoaded()) {
this.props.recordActions
.fetchRecord(this.props.treeClass, 'get', fetchURL)
.then(this.setBreadcrumbs);
.then(() => {
this.setBreadcrumbs();
this.setState({ loading: false });
});
}
}

componentWillUnmount() {
// Reset new create flag
this.props.campaignActions.setNewCampaignCreated(false);
}

/**
* @return {boolean}
*/
isRecordLoaded() {
return Object.keys(this.props.record).length !== 0;
}

/**
* Update breadcrumbs for this view
*/
Expand Down Expand Up @@ -94,6 +118,7 @@ class CampaignAdminList extends SilverStripeComponent {
const selectedClass = (!itemId) ? 'campaign-admin__campaign--hide-preview' : '';
const campaignId = this.props.campaignId;
const campaign = this.props.record;
const newItemCreated = this.props.newItemCreated;

// Trigger different layout when preview is enabled
const itemGroups = this.groupItemsForSet();
Expand All @@ -113,9 +138,12 @@ class CampaignAdminList extends SilverStripeComponent {
const group = itemGroups[className];
const groupCount = group.items.length;

let listGroupItems = [];
let title = `${groupCount} ${groupCount === 1 ? group.singular : group.plural}`;
let groupid = `Set_${campaignId}_Group_${className}`;
const listGroupItems = [];
const title = `
${groupCount === 0 ? '' : groupCount}
${groupCount === 1 ? group.singular : group.plural}
`;
const groupid = `Set_${campaignId}_Group_${className}`;

// Create items for this group
group.items.forEach(item => {
Expand Down Expand Up @@ -163,29 +191,31 @@ class CampaignAdminList extends SilverStripeComponent {
);
});

const wrapperClassnames = classnames('list-group-wrapper', {
'list-group-wrapper--empty': listGroupItems.length === 0,
});

// Merge into group
accordionBlocks.push(
<AccordionBlock key={groupid} groupid={groupid} title={title}>
{listGroupItems}
</AccordionBlock>
<div className={wrapperClassnames}>
<AccordionBlock key={groupid} groupid={groupid} title={title}>
{
listGroupItems.length > 0 ?
listGroupItems :
<p className="list-group-item">{group.noItemText}</p>
}
</AccordionBlock>
</div>
);
});

// Set body
const pagesLink = [
this.props.config.absoluteBaseUrl,
this.props.config.sections.find((section) => section.name === sectionConfigKey).url,
].join('');

const body = accordionBlocks.length
? (<Accordion>{accordionBlocks}</Accordion>)
: (
<div className="alert alert-warning" role="alert">
<strong>This campaign is empty.</strong> You can add items to a campaign by
selecting <em>Add to campaign</em> from within the <em>More Options </em>
popup on <a href={pagesLink}>pages</a> and files.
</div>
);
const newItemInfo = newItemCreated ?
(<p className="alert alert-success alert--no-border" role="alert">
Nice one! You have successfully created a campaign.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i18n this please.

</p>) :
null;

const body = <Accordion>{accordionBlocks}</Accordion>;
const bodyClass = [
'panel', 'panel--padded', 'panel--scrollable', 'flexbox-area-grow',
];
Expand All @@ -196,18 +226,57 @@ class CampaignAdminList extends SilverStripeComponent {
<Toolbar showBackButton handleBackButtonClick={this.props.handleBackButtonClick}>
<Breadcrumb multiline />
</Toolbar>
{newItemInfo}
<div className={bodyClass.join(' ')}>
{body}
</div>
<div className="toolbar toolbar--south">
{this.renderButtonToolbar()}
</div>
</div>
<Preview itemLinks={itemLinks} itemId={itemId} onBack={this.handleCloseItem} />
{this.renderPreview(itemLinks, itemId)}
</div>
);
}

renderPreview(itemLinks, itemId) {
let preview = null;

if (this.state.loading) {
preview = (
<div
className="flexbox-area-grow
fill-height
preview
campaign-admin__campaign-preview
campaign-admin__campaign-preview--empty"
>
<p>Loading...</p>
</div>
);
} else if (!this.getItems() || this.getItems().length === 0) {
preview = (
<div
className="flexbox-area-grow
fill-height
preview
campaign-admin__campaign-preview
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

shouldn't have new lines in double quoted strings...
move these to a variable or classnames object

campaign-admin__campaign-preview--empty"
>
<h2 className="campaign-admin__empty-heading">Getting started</h2>
<p className="campaign-admin__empty-info">
Select <strong>Add to Campaign</strong>
from pages, files, and other content types
</p>
</div>
);
} else {
preview = <Preview itemLinks={itemLinks} itemId={itemId} onBack={this.handleCloseItem} />;
}

return preview;
}

/**
* Callback for items being clicked on
*
Expand All @@ -225,11 +294,6 @@ class CampaignAdminList extends SilverStripeComponent {
renderButtonToolbar() {
const items = this.getItems();

// let itemSummaryLabel;
if (!items || !items.length) {
return <div className="btn-toolbar"></div>;
}

// let itemSummaryLabel = i18n.sprintf(
// items.length === 1
// ? i18n._t('CampaignAdmin.ITEM_SUMMARY_SINGULAR')
Expand All @@ -239,7 +303,14 @@ class CampaignAdminList extends SilverStripeComponent {

let actionProps = {};

if (this.props.record.State === 'open') {
if (!items || items.length === 0) {
actionProps = Object.assign(actionProps, {
title: i18n._t('CampaignAdmin.PUBLISHCAMPAIGN'),
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

add translation default fallback

buttonStyle: 'secondary-outline',
icon: 'rocket',
disabled: true,
});
} else if (this.props.record.State === 'open') {
actionProps = Object.assign(actionProps, {
title: i18n._t('CampaignAdmin.PUBLISHCAMPAIGN'),
buttonStyle: 'primary',
Expand Down Expand Up @@ -289,7 +360,7 @@ class CampaignAdminList extends SilverStripeComponent {
* @return {object}
*/
groupItemsForSet() {
const groups = {};
const groups = this.getPlaceholderGroups();
const items = this.getItems();
if (!items) {
return groups;
Expand All @@ -315,6 +386,19 @@ class CampaignAdminList extends SilverStripeComponent {
return groups;
}

getPlaceholderGroups() {

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure why we need this api; doesn't groupItemsForSet() build the groups automatically?

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok, @phalkunz has explained why this is necessary. The only change I'd request is the switch to using the existing config for important_classes instead.

const groups = {};

if (this.props.record && this.props.record.placeholderGroups) {
this.props.record.placeholderGroups.forEach((group) => {
groups[group.baseClass] = { ...group };
groups[group.baseClass].items = [...group.items];
});
}

return groups;
}

handlePublish(e) {
e.preventDefault();
this.props.campaignActions.publishCampaign(
Expand Down Expand Up @@ -352,6 +436,7 @@ function mapStateToProps(state, ownProps) {
record: record || {},
campaign: state.campaign,
treeClass,
newItemCreated: state.campaign.newItemCreated,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

proptypes definition for this

};
}

Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions client/src/state/campaign/CampaignActionTypes.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,5 @@ export default {
PUBLISH_CAMPAIGN_REQUEST: 'PUBLISH_CAMPAIGN_REQUEST',
PUBLISH_CAMPAIGN_SUCCESS: 'PUBLISH_CAMPAIGN_SUCCESS',
PUBLISH_CAMPAIGN_FAILURE: 'PUBLISH_CAMPAIGN_FAILURE',
SET_NEW_CAMPAIGN_CREATED: 'SET_NEW_CAMPAIGN_CREATED',
};
Loading