open media file from details page

zero.Api/Endpoints/Media/Maps/MediaSourceResult.cs

@@ -0,0 +1,6 @@
+namespace zero.Api.Endpoints.Media;
+
+public class MediaSourceResult
+{
+  public string Path { get; set; }
+}

zero.Api/Endpoints/Media/MediaController.cs

@@ -269,6 +269,24 @@ public class MediaController : ZeroApiTreeEntityStoreController<zero.Media.Media
   public virtual async Task<ActionResult<zero.Media.Media>> Get(string id, string changeVector = null) => await GetModel(id, changeVector);
 
 
+  [HttpGet("{id}/source")]
+  [ZeroAuthorize(MediaPermissions.Read)]
+  public virtual async Task<ActionResult<MediaSourceResult>> GetSource(string id)
+  {
+    string path = await Media.GetPublicFilePath(id);
+
+    if (path.IsNullOrEmpty())
+    {
+      return NotFound();
+    }
+
+    return new MediaSourceResult()
+    {
+      Path = path
+    };
+  }
+
+
   [HttpGet("{id}/hierarchy")]
   [ZeroAuthorize(MediaPermissions.Read)]
   public virtual async Task<ActionResult<zero.Media.Media[]>> GetHierarchy(string id) => await Store.GetHierarchy<zero_Api_Media_Hierarchy>(NormalizeParentId(id));

zero.Backoffice.UI/app/components/ui-dropdown-button.vue

@@ -105,13 +105,15 @@
             this.dropdown.hide();
           }
 
+          let self = this;
+
           this.$emit('click', this.value, {
             dropdown: this.dropdown,
             hide()
             {
-              if (this.dropdown)
+              if (self.dropdown)
               {
-                this.dropdown.hide();
+                self.dropdown.hide();
               }
               instance.$emit('hide');
             },

zero.Backoffice.UI/app/modules/media/api.ts

@@ -7,6 +7,8 @@ const files = {
 
   getById: (id: string, changeVector?: string, config?: ApiRequestConfig) => get('media/' + id, { ...config, params: { changeVector } }),
 
+  getSource: (id: string, config?: ApiRequestConfig) => get(`media/${id}/source`, { ...config }),
+
   getByQuery: (query: ApiRequestQuery, config?: ApiRequestConfig) => get('media', { ...config, params: { ...query } }),
 
   getHierarchy: (id: string, config?: ApiRequestConfig) => get(`media/${id}/hierarchy`, { ...config }),

zero.Backoffice.UI/app/modules/media/pages/detail/detail.vue

@@ -2,7 +2,7 @@
   <ui-form ref="form" class="media-detail" v-slot="form" @submit="onSubmit" @load="onLoad" :route="route">
     <ui-form-header v-model:value="model" prefix="@media.list" title="@media.name" :disabled="disabled" :active-disabled="true" :is-create="!id" :state="form.state" :can-delete="meta.canDelete" @delete="onDelete">
       <template v-slot:actions>
-        <ui-dropdown-button label="@media.actions.openfile" icon="fth-external-link" />
+        <ui-dropdown-button label="@media.actions.openfile" icon="fth-external-link" @click="openFile" :disabled="!id" :prevent="true" />
         <ui-dropdown-button label="@media.actions.replacefile" icon="fth-file-input" :disabled="true" />
       </template>
     </ui-form-header>
@@ -50,6 +50,20 @@
       {
         opts.hide();
         this.$refs.form.onDelete(api.delete.bind(this, this.id));
+      },
+
+      async openFile(val, { dropdown, hide, loading })
+      {
+        loading(true);
+        const result = await api.getSource(this.id);
+        let path = result.success ? result.data.path : null;
+        loading(false);
+        hide();
+
+        if (path)
+        {
+          window.open(window.location.origin + path, 'blank');
+        }
       }
     }
   }