view: add cards view

Author: progrium

lib/mod.ts

@@ -238,6 +238,20 @@ export async function setup(document: Document, target: HTMLElement, backend: Ba
     }
   });
 
+  workbench.commands.registerCommand({
+    id: "view-cards",
+    title: "View as Cards",
+    when: (ctx: Context) => {
+      if (!ctx.node) return false;
+      if (ctx.node.raw.Rel === "Fields") return false;
+      if (ctx.node.parent && ctx.node.parent.hasComponent(Document)) return false;
+      return true;
+    },
+    action: (ctx: Context) => {
+      ctx.node.setAttr("view", "cards");
+    }
+  });
+
 
   workbench.commands.registerCommand({
     id: "add-checkbox",

lib/model/mod.ts

@@ -62,6 +62,8 @@ export interface Node {
   removeLinked(rel: string, node: Node): void;
   moveLinked(rel: string, node: Node, idx: number): void;
 
+  componentField(name: string): any|null;
+
   getAttr(name: string): string;
   setAttr(name: string, value: string): void;
 

lib/model/module/node.ts

@@ -224,6 +224,15 @@ export class Node {
     return this.raw.Linked.Components.length;
   }
 
+  componentField(name: string): any|null {
+    for (const com of this.components) {
+      if (Object.keys(com.value||{}).includes(name)) {
+        return com.value[name];
+      }
+    }
+    return null;
+  }
+
   addComponent(obj: any) {
     const node = this.bus.make(componentName(obj), obj);
     node.raw.Parent = this.id;

lib/view/cards.tsx

@@ -0,0 +1,101 @@
+import { Node } from "../model/mod.ts";
+import { InlineFrame } from "../com/iframe.tsx";
+
+function tryFields(n: Node, fields: string[]): any|null {
+  for (const field of fields) {
+    const value = n.componentField(field);
+    if (value) {
+      return value;
+    }
+  }
+  return null;
+}
+
+export default {
+  view({attrs: {workbench, path}}) {
+    const node = path.node;
+    return (
+      <div class="cards-view flex flex-row" style={{gap: "1rem", paddingBottom: "1rem", flexWrap: "wrap"}}>
+        {node.children.map(n => {
+          const linkURL = tryFields(n, ["linkURL"]);
+          const dateTime = tryFields(n, ["updatedAt", "createdAt"]);
+          const userName = tryFields(n, ["updatedBy", "createdBy", "username"]);          
+          const thumbnailURL = tryFields(n, ["thumbnailURL", "coverURL"]);
+          const frame = n.getComponent(InlineFrame);
+          
+          let thumbnail = <img style={{
+            objectFit: "fill", 
+            objectPosition: "center", 
+            width: "12rem", 
+            height: "9rem"
+          }} src={thumbnailURL} />;
+          if (frame) {
+            thumbnail = (
+              <div style={{
+                width: "120rem", 
+                height: "90rem",
+                transform: "scale(0.1)",
+                pointerEvents: "none",
+                transformOrigin: "0 0"
+              }}>
+                <iframe src={frame.url} style={{
+                  border: "0",
+                  width: "100%", 
+                  height: "100%"
+                }}></iframe>
+              </div>
+            )
+          }
+          return (
+            <div style={{border: "1px solid gray", overflow: "hidden", borderRadius: "0.5rem", paddingBottom: "0.5rem", width: "12rem"}}>
+              <div style={{position: "relative", overflow: "hidden", width: "12rem", height: "9rem"}}>
+                {(linkURL)
+                  ? <a href={linkURL}>{thumbnail}</a>
+                  : thumbnail
+                }
+              </div>
+              <div style={{padding: "0.5rem", paddingBottom: "0.25rem"}}>
+                {(linkURL)
+                  ? <a href={linkURL}>{n.name}</a>
+                  : n.name}
+              </div>
+              {userName && <div style={{padding: "0.5rem", paddingTop: "0", paddingBottom: "0.75rem", color: "#aaa"}}>
+                {userName}
+              </div>}
+              {dateTime && <div style={{padding: "0.5rem", paddingTop: "0", paddingBottom: "0.75rem", color: "#aaa"}}>
+                {timeAgo(dateTime)}
+              </div>}
+            </div>
+        )})}
+      </div>
+    )
+  }
+}
+
+function timeAgo(date) {
+  if (!(date instanceof Date)) {
+      throw new Error("Input must be a valid Date object.");
+  }
+  
+  const now = new Date();
+  const seconds = Math.floor((now.getTime() - date.getTime()) / 1000);
+
+  const intervals = {
+      year: 31536000,
+      month: 2592000,
+      week: 604800,
+      day: 86400,
+      hour: 3600,
+      minute: 60,
+      second: 1
+  };
+
+  for (const [unit, secondsInUnit] of Object.entries(intervals)) {
+      const count = Math.floor(seconds / secondsInUnit);
+      if (count > 0) {
+          return `${count} ${unit}${count > 1 ? 's' : ''} ago`;
+      }
+  }
+
+  return 'just now';
+}

lib/view/views.ts

@@ -3,12 +3,14 @@ import list from "./list.tsx";
 import table from "./table.tsx";
 import tabs from "./tabs.tsx";
 import document from "./document.tsx";
+import cards from "./cards.tsx";
 
 export const views = {
   list,
   table,
   tabs,
   document,
+  cards
 }
 
 // deprecated. use getNodeView