components refactor

oarepo_ui/cli.py

@@ -1,4 +1,5 @@
 import json as json_lib
+import os
 import sys
 from pathlib import Path
 
@@ -14,6 +15,22 @@ def ui():
     """UI commands"""
 
 
+@ui.command("components")
+def components():
+    component_data = []
+    script_directory = os.path.dirname(os.path.abspath(__file__ or ""))
+    components_directory = os.path.join(script_directory, "templates", "components")
+
+    file_names = os.listdir(components_directory)
+
+    for file_name in file_names:
+        component_data.append(
+            {"key": file_name.lower(), "component": file_name.replace(".jinja", "")}
+        )
+
+    print(component_data)
+
+
 @ui.command("renderers")
 @click.option("-v", "--verbose", is_flag=True, help="Verbose output")
 @click.option("--json", is_flag=True, help="Format output as json")

oarepo_ui/resources/templating.py

@@ -55,8 +55,3 @@ def jinja_env(self):
 
 def id_filter(x):
     return id(x)
-
-
-def to_dict(value=None):
-    if value:
-        return value

oarepo_ui/templates/components/Multilingual.jinja

@@ -0,0 +1,16 @@
+{# def data #}
+    <div class="ui multilingual-tabs">
+        <div class="ui compact text menu separated">
+            {% for item in data %}
+                <a class="green item {{'active' if loop.first else ''}}" data-tab="{{item|id}}-{{item.lang|e}}">{{item.lang|upper}}</a>
+                {% if not loop.last %}
+                <div class="separator"><div class="vertical-bar"></div></div>
+                {% endif %}
+            {% endfor %}
+        </div>
+        {% for item in data %}
+        <div class="ui tab {{'active' if loop.first else ''}}" data-tab="{{item|id}}-{{item.lang|e}}">
+            {{ item.value|e }}
+        </div>
+        {% endfor %}
+    </div>

oarepo_ui/templates/URL.jinja → oarepo_ui/templates/components/URL.jinja

@@ -1,4 +1,4 @@
-{# def className, data #}
+{# def data, className="" #}
 {% set data_dict = data | to_dict %}
  <a class="ui {{className}}" href="{{data_dict.href | e}}" aria-label="{{data_dict.title}}" title="{{data_dict.title}}">
         <span class="{className} label">