Commit 4568b384 authored by Andrei Mondoc's avatar Andrei Mondoc
Browse files

prettier formatted

parent a9e61b4e
......@@ -14,7 +14,15 @@ import ExtraAttributesListControl from './components/ExtraAttributesListControl'
import NoPreview from './components/NoPreview'
const CiviCRMContentBlock = ({ attributes, setAttributes }) => {
const { component, gid, id, mode, action, hijack, extra_attributes } = attributes
const {
component,
gid,
id,
mode,
action,
hijack,
extra_attributes,
} = attributes
const profileModes = ['create', 'edit', 'view', 'search']
const pageModes = ['live', 'test']
......@@ -30,31 +38,39 @@ const CiviCRMContentBlock = ({ attributes, setAttributes }) => {
break
case 'contribution':
selectControl = <SelectContributionPageControl {...{ id, setAttributes }} />
selectControl = (
<SelectContributionPageControl {...{ id, setAttributes }} />
)
if (!pageModes.includes(mode)) setAttributes({ mode: 'live' })
break
}
let selectControl,
profileModeControl = <ProfileModeControl {...{ mode, setAttributes }} />,
profileModeControl = (
<ProfileModeControl {...{ mode, setAttributes }} />
),
modeControl = <ModeControl {...{ mode, setAttributes }} />,
actionControl = <ActionControl {...{ action, setAttributes }} />
return (
<>
<InspectorControls key='inspector'>
<InspectorControls key="inspector">
<ComponentControl {...{ component, setAttributes }} />
{selectControl}
{component == 'profile' ? profileModeControl : ''}
{component == 'event' ? actionControl : ''}
{['event', 'contribution'].includes(component) ? modeControl : ''}
{['event', 'contribution'].includes(component)
? modeControl
: ''}
<HijackControl {...{ hijack, setAttributes }} />
<ExtraAttributesListControl {...{ extra_attributes, setAttributes }} />
<ExtraAttributesListControl
{...{ extra_attributes, setAttributes }}
/>
</InspectorControls>
<ServerSideRender
block='civicrm/civicrm-content-block'
block="civicrm/civicrm-content-block"
attributes={attributes}
className='civicrm-content-block'
className="civicrm-content-block"
ErrorResponsePlaceholder={NoPreview}
EmptyResponsePlaceholder={NoPreview}
/>
......
import { __ } from '@wordpress/i18n'
import { RadioControl } from '@wordpress/components'
const ActionControl = ({action, setAttributes}) => {
const onChangeAction = action => setAttributes({ action })
const ActionControl = ({ action, setAttributes }) => {
const onChangeAction = (action) => setAttributes({ action })
const options = [
{ label: __('Event Info Page', 'civicrm'), value: 'info' },
{ label: __('Event Registration Page', 'civicrm'), value: 'register' },
]
return <RadioControl
return (
<RadioControl
label={__('Action', 'civicrm')}
value={action}
options={options}
selected={action || 'info'}
onChange={onChangeAction}
/>
)
}
export default ActionControl
import { __ } from '@wordpress/i18n'
import { useState, useEffect } from "@wordpress/element";
import { useState, useEffect } from '@wordpress/element'
import { SelectControl } from '@wordpress/components'
const ComponentControl = ({ component, setAttributes }) => {
const onChangeComponent = component => setAttributes({ component })
const onChangeComponent = (component) => setAttributes({ component })
const [components, setComponents] = useState([
{ label: __('User Dashboard', 'civicrm'), value: 'user-dashboard' },
{ label: __('Profile', 'civicrm'), value: 'profile' },
{ label: __('Contribution Page', 'civicrm'), value: 'contribution', component: 'CiviContribute' },
{ label: __('Event Page', 'civicrm'), value: 'event', component: 'CiviEvent' },
{ label: __('Petition', 'civicrm'), value: 'petition', component: 'CiviCampaign' },
{
label: __('Contribution Page', 'civicrm'),
value: 'contribution',
component: 'CiviContribute',
},
{
label: __('Event Page', 'civicrm'),
value: 'event',
component: 'CiviEvent',
},
{
label: __('Petition', 'civicrm'),
value: 'petition',
component: 'CiviCampaign',
},
])
useEffect(() => {
CRM.api4('Setting', 'get', {
select: ['enable_components']
})
.then(function(result) {
select: ['enable_components'],
}).then(function (result) {
const setting = result[0]
if (!setting.value || !setting.value.length) return;
if (!setting.value || !setting.value.length) return
const filteredComponents = components.filter(component => {
const isEnabled = setting.value.includes(
component.component
);
return !component.component || isEnabled;
});
const filteredComponents = components.filter((component) => {
const isEnabled = setting.value.includes(component.component)
return !component.component || isEnabled
})
setComponents(filteredComponents)
})
}, [])
return <SelectControl
return (
<SelectControl
label={__('Component', 'civicrm')}
value={component}
options={components}
onChange={onChangeComponent}
/>
)
}
export default ComponentControl
import { __ } from '@wordpress/i18n'
import { BaseControl, IconButton } from '@wordpress/components'
const ExtraAttributeItemControl = ({ attribute, index, extra_attributes, setAttributes }) => {
const updateAttribute = e => {
const ExtraAttributeItemControl = ({
attribute,
index,
extra_attributes,
setAttributes,
}) => {
const updateAttribute = (e) => {
const newAttrs = [...extra_attributes]
newAttrs[index] = {
...attribute,
[e.target.name]: e.target.value
[e.target.name]: e.target.value,
}
setAttributes({
extra_attributes: [...newAttrs]
extra_attributes: [...newAttrs],
})
}
......@@ -18,35 +22,39 @@ const ExtraAttributeItemControl = ({ attribute, index, extra_attributes, setAttr
const newAttrs = [...extra_attributes]
newAttrs.splice(index, 1)
setAttributes({
extra_attributes: [...newAttrs]
extra_attributes: [...newAttrs],
})
}
return <>
<strong>{__('Attribute', 'civicrm')} {index + 1}</strong>
return (
<>
<strong>
{__('Attribute', 'civicrm')} {index + 1}
</strong>
<BaseControl label={__('Attribute name', 'civicrm')}>
<input
className='components-text-control__input'
type='text'
name='name'
className="components-text-control__input"
type="text"
name="name"
value={attribute.name}
onChange={updateAttribute}
/>
</BaseControl>
<BaseControl label={__('Attribute value', 'civicrm')}>
<input
className='components-text-control__input'
type='text'
name='value'
className="components-text-control__input"
type="text"
name="value"
value={attribute.value}
onChange={updateAttribute}
/>
</BaseControl>
<IconButton icon='trash' onClick={() => deleteAttribute()}>
<IconButton icon="trash" onClick={() => deleteAttribute()}>
{__('Delete attribute', 'civicrm')} {index + 1}
</IconButton>
<hr />
</>
)
}
export default ExtraAttributeItemControl
......@@ -3,36 +3,48 @@ import { PanelBody, PanelRow, IconButton } from '@wordpress/components'
import ExtraAttributeItemControl from './ExtraAttributeItemControl'
const ExtraAttributesListControl = ({ extra_attributes, setAttributes }) => {
const addAttribute = () => {
setAttributes({
extra_attributes: [
...extra_attributes,
{
name: '',
value: ''
}
]
value: '',
},
],
})
}
return <PanelBody title={__('Extra attributes', 'civicrm')} initialOpen={false}>
return (
<PanelBody
title={__('Extra shortcode attributes', 'civicrm')}
initialOpen={false}
>
<PanelRow>
<IconButton icon="insert" isDefault isLarge onClick={addAttribute}>
<IconButton
icon="insert"
isDefault
isLarge
onClick={addAttribute}
>
{__('Add attribute', 'civicrm')}
</IconButton>
</PanelRow>
{
extra_attributes.length
? extra_attributes.map(
(attribute, index) => <ExtraAttributeItemControl
{extra_attributes.length
? extra_attributes.map((attribute, index) => (
<ExtraAttributeItemControl
key={index}
{...{attribute, index, extra_attributes, setAttributes}}
{...{
attribute,
index,
extra_attributes,
setAttributes,
}}
/>
)
: ''
}
))
: ''}
</PanelBody>
)
}
export default ExtraAttributesListControl
......@@ -3,12 +3,17 @@ import { ToggleControl } from '@wordpress/components'
const HijackControl = ({ hijack, setAttributes }) => {
const onChangeHijack = () => setAttributes({ hijack: !hijack })
return <ToggleControl
return (
<ToggleControl
label={__('Override page content')}
help={__('If you only insert one shortcode, you can choose to override all page content with the content of the shortcode.', 'civicrm')}
help={__(
'If you only insert one shortcode, you can choose to override all page content with the content of the shortcode.',
'civicrm'
)}
checked={hijack}
onChange={onChangeHijack}
/>
)
}
export default HijackControl
......@@ -2,19 +2,21 @@ import { __ } from '@wordpress/i18n'
import { RadioControl } from '@wordpress/components'
const ModeControl = ({ mode, setAttributes }) => {
const onChangeMode = mode => setAttributes({ mode })
const onChangeMode = (mode) => setAttributes({ mode })
const options = [
{ label: __('Live Mode', 'civicrm'), value: 'live' },
{ label: __('Test Mode', 'civicrm'), value: 'test' },
]
return <RadioControl
return (
<RadioControl
label={__('Mode', 'civicrm')}
value={mode}
options={options}
selected={mode || 'live'}
onChange={onChangeMode}
/>
)
}
export default ModeControl
......@@ -2,7 +2,7 @@ import { __ } from '@wordpress/i18n'
import { RadioControl } from '@wordpress/components'
const ProfileModeControl = ({ mode, setAttributes }) => {
const onChangeMode = mode => setAttributes({ mode })
const onChangeMode = (mode) => setAttributes({ mode })
const options = [
{ label: __('Create', 'civicrm'), value: 'create' },
{ label: __('Edit', 'civicrm'), value: 'edit' },
......@@ -10,13 +10,15 @@ const ProfileModeControl = ({ mode, setAttributes }) => {
{ label: __('Search/Public Directory', 'civicrm'), value: 'search' },
]
return <RadioControl
return (
<RadioControl
label={__('Mode', 'civicrm')}
value={mode}
options={options}
selected={mode || 'create'}
onChange={onChangeMode}
/>
)
}
export default ProfileModeControl
......@@ -2,60 +2,61 @@ import { __ } from '@wordpress/i18n'
import { useState, useEffect } from '@wordpress/element'
import Select, { components } from 'react-select'
const ContributionPageOption = props => {
const {data} = props
return <components.Option {...props} >
<span style={{fontWeight: 'bold', display: 'block'}}>
const ContributionPageOption = (props) => {
const { data } = props
return (
<components.Option {...props}>
<span style={{ fontWeight: 'bold', display: 'block' }}>
{data.title}
</span>
<span style={{fontSize: '12px', display: 'block'}}>
<span style={{ fontSize: '12px', display: 'block' }}>
id:{data.id}
</span>
<span style={{fontSize: '12px', display: 'block'}}>
<span style={{ fontSize: '12px', display: 'block' }}>
{data.intro_text ? data.intro_text.slice(0, 40) : ''}...
</span>
</components.Option>
)
}
const SelectContributionPageControl = ({ id, setAttributes }) => {
const [contributionPages, setConstributionPages] = useState([])
const [contributionPage, setConstributionPage] = useState({})
useEffect(() => {
CRM.api4('ContributionPage', 'get', {
select: ['title', 'intro_text'],
where: [['is_active', '=', '1']]
})
.then((result) => {
if (!result && !result.length) return;
where: [['is_active', '=', '1']],
}).then((result) => {
if (!result && !result.length) return
const options = result.map(page => ({
const options = result.map((page) => ({
...page,
label: page.title,
value: page.id
}));
value: page.id,
}))
setConstributionPages([
...contributionPages,
...options
])
setConstributionPages([...contributionPages, ...options])
})
}, [])
useEffect(() => {
setConstributionPage(contributionPages.filter(page => page.id == id)[0])
setConstributionPage(
contributionPages.filter((page) => page.id == id)[0]
)
}, [contributionPages, id])
return <>
return (
<>
<Select
placeholder={__('Select a Contribution page', 'civicrm')}
value={contributionPage || 0}
onChange={option => setAttributes({id: option.value})}
onChange={(option) => setAttributes({ id: option.value })}
options={contributionPages}
components={{Option: ContributionPageOption}}
components={{ Option: ContributionPageOption }}
/>
</>
)
}
export default SelectContributionPageControl
......@@ -3,63 +3,73 @@ import { useState, useEffect } from '@wordpress/element'
import { date } from '@wordpress/date'
import Select, { components } from 'react-select'
const EventOption = props => {
const {data} = props
return <components.Option {...props} >
<span style={{fontWeight: 'bold', display: 'block'}}>
const EventOption = (props) => {
const { data } = props
return (
<components.Option {...props}>
<span style={{ fontWeight: 'bold', display: 'block' }}>
{data.title}
</span>
<span style={{fontSize: '12px', display: 'block'}}>
{data['event_type.label']}: {date('F j, Y g:i a', data.start_date)} | id:{data.id}
<span style={{ fontSize: '12px', display: 'block' }}>
{data['event_type.label']}:{' '}
{date('F j, Y g:i a', data.start_date)} | id:{data.id}
</span>
<span style={{fontSize: '12px', display: 'block'}}>
<span style={{ fontSize: '12px', display: 'block' }}>
{data.summary ? data.summary.slice(0, 40) : ''}...
</span>
</components.Option>
)
}
const SelectEventControl = ({ id, setAttributes }) => {
const [events, setEvents] = useState([])
const [event, setEvent] = useState({})
useEffect(() => {
CRM.api4('Event', 'get', {
select: ['title', 'summary', 'event_type.label', 'start_date', 'end_date'],
select: [
'title',
'summary',
'event_type.label',
'start_date',
'end_date',
],
where: [
['is_active', '=', '1'],
['is_template', '=', '0']
]
})
.then((result) => {
if (!result && !result.length) return;
['is_template', '=', '0'],
],
}).then((result) => {
if (!result && !result.length) return
const options = result.map(event => ({
const options = result.map((event) => ({
...event,
label: event.title,
value: event.id
value: event.id,
}))
setEvents([
...events,
...options
])
setEvents([...events, ...options])
})
}, [])
const test = () => {
events.map((event) => event)
}
useEffect(() => {
setEvent(events.filter(event => event.id == id)[0])
setEvent(events.filter((event) => event.id == id)[0])
}, [events, id])
return <>
return (
<>
<Select
placeholder={__('Select an Event', 'civicrm')}
value={event || 0}
onChange={option => setAttributes({id: option.value})}
onChange={(option) => setAttributes({ id: option.value })}
options={events}
components={{Option: EventOption}}
components={{ Option: EventOption }}
/>
</>
)
}
export default SelectEventControl
......@@ -2,20 +2,21 @@ import { __ } from '@wordpress/i18n'
import { useState, useEffect } from '@wordpress/element'
import Select, { components } from 'react-select'
const ProfileOption = props => {
const {data} = props
return <components.Option {...props} >
<span style={{fontWeight: 'bold', display: 'block'}}>
const ProfileOption = (props) => {
const { data } = props
return (
<components.Option {...props}>