This repository has been archived by the owner on Mar 18, 2021. It is now read-only.
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #23 from guardian/sw-show-campaign-assets
Sw show campaign assets
- Loading branch information
Showing
27 changed files
with
503 additions
and
29 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| import {fetchCampaignContent} from '../../services/CampaignsApi'; | ||
|
|
||
| function requestCampaignContent(id) { | ||
| return { | ||
| type: 'CONTENT_GET_REQUEST', | ||
| id: id, | ||
| receivedAt: Date.now() | ||
| }; | ||
| } | ||
|
|
||
| function recieveCampaignContent(content) { | ||
| return { | ||
| type: 'CONTENT_GET_RECIEVE', | ||
| campaignContent: content, | ||
| receivedAt: Date.now() | ||
| }; | ||
| } | ||
|
|
||
| function errorRecievingCampaignContent(error) { | ||
| return { | ||
| type: 'SHOW_ERROR', | ||
| message: 'Could not get content', | ||
| error: error, | ||
| receivedAt: Date.now() | ||
| }; | ||
| } | ||
|
|
||
| export function getCampaignContent(id) { | ||
| return dispatch => { | ||
| dispatch(requestCampaignContent(id)); | ||
| return fetchCampaignContent(id) | ||
| .catch(error => dispatch(errorRecievingCampaignContent(error))) | ||
| .then(res => { | ||
| dispatch(recieveCampaignContent(res)); | ||
| }); | ||
| }; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
22 changes: 22 additions & 0 deletions
22
public/components/CampaignInformationEdit/CampaignAssets.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| import React, { PropTypes } from 'react'; | ||
| import CampaignLevelAssets from './CampaignLevelAssets'; | ||
| import CampaignContent from './CampaignContent'; | ||
|
|
||
| class CampaignAssets extends React.Component { | ||
|
|
||
| render () { | ||
| return ( | ||
| <div className="campaign-info campaign-box"> | ||
| <div className="campaign-box__header"> | ||
| Assets | ||
| </div> | ||
| <div className="campaign-box__body"> | ||
| <CampaignLevelAssets campaign={this.props.campaign} /> | ||
| <CampaignContent campaign={this.props.campaign} /> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export default CampaignAssets; |
121 changes: 121 additions & 0 deletions
121
public/components/CampaignInformationEdit/CampaignContent.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,121 @@ | ||
| import React, {Component, PropTypes} from 'react'; | ||
| import ProgressSpinner from '../utils/ProgressSpinner'; | ||
| import {composerEditUrl, previewUrl, liveUrl, mediaAtomEditUrl} from '../../util/urlBuilder'; | ||
|
|
||
| class CampaignContent extends Component { | ||
|
|
||
| componentWillMount() { | ||
| this.props.campaignContentActions.getCampaignContent(this.props.campaign.id); | ||
| } | ||
|
|
||
| componentWillReceiveProps(nextProps) { | ||
| if (nextProps.campaign.id !== this.props.campaign.id) { | ||
| this.props.campaignContentActions.getCampaignContent(nextProps.campaign.id); | ||
| } | ||
| } | ||
| renderContentAtoms = (atom) => { | ||
| return ( | ||
| <div key={atom.id} className="campaign-content-list__row"> | ||
| <div className="campaign-content-list__content-type"></div> | ||
| <div className="campaign-content-list__atom-title">{atom.type}: {atom.title}</div> | ||
| <div className="campaign-content-list__content-status"></div> | ||
| <div className="campaign-content-list__content-links"> | ||
| <a href={mediaAtomEditUrl(atom.id)} target="_blank" title="Edit in atom builder"><i className="i-atom" /></a> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| renderContentItem = (content) => { | ||
| var contentTypeIcon; | ||
|
|
||
| if (content.type === 'Article') { | ||
| contentTypeIcon = <i className="i-article" /> | ||
| } else if (content.type === 'Gallery') { | ||
| contentTypeIcon = <i className="i-gallery" /> | ||
| } else if (content.type === 'Video') { | ||
| contentTypeIcon = <i className="i-video" /> | ||
| } | ||
|
|
||
| var status; | ||
| if(content.isLive) { | ||
| status = 'Live'; | ||
| } else { | ||
| status = 'Draft'; | ||
| } | ||
|
|
||
| return ( | ||
| <div key={content.id} className="campaign-content-list__item"> | ||
| <div className="campaign-content-list__row"> | ||
| <div className="campaign-content-list__content-type">{contentTypeIcon}{content.type}</div> | ||
| <div className="campaign-content-list__content-title">{content.title}</div> | ||
| <div className="campaign-content-list__content-status">{status}</div> | ||
| <div className="campaign-content-list__content-links"> | ||
| <a href={composerEditUrl(content.composerId)} target="_blank" title="Edit in composer"><i className="i-composer" /></a> | ||
| <a href={previewUrl(content.path)} target="_blank" title="Preview"><i className="i-preview-eye" /></a> | ||
| <a href={liveUrl(content.path)} target="_blank" title="See live"><i className="i-live-site" /></a> | ||
| </div> | ||
| </div> | ||
| {content.atoms.map( this.renderContentAtoms )} | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| renderContentItems = () => { | ||
|
|
||
| if(!this.props.campaignContent) { | ||
| return (<ProgressSpinner />); | ||
| } | ||
|
|
||
| if(this.props.campaignContent.length > 0) { | ||
| return ( | ||
| <div className="campaign-content-list campaign-assets__field__value"> | ||
| <div className="campaign-content-list__row"> | ||
| <div className="campaign-content-list__content-type--header">Type</div> | ||
| <div className="campaign-content-list__content-title--header">Title</div> | ||
| <div className="campaign-content-list__content-status--header">Status</div> | ||
| <div className="campaign-content-list__content-links--header">Links</div> | ||
| </div> | ||
| {this.props.campaignContent.map( this.renderContentItem ) } | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <span className="campaign-assets__field__value"> | ||
| No content has been created yet | ||
| </span> | ||
| ) | ||
| } | ||
|
|
||
| render() { | ||
|
|
||
| return ( | ||
| <div className="campaign-assets"> | ||
| <div className="campaign-assets__field"> | ||
| <label>Content</label> | ||
| {this.renderContentItems()} | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| //REDUX CONNECTIONS | ||
| import { connect } from 'react-redux'; | ||
| import { bindActionCreators } from 'redux'; | ||
| import * as getCampaignContent from '../../actions/CampaignActions/getCampaignContent'; | ||
|
|
||
| function mapStateToProps(state) { | ||
| return { | ||
| campaignContent: state.campaignContent, | ||
| }; | ||
| } | ||
|
|
||
| function mapDispatchToProps(dispatch) { | ||
| return { | ||
| campaignContentActions: bindActionCreators(Object.assign({}, getCampaignContent), dispatch) | ||
| }; | ||
| } | ||
|
|
||
| export default connect(mapStateToProps, mapDispatchToProps)(CampaignContent); |
61 changes: 61 additions & 0 deletions
61
public/components/CampaignInformationEdit/CampaignLevelAssets.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| import React, { PropTypes } from 'react'; | ||
| import {tagEditUrl, ctaEditUrl} from '../../util/urlBuilder' | ||
|
|
||
| class CampaignLevelAssets extends React.Component { | ||
|
|
||
| renderTagInformation = () => { | ||
|
|
||
| if(this.props.campaign.tagId) { | ||
| return ( | ||
| <span className="campaign-assets__field__value"> | ||
| <a href={tagEditUrl(this.props.campaign.tagId)} target="_blank"> | ||
| <img src={this.props.campaign.campaignLogo} className="campaign-assets__field__logo"/> | ||
| {this.props.campaign.pathPrefix} | ||
| </a> | ||
| </span> | ||
| ) | ||
| } | ||
|
|
||
| return ( | ||
| <span className="campaign-assets__field__value"> | ||
| No tag has been configured yet | ||
| </span> | ||
| ) | ||
| } | ||
|
|
||
| renderCtaInformation = () => { | ||
|
|
||
| if(this.props.campaign.callToActions && this.props.campaign.callToActions.length > 0) { | ||
| return ( | ||
| <span className="campaign-assets__field__value"> | ||
| <ul> | ||
| {this.props.campaign.callToActions.map( cta => <li key={cta.builderId}><a href={ctaEditUrl(cta.builderId)} target="_blank">{cta.builderId}</a></li> )} | ||
| </ul> | ||
| </span> | ||
| ) | ||
| } | ||
|
|
||
| return ( | ||
| <span className="campaign-assets__field__value"> | ||
| No call to actions configured yet | ||
| </span> | ||
| ) | ||
| } | ||
|
|
||
| render () { | ||
| return ( | ||
| <div className="campaign-assets"> | ||
| <div className="campaign-assets__field"> | ||
| <label>Tag</label> | ||
| {this.renderTagInformation()} | ||
| </div> | ||
| <div className="campaign-assets__field"> | ||
| <label>Call to actions</label> | ||
| {this.renderCtaInformation()} | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export default CampaignLevelAssets; |
Oops, something went wrong.