Commit 3a6da03f authored by Andrei Mondoc's avatar Andrei Mondoc
Browse files

replace profile, event, and contribution dropdowns with react-select

parent 3a308c24
This diff is collapsed.
...@@ -9,5 +9,8 @@ ...@@ -9,5 +9,8 @@
"scripts": { "scripts": {
"build": "wp-scripts build", "build": "wp-scripts build",
"start": "wp-scripts start" "start": "wp-scripts start"
},
"dependencies": {
"react-select": "^3.0.8"
} }
} }
import { __ } from '@wordpress/i18n' import { __ } from '@wordpress/i18n'
import { useState, useEffect } from '@wordpress/element' import { useState, useEffect } from '@wordpress/element'
import { SelectControl } from '@wordpress/components' import Select, { components } from 'react-select'
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'}}>
id:{data.id}
</span>
<span style={{fontSize: '12px', display: 'block'}}>
{data.intro_text.slice(0, 40)}...
</span>
</components.Option>
}
const SelectContributionPageControl = ({ id, setAttributes }) => { const SelectContributionPageControl = ({ id, setAttributes }) => {
const onChangeContributionPage = id => setAttributes({ id })
const [ contributionPages, setConstributionPages ] = useState([{ const [contributionPages, setConstributionPages] = useState([])
label: __('Select a Contribution page', 'civicrm'), const [contributionPage, setConstributionPage] = useState({})
value: '0',
disabled: true
}])
useEffect(() => { useEffect(() => {
CRM.api4('ContributionPage', 'get', { CRM.api4('ContributionPage', 'get', {
...@@ -20,9 +31,10 @@ const SelectContributionPageControl = ({ id, setAttributes }) => { ...@@ -20,9 +31,10 @@ const SelectContributionPageControl = ({ id, setAttributes }) => {
if (!result && !result.length) return; if (!result && !result.length) return;
const options = result.map(page => ({ const options = result.map(page => ({
...page,
label: page.title, label: page.title,
value: page.id value: page.id
})) }));
setConstributionPages([ setConstributionPages([
...contributionPages, ...contributionPages,
...@@ -31,12 +43,19 @@ const SelectContributionPageControl = ({ id, setAttributes }) => { ...@@ -31,12 +43,19 @@ const SelectContributionPageControl = ({ id, setAttributes }) => {
}) })
}, []) }, [])
return <SelectControl useEffect(() => {
label={__('Contribution Page', 'civicrm')} setConstributionPage(contributionPages.filter(page => page.id == id)[0])
value={id} }, [contributionPages, id])
options={contributionPages}
onChange={onChangeContributionPage} return <>
/> <Select
placeholder={__('Select a Contribution page', 'civicrm')}
value={contributionPage || 0}
onChange={option => setAttributes({id: option.value})}
options={contributionPages}
components={{Option: ContributionPageOption}}
/>
</>
} }
export default SelectContributionPageControl export default SelectContributionPageControl
import { __ } from '@wordpress/i18n' import { __ } from '@wordpress/i18n'
import { useState, useEffect } from '@wordpress/element' import { useState, useEffect } from '@wordpress/element'
import { SelectControl } from '@wordpress/components' 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'}}>
{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>
<span style={{fontSize: '12px', display: 'block'}}>
{data.summary.slice(0, 40)}...
</span>
</components.Option>
}
const SelectEventControl = ({ id, setAttributes }) => { const SelectEventControl = ({ id, setAttributes }) => {
const onChangeEvent = id => setAttributes({ id })
const [events, setEvents] = useState([{ const [events, setEvents] = useState([])
label: __('Select an Event', 'civicrm'), const [event, setEvent] = useState({})
value: 0,
disabled: true
}])
useEffect(() => { useEffect(() => {
CRM.api4('Event', 'get', { CRM.api4('Event', 'get', {
...@@ -23,6 +35,7 @@ const SelectEventControl = ({ id, setAttributes }) => { ...@@ -23,6 +35,7 @@ const SelectEventControl = ({ id, setAttributes }) => {
if (!result && !result.length) return; if (!result && !result.length) return;
const options = result.map(event => ({ const options = result.map(event => ({
...event,
label: event.title, label: event.title,
value: event.id value: event.id
})) }))
...@@ -34,12 +47,19 @@ const SelectEventControl = ({ id, setAttributes }) => { ...@@ -34,12 +47,19 @@ const SelectEventControl = ({ id, setAttributes }) => {
}) })
}, []) }, [])
return <SelectControl useEffect(() => {
label={__('Event Page', 'civicrm')} setEvent(events.filter(event => event.id == id)[0])
value={id} }, [events, id])
options={events}
onChange={onChangeEvent} return <>
/> <Select
placeholder={__('Select an Event', 'civicrm')}
value={event || 0}
onChange={option => setAttributes({id: option.value})}
options={events}
components={{Option: EventOption}}
/>
</>
} }
export default SelectEventControl export default SelectEventControl
import { __ } from '@wordpress/i18n' import { __ } from '@wordpress/i18n'
import { useState, useEffect } from '@wordpress/element' import { useState, useEffect } from '@wordpress/element'
import { SelectControl } from '@wordpress/components' import Select, { components } from 'react-select'
const ProfileOption = props => {
const {data} = props
return <components.Option {...props} >
<span style={{fontWeight: 'bold', display: 'block'}}>
{data.title}
</span>
<span style={{fontSize: '12px'}}>
{data.group_type.join(', ')} | id:{data.id}
</span>
</components.Option>
}
const SelectProfileControl = ({ gid, setAttributes }) => { const SelectProfileControl = ({ gid, setAttributes }) => {
const onChangeProfile = gid => setAttributes({ gid })
const [profiles, setProfiles] = useState([{ const [profiles, setProfiles] = useState([])
label: __('Select a Profile', 'civicrm'), const [profile, setProfile] = useState({})
value: 0,
disabled: true
}])
useEffect(() => { useEffect(() => {
CRM.api4('UFGroup', 'get', { CRM.api4('UFGroup', 'get', {
select: ['title', 'group_type'], select: ['title', 'group_type'],
where: [['is_active', '=', '1']] where: [
['is_active', '=', '1'],
['is_reserved', '=', '0']
]
}) })
.then((result) => { .then((result) => {
if (!result && !result.length) return; if (!result && !result.length) return;
const options = result.map(ufGroup => ({ const options = result.map(ufGroup => {
label: ufGroup.title, return {
value: ufGroup.id ...ufGroup,
})) label: ufGroup.title,
value: ufGroup.id
};
})
setProfiles([ setProfiles([
...profiles, ...profiles,
...options ...options
]) ])
}) })
}, []) }, [])
return <SelectControl useEffect(() => {
label={__('Profile', 'civicrm')} setProfile(profiles.filter(profile => profile.id == gid)[0]);
value={gid} }, [profiles, gid])
options={profiles}
onChange={onChangeProfile} return <>
/> <Select
placeholder={__('Select a Profile', 'civicrm')}
value={profile || 0}
onChange={option => setAttributes({gid: option.value})}
options={profiles}
components={{Option: ProfileOption}}
/>
</>
} }
export default SelectProfileControl export default SelectProfileControl
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment