Restboard

[zuck]

Hello Quasarians! 🖖

I'd like to introduce to the community the Restboard project, a new starter kit based on Quasar to boost the creation of admin panels, backoffices, dashboards, etc.

Unlike other "admin templates", Restboard is a full solution to build SPA with an opinionated pattern to handle the interaction with the underlying API(s).

Inspired by react-admin, it basically provides:

• resources: they map API resources and provide a declarative way to tell the UI how it should behave
• data providers: provide a standard abstraction over API communication protocols and technologies
• auth providers: abstract authentication & authorization concepts
• UI toolkit: extend the Quasar toolkit with more enterprise-ready smart components which receive a resource and adjust their visual layout and behavior according to the configuration declared on it

If you want to play with it and give comments or suggestions, please visit:

https://restboard.github.io/

You can easily add Restboard to an existing Quasar project by typing:

quasar ext add restboard

It is already used in production on a couple of projects and currently in public beta. My goal is to reach the v1.0.0 after receiveing more feedback by the community. 💪

Thank you all and have fun with the awesome Quasar Framework! ❤️

[zuck]

For those interested in this application booster, this is a quick example of how to integrate an existing API to fetch the list of tasks for a user:

src/resources/users.js

import { createResource } from "rb-core-module";
import { dataProvider } from "../providers";

export default createResource({
  name: "users",
  provider: dataProvider,
  displayAttr: "name",
  key: "id",
  ui: {
    columns: [
       {
          name: "id"
       },
       {
          name: "email"
       },
       {
          name: "name"
       },
    ]
  }
})

src/resources/tasks.js

import { createResource } from "rb-core-module";
import { dataProvider } from "../providers";

export default createResource({
  name: "tasks",
  provider: dataProvider,
  displayAttr: "title",
  key: "code",
  ui: {
    columns: [
       {
          name: "code"
       },
       {
          name: "title"
       },
       {
          name: "description"
       },
    ]
  }
})

src/pages/TaskList.vue

<template>
  <q-page>
      <rb-resource-collection :resource="resource" v-slot="props">
          <rb-data-table
            class="full-width"
            :title="props.resource.label"
            :columns="props.resource.ui.columns"
            :row-key="props.resource.key"
            :rows="props.items"
            :actions="props.resource.getActions()"
            :pagination="props.pagination"
          />
      </rb-resource-collection>
  </q-page>
</template>

<script>
import { defineComponent } from "vue";

export default defineComponent({
  name: "TaskList",

  computed: {
     resource () {
        // This will tell the resource collection component to fetch data from GET /users/:userId/tasks
        return this.$rb.users.getRelation(this.$route.query.userId, this.$rb.tasks)
    }
  }
});
</script>

Feedback is always welcome!

[zuck]

I created a "getting started" tutorial that you find here:
https://restboard.github.io/tutorial/