LoopOS UI v1.1.26.2

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<turbo-frame id="test_turbo_id" class="">
  <div class="flex flex-row gap-2xs">
    <div class="flex flex-col items-start w-full gap-2">
      <div data-scripts-target="scripts" data-controller="scripts form-submit" class="flex justify-between w-full items-center gap-[8px]">
        <div>
          <div class="flex flex-row gap-2xs">
            <p class="text-xs font-normal text-gray-darkest">Settings</p>
          </div>
        </div>
        <div
  data-controller="action-menu"
  data-action="modal:open@window->action-menu#disableTippy modal:close@window->action-menu#enableTippy"
          class="lui-action-menu">
          <div data-action-menu-target="trigger">
            <button class="lui-button lui-button--neutral--secondary lui-button--size-small w-fit w-fit" data-controller="lui--button">
              <span class="lui-button__text" data-lui--button-target="text">
                Script File
              </span>
              <i class="lui-button__icon lui-button__icon--small fa-regular fa-chevron-down"></i>
            </button>
          </div>
          <div data-action-menu-target="menu" class="hidden lui-action-menu__wrapper" data-controller="modal form-submit pubsub">
            <div class="lui-action-menu__options" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
              <div class="lui-action-menu__option cursor-pointer" data-action="click->scripts#triggerFileInput">
                <div class="lui-action-menu__option-text cursor-pointer">
                  <i class="fa-regular fa-upload"></i>
                  <span>Upload</span>
                </div>
              </div>
              <div class="lui-action-menu__option " >
                <div class="lui-action-menu__option-text cursor-default">
                  <i class="fa-regular fa-download"></i>
                  <span>Download</span>
                </div>
              </div>
              <div class="lui-action-menu__option cursor-pointer" data-action="click->form-submit#submitForm" data-form-id="delete_script_form">
                <div class="lui-action-menu__option-text cursor-pointer">
                  <i class="fa-regular fa-trash"></i>
                  <span>Delete</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="hidden">
          <form data-target="scripts.uploadForm" data-turbo-frame="tabs-container" enctype="multipart/form-data" action="" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="Yhjx2cA2-TAVG4zt1Ms9LjPzyCGGqK28IisSycm2o0dlKFEfl3TJlfk7HnmnlD-2Iw5HSpEuFXKM13VTvaI3MA" autocomplete="off" />
            <input type="hidden" name="turbo_frame" id="turbo_frame" value="tabs-container" autocomplete="off" />
            <div class="form-group hidden">
              <label for="file">Upload Code</label>
              <input type="file" name="file" id="upload-file-id" class="form-control" data-target="scripts.fileInput" data-action="change->scripts#handleFileChange" />
            </div>
            <div class="form-group hidden">
              <input type="submit" name="commit" value="Upload" class="btn" data-target="scripts.uploadClick" data-disable-with="Upload" />
            </div>
          </form>
          <a class="hidden" data-target="scripts.downloadLink" data-turbo="false" href="/">Download Script File</a>
          <form id="delete_script_form" class="hidden" data-form-submit-target="form" data-turbo-frame="tabs-container" action="" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="_tMBV-AzKN9rJiN7VR266zTkuELWRqo-8CR1h9NrrXzriIzlAN3gF0RZhGEqkq_XqqgDY5vO2cCgF9RT2nySXQ" autocomplete="off" />
            <input type="hidden" name="turbo_stream_partial" id="turbo_stream_partial" value="upload_code" autocomplete="off" />
            <input type="hidden" name="turbo_frame" id="turbo_frame" value="tabs-container" autocomplete="off" />
            <input type="hidden" name="custom_code" id="custom_code" autocomplete="off" />
            <input type="submit" name="commit" value="Translation missing: en.script_builder.remove_code" class="btn" data-target="scripts.deleteFile" data-disable-with="Translation missing: en.script_builder.remove_code" />
          </form>
        </div>
      </div>
      <turbo-frame class="w-full" id="editor_test_turbo_id">
        <div data-react-class="Editor" data-react-props="{"mode":"ruby","name":"custom_code","storedValue":"\"# @param context: a hash containing any context information that might be required for this decision block.\\n# Usually the `item_id` is passed here.\\n# @return [nil, string]: the token to be used in the next block\\n\\ndef decide(context)\\n  # Context should have item_id\\n  item = Item.find_by(id: context[:item_id]) if context[:item_id].present?\\n  return nil if item.nil?\\n  item.forward_item_id.present? ? :forward_item : default_output_token\\nend\\n  \\ndef output_tokens\\n  [:forward_item, :without_forward_item]\\nend\\n  \\ndef default_output_token\\n  :without_forward_item\\nend\"","readOnly":false,"className":"ruby-editor"}" data-react-cache-id="Editor-0" style="width:100%"></div>
      </turbo-frame>    </div>
  </div>
</turbo-frame>

Code Editor

The Code Editor component is a specialized text editor for code within a user interface. It’s commonly used in development environments, configuration panels, or any interface where users need to edit code, scripts, or configuration files directly.

Used Components Components where is Used
Scripts Gem

Usage rules

  • ✅ Do
    • Use in environments where users need to write or modify code directly
  • ❌ Don't
    • Don’t use if users only need basic text input or settings fields
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<% 
  script = OpenStruct.new(
    id: 18,
    name: "Forward Trade-In Email template decision script",
    created_at: "2024-03-06 00:06:09.592017000 +0000",
    updated_at: "2024-03-06 00:06:09.599611000 +0000",
    input_fields: [],
    kind: "decision_block",
    isolated: false,
    description: nil,
    cron_notation: nil,
    disabled: false,
    settings_schema: {},
    favourite: false,
    last_run_date: nil
  )
  new_edit_params = params[:new_edit_params] || {
    element: script,
    form_url: "",
    submitable: true,
    show_path: "",
    edit_path: "?edit_mode=true",
    show_edit_button: params[:show_edit_button] || false,
  }
  default_value = "# @param context: a hash containing any context information that might be required for this decision block.
# Usually the `item_id` is passed here.
# @return [nil, string]: the token to be used in the next block
def decide(context)
  # Context should have item_id
  item = Item.find_by(id: context[:item_id]) if context[:item_id].present?
  return nil if item.nil?
  item.forward_item_id.present? ? :forward_item : default_output_token
end
  
def output_tokens
  [:forward_item, :without_forward_item]
end
  
def default_output_token
  :without_forward_item
end"
%>
<%= render LooposUi::CodeEditor.new(
  type: "ruby",
  title: "Settings",
  can_upload_code: true,
  loop_os_script: script,
  attribute: "custom_code",
  turbo_id: "test_turbo_id",
  default_value: default_value.to_json,
  read_only: params[:read_only] || false,
  upload_url: "",
  delete_url: "",
  new_edit_params: new_edit_params)
%>

No notes provided.

Param Description Input

Deny changes.

Show Edit button

Code Editor

The Code Editor component is a specialized text editor for code within a user interface. It’s commonly used in development environments, configuration panels, or any interface where users need to edit code, scripts, or configuration files directly.

Arguments

Property Default Description
type `` Language for editor [:ruby, :json]
can_upload_code false Makes header buttons appear
loop_os_script `` LoopOs::Scripts object
download_url `` Url to download script
attribute `` Name of the attribute
title "" Title for the editor
turbo_id `` Some turbo_id (WIP: can't find usage but was passed)
default_value `` Value that goes inside the editor
read_only true Enables or disables edition
upload_url `` Url to upload
delete_url `` Url to delete
app `` App kind ["core", "manager", "hubs"]
new_edit_params `` Hash with this keys: [:element, :formurl, :submitable, :showpath, :editpath, :showedit_button] and values for those keys