terrazzo 0.2.1 → 0.2.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '0668700d10e6547d3366e74348a33674733828a834d3be9dd02ddd7effab6bd8'
-  data.tar.gz: d85d82e780f8820d1b306ac5f63c3d1a96802da1f56f301e11b8040903372601
+  metadata.gz: b55338dd365f9ad475e3892c34a4a5ca706625b50bd331dd6793bbd756ec75e7
+  data.tar.gz: a5193fda7a10ca72103816e0f47a58ba7facf375003a4af22efa0385914378b2
 SHA512:
-  metadata.gz: 84bff5afcc8deb6b423f7112593c318b80716c384d7e1140d596e50b816de4e8c651bb76d9cfa4653b5154ec1c28a7185052928f136fcdafa044ef3d8762f4c4
-  data.tar.gz: eaec2494d92552710c555f3f45db30688e29ca4a20af4d29c488aa8d15f62efaa42d7ae8e399c95d5c3cb291bb36f3001f9e96e5e4c47d02ae3009490b377f3c
+  metadata.gz: d048907fe5b71cee9100ce4cd7a1b606e666972be105a39f15c24f3119531deccc4bc7cb85144b65623faf933dbebfd1f78d61b841909872046afe754c3ea71f
+  data.tar.gz: 6eb4e86c0a06cd790094cc0829313894f2c9d7b6ce232327a5c46610d9d507c5215b87ec81c3a136c0e5ac2b6841c22de4f81b0544a46aba2846a1f8e762f009

data/app/views/terrazzo/application/index.json.props

@@ -43,6 +43,10 @@ json.table do
           json.fieldType field.field_type
           json.value field.serialize_value(:index)
           json.options field.serializable_options
+
+          if field.class.associative? && field.data.present?
+            json.showPath polymorphic_path([namespace, field.data]) rescue nil
+          end
         end
       end
     end

data/app/views/terrazzo/application/show.json.props

@@ -1,15 +1,29 @@
 json.pageTitle @page.page_title
 
+show_field_json = ->(json, field) do
+  json.attribute field.attribute.to_s
+  json.label field.attribute.to_s.humanize
+  json.fieldType field.field_type
+  json.value field.serialize_value(:show)
+  json.options field.serializable_options
+
+  if field.class.associative? && field.data.present?
+    if field.is_a?(Terrazzo::Field::HasMany)
+      json.itemShowPaths(field.data.each_with_object({}) do |record, paths|
+        paths[record.id.to_s] = polymorphic_path([namespace, record]) rescue nil
+      end)
+    else
+      json.showPath polymorphic_path([namespace, field.data]) rescue nil
+    end
+  end
+end
+
 json.attributeGroups do
   json.array! @page.grouped_attributes do |group|
     json.name group[:name]
     json.attributes do
       json.array! group[:fields] do |field|
-        json.attribute field.attribute.to_s
-        json.label field.attribute.to_s.humanize
-        json.fieldType field.field_type
-        json.value field.serialize_value(:show)
-        json.options field.serializable_options
+        show_field_json.call(json, field)
       end
     end
   end
@@ -17,11 +31,7 @@ end
 
 json.attributes do
   json.array! @page.attributes do |field|
-    json.attribute field.attribute.to_s
-    json.label field.attribute.to_s.humanize
-    json.fieldType field.field_type
-    json.value field.serialize_value(:show)
-    json.options field.serializable_options
+    show_field_json.call(json, field)
   end
 end
 

data/lib/generators/terrazzo/views/templates/fields/has_many/ShowField.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 
 import {
   Table,
@@ -8,17 +8,24 @@ import {
   TableHead,
   TableCell,
 } from "../../components/ui/table";
+import { Badge } from "../../components/ui/badge";
+import { Button } from "../../components/ui/button";
 import { FieldRenderer } from "../FieldRenderer";
 
-export function ShowField({ value }) {
+export function ShowField({ value, itemShowPaths }) {
   if (!value) return <span className="text-muted-foreground">None</span>;
 
-  const { items, headers, total, hasMore } = value;
+  const { items, headers, total, initialLimit } = value;
+  const [expanded, setExpanded] = useState(false);
 
   if (!items || items.length === 0) {
     return <span className="text-muted-foreground">None</span>;
   }
 
+  const pathFor = (id) => itemShowPaths?.[String(id)];
+  const hasMore = initialLimit && initialLimit > 0 && total > initialLimit;
+  const visibleItems = expanded || !hasMore ? items : items.slice(0, initialLimit);
+
   // Table mode: collection_attributes specified
   if (headers) {
     return (
@@ -33,22 +40,35 @@ export function ShowField({ value }) {
               </TableRow>
             </TableHeader>
             <TableBody>
-              {items.map((item) =>
-                <TableRow key={item.id}>
-                  {item.columns.map((col) =>
-                    <TableCell key={col.attribute}>
-                      <FieldRenderer mode="index" {...col} />
-                    </TableCell>
-                  )}
-                </TableRow>
-              )}
+              {visibleItems.map((item) => {
+                const showPath = pathFor(item.id);
+                return (
+                  <TableRow key={item.id}>
+                    {item.columns.map((col, colIndex) =>
+                      <TableCell key={col.attribute}>
+                        {showPath && colIndex === 0 ? (
+                          <a href={showPath} data-sg-visit className="hover:underline">
+                            <FieldRenderer mode="index" {...col} />
+                          </a>
+                        ) : (
+                          <FieldRenderer mode="index" {...col} />
+                        )}
+                      </TableCell>
+                    )}
+                  </TableRow>
+                );
+              })}
             </TableBody>
           </Table>
         </div>
         {hasMore && (
-          <p className="text-sm text-muted-foreground mt-2">
-            Showing {items.length} of {total}
-          </p>
+          <Button
+            variant="link"
+            size="sm"
+            className="mt-2 px-0"
+            onClick={() => setExpanded(!expanded)}>
+            {expanded ? "Show less" : `Show ${total - initialLimit} more`}
+          </Button>
         )}
       </div>
     );
@@ -57,16 +77,27 @@ export function ShowField({ value }) {
   // Simple list mode
   return (
     <div>
-      <ul className="list-disc pl-5 space-y-1">
-        {items.map((item) =>
-          <li key={item.id}>{item.display}</li>
+      <div className="flex flex-wrap items-center gap-1.5">
+        {visibleItems.map((item) => {
+          const showPath = pathFor(item.id);
+          return showPath ? (
+            <a key={item.id} href={showPath} data-sg-visit>
+              <Badge variant="secondary" className="cursor-pointer">{item.display}</Badge>
+            </a>
+          ) : (
+            <Badge key={item.id} variant="secondary">{item.display}</Badge>
+          );
+        })}
+        {hasMore && (
+          <Button
+            variant="link"
+            size="sm"
+            className="px-0"
+            onClick={() => setExpanded(!expanded)}>
+            {expanded ? "Show less" : `Show ${total - initialLimit} more`}
+          </Button>
         )}
-      </ul>
-      {hasMore && (
-        <p className="text-sm text-muted-foreground mt-2">
-          Showing {items.length} of {total}
-        </p>
-      )}
+      </div>
     </div>
   );
 }

data/lib/generators/terrazzo/views/templates/pages/index.jsx

@@ -1,5 +1,5 @@
-import React from "react";
-import { useContent } from "@thoughtbot/superglue";
+import React, { useContext } from "react";
+import { useContent, NavigationContext } from "@thoughtbot/superglue";
 
 import { Layout } from "../components/Layout";
 import { SearchBar } from "../components/SearchBar";
@@ -17,6 +17,7 @@ import {
 } from "../components/ui/table";
 
 export default function AdminIndex() {
+  const { visit } = useContext(NavigationContext);
   const {
     table,
     searchBar,
@@ -27,6 +28,13 @@ export default function AdminIndex() {
     singularResourceName
   } = useContent();
 
+  const handleRowClick = (e, showPath) => {
+    if (!showPath) return;
+    if (e.target.closest("a, button, form")) return;
+    if (window.getSelection().toString()) return;
+    visit(showPath, {});
+  };
+
   return (
     <Layout
       navigation={navigation}
@@ -53,10 +61,19 @@ export default function AdminIndex() {
           </TableHeader>
           <TableBody>
             {table.rows.map((row) =>
-            <TableRow key={row.id}>
+            <TableRow
+              key={row.id}
+              className={row.showPath ? "cursor-pointer" : ""}
+              onClick={(e) => handleRowClick(e, row.showPath)}>
                 {row.cells.map((cell) =>
               <TableCell key={cell.attribute}>
-                    <FieldRenderer mode="index" {...cell} />
+                    {cell.showPath ? (
+                      <a href={cell.showPath} data-sg-visit className="hover:underline">
+                        <FieldRenderer mode="index" {...cell} />
+                      </a>
+                    ) : (
+                      <FieldRenderer mode="index" {...cell} />
+                    )}
                   </TableCell>
               )}
                 <TableCell>

data/lib/generators/terrazzo/views/templates/pages/show.jsx

@@ -69,7 +69,13 @@ export default function AdminShow() {
                     {attr.label}
                   </dt>
                   <dd className="col-span-2 text-sm">
-                    <FieldRenderer mode="show" {...attr} />
+                    {attr.showPath ? (
+                      <a href={attr.showPath} data-sg-visit className="hover:underline">
+                        <FieldRenderer mode="show" {...attr} />
+                      </a>
+                    ) : (
+                      <FieldRenderer mode="show" {...attr} />
+                    )}
                   </dd>
                 </div>
               )}

data/lib/terrazzo/field/has_many.rb

@@ -42,22 +42,17 @@ module Terrazzo
 
       def serialize_show_value
         limit = options.fetch(:limit, 5)
-        total = data.size
+        all_records = data.to_a
+        total = all_records.size
         col_attrs = options[:collection_attributes]
 
-        records = if limit && limit > 0
-          data.respond_to?(:limit) ? data.limit(limit) : data.first(limit)
-        else
-          data
-        end
-
         if col_attrs
-          serialize_with_collection_attributes(records, col_attrs, total, limit)
+          serialize_with_collection_attributes(all_records, col_attrs, total, limit)
         else
           {
-            items: records.map { |r| { id: r.id, display: display_name(r) } },
+            items: all_records.map { |r| { id: r.id, display: display_name(r) } },
             total: total,
-            hasMore: limit && limit > 0 ? total > limit : false
+            initialLimit: limit
           }
         end
       end
@@ -85,7 +80,7 @@ module Terrazzo
           headers: headers,
           items: items,
           total: total,
-          hasMore: limit && limit > 0 ? total > limit : false
+          initialLimit: limit
         }
       end
 

data/lib/terrazzo/version.rb

@@ -1,3 +1,3 @@
 module Terrazzo
-  VERSION = "0.2.1"
+  VERSION = "0.2.2"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: terrazzo
 version: !ruby/object:Gem::Version
-  version: 0.2.1
+  version: 0.2.2
 platform: ruby
 authors:
 - Terrazzo Contributors