@raketa-cloud/admin 1.7.4 → 1.7.6

package/src/views/events/index.ejs

@@ -139,6 +139,42 @@
       <input type="text" name="f:keyword" value="<%= _context.query["f:keyword"] %>" />
     </div>
 
+    <div class="mb-4">
+      <label for="widget" class="font-semibold hover:cursor-pointer body-3">Widget</label>
+      <input type="text" name="f:widget" value="<%= _context.query["f:widget"] %>" />
+    </div>
+
+    <div class="mb-4">
+      <label for="widget_keyword" class="font-semibold hover:cursor-pointer body-3">Widget text keyword</label>
+      <input type="text" name="f:widget_keyword" value="<%= _context.query["f:widget_keyword"] %>" />
+    </div>
+
+    <div class="mb-4">
+        <label for="last_updated_from" class="font-semibold hover:cursor-pointer body-3">Last Updated from</label>
+        <input type="datetime-local" name="f:last_updated_from" value="<%= _context.query["f:last_updated_from"] %>" />
+    </div>
+
+    <div class="mb-4">
+        <label for="last_updated_to" class="font-semibold hover:cursor-pointer body-3">Last Updated to</label>
+        <input type="datetime-local" name="f:last_updated_to" value="<%= _context.query["f:last_updated_to"] %>" />
+    </div>
+
+    <div class="mb-4">
+      <label for="" class="font-semibold hover:cursor-pointer body-3">Translations</label>
+      <div class="checkbox-group mb-4">
+        <% translations.filter(item => item.code !== _context.locale).forEach((item,idx)=> { %>
+        <div class="flex items-center gap-1">
+          <% if (utils.includedInCollection(item.code, _context.query["f:translations"])) { %>
+              <input type="checkbox" name="f:translations" id='locale-<%= item.code %>' checked value="<%= item.code %>" class="hover:cursor-pointer">
+          <% } else { %>
+          <input type="checkbox" name="f:translations" id='locale-<%= item.code %>' value="<%= item.code %>" class="hover:cursor-pointer">
+          <% } %>
+          <label for='locale-<%= item.code %>' class="body-2 hover:cursor-pointer"><%= item.name %></label>
+        </div>
+        <% }); %>
+      </div>
+    </div>
+
     <div class="mb-4">
       <label for="" class="font-semibold hover:cursor-pointer body-3">Tags</label>
       <div class="checkbox-group mb-4">
@@ -157,8 +193,8 @@
 
     <div class="btn-toolbar">
       <button type="submit" class="btn-primary">Search</button>
+      <%- include('./_shared/_export_button.ejs') %>
       <a href="<%= `/${_context.locale}/${_context.resourceConfig.eventTypePlural}` %>" class="btn-text">Clear search</a>
     </div>
   </form>
 </div>
-

package/src/views/layouts/application.ejs

@@ -227,6 +227,8 @@
 
       // Setup datetime inputs
       document.querySelectorAll('input[type="datetime-local"]').forEach(input => {
+        if (input.dataset.noHints === 'true') return;
+
         enhanceDateTimeInputs(input);
 
         input.addEventListener("change", (event) => enhanceDateTimeInputs(event.target))

package/src/views/pages/_shared/_export_button.ejs

@@ -0,0 +1,9 @@
+<% if (Object.keys(_context.query).some(k => k.startsWith('f:')) && items.list.length > 0) { %>
+<%
+  const queryString = Object.entries(_context.query)
+    .filter(([key, value]) => value !== undefined && value !== null && value !== '')
+    .map(([key, value]) => Array.isArray(value) ? value.map(v => `${key}=${encodeURIComponent(v)}`).join('&') : `${key}=${encodeURIComponent(value)}`)
+    .join('&');
+%>
+<a href="<%= `/${_context.locale}/${_context.resourceConfig.pageTypePlural}/exports${queryString ? '?' + queryString : ''}` %>" class="btn-secondary">Export</a>
+<% } %>

package/src/views/pages/index.ejs

@@ -134,6 +134,42 @@
       <input type="text" name="f:keyword" value="<%= _context.query["f:keyword"] %>" />
     </div>
 
+    <div class="mb-4">
+      <label for="widget" class="font-semibold hover:cursor-pointer body-3">Widget</label>
+      <input type="text" name="f:widget" value="<%= _context.query["f:widget"] %>" />
+    </div>
+
+    <div class="mb-4">
+      <label for="widget_keyword" class="font-semibold hover:cursor-pointer body-3">Widget text keyword</label>
+      <input type="text" name="f:widget_keyword" value="<%= _context.query["f:widget_keyword"] %>" />
+    </div>
+
+    <div class="mb-4">
+        <label for="last_updated_from" class="font-semibold hover:cursor-pointer body-3">Last Updated from</label>
+        <input type="datetime-local" name="f:last_updated_from" value="<%= _context.query["f:last_updated_from"] %>" />
+    </div>
+
+    <div class="mb-4">
+        <label for="last_updated_to" class="font-semibold hover:cursor-pointer body-3">Last Updated to</label>
+        <input type="datetime-local" name="f:last_updated_to" value="<%= _context.query["f:last_updated_to"] %>" />
+    </div>
+
+    <div class="mb-4">
+      <label for="" class="font-semibold hover:cursor-pointer body-3">Translations</label>
+      <div class="checkbox-group mb-4">
+        <% translations.filter(item => item.code !== _context.locale).forEach((item,idx)=> { %>
+        <div class="flex items-center gap-1">
+          <% if (utils.includedInCollection(item.code, _context.query["f:translations"])) { %>
+              <input type="checkbox" name="f:translations" id='locale-<%= item.code %>' checked value="<%= item.code %>" class="hover:cursor-pointer">
+          <% } else { %>
+          <input type="checkbox" name="f:translations" id='locale-<%= item.code %>' value="<%= item.code %>" class="hover:cursor-pointer">
+          <% } %>
+          <label for='locale-<%= item.code %>' class="body-2 hover:cursor-pointer"><%= item.name %></label>
+        </div>
+        <% }); %>
+      </div>
+    </div>
+
     <div class="mb-4">
       <label for="" class="font-semibold hover:cursor-pointer body-3">Tags</label>
       <div class="checkbox-group mb-4">
@@ -152,8 +188,8 @@
 
     <div class="btn-toolbar">
       <button type="submit" class="btn-primary">Search</button>
+      <%- include('./_shared/_export_button.ejs') %>
       <a href="<%= `/${_context.locale}/${_context.resourceConfig.pageTypePlural}` %>" class="btn-text">Clear search</a>
     </div>
   </form>
 </div>
-

package/src/views/settings/_nav.ejs

@@ -17,6 +17,12 @@
           Layout and Navigation
         </a>
       </div>
+
+      <div class="<%= active === 'variables' ? activeClass : inactiveClass %>">
+        <a href="<%= `/${_context.locale}/settings/variables/edit` %>" class="text-raketa-primary font-semibold">
+          Variables
+        </a>
+      </div>
     </div>
   </div>
-</div>
+</div>

package/src/views/settings/variables/edit_form.ejs

@@ -0,0 +1,178 @@
+<div class="page-wrapper">
+  <div class="page-title">
+    <h1 class="heading-1">Global Variables</h1>
+  </div>
+
+  <%- render_partial('../_nav.ejs', { active: 'variables' }) %>
+
+  <% form_for({ resource }, errors, (f) => { %>
+  <form action="<%= `/${_context.locale}/settings/variables` %>" method="post" class="form" onsubmit="filterEmptyVariables()">
+
+    <div class="form-actions mb-6">
+      <div class="btn-toolbar">
+        <%- f.submit('Save', { class: 'btn-primary' }) %>
+      </div>
+    </div>
+
+    <div class="flex gap-4">
+      <div class="flex-1">
+        <div class="mb-6">
+          <table class="data-grid w-full">
+            <thead>
+              <tr>
+                <th>Variable</th>
+                <th>Value</th>
+                <th class="actions"></th>
+              </tr>
+            </thead>
+            <tbody id="variables-tbody">
+            </tbody>
+          </table>
+
+          <div class="p-4">
+            <button type="button" class="btn-text" onclick="addVariable()">
+              Add new variable
+            </button>
+          </div>
+        </div>
+
+        <div class="form-actions">
+          <%- f.submit('Save', { class: 'btn-primary' }) %>
+        </div>
+      </div>
+
+      <div class="w-80">
+        <div class="help">
+          <h3 class="heading-3 mb-3">How to use the global variables?</h3>
+
+          <p class="body-2 mb-4">The variables are intended for short texts, their values can be only 30 characters long.</p>
+
+          <p class="body-2">Use them in page settings or widgets like this {{VARIABLE_NAME}}</p>
+
+        </div>
+      </div>
+    </div>
+
+  </form>
+  <% }) %>
+</div>
+
+<script>
+  let variables = <%- JSON.stringify(resource._global_variables || {}) %>;
+
+  function render() {
+    const tbody = document.getElementById('variables-tbody');
+    const entries = Object.entries(variables);
+
+    tbody.innerHTML = entries.map(([name, value]) => `
+      <tr class="variable-row">
+        <td class="w-1/2">
+            <input type="text"
+                   data-key="${escapeHtml(name)}"
+                   value="${escapeHtml(name)}"
+                   placeholder="VARIABLE_NAME"
+                   maxlength="30"
+                   pattern="[A-Z_][A-Z0-9_]*"
+                   title="Only uppercase letters, numbers and underscore are allowed"
+                   class="border border-neutral-300 rounded px-3 py-2 shadow-inner w-full"
+                   onchange="renameVariable('${escapeHtml(name)}', this.value)">
+        </td>
+        <td class="w-1/2">
+            <input type="text"
+                   value="${escapeHtml(value)}"
+                   placeholder="Value"
+                   maxlength="30"
+                   class="border border-neutral-300 rounded px-3 py-2 shadow-inner w-full"
+                   oninput="updateValue('${escapeHtml(name)}', this.value)">
+        </td>
+        <td class="actions">
+          <button type="button" class="btn-danger btn-sm" onclick="removeVariable('${escapeHtml(name)}')">
+            Delete
+          </button>
+        </td>
+      </tr>
+    `).join('');
+  }
+
+  function updateValue(key, value) {
+    variables[key] = value;
+  }
+
+  function renameVariable(oldKey, newKey) {
+    newKey = newKey.trim();
+
+    if (!newKey) {
+      alert('Variable name cannot be empty');
+      render();
+      return;
+    }
+
+    if (oldKey === newKey) return;
+
+    if (variables[newKey] !== undefined) {
+      alert('Variable name already exists');
+      render();
+      return;
+    }
+
+    variables[newKey] = variables[oldKey];
+    delete variables[oldKey];
+    render();
+  }
+
+  function addVariable() {
+    let counter = 1;
+    let newKey = 'NEW_VAR';
+
+    while (variables[newKey] !== undefined) {
+      newKey = `NEW_VAR_${counter}`;
+      counter++;
+    }
+
+    variables[newKey] = '';
+    render();
+
+    const inputs = document.querySelectorAll(`input[data-key="${newKey}"]`);
+    if (inputs.length > 0) {
+      const row = inputs[0].closest('tr');
+      const valueInput = row.querySelector('input[placeholder="Value"]');
+      if (valueInput) {
+        valueInput.focus();
+      }
+    }
+  }
+
+  function removeVariable(key) {
+    delete variables[key];
+    render();
+  }
+
+  function filterEmptyVariables() {
+    for (const key in variables) {
+      if (!key.trim() || !variables[key].trim()) {
+        delete variables[key];
+      }
+    }
+
+    const form = document.querySelector('form');
+
+    form.querySelectorAll('input[name^="resource[_global_variables]"]').forEach(el => el.remove());
+
+    for (const [key, value] of Object.entries(variables)) {
+      const input = document.createElement('input');
+      input.type = 'hidden';
+      input.name = `resource[_global_variables][${key}]`;
+      input.value = value;
+      form.appendChild(input);
+    }
+  }
+
+  function escapeHtml(text) {
+    if (!text) return '';
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+  }
+
+  render();
+</script>