@raketa-cloud/admin 0.0.14 → 0.0.15

package/src/views/article_revisions/visuals/edit_form.ejs

@@ -0,0 +1,42 @@
+<div class="page-wrapper">
+  <div class="page-title">
+    <h1 class="heading-1">Edit revision / Visuals</h1>
+  </div>
+
+  <%- include('../_nav.ejs', { settings: visual_settings, active: 'visuals' }) %>
+
+  <div class="grid gap-4 md:grid-cols-3">
+    <div>
+      <% form_for({ visual_settings }, errors, (f) => { %>
+      <form action="<%= `/${_context.locale}/article_revisions/${visual_settings.id}/visuals` %>" method="POST" class="form">
+        <%- f.field('visual_settings.layout', { as: 'select', required: true, options: [
+          ["default", "Default"],
+          ["landing", "Landing page"],
+          ["headless", "Headless"],
+        ] }) %>
+
+        <div class="form-actions">
+          <div class="btn-toolbar">
+            <%- f.submit('Save changes', { class: 'btn-primary' }) %>
+            <a href="<%= `/${_context.locale}/articles/${visual_settings.originalId}` %>" class="btn-secondary">Back</a>
+          </div>
+        </div>
+      </form>
+      <% }) %>
+    </div>
+
+    <div>
+      <div class="help">
+        <div class="mb-2 flex items-center gap-1">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+            <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
+          </svg>
+
+          <h3 class="heading-3">Contextual help</h3>
+        </div>
+
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore nostrum fugit sint sunt distinctio ut cum, corrupti ad error, quo labore minima. Reprehenderit quasi maxime repudiandae voluptatum commodi saepe molestiae?</p>
+      </div>
+    </div>
+  </div>
+</div>

package/src/views/articles/_form.ejs

@@ -0,0 +1,86 @@
+<% form_for({ article }, errors, (f) => { %>
+<form action="<%= article?.id ? `/${_context.locale}/articles/${article.id}` : `/${_context.locale}/articles` %>" method="post" class="form">
+  <%- f.field('article.title', { required: true }) %>
+  <%- f.field('article.slug', { label: "URL", required: true }) %>
+  <%- f.field('article.publish_at', { required: true, type: 'datetime-local' }) %>
+
+  <%- f.field('article.visibility', { as: 'select', required: true, options: visibilityOptions }) %>
+
+  <%- f.field('article.username', { required: true }) %>
+  <%- f.field('article.password', { required: true }) %>
+
+  <%- f.field('article.layout', { as: 'select', required: true, options: [
+      ["default", "Default"],
+      ["landing", "Landing page"],
+      ["headless", "Headless"],
+    ] }) %>
+
+  <%- f.field('article.meta_title', { required: true }) %>
+  <%- f.field('article.meta_description', { as: "textarea", required: true }) %>
+
+  <raketa-image-picker
+    name="article[meta_image]"
+    value="<%= JSON.stringify(article.meta_image) %>"
+  ></raketa-image-picker>
+
+  <%- f.field('article.tags', { as: 'checkbox_group', required: true, options: tags.map(tag => [tag.id, tag.name]) }) %>
+
+  <div class="form-actions">
+    <div class="btn-toolbar">
+      <%- f.submit('Save record', { class: 'btn-primary' }) %>
+
+      <a href="<%= `/${_context.locale}/articles` %>" class="btn-secondary">Back to list</a>
+    </div>
+
+    <% if (article?.id) {%>
+    <button hx-delete="<%= `/${_context.locale}/articles/${article.id}` %>" hx-confirm="Are you sure?" class="btn-danger has-icon">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+        <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
+      </svg>
+
+      Delete record
+    </button>
+    <% } %>
+  </div>
+</form>
+<% }) %>
+
+<div>
+  <div class="help">
+    <div class="flex items-center gap-1 mb-2">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+        <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
+      </svg>
+
+      <h3 class="heading-3">Contextual help</h3>
+    </div>
+
+    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore nostrum fugit sint sunt distinctio ut cum, corrupti ad error, quo labore minima. Reprehenderit quasi maxime repudiandae voluptatum commodi saepe molestiae?</p>
+  </div>
+</div>
+
+<script>
+  function onVisibilityChange(event) {
+    const newValue = event.target.value;
+
+    if (newValue === "protected") {
+      document.getElementById("f_username").parentElement.style.display = "block";
+      document.getElementById("f_username").required = true;
+      document.getElementById("f_password").parentElement.style.display = "block";
+      document.getElementById("f_password").required = true;
+    } else {
+      document.getElementById("f_username").parentElement.style.display = "none";
+      document.getElementById("f_username").required = false;
+      document.getElementById("f_password").parentElement.style.display = "none";
+      document.getElementById("f_password").required = false;
+    }
+  }
+
+  onVisibilityChange({
+    target: {
+      value: '<%= article.visibility %>'
+    }
+  })
+
+  document.getElementById("f_visibility").addEventListener("change", onVisibilityChange)
+</script>

package/src/views/articles/create_form.ejs

@@ -0,0 +1,9 @@
+<div class="page-wrapper">
+  <div class="page-title">
+    <h1 class="heading-1">Create article</h1>
+  </div>
+
+  <div class="grid gap-4 md:grid-cols-3">
+    <%- include('_form.ejs') %>
+  </div>
+</div>

package/src/views/articles/deletes/create_form.ejs

@@ -0,0 +1,55 @@
+<div class="page-wrapper">
+  <div class="page-title">
+    <h1 class="heading-1">Delete an article</h1>
+  </div>
+
+  <div class="grid gap-4 md:grid-cols-3">
+    <div>
+      <% form_for({ deleteAction }, errors, (f) => { %>
+      <form action="<%= `/${_context.locale}/articles/${deleteAction.id}/deletes` %>" method="POST" class="form">
+        <%- f.field('deleteAction.redirect', { as: 'select', required: true,options: [['301', 'Redirect to another page'], ['404', 'Return 404'],['410', 'Return 410']] }) %>
+        <%- f.field('deleteAction.destination', {label: 'Destination URL', required: true}) %>
+
+        <div class="form-actions">
+          <div class="btn-toolbar">
+            <%- f.submit('Proceed', { class: 'btn-primary' }) %>
+            <a href="<%=`/${_context.locale}/articles/${deleteAction.id}`%>" class="btn-secondary">Back</a>
+          </div>
+        </div>
+      </form>
+      <% }) %>
+    </div>
+
+    <div>
+      <div class="help">
+        <div class="mb-2 flex items-center gap-1">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+            <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
+          </svg>
+
+          <h3 class="heading-3">Contextual help</h3>
+        </div>
+
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore nostrum fugit sint sunt distinctio ut cum, corrupti ad error, quo labore minima. Reprehenderit quasi maxime repudiandae voluptatum commodi saepe molestiae?</p>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+  function onDestinationChange(event) {
+    const newValue = event.target.value;
+    const requiresRedirect = newValue === "301"
+
+    document.getElementById("f_destination").parentElement.style.display = requiresRedirect ? "block" : "none";
+    document.getElementById("f_destination").required = requiresRedirect;
+  }
+
+  onDestinationChange({
+    target: {
+      value: '<%= deleteAction.redirect %>'
+    }
+  })
+
+  document.getElementById("f_redirect").addEventListener("change", onDestinationChange)
+</script>

package/src/views/articles/edit_form.ejs

@@ -0,0 +1,3 @@
+<h1>Hello from edit form <%= id %></h1>
+
+<%- include('_form.ejs') %>

package/src/views/articles/index.ejs

@@ -0,0 +1,161 @@
+<div class="page-wrapper">
+  <div class="page-title">
+    <h1 class="heading-1">Articles</h1>
+
+    <div class="actions-toolbar">
+      <a href="<%= `/${_context.locale}/articles/new` %>" class="btn-primary">
+        Create new
+      </a>
+
+      <button type="button" data-toggle-sidebar="1" class="p-2.5 rounded hover:bg-neutral-200 transition-all duration-300 ease-in-out dark:hover:bg-neutral-700">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+          <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
+        </svg>
+      </button>
+    </div>
+  </div>
+
+  <table class="data-grid">
+    <thead>
+      <tr>
+        <th><%- sort_button("Title", "title", _context) %></th>
+        <th>Visibility</th>
+        <th><%- sort_button("Last change", "updated_at", _context) %></th>
+        <th>Translations</th>
+      </tr>
+    </thead>
+
+    <tbody>
+      <% items.list.forEach((item, idx)=> { %>
+      <tr>
+        <td class="w-1/2">
+          <a href="<%= `/${_context.locale}/articles/${item.id}` %>" class="btn-text mr-1">
+            <%= item.title %>
+          </a>
+          <% if (item.revisionsCount > 0) { %>
+          <span class="bg-orange-100 chip text-orange-700 dark:bg-orange-900/50 dark:text-orange-300"><%= item.revisionsCount !== 1 ? `${item.revisionsCount} open revisions` : 'Open revision' %></span>
+          <% } %>
+
+          <div class="mt-1">
+            <a href="<%= `https://localhost:3000/${_context.locale}/${item.slug}` %>" class="body-3 text-raketa-foreground/50" target="_blank">
+              /<%= item.slug %>
+            </a>
+          </div>
+        </td>
+
+        <td>
+          <div class="flex itemx-center gap-1 whitespace-nowrap">
+            <span class="text-raketa-foreground/30" title="<%= visibilityOptions.find(opt => opt[0] === item.visibility)[1] %>">
+              <% if (item.visibility === 'public') { %>
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418" />
+              </svg>
+
+              <% } %>
+              <% if (item.visibility === 'private') { %>
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-4">
+                <path d="M8.5 4.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM10.9 12.006c.11.542-.348.994-.9.994H2c-.553 0-1.01-.452-.902-.994a5.002 5.002 0 0 1 9.803 0ZM14.002 12h-1.59a2.556 2.556 0 0 0-.04-.29 6.476 6.476 0 0 0-1.167-2.603 3.002 3.002 0 0 1 3.633 1.911c.18.522-.283.982-.836.982ZM12 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" />
+              </svg>
+              <% } %>
+              <% if (item.visibility === 'unlisted') { %>
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-4">
+                <path fill-rule="evenodd" d="M3.28 2.22a.75.75 0 0 0-1.06 1.06l10.5 10.5a.75.75 0 1 0 1.06-1.06l-1.322-1.323a7.012 7.012 0 0 0 2.16-3.11.87.87 0 0 0 0-.567A7.003 7.003 0 0 0 4.82 3.76l-1.54-1.54Zm3.196 3.195 1.135 1.136A1.502 1.502 0 0 1 9.45 8.389l1.136 1.135a3 3 0 0 0-4.109-4.109Z" clip-rule="evenodd" />
+                <path d="m7.812 10.994 1.816 1.816A7.003 7.003 0 0 1 1.38 8.28a.87.87 0 0 1 0-.566 6.985 6.985 0 0 1 1.113-2.039l2.513 2.513a3 3 0 0 0 2.806 2.806Z" />
+              </svg>
+              <% } %>
+              <% if (item.visibility === 'protected') { %>
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-4">
+                <path fill-rule="evenodd" d="M8 1a3.5 3.5 0 0 0-3.5 3.5V7A1.5 1.5 0 0 0 3 8.5v5A1.5 1.5 0 0 0 4.5 15h7a1.5 1.5 0 0 0 1.5-1.5v-5A1.5 1.5 0 0 0 11.5 7V4.5A3.5 3.5 0 0 0 8 1Zm2 6V4.5a2 2 0 1 0-4 0V7h4Z" clip-rule="evenodd" />
+              </svg>
+              <% } %>
+            </span>
+
+            <%= visibilityOptions.find(opt => opt[0] === item.visibility)[1] %>
+          </div>
+        </td>
+
+        <td>
+          <div class="body-3 text-raketa-foreground/50">
+            <div class="flex items-center gap-1 mb-0.5">
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4 text-raketa-foreground">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+              </svg>
+
+              Jan 20, 2024
+            </div>
+
+            <div class="flex items-center gap-1" title="Yana Dimitrova">
+              <img src="https://lh3.googleusercontent.com/a/ACg8ocLRrXdEsbxWg9AMWcgEY9Gfs75-xp7dYsnanB9-u-ZS3A=s96-c" class="size-4 rounded-full" alt="Yana Dimitrova">
+              Yana D.
+            </div>
+          </div>
+        </td>
+
+        <td>
+          <div class="flex flex-wrap items-center gap-1">
+            <% Object.keys(_context.locales).forEach(key => { %>
+            <% const { name, _code, flag} = _context.locales[key] %>
+            <% if (key === _context.locale) { %>
+            <img title="<%= name %>" src="<%= flag %>" alt="<%= name %>" class="size-6 rounded-full border dark:border-neutral-700" />
+            <% } else if (item.translations[key]) { %>
+            <a href="<%= `/${key}/articles/${item.translations[key].id}` %>">
+              <img title="<%= name %>" src="<%= flag %>" alt="<%= name %>" class="size-6 rounded-full border dark:border-neutral-700" />
+            </a>
+            <% } else { %>
+            <a href="<%= `/${_context.locale}/articles/${item.id}/translations/new?target_locale=${key}` %>">
+              <img title="<%= name %>" src="<%= flag %>" alt="<%= name %>" class="<%= [" transition-all ease-in-out duration-300 size-6 rounded-full border hover:opacity-100 dark:border-neutral-700", key === _context.locale ? "opacity-100" : "opacity-10"].join(" ") %>" />
+            </a>
+            <% } %>
+            <% }); %>
+          </div>
+        </td>
+      </tr>
+      <% }); %>
+    </tbody>
+  </table>
+
+  <%- pagination(items.pagination, _context) %>
+</div>
+
+<div data-sidebar="1" class="search-sidebar <%= Object.keys(_context.query).some(k => k.startsWith('f:')) ? '' : 'hidden' %>">
+  <span class="heading-2">Search by</span>
+
+  <form action="<%= `/${_context.locale}/articles` %>" method="GET" class="form mt-4">
+    <input type="hidden" name="order_direction" value="<%= _context.query.order_direction %>" />
+    <input type="hidden" name="order_by" value="<%= _context.query.order_by %>" />
+
+    <div class="mb-4">
+      <label for="keyword" class="font-semibold hover:cursor-pointer body-3">Keyword</label>
+      <input type="text" name="f:keyword" value="<%= _context.query["f:keyword"] %>" />
+    </div>
+
+    <div class="mb-4">
+      <label for="" class="font-semibold hover:cursor-pointer body-3">Tags</label>
+      <div class="checkbox-group mb-4">
+        <% tags.forEach((item,idx)=> { %>
+        <div class="flex items-center gap-1">
+          <% if (Array.from(_context.query["f:tags"] || []).includes(item.id)) { %>
+          <input type="checkbox" name="f:tags" id='tag-<%= item.id %>' checked value="<%= item.id %>" class="hover:cursor-pointer">
+          <% } else { %>
+          <input type="checkbox" name="f:tags" id='tag-<%= item.id %>' value="<%= item.id %>" class="hover:cursor-pointer">
+          <% } %>
+          <label for='tag-<%= item.id %>' class="body-2 hover:cursor-pointer"><%= item.name %></label>
+        </div>
+        <% }); %>
+      </div>
+    </div>
+
+    <div class="btn-toolbar">
+      <button type="submit" class="btn-primary">Search</button>
+      <a href="<%= `/${_context.locale}/articles` %>" class="btn-text">Clear search</a>
+    </div>
+  </form>
+</div>
+
+<script>
+  const sidebar = document.querySelector("[data-sidebar]");
+  const searchToggle = document.querySelector('[data-toggle-sidebar]');
+  searchToggle.addEventListener('click', () => {
+    sidebar.classList.toggle('hidden');
+  });
+</script>