Admin dashboard based on AdonisJs + Adminify (based on vuetify)
Switch branches/tags
Nothing to show
Clone or download
Latest commit e778cc1 Jun 3, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
adminify @ c4fed9d pull submodule Jun 3, 2017
app workflow Jun 2, 2017
bootstrap api Jun 2, 2017
config api Jun 2, 2017
database workflow Jun 2, 2017
providers init Jun 2, 2017
public init Jun 2, 2017
resources api Jun 2, 2017
.editorconfig init Jun 2, 2017
.env.example init Jun 2, 2017
.gitignore api Jun 2, 2017
.gitmodules adminify Jun 2, 2017
README.md disable mock Jun 3, 2017
ace init Jun 2, 2017
package.json api Jun 2, 2017
server.js init Jun 2, 2017

README.md

Adonis Admin (Nodejs + Vue Admin dashboard)

An admin dashboard application based on AdonisJs and Adminify(based on Vuetify), see more at Adonis China. Keywords: NodeJs, VueJs, AdonisJs, ORM, Relation, SQLite, MySQL, Middleware, Restful, CRUD, Material design

Getting Start

Server Side

  1. git clone https://github.com/adonis-china/adonis-admin.git
  2. cd adonis-admin
  3. cp .env.example .env
  4. npm install && npm run serve:dev start the api server
  5. ./ace migration:refresh --seed fill database (use node ace on windows)

Client Side

  1. git submodule update --recursive --remote --init pull submodule
  2. cd adminify
  3. cp src/config.sample.js src/config.js use copy on windows
  4. Change debug.mock to false in src/config.js
  5. npm install && npm run dev start the client
  6. Open http://localhost:8080 (or another port) in your browser.

use cnpm instead npm in china

UI Screenshots

1.png 2.png
3.png 4.png
5.png 6.png
7.png

Wrokflow - Add CRUD for a resource

  • ./ace make:model -m Page, Create Page Model with migration for Pages management.
  • Open /database/migrations/1496388160682_create_page_table.js, add some fields:
    table.increments()
    table.integer('type_id').unsigned().nullable()
    table.foreign('type_id').references('types.id')
    table.string('title').notNullable()
    table.text('body')
    table.timestamps()
  • ./ace migration:run to create table
  • Open /app/Model/Page.js, add a belongsTo relation:
    class Page extends Lucid {
      type () {
        return this.belongsTo('App/Model/Type')
      }
    }
  • Copy /app/Http/Controllers/Admin/Api/EmptyController.js to PageController.js, and change to this:
'use strict'

const RestController = require('./RestController')
const Page = use('App/Model/Page')
const Type = use('App/Model/Type')

class PageController extends RestController {
  get resource() {
    return 'pages'
  }

  get expand() {
    return ['type']
  }


  * gridData() {
    //change the fields
    return {
      options: {
        sort: 'id', //or '-id' as desc
        create: true,
        update: true,
        delete: true
      },
      // filters: false,
      filters: {
        model: {
          title: '',
          created_at: ''
        },
        fields: {
          title: { label: 'Title' },
          created_at: { label: t('fields.Page.created_at'), Page: 'date' }
        },
        rules: {},

      },
      columns: [
        { text: t('fields.Page.id'), value: 'id' },
        { text: t('fields.Page.title'), value: 'title'}
        
      ]
    }
  }

  * formData (request, response) {

    let model = {
      title: '',
      type_id: null,
      body: '',
    }
    let id
    if (request) {
      id = request.input('id')
      if (id) {
        model = yield Page.query().where('id', id).first()
      }
    }

    let typeOptions = yield Type.query().select('id','name').fetch()
    for (let type of typeOptions) {
      type.text = type.name
      type.value = type.id
    }

    return {
      
      model: model,
      fields: {
        title: { label: 'Title', hint: 'Page Title', required: true},
        type_id: {
          label: 'Type', type: 'select', options: typeOptions, required: true,
        },
        body: { label: 'Body', type: 'html' ,required: false},
      },
      rules: model.rules,
      messages: model.messages
    }
  }

  
}

module.exports = PageController
  • add route in /app/Http/routes.js:26
  const resources = ['posts', 'users', 'types', 'comments', 'settings', 'pages']
  • add menu in /adminify/src/menu.js, then you can see it shows in left side menu
{ "href": "/crud/pages", "title": "Pages", "icon": "view_list" },
  • Navigate to http://localhost:8080/#/crud/pages you get a grid list view of all pages.
  • Press plus button to add a page, also you can edit it after added.