fix: Fixed an issue where the Short Link wouldn't display properly in…

… the element index view ([#301](#301))
nystudio107 · Jun 13, 2024 · 150d666 · 150d666
1 parent e4a73e5
commit 150d666
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 8 deletions.
diff --git a/src/fields/ShortLink.php b/src/fields/ShortLink.php
@@ -10,7 +10,6 @@
 namespace nystudio107\retour\fields;
 
 use Craft;
-use craft\base\Element;
 use craft\base\ElementInterface;
 use craft\base\Field;
 use craft\base\PreviewableFieldInterface;
@@ -30,11 +29,10 @@
  */
 class ShortLink extends Field implements PreviewableFieldInterface
 {
+    protected static $allowShortLinkUpdates = true;
     public $redirectSrcMatch = 'pathonly';
     public $redirectHttpCode = 301;
 
-    protected static $allowShortLinkUpdates = true;
-
     // Static Methods
 
     // =========================================================================
@@ -171,11 +169,17 @@ public function afterElementDelete(ElementInterface $element)
     public function getTableAttributeHtml($value, ElementInterface $element): string
     {
         $decoded = Json::decodeIfJson($value);
-        if ($decoded) {
-            return $decoded['legacyUrl'] ?? '';
+        if (is_array($decoded)) {
+            $value = $decoded['legacyUrl'] ?? '';
         }
-
-        // Render the input template
-        return $value;
+        // Render the preview template
+        return Craft::$app->getView()->renderTemplate(
+            'retour/_components/fields/ShortLink_preview',
+            [
+                'name' => $this->handle,
+                'value' => $value,
+                'field' => $this,
+            ]
+        );
     }
 }
diff --git a/src/templates/_components/fields/ShortLink_preview.twig b/src/templates/_components/fields/ShortLink_preview.twig
@@ -0,0 +1,24 @@
+{% import "_includes/forms" as forms %}
+
+{%- set class = ['retour-shortlink-preview'] %}
+{%- set class = (class ?? [])|explodeClass|merge([
+]|filter) %}
+
+{% set config = {
+    name: name,
+    text: value,
+    class: class,
+    readonly: true,
+} %}
+
+<style>
+    .retour-shortlink-preview {
+        padding-left: 25px;
+        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAAoCAMAAACVZWnNAAAAP1BMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACzJYIvAAAAFXRSTlMAS09SBUIRSAglPhcOMik2LTgbOh9vs7GRAAABUklEQVRIx93USXaEMAwEUEklj4yhuf9ZYxkSkp3Vu6RW7vf6Y0nG0L9LtOS36FkBCMKqbqo7hDklZgT12g9wc7AnSFCnNcR7KRXMqOq2IdpyMX04LV73nBdhqU67fZWaE0vw2eVpM8gw1g1mbenHq9ndVv6yD+lWvwtpTxseWCtaWs2PnZgZ05CNzCwz0V6n29qJbzSG0f6qdEI42u9u0zyIhVGICpKk3G3LSNGzXju/tE1YGCtplSQjNldO89Vz7EOX2joGhmwQ27NP+6MfLiOSxiOP2d7tJNclWmAVDEWrmdWWOxgn6UsYg3jFbe0Cc7uMs415DMfL6t2C7S/Dr8YmjOXn+3xaF+cYDvK7xmJ2cOPnxj5WQn4Lr93O5MV+a5il3APbnZYK2HQ/Za+lnIwsMR7BbfsHpCEAftu1cGphRvVapVgZFl7onUxracn0N/IJlGEKSScEDxoAAAAASUVORK5CYII=");
+        background-repeat: no-repeat;
+        background-position: left center;
+        background-size: 30px 20px;
+    }
+</style>
+
+{{ tag('div', config) }}