Cli crud

.prettierignore

@@ -0,0 +1,2 @@
+**/tools/templates/crud/client/graphql/*
+**/tools/templates/crud/server/*.graphql

packages/client/package.json

@@ -39,13 +39,17 @@
   "author": "SysGears INC",
   "license": "MIT",
   "dependencies": {
-    "@fortawesome/fontawesome": "^1.1.3",
+    "@domain-schema/core": "^0.0.34",
+    "@domain-schema/validation": "^0.0.36",
+    "@domain-schema/formik": "^0.0.34",
+    "@fortawesome/fontawesome": "^1.1.8",
     "@fortawesome/fontawesome-free-brands": "^5.0.6",
+    "@fortawesome/fontawesome-free-webfonts": "^1.0.9",
     "@fortawesome/react-fontawesome": "0.0.18",
     "antd": "^3.3.3",
     "apollo-cache-inmemory": "^1.1.12",
     "apollo-cache-router": "^1.1.6",
-    "apollo-client": "^2.3.1",
+    "apollo-client": "^2.3.4",
     "apollo-link": "^1.0.6",
     "apollo-link-batch-http": "1.2.2",
     "apollo-link-context": "^1.0.7",
@@ -60,21 +64,26 @@
     "filesize": "^3.5.11",
     "formik": "^1.0.2",
     "graphql": "^0.13.0",
-    "graphql-iso-date": "^3.3.0",
+    "graphql-iso-date": "^3.5.0",
     "graphql-tag": "^2.6.0",
     "history": "^4.7.2",
+    "humps": "^2.0.1",
     "i18next": "^11.2.3",
     "i18next-browser-languagedetector": "^2.1.0",
     "immutability-helper": "^2.6.2",
     "jwt-decode": "^2.2.0",
     "lodash": "^4.17.4",
     "minilog": "^3.1.0",
+    "moment": "^2.20.1",
     "prop-types": "^15.6.0",
     "react": "16.3.1",
     "react-apollo": "^2.1.4",
     "react-art": "^16.3.2",
     "react-cookie": "^2.2.0",
+    "react-datepicker": "^1.5.0",
     "react-debounce-input": "^3.1.0",
+    "react-dnd": "^2.5.4",
+    "react-dnd-html5-backend": "^2.5.4",
     "react-dom": "^16.2.0",
     "react-dropzone": "^4.2.3",
     "react-ga": "^2.3.5",

packages/client/src/modules/common/components/crud/EditView.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { StyleSheet, Text, View } from 'react-native';
+
+import FormView from './FormView';
+
+const EditView = ({ loading, data, navigation, schema, updateEntry, createEntry }) => {
+  let dataObj = data;
+
+  if (!dataObj && navigation.state) {
+    dataObj = navigation.state.params.data;
+  }
+
+  if (loading && !dataObj) {
+    return (
+      <View style={styles.container}>
+        <Text>Loading...</Text>
+      </View>
+    );
+  } else {
+    return (
+      <FormView data={dataObj ? dataObj : {}} schema={schema} updateEntry={updateEntry} createEntry={createEntry} />
+    );
+  }
+};
+
+EditView.propTypes = {
+  loading: PropTypes.bool.isRequired,
+  data: PropTypes.object,
+  navigation: PropTypes.object.isRequired
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});
+
+export default EditView;

packages/client/src/modules/common/components/crud/EditView.web.jsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Helmet from 'react-helmet';
+import { Link } from 'react-router-dom';
+
+import { PageLayout } from '../web';
+import FormView from './FormView';
+import settings from '../../../../../../../settings';
+
+class EditView extends React.PureComponent {
+  static propTypes = {
+    loading: PropTypes.bool.isRequired,
+    data: PropTypes.object,
+    title: PropTypes.string.isRequired,
+    link: PropTypes.string.isRequired
+  };
+
+  renderMetaData = title => (
+    <Helmet
+      title={`${settings.app.name} - Edit ${title}`}
+      meta={[
+        {
+          name: 'description',
+          content: `${settings.app.name} - Edit ${title} example page`
+        }
+      ]}
+    />
+  );
+
+  render() {
+    const { loading, data, title, link } = this.props;
+
+    if (loading && !data) {
+      return (
+        <PageLayout>
+          {this.renderMetaData(title)}
+          <div className="text-center">Loading...</div>
+        </PageLayout>
+      );
+    } else {
+      return (
+        <PageLayout>
+          {this.renderMetaData(title)}
+          <Link id="back-button" to={`/${link}`}>
+            Back
+          </Link>
+          <h2>
+            {data ? 'Edit' : 'Create'} {title}
+          </h2>
+          <FormView {...this.props} />
+        </PageLayout>
+      );
+    }
+  }
+}
+
+export default EditView;

packages/client/src/modules/common/components/crud/FilterView.jsx

@@ -0,0 +1 @@
+export default () => {};

packages/client/src/modules/common/components/crud/FilterView.web.jsx

@@ -0,0 +1,120 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Formik } from 'formik';
+import { DebounceInput } from 'react-debounce-input';
+
+import { hasRole } from '../../../user/containers/Auth';
+import { Form, FormItem, Input, Row, Col, Button, Icon } from '../web';
+import { createFormFields } from '../../util';
+import { mapFormPropsToValues, pickInputFields } from '../../../../utils/crud';
+
+const formItemLayout = {
+  labelCol: {
+    xs: { span: 24 },
+    sm: { span: 8 }
+  },
+  wrapperCol: {
+    xs: { span: 24 },
+    sm: { span: 16 }
+  }
+};
+
+class FilterView extends React.PureComponent {
+  static propTypes = {
+    schema: PropTypes.object.isRequired,
+    searchText: PropTypes.string,
+    onFilterChange: PropTypes.func.isRequired,
+    customFields: PropTypes.object,
+    currentUser: PropTypes.object,
+    currentUserLoading: PropTypes.bool
+  };
+
+  state = {
+    expand: false
+  };
+
+  toggle = () => {
+    const { expand } = this.state;
+    this.setState({ expand: !expand });
+  };
+
+  handleSearch = e => {
+    const { onFilterChange } = this.props;
+    onFilterChange({ searchText: e.target.value });
+  };
+
+  render() {
+    const { schema, onFilterChange, customFields, currentUser } = this.props;
+    const { expand } = this.state;
+
+    const showFilter =
+      customFields === null
+        ? false
+        : customFields && customFields.role
+          ? !!hasRole(customFields.role, currentUser)
+          : true;
+
+    if (!showFilter) {
+      return null;
+    }
+
+    return (
+      <Formik
+        initialValues={mapFormPropsToValues({ schema, formType: 'filter' })}
+        onSubmit={values => {
+          onFilterChange(pickInputFields({ schema, values, formType: 'filter' }));
+        }}
+        onReset={(values, formikBag) => {
+          formikBag.resetForm();
+          onFilterChange({});
+        }}
+        render={({ values, handleChange, handleBlur, handleSubmit, handleReset }) => (
+          <Form className="ant-advanced-search-form bootstrap-advanced-search-form" onSubmit={handleSubmit}>
+            <Row>
+              <Col span={8}>
+                <FormItem label="Find" {...formItemLayout}>
+                  <DebounceInput
+                    minLength={2}
+                    debounceTimeout={300}
+                    placeholder="Search ..."
+                    element={Input}
+                    onChange={this.handleSearch}
+                  />
+                </FormItem>
+              </Col>
+              <Col span={16} style={{ textAlign: 'right' }}>
+                <Button type="primary" htmlType="submit">
+                  Search
+                </Button>
+                <Button style={{ marginLeft: 8 }} onClick={handleReset}>
+                  Clear
+                </Button>
+                <a style={{ marginLeft: 8, fontSize: 12 }} onClick={this.toggle}>
+                  Advanced{' '}
+                  <Icon
+                    type={this.state.expand ? 'up' : 'down'}
+                    className={this.state.expand ? 'fas fa-chevron-up' : 'fas fa-chevron-down'}
+                  />
+                </a>
+              </Col>
+            </Row>
+            <Row gutter={24} style={{ display: expand ? 'block' : 'none' }}>
+              {createFormFields({
+                handleChange,
+                handleBlur,
+                schema,
+                values,
+                formItemLayout,
+                prefix: '',
+                customFields,
+                formType: 'filter'
+              })}
+            </Row>
+          </Form>
+        )}
+      />
+    );
+  }
+}
+
+export default FilterView;

packages/client/src/modules/common/components/crud/FormView.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Formik } from 'formik';
+//import DomainValidator from '@domain-schema/validation';
+
+import { onSubmit, mapFormPropsToValues } from '../../../../utils/crud';
+import { createFormFields } from '../../util';
+import { FormView, Button } from '../native';
+//import { computeDomainValidationErrors } from '../../../../../../common/validation';
+
+const Form = ({ schema, data: { node }, updateEntry, createEntry }) => {
+  // const domainValidator = new DomainValidator();
+  return (
+    <Formik
+      initialValues={mapFormPropsToValues({ schema, data: node })}
+      /*      validate={values => {
+        let rawErrors = domainValidator.validate(schema, values);
+        return computeDomainValidationErrors(rawErrors);
+      }}*/
+      onSubmit={async values => {
+        let title = node && node.__typename ? node.__typename : 'Model',
+          data = node || null;
+
+        await onSubmit({ schema, values, updateEntry, createEntry, title, data });
+      }}
+      render={({ handleSubmit, values, setFieldValue, setFieldTouched }) => (
+        <FormView>
+          {createFormFields(schema, values, setFieldValue, setFieldTouched)}
+          <Button onPress={handleSubmit}>Save</Button>
+        </FormView>
+      )}
+    />
+  );
+};
+
+Form.propTypes = {
+  schema: PropTypes.object.isRequired,
+  data: PropTypes.object,
+  updateEntry: PropTypes.func.isRequired,
+  createEntry: PropTypes.func.isRequired
+};
+
+export default Form;

packages/client/src/modules/common/components/crud/FormView.web.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { onSubmit } from '../../../../utils/crud';
+import generateFormik from '../../generateFormik';
+
+const FormView = ({ schema, updateEntry, createEntry, title, data }) => {
+  const Formik = generateFormik(schema);
+  return (
+    <Formik
+      values={data ? data.node : null}
+      onSubmit={async values => {
+        await onSubmit({ schema, values, updateEntry, createEntry, title, data: data ? data.node : null });
+      }}
+    />
+  );
+};
+
+FormView.propTypes = {
+  updateEntry: PropTypes.func.isRequired,
+  schema: PropTypes.object.isRequired,
+  createEntry: PropTypes.func.isRequired,
+  title: PropTypes.string.isRequired,
+  data: PropTypes.object
+};
+
+export default FormView;