admin_core 0.0.1

data/client/src/decls.js

@@ -0,0 +1,119 @@
+// @flow
+
+// Represent a single ActiveRecord::Base
+export type Resource = {
+  displayName: string;
+  name: string;
+  showPath: ?string; // If it is null, the resource is not persisted.
+  editPath: ?string; // If it is null, the resource is not updatable.
+  destroyable: boolean;
+  fields: ResourceField[];
+}
+
+// Represent a child class of AdminCore::BaseResourceManager.
+//
+// @see AdminCore::BaseResourceManager.to_hash
+export type ResourceManager = {
+  displayName: string;
+  indexPath: string;
+  newPath: ?string; // If it is null, the resource is not creatable.
+  showPath: string;
+  editPath: ?string; // If it is null, the resource is not updatable.
+  scopes: string[];
+}
+
+type $ResourceField<T, V> = {
+  displayName: string;
+  name: string;
+  type: T;
+  value: V;
+};
+
+export type ResourceField = $ResourceField<*, *>;
+
+export type ResourceField$Boolean = $ResourceField<"boolean", boolean>;
+export type ResourceField$BelongsTo = $ResourceField<"belongs_to", { resource: Resource; paramName: string; }>;
+export type ResourceField$Date = $ResourceField<"date", string>;
+export type ResourceField$DateTime = $ResourceField<"date_time", string>;
+export type ResourceField$Enum = $ResourceField<"enum", { value: string; values: string[]; }>;
+export type ResourceField$Number = $ResourceField<"number", number>;
+export type ResourceField$String = $ResourceField<"string", string>;
+export type ResourceField$Text = $ResourceField<"text", string>;
+
+// Shape of exports of resource-field/*.js
+export type ResourceFieldModule = {
+  Index: (ResourceField) => React$Element<*>;
+  New: (ResourceField, onChange: (string, any) => void) => React$Element<*>;
+  Show: (ResourceField) => React$Element<*>;
+  Edit: (ResourceField, onChange: (string, any) => void) => React$Element<*>;
+  getValue: (ResourceField) => any;
+}
+
+
+type $ResourceFilter<O, V> = {
+  type: string;
+  name: string;
+  displayName: string;
+  query: {
+    operator: O;
+    value: ?V;
+  };
+}
+
+export type ResourceFilter = $ResourceFilter<*, *>;
+
+export type ResourceFilter$Boolean = $ResourceFilter<"is", boolean>;
+export type ResourceFilter$Number = $ResourceFilter<"equals" | "greater_than" | "less_than", number>;
+export type ResourceFilter$String = $ResourceFilter<"contains" | "equals" | "starts_with" | "ends_with", string>;
+
+// Shpae of exports of admin-core/resource-filter/*.js
+export type ResourceFilterModule = {
+  Filter: (ResourceFilter, _: (string, string, string) => void) => React$Element<*>;
+}
+
+// Shape of AdminCore::ResourcePage::Index#to_json
+export type ResourcePage$Index = {
+  attributes: string[];
+  resources: Resource[];
+  filters: ResourceFilter[];
+  scopes: { name: string; count: number; }[];
+  pagination: {
+    current: number;
+    total: number;
+  };
+}
+
+// Shape of AdminCore::ResourcePage::New#to_json
+export type ResourcePage$New = {
+  resource: Resource;
+}
+
+// Shape of AdminCore::ResourcePage::Show#to_json
+export type ResourcePage$Show = {
+  resource: Resource;
+}
+
+// Shape of AdminCore::ResourcePage::Edit#to_json
+export type ResourcePage$Edit = {
+  resource: Resource;
+}
+
+export type SidebarItem = SidebarTitle | SidebarDropdown | SidebarLink;
+
+export type SidebarTitle = {
+  type: "title";
+  displayName: string;
+}
+
+export type SidebarDropdown = {
+  type: "dropdown";
+  displayName: string;
+  links: SidebarLink[];
+}
+
+export type SidebarLink = {
+  type: "link";
+  displayName: string;
+  link: string;
+  external: boolean;
+};

data/client/src/http-client.js

@@ -0,0 +1,18 @@
+// @flow
+import axios from "axios";
+
+const httpClient = axios.create({
+  headers: {
+    "Accept": "application/json",
+  },
+});
+
+httpClient.interceptors.request.use(config => {
+  const csrfToken = document.querySelector("meta[name='csrf-token']");
+  if (csrfToken instanceof HTMLMetaElement && config.headers) {
+    config.headers["X-CSRF-Token"] = csrfToken.content;
+  }
+  return config;
+});
+
+export default httpClient;

data/client/src/main.js

@@ -0,0 +1,9 @@
+import AdminCore from "./AdminCore";
+import React from "react";
+import ReactDOM from "react-dom";
+import ReactRouterDOM from "react-router-dom";
+
+global.AdminCore = AdminCore;
+global.React = React;
+global.ReactDOM = ReactDOM;
+global.ReactRouterDOM = ReactRouterDOM;

data/client/src/resource-field/BelongsTo.jsx

@@ -0,0 +1,26 @@
+// @flow
+import React from "react";
+import {Link} from "react-router-dom";
+
+import type {ResourceField$BelongsTo} from "../decls";
+import {getValue} from "../resource-field-renderer";
+
+exports.getValue = function (field: ResourceField$BelongsTo) {
+  const fi = field.value.resource.fields.find(f => f.name === field.value.paramName);
+  if (fi) {
+    return getValue(fi);
+  }
+};
+
+exports.Index = exports.Show = function (field: ResourceField$BelongsTo) {
+  const resource = field.value.resource;
+  if (resource.showPath) {
+    return <Link to={resource.showPath}>{resource.displayName}</Link>;
+  } else {
+    return <span>{resource.displayName}</span>;
+  }
+};
+
+exports.New = exports.Edit = function(_field: ResourceField$BelongsTo, _onChange: (string, any) => void) {
+  throw new Error("Not implemented");
+};

data/client/src/resource-field/Boolean.jsx

@@ -0,0 +1,43 @@
+// @flow
+import React from "react";
+import type {ResourceField$Boolean} from "../decls";
+
+exports.getValue = function (field: ResourceField$Boolean) {
+  return field.value;
+};
+
+exports.Index = exports.Show = function (field: ResourceField$Boolean) {
+  return (
+    <span className="switch switch-text switch-primary">
+      <input
+        checked={field.value}
+        className="switch-input"
+        disabled={true}
+        type="checkbox"
+      />
+      <span className="switch-label" data-on="On" data-off="Off"/>
+      <span className="switch-handle"/>
+    </span>
+  );
+};
+
+exports.New = exports.Edit = function (field: ResourceField$Boolean, onChange: (string, any) => void) {
+  return (
+    <label className="switch switch-text switch-primary">
+      <input
+        type="checkbox"
+        name={field.name}
+        className="switch-input"
+        defaultChecked={field.value}
+        onChange={(e: SyntheticEvent) => {
+          const el = e.target;
+          if (el instanceof HTMLInputElement) {
+            onChange(field.name, el.checked);
+          }
+        }}
+      />
+      <span className="switch-label" data-on="On" data-off="Off"/>
+      <span className="switch-handle"/>
+    </label>
+  );
+};

data/client/src/resource-field/Date.jsx

@@ -0,0 +1,29 @@
+// @flow
+import React from "react";
+import type {ResourceField$Date} from "../decls";
+
+exports.getValue = function (field: ResourceField$Date) {
+  return field.value;
+};
+
+exports.Index = exports.Show = function (field: ResourceField$Date) {
+  const date = new Date(field.value);
+  return <span>{date.toLocaleDateString()}</span>;
+};
+
+exports.New = exports.Edit = function (field: ResourceField$Date, onChange: (string, any) => void) {
+  return (
+    <input
+      className="form-control"
+      defaultValue={field.value}
+      name={field.name}
+      onChange={(e: SyntheticEvent) => {
+        const el = e.target;
+        if (el instanceof HTMLInputElement) {
+          onChange(field.name, el.value);
+        }
+      }}
+      type="date"
+    />
+  );
+};

data/client/src/resource-field/DateTime.jsx

@@ -0,0 +1,29 @@
+// @flow
+import React from "react";
+import type {ResourceField$DateTime} from "../decls";
+
+exports.getValue = function (field: ResourceField$DateTime) {
+  return field.value;
+};
+
+exports.Index = exports.Show = function (field: ResourceField$DateTime) {
+  const date = new Date(field.value);
+  return <span>{date.toLocaleString()}</span>;
+};
+
+exports.New = exports.Edit = function (field: ResourceField$DateTime, onChange: (string, any) => void) {
+  return (
+    <input
+      className="form-control"
+      defaultValue={field.value}
+      name={field.name}
+      onChange={(e: SyntheticEvent) => {
+        const el = e.target;
+        if (el instanceof HTMLInputElement) {
+          onChange(field.name, el.value);
+        }
+      }}
+      type="datetime"
+    />
+  );
+};

data/client/src/resource-field/Enum.jsx

@@ -0,0 +1,34 @@
+// @flow
+import React from "react";
+import type {ResourceField$Enum} from "../decls";
+
+exports.getValue = function (field: ResourceField$Enum) {
+  return field.value.value;
+};
+
+exports.Index = exports.Show = function (field: ResourceField$Enum) {
+  if (field.value.values.indexOf(field.value.value) !== -1 && typeof field.value.value === "number") {
+    return <span>{field.value.values[field.value.value]}</span>;
+  } else {
+    return <span>{field.value.value}</span>;
+  }
+};
+
+exports.New = exports.Edit = function (field: ResourceField$Enum, onChange: (string, any) => void) {
+  return (
+    <select
+      className="form-control"
+      defaultValue={field.value.value}
+      onChange={(e: SyntheticEvent) => {
+        const el = e.target;
+        if (el instanceof HTMLSelectElement) {
+          onChange(field.name, el.value);
+        }
+      }}
+    >
+      {field.value.values.map((value, i) =>
+        <option value={value} key={i}>{value}</option>
+      )}
+    </select>
+  );
+};

data/client/src/resource-field/Number.jsx

@@ -0,0 +1,28 @@
+// @flow
+import React from "react";
+import type {ResourceField$Number} from "../decls";
+
+exports.getValue = function (field: ResourceField$Number) {
+  return field.value;
+};
+
+exports.Index = exports.Show = function (field: ResourceField$Number) {
+  return <span>{field.value}</span>;
+};
+
+exports.New = exports.Edit = function(field: ResourceField$Number, onChange: (string, any) => void) {
+  return (
+    <input
+      className="form-control"
+      defaultValue={field.value}
+      name={field.name}
+      onChange={(e: SyntheticEvent) => {
+        const el = e.target;
+        if (el instanceof HTMLInputElement) {
+          onChange(field.name, el.value);
+        }
+      }}
+      type="number"
+    />
+  );
+};

data/client/src/resource-field/String.jsx

@@ -0,0 +1,28 @@
+// @flow
+import React from "react";
+import type {ResourceField$String} from "../decls";
+
+exports.getValue = function (field: ResourceField$String) {
+  return field.value;
+};
+
+exports.Index = exports.Show = function (field: ResourceField$String) {
+  return <span>{field.value}</span>;
+};
+
+exports.New = exports.Edit = function(field: ResourceField$String, onChange: (string, any) => void) {
+  return (
+    <input
+      className="form-control"
+      defaultValue={field.value}
+      name={field.name}
+      onChange={(e: SyntheticEvent) => {
+        const el = e.target;
+        if (el instanceof HTMLInputElement) {
+          onChange(field.name, el.value);
+        }
+      }}
+      type="text"
+    />
+  );
+};

data/client/src/resource-field/Text.jsx

@@ -0,0 +1,27 @@
+// @flow
+import React from "react";
+import type {ResourceField$Text} from "../decls";
+
+exports.getValue = function (field: ResourceField$Text) {
+  return field.value;
+};
+
+exports.Index = exports.Show = function (field: ResourceField$Text) {
+  return <span>{field.value}</span>;
+};
+
+exports.New = exports.Edit = function(field: ResourceField$Text, onChange: (string, any) => void) {
+  return (
+    <textarea
+      className="form-control"
+      defaultValue={field.value}
+      name={field.name}
+      onChange={(e: SyntheticEvent) => {
+        const el = e.target;
+        if (el instanceof HTMLTextAreaElement) {
+          onChange(field.name, el.value);
+        }
+      }}
+    />
+  );
+};

data/client/src/resource-field-renderer.js

@@ -0,0 +1,45 @@
+// @flow
+import type {
+  ResourceFieldModule,
+  ResourceField,
+} from "./decls";
+
+const resourceFields: { [string]: ResourceFieldModule; } = {};
+
+export function register(name: string, module: ResourceFieldModule) {
+  resourceFields[name] = module;
+}
+
+export function getValue(field: ResourceField) {
+  const module = resourceFields[field.type];
+  return module.getValue(field);
+}
+
+export function renderIndex(field: ResourceField) {
+  const module = resourceFields[field.type];
+  return module.Index(field);
+}
+
+export function renderNew(field: ResourceField, onChange: (string, any) => void) {
+  const module = resourceFields[field.type];
+  return module.New(field, onChange);
+}
+
+export function renderShow(field: ResourceField) {
+  const module = resourceFields[field.type];
+  return module.Show(field);
+}
+
+export function renderEdit(field: ResourceField, onChange: (string, any) => void) {
+  const module = resourceFields[field.type];
+  return module.Edit(field, onChange);
+}
+
+register("belongs_to", require("./resource-field/BelongsTo"));
+register("boolean", require("./resource-field/Boolean"));
+register("date", require("./resource-field/Date"));
+register("date_time", require("./resource-field/DateTime"));
+register("enum", require("./resource-field/Enum"));
+register("number", require("./resource-field/Number"));
+register("string", require("./resource-field/String"));
+register("text", require("./resource-field/Text"));

data/client/src/resource-filter/Boolean.jsx

@@ -0,0 +1,22 @@
+// @flow
+import React from "react";
+import type {ResourceFilter$Boolean} from "../decls";
+
+export function Filter(filter: ResourceFilter$Boolean, onChange: (string, string, string) => void) {
+  return (
+    <select
+      className="form-control"
+      defaultValue={filter.query.value == null ? null : filter.query.value ? "true" : "false"}
+      onChange={(e: SyntheticEvent) => {
+        const el = e.target;
+        if (el instanceof HTMLSelectElement) {
+          onChange(filter.name, "is", el.value);
+        }
+      }}
+    >
+      <option>Any</option>
+      <option value="true">Yes</option>
+      <option value="false">No</option>
+    </select>
+  );
+}

data/client/src/resource-filter/Number.jsx

@@ -0,0 +1,45 @@
+// @flow
+import React from "react";
+import type {ResourceFilter$Number} from "../decls";
+
+class ResourceFilterNumber extends React.Component {
+  props: {
+    filter: ResourceFilter$Number;
+    onChange: (string, string, string) => void;
+  };
+
+  handleChange() {
+    this.props.onChange(
+      this.props.filter.name,
+      this.refs.select.value,
+      this.refs.input.value
+    );
+  }
+
+  render() {
+    return (
+      <div>
+        <select
+          ref="select"
+          className="form-control"
+          defaultValue={this.props.filter.query.operator}
+          onChange={this.handleChange.bind(this)}
+        >
+          <option value="equals">Equals</option>
+          <option value="greater_than">Greater than</option>
+          <option value="less_than">Less than</option>
+        </select>
+        <input
+          ref="input"
+          className="form-control"
+          defaultValue={this.props.filter.query.value}
+          onChange={this.handleChange.bind(this)}
+        />
+      </div>
+    );
+  }
+}
+
+export function Filter(filter: ResourceFilter$Number, onChange: (string, string, string) => void) {
+  return <ResourceFilterNumber filter={filter} onChange={onChange} />;
+}

data/client/src/resource-filter/String.jsx

@@ -0,0 +1,46 @@
+// @flow
+import React from "react";
+import type {ResourceFilter$String} from "../decls";
+
+class ResourceFilterString extends React.Component {
+  props: {
+    filter: ResourceFilter$String;
+    onChange: (string, string, string) => void;
+  };
+
+  handleChange() {
+    this.props.onChange(
+      this.props.filter.name,
+      this.refs.select.value,
+      this.refs.input.value
+    );
+  }
+
+  render() {
+    return (
+      <div>
+        <select
+          ref="select"
+          className="form-control"
+          defaultValue={this.props.filter.query.operator}
+          onChange={this.handleChange.bind(this)}
+        >
+          <option value="contains">Contains</option>
+          <option value="equals">Equals</option>
+          <option value="starts_with">Starts with</option>
+          <option value="ends_with">Ends with</option>
+        </select>
+        <input
+          ref="input"
+          className="form-control"
+          defaultValue={this.props.filter.query.value}
+          onChange={this.handleChange.bind(this)}
+        />
+      </div>
+    );
+  }
+}
+
+export function Filter(filter: ResourceFilter$String, onChange: (string, string, string) => void) {
+  return <ResourceFilterString filter={filter} onChange={onChange} />;
+}

data/client/src/resource-filter-renderer.js

@@ -0,0 +1,17 @@
+// @flow
+import type {ResourceFilter, ResourceFilterModule} from "./decls";
+
+const resourceFilters: { [string]: ResourceFilterModule; } = {};
+
+export function register(name: string, module: ResourceFilterModule) {
+  resourceFilters[name] = module;
+}
+
+export function renderFilter(filter: ResourceFilter, onChange: (string, string, any) => void) {
+  const module = resourceFilters[filter.type];
+  return module.Filter(filter, onChange);
+}
+
+register("boolean", require("./resource-filter/Boolean"));
+register("number", require("./resource-filter/Number"));
+register("string", require("./resource-filter/String"));

data/client/src/resource-page/Base.js

@@ -0,0 +1,36 @@
+// @flow
+import React from "react";
+import type {Location, RouterHistory} from "react-router-dom";
+
+import httpClient from "../http-client";
+
+export default class Base extends React.Component {
+  props: {
+    location: Location;
+    history: RouterHistory;
+  };
+
+  state: any;
+
+  constructor(props: any) {
+    super(props);
+    this.state = {};
+  }
+
+  componentDidMount() {
+    this.loadPage();
+  }
+
+  componentDidUpdate(prevProps: { location: Location; }) {
+    if (this.props.location.pathname !== prevProps.location.pathname ||
+        this.props.location.search !== prevProps.location.search) {
+      this.loadPage();
+    }
+  }
+
+  loadPage() {
+    const jsonPathname = this.props.location.pathname.replace(/\.[^/.]+$/, "") + ".json";
+    httpClient.get(jsonPathname + this.props.location.search)
+      .then(({ data }) => this.setState({ page: data.page }));
+  }
+}

data/client/src/resource-page/Edit.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$Edit, ResourceManager} from "../decls";
+
+export default function editPage(resourceManager: ResourceManager) {
+  class EditPage extends Base {
+    state: {
+      page?: ResourcePage$Edit;
+    }
+
+    render() {
+      const page = this.state.page;
+      return (
+        <main className="main">
+          <Breadcrumb links={[["Home", "/"], [resourceManager.displayName, resourceManager.indexPath], page ? [page.resource.displayName, page.resource.showPath || "#"] : ["...", "#"]]} current="Edit"/>
+          <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={page.resource.showPath || ""}
+                          history={this.props.history}
+                          resource={page.resource}
+                        />
+                      </div>
+                    </div>
+                  </div>
+                }
+              </div>
+            </div>
+          </div>
+        </main>
+      );
+    }
+  }
+  EditPage.displayName = `EditPage(${resourceManager.displayName})`;
+  return EditPage;
+}