• Stars
    star
    241
  • Rank 167,643 (Top 4 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 10 years ago
  • Updated about 6 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Admin backend for ember-cli projects

Ember Admin

Build Status CircleCI npm version Ember Observer Score

ember-admin is built and maintained by DockYard, contact us for expert Ember.js consulting.

About

Automatically discover your models and interact with all model data in a simple CRUD interface. Great for a drop-in starter admin backend.

EmberAdmin uses its own data store so as not to pull in data it shouldn't into your regular data store.

EmberData is currently a requirement.

Install

npm install ember-admin --save-dev

Usage

Add the admin routes to your router.js

import adminRouter from 'ember-admin/router';

Router.map(function() {
  adminRouter(this);
});

Start your ember-cli project and navigate to /admin.

Restricting Access

By default EmberAdmin is unrestricted. If you'd like to restrict access you should override the admin route app/routes/admin.js

import Ember from 'ember';
import EmberAdminRouteAdmin from 'ember-admin/routes/admin';

export default EmberAdminRouteAdmin.extend({

});

Now you can extend the Route to behave however you'd like.

Note: you should always take care to ensure that your backend API used by EmberAdmin is properly restricted to authorized users.

Backend

EmberAdmin expects as a default to access all of your models under an admin/ namespaced API. EmberAdmin will take the adapter for your model and append admin to the current namespace. So if your Dog model's URL is typically: /api/dogs EmberAdmin will try /api/admin/dogs. You will need to provide the following backend API endpoints:

  • [GET] /admin/:model
  • [POST] /admin/:model
  • [PUT] /admin/:model/:id
  • [DELETE] /admin/:model/:id

Customizing

Templates

By default EmberAdmin will serve up its own templates that are pretty generic. You can override the following template paths:

  • app/templates/admin.hbs - landing page for admin interface
  • app/templates/admin/index/default.hbs - lists all records for a given model
  • app/templates/admin/edit/default.hbs - edit form for a given record
  • app/templates/admin/new/default.hbs - form for creating a new record

The above templates will apply to all models. If you want to have forms that apply to a specific model for more in-depth customization you override:

  • app/templates/admin/index/:model.hbs - lists all records for the given model
  • app/templates/admin/edit/:model.hbs - edit form for the given model
  • app/templates/admin/new/:model.hbs - form for creating a new record

Just replace :model with the name of your model. EmberAdmin will always attempt to resolve a model-specific template before rendering the more generic one.

Namespace

If you want to access your models under a different namespace override app/services/admin.js in the following way:

import Ember from 'ember';
import EmberAdminServiceAdmin from 'ember-admin/services/admin';

export default EmberAdminServiceAdmin.extend({
  namespace: 'custom'
});

So if your Dog model's URL is typically: /api/dogs EmberAdmin will now try /api/custom/dogs.

Including / Excluding Models

All models available to Ember Data will be included by default. But you may not want to give access to all models. You can control this behavior with the Admin Service object. You will need to override app/services/admin.js

import Ember from 'ember';
import EmberAdminServiceAdmin from 'ember-admin/services/admin';

export default EmberAdminServiceAdmin.extend({
  includedModels: null,
  excludedModels: null
});

If you set includedModels to an array like ['person', 'project'] then only the Person and Project models will be available to the admin interface.

If you set excludedModels to an array like ['person'] then every model except Person will be available to the admin interface.

You can mix includedModels and excludedModels:

includedModels: ['person', 'project'],
excludedModels: ['person']

This configuration means that only the Project model will be available.

Including / Excluding Columns

All columns defined are included by default. But you may not want to allow all columns to be listed on the index, or part of the form. Or, you may want to use non DS.attr properties. To define the specific columns to include or exclude for a given model you need to override the Admin Service object from the previous section, and modify the following:

includedColumns: {
  'person': ['name', 'age']
},
excludedColumns: {
  'project': ['dateCreated']
}

includedColumns and excludedColumns are objects who's keys should map to the model name. Each key's values are a collection of values that should match properties.

The record index table will always have the id property available. And the record edit/create forms will never have the id property editable.

Plugins

Plugins can take many forms but the general idea is that they will extend the default behavior of ember-admin. Below is a list to choose from.

Authors

We are very thankful for the many contributors

Versioning

This library follows Semantic Versioning

Want to help?

Please do! We are always looking to improve this gem. Please see our Contribution Guidelines on how to properly submit issues and pull requests.

Legal

DockYard, Inc © 2014

@dockyard

Licensed under the MIT license

More Repositories

1

ember-composable-helpers

Composable helpers for declarative templating in Ember
JavaScript
636
star
2

elixir-mail

Build composable mail messages
Elixir
386
star
3

ember-route-action-helper

Bubble closure actions in routes
JavaScript
330
star
4

ember-in-viewport

Detect if an Ember View or Component is in the viewport @ 60FPS
JavaScript
246
star
5

ember-service-worker

A pluggable approach to Service Workers for Ember.js
JavaScript
238
star
6

flame_on

Flame Graph LiveView Component and LiveDashboard plugin
Elixir
228
star
7

ember-router-scroll

🗔 Scroll to top with preserved browser history scroll position.
JavaScript
204
star
8

ember-async-button

Async Button Component for Ember CLI apps
JavaScript
173
star
9

inquisitor

Composable query builder for Ecto
Elixir
170
star
10

ecto_fixtures

Fixtures for Elixir apps
Elixir
168
star
11

openid_connect

Elixir
66
star
12

eslint-plugin-ember-suave

DockYard's ESLint plugin for Ember apps
JavaScript
53
star
13

courier

Elixir
53
star
14

ember-cart

Shopping cart primitives for Ember
JavaScript
53
star
15

valid_field

Elixir
48
star
16

rein

Reinforcement Learning tooling built with Nx
Elixir
42
star
17

json_api_assert

Composable assertions for JSON API payload
Elixir
38
star
18

live_view_demo

Forkable repo for entries in Phoenix Phrenzy (https://phoenixphrenzy.com/)
Elixir
35
star
19

ember-service-worker-asset-cache

JavaScript
28
star
20

svelte-inline-compile

JavaScript
27
star
21

ember-cli-custom-assertions

Add custom QUnit assertions to your ember-cli test suite
JavaScript
26
star
22

ember-app-shell

JavaScript
24
star
23

easing

Elixir
22
star
24

design-sprints

HTML
22
star
25

ember-i18n-to-intl-migrator

Migrate ember-i18n to ember-intl
JavaScript
21
star
26

ember-service-worker-index

An Ember Service Worker plugin that caches the index.html file
JavaScript
20
star
27

ember-cli-deploy-compress

Compress your assets automatically choosing the best compression available for your browser targets
JavaScript
18
star
28

laptop-install

Shell
17
star
29

narwin-pack

Package of PostCSS plugins DockYard utilizes for PostCSS based projects!
JavaScript
16
star
30

ember-maybe-in-element

Conditionally render content elsewhere using #-in-element on ember apps
JavaScript
15
star
31

ember-service-worker-cache-fallback

JavaScript
15
star
32

inquisitor_jsonapi

JSON API Matchers for Inquisitor
Elixir
14
star
33

ember-one-way-select

JavaScript
10
star
34

svelte-inline-component

Utility and vite plugin to allow to create your own inline svelte components in tests
JavaScript
9
star
35

live_view_events

A simple library to unify sending and receiving messages in LiveView components
JavaScript
8
star
36

disklavier

Elixir
8
star
37

canon

All the must-read articles and must-watch videos for the DockYard engineering team.
8
star
38

plausible_proxy

An Elixir Plug to proxy calls to Plausible through your server
Elixir
7
star
39

netcdf

Elixir NetCDF Bindings
Rust
7
star
40

ember-service-worker-cache-first

JavaScript
7
star
41

qunit-notifications

Web Notifications support for QUnit in-browser test suites
JavaScript
6
star
42

auth_test_support

Authentication and authorization test functions
Elixir
4
star
43

broccoli-json-concat

JavaScript
3
star
44

boat-tracker

Elixir
3
star
45

ember-load-css

Ember CLI wrapper for loadCSS
JavaScript
3
star
46

drive-in-privacy-policy

2
star
47

boston_elixir

LiveView Native Workshop for Boston Elixir
Elixir
2
star
48

ketch

Simple proof-of-concept web application built with Next.js, Storybook, and Firebase.
JavaScript
1
star
49

courier_web

JavaScript
1
star
50

stylelint-config-narwin

DockYard stylelint configuration
JavaScript
1
star
51

liveview_tailwind_demo

Demo showing TailWind 3 integration in a Phoenix LiveView project
Elixir
1
star
52

ember-qunit-notifications

tomster-ified qunit-notifications
1
star
53

formation

Example of Phoenix LiveView Form logic
Elixir
1
star