Strapi-plugin-models NPM

⚠️ This plugin is not finished yet! ⚠️

Strapi plugin models {WIP}

A plugin for Strapi Headless CMS that provides an independent environment for managing simple models, fields and elements from external source inside Strapi UI.

API supports viewing, creating, editing and deleting models, model fields and model elements.

Installation

First, you should install Strapi itself (following documentation for v3.0).

Then install this plugin from Strapi root folder as follows.

npm i strapi-plugin-models@latest

yarn add strapi-plugin-models@latest

If you have a source code, just copy it to the ./plugins/models folder

After successful installation you've to build a fresh package that includes plugin UI. To achieve that simply use:

yarn build
yarn develop

or just run Strapi in the development mode with --watch-admin option:

yarn develop --watch-admin

The Models plugin should appear in the Plugins section of Strapi sidebar after you run app again.

⚠️ ENV variables

Models plugin uses external API url for all requests. The correct URL should be placed in app environment (for example, ./.env) in a variable PLUGIN_MODELS_URL.

⚠️ NPM conflict resolution

This plugin uses newer version of react-query and thus — match-sorter. To resolve this issue add this lines to your Strapi package.json. (up to date for strapi v.3.6.7)

  "resolutions": {
    "match-sorter": "^4.0.2"
  },

⚠️ API Permissions

Do not forget to add permissions to plugin controls. To do that, go to: Settings → Users & Permissions plugin → public → Permissions → Models and check "Select all".

Public API routes

host root is pulled from the node environment variable PLUGIN_MODELS_URL.

GET <host>/admin/models - get models list
GET <host>/admin/models/:id - get one model
POST <host>/admin/models - create model
PUT <host>/admin/models/:id - update model
DELETE <host>/admin/models/:id - delete model

GET <host>/admin/models/:id/fields - get fields list
GET <host>/admin/models/:id/fields/:fieldId - get one model field
POST <host>/admin/models/:id/fields - create model field
PUT <host>/admin/models/:id/fields/:fieldId - update model field
DELETE <host>/admin/models/:id/fields/:fieldId - delete model field

GET <host>/admin/models/:id/elements - get elements list
GET <host>/admin/models/:id/elements/:elementId - get one model element
POST <host>/admin/models/:id/elements - create model element
PUT <host>/admin/models/:id/elements/:elementId - update model element
DELETE <host>/admin/models/:id/elements/:elementId - delete model element

Public API items models

Model

{
  "id": 1,
  "name": "Model",
  "code": "model"
}

Model field

{
  "id": 1,
  "name": "Field",
  "code": "field",
  "type": "string",
  "referenceCode": "reference",
  "modelCode": "model",
  "required": false,
  "multiple": false,
  "filterable": false
}

Model element

{
  "id": 1,
  "fieldValues": [
    {
      "modelFieldId": 1,
      "value": "string"
    },
    {
      "modelFieldId": 2,
      "value": ["string"]
    }
  ]
}

How to add new functionality

All relative paths are specified for the plugin root

Create new UI components

New functional UI is created in ./admin/src/containers for complex logic blocks and ./admin/src/components for simple blocks.
New routes are added in ./admin/src/containers/App/index.js like so:

import NewContainer from '../NewContainer';

const App = () => {
  return (
    <Providers...>
      <Container>
        <Switch>
          <Route
              path={`/plugins/${pluginId}/your-desired-path`}
              component={NewContainer}
              exact
          />
          ...

Create new API methods

External methods are created in ./controllers/models like so:

module.exports = {
    ...,
    async newMethod(ctx) {
        // ...your logic
        ctx.send(result);
    }
}

Internal routes are created in ./config/routes.json like so:

{
  "routes": [
    ...,
    {
      "method": "GET",
      "path": "/path-relative-to-plugin",
      "handler": "models.newMethod", // <-- method from ./controllers
      "config": {}
    }
  ]
}