admin_core 0.0.1

data/client/src/resource-page/Index.jsx

@@ -0,0 +1,141 @@
+// @flow
+import React from "react";
+import classNames from "classnames";
+import omit from "lodash.omit";
+import reduce from "lodash.reduce";
+import toPairs from "lodash.topairs";
+import {Link} from "react-router-dom";
+import {ButtonGroup, Card, CardBlock, CardHeader, CardTitle} from "reactstrap";
+
+import Base from "./Base";
+import Breadcrumb from "../components/Breadcrumb";
+import ResourceFilters from "../components/ResourceFilters";
+import ResourcesCollection from "../components/ResourcesCollection";
+import Pagination from "../components/Pagination";
+import type {ResourceManager, ResourcePage$Index} from "../decls";
+
+export default function index(resourceManager: ResourceManager) {
+  class IndexPage extends Base {
+    queries: { [string]: string; };
+
+    state: {
+      page?: ResourcePage$Index;
+    }
+
+    componentDidMount(...args: any) {
+      super.componentDidMount(...args);
+      this.setQueries();
+    }
+
+    componentDidUpdate(...args: any) {
+      super.componentDidUpdate(...args);
+      this.setQueries();
+    }
+
+    setQueries() {
+      this.queries = reduce(this.props.location.search.substring(1).split("&"), (acc, kv) => {
+        const [key, value] = kv.split("=");
+        if (key) {
+          acc[key] = value;
+        }
+        return acc;
+      }, {});
+    }
+
+    renderScopeButton(scope: { name: string; count: number; }, key: number) {
+      const match = scope.name === this.queries.scope;
+      const search = reduce(toPairs(omit(this.queries, "scope")), (acc, kv) => {
+        acc.push(kv.join("="));
+        return acc;
+      }, match ? [] : [`scope=${scope.name}`]).join("&");
+      return (
+        <Link
+          to={{
+            pathname: this.props.location.pathname,
+            search: search ? `?${search}` : "",
+            hash: this.props.location.hash,
+          }}
+          className={classNames("btn", { "btn-primary": match, "btn-secondary": !match })}
+          key={key}
+        >
+          {scope.name} ({scope.count})
+        </Link>
+      );
+    }
+
+    needFilter() {
+      const page = this.state.page;
+      return page && (page.scopes.length > 0 || page.filters.length > 0);
+    }
+
+    render() {
+      const page = this.state.page;
+      return (
+        <main className="main">
+          <Breadcrumb links={[["Home", "/"]]} current={resourceManager.displayName}/>
+          <div className="container-fluid">
+            <div className="animated fadeIn">
+              <div className="row">
+                {this.needFilter() &&
+                  <div className="col-sm-12 col-lg-3 push-lg-9">
+                    {page && page.scopes.length > 0 &&
+                      <Card>
+                        <CardHeader>
+                          Scopes
+                        </CardHeader>
+                        <CardBlock>
+                          <ButtonGroup vertical className="hidden-md-down d-block">
+                            {page.scopes.map((scope, i) =>
+                              this.renderScopeButton(scope, i)
+                            )}
+                          </ButtonGroup>
+                          <ButtonGroup className="hidden-lg-up">
+                            {page.scopes.map((scope, i) =>
+                              this.renderScopeButton(scope, i)
+                            )}
+                          </ButtonGroup>
+                        </CardBlock>
+                      </Card>
+                    }
+                    {page && page.filters.length > 0 &&
+                      <ResourceFilters location={this.props.location} filters={page.filters} />
+                    }
+                  </div>
+                }
+                { page &&
+                  <div className={classNames("col-sm-12", { "col-lg-9 pull-lg-3": this.needFilter() })}>
+                    <Card>
+                      <CardBlock>
+                        <div className="row">
+                          <div className="col-sm-5">
+                            <CardTitle>{resourceManager.displayName}</CardTitle>
+                          </div>
+                          <div className="col-sm-7">
+                            {resourceManager.newPath &&
+                              <Link to={resourceManager.newPath} className="btn btn-primary float-right">
+                                <i className="icon-plus" />
+                              </Link>
+                            }
+                          </div>
+                        </div>
+                        <ResourcesCollection {...page} />
+                        {page.pagination.total > 1 &&
+                          <Pagination
+                            {...page.pagination}
+                            location={this.props.location}
+                          />
+                        }
+                      </CardBlock>
+                    </Card>
+                  </div>
+                }
+              </div>
+            </div>
+          </div>
+        </main>
+      );
+    }
+  }
+  IndexPage.displayName = `IndexPage(${resourceManager.displayName})`;
+  return IndexPage;
+}

data/client/src/resource-page/New.jsx

@@ -0,0 +1,48 @@
+// @flow
+import React from "react";
+
+import Base from "./Base";
+import ResourceForm from "../components/ResourceForm";
+import Breadcrumb from "../components/Breadcrumb";
+import type {ResourcePage$New, ResourceManager} from "../decls";
+
+export default function newPage(resourceManager: ResourceManager) {
+  class NewPage extends Base {
+    state: {
+      page?: ResourcePage$New;
+    }
+
+    render() {
+      const page = this.state.page;
+      return (
+        <main className="main">
+          <Breadcrumb links={[["Home", "/"], [resourceManager.displayName, resourceManager.indexPath]]} current="New" />
+          <div className="container-fluid">
+            <div className="animated fadeIn">
+              <div className="row">
+                {page &&
+                  <div className="col-sm-12">
+                    <div className="card">
+                      <div className="card-block">
+                        <h3 className="card-title">
+                          New
+                        </h3>
+                        <ResourceForm
+                          action={resourceManager.indexPath}
+                          history={this.props.history}
+                          resource={page.resource}
+                        />
+                      </div>
+                    </div>
+                  </div>
+                }
+              </div>
+            </div>
+          </div>
+        </main>
+      );
+    }
+  }
+  NewPage.displayName = `NewPage(${resourceManager.displayName})`;
+  return NewPage;
+}

data/client/src/resource-page/Show.jsx

@@ -0,0 +1,116 @@
+// @flow
+import React from "react";
+import {Link, Redirect} from "react-router-dom";
+import {Modal, ModalBody, ModalFooter, ModalHeader} from "reactstrap";
+
+import httpClient from "../http-client";
+import Base from "./Base";
+import Breadcrumb from "../components/Breadcrumb";
+import type {ResourceManager, ResourcePage$Show} from "../decls";
+import {renderShow} from "../resource-field-renderer";
+
+export default function show(resourceManager: ResourceManager) {
+  class ShowPage extends Base {
+    state: {
+      confirm?: boolean;
+      page?: ResourcePage$Show;
+      redirectTo?: string;
+    }
+
+    toggleModal(e: SyntheticEvent) {
+      e.preventDefault();
+      this.setState({ confirm: !this.state.confirm });
+    }
+
+    deleteResource(e: SyntheticEvent) {
+      e.preventDefault();
+      const page = this.state.page;
+      if (page && page.resource.showPath) {
+        httpClient.delete(page.resource.showPath)
+          .then(r => this.setState({ redirectTo: r.data.redirectTo }));
+      }
+    }
+
+    renderPage(page: ResourcePage$Show) {
+      const resource = page.resource;
+      return (
+        <div className="col-sm-12">
+          <div className="card">
+            <div className="card-block">
+              <div className="row">
+                <div className="col-sm-5">
+                  <h3 className="card-title">
+                    {resource.displayName}
+                  </h3>
+                </div>
+                <div className="col-sm-7">
+                  {resource.destroyable && [
+                    <a
+                      href="#"
+                      className="btn btn-outline-danger float-right"
+                      onClick={this.toggleModal.bind(this)}
+                      key="link"
+                    >
+                      <i className="icon-trash" />
+                    </a>,
+                    <Modal
+                      isOpen={this.state.confirm}
+                      toggle={this.toggleModal.bind(this)}
+                      className="modal-danger"
+                      key="modal"
+                    >
+                      <ModalHeader toggle={this.toggleModal.bind(this)}></ModalHeader>
+                      <ModalBody>Are you sure?</ModalBody>
+                      <ModalFooter>
+                        <button className="btn btn-danger" onClick={this.deleteResource.bind(this)}>Delete</button>
+                        <button className="btn btn-secondary" onClick={this.toggleModal.bind(this)}>Cancel</button>
+                      </ModalFooter>
+                    </Modal>
+                  ]}
+                  {resource.editPath &&
+                    <Link to={resource.editPath} className="btn btn-outline-primary float-right mr-1">
+                      <i className="icon-pencil" />
+                    </Link>
+                  }
+                </div>
+              </div>
+              {resource.fields.map((field, i) =>
+                <div className="row" key={i}>
+                  <div className="col-md-3">
+                    <strong>
+                      {field.displayName}
+                    </strong>
+                  </div>
+                  <div className="col-md-9">
+                    {renderShow(field)}
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      );
+    }
+
+    render() {
+      if (this.state.redirectTo) {
+        return <Redirect to={this.state.redirectTo} />;
+      }
+      const page = this.state.page;
+      return (
+        <main className="main">
+          <Breadcrumb links={[["Home", "/"], [resourceManager.displayName, resourceManager.indexPath]]} current={page && page.resource.displayName}/>
+          <div className="container-fluid">
+            <div className="animated fadeIn">
+              <div className="row">
+                {page && this.renderPage(page)}
+              </div>
+            </div>
+          </div>
+        </main>
+      );
+    }
+  }
+  ShowPage.displayName = `ShowPage(${resourceManager.displayName})`;
+  return ShowPage;
+}

data/client/webpack.config.js

@@ -0,0 +1,26 @@
+/* eslint-env node */
+
+const path = require("path");
+
+module.exports = {
+  devtool: "source-map",
+  entry: {
+    main: "./src/main.js",
+  },
+  resolve: {
+    extensions: [".js", ".jsx"]
+  },
+  module: {
+    rules: [
+      {
+        test: /\.jsx?$/,
+        exclude: /node_modules/,
+        use: ["babel-loader"],
+      },
+    ],
+  },
+  output: {
+    path: path.join(__dirname, "dist"),
+    filename: "admin-core.js",
+  },
+};