Merge pull request #16088 from craftcms/bugfix/view-modes-and-card-view

Bugfix/view modes and card view
craftcms · Nov 12, 2024 · 9e981fd · 9e981fd
2 parents 3727555 + 19f9de8
commit 9e981fd
Show file tree

Hide file tree

Showing 9 changed files with 79 additions and 7 deletions.
diff --git a/src/base/Field.php b/src/base/Field.php
@@ -817,6 +817,10 @@ public function getPreviewHtml(mixed $value, ElementInterface $element): string
      */
     public function previewPlaceholderHtml(mixed $value, ?ElementInterface $element): string
     {
+        if (!$this instanceof PreviewableFieldInterface) {
+            return '';
+        }
+
         if ($value !== null) {
             return $value;
         }

diff --git a/src/fieldlayoutelements/BaseField.php b/src/fieldlayoutelements/BaseField.php
@@ -777,4 +777,30 @@ protected function translationDescription(?ElementInterface $element = null, boo
     {
         return null;
     }
+
+    /**
+     * Return the HTML that should be shown for the native field in the card preview.
+     * It can be used outside an element context, e.g. in a card view designer.
+     *
+     * @param mixed $value
+     * @param ElementInterface|null $element
+     * @return string
+     * @since 5.5.0
+     */
+    public function previewPlaceholderHtml(mixed $value, ?ElementInterface $element): string
+    {
+        if (!$this->previewable()) {
+            return '';
+        }
+
+        if ($value !== null) {
+            return $value;
+        }
+
+        if ($element !== null) {
+            return $element->{$this->attribute()};
+        }
+
+        return $this->label();
+    }
 }
diff --git a/src/helpers/Cp.php b/src/helpers/Cp.php
@@ -2624,6 +2624,8 @@ public static function cardPreviewHtml(FieldLayout $fieldLayout, array $cardElem
         foreach ($cardElements as $cardElement) {
             if ($cardElement instanceof CustomField) {
                 $previewHtml .= Html::tag('div', $cardElement->getField()->previewPlaceholderHtml(null, null));
+            } elseif ($cardElement instanceof BaseField) {
+                $previewHtml .= Html::tag('div', $cardElement->previewPlaceholderHtml(null, null));
             } else {
                 $previewHtml .= Html::tag('div', $elementType::attributePreviewHtml($cardElement));
             }

diff --git a/src/models/FieldLayout.php b/src/models/FieldLayout.php
@@ -845,6 +845,13 @@ public function getCardBodyElements(?ElementInterface $element = null, array $ca
                             $field = Craft::$app->getFields()->getFieldById($fieldId);
                             $layoutElement = new CustomField();
                             $layoutElement->setField($field);
+                        } else {
+                            // this will kick in for native field that have just been dragged into the field layout designer
+                            $fieldLabel = $cardElement['fieldLabel'];
+                            if ($fieldLabel) {
+                                $layoutElement['value'] = $layoutElement;
+                                $layoutElement['label'] = $fieldLabel;
+                            }
                         }
                     }
 

diff --git a/src/templates/_elements/sources.twig b/src/templates/_elements/sources.twig
@@ -2,15 +2,21 @@
 {% set keyPrefix = keyPrefix ?? '' %}
 {% set isTopLevel = not keyPrefix %}
 
-{% if isTopLevel and (baseSortOptions is not defined or tableColumns is not defined or viewModes is not defined) %}
+{% if isTopLevel and (baseSortOptions is not defined or tableColumns is not defined) %}
     {% set elementInstance = craft.app.elements.createElement(elementType) %}
     {% set baseSortOptions = baseSortOptions ?? elementInstance.sortOptions()|map((option, key) => {
         label: option.label ?? option,
         attr: option.attribute ?? option.orderBy ?? key,
         defaultDir: option.defaultDir ?? 'asc',
     })|values %}
     {% set tableColumns = tableColumns ?? craft.app.elementSources.getAvailableTableAttributes(elementType) %}
-    {% set viewModes = viewModes ?? elementInstance.indexViewModes() %}
+{% endif %}
+
+{% if viewModes is not defined %}
+    {% if elementInstance is not defined %}
+        {% set elementInstance = craft.app.elements.createElement(elementType) %}
+    {% endif %}
+    {% set viewModes = elementInstance.indexViewModes() %}
 {% endif %}
 
 {% macro sourceLink(key, source, isTopLevel, elementType, baseSortOptions, tableColumns, defaultTableColumns, viewModes) %}
@@ -50,7 +56,7 @@
             disabled: source.disabled ?? false,
             'default-filter': source.defaultFilter ?? false,
             'default-view-mode': source.defaultViewMode ?? false,
-            'view-modes': isTopLevel ? viewModes : [],
+            'view-modes': viewModes ?? [],
         }|merge(source.data ?? {}),
         html: _self.sourceInnerHtml(source)
     }) }}

diff --git a/src/web/assets/cp/dist/cp.js b/src/web/assets/cp/dist/cp.js
diff --git a/src/web/assets/cp/dist/cp.js.map b/src/web/assets/cp/dist/cp.js.map
diff --git a/src/web/assets/cp/src/js/BaseElementIndex.js b/src/web/assets/cp/src/js/BaseElementIndex.js
@@ -2292,7 +2292,9 @@ Craft.BaseElementIndex = Garnish.Base.extend(
         }
         // Just use the first one
         else {
-          viewMode = this.sourceViewModes[0].mode;
+          if (this.sourceViewModes && this.sourceViewModes.length) {
+            viewMode = this.sourceViewModes[0].mode;
+          }
         }
       }
 
@@ -2532,7 +2534,12 @@ Craft.BaseElementIndex = Garnish.Base.extend(
 
     selectViewMode: function (viewMode, force) {
       // Make sure that the current source supports it
-      if (!force && !this.doesSourceHaveViewMode(viewMode)) {
+      if (
+        !force &&
+        !this.doesSourceHaveViewMode(viewMode) &&
+        this.sourceViewModes &&
+        this.sourceViewModes.length
+      ) {
         viewMode = this.sourceViewModes[0].mode;
       }
 

diff --git a/src/web/assets/cp/src/js/FieldLayoutDesigner.js b/src/web/assets/cp/src/js/FieldLayoutDesigner.js
@@ -1324,6 +1324,15 @@ Craft.FieldLayoutDesigner.Element = Garnish.Base.extend({
   },
 
   destroy: function () {
+    if (
+      this.tab.designer.settings.withCardViewDesigner &&
+      this.config.providesThumbs
+    ) {
+      let cvd = this.tab.designer.$cvd?.data('cvd');
+      cvd.showThumb = false;
+      cvd.updatePreview();
+    }
+
     this.tab.updateConfig((config) => {
       const index = this.index;
       if (index === -1) {
@@ -1956,6 +1965,7 @@ Craft.FieldLayoutDesigner.CardViewDesigner = Garnish.Base.extend({
       let element = {
         value: $(checkedItems[i]).val(),
         fieldId: $(checkedItems[i]).data('fieldId') ?? null,
+        fieldLabel: $(checkedItems[i]).data('fieldLabel') ?? null,
       };
 
       cardElements.push(element);
@@ -1969,6 +1979,10 @@ Craft.FieldLayoutDesigner.CardViewDesigner = Garnish.Base.extend({
       return null;
     }
 
+    if (!Garnish.hasAttr(element.$container, 'data-previewable')) {
+      return null;
+    }
+
     let $draggable = $('<div class="checkbox-select-item"/>');
     let $moveIcon = $(
       '<a class="move icon draggable-handle disabled"/>'
@@ -1981,6 +1995,7 @@ Craft.FieldLayoutDesigner.CardViewDesigner = Garnish.Base.extend({
         checked: false,
         data: {
           'field-id': element.fieldId,
+          'field-label': this.getCheckboxLabel(element.$container),
         },
       })
       .appendTo($draggable);
@@ -1992,8 +2007,13 @@ Craft.FieldLayoutDesigner.CardViewDesigner = Garnish.Base.extend({
   },
 
   removeCheckbox: function (element) {
+    if (!Garnish.hasAttr(element.$container, 'data-previewable')) {
+      return null;
+    }
+
     let $draggable = this.findCheckboxByUid(element.uid);
     if ($draggable !== null) {
+      $draggable.find('input[type="checkbox"]').prop('checked', false);
       $draggable.remove();
     }