Render status icons and toggles

Author: daun

DashboardPanelCollection.css

@@ -135,6 +135,14 @@ class DashboardPanelCollection extends DashboardPanel
         if ($markup === 'actions__') {
             $content = $this->renderPageActions($page);
         }
+        // Special case: page status
+        elseif ($markup === 'status__') {
+            $content = $this->renderStatusIcon($page);
+        }
+        // Special case: published status toggle
+        elseif (in_array($markup, ['published__', 'visible__'])) {
+            $content = $this->renderStatusToggle($page, $markup);
+        }
         // Special case: page icon
         elseif ($markup === 'page_icon') {
             $content = $this->renderIcon($page->getIcon());
@@ -232,6 +240,20 @@ class DashboardPanelCollection extends DashboardPanel
                             $changed = true;
                         }
                         break;
+                    case 'show':
+                        $show = !!$value;
+                        $visible = !$page->isHidden();
+                        if ($page->editable() && $show && !$visible) {
+                            $page->removeStatus(Page::statusHidden);
+                            $page->save('status');
+                            $changed = true;
+                        }
+                        if (!$show && $visible) {
+                            $page->addStatus(Page::statusHidden);
+                            $page->save('status');
+                            $changed = true;
+                        }
+                        break;
                     case 'trash':
                         $trash = !!$value;
                         $trashed = $page->isTrash();
@@ -284,6 +306,7 @@ class DashboardPanelCollection extends DashboardPanel
         $this->listPage = $this->getPageFromObjectOrSelectorOrID($this->data['list'] ?? null);
         $this->editMode = $this->data['editMode'] ?? self::windowModeBlank;
         $this->viewMode = $this->data['viewMode'] ?? self::windowModeBlank;
+        $this->addUrlParams = $this->data['addUrlParams'] ?? [];
 
         if (is_string($this->collection)) {
             $this->collection = $this->pages->find($this->collection);
@@ -404,6 +427,7 @@ class DashboardPanelCollection extends DashboardPanel
                 'modalAutoclose'     => self::modalAutocloseAdd,
                 'reloadOnModalClose' => true,
             ];
+            $action = $this->setQueryParameter($action, $this->addUrlParams);
             if (self::windowModeModal === $mode) {
                 $action = $this->setQueryParameter($action, 'modal', 1);
             }
@@ -554,4 +578,61 @@ class DashboardPanelCollection extends DashboardPanel
 
         return implode(' ', $thumbnails);
     }
+
+    /**
+     * Render status icon.
+     */
+    protected function renderStatusIcon(Page $page)
+    {
+        if ($page->hasStatus(Page::statusTrash)) {
+            $icon = 'trash-can';
+            $tooltip = $this->_('In Trash');
+        } elseif ($page->hasStatus(Page::statusUnpublished)) {
+            $icon = 'pen';
+            $tooltip = $this->_('Draft');
+        } elseif ($page->hasStatus(Page::statusHidden)) {
+            $icon = 'eye-slash';
+            $tooltip = $this->_('Hidden');
+        } else {
+            $icon = 'circle-check';
+            $tooltip = $this->_('Published');
+        }
+        $icon = $this->renderIcon($icon);
+        return "<span class='tooltip' title='{$tooltip}'>{$icon}</span>";
+    }
+
+    /**
+     * Render publish/visibility toggle.
+     */
+    protected function renderStatusToggle(Page $page, $status = 'published')
+    {
+        $status = $this->wire()->sanitizer->option($status, ['published', 'visible']) ?? 'published';
+
+        switch ($status) {
+        case 'visible':
+            $action = 'show';
+            $statusFlag = Page::statusHidden;
+            $labelInactive = $this->_('Hidden');
+            $labelActive = $this->_('Visible');
+            break;
+        case 'published':
+        default:
+            $action = 'publish';
+            $statusFlag = Page::statusUnpublished;
+            $labelInactive = $this->_('Draft');
+            $labelActive = $this->_('Published');
+            break;
+        }
+
+        $active = !$page->hasStatus($statusFlag);
+        $checked = $active ? 'checked' : '';
+        $tooltip = $active ? $labelActive : $labelInactive;
+
+        return "
+            <label class='uk-switch tooltip' for='page-{$status}-{$page}' title='{$tooltip}'>
+                <input type='checkbox' id='page-{$status}-{$page}' name='actions[{$action}][{$page}]' value='1' {$checked}>
+                <div class='uk-switch-slider'></div>
+            </label>
+        ";
+    }
 }

DashboardPanelCollection.js

@@ -86,3 +86,63 @@
     border-radius: var(--dashboard-panel-collection-color-radius);
   }
 }
+
+/* Switch wrapper */
+
+.uk-switch {
+  --switch-width: 1.9em;
+  --switch-height: 1.1em;
+  --switch-pointer-offset: 2px;
+  --switch-pointer-size: calc(var(--switch-height) - 2 * var(--switch-pointer-offset));
+  --switch-active-color: var(--dashboard-color-button-hover-bg, currentColor);
+  position: relative;
+  display: inline-block;
+  width: var(--switch-width);
+  height: var(--switch-height);
+  transform: translateY(0.2em);
+}
+
+/* Hide default HTML checkbox */
+
+.uk-switch input {
+  display: none;
+}
+
+/* Switch slider */
+
+.uk-switch-slider {
+  background-color: rgba(0,0,0,0.22);
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  border-radius: 999vw;
+  bottom: 0;
+  cursor: pointer;
+  transition-property: background-color;
+	transition-duration: .2s;
+}
+
+/* Switch pointer */
+.uk-switch-slider:before {
+  content: '';
+  background-color: #fff;
+  position: absolute;
+  width: var(--switch-pointer-size);
+  height: var(--switch-pointer-size);
+  left: var(--switch-pointer-offset);
+  bottom: var(--switch-pointer-offset);
+  border-radius: 50%;
+  transition-property: transform, box-shadow;
+	transition-duration: .2s;
+}
+
+/* Active slider */
+input:checked + .uk-switch-slider {
+  background-color: var(--switch-active-color) !important;
+}
+
+/* Animate to active state */
+input:checked + .uk-switch-slider:before {
+  transform: translateX(-100%) translateX(calc(var(--switch-width) - var(--switch-pointer-offset) * 2));
+}

DashboardPanelCollection.module

@@ -33,6 +33,18 @@ function initPanel($panel) {
       $panel.trigger('reload', { animate: false, params });
     });
   }
+
+  const $actionInputs = $panel.find('input[name^="actions["]');
+  if ($actionInputs.length) {
+    $actionInputs.on('change', (event) => {
+      event.preventDefault();
+      const name = event.target.name;
+      const checked = event.target.checked;
+      const value = checked ? 1 : '';
+      const params = { [name]: value };
+      $panel.trigger('reload', { animate: false, params });
+    });
+  }
 }
 
 $(document).on('dashboard:panel(collection)', (event, { $element }) => {