Riverlea - add stream preview/edit to admin page

ext/riverlea/Civi/Api4/Action/RiverleaStream/Activate.php

@@ -0,0 +1,90 @@
+<?php
+
+/*
+ +--------------------------------------------------------------------+
+ | Copyright CiviCRM LLC. All rights reserved.                        |
+ |                                                                    |
+ | This work is published under the GNU AGPLv3 license with some      |
+ | permitted exceptions and without any warranty. For full license    |
+ | and copyright information, see https://civicrm.org/licensing       |
+ +--------------------------------------------------------------------+
+ */
+
+namespace Civi\Api4\Action\RiverleaStream;
+
+/**
+ * @inheritDoc
+ *
+ * NOTE: in practice it's a bit weird this is a batch action, as each doTask will
+ * supercede the override the previous one.
+ *
+ * But it works nicely with other API tooling and allows for
+ * activating where ID = 5 OR where name = my_stream OR ->first based
+ * on your chosen order by...
+ */
+class Activate extends \Civi\Api4\Generic\BasicBatchAction {
+
+  /**
+   * @var string
+   *
+   * Activate this stream as 'backend' theme, 'frontend' theme
+   * or 'both'
+   */
+  protected string $backOrFront = 'backend';
+
+  /**
+   * @inheritdoc
+   */
+  protected function getSelect(): array {
+    return [
+      'name', 'label',
+      'extension', 'file_prefix',
+      'css_file', 'css_file_dark',
+      'vars', 'vars_dark',
+      'custom_css', 'custom_css_dark',
+      'dark_frontend', 'dark_backend',
+    ];
+  }
+
+  /**
+   * @inheritdoc
+   *
+   * Set this stream as the theme for frontend or backend
+   */
+  protected function doTask($stream): array {
+    $streamName = $stream['name'];
+
+    // validate the theme is available for this stream
+    $available = \Civi::service('themes')->getAvailable();
+    if (empty($available[$streamName])) {
+      throw new \CRM_Core_Exception("This stream is not available to select as a Civi theme. Maybe it has been disabled?");
+    }
+
+    $themeSettings = [];
+
+    switch ($this->backOrFront) {
+      case 'backend':
+        $themeSettings[] = 'theme_backend';
+        break;
+
+      case 'frontend':
+        $themeSettings[] = 'theme_frontend';
+        break;
+
+      case 'both':
+        $themeSettings[] = 'theme_backend';
+        $themeSettings[] = 'theme_frontend';
+        break;
+
+      default:
+        throw new \CRM_Core_Exception("Invalid value '{$this->backOrFront}' for back or front - should be 'backend', 'frontend', or 'both'");
+    }
+
+    foreach ($themeSettings as $setting) {
+      \Civi::settings()->set($setting, $streamName);
+    }
+
+    return [];
+  }
+
+}

ext/riverlea/Civi/Riverlea/Page/ThemeAdmin.php

@@ -0,0 +1,59 @@
+<?php
+
+namespace Civi\Riverlea\Page;
+
+use Civi\Core\SettingsMetadata;
+use CRM_riverlea_ExtensionUtil as E;
+
+class ThemeAdmin extends \CRM_Core_Page {
+
+  public function run() {
+    // TODO: create a bundle? OR a bundler for webcomponents?
+    $resources = \Civi::resources();
+    $resources->addScriptFile(E::SHORT_NAME, 'js/utils.js', ['weight' => 100]);
+    $resources->addScriptFile(E::SHORT_NAME, 'js/editor.js', ['weight' => 200]);
+    $resources->addScriptFile(E::SHORT_NAME, 'js/stream-list.js', ['weight' => 200]);
+    $resources->addStyleFile(E::SHORT_NAME, 'css/stream-list.css');
+
+    if (!\Civi::service('riverlea.style_loader')->isActive()) {
+      \CRM_Core_Session::setStatus(E::ts('Stream previewer will not work whilst using a legacy theme'), ts('Stream Previews'), 'warning');
+    }
+
+    // get settings for the theme page
+    $allSettings = SettingsMetadata::getMetadata([], NULL, TRUE, FALSE, TRUE);
+    $themeSettings = array_filter($allSettings, fn ($setting) => isset($setting['settings_pages']['theme']));
+    // sort by theme page weight from the meta
+    \usort($themeSettings, fn ($a, $b) => $a['settings_pages']['theme']['weight'] - $b['settings_pages']['theme']['weight']);
+
+    foreach ($themeSettings as &$setting) {
+      $value = \Civi::settings()->get($setting['name']);
+
+      // render option values if applicable
+      // use raw value if not a valid option
+      if ($setting['options']) {
+        $valueLabel = $setting['options'][$value] ?? E::ts("%1 [unrecognised option]", [1 => $value]);
+      }
+      else {
+        $valueLabel = $value;
+      }
+
+      $setting['value'] = $value;
+      $setting['value_label'] = $valueLabel;
+    }
+
+    $this->assign('settings', $themeSettings);
+    $this->assign('settingsFormUrl', \Civi::url('backend://civicrm/admin/settings/theme'));
+
+    // when the settings form is submitted, the only way we have to refresh the values shown is by refreshing the whole page
+    // TODO: create a component to show settings values (with an endpoint that can render them like the above) and then
+    // refresh this component on submit
+    \Civi::resources()->addScript('
+      CRM.$(function($) {
+        $(document).on("crmPopupFormSuccess", () => window.location.reload());
+      });
+    ');
+
+    parent::run();
+  }
+
+}

ext/riverlea/Civi/Riverlea/StyleLoader.php

@@ -110,6 +110,12 @@ public function alterBundles(GenericHookEvent $e): void {
      */
     $bundle = $e->bundle;
 
+    if ($bundle->name === 'coreResources') {
+      if (\CRM_Core_Permission::check('administer CiviCRM')) {
+        $bundle->addScriptFile('riverlea', 'js/previewer.js');
+      }
+    }
+
     if ($bundle->name === 'bootstrap3') {
       $bundle->clear();
       $bundle->addStyleFile('riverlea', 'core/css/_bootstrap.css');
@@ -159,23 +165,38 @@ protected function getAvailableStreamMeta(): array {
   }
 
   public function getCssParams(): array {
-    $stream = \Civi::service('themes')->getActiveThemeKey();
+    $stream = $this->getStream();
 
     // we add the stream modified date to asset params as a cache buster
-    $streamMeta = $this->getAvailableStreamMeta()[$stream] ?? [];
-    $streamModified = $streamMeta['modified_date'] ?? NULL;
+    $streamModified = $stream['modified_date'] ?? NULL;
 
     $isFrontend = \CRM_Utils_System::isFrontendPage();
     $darkMode = $isFrontend ? \Civi::settings()->get('riverlea_dark_mode_frontend') : \Civi::settings()->get('riverlea_dark_mode_backend');
 
     return [
-      'stream' => $stream,
+      'stream' => $stream['name'],
       'modified' => $streamModified,
       'is_frontend' => $isFrontend,
       'dark_mode' => $darkMode,
     ];
   }
 
+  protected function getStream(): array {
+    $streamMeta = self::getAvailableStreamMeta();
+
+    // admins can preview other streams using a url param
+    if (\CRM_Core_Permission::check('administer CiviCRM')) {
+      $streamOverride = \CRM_Utils_Request::retrieve('stream_override', 'String');
+      // check override is a valid key before using
+      if (isset($streamMeta[$streamOverride])) {
+        return $streamMeta[$streamOverride];
+      }
+    }
+
+    $key = \Civi::service('themes')->getActiveThemeKey();
+    return $streamMeta[$key];
+  }
+
   /**
    * Generate asset content (when accessed via AssetBuilder).
    *

ext/riverlea/css/stream-list.css

@@ -0,0 +1,75 @@
+/* CSS rules for Riverlea stream admin */
+
+civi-riverlea-stream-list ul {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr) );
+  padding-left: 0;
+  gap: 1rem;
+  margin: 0;
+}
+
+civi-riverlea-stream-card {
+  display: block;
+}
+civi-riverlea-stream-card.is-set-preview > .panel {
+  outline: 2px solid var(--crm-warning-color);
+}
+civi-riverlea-stream-card .panel-heading {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+civi-riverlea-stream-card .btn.btn-stream-selected {
+  background-color: var(--crm-success-color);
+  color: var(--crm-success-text-color);
+}
+civi-riverlea-stream-card .btn.btn-set-preview.btn-stream-selected {
+  background-color: var(--crm-warning-color);
+  color: var(--crm-warning-text-color);
+}
+
+civi-riverlea-stream-card .civi-riverlea-stream-details code {
+  display: inline-block;
+}
+
+civi-riverlea-stream-list .civi-riverlea-stream-edit-dialog {
+  width: 100%;
+}
+
+civi-riverlea-stream-editor .civi-riverlea-stream-editor-preview-pane {
+  padding: 1rem;
+}
+civi-riverlea-stream-editor iframe {
+  width: 100%;
+  height: 100%;
+  border: var(--crm-border);
+}
+civi-riverlea-stream-editor,
+civi-riverlea-stream-editor fieldset {
+  display: flex;
+  flex-direction: column;
+  gap: var(--crm-flex-gap);
+}
+civi-riverlea-stream-editor .civi-riverlea-stream-colors-header {
+  display: flex;
+  justify-content: space-between;
+}
+civi-riverlea-stream-editor .civi-riverlea-stream-colors-header h3 {
+  padding-left: 0;
+}
+
+civi-riverlea-stream-variable {
+  display: flex;
+  flex-flow: row;
+  justify-content: space-between;
+}
+
+civi-riverlea-stream-variable input[type="color"] {
+  width: 3rem;
+}
+civi-riverlea-stream-variable .input-group {
+  display: flex;
+  flex-flow: row nowrap;
+  gap: 0.5rem;
+  align-items: center;
+}

ext/riverlea/info.xml

@@ -39,10 +39,13 @@
   <mixins>
     <mixin>theme-php@1.0.0</mixin>
     <mixin>setting-php@1.0.0</mixin>
-    <mixin>setting-admin@1.0.1</mixin>
     <mixin>mgd-php@2.0.0</mixin>
     <mixin>scan-classes@1.0.0</mixin>
     <mixin>entity-types-php@2.0.0</mixin>
+    <mixin>afform-entity-php@1.0.0</mixin>
+    <mixin>ang-php@1.0.0</mixin>
+    <mixin>menu-xml@1.0.0</mixin>
+    <mixin>smarty@1.0.3</mixin>
   </mixins>
   <upgrader>CiviMix\Schema\Riverlea\AutomaticUpgrader</upgrader>
 </extension>