phx_in_place v0.1.1 PhxInPlace View Source

The PhxInPlace module provides helper functions for generating inline editable fields that make use of Phoenix.Channels to automatically update to the database when values are changed.

Link to this section Summary

Functions

Generate a custom input tag that supports inline editing via phoenix channels

Similar to phx_in_place/3 method but adds an if condition as the first parameters

Link to this section Functions

Link to this function phx_in_place(source, field, opts \\ []) View Source

Generate a custom input tag that supports inline editing via phoenix channels.

## Examples

  <%= phx_in_place @product, :category %>

generate the following output:

  <input class="pip-input" hash="<<hashed value here>>" name="category" value="251.00" style="background: initial;">

The hashed value is a signed token genered using the Phoenix.Token module. As such it is signed so it can be validated but not encrypted.

Parameters:

  • source (struct) - The record to be displayed and edited

  • field (atom) - The name of the field to be edited

    Options:

  • classes: [] - takes a list of custom classes to add to the element

  • type: :type - to come. support for form types other than text_input

  • display_as: :atom - to come - will support custom formatting of the input

  • field value (eg - number_to_currency, etc)

Link to this function phx_in_place_if(condition, source, field, opts \\ []) View Source

Similar to phx_in_place/3 method but adds an if condition as the first parameters.

Generates a phx_in_place content tag if condition is true or a non-editable span tag if false. Useful for handling authorization and user permissions.

Example

  <%= PhxInPlace.phx_in_place_if condition, @product, :name, class: "test-class" %>

if condition is true, returns:

  <input class="pip-input test-class" data-struct="Elixir.SitelinePhoenix.Suppliers.Product" id="1855" name="name" value="Test 1-53" style="background: initial;">

if condition is false, returns:

  <span class="pip-input test-class" value="value">value</span