@raketa-cloud/admin 0.0.62 → 0.0.65

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@raketa-cloud/admin",
-  "version": "0.0.62",
+  "version": "0.0.65",
   "main": "src/index.js",
   "scripts": {
     "dev": "npx tailwindcss -i ./src/styles/application.css -o ../../apps/admin/static/application.css --watch",

package/src/cloud/Articles.js

@@ -7,7 +7,7 @@ import {
   DeleteArticleDocument,
   TranslateArticleDocument,
   ChangeArticleSlugDocument,
-  MinimalArticlesDocument,
+  MiniArticlesDocument,
 } from "./documents/articlesDocuments";
 import { toDateTimeInput, toUTCISO8601String } from "../utils";
 
@@ -42,19 +42,6 @@ export default class Articles extends RaketaClient {
     ];
   }
 
-  async minimal(query, locale, articleTypeSlug) {
-    const vars = this.buildListInput(query, locale);
-
-    const { articles: items } = await this.query(MinimalArticlesDocument, {
-      input: {
-        ...vars.input,
-        filters: { ...vars.input.filters, articleTypeSlug },
-      },
-    });
-
-    return items;
-  }
-
   async find(id, locale) {
     const { article: item } = await this.query(ArticleByIdDocument, {
       input: {
@@ -66,36 +53,10 @@ export default class Articles extends RaketaClient {
     return item;
   }
 
-  async minimalAll(query, locale, articleTypeSlug) {
-    const vars = this.buildAllInput(query, locale);
-
-    const { articles: items } = await this.query(MinimalArticlesDocument, {
-      input: {
-        ...vars.input,
-        filters: { ...vars.input.filters, articleTypeSlug },
-      },
-    });
-
-    return items;
-  }
-
-  async minimalList(query, locale, articleTypeSlug) {
-    const vars = this.buildListInput(query, locale);
-
-    const { articles: items } = await this.query(MinimalArticlesDocument, {
-      input: {
-        ...vars.input,
-        filters: { ...vars.input.filters, articleTypeSlug },
-      },
-    });
-
-    return items;
-  }
-
-  async all(query, locale, articleTypeSlug) {
+  async listAll(query, locale, articleTypeSlug) {
     const vars = this.buildAllInput(query, locale);
 
-    const { articles: items } = await this.query(ArticlesDocument, {
+    const { miniArticles: items } = await this.query(MiniArticlesDocument, {
       input: {
         ...vars.input,
         filters: { ...vars.input.filters, articleTypeSlug },

package/src/cloud/Events.js

@@ -7,7 +7,7 @@ import {
   DeleteEventDocument,
   TranslateEventDocument,
   ChangeEventSlugDocument,
-  MinimalEventsDocument,
+  MiniEventsDocument,
 } from "./documents/eventsDocuments";
 import { toDateTimeInput, toUTCISO8601String } from "../utils";
 
@@ -63,36 +63,10 @@ export default class Events extends RaketaClient {
     return item;
   }
 
-  async minimalAll(query, locale, eventTypeSlug) {
+  async listAll(query, locale, eventTypeSlug) {
     const vars = this.buildAllInput(query, locale);
 
-    const { events: items } = await this.query(MinimalEventsDocument, {
-      input: {
-        ...vars.input,
-        filters: { ...vars.input.filters, eventTypeSlug },
-      },
-    });
-
-    return items;
-  }
-
-  async minimalList(query, locale, eventTypeSlug) {
-    const vars = this.buildListInput(query, locale);
-
-    const { events: items } = await this.query(MinimalEventsDocument, {
-      input: {
-        ...vars.input,
-        filters: { ...vars.input.filters, eventTypeSlug },
-      },
-    });
-
-    return items;
-  }
-
-  async all(query, locale, eventTypeSlug) {
-    const vars = this.buildAllInput(query, locale);
-
-    const { events: items } = await this.query(EventsDocument, {
+    const { miniEvents: items } = await this.query(MiniEventsDocument, {
       input: {
         ...vars.input,
         filters: { ...vars.input.filters, eventTypeSlug },

package/src/cloud/Pages.js

@@ -7,7 +7,7 @@ import {
   DeletePageDocument,
   TranslatePageDocument,
   ChangePageSlugDocument,
-  MinimalPagesDocument,
+  MiniPagesDocument,
 } from "./documents/pagesDocuments";
 
 export default class Pages extends RaketaClient {
@@ -43,36 +43,10 @@ export default class Pages extends RaketaClient {
     return item;
   }
 
-  async minimalAll(query, locale, pageTypeSlug) {
+  async listAll(query, locale, pageTypeSlug) {
     const vars = this.buildAllInput(query, locale);
 
-    const { pages: items } = await this.query(MinimalPagesDocument, {
-      input: {
-        ...vars.input,
-        filters: { ...vars.input.filters, pageTypeSlug },
-      },
-    });
-
-    return items;
-  }
-
-  async minimalList(query, locale, pageTypeSlug) {
-    const vars = this.buildListInput(query, locale);
-
-    const { pages: items } = await this.query(MinimalPagesDocument, {
-      input: {
-        ...vars.input,
-        filters: { ...vars.input.filters, pageTypeSlug },
-      },
-    });
-
-    return items;
-  }
-
-  async all(query, locale, pageTypeSlug) {
-    const vars = this.buildAllInput(query, locale);
-
-    const { pages: items } = await this.query(PagesDocument, {
+    const { miniPages: items } = await this.query(MiniPagesDocument, {
       input: {
         ...vars.input,
         filters: { ...vars.input.filters, pageTypeSlug },

package/src/cloud/documents/articlesDocuments.js

@@ -6,6 +6,7 @@ import {
   paginationFragment,
   revisionMetaFragment,
   tagFragment,
+  summaryChangeFragment,
 } from "./common";
 
 function minimalArticleFragment() {
@@ -14,6 +15,8 @@ function minimalArticleFragment() {
       id
       slug
       title
+      visibility
+      publishAt
     }
   `;
 }
@@ -31,6 +34,9 @@ function articleFragment() {
       originalId
       translations
       revisionsCount
+      insertedAt
+      updatedAt
+      changes ${summaryChangeFragment()}
       tags ${tagFragment()}
       articleType ${articleTypeFragment()}
       categories ${categoryFragment()}
@@ -67,24 +73,15 @@ const ArticleByIdDocument = gql`
 const ArticleChangesDocument = gql`
   query ArticleChanges($input: IdInput!) {
     articleChanges(input: $input) {
-      list {
-        version
-        title
-        description
-        operator
-        operatorMeta
-        source
-        insertedAt
-      }
+      list ${summaryChangeFragment()}
     }
   }
 `;
 
-const MinimalArticlesDocument = gql`
-  query Articles($input: ArticlesInput!) {
-    articles(input: $input) {
+const MiniArticlesDocument = gql`
+  query MiniArticles($input: ArticlesInput!) {
+    miniArticles(input: $input) {
       list ${minimalArticleFragment()}
-      pagination ${paginationFragment()}
     }
   }
 `;
@@ -248,7 +245,7 @@ const UnlockArticleRevisionDocument = gql`
 export {
   ArticleByIdDocument,
   ArticlesDocument,
-  MinimalArticlesDocument,
+  MiniArticlesDocument,
   CreateArticleDocument,
   UpdateArticleDocument,
   UpdateArticleWidgetsDocument,

package/src/cloud/documents/common.js

@@ -102,3 +102,17 @@ export function categoryFragment() {
     }
   `;
 }
+
+export function summaryChangeFragment() {
+  return gql`
+    {
+      version
+      title
+      description
+      operator
+      operatorMeta
+      source
+      insertedAt
+    }
+  `;
+}

package/src/cloud/documents/eventsDocuments.js

@@ -6,6 +6,7 @@ import {
   paginationFragment,
   revisionMetaFragment,
   tagFragment,
+  summaryChangeFragment,
 } from "./common";
 
 function minimalEventFragment() {
@@ -14,6 +15,10 @@ function minimalEventFragment() {
       id
       slug
       title
+      visibility
+      publishAt
+      startsAt
+      endsAt
     }
   `;
 }
@@ -33,6 +38,9 @@ function eventFragment() {
       originalId
       translations
       revisionsCount
+      insertedAt
+      updatedAt
+      changes ${summaryChangeFragment()}
       tags ${tagFragment()}
       eventType ${eventTypeFragment()}
       categories ${categoryFragment()}
@@ -71,24 +79,15 @@ const EventByIdDocument = gql`
 const EventChangesDocument = gql`
   query EventChanges($input: IdInput!) {
     eventChanges(input: $input) {
-      list {
-        version
-        title
-        description
-        operator
-        operatorMeta
-        source
-        insertedAt
-      }
+      list ${summaryChangeFragment()}
     }
   }
 `;
 
-const MinimalEventsDocument = gql`
-  query MinimalEvents($input: EventsInput!) {
-    events(input: $input) {
+const MiniEventsDocument = gql`
+  query MiniEvents($input: EventsInput!) {
+    miniEvents(input: $input) {
       list ${minimalEventFragment()}
-      pagination ${paginationFragment()}
     }
   }
 `;
@@ -254,7 +253,7 @@ const UnlockEventRevisionDocument = gql`
 export {
   EventByIdDocument,
   EventsDocument,
-  MinimalEventsDocument,
+  MiniEventsDocument,
   CreateEventDocument,
   UpdateEventDocument,
   UpdateEventWidgetsDocument,

package/src/cloud/documents/pagesDocuments.js

@@ -6,6 +6,7 @@ import {
   paginationFragment,
   revisionMetaFragment,
   tagFragment,
+  summaryChangeFragment,
 } from "./common";
 
 function minimalPageFragment() {
@@ -14,6 +15,7 @@ function minimalPageFragment() {
       id
       slug
       title
+      visibility
     }
   `;
 }
@@ -30,9 +32,12 @@ function pageFragment() {
       originalId
       translations
       revisionsCount
+      insertedAt
+      updatedAt
       tags ${tagFragment()}
       pageType ${pageTypeFragment()}
       categories ${categoryFragment()}
+      changes ${summaryChangeFragment()}
     }
   `;
 }
@@ -65,24 +70,15 @@ const PageByIdDocument = gql`
 const PageChangesDocument = gql`
   query PageChanges($input: IdInput!) {
     pageChanges(input: $input) {
-      list {
-        version
-        title
-        description
-        operator
-        operatorMeta
-        source
-        insertedAt
-      }
+      list ${summaryChangeFragment()}
     }
   }
 `;
 
-const MinimalPagesDocument = gql`
-  query Pages($input: PagesInput!) {
-    pages(input: $input) {
+const MiniPagesDocument = gql`
+  query MiniPages($input: PagesInput!) {
+    miniPages(input: $input) {
       list ${minimalPageFragment()}
-      pagination ${paginationFragment()}
     }
   }
 `;
@@ -245,7 +241,7 @@ const UnlockPageRevisionDocument = gql`
 export {
   PageByIdDocument,
   PagesDocument,
-  MinimalPagesDocument,
+  MiniPagesDocument,
   CreatePageDocument,
   UpdatePageDocument,
   UpdatePageWidgetsDocument,

package/src/views/articles/index.ejs

@@ -20,6 +20,8 @@
       <tr>
         <th><%- sort_button("Title", "title", _context) %></th>
         <th>Visibility</th>
+        <th><%- sort_button("Publish at", "publish_at", _context) %></th>
+        <th><%- sort_button("Last change", "updated_at", _context) %></th>
         <th>Translations</th>
       </tr>
     </thead>
@@ -75,6 +77,30 @@
           </div>
         </td>
 
+        <td>
+          <time data-pretty-datetime datetime="<%= item.publishAt %>"><%= item.publishAt %></time>
+        </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>
+              <time data-pretty-datetime datetime="<%= item.updatedAt %>"><%= item.updatedAt %></time>
+            </div>
+
+            <div class="flex items-center gap-1" title="<%= item.changes[0]?.operatorMeta?.name %>">
+              <% if (item.changes[0]?.operatorMeta?.avatar) { %>
+              <img src="<%= item.changes[0]?.operatorMeta?.avatar %>" class="size-4 rounded-full" alt="<%= item.changes[0]?.operatorMeta?.name %>">
+              <% } else { %>
+              <div class="size-4 rounded-full"></div>
+              <% } %>
+              <%= item.changes[0]?.operatorMeta?.name %>
+            </div>
+          </div>
+        </td>
+
         <td>
           <div class="flex flex-wrap items-center gap-1">
             <% Object.keys(_context.locales).forEach(key => { %>
@@ -142,4 +168,4 @@
   searchToggle.addEventListener('click', () => {
     sidebar.classList.toggle('hidden');
   });
-</script>
+</script>

package/src/views/articles/show.ejs

@@ -77,7 +77,7 @@
                   <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>
 
-                <%= (new Date(revision.insertedAt)).toLocaleString() %>
+                <time data-pretty-datetime datetime="<%= revision.insertedAt %>"><%= revision.insertedAt %></time>
               </div>
             </div>
           </td>
@@ -133,7 +133,7 @@
                   <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>
 
-                <%= (new Date(change.insertedAt)).toLocaleString() %>
+                <time data-pretty-datetime datetime="<%= change.insertedAt %>"><%= change.insertedAt %></time>
               </div>
             </div>
           </td>

package/src/views/events/index.ejs

@@ -20,6 +20,8 @@
       <tr>
         <th><%- sort_button("Title", "title", _context) %></th>
         <th>Visibility</th>
+        <th><%- sort_button("Publish at", "publish_at", _context) %></th>
+        <th><%- sort_button("Last change", "updated_at", _context) %></th>
         <th>Translations</th>
       </tr>
     </thead>
@@ -75,6 +77,30 @@
           </div>
         </td>
 
+        <td>
+          <time data-pretty-datetime datetime="<%= item.publishAt %>"><%= item.publishAt %></time>
+        </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>
+              <time data-pretty-datetime datetime="<%= item.updatedAt %>"><%= item.updatedAt %></time>
+            </div>
+
+            <div class="flex items-center gap-1" title="<%= item.changes[0]?.operatorMeta?.name %>">
+              <% if (item.changes[0]?.operatorMeta?.avatar) { %>
+              <img src="<%= item.changes[0]?.operatorMeta?.avatar %>" class="size-4 rounded-full" alt="<%= item.changes[0]?.operatorMeta?.name %>">
+              <% } else { %>
+              <div class="size-4 rounded-full"></div>
+              <% } %>
+              <%= item.changes[0]?.operatorMeta?.name %>
+            </div>
+          </div>
+        </td>
+
         <td>
           <div class="flex flex-wrap items-center gap-1">
             <% Object.keys(_context.locales).forEach(key => { %>
@@ -142,4 +168,4 @@
   searchToggle.addEventListener('click', () => {
     sidebar.classList.toggle('hidden');
   });
-</script>
+</script>

package/src/views/events/show.ejs

@@ -77,7 +77,7 @@
                   <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>
 
-                <%= (new Date(revision.insertedAt)).toLocaleString() %>
+                <time data-pretty-datetime datetime="<%= revision.insertedAt %>"><%= revision.insertedAt %></time>
               </div>
             </div>
           </td>
@@ -133,7 +133,7 @@
                   <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>
 
-                <%= (new Date(change.insertedAt)).toLocaleString() %>
+                <time data-pretty-datetime datetime="<%= change.insertedAt %>"><%= change.insertedAt %></time>
               </div>
             </div>
           </td>

package/src/views/layouts/application.ejs

@@ -143,10 +143,22 @@
 
       parent.querySelectorAll('[data-auto="1"]').forEach(node => node.remove())
 
+      // Add user's localtime
+      const strTime = fakeUTCDate.toLocaleString("en-GB", {});
+
+      const hint = document.createElement("div");
+
+      hint.classList.add('hint')
+      hint.innerText = `In your local time: ${strTime}`;
+      hint.dataset.auto = "1";
+
+      parent.appendChild(hint)
+
       TIMEZONES.forEach(timeZone => {
-        const strTime = fakeUTCDate.toLocaleString("en-EU", {
+        const strTime = fakeUTCDate.toLocaleString("en-GB", {
           timeZone: `${timeZone.value}`
         });
+
         const hint = document.createElement("div");
 
         hint.classList.add('hint')
@@ -156,12 +168,6 @@
         parent.appendChild(hint)
       })
     }
-
-    document.querySelectorAll('input[type="datetime-local"]').forEach(input => {
-      enhanceDateTimeInputs(input);
-
-      input.addEventListener("change", (event) => enhanceDateTimeInputs(event.target))
-    })
   </script>
 
   <script>
@@ -183,6 +189,29 @@
       })
     })
   </script>
+
+  <script>
+    window.addEventListener("load", (_event) => {
+
+      // Setup datetime inputs
+      document.querySelectorAll('input[type="datetime-local"]').forEach(input => {
+        enhanceDateTimeInputs(input);
+
+        input.addEventListener("change", (event) => enhanceDateTimeInputs(event.target))
+      })
+
+
+      // Setup time presentation
+      document.querySelectorAll('time[data-pretty-datetime]').forEach(item => {
+        const dateStr = item.getAttribute("datetime");
+
+        item.innerText = new Date(dateStr).toLocaleString('en-GB', {
+          dateStyle: "short",
+          timeStyle: "short"
+        })
+      })
+    })
+  </script>
 </body>
 
 </html>

package/src/views/pages/index.ejs

@@ -20,6 +20,7 @@
       <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>
@@ -75,6 +76,26 @@
           </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>
+              <time data-pretty-datetime datetime="<%= item.updatedAt %>"><%= item.updatedAt %></time>
+            </div>
+
+            <div class="flex items-center gap-1" title="<%= item.changes[0]?.operatorMeta?.name %>">
+              <% if (item.changes[0]?.operatorMeta?.avatar) { %>
+              <img src="<%= item.changes[0]?.operatorMeta?.avatar %>" class="size-4 rounded-full" alt="<%= item.changes[0]?.operatorMeta?.name %>">
+              <% } else { %>
+              <div class="size-4 rounded-full"></div>
+              <% } %>
+              <%= item.changes[0]?.operatorMeta?.name %>
+            </div>
+          </div>
+        </td>
+
         <td>
           <div class="flex flex-wrap items-center gap-1">
             <% Object.keys(_context.locales).forEach(key => { %>
@@ -142,4 +163,4 @@
   searchToggle.addEventListener('click', () => {
     sidebar.classList.toggle('hidden');
   });
-</script>
+</script>

package/src/views/pages/show.ejs

@@ -91,7 +91,7 @@
                   <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>
 
-                <%= (new Date(revision.insertedAt)).toLocaleString() %>
+                <time data-pretty-datetime datetime="<%= revision.insertedAt %>"><%= revision.insertedAt %></time>
               </div>
             </div>
           </td>
@@ -147,7 +147,7 @@
                   <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>
 
-                <%= (new Date(change.insertedAt)).toLocaleString() %>
+                <time data-pretty-datetime datetime="<%= change.insertedAt %>"><%= change.insertedAt %></time>
               </div>
             </div>
           </td>

package/src/views/redirects/index.ejs

@@ -54,7 +54,7 @@
               <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>
 
-            <%= new Date(item.updatedAt).toLocaleString('en-GB', { dateStyle: "short", timeStyle: "short" }) %>
+            <time data-pretty-datetime datetime="<%= item.updatedAt %>"><%= item.updatedAt %></time>
           </div>
         </td>
         <td class="actions">
@@ -72,4 +72,4 @@
   </table>
 
   <%- pagination(items.pagination, _context) %>
-</div>
+</div>

package/src/views/redirects/show.ejs

@@ -29,7 +29,7 @@
       </tr>
       <tr>
         <th class="w-1 whitespace-nowrap">Updated at</th>
-        <td><%= new Date(item.updatedAt).toLocaleString('en-GB', { dateStyle: "short", timeStyle: "short" }) %></td>
+        <time data-pretty-datetime datetime="<%= item.updatedAt %>"><%= item.updatedAt %></time>
       </tr>
     </tbody>
   </table>
@@ -52,9 +52,9 @@
         <td><%= item.version %></td>
         <td><%= item.title %></td>
         <td><%= item.operatorMeta.name %></td>
-        <td><%= new Date(item.insertedAt).toLocaleString('en-GB', { dateStyle: "short", timeStyle: "short" }) %></td>
+        <td><time data-pretty-datetime datetime="<%= item.insertedAt %>"><%= item.insertedAt %></time></td>
       </tr>
       <% }) %>
     </tbody>
   </table>
-</div>
+</div>