Cli crud

packages/client/package.json

@@ -26,17 +26,12 @@
     "url": "https://github.com/sysgears/apollo-universal-starter-kit/issues"
   },
   "homepage": "https://github.com/sysgears/apollo-universal-starter-kit",
-  "keywords": [
-    "apollo",
-    "universal",
-    "starter",
-    "graphql",
-    "react",
-    "redux"
-  ],
+  "keywords": ["apollo", "universal", "starter", "graphql", "react", "redux"],
   "author": "SysGears INC",
   "license": "MIT",
   "dependencies": {
+    "@domain-schema/core": "^0.0.33",
+    "@domain-schema/validation": "^0.0.33",
     "@fortawesome/fontawesome": "^1.1.3",
     "@fortawesome/fontawesome-free-brands": "^5.0.6",
     "@fortawesome/react-fontawesome": "0.0.18",
@@ -58,21 +53,25 @@
     "filesize": "^3.5.11",
     "formik": "^0.11.10",
     "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.1.2",
     "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,121 @@
+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/ui-antd/index';
+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
+            : false
+          : true;
+
+    if (!showFilter) {
+      return null;
+    }
+
+    return (
+      <Formik
+        initialValues={mapFormPropsToValues({ schema, formType: 'filter' })}
+        onSubmit={values => {
+          //console.log('onSubmit, values:', values);
+          //console.log('onSubmit, pickInputFields values:', pickInputFields({ schema, values, formType: 'filter' }));
+          onFilterChange(pickInputFields({ schema, values, formType: 'filter' }));
+        }}
+        onReset={(values, formikBag) => {
+          //console.log('onReset, formikBag:', formikBag);
+          formikBag.resetForm();
+          onFilterChange({});
+        }}
+        render={({ values, handleChange, handleBlur, handleSubmit, handleReset }) => (
+          <Form className="ant-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'} />
+                </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 { onSubmit, mapFormPropsToValues } from '../../../../utils/crud';
+import { createFormFields } from '../../util';
+import { FormView, Button } from '../native';
+//import { minLength, required, validateForm } from '../../../../../../common/validation';
+
+//const formSchema = {
+//  name: [required, minLength(3)]
+//};
+
+//const validate = values => validateForm(values, formSchema);
+
+const Form = ({ schema, data: { node }, updateEntry, createEntry }) => {
+  return (
+    <Formik
+      initialValues={mapFormPropsToValues({ schema, data: node })}
+      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 }) => (
+        <FormView>
+          {createFormFields(schema, values)}
+          <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,74 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Formik } from 'formik';
+import DomainValidation from '@domain-schema/validation';
+
+import { onSubmit, mapFormPropsToValues } from '../../../../utils/crud';
+import { createFormFields } from '../../util';
+import { Form, FormItem, Button } from '../web/ui-antd/index';
+
+const tailFormItemLayout = {
+  wrapperCol: {
+    xs: {
+      span: 24,
+      offset: 0
+    },
+    sm: {
+      span: 16,
+      offset: 6
+    }
+  }
+};
+
+const formItemLayout = {
+  labelCol: {
+    xs: { span: 24 },
+    sm: { span: 6 }
+  },
+  wrapperCol: {
+    xs: { span: 24 },
+    sm: { span: 12 }
+  }
+};
+
+const FormView = ({ schema, updateEntry, createEntry, title, customFields, data }) => {
+  return (
+    <Formik
+      initialValues={mapFormPropsToValues({ schema, data: data ? data.node : null })}
+      validate={values => DomainValidation.validate(values, schema)}
+      onSubmit={async values => {
+        //console.log('onSubmit, values:', pickInputFields({schema, values}));
+        await onSubmit({ schema, values, updateEntry, createEntry, title, data: data ? data.node : null });
+      }}
+      render={({ values, handleChange, handleBlur, handleSubmit }) => (
+        <Form name="post" onSubmit={handleSubmit}>
+          {createFormFields({
+            handleChange,
+            handleBlur,
+            schema,
+            values,
+            formItemLayout,
+            customFields
+          })}
+          {/*errors && <Alert color="error">{errors}</Alert>*/}
+          <FormItem {...tailFormItemLayout}>
+            <Button color="primary" type="submit">
+              Save
+            </Button>
+          </FormItem>
+        </Form>
+      )}
+    />
+  );
+};
+
+FormView.propTypes = {
+  updateEntry: PropTypes.func.isRequired,
+  schema: PropTypes.object.isRequired,
+  createEntry: PropTypes.func.isRequired,
+  title: PropTypes.string.isRequired,
+  customFields: PropTypes.object,
+  data: PropTypes.object
+};
+
+export default FormView;