@raketa-cloud/admin 1.10.4 → 1.10.6

package/src/views/resources/partial-translations/create_form.ejs

@@ -0,0 +1,72 @@
+<div class="page-wrapper">
+  <div class="page-title flex flex-col items-start">
+    <h1 class="heading-1">
+      <span class="opacity-50">Partially translate / </span><%= resource.title %>
+    </h1>
+  </div>
+
+  <% const targetTranslations = Object.entries(resource.translations || {}).filter(([locale, translation]) => locale !== _context.locale && translation?.id); %>
+  <div class="grid gap-4 md:grid-cols-3">
+    <form action="<%= `/${_context.locale}/${_context.resourceConfig.resourceTypePlural}/${resource.id}/partial-translations?widget_ids=${encodeURIComponent(partialTranslation.widgetIds.join(','))}` %>" method="post" class="form">
+      <div class="mb-4">
+        <h6>Current translations</h6>
+        <div class="checkbox-group !max-h-fit">
+          <% targetTranslations.forEach(([locale]) => { %>
+          <label>
+            <input type="checkbox" name="partial_translation[locales][]" value="<%= locale %>" <%= partialTranslation.locales.includes(locale) ? 'checked' : '' %>>
+            <%= _context.locales[locale]?.name || locale %>
+          </label>
+          <% }) %>
+        </div>
+        <% if (targetTranslations.length === 0) { %>
+        <p class="text-sm text-raketa-foreground/50">This resource has no translations.</p>
+        <% } %>
+      </div>
+
+      <div class="mb-4">
+        <label for="workflow" class="font-semibold body-3">Translation workflow</label>
+        <select name="partial_translation[workflow][type]" id="workflow" required>
+          <option value="">Select workflow</option>
+          <% ['LOKALISE_TT_AI_RT_HUM', 'LOKALISE_TT_HUM', 'LOKALISE_TT_AI'].forEach(workflow => { %>
+          <option value="<%= workflow %>" <%= partialTranslation.workflow?.type === workflow ? 'selected' : '' %>><%= content_tasks.workflowsMap(workflow.toLowerCase()) %></option>
+          <% }) %>
+        </select>
+      </div>
+
+      <%- render_partial('../_shared/_due_date.ejs', {
+        workflow: partialTranslation.workflow,
+        dueDateField: 'partial_translation[workflow][due_date]',
+      }) %>
+
+      <div class="mb-4">
+        <h6>Widgets selected for translation</h6>
+        <ul class="mt-2 space-y-1">
+          <% partialTranslation.widgetIds.forEach(widgetId => { const widget = (resource.widgets || []).find(item => item.widgetId === widgetId); %>
+          <li class="rounded border px-3 py-2 dark:border-neutral-500">
+            <input type="hidden" name="partial_translation[widget_ids][]" value="<%= widgetId %>">
+            <strong><%= widget?.component || 'Widget' %></strong>
+            <% if (widget?.settings?.title) { %> — <%= widget.settings.title %><% } %>
+            <span class="text-sm text-raketa-foreground/50">(<%= widgetId %>)</span>
+          </li>
+          <% }) %>
+        </ul>
+      </div>
+
+      <div class="mb-4">
+        <h6>Preview of the original page</h6>
+        <a href="<%= previewUrl %>" target="_blank" rel="noopener noreferrer" class="btn-text">Open preview</a>
+      </div>
+
+      <% Object.entries(errors?.partialTranslation || {}).forEach(([key, error]) => { %>
+      <p class="mb-2 text-sm font-medium text-red-600"><%= key %>: <%= error %></p>
+      <% }) %>
+
+      <div class="form-actions">
+        <div class="btn-toolbar">
+          <button type="submit" class="btn-primary">Initiate partial translations</button>
+          <a href="<%= `/${_context.locale}/${_context.resourceConfig.resourceTypePlural}/${resource.id}` %>" class="btn-secondary">Cancel</a>
+        </div>
+      </div>
+    </form>
+  </div>
+</div>

package/src/views/resources/translations/create_form.ejs

@@ -53,88 +53,10 @@
         </p>
       </div>
 
-      <div class="mb-4" id="due_date_wrapper">
-        <label for="due_date" class="font-semibold hover:cursor-pointer body-3">Due date (UTC)</label>
-        <input type="datetime-local" name="resource[workflow][due_date]" id="due_date" value="<%= resource.workflow?.due_date || "" %>" />
-
-        <p class="text-sm text-raketa-foreground/50 mt-1">
-          Select a due date for the translation. Weekends are not a valid choice.
-        </p>
-      </div>
-
-      <script>
-        window.addEventListener("load", (_event) => {
-          (function () {
-            const workflowSelect = document.getElementById("workflow");
-            const dueDateWrapper = document.getElementById("due_date_wrapper");
-            const dueDateInput = document.getElementById("due_date");
-
-            function validateInputValue(dInput) {
-              if (dInput.value === "") {
-                dInput.setCustomValidity('');
-                return;
-              }
-
-              const selectedDate = new Date(dInput.value);
-              const day = selectedDate.getDay();
-
-              if (day === 0 || day === 6) {
-                dInput.setCustomValidity('Weekends are not allowed. Please select a weekday.')
-                selectedDate.value = '';
-              } else {
-                dInput.setCustomValidity('');
-              }
-            }
-
-            dueDateInput.addEventListener('change', function(e) {
-              validateInputValue(dueDateInput);
-            });
-
-            function getTwoDaysFromNowString() {
-              const date = new Date();
-
-
-              date.setDate(date.getDate() + 3);
-
-              // Skip weekends.
-              while(date.getDay() === 0 || date.getDay() === 6) {
-                date.setDate(date.getDate() + 1);
-              }
-
-              const year = date.getFullYear();
-              const month = String(date.getMonth() + 1).padStart(2, "0");
-              const day = String(date.getDate()).padStart(2, "0");
-              const hours = String(date.getHours()).padStart(2, "0");
-              const minutes = String(date.getMinutes()).padStart(2, "0");
-              return `${year}-${month}-${day}T${hours}:${minutes}`;
-            }
-
-            function toggleDueDate() {
-              if (!workflowSelect || !dueDateWrapper || !dueDateInput) return;
-              const minDate = getTwoDaysFromNowString();
-              dueDateInput.min = minDate;
-
-              const isDefault = !workflowSelect.value;
-              dueDateWrapper.style.display = isDefault ? "none" : "block";
-
-              if (isDefault) {
-                dueDateInput.value = "";
-              } else if (!dueDateInput.value) {
-                dueDateInput.value = minDate;
-              }
-
-              // Trigger the on change so hints are visible together with the validation.
-              const changeEvent = new Event('change', { bubbles: true });
-              dueDateInput.dispatchEvent(changeEvent);
-            }
-
-            if (workflowSelect) {
-              workflowSelect.addEventListener("change", toggleDueDate);
-              toggleDueDate();
-            }
-          })();
-        })
-      </script>
+      <%- render_partial('../_shared/_due_date.ejs', {
+        workflow: resource.workflow,
+        dueDateField: 'resource[workflow][due_date]',
+      }) %>
       <% } %>
 
       <% const currentLocaleErrors = errors?.localeErrors || []; %>