LoopOS UI v1.1.48.1

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="contents" data-controller="lui--identifier-editor" data-lui--identifier-editor-selected-container-id-value="identifier-editor-selected-container-Item-1084">
  <div id="association-overlay-96d7e1ebc1a36dd121ff" class="lui-association-overlay">
    <div class="lui-association-overlay__header">
      Identifiers
    </div>
    <div class="lui-association-overlay__divider"></div>
    <div class="lui-association-overlay__selected_list">
      <div class="flex items-center gap-2 flex-wrap" id="identifier-editor-selected-container-Item-1084" data-controller="drag">
      </div>
    </div>
    <div class="lui-association-overlay__divider"></div>
    <div class="lui-association-overlay__results overflow-scroll" data-model-association-overlay-target="resultsContainer">
      <div class="hidden lui-association-overlay__empty-search" data-model-association-overlay-target="emptySearch">No results found</div>
    </div>
  </div>
</div>

PageSection::IdentifierEditor

A compact editor used to attach identifiers (like external IDs, SKUs or barcodes) to one or more records. It is typically used inside tables or detail pages where the user needs to quickly add or review identifiers.

Used Components Components where is Used
AssociationOverlay, EntityToken, Button, Table Items table, detail pages

Usage rules

✅ Do

  • Use inside table action bars when the user needs to add identifiers to a selection of rows.
    Example: in the Items table, use it in with_action_bar passing input_name: PageSection::IdentifierEditor.identifiable_input_name.
  • Provide a valid source (LooposUi::PageSources::CoreSource) so the component can load available identifier kinds from the API.
  • Pass identifiable_type when working in batch mode (multiple items selected in a table) so the controller can build the correct payload.

❌ Don't

  • Don't render the component without either identifiable or identifiable_type – it will raise at initialization time.
  • Don't use this component to manage unique identifiers that must exist only once in the system; it is designed to work with non-unique kinds.
1
2
3
4
<%= render LooposUi::PageSection::IdentifierEditor.new(
  source: source,
  identifiable: identifiable,
) %>

No notes provided.

No params configured.

Description

The PageSection::IdentifierEditor component provides an interface to create and attach identifiers (e.g. external IDs, SKUs, barcodes) to domain entities. It is designed to be embedded in tables or detail pages and to work together with the identifiers API exposed by LooposUi::PageSources::Models::Identifiers.

Arguments

Property Default Required Description
source - ✅ Instance of LooposUi::PageSources::CoreSource used to load available kinds and to create identifiers
identifiable nil ⛔️* Optional identifiable record. Accepts an ActiveRecord model or a Hash and is coerced into an Identifiable.
identifiable_type nil ⛔️* String with the class name of the identifiable (e.g. "Item"). Required when identifiable is not provided.
title (i18n) ⛔️ Title shown in the overlay header. Defaults to the component translation default_title (e.g. "Identifiers" in EN).

* Either identifiable or identifiable_type must be present. If both are missing, initialization will raise an error.

Helper methods

  • PageSection::IdentifierEditor.identifiable_input_name
    Returns the name to be used in checkboxes when selecting multiple identifiables in a table: identifier[identifiable_ids][].

Behaviour

  • Fetches the list of non-unique identifier kinds from source.identifiers.non_unique_kinds.
  • Renders one result block per kind and allows the user to select a value for that kind.
  • When a new identifier is created, the Turbo Stream response will:
    • Replace the results frame for the selected kind.
    • Append the new selected identifier token to the selected container.

Slots

This is a page section component that internally composes other components (such as AssociationOverlay and EntityToken). It does not expose public slots; it is meant to be rendered as a self-contained block inside higher-level layouts (for example, inside a Table action bar).

JS Events

The editor works together with the lui--identifier-editor Stimulus controller and Turbo Streams. It does not expose custom public browser events; instead, all updates happen through Turbo Stream responses from IdentifierEditorController#create.