Feat started to implement edit show views (#367)

* feat: added can edit/delete/create and per_page property + prepare view/edit page

(cherry picked from commit b9a1552)

* feat: added default value for ModelAdmin.fields, now it's primary keys

(cherry picked from commit 830b1a6)

* feat: fixed show page and added simple docs for `ReadMe.md`

(cherry picked from commit 9ab2015)

* fix: fixed node version for `CI`

(cherry picked from commit 50a3bb1)

* feat: added default representation of table's fields on edit/show/create pages.

Author: Arfey

aiohttp_admin/backends/sa.py

@@ -7,18 +7,28 @@
 from ..utils import (json_response, validate_payload, validate_query,
                      calc_pagination, ASC)
 from .sa_utils import table_to_trafaret, create_filter
+from ..contrib.constants import ReactComponent as rc
 
 
 __all__ = ['PGResource', 'MySQLResource']
 
 
-DATA_TYPES = {
-    sa.Integer: 'integer',
-    sa.Text: 'string',
-    sa.Float: 'number',
-    sa.Date: 'date',
-    sa.Boolean: 'bool',
-    postgresql.JSON: 'json',
+FIELD_TYPES = {
+    sa.Integer: rc.TEXT_FIELD.value,
+    sa.Text: rc.TEXT_FIELD.value,
+    sa.Float: rc.NUMBER_FIELD.value,
+    sa.Date: rc.DATE_FIELD.value,
+    sa.Boolean: rc.BOOLEAN_FIELD.value,
+    postgresql.JSON: rc.JSON_FIELD.value,
+}
+
+INPUT_TYPES = {
+    sa.Integer: rc.TEXT_INPUT.value,
+    sa.Text: rc.TEXT_INPUT.value,
+    sa.Float: rc.TEXT_INPUT.value,
+    sa.Date: rc.DATE_INPUT.value,
+    sa.Boolean: rc.NULLABLE_BOOLEAN_INPUT.value,
+    postgresql.JSON: rc.JSON_INPUT.value,
 }
 
 
@@ -63,12 +73,31 @@ def get_type_of_fields(fields, table):
         ]
 
         data_type_fields = {
-            name: DATA_TYPES.get(type(field_type.type), 'string')
+            name: FIELD_TYPES.get(type(field_type.type), rc.TEXT_FIELD.value)
             for name, field_type in actual_fields
         }
 
         return data_type_fields
 
+    @staticmethod
+    def get_type_for_inputs(table):
+        """
+        Return information about table's fields in dictionary type.
+
+        :param table: sa.Table - the current table
+        :return: list - list of the dictionaries
+        """
+        return [
+            dict(
+                type=INPUT_TYPES.get(
+                    type(field_type.type), rc.TEXT_INPUT.value
+                ),
+                name=name,
+                isPrimaryKey=(name in table.primary_key),
+                props=None,
+            ) for name, field_type in table.c.items()
+        ]
+
     async def list(self, request):
         await require(request, Permissions.view)
         columns_names = list(self._table.c.keys())

aiohttp_admin/backends/sa_utils.py

@@ -82,7 +82,6 @@ def table_to_trafaret(table, primary_key, skip_pk=False):
     for name, column in table.c.items():
         if skip_pk and column.name == primary_key:
             continue
-        key = name
         default = column.server_default
         key = build_key(name, default)
 

aiohttp_admin/contrib/constants.py

@@ -0,0 +1,27 @@
+from enum import Enum
+
+
+class ReactComponent(Enum):
+    """
+    Represented React components of `admin-on-rest`.
+    """
+
+    # fields
+    TEXT_FIELD = 'TextField'
+    JSON_FIELD = 'JsonField'
+    DATE_FIELD = 'DateField'
+    NUMBER_FIELD = 'NumberField'
+    BOOLEAN_FIELD = 'BooleanField'
+    FUNCTION_FIELD = 'FunctionField'
+    REFERENCE_MANY_FIELD = 'ReferenceManyField'
+    PRODUCT_REFERENCE_FIELD = 'ProductReferenceField'
+    STAR_RATING_FIELD = 'StarRatingField'
+    MB_ITEMS_FIELD = 'NbItemsField'
+
+    # inputs
+    TEXT_INPUT = 'TextInput'
+    DATE_INPUT = 'DateInput'
+    SEGMENTS_INPUT = 'SegmentsInput'
+    NULLABLE_BOOLEAN_INPUT = 'NullableBooleanInput'
+    LONG_TEXT_INPUT = 'LongTextInput'
+    JSON_INPUT = 'JsonInput'

aiohttp_admin/contrib/models.py

@@ -17,21 +17,80 @@ class Meta:
     can_delete = True
     per_page = 10
     fields = None
+    form = None
+    edit_form = None
+    create_form = None
+    show_form = None
 
     def __init__(self):
         self.name = self.__class__.__name__.lower()
+        self._table = self.Meta.table
+        self._resource_type = self.Meta.resource_type
 
     def to_dict(self):
         """
         Return dict with the all base information about the instance.
         """
-
         data = {
             "name": self.name,
             "canEdit": self.can_edit,
             "canCreate": self.can_create,
             "canDelete": self.can_delete,
             "perPage": self.per_page,
+            "showPage": self.generate_data_for_show_page(),
+            "editPage": self.generate_data_for_edit_page(),
+            "createPage": self.generate_data_for_create_page(),
         }
 
         return data
+
+    def generate_simple_data_page(self):
+        """
+        Generate a simple representation of table's fields in dictionary type.
+
+        :return: dict
+        """
+        return self._resource_type.get_type_for_inputs(self._table)
+
+    def generate_data_for_edit_page(self):
+        """
+        Generate a custom representation of table's fields in dictionary type
+        if exist edit form else use default representation.
+
+        :return: dict
+        """
+
+        if not self.can_edit:
+            return {}
+
+        if self.edit_form:
+            return self.edit_form.to_dict()
+
+        return self.generate_simple_data_page()
+
+    def generate_data_for_show_page(self):
+        """
+        Generate a custom representation of table's fields in dictionary type
+        if exist show form else use default representation.
+
+        :return: dict
+        """
+        if self.show_form:
+            return self.show_form.to_dict()
+
+        return self.generate_simple_data_page()
+
+    def generate_data_for_create_page(self):
+        """
+        Generate a custom representation of table's fields in dictionary type
+        if exist create form else use default representation.
+
+        :return: dict
+        """
+        if not self.can_create:
+            return {}
+
+        if self.create_form:
+            return self.create_form.to_dict()
+
+        return self.generate_simple_data_page()

aiohttp_admin/static/react-admin/dist/bundle.js

@@ -2,17 +2,25 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import {
-    TextInput,
-    Create,
-    SimpleForm,
-    LongTextInput,
+  Create,
+  SimpleForm,
 } from 'admin-on-rest';
 
+import { getInputs } from '../../utils/inputs';
+
 
 export const BaseCreate = (props) => (
-    <Create {...props}>
-        <SimpleForm>
-            <TextInput source="body" />
-        </SimpleForm>
-    </Create>
+  <Create {...props}>
+    <SimpleForm>
+      {getInputs(props.data.createPage)}
+    </SimpleForm>
+  </Create>
 );
+
+BaseCreate.propTypes = {
+  data: PropTypes.objectOf({
+    createPage: PropTypes.object,
+  })
+};
+
+export default BaseCreate;

aiohttp_admin/static/react-admin/js/components/Create/Create.jsx

@@ -2,33 +2,25 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import {
-  Datagrid,
-  List,
-  TextField,
-  DateField,
-  NumberField,
-  BooleanField,
-  FunctionField,
-  TabbedForm,
-  FormTab,
-  TextInput,
-  DateInput,
-  ReferenceManyField,
-  NbItemsField,
-  EditButton,
-  ProductReferenceField,
-  StarRatingField,
-  SegmentsInput,
-  NullableBooleanInput,
   Edit,
   SimpleForm
 } from 'admin-on-rest';
 
+import { getInputs } from '../../utils/inputs';
+
 
 export const BaseEdit = (props) => (
   <Edit {...props}>
-      <SimpleForm>
-        <TextInput source="id" style={{ display: 'block' }} />
-      </ SimpleForm>
+    <SimpleForm>
+      {getInputs(props.data.editPage)}
+    </ SimpleForm>
   </Edit>
 );
+
+BaseEdit.propTypes = {
+  data: PropTypes.objectOf({
+    editPage: PropTypes.object,
+  })
+};
+
+export default BaseEdit;

aiohttp_admin/static/react-admin/js/components/Edit/Edit.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+
+export function JsonField({ record = {}, source }) {
+  const render = res => JSON.stringify(res[source], null, 2);
+
+  return <span>{render(record)}</span>;
+}
+
+JsonField.propTypes = {
+  source: PropTypes.string,
+  record: PropTypes.object,
+};
+
+export default JsonField;

aiohttp_admin/static/react-admin/js/components/Fields/JsonField.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import get from 'lodash.get';
+import { BooleanField } from 'admin-on-rest';
+
+
+export class ShowField extends  React.Component {
+  render () {
+    const { source, record = {} } = this.props;
+    let data = get(record, source);
+
+    if (data instanceof Object) {
+      data = JSON.stringify(data, null, 2);
+    } else if (typeof(data) === 'boolean') {
+      return (
+        <BooleanField
+          {...this.props}
+          elStyle={{width: '24px', margin: 0}}
+        />
+      );
+    }
+
+    return <span>{data}</span>;
+  }
+}
+
+ShowField.defaultProps = {
+  addLabel: true,
+};
+
+ShowField.propTypes ={
+  source: PropTypes.string.isRequired,
+  record: PropTypes.object,
+};
+
+export default ShowField;

aiohttp_admin/static/react-admin/js/components/Fields/ShowField.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FieldTitle } from 'admin-on-rest';
+
+import TextField from 'material-ui/TextField';
+
+
+const JsonInput = ({
+  input,
+  isRequired,
+  label,
+  source,
+  elStyle,
+  resource,
+}) => {
+  const toString = value => {
+    if (value instanceof Object) {
+      return JSON.stringify(value, null, 2);
+    }
+    return value;
+  };
+
+  return (
+    <TextField
+      {...input}
+      value={input.value}
+      source={source}
+      resource={resource}
+      multiLine
+      fullWidth
+      floatingLabelText={
+        <FieldTitle
+          label={label}
+          source={source}
+          resource={resource}
+          isRequired={isRequired}
+        />
+      }
+      style={elStyle}
+    />
+  );
+};
+
+JsonInput.propTypes = {
+  addField: PropTypes.bool.isRequired,
+  elStyle: PropTypes.object,
+  input: PropTypes.object,
+  isRequired: PropTypes.bool,
+  label: PropTypes.string,
+  resource: PropTypes.string,
+  source: PropTypes.string,
+  validate: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.arrayOf(PropTypes.func),
+  ]),
+};
+
+JsonInput.defaultProps = {
+  addField: true,
+  options: {},
+};
+
+export default JsonInput;