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');
\ No newline at end of file
<?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
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 {
$_REQUEST['gid'] = $atts['gid'];
ob_start();
try {
( new CRM_Profile_Page_Router )->run( $args );
} catch ( Exception $e ) {
// silence
}
return ob_get_clean();
......@@ -296,10 +299,14 @@ class CiviCRM_Gutenberg_Blocks {
ob_start();
try {
( new CRM_Contribute_Controller_Contribution(
'CiviContribute',
CRM_Core_Action::ADD
) )->run();
} catch (Exception $e) {
// silence
}
return ob_get_clean();
......@@ -323,11 +330,15 @@ class CiviCRM_Gutenberg_Blocks {
ob_start();
try {
if ( $atts['action'] == 'register' ) {
( new CRM_Event_Controller_Registration() )->run();
} else {
( new CRM_Event_Page_EventInfo )->run();
}
} catch ( Exception $e ) {
// silence
}
return ob_get_clean();
......@@ -347,7 +358,11 @@ class CiviCRM_Gutenberg_Blocks {
ob_start();
try {
( new CRM_Contact_Page_View_UserDashBoard() )->run();
} catch ( Exception $e ) {
// silence
}
return ob_get_clean();
......@@ -531,17 +546,8 @@ class CiviCRM_Gutenberg_Blocks {
if ( ! $screen->is_block_editor() ) return;
$actions = [
'load-post.php',
'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' ] );
}
if ( ! has_action( 'admin_head', [ civi_wp(), 'wp_head' ] ) ) {
add_action( 'admin_head', [ civi_wp(), 'wp_head' ], 50 );
}
}
......@@ -578,4 +584,3 @@ function civicrm_gutenberg_blocks() {
add_action( 'plugins_loaded', 'civicrm_gutenberg_blocks' );
This diff is collapsed.
......@@ -9,5 +9,8 @@
"scripts": {
"build": "wp-scripts build",
"start": "wp-scripts start"
},
"dependencies": {
"react-select": "^3.0.8"
}
}
......@@ -11,6 +11,7 @@ import ProfileModeControl from './components/ProfileModeControl'
import ModeControl from './components/ModeControl'
import ActionControl from './components/ActionControl'
import ExtraAttributesListControl from './components/ExtraAttributesListControl'
import NoPreview from './components/NoPreview'
const CiviCRMContentBlock = ({ attributes, setAttributes }) => {
const { component, gid, id, mode, action, hijack, extra_attributes } = attributes
......@@ -50,10 +51,12 @@ const CiviCRMContentBlock = ({ attributes, setAttributes }) => {
<HijackControl {...{ hijack, setAttributes }} />
<ExtraAttributesListControl {...{ extra_attributes, setAttributes }} />
</InspectorControls>
<p>{__('CiviCRM content block', 'civicrm')}</p>
<ServerSideRender
block='civicrm/civicrm-content-block'
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 { 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 onChangeContributionPage = id => setAttributes({ id })
const [ contributionPages, setConstributionPages ] = useState([{
label: __('Select a Contribution page', 'civicrm'),
value: '0',
disabled: true
}])
const [contributionPages, setConstributionPages] = useState([])
const [contributionPage, setConstributionPage] = useState({})
useEffect(() => {
CRM.api4('ContributionPage', 'get', {
......@@ -20,9 +31,10 @@ const SelectContributionPageControl = ({ id, setAttributes }) => {
if (!result && !result.length) return;
const options = result.map(page => ({
...page,
label: page.title,
value: page.id
}))
}));
setConstributionPages([
...contributionPages,
......@@ -31,12 +43,19 @@ const SelectContributionPageControl = ({ id, setAttributes }) => {
})
}, [])
return <SelectControl
label={__('Contribution Page', 'civicrm')}
value={id}
useEffect(() => {
setConstributionPage(contributionPages.filter(page => page.id == id)[0])
}, [contributionPages, id])
return <>
<Select
placeholder={__('Select a Contribution page', 'civicrm')}
value={contributionPage || 0}
onChange={option => setAttributes({id: option.value})}
options={contributionPages}
onChange={onChangeContributionPage}
components={{Option: ContributionPageOption}}
/>
</>
}
export default SelectContributionPageControl
import { __ } from '@wordpress/i18n'
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 onChangeEvent = id => setAttributes({ id })
const [events, setEvents] = useState([{
label: __('Select an Event', 'civicrm'),
value: 0,
disabled: true
}])
const [events, setEvents] = useState([])
const [event, setEvent] = useState({})
useEffect(() => {
CRM.api4('Event', 'get', {
......@@ -23,6 +35,7 @@ const SelectEventControl = ({ id, setAttributes }) => {
if (!result && !result.length) return;
const options = result.map(event => ({
...event,
label: event.title,
value: event.id
}))
......@@ -34,12 +47,19 @@ const SelectEventControl = ({ id, setAttributes }) => {
})
}, [])
return <SelectControl
label={__('Event Page', 'civicrm')}
value={id}
useEffect(() => {
setEvent(events.filter(event => event.id == id)[0])
}, [events, id])
return <>
<Select
placeholder={__('Select an Event', 'civicrm')}
value={event || 0}
onChange={option => setAttributes({id: option.value})}
options={events}
onChange={onChangeEvent}
components={{Option: EventOption}}
/>
</>
}
export default SelectEventControl
import { __ } from '@wordpress/i18n'
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 onChangeProfile = gid => setAttributes({ gid })
const [profiles, setProfiles] = useState([{
label: __('Select a Profile', 'civicrm'),
value: 0,
disabled: true
}])
const [profiles, setProfiles] = useState([])
const [profile, setProfile] = useState({})
useEffect(() => {
CRM.api4('UFGroup', 'get', {
select: ['title', 'group_type'],
where: [['is_active', '=', '1']]
where: [
['is_active', '=', '1'],
['is_reserved', '=', '0']
]
})
.then((result) => {
if (!result && !result.length) return;
const options = result.map(ufGroup => ({
const options = result.map(ufGroup => {
return {
...ufGroup,
label: ufGroup.title,
value: ufGroup.id
}))
};
})
setProfiles([
...profiles,
...options
......@@ -30,12 +44,19 @@ const SelectProfileControl = ({ gid, setAttributes }) => {
})
}, [])
return <SelectControl
label={__('Profile', 'civicrm')}
value={gid}
useEffect(() => {
setProfile(profiles.filter(profile => profile.id == gid)[0]);
}, [profiles, gid])
return <>
<Select
placeholder={__('Select a Profile', 'civicrm')}
value={profile || 0}
onChange={option => setAttributes({gid: option.value})}
options={profiles}
onChange={onChangeProfile}
components={{Option: ProfileOption}}
/>
</>
}
export default SelectProfileControl
......@@ -10,7 +10,7 @@ registerBlockType('civicrm/civicrm-content-block', {
attributes: {
component: {
type: 'string',
default: 'profile',
default: 'user-dashboard',
},
gid: {
type: 'string',
......
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