Set of macros for building Phoenix.LiveView modules to help manage database records.
This is done by configuring default implementation of LiveUI for a given Ecto.Schema struct and
initializing basic Index and Show live modules. This will in turn build the infrastructure for displaying
and processing data without need to write boilerplate code associated with m:Phoenix.LiveView#callbacks callbacks and HEEX templates.
LiveUI has the following features:
- autogenerated views for CRUD operations
- basic protocol implementation with sensible defaults
- sortable tables with pagination
- advanced search form
- format values with css, functions and components
- handles ownership to current user
- handles relations
- handles file uploads
- support to override functions for data processing
- support to override live view callbacks
- custom actions for operations on single and multiple records
- audit with record versioning
- dark and light mode
- debug mode that displays socket assigns
LiveUI is possible because of these libraries:
CldrEctoFakerFlopLiveInspectLiveSelectPaperTrailPetalComponentsPhoenix
-
add entry to
contentlist inassets/tailwind.config.js-../lib/live_ui/**/*.*ex -
add line to
assets/css/app.css-@import '../../../live_ui/lib/live_ui/assets/default.css' -
modify
root.html.heextemplate -<body class="bg-amber-50 dark:bg-gray-900 antialiased"> -
add
js-cookietojs/vendorfor theme switcher - https://github.com/js-cookie/js-cookie -
add theme switcher hook to
assets/js/app.jsconst ColorSchemeHook = { deadViewCompatible: true, mounted() { this.init() }, updated() { this.init() }, init() { initScheme() this.el.addEventListener("click", window.toggleScheme) }, }
-
add switcher code to head in
root.html.heex-<LiveUI.Components.Core.color_scheme_switch_js /> -
add switcher icon to body in
root.html.heex-<LiveUI.Components.Core.color_scheme_switch />
Add Cldr module:
defmodule MyApp.Cldr do
use Cldr,
default_locale: "en",
otp_app: :my_app,
providers: [Cldr.Number, Money, Cldr.Calendar, Cldr.DateTime],
gettext: MyAppWeb.Gettext
endAdd hook to assets/js/app.js - https://hexdocs.pm/live_select/readme.html#javascript-hooks
Instalation guide - https://petal.build/components#install_petal_components
# live ui
config :live_ui,
debug: true,
repo: MyApp.Repo,
cldr: MyApp.Cldr,
ignored_fields: [:token, :hashed_password, :first_version_id, :current_version_id]
# petal components
config :petal_components, :error_translator_function, {MyAppWeb.CoreComponents, :translate_error}
# flop
config :flop, repo: MyApp.Repo, default_limit: 10, max_limit: 100
# cldr
config :ex_cldr, default_backend: LiveUI.Cldr
config :my_app, LiveUI.Cldr, locales: ["en"]
# paper trail (optional)
config :paper_trail,
repo: MyApp.Repo,
originator: [name: :user, model: MyApp.User],
strict_mode: trueThere is a sample aplication bundled with the project that has all these set up, just run
mix ecto.setup to generate some random data and start the server with iex -S mix phx.server.
Admin credentials are admin@example.com/password.
Ecto schema:
defmodule MyApp.User do
use Ecto.Schema
schema "users" do
field :name, :string
field :email, :string
timestamps()
end
endRouter entry:
scope "/", MyAppWeb do
live_ui("/users", UserLive, MyApp.User)
endProtocol file:
defimpl LiveUI, for: MyApp.User do
use LiveUI.Protocol
endLive modules:
defmodule MyAppWeb.UserLive.Index do
use LiveUI.Views.Index, for: MyApp.User
end
defmodule MyAppWeb.UserLive.Show do
use LiveUI.Views.Show, for: MyApp.User
end