Commit ad86c243 authored by Kevin Cristiano's avatar Kevin Cristiano 🌎
Browse files

Merge branch 'improvements' into 'master'

Improvements

See merge request !2
parents a1e35b97 15ac4b43
This diff is collapsed.
/**
* Block Dependencies.
*
* @since 0.1
*/
import Select from 'react-select';
/**
* Internal Block Libraries.
*
* @since 0.1
*/
const { apiFetch } = wp;
const { __ } = wp.i18n;
const {
//registerStore,
withSelect,
} = wp.data;
const { registerBlockType } = wp.blocks;
const { InspectorControls } = wp.editor;
const {
ServerSideRender,
TextControl,
SelectControl,
ToggleControl,
PanelBody,
} = wp.components;
console.log('here');
/**
* Dynamic actions.
*
* @since 0.1
*/
/*
const actions = {
setUserRoles( userRoles ) {
console.log( `actions userRoles:`, userRoles );
return {
type: 'SET_USER_ROLES',
userRoles,
};
},
getUserRoles( path ) {
console.log( `actions path:`, path );
return {
type: 'GET_USER_ROLES',
path,
};
},
};
*/
/**
* Dynamic data store.
*
* @since 0.1
*/
/*
const store = registerStore(
'civicrm/civicrm-profile-block', {
reducer( state = { userRoles: {} }, action ) {
console.log( `reducer action:`, action );
switch ( action.type ) {
case 'SET_USER_ROLES':
return {
...state,
userRoles: action.userRoles,
};
case 'GET_USER_ROLES':
return action.userRoles;
}
return state;
},
actions,
selectors: {
getUserRoles( state ) {
console.log( `selectors state:`, state );
const { userRoles } = state;
return userRoles;
},
},
resolvers: {
* getUserRoles( state ) {
console.log( `resolvers state:`, state );
const userRoles = apiFetch( { path: '/civicrm/civicrm-profile-block/v1/user-roles/' } )
.then( userRoles => {
return actions.setUserRoles( userRoles );
} )
yield userRoles;
},
},
}
);
*/
/**
* Register block.
*
* @since 0.1
*/
export default registerBlockType(
'civicrm/civicrm-profile-block', {
title: __( 'CiviCRM Profile', 'civicrm-gutenberg-blocks' ),
description: __( 'Demonstration of a CiviCRM Profile block.', 'civicrm-gutenberg-blocks' ),
category: 'widgets',
icon: 'megaphone',
keywords: [
__( 'CiviCRM', 'civicrm-gutenberg-blocks' ),
__( 'Profile', 'civicrm-gutenberg-blocks' ),
],
edit: /* withSelect( ( select ) => {
return {
userRoles: select( 'civicrm/civicrm-profile-block' ).getUserRoles(),
};
} )( */ props => {
const { attributes, userRoles, className, setAttributes } = props;
const { component, gid, mode, hijack } = props.attributes;
console.log( `userRoles:`, userRoles );
const handleSelectChange = ( selectedOption ) => {
setAttributes( { gid: selectedOption.value } );
};
const defaultOptions = [
{ value: '1', label: 'One' },
{ value: '2', label: 'Two' },
{ value: '3', label: 'Three' },
];
return (
<div>
<ServerSideRender
block="civicrm/civicrm-profile-block"
attributes={ attributes }
/>
<InspectorControls>
<PanelBody>
<SelectControl
label={ __( 'Mode', 'civicrm-gutenberg-blocks' ) }
value={ mode }
options={[
{ value: 'test', label: __( 'Test Drive', 'civicrm-gutenberg-blocks' ) },
{ value: 'live', label: __( 'Live Mode', 'civicrm-gutenberg-blocks' ) },
]}
onChange={ mode => setAttributes( { mode } ) }
/>
</PanelBody>
<PanelBody>
<ToggleControl
label={ __( 'Hijack', 'civicrm-gutenberg-blocks' ) }
checked={ hijack }
onChange={ hijack => setAttributes( { hijack } ) }
/>
</PanelBody>
</InspectorControls>
</div>
);
}, // ),
save: props => {
return null;
},
},
);
<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-polyfill', 'wp-server-side-render'), 'version' => '2977fd9b98028bc2e469775fb450c857'); <?php return array('dependencies' => array('react', 'react-dom', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-date', 'wp-element', 'wp-i18n', 'wp-polyfill', 'wp-server-side-render'), 'version' => 'fb086dbfa0b1641a4085d9fe0884dc53');
\ No newline at end of file \ No newline at end of file
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
...@@ -272,8 +272,11 @@ class CiviCRM_Gutenberg_Blocks { ...@@ -272,8 +272,11 @@ class CiviCRM_Gutenberg_Blocks {
$_REQUEST['gid'] = $atts['gid']; $_REQUEST['gid'] = $atts['gid'];
ob_start(); ob_start();
try {
( new CRM_Profile_Page_Router )->run( $args ); ( new CRM_Profile_Page_Router )->run( $args );
} catch ( Exception $e ) {
// silence
}
return ob_get_clean(); return ob_get_clean();
...@@ -296,10 +299,14 @@ class CiviCRM_Gutenberg_Blocks { ...@@ -296,10 +299,14 @@ class CiviCRM_Gutenberg_Blocks {
ob_start(); ob_start();
( new CRM_Contribute_Controller_Contribution( try {
'CiviContribute', ( new CRM_Contribute_Controller_Contribution(
CRM_Core_Action::ADD 'CiviContribute',
) )->run(); CRM_Core_Action::ADD
) )->run();
} catch (Exception $e) {
// silence
}
return ob_get_clean(); return ob_get_clean();
...@@ -323,10 +330,14 @@ class CiviCRM_Gutenberg_Blocks { ...@@ -323,10 +330,14 @@ class CiviCRM_Gutenberg_Blocks {
ob_start(); ob_start();
if ( $atts['action'] == 'register' ) { try {
( new CRM_Event_Controller_Registration() )->run(); if ( $atts['action'] == 'register' ) {
} else { ( new CRM_Event_Controller_Registration() )->run();
( new CRM_Event_Page_EventInfo )->run(); } else {
( new CRM_Event_Page_EventInfo )->run();
}
} catch ( Exception $e ) {
// silence
} }
return ob_get_clean(); return ob_get_clean();
...@@ -347,7 +358,11 @@ class CiviCRM_Gutenberg_Blocks { ...@@ -347,7 +358,11 @@ class CiviCRM_Gutenberg_Blocks {
ob_start(); ob_start();
( new CRM_Contact_Page_View_UserDashBoard() )->run(); try {
( new CRM_Contact_Page_View_UserDashBoard() )->run();
} catch ( Exception $e ) {
// silence
}
return ob_get_clean(); return ob_get_clean();
...@@ -531,17 +546,8 @@ class CiviCRM_Gutenberg_Blocks { ...@@ -531,17 +546,8 @@ class CiviCRM_Gutenberg_Blocks {
if ( ! $screen->is_block_editor() ) return; if ( ! $screen->is_block_editor() ) return;
$actions = [ if ( ! has_action( 'admin_head', [ civi_wp(), 'wp_head' ] ) ) {
'load-post.php', add_action( 'admin_head', [ civi_wp(), 'wp_head' ], 50 );
'load-post-new.php',
'load-page.php',
'load-page-new.php',
];
foreach ( $actions as $action ) {
if ( ! has_action( $action, [ civi_wp()->modal, 'add_core_resources' ] ) ) {
add_action( $action, [ civi_wp()->modal, 'add_core_resources' ] );
}
} }
} }
...@@ -578,4 +584,3 @@ function civicrm_gutenberg_blocks() { ...@@ -578,4 +584,3 @@ function civicrm_gutenberg_blocks() {
add_action( 'plugins_loaded', 'civicrm_gutenberg_blocks' ); add_action( 'plugins_loaded', 'civicrm_gutenberg_blocks' );
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"
} }
} }
...@@ -11,6 +11,7 @@ import ProfileModeControl from './components/ProfileModeControl' ...@@ -11,6 +11,7 @@ import ProfileModeControl from './components/ProfileModeControl'
import ModeControl from './components/ModeControl' import ModeControl from './components/ModeControl'
import ActionControl from './components/ActionControl' import ActionControl from './components/ActionControl'
import ExtraAttributesListControl from './components/ExtraAttributesListControl' import ExtraAttributesListControl from './components/ExtraAttributesListControl'
import NoPreview from './components/NoPreview'
const CiviCRMContentBlock = ({ attributes, setAttributes }) => { const CiviCRMContentBlock = ({ attributes, setAttributes }) => {
const { component, gid, id, mode, action, hijack, extra_attributes } = attributes const { component, gid, id, mode, action, hijack, extra_attributes } = attributes
...@@ -50,10 +51,12 @@ const CiviCRMContentBlock = ({ attributes, setAttributes }) => { ...@@ -50,10 +51,12 @@ const CiviCRMContentBlock = ({ attributes, setAttributes }) => {
<HijackControl {...{ hijack, setAttributes }} /> <HijackControl {...{ hijack, setAttributes }} />
<ExtraAttributesListControl {...{ extra_attributes, setAttributes }} /> <ExtraAttributesListControl {...{ extra_attributes, setAttributes }} />
</InspectorControls> </InspectorControls>
<p>{__('CiviCRM content block', 'civicrm')}</p>
<ServerSideRender <ServerSideRender
block='civicrm/civicrm-content-block' block='civicrm/civicrm-content-block'
attributes={attributes} attributes={attributes}
className='civicrm-content-block'
ErrorResponsePlaceholder={NoPreview}
EmptyResponsePlaceholder={NoPreview}
/> />
</> </>
) )
......
import { __ } from '@wordpress/i18n'
const NoPreview = () => <p>{__('Could not render preview.', 'civicrm')}</p>
export default NoPreview
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 ? 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 ? 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(() => {