Apollo Form User demo

apollo-form-user.ts

import * as React from 'react';
/* imports ... */
import { client } from '../../core/apollo';

const jsonSchema: JSONSchema6 = require('./core/apollo-form-json-schema.json');
// this is common for the whole application, brang here for the example.
const AlineSidebarForm = configure<ApolloFormMutationNames>({
    client,
    jsonSchema,
    theme: alineSidebarTheme
});

export default () => {
    return (
        <Query
            query={loadUserQueryDocument}
            variables={{ id: ConnectedUserStorage.get() }}
            fetchPolicy="network-only"
        >
            {(props: QueryResult<loadUserQuery>) => {
                return (
                    <AlineSidebarForm
                        title={t('Forms.UserForm.Panel.UpdateTitle')}
                        liveValidate={true}
                        config={{
                            mutation: {
                                name: 'update_user',
                                document: updateUserMutationDocument,
                                variables: { id: ConnectedUserStorage.get() },
                            },
                            ignoreFields: ['user.platform_role_ids', 'user.space_role_ids']
                        }}
                        data={props.data}
                        ui={{
                            user: {
                                'ui:order': ['picture_path', '*'],
                                picture_path: {
                                    'ui:widget': 'PictureWidget',
                                    'ui:options': { transformations: 'h_200,w_200,r_max,c_fill' }
                                },
                                language: {
                                    'ui:widget': 'SelectStaticWidget',
                                    'ui:options': { values: supportedLanguagesValues }
                                }
                            }
                        }}
                        onSave={(data: any) => {
                            if (data.user.language !== props.data!.user.language &&
                                confirm(t('Forms.UserForm.LanguageChangedReload'))
                            ) {
                                window.location.reload();
                            }
                        }}
                    />
                );
            }}
        </Query>
    );
};