Merge pull request #66 from valadas/menu-item-create-folder

Implemented CreateFolder action and context menus

DNN Platform/Modules/ResourceManager/App_LocalResources/ResourceManager.resx

@@ -339,4 +339,7 @@
   <data name="Items.Text" xml:space="preserve">
     <value>Items</value>
   </data>
+  <data name="MappedPath.Text" xml:space="preserve">
+    <value>Mapped Path</value>
+  </data>
 </root>

DNN Platform/Modules/ResourceManager/ResourceManager.Web/src/components.d.ts

@@ -8,17 +8,31 @@ import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
 import { FolderTreeItem } from "./services/InternalServicesClient";
 import { GetFolderContentResponse } from "./services/ItemsClient";
 export namespace Components {
+    interface DnnActionCreateFolder {
+        "parentFolderId": number;
+    }
     interface DnnResourceManager {
+        /**
+          * The ID of the module.
+         */
         "moduleId": number;
     }
     interface DnnRmActionsBar {
     }
+    interface DnnRmEditFolder {
+    }
     interface DnnRmFilesPane {
         /**
           * Defines how much more pixels to load under the fold.
          */
         "preloadOffset": number;
     }
+    interface DnnRmFolderContextMenu {
+        /**
+          * The ID of the folder onto which the context menu was triggered on.
+         */
+        "clickedFolderId": number;
+    }
     interface DnnRmFolderList {
     }
     interface DnnRmFolderListItem {
@@ -32,9 +46,15 @@ export namespace Components {
         "folder": FolderTreeItem;
     }
     interface DnnRmItemsCardview {
+        /**
+          * The list of current items.
+         */
         "currentItems": GetFolderContentResponse;
     }
     interface DnnRmItemsListview {
+        /**
+          * The list of current items.
+         */
         "currentItems": GetFolderContentResponse;
     }
     interface DnnRmLeftPane {
@@ -47,6 +67,12 @@ export namespace Components {
     }
 }
 declare global {
+    interface HTMLDnnActionCreateFolderElement extends Components.DnnActionCreateFolder, HTMLStencilElement {
+    }
+    var HTMLDnnActionCreateFolderElement: {
+        prototype: HTMLDnnActionCreateFolderElement;
+        new (): HTMLDnnActionCreateFolderElement;
+    };
     interface HTMLDnnResourceManagerElement extends Components.DnnResourceManager, HTMLStencilElement {
     }
     var HTMLDnnResourceManagerElement: {
@@ -59,12 +85,24 @@ declare global {
         prototype: HTMLDnnRmActionsBarElement;
         new (): HTMLDnnRmActionsBarElement;
     };
+    interface HTMLDnnRmEditFolderElement extends Components.DnnRmEditFolder, HTMLStencilElement {
+    }
+    var HTMLDnnRmEditFolderElement: {
+        prototype: HTMLDnnRmEditFolderElement;
+        new (): HTMLDnnRmEditFolderElement;
+    };
     interface HTMLDnnRmFilesPaneElement extends Components.DnnRmFilesPane, HTMLStencilElement {
     }
     var HTMLDnnRmFilesPaneElement: {
         prototype: HTMLDnnRmFilesPaneElement;
         new (): HTMLDnnRmFilesPaneElement;
     };
+    interface HTMLDnnRmFolderContextMenuElement extends Components.DnnRmFolderContextMenu, HTMLStencilElement {
+    }
+    var HTMLDnnRmFolderContextMenuElement: {
+        prototype: HTMLDnnRmFolderContextMenuElement;
+        new (): HTMLDnnRmFolderContextMenuElement;
+    };
     interface HTMLDnnRmFolderListElement extends Components.DnnRmFolderList, HTMLStencilElement {
     }
     var HTMLDnnRmFolderListElement: {
@@ -114,9 +152,12 @@ declare global {
         new (): HTMLDnnRmTopBarElement;
     };
     interface HTMLElementTagNameMap {
+        "dnn-action-create-folder": HTMLDnnActionCreateFolderElement;
         "dnn-resource-manager": HTMLDnnResourceManagerElement;
         "dnn-rm-actions-bar": HTMLDnnRmActionsBarElement;
+        "dnn-rm-edit-folder": HTMLDnnRmEditFolderElement;
         "dnn-rm-files-pane": HTMLDnnRmFilesPaneElement;
+        "dnn-rm-folder-context-menu": HTMLDnnRmFolderContextMenuElement;
         "dnn-rm-folder-list": HTMLDnnRmFolderListElement;
         "dnn-rm-folder-list-item": HTMLDnnRmFolderListItemElement;
         "dnn-rm-items-cardview": HTMLDnnRmItemsCardviewElement;
@@ -128,17 +169,35 @@ declare global {
     }
 }
 declare namespace LocalJSX {
+    interface DnnActionCreateFolder {
+        "parentFolderId"?: number;
+    }
     interface DnnResourceManager {
+        /**
+          * The ID of the module.
+         */
         "moduleId": number;
     }
     interface DnnRmActionsBar {
     }
+    interface DnnRmEditFolder {
+        /**
+          * Fires when there is a possibility that some folders have changed. Can be used to force parts of the UI to refresh.
+         */
+        "onDnnRmFoldersChanged"?: (event: CustomEvent<void>) => void;
+    }
     interface DnnRmFilesPane {
         /**
           * Defines how much more pixels to load under the fold.
          */
         "preloadOffset"?: number;
     }
+    interface DnnRmFolderContextMenu {
+        /**
+          * The ID of the folder onto which the context menu was triggered on.
+         */
+        "clickedFolderId": number;
+    }
     interface DnnRmFolderList {
     }
     interface DnnRmFolderListItem {
@@ -150,11 +209,21 @@ declare namespace LocalJSX {
           * The basic information about the folder
          */
         "folder": FolderTreeItem;
+        /**
+          * Fires when a context menu is opened for this item. Emits the folder ID.
+         */
+        "onDnnRmcontextMenuOpened"?: (event: CustomEvent<number>) => void;
     }
     interface DnnRmItemsCardview {
+        /**
+          * The list of current items.
+         */
         "currentItems": GetFolderContentResponse;
     }
     interface DnnRmItemsListview {
+        /**
+          * The list of current items.
+         */
         "currentItems": GetFolderContentResponse;
     }
     interface DnnRmLeftPane {
@@ -166,9 +235,12 @@ declare namespace LocalJSX {
     interface DnnRmTopBar {
     }
     interface IntrinsicElements {
+        "dnn-action-create-folder": DnnActionCreateFolder;
         "dnn-resource-manager": DnnResourceManager;
         "dnn-rm-actions-bar": DnnRmActionsBar;
+        "dnn-rm-edit-folder": DnnRmEditFolder;
         "dnn-rm-files-pane": DnnRmFilesPane;
+        "dnn-rm-folder-context-menu": DnnRmFolderContextMenu;
         "dnn-rm-folder-list": DnnRmFolderList;
         "dnn-rm-folder-list-item": DnnRmFolderListItem;
         "dnn-rm-items-cardview": DnnRmItemsCardview;
@@ -183,9 +255,12 @@ export { LocalJSX as JSX };
 declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
+            "dnn-action-create-folder": LocalJSX.DnnActionCreateFolder & JSXBase.HTMLAttributes<HTMLDnnActionCreateFolderElement>;
             "dnn-resource-manager": LocalJSX.DnnResourceManager & JSXBase.HTMLAttributes<HTMLDnnResourceManagerElement>;
             "dnn-rm-actions-bar": LocalJSX.DnnRmActionsBar & JSXBase.HTMLAttributes<HTMLDnnRmActionsBarElement>;
+            "dnn-rm-edit-folder": LocalJSX.DnnRmEditFolder & JSXBase.HTMLAttributes<HTMLDnnRmEditFolderElement>;
             "dnn-rm-files-pane": LocalJSX.DnnRmFilesPane & JSXBase.HTMLAttributes<HTMLDnnRmFilesPaneElement>;
+            "dnn-rm-folder-context-menu": LocalJSX.DnnRmFolderContextMenu & JSXBase.HTMLAttributes<HTMLDnnRmFolderContextMenuElement>;
             "dnn-rm-folder-list": LocalJSX.DnnRmFolderList & JSXBase.HTMLAttributes<HTMLDnnRmFolderListElement>;
             "dnn-rm-folder-list-item": LocalJSX.DnnRmFolderListItem & JSXBase.HTMLAttributes<HTMLDnnRmFolderListItemElement>;
             "dnn-rm-items-cardview": LocalJSX.DnnRmItemsCardview & JSXBase.HTMLAttributes<HTMLDnnRmItemsCardviewElement>;

DNN Platform/Modules/ResourceManager/ResourceManager.Web/src/components/actions/dnn-action-create-folder/dnn-action-create-folder.tsx

@@ -0,0 +1,54 @@
+import { Component, Host, h, Prop } from '@stencil/core';
+import { ItemsClient } from '../../../services/ItemsClient';
+import state from "../../../store/store";
+
+@Component({
+  tag: 'dnn-action-create-folder',
+  styleUrl: '../dnn-action.scss',
+  shadow: true,
+})
+export class DnnActionCreateFolder {
+
+  @Prop() parentFolderId: number;
+
+  private readonly itemsClient: ItemsClient;
+
+  constructor(){
+    this.itemsClient = new ItemsClient(state.moduleId);
+  }
+
+  private handleClick(): void {
+    if (this.parentFolderId){
+      this.itemsClient.getFolderContent(this.parentFolderId, 0, 0)
+      .then(data => {
+        state.currentItems = data;
+        this.showModal();
+      })
+      .catch(error => alert(error));
+      return;
+    }
+
+    this.showModal();
+  }
+
+  private showModal(){
+    const modal = document.createElement("dnn-modal");
+    modal.backdropDismiss = false;
+    modal.showCloseButton = false;
+    const editor = document.createElement("dnn-rm-edit-folder");
+    modal.appendChild(editor);
+    document.body.appendChild(modal);
+    modal.show();
+  }
+
+  render() {
+    return (
+      <Host>
+        <button onClick={() => this.handleClick()}>
+          <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M20 6h-8l-2-2H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-1 8h-3v3h-2v-3h-3v-2h3V9h2v3h3v2z"/></svg>
+          <span>{state.localization.AddFolder}</span>
+        </button>
+      </Host>
+    );
+  }
+}

DNN Platform/Modules/ResourceManager/ResourceManager.Web/src/components/actions/dnn-action-create-folder/readme.md

@@ -0,0 +1,42 @@
+# dnn-action-create-folder
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property         | Attribute          | Description | Type     | Default     |
+| ---------------- | ------------------ | ----------- | -------- | ----------- |
+| `parentFolderId` | `parent-folder-id` |             | `number` | `undefined` |
+
+
+## Dependencies
+
+### Used by
+
+ - [dnn-rm-actions-bar](../../dnn-rm-actions-bar)
+ - [dnn-rm-folder-context-menu](../../context-menus/dnn-rm-folder-context-menu)
+
+### Depends on
+
+- dnn-modal
+- [dnn-rm-edit-folder](../../dnn-rm-edit-folder)
+
+### Graph
+```mermaid
+graph TD;
+  dnn-action-create-folder --> dnn-modal
+  dnn-action-create-folder --> dnn-rm-edit-folder
+  dnn-rm-edit-folder --> dnn-button
+  dnn-button --> dnn-modal
+  dnn-button --> dnn-button
+  dnn-rm-actions-bar --> dnn-action-create-folder
+  dnn-rm-folder-context-menu --> dnn-action-create-folder
+  style dnn-action-create-folder fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

DNN Platform/Modules/ResourceManager/ResourceManager.Web/src/components/actions/dnn-action.scss

@@ -0,0 +1,16 @@
+:host{
+    display: inline-flex;
+}
+
+button{
+    cursor: pointer;
+    border: none;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    svg{
+        fill: var(--dnn-color-primary);
+    }
+}

DNN Platform/Modules/ResourceManager/ResourceManager.Web/src/components/context-menus/context-menu.scss

@@ -0,0 +1,12 @@
+:host{
+    display: flex;
+    flex-direction: column;
+}
+:host(*){
+    background-color: transparent;
+    border: none;
+    padding: 0.5em 1em;
+    margin: 0;
+    border-bottom: 1px solid lightgray;
+    white-space: nowrap;
+}

DNN Platform/Modules/ResourceManager/ResourceManager.Web/src/components/context-menus/dnn-rm-folder-context-menu/dnn-rm-folder-context-menu.tsx

@@ -0,0 +1,24 @@
+import { Component, Host, h, Prop } from '@stencil/core';
+import state from '../../../store/store';
+
+@Component({
+  tag: 'dnn-rm-folder-context-menu',
+  styleUrl: '../context-menu.scss',
+  shadow: true,
+})
+export class DnnRmFolderContextMenu {
+
+  /** The ID of the folder onto which the context menu was triggered on. */
+  @Prop() clickedFolderId!: number;
+
+  render() {
+    return (
+      <Host>
+        {state.currentItems?.hasAddFoldersPermission &&
+          <dnn-action-create-folder parentFolderId={this.clickedFolderId} />
+        }
+      </Host>
+    );
+  }
+
+}

DNN Platform/Modules/ResourceManager/ResourceManager.Web/src/components/context-menus/dnn-rm-folder-context-menu/readme.md

@@ -0,0 +1,44 @@
+# dnn-rm-folder-context-menu
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property                       | Attribute           | Description                                                        | Type     | Default     |
+| ------------------------------ | ------------------- | ------------------------------------------------------------------ | -------- | ----------- |
+| `clickedFolderId` _(required)_ | `clicked-folder-id` | The ID of the folder onto which the context menu was triggered on. | `number` | `undefined` |
+
+
+## Dependencies
+
+### Used by
+
+ - [dnn-rm-folder-list-item](../../dnn-rm-folder-list-item)
+ - [dnn-rm-items-cardview](../../dnn-rm-items-cardview)
+ - [dnn-rm-items-listview](../../dnn-rm-items-listview)
+
+### Depends on
+
+- [dnn-action-create-folder](../../actions/dnn-action-create-folder)
+
+### Graph
+```mermaid
+graph TD;
+  dnn-rm-folder-context-menu --> dnn-action-create-folder
+  dnn-action-create-folder --> dnn-modal
+  dnn-action-create-folder --> dnn-rm-edit-folder
+  dnn-rm-edit-folder --> dnn-button
+  dnn-button --> dnn-modal
+  dnn-button --> dnn-button
+  dnn-rm-folder-list-item --> dnn-rm-folder-context-menu
+  dnn-rm-items-cardview --> dnn-rm-folder-context-menu
+  dnn-rm-items-listview --> dnn-rm-folder-context-menu
+  style dnn-rm-folder-context-menu fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*