Resources manager module: added file open commands

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

@@ -435,4 +435,7 @@
   <data name="UserAssets.Text" xml:space="preserve">
     <value>{0} Assets</value>
   </data>
+  <data name="OpenFile.Text" xml:space="preserve">
+    <value>Open</value>
+  </data>
 </root>

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

@@ -26,6 +26,9 @@ export namespace Components {
     interface DnnActionMoveItems {
         "items": Item[];
     }
+    interface DnnActionOpenFile {
+        "item": Item;
+    }
     interface DnnActionUnlinkItems {
         "items": Item[];
     }
@@ -252,6 +255,12 @@ declare global {
         prototype: HTMLDnnActionMoveItemsElement;
         new (): HTMLDnnActionMoveItemsElement;
     };
+    interface HTMLDnnActionOpenFileElement extends Components.DnnActionOpenFile, HTMLStencilElement {
+    }
+    var HTMLDnnActionOpenFileElement: {
+        prototype: HTMLDnnActionOpenFileElement;
+        new (): HTMLDnnActionOpenFileElement;
+    };
     interface HTMLDnnActionUnlinkItemsElement extends Components.DnnActionUnlinkItems, HTMLStencilElement {
     }
     var HTMLDnnActionUnlinkItemsElement: {
@@ -409,6 +418,7 @@ declare global {
         "dnn-action-download-item": HTMLDnnActionDownloadItemElement;
         "dnn-action-edit-item": HTMLDnnActionEditItemElement;
         "dnn-action-move-items": HTMLDnnActionMoveItemsElement;
+        "dnn-action-open-file": HTMLDnnActionOpenFileElement;
         "dnn-action-unlink-items": HTMLDnnActionUnlinkItemsElement;
         "dnn-action-upload-file": HTMLDnnActionUploadFileElement;
         "dnn-resource-manager": HTMLDnnResourceManagerElement;
@@ -455,6 +465,9 @@ declare namespace LocalJSX {
     interface DnnActionMoveItems {
         "items": Item[];
     }
+    interface DnnActionOpenFile {
+        "item": Item;
+    }
     interface DnnActionUnlinkItems {
         "items": Item[];
     }
@@ -570,6 +583,10 @@ declare namespace LocalJSX {
           * The list of current items.
          */
         "currentItems": GetFolderContentResponse;
+        /**
+          * Fires when a file is double-clicked and emits the file ID into the event.detail
+         */
+        "onDnnRmFileDoubleClicked"?: (event: DnnRmItemsCardviewCustomEvent<string>) => void;
         /**
           * Fires when a folder is double-clicked and emits the folder ID into the event.detail
          */
@@ -580,6 +597,10 @@ declare namespace LocalJSX {
           * The list of current items.
          */
         "currentItems": GetFolderContentResponse;
+        /**
+          * Fires when a file is double-clicked and emits the file ID into the event.detail
+         */
+        "onDnnRmFileDoubleClicked"?: (event: DnnRmItemsListviewCustomEvent<string>) => void;
         /**
           * Fires when a folder is double-clicked and emits the folder ID into the event.detail
          */
@@ -658,6 +679,7 @@ declare namespace LocalJSX {
         "dnn-action-download-item": DnnActionDownloadItem;
         "dnn-action-edit-item": DnnActionEditItem;
         "dnn-action-move-items": DnnActionMoveItems;
+        "dnn-action-open-file": DnnActionOpenFile;
         "dnn-action-unlink-items": DnnActionUnlinkItems;
         "dnn-action-upload-file": DnnActionUploadFile;
         "dnn-resource-manager": DnnResourceManager;
@@ -695,6 +717,7 @@ declare module "@stencil/core" {
             "dnn-action-download-item": LocalJSX.DnnActionDownloadItem & JSXBase.HTMLAttributes<HTMLDnnActionDownloadItemElement>;
             "dnn-action-edit-item": LocalJSX.DnnActionEditItem & JSXBase.HTMLAttributes<HTMLDnnActionEditItemElement>;
             "dnn-action-move-items": LocalJSX.DnnActionMoveItems & JSXBase.HTMLAttributes<HTMLDnnActionMoveItemsElement>;
+            "dnn-action-open-file": LocalJSX.DnnActionOpenFile & JSXBase.HTMLAttributes<HTMLDnnActionOpenFileElement>;
             "dnn-action-unlink-items": LocalJSX.DnnActionUnlinkItems & JSXBase.HTMLAttributes<HTMLDnnActionUnlinkItemsElement>;
             "dnn-action-upload-file": LocalJSX.DnnActionUploadFile & JSXBase.HTMLAttributes<HTMLDnnActionUploadFileElement>;
             "dnn-resource-manager": LocalJSX.DnnResourceManager & JSXBase.HTMLAttributes<HTMLDnnResourceManagerElement>;

DNN Platform/Modules/ResourceManager/ResourceManager.Web/src/components/actions/dnn-action-open-file/dnn-action-open-file.tsx

@@ -0,0 +1,29 @@
+import { Component, Host, h, Prop } from '@stencil/core';
+import { Item } from '../../../services/ItemsClient';
+import state from "../../../store/store";
+
+@Component({
+  tag: 'dnn-action-open-file',
+  styleUrl: '../dnn-action.scss',
+  shadow: true,
+})
+export class DnnActionOpenFile {
+
+  @Prop() item!: Item;
+
+
+  private handleClick(): void {
+    window.open(this.item.path, "_blank");
+  }
+
+  render() {
+    return (
+      <Host>
+        <button onClick={() => this.handleClick()}>
+        <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z"/></svg>
+          <span>{state.localization.OpenFile}</span>
+        </button>
+      </Host>
+    );
+  }
+}

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

@@ -23,6 +23,8 @@ export class DnnRmFileContextMenu {
             <dnn-action-move-items items={[this.item]} />
           ,
             <dnn-action-delete-items items={[this.item]} />
+          ,
+            <dnn-action-open-file item={this.item}/>
           ,
             <dnn-action-download-item item={this.item}/>
           ]

DNN Platform/Modules/ResourceManager/ResourceManager.Web/src/components/dnn-rm-actions-bar/dnn-rm-actions-bar.tsx

@@ -123,6 +123,9 @@ export class DnnRmActionsBar {
           {state.selectedItems.length == 1 && !state.selectedItems[0].isFolder && location.protocol == "https:" &&
             <dnn-action-copy-url items={state.selectedItems}/>
           }
+          {state.selectedItems.length == 1 && !state.selectedItems[0].isFolder &&
+            <dnn-action-open-file item={state.selectedItems[0]}/>
+          }
           {state.selectedItems.length == 1 && !state.selectedItems[0].isFolder &&
             <dnn-action-download-item item={state.selectedItems[0]}/>
           }

DNN Platform/Modules/ResourceManager/ResourceManager.Web/src/components/dnn-rm-files-pane/dnn-rm-files-pane.tsx

@@ -37,6 +37,11 @@ export class DnnRmFilesPane {
     this.checkIfMoreItemsNeeded();
   }
 
+  @Listen("dnnRmFileDoubleClicked", {target: "document"})
+  handleFileDoubleClicked(e: CustomEvent<string>) {
+    window.open(e.detail, "_blank");
+  }
+
   componentDidUpdate() {
     const loadedFilesHeight = this.loadedFilesArea.getBoundingClientRect().height;
     const heightPerItem = loadedFilesHeight / state.currentItems.items.length;

DNN Platform/Modules/ResourceManager/ResourceManager.Web/src/components/dnn-rm-items-cardview/dnn-rm-items-cardview.tsx

@@ -18,6 +18,9 @@ export class DnnRmItemsCardview {
   /** Fires when a folder is double-clicked and emits the folder ID into the event.detail */
   @Event() dnnRmFolderDoubleClicked: EventEmitter<number>;
 
+  /** Fires when a file is double-clicked and emits the file ID into the event.detail */
+  @Event() dnnRmFileDoubleClicked: EventEmitter<string>;
+
   componentWillLoad() {
     document.addEventListener("click", this.dismissContextMenu.bind(this));
   }
@@ -54,6 +57,8 @@ export class DnnRmItemsCardview {
   private handleDoubleClick(item: Item): void {
     if (item.isFolder) {
       this.dnnRmFolderDoubleClicked.emit(item.itemId);
+    } else {
+      this.dnnRmFileDoubleClicked.emit(item.path);
     }
   }
 

DNN Platform/Modules/ResourceManager/ResourceManager.Web/src/components/dnn-rm-items-listview/dnn-rm-items-listview.tsx

@@ -18,6 +18,9 @@ export class DnnRmItemsListview {
   /** Fires when a folder is double-clicked and emits the folder ID into the event.detail */
   @Event() dnnRmFolderDoubleClicked: EventEmitter<number>;
 
+  /** Fires when a file is double-clicked and emits the file ID into the event.detail */
+  @Event() dnnRmFileDoubleClicked: EventEmitter<string>;
+
   componentWillLoad() {
     document.addEventListener("click", this.dismissContextMenu.bind(this));
   }
@@ -85,6 +88,8 @@ export class DnnRmItemsListview {
   private handleDoubleClick(item: Item): void {
     if (item.isFolder) {
       this.dnnRmFolderDoubleClicked.emit(item.itemId);
+    } else {
+      this.dnnRmFileDoubleClicked.emit(item.path);
     }
   }
 

DNN Platform/Modules/ResourceManager/ResourceManager.Web/src/services/LocalizationClient.ts

@@ -142,6 +142,7 @@ export interface LocalizedStrings {
     Unlink: string;
     CopyUrl: string;
     StatusBarMessage: string;
+    OpenFile: string;
     Download: string;
     Upload: string;
 };