FEATURE: Introduce htmx for workspace module delete action

neos · Jul 18, 2024 · e42f94b · e42f94b
1 parent f77cb5f
commit e42f94b
Show file tree

Hide file tree

Showing 9 changed files with 88 additions and 3 deletions.
diff --git a/Neos.Workspace.Ui/Classes/Controller/WorkspaceController.php b/Neos.Workspace.Ui/Classes/Controller/WorkspaceController.php
@@ -46,10 +46,12 @@
 use Neos\Flow\I18n\Exception\InvalidFormatPlaceholderException;
 use Neos\Flow\Mvc\ActionRequest;
 use Neos\Flow\Mvc\Exception\StopActionException;
+use Neos\Flow\Mvc\View\ViewInterface;
 use Neos\Flow\Package\PackageManager;
 use Neos\Flow\Property\PropertyMapper;
 use Neos\Flow\Security\Account;
 use Neos\Flow\Security\Context;
+use Neos\Fusion\View\FusionView;
 use Neos\Media\Domain\Model\AssetInterface;
 use Neos\Media\Domain\Model\ImageInterface;
 use Neos\Neos\Controller\Module\AbstractModuleController;
@@ -79,6 +81,8 @@ class WorkspaceController extends AbstractModuleController
     use ModuleTranslationTrait;
     use NodeTypeWithFallbackProvider;
 
+    protected $defaultViewObjectName = FusionView::class;
+
     #[Flow\Inject]
     protected ContentRepositoryRegistry $contentRepositoryRegistry;
 
@@ -103,6 +107,18 @@ class WorkspaceController extends AbstractModuleController
     #[Flow\Inject]
     protected WorkspaceProvider $workspaceProvider;
 
+    protected function initializeView(ViewInterface $view): void
+    {
+        parent::initializeView($view);
+        // If we're in a HTMX-request...
+        if ($this->request->getHttpRequest()->hasHeader('HX-Request')) {
+            // We append an "/htmx" segment to the fusion path, changing it from "<PackageKey>/<ControllerName>/<ActionName>" to "<PackageKey>/<ControllerName>/<ActionName>/htmx"
+            $htmxFusionPath = str_replace(['\\Controller\\', '\\'], ['\\', '/'], $this->request->getControllerObjectName());
+            $htmxFusionPath .= '/' . $this->request->getControllerActionName() . '/htmx';
+            $view->setOption('fusionPath', $htmxFusionPath);
+        }
+    }
+
     /**
      * Display a list of unpublished content
      */

diff --git a/Neos.Workspace.Ui/Configuration/Settings.Neos.yaml b/Neos.Workspace.Ui/Configuration/Settings.Neos.yaml
@@ -10,6 +10,8 @@ Neos:
             icon: fas fa-th-large
             mainStylesheet: 'Lite'
             additionalResources:
+              javaScripts:
+                'Neos.Workspace.Ui': 'resource://Neos.Workspace.Ui/Public/Scripts/htmx.min.js'
               styleSheets:
                 'Neos.Workspace.Ui': 'resource://Neos.Workspace.Ui/Public/Styles/Module.css'
 

diff --git a/Neos.Workspace.Ui/Configuration/Views.yaml b/Neos.Workspace.Ui/Configuration/Views.yaml
@@ -1,11 +1,11 @@
-- requestFilter: 'isPackage("Neos.Workspace.Ui") && isController("Workspace") && isFormat("html")'
+- requestFilter: 'isPackage("Neos.Workspace.Ui") && isController("Workspace") && isFormat("html") && isAction("show")'
   options:
     layoutRootPathPattern: 'resource://Neos.Neos/Private/Layouts'
     partialRootPaths:
       - 'resource://Neos.Workspace.Ui/Private/Partials'
       - 'resource://Neos.Neos/Private/Partials'
 
-- requestFilter: 'isPackage("Neos.Workspace.Ui") && isController("Workspace") && isFormat("html") && (isAction("index") || isAction("new") || isAction("edit"))'
+- requestFilter: 'isPackage("Neos.Workspace.Ui") && isController("Workspace") && (isFormat("html") || isFormat("htmx")) && (isAction("index") || isAction("new") || isAction("edit"))'
   viewObjectName: 'Neos\Fusion\View\FusionView'
   options:
     fusionPathPatterns:

diff --git a/Neos.Workspace.Ui/Resources/Private/Fusion/Components/FlashMessages.fusion b/Neos.Workspace.Ui/Resources/Private/Fusion/Components/FlashMessages.fusion
@@ -2,7 +2,11 @@ prototype(Neos.Workspace.Ui:Component.FlashMessages) < prototype(Neos.Fusion:Com
     flashMessages = ${[]}
 
     renderer = afx`
-        <div id="neos-notification-container" class="neos-notification-top" @if.hasMessages={props.flashMessages}>
+        <div
+          id="neos-notification-container"
+          class="neos-notification-top"
+          hx-swap-oob="true"
+        >
             <Neos.Fusion:Loop items={props.flashMessages} itemName="message">
                 <Neos.Workspace.Ui:Component.FlashMessages.Message message={message}/>
             </Neos.Fusion:Loop>

diff --git a/Neos.Workspace.Ui/Resources/Private/Fusion/Components/Modals/Delete.fusion b/Neos.Workspace.Ui/Resources/Private/Fusion/Components/Modals/Delete.fusion
@@ -34,8 +34,13 @@ prototype(Neos.Workspace.Ui:Component.Modal.Delete) < prototype(Neos.Fusion:Comp
         </button>
         <Neos.Fusion.Form:Form
           form.target.action="delete"
+          form.target.format="htmx"
           form.target.arguments.workspaceName={props.workspaceName}
           class="neos-inline"
+          attributes.hx-post={form.getTarget()}
+          attributes.hx-target="closest tr"
+          attributes.hx-swap="delete"
+          attributes.hx-indicator="#indicator"
         >
           <button
             type="submit"

diff --git a/Neos.Workspace.Ui/Resources/Private/Fusion/Views/Index.fusion b/Neos.Workspace.Ui/Resources/Private/Fusion/Views/Index.fusion
@@ -11,10 +11,23 @@ Neos.Workspace.Ui.WorkspaceController.index = Neos.Fusion:Component {
     action = 'new'
   }
 
+  htmxConfig = '[
+    {"code": "204", "swap": false},
+    {"code": "[23]..", "swap": true},
+    {"code": "422", "swap": true},
+    {"code": "[45]..", "swap": false, "error":true}
+  ]'
+
   renderer = afx`
+    <meta name="htmx-config" content={props.htmxConfig}/>
     <Neos.Workspace.Ui:Component.FlashMessages flashMessages={props.flashMessages}/>
     <main class="neos-content neos-container-fluid">
       <div class="neos-row-fluid">
+        <div id="indicator" class="htmx-indicator loadingIndicator__container">
+          <div class="loadingIndicator">
+            <div class="loadingIndicator__bar"></div>
+          </div>
+        </div>
         <Neos.Workspace.Ui:Component.WorkspaceTable
           userWorkspace={props.userWorkspace}
           workspacesAndChangeCounts={props.workspacesAndChangeCounts}

diff --git a/Neos.Workspace.Ui/Resources/Private/Fusion/Views/Index.htmx.fusion b/Neos.Workspace.Ui/Resources/Private/Fusion/Views/Index.htmx.fusion
@@ -0,0 +1,7 @@
+Neos.Workspace.Ui.WorkspaceController.index.htmx = Neos.Fusion:Component {
+  flashMessages = ${flashMessages}
+
+  renderer = afx`
+    <Neos.Workspace.Ui:Component.FlashMessages flashMessages={props.flashMessages}/>
+  `
+}
diff --git a/Neos.Workspace.Ui/Resources/Public/Scripts/htmx.min.js b/Neos.Workspace.Ui/Resources/Public/Scripts/htmx.min.js
diff --git a/Neos.Workspace.Ui/Resources/Public/Styles/Module.css b/Neos.Workspace.Ui/Resources/Public/Styles/Module.css
@@ -165,3 +165,40 @@ td.workspace-action-column {
   width: 100%;
   max-width: 500px;
 }
+
+/**
+ * Indicator styles
+ */
+.loadingIndicator__container {
+  left: 0;
+  top: var(--unit);
+  height: 2px;
+  position: absolute;
+  width: 100vw;
+  z-index: var(--zIndex-LoadingIndicatorContainer);
+}
+
+.loadingIndicator {
+  height: 2px;
+  position: relative;
+  width: 100%;
+}
+.loadingIndicator__bar {
+  height: 100%;
+  position: relative;
+  background-color: #ff8700;
+  animation: cssload-width 2s cubic-bezier(.45, 0, 1, 1) infinite;
+}
+
+@keyframes cssload-width {
+  0%,
+  100% {
+    transition-timing-function: cubic-bezier(1, 0, .65, .85);
+  }
+  0% {
+    width: 0;
+  }
+  100% {
+    width: 100%;
+  }
+}