Feat started to implement edit show views (#364)

* 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)

Author: Arfey

.eslintrc

@@ -10,6 +10,7 @@
       "modules": true
     }
   },
+  "parser": "babel-eslint",
   "extends": [
     "eslint:recommended",
     "plugin:react/recommended"
@@ -30,6 +31,7 @@
       "error",
       "single"
     ],
+    "react/display-name": 0,
     "semi": [
       "error",
       "always"

aiohttp_admin/backends/sa.py

@@ -47,13 +47,17 @@ def table(self):
     @staticmethod
     def get_type_of_fields(fields, table):
         """
-        Return data types of `fields` that are in `table`.
+        Return data types of `fields` that are in `table`. If a given
+        parameter is empty return primary key.
 
         :param fields: list - list of fields that need to be returned
         :param table: sa.Table - the current table
         :return: list - list of the tuples `(field_name, fields_type)`
         """
 
+        if not fields:
+            fields = table.primary_key
+
         actual_fields = [
             field for field in table.c.items() if field[0] in fields
         ]

aiohttp_admin/contrib/models.py

@@ -6,13 +6,17 @@ class ModelAdmin:
 
 
     class Users(models.ModelAdmin):
-        fields = ('id', 'username', )
 
         class Meta:
             resource_type = PGResource
             table = users
 
     """
+    can_edit = True
+    can_create = True
+    can_delete = True
+    per_page = 10
+    fields = None
 
     def __init__(self):
         self.name = self.__class__.__name__.lower()
@@ -22,6 +26,12 @@ def to_dict(self):
         Return dict with the all base information about the instance.
         """
 
-        data = {"name": self.name}
+        data = {
+            "name": self.name,
+            "canEdit": self.can_edit,
+            "canCreate": self.can_create,
+            "canDelete": self.can_delete,
+            "perPage": self.per_page,
+        }
 
         return data

aiohttp_admin/static/ng-admin/ng-admin.min.js

@@ -1,27 +1,63 @@
 import React, { Component } from 'react';
-import { Admin, Resource } from 'admin-on-rest';
+import { Admin, Resource, Delete } from 'admin-on-rest';
 import Icon from 'material-ui/svg-icons/action/bookmark-border';
 
 import { BaseList } from '../List/List';
+import { BaseEdit } from '../Edit/Edit';
+import { BaseCreate } from '../Create/Create';
+import { BaseShow } from '../Show/Show';
 import authClient from '../../libs/authClient';
 import { restClient } from '../../libs/restClient';
+import Layout from '../Layout/Layout';
 
 // styles
 import './Admin.sass';
 
 const { state } = window.appData;
 
 
-function getResourcesByState(state) {
+const getAccessMethods = (data) => {
+  const { canEdit, canCreate, canDelete } = data;
+  let methods = {
+    list: newProps => <BaseList {...newProps} data={data} />,
+    show: newProps => <BaseShow {...newProps} data={data} />,
+  };
+
+  if (canEdit) {
+    methods = {
+      ...methods,
+      edit: newProps => <BaseEdit {...newProps} data={data} />
+    };
+  }
+
+  if (canCreate) {
+    methods = {
+      ...methods,
+      create: newProps => <BaseCreate {...newProps} data={data} />
+    };
+  }
+
+  if (canDelete) {
+    methods = {
+      ...methods,
+      remove: Delete
+    };
+  }
+
+  return methods;
+};
+
+
+function generateResourcesByState(state) {
   if (state.endpoints) {
     return  (
       state.endpoints.map((data, index) => (
         <Resource
           key={index}
           name={data.name}
           icon={Icon}
-          list={(newProps) => <BaseList {...newProps} data={data} />}
           sort={{ field: 'id', order: 'DESC' }}
+          {...getAccessMethods(data)}
         />
       ))
     );
@@ -35,14 +71,15 @@ export class AioHttpAdmin extends Component {
 
   render() {
     return (
-      <Admin
-        title={state.title}
-        locale="en"
-        authClient={authClient}
-        restClient={restClient}
-      >
-        {getResourcesByState(state)}
-      </Admin>
+        <Admin
+          title={state.title}
+          locale="en"
+          authClient={authClient}
+          restClient={restClient}
+          appLayout={Layout}
+        >
+          {generateResourcesByState(state)}
+        </Admin>
     );
   }
 }

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+import IconButton from 'material-ui/IconButton';
+import ContentCreate from 'material-ui/svg-icons/content/create';
+
+
+export const EditButton = ({ basePath = '', record = {} }) => (
+  <IconButton
+    containerElement={<Link to={`${basePath}/${record.id}`} />}
+    style={{ overflow: 'inherit' }}
+  >
+    <ContentCreate />
+  </IconButton>
+);
+
+
+EditButton.propTypes = {
+  basePath: PropTypes.string,
+  record: PropTypes.object,
+};
+
+
+EditButton.defaultProps = {
+  style: { padding: '0 12px' },
+};

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+import IconButton from 'material-ui/IconButton';
+import ContentShow from 'material-ui/svg-icons/image/remove-red-eye';
+
+
+export const ShowButton = ({ basePath = '', record = {} }) => (
+  <IconButton
+    containerElement={<Link to={`${basePath}/${record.id}/show`} />}
+    style={{ overflow: 'inherit' }}
+  >
+    <ContentShow />
+  </IconButton>
+);
+
+
+ShowButton.propTypes = {
+  basePath: PropTypes.string,
+  record: PropTypes.object,
+};
+
+
+ShowButton.defaultProps = {
+  style: { padding: '0 12px' },
+};

aiohttp_admin/static/react-admin/js/components/Button/EditButton.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {
+    TextInput,
+    Create,
+    SimpleForm,
+    LongTextInput,
+} from 'admin-on-rest';
+
+
+export const BaseCreate = (props) => (
+    <Create {...props}>
+        <SimpleForm>
+            <TextInput source="body" />
+        </SimpleForm>
+    </Create>
+);

aiohttp_admin/static/react-admin/js/components/Button/ShowButton.jsx

@@ -0,0 +1,34 @@
+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';
+
+
+export const BaseEdit = (props) => (
+  <Edit {...props}>
+      <SimpleForm>
+        <TextInput source="id" style={{ display: 'block' }} />
+      </ SimpleForm>
+  </Edit>
+);