Skip to content
ClojureScript UI components for PostgREST
Clojure CSS HTML
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
resources/public Form improvements Aug 10, 2019
src/cljs/postgrest_ui Prefer exact range, support on-fetch-response Sep 18, 2019
videos Use :text-input element in simple search form Aug 10, 2019
.gitignore Add .gitignore Jul 6, 2019
LICENSE Create LICENSE Jul 6, 2019
README.md Add listing example Aug 10, 2019
deps.edn Indentation Aug 10, 2019
dev.cljs.edn Initial commit Jul 6, 2019

README.md

postgrest-ui

postgrest-ui is a library of Reagent components for interfacing with databases using PostGREST.

The focus of this library is to create reusable and customizable components for common UI tasks, like listing views and forms, and provide a wrapper for the HTTP interface via Fetch.

The goal is to keep the components general purpose and allow them to be integrated into any frontend framework. The components can keep their own state, or use customer provided state (with :state and :set-state! keys in options).

Running the example

  1. Set up PostgreSQL
  2. Create dvdrental sample database
  3. Run PostgREST
  4. Start figwheel: clj -m figwheel.main -b dev -r

Rendering styles

The rendering is done indirectly via multimethods. Style can be set as default or passing the :style option to components.

postgrest-ui comes with 2 rendering styles:

  • :default
  • :material

The :default mode outputs regular HTML elements and is customized in CSS (see resources/public/postgrest-ui.css).

The :material mode outputs Material UI components and requires the page include the library.

Components

Listing

Listing component can be used to generate basic listings views. They support selecting a row and adding a drawer component.

Listing automatically includes batching and will load more items when scrolling down.

Below shows an example of listing with simple filters view and drawer with an item view.

Listing using default rendering style: Listing using Material UI rendering style:

Example code:

;; see example.cljs for full example code
(defn listing-view []
  [:div
   [:h3 "Movie listing"]
    [listing/filtered-listing
     {:endpoint endpoint
      :table "film"
      :filters-view (r/partial filters/simple-search-form ["title" "description"])
      :select ["film_id" "title" "description"
               {:table "actor"
                :select ["first_name" "last_name"]}]
      :drawer (fn [item]
                [item-view/item-view
                 {:endpoint endpoint
                  :table "film"
                  :select ["title" "description"
                           {:table "actor"
                            :select ["first_name" "last_name"]}
                           {:table "category"
                            :select ["name"]}
                           {:table "language"
                            :select ["name"]}]}
                 (get item "film_id")])
      :column-widths ["5%" "20%" "45%" "30%"]
      :order-by [["film_id" :asc]]
      :label str
      :batch-size 20}]])

Form

Form component will create an editable input form for a table. The form uses schema information to create suitable inputs based on the column types.

It can also do selection based on foreign key links.

Form using default rendering style: Form using Material UI rendering style:

Example code:

(defn form-header [form-data]
  [:<>
   [:div "FORM HEADER " (pr-str form-data)]
   [:br]])

(defmethod display/label ["film" "language_id"] [_ _] "Language")

(defn form-view []
  [form/form
   {:endpoint endpoint
    :table "film"
    :layout [{:group :general :label "General" :columns ["title" "description" "rating" "length"]}
             {:group :info :label "Language"
              :columns [;; Foreign key reference, show selection from the rows with
                        ;; :option-label column as the label
                        {:column "language_id"
                         :option-label "name"}]}]
    :header-fn form-header}])
You can’t perform that action at this time.