Refactor all block link settings to be URLs rather than onclick handlers. Add settings for linking card titles in card list blocks

packages/client/manifest.json

@@ -2595,6 +2595,11 @@
         "key": "linkURL",
         "label": "Link URL"
       },
+      {
+        "type": "boolean",
+        "key": "linkPeek",
+        "label": "Open link in modal"
+      },
       {
         "type": "boolean",
         "key": "horizontal",
@@ -2730,18 +2735,23 @@
           {
             "type": "boolean",
             "key": "showTitleButton",
-            "label": "Show button",
+            "label": "Show link button",
             "defaultValue": false
           },
+          {
+            "type": "boolean",
+            "label": "Open link in modal",
+            "key": "titleButtonPeek"
+          },
           {
             "type": "text",
             "key": "titleButtonText",
             "label": "Button text"
           },
           {
-            "type": "event",
-            "label": "Button action",
-            "key": "titleButtonOnClick"
+            "type": "url",
+            "label": "Button link",
+            "key": "titleButtonURL"
           }
         ]
       },
@@ -2838,7 +2848,22 @@
             "key": "cardImageURL",
             "label": "Image URL",
             "nested": true
-
+          },
+          {
+            "type": "boolean",
+            "key": "linkCardTitle",
+            "label": "Link card title"
+          },
+          {
+            "type": "boolean",
+            "key": "cardPeek",
+            "label": "Open link in modal"
+          },
+          {
+            "type": "url",
+            "label": "Link screen",
+            "key": "cardURL",
+            "nested": true
           },
           {
             "type": "boolean",
@@ -2855,7 +2880,6 @@
             "key": "cardButtonText",
             "label": "Button text",
             "nested": true
-
           },
           {
             "type": "event",
@@ -2872,7 +2896,12 @@
           {
             "type": "boolean",
             "key": "showTitleButton",
-            "label": "Show button"
+            "label": "Show link button"
+          },
+          {
+            "type": "boolean",
+            "label": "Open link in modal",
+            "key": "titleButtonPeek"
           },
           {
             "type": "text",
@@ -2880,9 +2909,21 @@
             "label": "Button text"
           },
           {
-            "type": "event",
-            "label": "Button action",
-            "key": "titleButtonOnClick"
+            "type": "url",
+            "label": "Button link",
+            "key": "titleButtonURL"
+          }
+        ]
+      },
+      {
+        "section": true,
+        "name": "Advanced",
+        "settings": [
+          {
+            "type": "field",
+            "label": "ID column for linking (appended to URL)",
+            "key": "linkColumn",
+            "placeholder": "Default"
           }
         ]
       }

packages/client/src/components/app/SpectrumCard.svelte

@@ -8,15 +8,22 @@
   export let description
   export let imageURL
   export let linkURL
+  export let linkPeek
   export let horizontal
   export let showButton
   export let buttonText
   export let buttonOnClick
 
-  const { styleable, linkable } = getContext("sdk")
+  const { styleable, routeStore } = getContext("sdk")
   const component = getContext("component")
 
-  $: external = linkURL && !linkURL.startsWith("/")
+  const handleLink = e => {
+    if (!linkURL) {
+      return
+    }
+    e.preventDefault()
+    routeStore.actions.navigate(linkURL, linkPeek)
+  }
 </script>
 
 <div
@@ -37,16 +44,10 @@
       <div class="spectrum-Card-header">
         <div
           class="spectrum-Card-title spectrum-Heading spectrum-Heading--sizeXS"
+          on:click={handleLink}
+          class:link={linkURL}
         >
-          {#if linkURL}
-            {#if external}
-              <a href={linkURL}>{title || "Card Title"}</a>
-            {:else}
-              <a use:linkable href={linkURL}>{title || "Card Title"}</a>
-            {/if}
-          {:else}
           {title || "Card Title"}
-          {/if}
         </div>
       </div>
       {#if subtitle}
@@ -88,11 +89,12 @@
   .spectrum-Card-container {
     padding: var(--spectrum-global-dimension-size-50) 0;
   }
-  .spectrum-Card-title :global(a) {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-    width: 100%;
+  .spectrum-Card-title.link {
+    transition: color 130ms ease-in-out;
+  }
+  .spectrum-Card-title.link:hover {
+    cursor: pointer;
+    color: var(--spectrum-link-primary-m-text-color-hover);
   }
   .spectrum-Card-subtitle {
     text-overflow: ellipsis;
@@ -103,14 +105,6 @@
     word-wrap: anywhere;
     white-space: pre-wrap;
   }
-  a {
-    transition: color 130ms ease-in-out;
-    color: var(--spectrum-alias-text-color);
-  }
-  a:hover {
-    color: var(--spectrum-link-primary-m-text-color-hover);
-  }
-
   .horizontal .spectrum-Card-coverPhoto {
     flex: 0 0 160px;
     height: auto;

packages/client/src/components/app/blocks/CardListWithSearch.svelte

@@ -14,15 +14,20 @@
   export let limit
   export let showTitleButton
   export let titleButtonText
-  export let titleButtonOnClick
+  export let titleButtonURL
+  export let titleButtonPeek
   export let cardTitle
   export let cardSubtitle
   export let cardDescription
   export let cardImageURL
+  export let linkCardTitle
+  export let cardURL
+  export let cardPeek
   export let cardHorizontal
   export let showCardButton
   export let cardButtonText
   export let cardButtonOnClick
+  export let linkColumn
 
   const { API, styleable } = getContext("sdk")
   const context = getContext("context")
@@ -37,11 +42,27 @@
 
   let formId
   let dataProviderId
+  let repeaterId
   let schema
 
   $: enrichedSearchColumns = enrichSearchColumns(searchColumns, schema)
   $: enrichedFilter = enrichFilter(filter, enrichedSearchColumns, formId)
   $: cardWidth = cardHorizontal ? 420 : 300
+  $: fullCardURL = buildFullCardUrl(
+    linkCardTitle,
+    cardURL,
+    repeaterId,
+    linkColumn
+  )
+  $: titleButtonAction = [
+    {
+      "##eventHandlerType": "Navigate To",
+      parameters: {
+        peek: titleButtonPeek,
+        url: titleButtonURL,
+      },
+    },
+  ]
 
   // Enrich the default filter with the specified search fields
   const enrichFilter = (filter, columns, formId) => {
@@ -75,6 +96,16 @@
     return enrichedColumns.slice(0, 3)
   }
 
+  // Builds a full details page URL for the card title
+  const buildFullCardUrl = (link, url, repeaterId, linkColumn) => {
+    if (!link || !url || !repeaterId) {
+      return null
+    }
+    const col = linkColumn || "_id"
+    const split = url.split("/:")
+    return `${split[0]}/{{ [${repeaterId}].[${col}] }}`
+  }
+
   // Load the datasource schema on mount so we can determine column types
   onMount(async () => {
     if (dataSource) {
@@ -114,7 +145,7 @@
               <BlockComponent
                 type="button"
                 props={{
-                  onClick: titleButtonOnClick,
+                  onClick: titleButtonAction,
                   text: titleButtonText,
                   type: "cta",
                 }}
@@ -137,6 +168,7 @@
       >
         <BlockComponent
           type="repeater"
+          bind:id={repeaterId}
           context="repeater"
           props={{
             dataProvider: `{{ literal [${dataProviderId}] }}`,
@@ -162,6 +194,8 @@
               showButton: showCardButton,
               buttonText: cardButtonText,
               buttonOnClick: cardButtonOnClick,
+              linkURL: fullCardURL,
+              linkPeek: cardPeek,
             }}
             styles={{
               width: "auto",

packages/client/src/components/app/blocks/TableWithSearch.svelte

@@ -22,7 +22,8 @@
   export let linkPeek
   export let showTitleButton
   export let titleButtonText
-  export let titleButtonOnClick
+  export let titleButtonURL
+  export let titleButtonPeek
 
   const { API, styleable } = getContext("sdk")
   const context = getContext("context")
@@ -41,6 +42,15 @@
 
   $: enrichedSearchColumns = enrichSearchColumns(searchColumns, schema)
   $: enrichedFilter = enrichFilter(filter, enrichedSearchColumns, formId)
+  $: titleButtonAction = [
+    {
+      "##eventHandlerType": "Navigate To",
+      parameters: {
+        peek: titleButtonPeek,
+        url: titleButtonURL,
+      },
+    },
+  ]
 
   // Enrich the default filter with the specified search fields
   const enrichFilter = (filter, columns, formId) => {
@@ -113,7 +123,7 @@
               <BlockComponent
                 type="button"
                 props={{
-                  onClick: titleButtonOnClick,
+                  onClick: titleButtonAction,
                   text: titleButtonText,
                   type: "cta",
                 }}