[WIP] Use admin-on-rest

Waiting for marmelab/admin-on-rest#2
marmelab · Sep 7, 2016 · c775f1e · c775f1e
1 parent 52d8eff
commit c775f1e
Show file tree

Hide file tree

Showing 19 changed files with 262 additions and 193 deletions.
diff --git a/config/default.js b/config/default.js
@@ -7,7 +7,7 @@ module.exports = {
     appName: 'New App',
     apps: {
         admin: {
-            api_url: `${apiUrl}/admin/`,
+            api_url: `${apiUrl}/admin`,
         },
         api: {
             allowedOrigins,

diff --git a/package.json b/package.json
@@ -3,6 +3,7 @@
     "node": ">= 6.4.0"
   },
   "dependencies": {
+    "admin-on-rest": "0.2.0",
     "babel-plugin-transform-runtime": "6.12.0",
     "babel-polyfill": "6.13.0",
     "babel-register": "6.11.6",

diff --git a/src/admin/css/main.scss b/src/admin/css/main.scss
diff --git a/src/admin/index.html b/src/admin/index.html
@@ -6,7 +6,7 @@
         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
     </head>
-    <body ng-app="myApp" ng-strict-di>
-        <div ui-view></div>
+    <body>
+        <div id="root"></div>
     </body>
 </html>
diff --git a/src/admin/js/header.html b/src/admin/js/header.html
diff --git a/src/admin/js/login.js b/src/admin/js/login.js
@@ -18,7 +18,7 @@ document.getElementById('loginForm').addEventListener('submit', (event) => {
 
     const req = new XMLHttpRequest();
     req.withCredentials = true;
-    req.open('POST', `${ADMIN_API_URL}authenticate`, true);
+    req.open('POST', `${ADMIN_API_URL}/authenticate`, true);
     req.setRequestHeader('Content-Type', 'application/json');
 
     req.onload = () => {

diff --git a/src/admin/js/main.js b/src/admin/js/main.js
@@ -1,9 +1,12 @@
 /* global angular APP_NAME ADMIN_API_URL */
-import 'ng-admin';
-import productsConfig from './products/config';
-import ordersConfig from './orders/config';
-import headerTemplate from './header.html';
-require('ng-admin/build/ng-admin.min.css');
+/* eslint max-len: off */
+import React from 'react';
+import { render } from 'react-dom';
+import { Admin, Resource } from 'admin-on-rest';
+
+import restClient from './restClient';
+import { ProductList, ProductEdit, ProductCreate, ProductIcon } from './products';
+import { OrderList, OrderEdit, OrderCreate, OrderIcon } from './orders';
 
 function redirectToLogin() {
     window.location = '/admin/login.html';
@@ -17,51 +20,17 @@ function logout() {
     redirectToLogin();
 }
 
-window.logout = logout;
-
 if (!window.localStorage.getItem('token')) redirectToLogin();
 
-const myApp = angular.module('myApp', ['ng-admin']);
-
-myApp.config(['NgAdminConfigurationProvider', (nga) => {
-    const admin = nga
-        .application(APP_NAME)
-        .baseApiUrl(ADMIN_API_URL);
-
-    admin.addEntity(nga.entity('products'));
-    admin.addEntity(nga.entity('orders'));
-
-    productsConfig(nga, admin);
-    ordersConfig(nga, admin);
-
-    admin.menu(nga.menu()
-        .addChild(nga
-            .menu(admin.getEntity('products'))
-            .icon('<span class="fa fa-picture-o fa-fw"></span>')
-        )
-        .addChild(nga
-            .menu(admin.getEntity('orders'))
-            .icon('<span class="fa fa-credit-card fa-fw"></span>')
-        )
-    );
-
-    admin.dashboard(nga.dashboard());
-    admin.header(headerTemplate);
-
-    nga.configure(admin);
-}]);
-
-myApp.config(['RestangularProvider', (RestangularProvider) => {
-    RestangularProvider.setDefaultHttpFields({ withCredentials: true });
-    RestangularProvider.addFullRequestInterceptor((element, operation, what, url, headers) => {
-        const currentTime = (new Date()).getTime();
-        const tokenExpires = window.localStorage.getItem('expires');
-        const finalHeaders = headers || {};
-
-        if (tokenExpires && tokenExpires < currentTime) logout();
+const currentTime = (new Date()).getTime();
+const tokenExpires = window.localStorage.getItem('expires');
 
-        finalHeaders.Authorization = window.localStorage.getItem('token');
+if (tokenExpires && tokenExpires < currentTime) logout();
 
-        return { headers: finalHeaders };
-    });
-}]);
+render(
+    <Admin restClient={restClient(ADMIN_API_URL, () => window.localStorage.getItem('token'), logout)}>
+        <Resource name="products" list={ProductList} edit={ProductEdit} create={ProductCreate} icon={ProductIcon} />
+        <Resource name="orders" list={OrderList} edit={OrderEdit} create={OrderCreate} icon={OrderIcon} />
+    </Admin>,
+    document.getElementById('root')
+);
diff --git a/src/admin/js/orders/Create.js b/src/admin/js/orders/Create.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import { Create, DateInput, TextInput } from 'admin-on-rest/lib/mui';
+
+export default (props) => (
+    <Create title="Create an Order" {...props}>
+        <DateInput label="date" source="date" />
+        <TextInput label="total" source="total" options={{ type: 'number' }} />
+        <TextInput label="status" source="status" />
+    </Create>
+);
diff --git a/src/admin/js/orders/Edit.js b/src/admin/js/orders/Edit.js
@@ -0,0 +1,16 @@
+import React, { PropTypes } from 'react';
+import { Edit, DateInput, TextInput } from 'admin-on-rest/lib/mui';
+
+const Title = ({ record }) => <span>Order {record ? `"${record.reference}"` : ''}</span>;
+
+Title.propTypes = {
+    record: PropTypes.object.isRequired,
+};
+
+export default (props) => (
+    <Edit title={Title} {...props}>
+        <DateInput label="date" source="date" />
+        <TextInput label="total" source="total" options={{ type: 'number' }} />
+        <TextInput label="status" source="status" />
+    </Edit>
+);
diff --git a/src/admin/js/orders/List.js b/src/admin/js/orders/List.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import { Filter, List, DateField, TextField, EditButton, TextInput } from 'admin-on-rest/lib/mui';
+
+export const OrderFilter = (props) => (
+    <Filter {...props}>
+        <TextInput label="Search" source="reference" alwaysOn />
+    </Filter>
+);
+
+export default (props) => (
+    <List {...props} filter={OrderFilter}>
+        <DateField label="date" source="date" />
+        <TextField label="reference" source="reference" />
+        <TextField label="total" source="total" />
+        <TextField label="status" source="status" />
+        <EditButton basePath="/orders" />
+    </List>
+);
diff --git a/src/admin/js/orders/config.js b/src/admin/js/orders/config.js
diff --git a/src/admin/js/orders/index.js b/src/admin/js/orders/index.js
@@ -0,0 +1,11 @@
+import OrderIcon from 'material-ui/svg-icons/action/description';
+import OrderList from './List';
+import OrderEdit from './Edit';
+import OrderCreate from './Create';
+
+export default {
+    OrderList,
+    OrderEdit,
+    OrderCreate,
+    OrderIcon,
+};
diff --git a/src/admin/js/products/Create.js b/src/admin/js/products/Create.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import { Create, TextInput } from 'admin-on-rest/lib/mui';
+
+export default (props) => (
+    <Create title="Create a Post" {...props}>
+        <TextInput label="Reference" source="reference" />
+        <TextInput label="price" source="price" options={{ type: 'number' }} />
+        <TextInput label="width" source="width" options={{ type: 'number' }} />
+        <TextInput label="height" source="height" options={{ type: 'number' }} />
+        <TextInput label="stock" source="stock" options={{ type: 'number' }} />
+    </Create>
+);
diff --git a/src/admin/js/products/Edit.js b/src/admin/js/products/Edit.js
@@ -0,0 +1,18 @@
+import React, { PropTypes } from 'react';
+import { Edit, TextInput } from 'admin-on-rest/lib/mui';
+
+const Title = ({ record }) => <span>{record ? record.reference : ''}</span>;
+
+Title.propTypes = {
+    record: PropTypes.object.isRequired,
+};
+
+export default (props) => (
+    <Edit title={Title} {...props}>
+        <TextInput label="Reference" source="reference" />
+        <TextInput label="price" source="price" options={{ type: 'number' }} />
+        <TextInput label="width" source="width" options={{ type: 'number' }} />
+        <TextInput label="height" source="height" options={{ type: 'number' }} />
+        <TextInput label="stock" source="stock" options={{ type: 'number' }} />
+    </Edit>
+);
diff --git a/src/admin/js/products/List.js b/src/admin/js/products/List.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import { Filter, List, TextField, EditButton, TextInput } from 'admin-on-rest/lib/mui';
+
+export const ProductFilter = (props) => (
+    <Filter {...props}>
+        <TextInput label="Search" source="reference" alwaysOn />
+    </Filter>
+);
+
+export default (props) => (
+    <List {...props} filter={ProductFilter}>
+        <TextField label="reference" source="reference" />
+        <TextField label="price" source="price" />
+        <TextField label="width" source="width" />
+        <TextField label="height" source="height" />
+        <TextField label="stock" source="stock" />
+        <EditButton basePath="/products" />
+    </List>
+);
diff --git a/src/admin/js/products/config.js b/src/admin/js/products/config.js
diff --git a/src/admin/js/products/index.js b/src/admin/js/products/index.js
@@ -0,0 +1,11 @@
+import ProductIcon from 'material-ui/svg-icons/action/redeem';
+import ProductList from './List';
+import ProductEdit from './Edit';
+import ProductCreate from './Create';
+
+export default {
+    ProductList,
+    ProductEdit,
+    ProductCreate,
+    ProductIcon,
+};