ml-archive / admin-panel-provider

Build easy customizable admin features for your app ✍️
MIT License
52 stars 7 forks source link

How do I use this package? #36

Closed MrMage closed 6 years ago

MrMage commented 6 years ago

Sorry, these might be really basic questions, but it seems like the documentation on this package is very thin. On the other hand, I could imagine many other people trying to get started with this package would have similar questions, so it might be useful to answer these in a convenient-to-access place — possibly in a proper "Getting Started" tutorial. (The current "Getting started" section does not cover any of these questions; it essentially stops after installing the package but does not cover using it.)

Please note that I already have some experience building a Fluent+Vapor-based API, but little experience serving HTML pages using Leaf.

Here are the questions:

  1. Is this supposed to be just another dependency on my Vapor-based web app that adds e.g. an "/admin/" path, or will this run a separate standalone HTTP server on a different port? (The *Routes.swift files indicate the former, but I am not entirely sure.)
  2. If the first case is true, how am I supposed to add extra routes (e.g. to show a table of all entities of a specific type) to my admin panel? Is there an example of adding such a route/displaying such a table somewhere? How could I add the route to show up as an item in the panel's navigation menu?
  3. Similarly, how can I ensure that the panel's UI chrome (e.g. the navigation bar) is displayed on these custom tables, so that it fits in with the rest of the panel? In general, how would I supposed to render such a table?
  4. The documentation says "It's highly recommended that you add the CORS middleware to your project.". Why? What does CORS enable in this case?

I would really appreciate some guidance on these questions. Thanks!

joscdk commented 6 years ago

Just to quickly answer your questions.

  1. Yes the idea is to just add it to your project, adding /admin route :)

  2. The way i do, is i create routes in my own App folder, in a routes file, linking to my own controller. So that have not much to do with the admin panel, aside from Middleware :) .. (I have attached an example)

  3. I have attached an example

Example Routes

let controller = MyController(view)

let admin = builder.grouped("admin").grouped(AdminPanelProvider.Middlewares.secured)
admin.get("test", handler: controller.index)

then you can access /admin/test

Example View

#extend("AdminPanel/Layout/page")

#export("nav-top") {

}

#export("breadcrumb") {
    <li class="active">My page</li>
}

#export("content-header") {
    <h1>My page</h1>
}

#export("content") {
    <div class="row">
        <div class="col-sm-12">
            #box:open("My list", "default")
            #box:body() {
                <div class="col-md-12">
                #table("Foo", "Bar") {
                    #table:rows(foobar.data, "row") {
                        <td>#(row.foo)</td>
                        <td>#(row.bar)</td>
                    }
                </div>
                }
            }
            #box:footer() {
                #paginator(foobar)
            }
            #box:close()
        </div>
    </div>
}

Hope this helps :) .. You can see more view examples if you look in the package :)

MrMage commented 6 years ago

Thank you! I did not expect a response before the holidays, and it actually came before lunch ^^

This has helped me tremendously — I was able to string together a nice-looking and well-working entity viewer (at least for some entities) over the course of the afternoon. Really happy with how this turned out, good job! Now, I'm just hoping for removal of the MySQL dependency ;-) (#35)

joscdk commented 6 years ago

Glad it worked out :)

I am sure some one from Nodes will look into if that is possible at some point .. (I have nothing official to do with the package :) .. I am just a user of it )