TASK: Implement workspace delete modal as popover

neos · Jun 17, 2024 · 04aaa45 · 04aaa45
1 parent eebea06
commit 04aaa45
Show file tree

Hide file tree

Showing 4 changed files with 127 additions and 8 deletions.
diff --git a/Neos.Workspace.Ui/Configuration/Views.yaml b/Neos.Workspace.Ui/Configuration/Views.yaml
@@ -10,4 +10,5 @@
   options:
     fusionPathPatterns:
       - 'resource://Neos.Fusion/Private/Fusion'
+      - 'resource://Neos.Fusion.Form/Private/Fusion'
       - 'resource://Neos.Workspace.Ui/Private/Fusion'
diff --git a/Neos.Workspace.Ui/Resources/Private/Fusion/Components/Modals/Delete.fusion b/Neos.Workspace.Ui/Resources/Private/Fusion/Components/Modals/Delete.fusion
@@ -0,0 +1,50 @@
+prototype(Neos.Workspace.Ui:Component.Modal.Delete) < prototype(Neos.Fusion:Component) {
+  workspaceName = ''
+
+  @private {
+    popoverId = ${'workspace-modal-delete-' + props.workspaceName}
+  }
+
+  renderer = afx`
+    <div popover id={private.popoverId}>
+      <header>
+        <button
+          type="button"
+          class="neos-close neos-button"
+          popovertarget={private.popoverId}
+          popovertargetaction="close"
+        >
+          <Neos.Workspace.Ui:Component.Icon icon="times"/>
+        </button>
+        <div class="neos-header">
+          {I18n.translate('workspaces.dialog.confirmWorkspaceDeletion', 'Do you really want to delete the workspace?', [props.workspaceTitle], 'Main', 'Neos.Workspace.Ui')}
+        </div>
+      </header>
+      <section>
+        <p>{I18n.translate('workspaces.dialog.thisWillDeleteTheWorkspace', 'This will delete the workspace including all unpublished content. This operation cannot be undone.', [], 'Modules', 'Neos.Workspace.Ui')}</p>
+      </section>
+      <footer>
+        <button
+          type="button"
+          class="neos-button"
+          popovertarget={private.popoverId}
+          popovertargetaction="close"
+        >
+          {I18n.translate('cancel', 'Cancel', [], 'Modules', 'Neos.Workspace.Ui')}
+        </button>
+        <Neos.Fusion.Form:Form
+          form.target.action="delete"
+          form.target.arguments.workspaceName={props.workspaceName}
+          class="neos-inline"
+        >
+          <button
+            type="submit"
+            class="neos-button neos-button-danger"
+          >
+            {I18n.translate('workspaces.yesDeleteWorkspace', 'Yes, delete the workspace', [], 'Modules', 'Neos.Workspace.Ui')}
+          </button>
+        </Neos.Fusion.Form:Form>
+      </footer>
+    </div>
+  `
+}
diff --git a/Neos.Workspace.Ui/Resources/Private/Fusion/Components/WorkspaceTableRow.fusion b/Neos.Workspace.Ui/Resources/Private/Fusion/Components/WorkspaceTableRow.fusion
@@ -2,6 +2,7 @@ prototype(Neos.Workspace.Ui:Component.WorkspaceTableRow) < prototype(Neos.Fusion
   userWorkspace = ''
   workspaceName = ''
   workspaceData = ${{}}
+  canManage = false
   level = 0
 
   @private {
@@ -73,19 +74,33 @@ prototype(Neos.Workspace.Ui:Component.WorkspaceTableRow) < prototype(Neos.Fusion
       <td>–</td>
       <td class="workspace-action-column">
         <a class="neos-button"
-          title={I18n.translate(workspace.changesCounts.total ? 'table.column.action.show.title' : 'table.column.action.show.disabled.title', 'Show changes in workspace ' + workspace.title, { workspace: workspace.title }, 'Main', 'Neos.Workspace.Ui')}
-          disabled={workspace.changesCounts.total == 0}
-          href={private.showWorkspaceUri}
+           title={I18n.translate(workspace.changesCounts.total ? 'table.column.action.show.title' : 'table.column.action.show.disabled.title', 'Show changes in workspace ' + workspace.title, { workspace: workspace.title }, 'Main', 'Neos.Workspace.Ui')}
+           disabled={workspace.changesCounts.total == 0}
+           href={private.showWorkspaceUri}
         >
-          <i class="fas fa-review"></i> {I18n.translate('table.column.action.show', 'Show', [], 'Main', 'Neos.Workspace.Ui')}
+          <i
+            class="fas fa-review"></i> {I18n.translate('table.column.action.show', 'Show', [], 'Main', 'Neos.Workspace.Ui')}
         </a>
-        <button class="neos-button" type="button"
-            title={I18n.translate('table.column.action.edit', 'Edit workspace ' + workspace.title, {workspace: workspace.title}, 'Main', 'Neos.Workspace.Ui')}
-            onClick=""
-            disabled={!workspace.canManage || workspace.changesCounts == null}
+        <button
+          class="neos-button"
+          type="button"
+          title={I18n.translate('table.column.action.edit', 'Edit workspace ' + workspace.title, {workspace: workspace.title}, 'Main', 'Neos.Workspace.Ui')}
+          onClick=""
+          disabled={!props.canManage || props.workspaceData.changesCounts == null}
         >
           <i class="fas fa-pencil-alt"></i>
         </button>
+        <button
+          class="neos-button neos-button-danger"
+          title={I18n.translate('workspaces.deleteWorkspace', 'Delete workspace', [], 'Main', 'Neos.Workspace.Ui')}
+          popovertarget={'workspace-modal-delete-' + props.workspaceName}
+        >
+          <i class="fas fa-trash-alt icon-white"></i>
+        </button>
+        <Neos.Workspace.Ui:Component.Modal.Delete
+          workspaceName={props.workspaceName}
+          workspaceTitle={props.workspaceData.workspace.workspaceTitle.value}
+        />
       </td>
     </tr>
   `

diff --git a/Neos.Workspace.Ui/Resources/Public/Styles/Module.css b/Neos.Workspace.Ui/Resources/Public/Styles/Module.css
@@ -89,3 +89,56 @@ td.workspace-action-column {
 .workspace--personal-workspace {
   --column-color: var(--blueDark);
 }
+
+/**
+ * Popover styles
+ */
+[popover] {
+  /* Undo css reset */
+  margin: auto;
+
+  /* Component styles */
+  color: white;
+  background: var(--grayDark);
+  border: 1px solid var(--grayLight);
+  padding: 0;
+  border-radius: 0;
+  outline: none;
+}
+
+[popover]::backdrop {
+  backdrop-filter: blur(3px);
+}
+
+[popover] header {
+  font-size: calc(var(--generalFontSize) + 2px);
+  margin: var(--defaultMargin);
+  line-height: calc(var(--generalFontSize) + 4px);
+  box-sizing: border-box;
+}
+
+[popover] section {
+  margin: var(--defaultMargin);
+  color: var(--textSubtleLight);
+}
+
+[popover] .neos-close {
+  color: white;
+  font-size: calc(var(--generalFontSize) + 4px);
+  background: transparent;
+  width: var(--unit);
+  height: var(--unit);
+  position: absolute;
+  right: 0;
+  top: 0;
+  border-left: none;
+  text-shadow: none;
+}
+
+[popover] footer {
+  background: transparent;
+  margin: var(--defaultMargin);
+  display: flex;
+  gap: var(--spacing-Full);
+  justify-content: flex-end;
+}