periodicjs.ext.reactapp
Version:
350 lines (348 loc) • 12.8 kB
JavaScript
;
const utilities = require('../../../utilities');
const reactapp = utilities.reactapp();
let customCardProps = {}; // helpers.getCustomCardProps(options);
module.exports = {
containers: {
[`${reactapp.manifest_prefix}account/profile`]: {
layout: {
'component': 'div',
'props': {},
'children': [{
'component': 'Container',
'props': {
'style': {
'marginTop': '5rem',
'marginBottom': 80,
},
},
'children': [{
'component': 'ResponsiveForm',
'thisprops': {
'formdata': ['user', 'userdata', ],
},
'props': {
blockPageUI: true,
'onSubmit': {
'url': `${reactapp.manifest_prefix}contentdata/update_standard_:entitytypes_profile/:id?format=json&unflatten=true&handleupload=true`,
'options': {
'method': 'PUT',
},
'params': [{
'key': ':id',
'val': '_id',
},
{
'key': ':entitytype',
'val': 'entitytype',
},
],
'success': true,
'responseCallback': 'func:this.props.updateUserProfile',
},
'hiddenFields': [{
'form_name': 'docid',
'form_val': '_id',
}, ],
'flattenFormData': true,
'footergroups': false,
'formgroups': [{
'gridProps': {
'style': {
'marginTop': 30,
'padding': 10,
},
},
'formElements': [{
'type': 'layout',
'layoutProps': {
'style': {
'padding': 0,
},
},
'value': {
'component': 'div',
'children': [{
'component': 'Title',
'children': 'Account Settings',
}, ],
'props': {
'style': {
'padding': 0,
},
},
},
},
{
type: 'layout',
value: {
'component': 'ResponsiveButton',
'children': 'Log Out',
props: {
confirmModal: true,
onClick: 'func:this.props.logoutUser',
buttonProps: {
size: 'isMedium',
},
'style': {},
},
},
'layoutProps': {
'style': {
'alignSelf': 'flex-end',
'textAlign': 'right',
'padding': 0,
},
},
},
{
'type': 'submit',
'value': 'Save Changes',
'passProps': {
color: 'isPrimary',
size: 'isMedium',
'style': {},
},
'layoutProps': {
size: 'isNarrow',
'style': {
'alignSelf': 'flex-end',
'textAlign': 'right',
'padding': 0,
marginLeft: '20px',
},
},
},
],
},
{
gridProps: {
isMultiline: false,
},
card: {
doubleCard: true,
leftDoubleCardColumn: {
size: 'isTwoThirds',
},
rightDoubleCardColumn: {
size: 'isOneThird',
},
leftCardProps: Object.assign({}, customCardProps, {
cardTitle: 'Personal Information',
}),
rightCardProps: Object.assign({}, customCardProps, {
cardTitle: 'Account Information',
}),
},
formElements: [{
formGroupCardLeft: [{
type: 'text',
label: 'First Name',
placeholder: 'firstname',
name: 'firstname',
},
{
type: 'text',
label: 'Last Name',
placeholder: 'lastname',
name: 'lastname',
},
{
type: 'text',
label: 'Website',
placeholder: 'website.com',
name: 'url',
},
{
type: 'select',
label: 'Gender',
name: 'gender',
value: '',
options: [{
disabled: true,
value: '',
label: 'Please select',
},
{
value: 'female',
label: 'Female',
},
{
value: 'male',
label: 'Male',
},
{
value: 'other',
label: 'Other',
},
],
},
{
type: 'group',
label: 'Profile Image',
layoutProps: {
// style: {
// padding:0,
// },
},
groupElements: [{
type: 'layout',
layoutProps: {
style: {
padding: 0,
},
},
value: {
component: 'a',
props: {
target: '_blank',
},
thisprops: {
href: ['user', 'profile_image_preview', ],
},
children: [{
component: 'Image',
thisprops: {
src: ['user', 'profile_image_preview', ],
},
props: {
style: {
maxHeight: '5rem',
maxWidth: '5rem',
overflow: 'hidden',
},
},
}, ],
},
},
{
type: 'file',
// value:'',
// label:'Profile Image',
name: 'profileimage',
layoutProps: {
style: {
paddingTop: 0,
},
},
},
],
},
// {
// type: 'file',
// label:'Profile Image',
// name:'primaryasset',
// },
{
type: 'editor',
label: 'Bio',
placeholder: 'No profile',
name: 'description',
},
],
formGroupCardRight: [{
type: 'text',
label: 'Email',
placeholder: 'email@domain.tld',
name: 'email',
},
{
type: 'text',
label: 'Username',
placeholder: 'Username',
name: 'name',
},
{
type: 'text',
passProps: {
type: 'password',
},
label: 'Password',
name: 'password',
},
{
type: 'text',
passProps: {
type: 'password',
},
name: 'passwordconfirm',
// name:'confirmpassword',
},
{
type: 'text',
label: 'Activated',
passProps: {
'state': 'isDisabled',
},
name: 'activated',
},
{
type: 'text',
label: 'Account Type',
passProps: {
'state': 'isDisabled',
},
name: 'accounttype',
},
],
}, ],
},
{
gridProps: {},
card: {
twoColumns: true,
props: {
cardTitle: 'Location Information',
},
},
formElements: [{
formGroupElementsLeft: [{
type: 'text',
label: 'City / Municipality',
name: 'location.city',
},
{
type: 'text',
label: 'Country',
name: 'location.country',
},
{
type: 'text',
label: 'Latitude',
name: 'location.loc.latitude',
},
],
formGroupElementsRight: [{
type: 'text',
label: 'State / Region',
name: 'location.state',
},
{
type: 'text',
label: 'Postal Code / Zip',
name: 'location.zip',
},
{
type: 'text',
label: 'Longitude',
name: 'location.loc.longitude',
},
],
}, ],
},
],
},
}, ],
}, ],
},
'resources': {
// contentstats: `${reactapp.manifest_prefix}contentdata/standard/dbstats?format=json`,
},
'onFinish': 'render',
'pageData': {
'title': 'My Account',
'navLabel': 'My Account',
},
},
},
};