From 5ceff62f2c90845a518e6a4cadd237c79002d01c Mon Sep 17 00:00:00 2001
From: Tobias Klika <cee@live.at>
Date: Mon, 18 May 2020 11:53:23 +0200
Subject: [PATCH] create and list media folders

---
 zero.Core/Api/MediaApi.cs                     |  69 --------
 zero.Core/Api/MediaFolderApi.cs               | 157 ++++++++++++++++++
 zero.Core/Entities/Tree/TreeItem.cs           |   2 +-
 zero.Web.UI/App/pages/media/folder.vue        | 102 ++++++++++++
 zero.Web.UI/App/pages/media/media.vue         |  80 +++++----
 zero.Web.UI/App/pages/media/routes.js         |  23 ++-
 zero.Web.UI/App/resources/media-folder.js     |  36 ++++
 zero.Web.UI/App/resources/media.js            |  36 ++++
 zero.Web/Controllers/MediaController.cs       |   8 +-
 zero.Web/Controllers/MediaFolderController.cs |  68 ++++++++
 zero.Web/Mapper/MediaMapperConfig.cs          |  18 ++
 zero.Web/Models/MediaFolderEditModel.cs       |   9 +
 zero.Web/ZeroBuilder.cs                       |   3 +
 13 files changed, 490 insertions(+), 121 deletions(-)
 create mode 100644 zero.Core/Api/MediaFolderApi.cs
 create mode 100644 zero.Web.UI/App/pages/media/folder.vue
 create mode 100644 zero.Web.UI/App/resources/media-folder.js
 create mode 100644 zero.Web.UI/App/resources/media.js
 create mode 100644 zero.Web/Controllers/MediaFolderController.cs
 create mode 100644 zero.Web/Models/MediaFolderEditModel.cs

diff --git a/zero.Core/Api/MediaApi.cs b/zero.Core/Api/MediaApi.cs
index b1a463e9..759875ee 100644
--- a/zero.Core/Api/MediaApi.cs
+++ b/zero.Core/Api/MediaApi.cs
@@ -57,55 +57,6 @@ namespace zero.Core.Api
     }
 
 
-    /// <inheritdoc />
-    public async Task<IList<MediaFolder>> GetFolders(string parentId = null)
-    {
-      using (IAsyncDocumentSession session = Backoffice.Raven.OpenAsyncSession())
-      {
-        return await session.Query<MediaFolder>()
-          .ForApp(Backoffice.AppId)
-          .WhereIf(x => x.ParentId == parentId, !parentId.IsNullOrEmpty(), x => x.ParentId == null)
-          .OrderByDescending(x => x.Name)
-          .ToListAsync();
-      }
-    }
-
-
-    /// <inheritdoc />
-    public async Task<IList<MediaFolder>> GetFolderHierarchy(string id)
-    {
-      using (IAsyncDocumentSession session = Backoffice.Raven.OpenAsyncSession())
-      {
-        MediaFolder_ByHierarchy.Result result = await session.Query<MediaFolder_ByHierarchy.Result, MediaFolder_ByHierarchy>()
-          .ProjectInto<MediaFolder_ByHierarchy.Result>()
-          .Include<MediaFolder_ByHierarchy.Result, MediaFolder>(x => x.Path.Select(p => p.Id))
-          .ForApp(Backoffice.AppId)
-          .FirstOrDefaultAsync(x => x.Id == id);
-
-        if (result == null)
-        {
-          return new List<MediaFolder>();
-        }
-
-        return (await session.LoadAsync<MediaFolder>(result.Path.Select(x => x.Id))).Select(x => x.Value).ToList();
-      }
-    }
-
-
-    /// <inheritdoc />
-    public async Task<EntityResult<MediaFolder>> SaveFolder(MediaFolder model)
-    {
-      return await Backoffice.Save(model, new MediaFolderValidator());
-    }
-
-
-    /// <inheritdoc />
-    public async Task<EntityResult<MediaFolder>> DeleteFolder(string id)
-    {
-      return await Backoffice.DeleteById<MediaFolder>(id);
-    }
-
-
     /// <inheritdoc />
     public async Task Cleanup()
     {
@@ -136,26 +87,6 @@ namespace zero.Core.Api
     /// </summary>
     Task<EntityResult<Media>> Delete(string id);
 
-    /// <summary>
-    /// Get hierarchy for a folder
-    /// </summary>
-    Task<IList<MediaFolder>> GetFolderHierarchy(string id);
-
-    /// <summary>
-    /// Get all folders with the specified parent or on root
-    /// </summary>
-    Task<IList<MediaFolder>> GetFolders(string parentId = null);
-
-    /// <summary>
-    /// Creates or updates a folder
-    /// </summary>
-    Task<EntityResult<MediaFolder>> SaveFolder(MediaFolder model);
-
-    /// <summary>
-    /// Deletes a folder
-    /// </summary>
-    Task<EntityResult<MediaFolder>> DeleteFolder(string id);
-
     /// <summary>
     /// Clean-up all media based on stored database information
     /// </summary>
diff --git a/zero.Core/Api/MediaFolderApi.cs b/zero.Core/Api/MediaFolderApi.cs
new file mode 100644
index 00000000..003458db
--- /dev/null
+++ b/zero.Core/Api/MediaFolderApi.cs
@@ -0,0 +1,157 @@
+using Raven.Client.Documents;
+using Raven.Client.Documents.Session;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+using zero.Core.Database.Indexes;
+using zero.Core.Entities;
+using zero.Core.Extensions;
+using zero.Core.Validation;
+
+namespace zero.Core.Api
+{
+  public class MediaFolderApi : IMediaFolderApi
+  {
+    protected IAppAwareBackofficeStore Backoffice { get; private set; }
+
+
+    public MediaFolderApi(IAppAwareBackofficeStore backoffice)
+    {
+      Backoffice = backoffice;
+    }
+
+
+    /// <inheritdoc />
+    public async Task<MediaFolder> GetById(string id)
+    {
+      return await Backoffice.GetById<MediaFolder>(id);
+    }
+
+
+    /// <inheritdoc />
+    public async Task<IList<MediaFolder>> GetAll(string parentId = null)
+    {
+      using (IAsyncDocumentSession session = Backoffice.Raven.OpenAsyncSession())
+      {
+        return await session.Query<MediaFolder>()
+          .ForApp(Backoffice.AppId)
+          .WhereIf(x => x.ParentId == parentId, !parentId.IsNullOrEmpty(), x => x.ParentId == null)
+          .OrderByDescending(x => x.Name)
+          .ToListAsync();
+      }
+    }
+
+
+    /// <inheritdoc />
+    public async Task<IList<TreeItem>> GetAllAsTree(string parentId = null)
+    {
+      List<TreeItem> result = new List<TreeItem>();
+
+      using (IAsyncDocumentSession session = Backoffice.Raven.OpenAsyncSession())
+      {
+        IList<MediaFolder> items = await session.Query<MediaFolder>()
+          .ForApp(Backoffice.AppId)
+          .WhereIf(x => x.ParentId == parentId, !parentId.IsNullOrEmpty(), x => x.ParentId == null)
+          .OrderByDescending(x => x.Name)
+          .ToListAsync();
+
+        foreach (MediaFolder folder in items)
+        {
+          result.Add(new TreeItem()
+          {
+            Id = folder.Id,
+            Name = folder.Name,
+            HasChildren = true,
+            ParentId = folder.ParentId,
+            Sort = folder.Sort,
+            Icon = "fth-folder"
+          });
+        } 
+      }
+
+      if (parentId.IsNullOrEmpty())
+      {
+        result.Add(new TreeItem()
+        {
+          Id = "recyclebin",
+          ParentId = null,
+          Sort = 99999,
+          Name = "@page.recyclebin.name",
+          Icon = "fth-trash",
+          HasChildren = false
+        });
+      }
+
+      return result;
+    }
+
+
+    /// <inheritdoc />
+    public async Task<IList<MediaFolder>> GetHierarchy(string id)
+    {
+      using (IAsyncDocumentSession session = Backoffice.Raven.OpenAsyncSession())
+      {
+        MediaFolder_ByHierarchy.Result result = await session.Query<MediaFolder_ByHierarchy.Result, MediaFolder_ByHierarchy>()
+          .ProjectInto<MediaFolder_ByHierarchy.Result>()
+          .Include<MediaFolder_ByHierarchy.Result, MediaFolder>(x => x.Path.Select(p => p.Id))
+          .ForApp(Backoffice.AppId)
+          .FirstOrDefaultAsync(x => x.Id == id);
+
+        if (result == null)
+        {
+          return new List<MediaFolder>();
+        }
+
+        return (await session.LoadAsync<MediaFolder>(result.Path.Select(x => x.Id))).Select(x => x.Value).ToList();
+      }
+    }
+
+
+    /// <inheritdoc />
+    public async Task<EntityResult<MediaFolder>> Save(MediaFolder model)
+    {
+      return await Backoffice.Save(model, new MediaFolderValidator());
+    }
+
+
+    /// <inheritdoc />
+    public async Task<EntityResult<MediaFolder>> Delete(string id)
+    {
+      return await Backoffice.DeleteById<MediaFolder>(id);
+    }
+  }
+
+
+  public interface IMediaFolderApi
+  {
+    /// <summary>
+    /// Get application by Id
+    /// </summary>
+    Task<MediaFolder> GetById(string id);
+
+    /// <summary>
+    /// Get hierarchy for a folder
+    /// </summary>
+    Task<IList<MediaFolder>> GetHierarchy(string id);
+
+    /// <summary>
+    /// Get all folders with the specified parent or on root
+    /// </summary>
+    Task<IList<MediaFolder>> GetAll(string parentId = null);
+
+    /// <summary>
+    /// Get all folders with the specified parent or on root for tree output
+    /// </summary>
+    Task<IList<TreeItem>> GetAllAsTree(string parentId = null);
+
+    /// <summary>
+    /// Creates or updates a folder
+    /// </summary>
+    Task<EntityResult<MediaFolder>> Save(MediaFolder model);
+
+    /// <summary>
+    /// Deletes a folder
+    /// </summary>
+    Task<EntityResult<MediaFolder>> Delete(string id);
+  }
+}
diff --git a/zero.Core/Entities/Tree/TreeItem.cs b/zero.Core/Entities/Tree/TreeItem.cs
index 7bf558ce..f912ba02 100644
--- a/zero.Core/Entities/Tree/TreeItem.cs
+++ b/zero.Core/Entities/Tree/TreeItem.cs
@@ -18,7 +18,7 @@
     /// <summary>
     /// Sort order
     /// </summary>
-    public int Sort { get; set; }
+    public uint Sort { get; set; }
 
     /// <summary>
     /// Name of the item
diff --git a/zero.Web.UI/App/pages/media/folder.vue b/zero.Web.UI/App/pages/media/folder.vue
new file mode 100644
index 00000000..4234979f
--- /dev/null
+++ b/zero.Web.UI/App/pages/media/folder.vue
@@ -0,0 +1,102 @@
+<template>
+  <ui-form v-if="!loading" ref="form" class="mediafolder" v-slot="form" @submit="onSubmit" @load="onLoad">
+    <h2 class="ui-headline" v-localize="'@media.name'"></h2>
+    <div class="mediafolder-items">
+      <ui-property label="@ui.name" :required="true" :vertical="true">
+        <input v-model="item.name" type="text" class="ui-input" maxlength="200" :readonly="disabled" />
+      </ui-property>
+        <!-- // TODO add parent selector -->
+    </div>
+    <div class="app-confirm-buttons">
+      <ui-button v-if="!disabled" :submit="true" :state="form.state" label="@ui.save"></ui-button>
+      <ui-button type="light" :label="config.closeLabel" :disabled="loading" @click="config.close"></ui-button>
+      <ui-button v-if="!disabled && model.id" type="light" label="@ui.delete" @click="onDelete" style="float:right;"></ui-button>
+    </div>
+  </ui-form>
+</template>
+
+
+<script>
+  import MediaFolderApi from 'zero/resources/media-folder.js';
+  import Overlay from 'zero/services/overlay.js';
+
+  export default {
+
+    props: {
+      model: Object,
+      config: Object
+    },
+
+    data: () => ({
+      loading: false,
+      item: {},
+      disabled: false
+    }),
+
+    methods: {
+
+      onLoad(form)
+      {
+        console.info(JSON.parse(JSON.stringify(this.model)));
+
+        form.load(!this.model.id ? MediaFolderApi.getEmpty() : MediaFolderApi.getById(this.model.id)).then(response =>
+        {
+          this.disabled = !response.canEdit;
+          this.item = response;
+          this.item.parentId = this.model.parentId;
+          this.loading = false;
+        });
+      },
+
+
+      onSubmit(form)
+      {
+        form.handle(MediaFolderApi.save(this.item)).then(response =>
+        {
+          this.config.confirm(response);
+        });
+      },
+
+      onDelete()
+      {
+        Overlay.confirmDelete().then((opts) =>
+        {
+          opts.state('loading');
+
+          MediaFolderApi.delete(this.model.id).then(response =>
+          {
+            if (response.success)
+            {
+              opts.state('success');
+              opts.hide();
+              this.config.close();
+            }
+            else
+            {
+              opts.errors(response.errors);
+            }
+          });
+        }); 
+      }
+
+    }
+  }
+</script>
+
+<style lang="scss">
+  .mediafolder
+  {
+    text-align: left;
+  }
+
+  .mediafolder-items
+  {
+    margin-top: var(--padding);
+
+    .ui-property + .ui-property,
+    .ui-split + .ui-property
+    {
+      margin-top: 0;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/zero.Web.UI/App/pages/media/media.vue b/zero.Web.UI/App/pages/media/media.vue
index bd39c618..9c535777 100644
--- a/zero.Web.UI/App/pages/media/media.vue
+++ b/zero.Web.UI/App/pages/media/media.vue
@@ -2,13 +2,14 @@
   <div class="media">
     <div class="media-tree" v-resizable="resizable">
       <ui-header-bar title="Media" />
-      <ui-tree :get="getItems" />
+      <ui-tree :get="getTree" />
       <div class="media-tree-resizable ui-resizable"></div>
     </div>
 
     <div class="media-content">
       <ui-header-bar title="Media">
         <ui-search />
+        <ui-button type="white" label="Add folder" icon="fth-plus" @click="addFolder($route.params.id)" />
         <ui-button label="Add media" icon="fth-plus" />
       </ui-header-bar>
 
@@ -34,10 +35,14 @@
 
 
 <script>
-  import PageTreeApi from 'zero/resources/page-tree.js'
+  import MediaFolderApi from 'zero/resources/media-folder.js'
+  import Overlay from 'zero/services/overlay.js';
+  import AddFolderOverlay from './folder';
 
   export default {
 
+    props: ['id'],
+
     data: () => ({
       cache: {},
       items: [],
@@ -57,45 +62,20 @@
 
     created()
     {
-      //const sources = [
-      //  'http://nolbert.com/wp-content/uploads/2018/04/nolbert_logitech_thumb_s.jpg',
-      //  'http://nolbert.com/wp-content/uploads/2019/06/nolbert_orange_stack_01_thumb_sn.jpg',
-      //  'http://nolbert.com/wp-content/uploads/2019/04/nolbert_vyvyd_thumb_violet_n.jpg',
-      //  'http://nolbert.com/wp-content/uploads/2018/08/nolbert_oppo_r15_thumb_s.jpg',
-      //  'http://nolbert.com/wp-content/uploads/2018/04/nolbert_asus_thumb_yellow_sq_n.jpg',
-      //  'http://nolbert.com/wp-content/uploads/2017/06/nolbert_yas_darkbg_n.jpg',
-      //  'http://nolbert.com/wp-content/uploads/2018/04/nolbert_atypical_thumb_s.jpg',
-      //  'http://nolbert.com/wp-content/uploads/2018/01/nolbert_npci_book_shot_01_n.jpg',
-      //  'http://nolbert.com/wp-content/uploads/2018/05/nolbert_fortune500_thumb_s.jpg',
-      //  'http://nolbert.com/wp-content/uploads/2018/04/wired_thumb_s.jpg',
-      //  'http://nolbert.com/wp-content/uploads/2018/04/nolbert_new_republic_thumb_s.jpg',
-      //  'http://nolbert.com/wp-content/uploads/2018/05/nolbert_mm_smiley_thumb_n.jpg'
-      //];
-
-      //sources.forEach(source =>
-      //{
-      //  this.items.push({
-      //    source: source,
-      //    type: 'image'
-      //  });
-      //});
-
-      //this.items.push({
-      //  source: 'zeromagic-loop.webm',
-      //  type: 'video',
-      //  extension: '.webm'
-      //});
-
-      //this.items.push({
-      //  source: 'documentation.docx',
-      //  type: 'file',
-      //  extension: '.docx'
-      //});
+      
     },
 
+    watch: {
+      '$route'()
+      {
+        
+      }
+    },
 
     methods: {
-      getItems(parent)
+
+      // load folders in tree
+      getTree(parent)
       {
         const key = !parent ? '__root' : parent;
 
@@ -104,25 +84,43 @@
           return Promise.resolve(this.cache[key]);
         }
 
-        return PageTreeApi.getChildren(parent).then(response =>
+        return MediaFolderApi.getAllAsTree(parent).then(response =>
         {
           response.forEach(item =>
           {
             item.url = {
-              name: 'page',
+              name: 'mediafolder',
               params: { id: item.id }
             };
 
             if (item.id === "recyclebin")
             {
               item.url = {
-                name: 'recyclebin'
+                name: 'mediarecyclebin'
               };
             }
           });
           this.cache[key] = response;
           return response;
         });
+      },
+
+
+      // adds a new folder
+      addFolder(parentId)
+      {
+        Overlay.open({
+          component: AddFolderOverlay,
+          width: 700,
+          model: { parentId }
+        }).then(item =>
+        {
+          console.info(item);
+          // TODO reload?
+        }, () =>
+        {
+          
+        });
       }
     }
   }
@@ -152,7 +150,7 @@
 
     .ui-header-bar + .ui-tree
     {
-      margin-top: 2px;
+      margin-top: -10px;
     }
 
     .ui-dot-button
diff --git a/zero.Web.UI/App/pages/media/routes.js b/zero.Web.UI/App/pages/media/routes.js
index 7ae1ccd5..ddd764fb 100644
--- a/zero.Web.UI/App/pages/media/routes.js
+++ b/zero.Web.UI/App/pages/media/routes.js
@@ -6,6 +6,13 @@ let routes = [];
 
 if (section)
 {
+  routes.push({
+    path: 'folder/:id',
+    props: true,
+    name: 'mediafolder',
+    component: () => import('zero/pages/' + alias + '/media')
+  });
+
   routes.push({
     path: 'edit/:id',
     props: true,
@@ -13,14 +20,14 @@ if (section)
     component: () => import('zero/pages/' + alias + '/detail')
   });
 
-  //routes.push({
-  //  path: 'recyclebin',
-  //  name: 'recyclebin',
-  //  component: () => import('zero/pages/' + alias + '/recyclebin'),
-  //  meta: {
-  //    name: '@page.recyclebin.name'
-  //  }
-  //});
+  routes.push({
+    path: 'recyclebin',
+    name: 'mediarecyclebin',
+    component: () => import('zero/pages/' + alias + '/recyclebin'),
+    meta: {
+      name: '@page.recyclebin.name'
+    }
+  });
 
   //routes.push({
   //  path: 'history',
diff --git a/zero.Web.UI/App/resources/media-folder.js b/zero.Web.UI/App/resources/media-folder.js
new file mode 100644
index 00000000..da501e23
--- /dev/null
+++ b/zero.Web.UI/App/resources/media-folder.js
@@ -0,0 +1,36 @@
+import Axios from 'axios';
+
+const base = 'mediaFolder/';
+
+export default {
+
+  // get media folder by id
+  getById(id)
+  {
+    return Axios.get(base + 'getById', { params: { id } }).then(res => Promise.resolve(res.data));
+  },
+
+  // get new media folder model
+  getEmpty()
+  {
+    return Axios.get(base + 'getEmpty').then(res => Promise.resolve(res.data));
+  },
+
+  // get all folder with a certain parent (can be empty) as tree
+  getAllAsTree(parent)
+  {
+    return Axios.get(base + 'getAllAsTree', { params: { parent } }).then(res => Promise.resolve(res.data));
+  },
+
+  // save a media folder
+  save(model)
+  {
+    return Axios.post(base + 'save', model).then(res => Promise.resolve(res.data));
+  },
+
+  // deletes a media folder
+  delete(id)
+  {
+    return Axios.delete(base + 'delete', { params: { id } }).then(res => Promise.resolve(res.data));
+  }
+};
\ No newline at end of file
diff --git a/zero.Web.UI/App/resources/media.js b/zero.Web.UI/App/resources/media.js
new file mode 100644
index 00000000..2d485031
--- /dev/null
+++ b/zero.Web.UI/App/resources/media.js
@@ -0,0 +1,36 @@
+import Axios from 'axios';
+
+const base = 'media/';
+
+export default {
+
+  // get media by id
+  getById(id)
+  {
+    return Axios.get(base + 'getById', { params: { id } }).then(res => Promise.resolve(res.data));
+  },
+
+  // get new media model
+  getEmpty()
+  {
+    return Axios.get(base + 'getEmpty').then(res => Promise.resolve(res.data));
+  },
+
+  // get all media items
+  getAll(query)
+  {
+    return Axios.get(base + 'getAll', { params: query }).then(res => Promise.resolve(res.data));
+  },
+
+  // save a media
+  save(model)
+  {
+    return Axios.post(base + 'save', model).then(res => Promise.resolve(res.data));
+  },
+
+  // deletes a media
+  delete(id)
+  {
+    return Axios.delete(base + 'delete', { params: { id } }).then(res => Promise.resolve(res.data));
+  }
+};
\ No newline at end of file
diff --git a/zero.Web/Controllers/MediaController.cs b/zero.Web/Controllers/MediaController.cs
index b795e1a9..1921f0d7 100644
--- a/zero.Web/Controllers/MediaController.cs
+++ b/zero.Web/Controllers/MediaController.cs
@@ -14,9 +14,13 @@ namespace zero.Web.Controllers
   {
     IMediaApi Api;
 
-    public MediaController(IMediaApi api)
+    IMediaFolderApi MediaFolderApi;
+
+
+    public MediaController(IMediaApi api, IMediaFolderApi mediaFolderApi)
     {
       Api = api;
+      MediaFolderApi = mediaFolderApi;
     }
 
 
@@ -35,7 +39,7 @@ namespace zero.Web.Controllers
     public async Task<IActionResult> GetAll([FromQuery] MediaListQuery query)
     {
       ListResult<MediaListModel> items = await Mapper.Map<Media, MediaListModel>(await Api.GetByQuery(query));
-      IEnumerable<MediaListModel> folders = await Mapper.Map<MediaFolder, MediaListModel>(await Api.GetFolders(query.Filter.FolderId));
+      IEnumerable<MediaListModel> folders = await Mapper.Map<MediaFolder, MediaListModel>(await MediaFolderApi.GetAll(query.Filter.FolderId));
 
       return Json(new MediaListResultModel(items, folders));
     }
diff --git a/zero.Web/Controllers/MediaFolderController.cs b/zero.Web/Controllers/MediaFolderController.cs
new file mode 100644
index 00000000..fab0e7d3
--- /dev/null
+++ b/zero.Web/Controllers/MediaFolderController.cs
@@ -0,0 +1,68 @@
+using Microsoft.AspNetCore.Mvc;
+using System.Collections.Generic;
+using System.Threading.Tasks;
+using zero.Core.Api;
+using zero.Core.Entities;
+using zero.Core.Identity;
+using zero.Core.Options;
+using zero.Web.Models;
+
+namespace zero.Web.Controllers
+{
+  [ZeroAuthorize(Permissions.Sections.Media, PermissionsValue.True)]
+  public class MediaFolderController : BackofficeController
+  {
+    IMediaFolderApi Api;
+
+    public MediaFolderController(IMediaFolderApi api)
+    {
+      Api = api;
+    }
+
+
+    /// <summary>
+    /// Get media folder by id
+    /// </summary>  
+    public async Task<IActionResult> GetById([FromQuery] string id)
+    {
+      return await As<MediaFolder, MediaFolderEditModel>(await Api.GetById(id));
+    }
+
+
+    /// <summary>
+    /// Get empty media folder model
+    /// </summary>  
+    public IActionResult GetEmpty()
+    {
+      return Json(new MediaFolderEditModel());
+    }
+
+
+    /// <summary>
+    /// Get all folders with a specific parent as tree
+    /// </summary>    
+    public async Task<IActionResult> GetAllAsTree([FromQuery] string parent = null)
+    {
+      return Json(await Api.GetAllAsTree(parent));
+    }
+
+
+    /// <summary>
+    /// Save a media item
+    /// </summary>
+    public async Task<IActionResult> Save([FromBody] MediaFolderEditModel model)
+    {
+      MediaFolder entity = await Mapper.Map(model, await Api.GetById(model.Id));
+      return await As<MediaFolder, MediaFolderEditModel>(await Api.Save(entity));
+    }
+
+
+    /// <summary>
+    /// Deletes a media item
+    /// </summary>
+    public async Task<IActionResult> Delete([FromQuery] string id)
+    {
+      return await As<MediaFolder, MediaFolderEditModel>(await Api.Delete(id));
+    }
+  }
+}
diff --git a/zero.Web/Mapper/MediaMapperConfig.cs b/zero.Web/Mapper/MediaMapperConfig.cs
index b426032f..53d52ea5 100644
--- a/zero.Web/Mapper/MediaMapperConfig.cs
+++ b/zero.Web/Mapper/MediaMapperConfig.cs
@@ -51,6 +51,24 @@ namespace zero.Web.Mapper
         target.Name = source.Name;
         target.IsFolder = true;
       });
+
+
+      config.CreateMap<MediaFolder, MediaFolderEditModel>((source, target) =>
+      {
+        target.Id = source.Id;
+        target.Name = source.Name;
+        target.IsActive = source.IsActive;
+        target.CreatedDate = source.CreatedDate;
+        target.ParentId = source.ParentId;
+      });
+
+      config.CreateMap<MediaFolderEditModel, MediaFolder>((source, target) =>
+      {
+        target.Name = source.Name;
+        target.IsActive = source.IsActive;
+        target.CreatedDate = source.CreatedDate;
+        target.ParentId = source.ParentId;
+      });
     }
   }
 }
diff --git a/zero.Web/Models/MediaFolderEditModel.cs b/zero.Web/Models/MediaFolderEditModel.cs
new file mode 100644
index 00000000..2ec66e5a
--- /dev/null
+++ b/zero.Web/Models/MediaFolderEditModel.cs
@@ -0,0 +1,9 @@
+namespace zero.Web.Models
+{
+  public class MediaFolderEditModel : EditModel
+  {
+    public string Name { get; set; }
+
+    public string ParentId { get; set; }
+  }
+}
diff --git a/zero.Web/ZeroBuilder.cs b/zero.Web/ZeroBuilder.cs
index 71292770..e171fcb0 100644
--- a/zero.Web/ZeroBuilder.cs
+++ b/zero.Web/ZeroBuilder.cs
@@ -111,6 +111,7 @@ namespace zero.Web
       Services.AddScoped<ILanguagesApi, LanguagesApi>();
       Services.AddScoped<IPermissionsApi, PermissionsApi>();
       Services.AddScoped<IMediaApi, MediaApi>();
+      Services.AddScoped<IMediaFolderApi, MediaFolderApi>();
       Services.AddScoped<IMediaUpload, MediaUpload>();
     }
 
@@ -212,6 +213,8 @@ namespace zero.Web
         opts.Add<TranslationMapperConfig>();
         opts.Add<LanguageMapperConfig>();
         opts.Add<ApplicationMapperConfig>();
+        opts.Add<MediaMapperConfig>();
+        opts.Add<SpaceMapperConfig>();
       });
     }