From a79b33ae8b80fc0a54b909b04afdde90c9ae35ad Mon Sep 17 00:00:00 2001
From: Tobias Klika <cee@live.at>
Date: Thu, 3 Sep 2020 14:50:41 +0200
Subject: [PATCH] edit, move + delete works for media files + folders now

---
 zero.Core/Api/BackofficeApi.cs                |   1 +
 zero.Core/Api/MediaApi.cs                     |  22 +++
 zero.Core/Api/MediaFolderApi.cs               |  48 +++--
 .../App/components/datagrid/datagrid.vue      |  88 ++++++++-
 .../App/components/overlays/confirm.vue       |   5 +
 .../pickers/mediaPicker/overlay.vue           |   4 +-
 zero.Web.UI/App/pages/media/media-item.vue    |   4 +-
 zero.Web.UI/App/pages/media/media.vue         | 112 ++++++++++-
 .../App/pages/media/{ => overlays}/folder.vue |  23 +--
 zero.Web.UI/App/pages/media/overlays/move.vue | 179 ++++++++++++++++++
 .../media/{ => overlays}/upload-status.vue    |   0
 zero.Web.UI/App/resources/media-folder.js     |   5 +
 zero.Web.UI/App/resources/media.js            |   5 +
 zero.Web/Controllers/MediaController.cs       |   4 +
 zero.Web/Controllers/MediaFolderController.cs |   5 +
 zero.Web/Controllers/PagesController.cs       |  16 +-
 zero.Web/Models/ActionCopyModel.cs            |  11 ++
 .../Resources/Localization/zero.en-us.json    |  14 ++
 18 files changed, 489 insertions(+), 57 deletions(-)
 rename zero.Web.UI/App/pages/media/{ => overlays}/folder.vue (76%)
 create mode 100644 zero.Web.UI/App/pages/media/overlays/move.vue
 rename zero.Web.UI/App/pages/media/{ => overlays}/upload-status.vue (100%)
 create mode 100644 zero.Web/Models/ActionCopyModel.cs

diff --git a/zero.Core/Api/BackofficeApi.cs b/zero.Core/Api/BackofficeApi.cs
index aca0ec13..c895d555 100644
--- a/zero.Core/Api/BackofficeApi.cs
+++ b/zero.Core/Api/BackofficeApi.cs
@@ -229,6 +229,7 @@ namespace zero.Core.Api
     public async Task<EntityResult<T>> DeleteById<T>(string id) where T : IZeroIdEntity
     {
       using IAsyncDocumentSession session = Raven.OpenAsyncSession();
+      session.Advanced.WaitForIndexesAfterSaveChanges(throwOnTimeout: false);
 
       T entity = await session.LoadAsync<T>(id);
       IAppAwareEntity appAwareEntity = entity as IAppAwareEntity;
diff --git a/zero.Core/Api/MediaApi.cs b/zero.Core/Api/MediaApi.cs
index b5504cf1..04f093eb 100644
--- a/zero.Core/Api/MediaApi.cs
+++ b/zero.Core/Api/MediaApi.cs
@@ -111,6 +111,23 @@ namespace zero.Core.Api
     }
 
 
+    /// <inheritdoc />
+    public async Task<EntityResult<IMedia>> Move(string id, string parentId)
+    {
+      IMedia model = await GetById<IMedia>(id);
+      IMediaFolder parent = await GetById<IMediaFolder>(parentId);
+
+      if (model == null || (!parentId.IsNullOrEmpty() && parent == null))
+      {
+        return EntityResult<IMedia>.Fail("@errors.idnotfound");
+      }
+
+      model.FolderId = parent?.Id;
+
+      return await Save(model);
+    }
+
+
     /// <inheritdoc />
     public async Task<EntityResult<IMedia>> Delete(string id)
     {
@@ -252,6 +269,11 @@ namespace zero.Core.Api
     /// </summary>
     Task<EntityResult<IMedia>> Save(IMedia model);
 
+    /// <summary>
+    /// Move a file to a new parent
+    /// </summary>
+    Task<EntityResult<IMedia>> Move(string id, string parentId);
+
     /// <summary>
     /// Deletes a media item by Id
     /// </summary>
diff --git a/zero.Core/Api/MediaFolderApi.cs b/zero.Core/Api/MediaFolderApi.cs
index fd011c75..b3efd261 100644
--- a/zero.Core/Api/MediaFolderApi.cs
+++ b/zero.Core/Api/MediaFolderApi.cs
@@ -48,7 +48,7 @@ namespace zero.Core.Api
         IList<IMediaFolder> folders = await session.Query<IMediaFolder>()
           .Scope(Scope)
           .WhereIf(x => x.ParentId == parentId, !parentId.IsNullOrEmpty(), x => x.ParentId == null)
-          .OrderByDescending(x => x.Name)
+          .OrderByDescending(x => x.CreatedDate).ThenBy(x => x.Name)
           .ToListAsync();
 
 
@@ -103,18 +103,18 @@ namespace zero.Core.Api
         } 
       }
 
-      if (parentId.IsNullOrEmpty())
-      {
-        items.Add(new TreeItem()
-        {
-          Id = "recyclebin",
-          ParentId = null,
-          Sort = 99999,
-          Name = "@recyclebin.name",
-          Icon = "fth-trash",
-          HasChildren = false
-        });
-      }
+      //if (parentId.IsNullOrEmpty())
+      //{
+      //  items.Add(new TreeItem()
+      //  {
+      //    Id = "recyclebin",
+      //    ParentId = null,
+      //    Sort = 99999,
+      //    Name = "@recyclebin.name",
+      //    Icon = "fth-trash",
+      //    HasChildren = false
+      //  });
+      //}
 
       return items;
     }
@@ -152,6 +152,23 @@ namespace zero.Core.Api
     }
 
 
+    /// <inheritdoc />
+    public async Task<EntityResult<IMediaFolder>> Move(string id, string parentId)
+    {
+      IMediaFolder model = await GetById<IMediaFolder>(id);
+      IMediaFolder parent = await GetById<IMediaFolder>(parentId);
+
+      if (model == null || (!parentId.IsNullOrEmpty() && parent == null))
+      {
+        return EntityResult<IMediaFolder>.Fail("@errors.idnotfound");
+      }
+
+      model.ParentId = parent?.Id;
+
+      return await Save(model);
+    }
+
+
     /// <inheritdoc />
     public async Task<EntityResult<IMediaFolder>> Delete(string id)
     {
@@ -187,6 +204,11 @@ namespace zero.Core.Api
     /// </summary>
     Task<EntityResult<IMediaFolder>> Save(IMediaFolder model);
 
+    /// <summary>
+    /// Move a folder to a new parent
+    /// </summary>
+    Task<EntityResult<IMediaFolder>> Move(string id, string parentId);
+
     /// <summary>
     /// Deletes a folder
     /// </summary>
diff --git a/zero.Web.UI/App/components/datagrid/datagrid.vue b/zero.Web.UI/App/components/datagrid/datagrid.vue
index e404a647..354219c4 100644
--- a/zero.Web.UI/App/components/datagrid/datagrid.vue
+++ b/zero.Web.UI/App/components/datagrid/datagrid.vue
@@ -2,7 +2,9 @@
   <div class="ui-datagrid-outer">
     <div class="ui-datagrid">
       <div class="ui-datagrid-items" :style="'grid-template-columns: repeat(auto-fill, minmax(' + configuration.width + 'px, 1fr))'" :class="{'is-block': configuration.block }">
-        <component v-for="(item, index) in items" :is="configuration.component" :key="index" :value="item" class="ui-datagrid-cell"></component>
+        <div v-for="(item, index) in items" :key="index" v-on:contextmenu="onRightClicked(item, $event)">
+          <component :is="configuration.component" :value="item" class="ui-datagrid-cell"></component>
+        </div>  
       </div>
 
       <div class="ui-datagrid-empty" v-if="!isLoading && items.length < 1">
@@ -19,6 +21,10 @@
       <ui-pagination :pages="pages" :page="filter.page" @change="setPage" />
     </footer>
 
+    <ui-dropdown ref="dropdown" align="top" theme="dark" class="ui-datagrid-dropdown">
+      <slot name="actions" v-bind="actionProps"></slot>
+    </ui-dropdown>
+
   </div>
 </template>
 
@@ -93,14 +99,27 @@
         pageSize: 30,
         search: null
       },
-      debouncedUpdate: null
+      debouncedUpdate: null,
+      actionProps: {
+        item: null
+      }
     }),
 
+
+    computed: {
+      actionsDefined()
+      {
+        return this.$scopedSlots.hasOwnProperty('actions');
+      }
+    },
+
+
     mounted()
     {
       this.initialize();
     },
 
+
     methods: {
 
       initialize()
@@ -175,6 +194,65 @@
         }
 
         this.debouncedUpdate();
+      },
+
+
+      // right clicked on an item
+      onRightClicked(item, ev)
+      {
+        if (this.actionsDefined)
+        {
+          ev.preventDefault();
+          this.onActionsClicked(item, ev);
+        }
+      },
+
+
+      // actions button clicked on item
+      onActionsClicked(item, ev)
+      {
+        let dropdown = this.$refs.dropdown;
+
+        if (!this.actionsDefined || (typeof this.hasActions === 'function' && !this.hasActions(item)))
+        {
+          return;
+        }
+
+        this.actionProps.item = item;
+        this.actionProps.event = ev;
+
+        dropdown.toggle();
+
+        if (!dropdown.open)
+        {
+          return;
+        }
+
+        this.$nextTick(() =>
+        {
+          let target = ev.target;
+          do
+          {
+            if (target.classList.contains('ui-datagrid-cell'))
+            {
+              break;
+            }
+          }
+          while (target = target.parentElement);
+
+          var width = 240;
+
+          var position = {
+            x: ev.pageX,
+            y: ev.pageY
+          };
+
+          let element = dropdown.$el.querySelector('.ui-dropdown');
+
+          element.style.top = position.y + 'px';
+          element.style.left = position.x + 'px';
+          element.style.width = width + 'px';
+        });
       }
     }
   }
@@ -211,4 +289,10 @@
     font-size: 34px;
     margin-bottom: 20px;
   }
+
+  .ui-datagrid-dropdown .ui-dropdown
+  {
+    position: fixed;
+    min-width: 200px;
+  }
 </style>
\ No newline at end of file
diff --git a/zero.Web.UI/App/components/overlays/confirm.vue b/zero.Web.UI/App/components/overlays/confirm.vue
index 53b36c2b..2c64a458 100644
--- a/zero.Web.UI/App/components/overlays/confirm.vue
+++ b/zero.Web.UI/App/components/overlays/confirm.vue
@@ -70,4 +70,9 @@
   {
     margin-top: 30px;
   }
+
+  .app-confirm p
+  {
+    line-height: 1.4;
+  }
 </style>
\ No newline at end of file
diff --git a/zero.Web.UI/App/components/pickers/mediaPicker/overlay.vue b/zero.Web.UI/App/components/pickers/mediaPicker/overlay.vue
index 97d0360c..d1b5f116 100644
--- a/zero.Web.UI/App/components/pickers/mediaPicker/overlay.vue
+++ b/zero.Web.UI/App/components/pickers/mediaPicker/overlay.vue
@@ -40,8 +40,8 @@
 <script>
   import MediaApi from 'zero/resources/media.js'
   import Overlay from 'zero/services/overlay.js'
-  import AddFolderOverlay from 'zero/pages/media/folder'
-  import UploadStatusOverlay from 'zero/pages/media/upload-status'
+  import AddFolderOverlay from 'zero/pages/media/overlays/folder'
+  import UploadStatusOverlay from 'zero/pages/media/overlays/upload-status'
   import { debounce as _debounce, filter as _filter } from 'underscore'
 
   export default {
diff --git a/zero.Web.UI/App/pages/media/media-item.vue b/zero.Web.UI/App/pages/media/media-item.vue
index b0ac5d1b..3fcf12cf 100644
--- a/zero.Web.UI/App/pages/media/media-item.vue
+++ b/zero.Web.UI/App/pages/media/media-item.vue
@@ -122,8 +122,8 @@
       height: 100%;
       left: 0;
       top: 0;
-      background-position: 0px 0px, 10px 10px;
-      background-size: 20px 20px;
+      background-position: 0px 0px, #{$media-pattern-size / 2} #{$media-pattern-size / 2};
+      background-size: #{$media-pattern-size} #{$media-pattern-size};
       background-image: linear-gradient(45deg, #{$media-pattern-color-b} 25%, transparent 25%, transparent 75%, #{$media-pattern-color-b} 75%, #{$media-pattern-color-b} 100%),
         linear-gradient(45deg, #{$media-pattern-color-b} 25%, #{$media-pattern-color-a} 25%, #{$media-pattern-color-a} 75%, #{$media-pattern-color-b} 75%, #{$media-pattern-color-b} 100%);
     }
diff --git a/zero.Web.UI/App/pages/media/media.vue b/zero.Web.UI/App/pages/media/media.vue
index ad60c07d..d56ffae9 100644
--- a/zero.Web.UI/App/pages/media/media.vue
+++ b/zero.Web.UI/App/pages/media/media.vue
@@ -12,9 +12,18 @@
         </template>
         <template>
           <ui-search />
+          <ui-dropdown v-if="isOverview && current" align="right">
+            <template v-slot:button>
+              <ui-button type="white" label="Folder" caret="down" />
+            </template>
+            <ui-dropdown-button label="@ui.edit.title" icon="fth-edit-2" @click="edit(current, true)" />
+            <ui-dropdown-button label="@ui.move.title" icon="fth-corner-down-right" @click="move(current, true)" />
+            <ui-dropdown-separator />
+            <ui-dropdown-button label="@ui.delete" icon="fth-trash" @click="remove(current, true)" />
+          </ui-dropdown>
           <ui-button type="white" label="Add folder" @click="addFolder(id)" />
           <div type="button" class="ui-button has-state type-action state-default has-icon">
-            <span class="ui-button-text">Add</span>
+            <span class="ui-button-text" v-localize="'@ui.add'"></span>
             <input class="media-item-upload" type="file" multiple @change="onUpload" />
           </div>
         </template>
@@ -22,7 +31,15 @@
 
       <div class="ui-view-box">
         <div class="media-items">
-          <ui-datagrid ref="grid" v-model="gridConfig" />
+          <ui-datagrid ref="grid" v-model="gridConfig">
+            <template v-slot:actions="props">
+              <ui-dropdown-button v-if="props.item && props.item.isFolder" label="@ui.open.title" icon="fth-chevrons-right" @click="goToFolder(props.item.id)" />
+              <ui-dropdown-button label="@ui.edit.title" icon="fth-edit-2" @click="edit(props.item, props.item.isFolder)" />
+              <ui-dropdown-button label="@ui.move.title" icon="fth-corner-down-right" @click="move(props.item, props.item.isFolder)" />
+              <ui-dropdown-separator />
+              <ui-dropdown-button label="@ui.delete" icon="fth-trash" @click="remove(props.item, props.item.isFolder)" />
+            </template>
+          </ui-datagrid>
         </div>
       </div>
     </div>
@@ -34,10 +51,13 @@
   import MediaApi from 'zero/resources/media.js';
   import MediaFolderApi from 'zero/resources/media-folder.js';
   import Overlay from 'zero/services/overlay.js';
-  import AddFolderOverlay from './folder';
+  import FolderOverlay from './overlays/folder';
+  import MoveOverlay from './overlays/move';
   import MediaItemOverlay from './media-overlay-item';
   import MediaItem from './media-item';
-  import UploadStatusOverlay from './upload-status';
+  import UploadStatusOverlay from './overlays/upload-status';
+  import EventHub from 'zero/services/eventhub';
+  import Notification from 'zero/services/notification.js';
   import { each as _each, extend as _extend, debounce as _debounce, isArray as _isArray } from 'underscore';
 
   export default {
@@ -123,7 +143,7 @@
       addFolder(parentId)
       {
         Overlay.open({
-          component: AddFolderOverlay,
+          component: FolderOverlay,
           model: { parentId },
           theme: 'dark'
         }).then(item => this.goToFolder(item.model.id));
@@ -170,6 +190,88 @@
           console.info(value);
         }, () => { });
       },
+
+
+      edit(item, isFolder)
+      {
+        if (!isFolder)
+        {
+          return this.$router.push({
+            name: 'mediaitem',
+            params: { id: item.id }
+          });
+        }
+
+        Overlay.open({
+          component: FolderOverlay,
+          model: item,
+          theme: 'dark'
+        }).then(res =>
+        {
+          if (res.deleted === true)
+          {
+            return this.remove(item, true);
+          }
+          else
+          {
+            EventHub.$emit('media.update');
+            this.$refs.grid.update();
+          }
+        });
+      },
+
+
+      move(item, isFolder)
+      {
+        return Overlay.open({
+          component: MoveOverlay,
+          display: 'editor',
+          model: item,
+          isFolder: isFolder
+        }).then(value =>
+        {
+          EventHub.$emit('page.move', value);
+          EventHub.$emit('page.update');
+          this.$refs.grid.update();
+        });
+      },
+
+
+      remove(item, isFolder)
+      {
+        Overlay.confirmDelete(item.name, isFolder ? '@media.deleteoverlay.folder_text' : '@deleteoverlay.text').then(opts =>
+        {
+          opts.state('loading');
+
+          (isFolder ? MediaFolderApi : MediaApi).delete(item.id).then(response =>
+          {
+            if (response.success)
+            {
+              opts.state('success');
+              opts.hide();
+
+              EventHub.$emit('media.delete', response.model);
+              EventHub.$emit('media.update');
+
+              Notification.success('@deleteoverlay.success', isFolder ? '@media.deleteoverlay.folder_success_text' : '@deleteoverlay.success_text');
+              this.$refs.grid.update();
+
+              if (isFolder && item.id === this.id)
+              {
+                this.$router.go(-1);
+              }
+              else
+              {
+                this.$refs.grid.update();
+              }
+            }
+            else
+            {
+              opts.errors(response.errors);
+            }
+          });
+        });
+      }
     }
   }
 </script>
diff --git a/zero.Web.UI/App/pages/media/folder.vue b/zero.Web.UI/App/pages/media/overlays/folder.vue
similarity index 76%
rename from zero.Web.UI/App/pages/media/folder.vue
rename to zero.Web.UI/App/pages/media/overlays/folder.vue
index ecda15b6..2c2194af 100644
--- a/zero.Web.UI/App/pages/media/folder.vue
+++ b/zero.Web.UI/App/pages/media/overlays/folder.vue
@@ -1,12 +1,12 @@
 <template>
   <ui-form v-if="!loading" ref="form" class="mediafolder" v-slot="form" @submit="onSubmit" @load="onLoad">
-    <h2 class="ui-headline" v-localize="'@media.addfolder'"></h2>
+    <h2 class="ui-headline" v-localize="model.id ? '@media.editfolder' : '@media.addfolder'"></h2>
     <div class="mediafolder-items">
       <input v-model="item.name" type="text" class="ui-input" maxlength="200" v-localize:placeholder="'@media.fields.foldername_placeholder'" :readonly="disabled" />
       <!-- // TODO add parent selector -->
     </div>
     <div class="app-confirm-buttons">
-      <ui-button v-if="!disabled" :submit="true" :state="form.state" label="@ui.create"></ui-button>
+      <ui-button v-if="!disabled" :submit="true" :state="form.state" :label="model.id ? '@ui.save' : '@ui.create'"></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>
@@ -55,24 +55,7 @@
 
       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);
-            }
-          });
-        }); 
+        this.config.confirm({ deleted: true });
       }
 
     }
diff --git a/zero.Web.UI/App/pages/media/overlays/move.vue b/zero.Web.UI/App/pages/media/overlays/move.vue
new file mode 100644
index 00000000..d1089d4e
--- /dev/null
+++ b/zero.Web.UI/App/pages/media/overlays/move.vue
@@ -0,0 +1,179 @@
+<template>
+  <ui-overlay-editor class="pages-move">
+    <template v-slot:header>
+      <ui-header-bar title="@ui.move.title" :back-button="false" :close-button="true" />
+    </template>
+    <template v-slot:footer>
+      <ui-button type="white" label="@ui.close" @click="config.hide" />
+      <ui-button label="@ui.move.action" @click="onSave" :state="state" />
+    </template>
+
+    <p class="pages-move-text" v-localize:html="{ key: '@ui.move.text', tokens: { name: model.name } }"></p>
+    <div class="ui-box pages-move-items">
+      <ui-tree ref="tree" :get="getItems" @select="onSelect" />
+    </div>
+  </ui-overlay-editor>
+</template>
+
+
+<script>
+  import MediaFolderApi from 'zero/resources/media-folder.js';
+  import MediaApi from 'zero/resources/media.js';
+  import Notification from 'zero/services/notification.js'
+
+  export default {
+
+    props: {
+      model: Object,
+      config: Object
+    },
+
+    data: () => ({
+      items: [],
+      selected: null,
+      state: 'default',
+      cache: {},
+      prevItem: null,
+      selected: null
+    }),
+
+
+    mounted()
+    {
+      this.selected = this.model;
+    },
+
+
+    methods: {
+
+      onSelect(item)
+      {
+        item.isSelected = true;
+
+        if (this.prevItem && this.prevItem.id != item.id)
+        {
+          this.prevItem.isSelected = false;
+        }
+
+        this.prevItem = item;
+        this.selected = item;
+        //this.config.confirm(item);
+      },
+
+      getItems(parent)
+      {
+        const key = !parent ? '__root' : parent;
+
+        if (this.cache[key])
+        {
+          return Promise.resolve(this.cache[key]);
+        }
+
+        return MediaFolderApi.getAllAsTree(parent).then(response =>
+        {
+          if (!parent)
+          {
+            response.splice(0, 0, {
+              id: null,
+              parentId: null,
+              sort: 0,
+              name: '@page.root',
+              icon: 'fth-arrow-down-circle',
+              isOpen: false,
+              modifier:	null,
+              hasChildren: false,
+              childCount: 0,
+              isInactive: false,
+              hasActions: false
+            });
+          }
+
+          response.forEach(item =>
+          {
+            //item.disabled = true;
+            item.isSelected = this.model.parentId == item.id;
+
+            if (item.isSelected)
+            {
+              this.prevItem = item;
+            }
+            item.disabled = item.id === 'recyclebin' || item.id == this.model.id;
+            item.hasActions = false;
+          });
+
+          this.cache[key] = response;
+          return response;
+        });
+      },
+
+      onSave()
+      {
+        if (this.model.parentId == this.selected.id)
+        {
+          this.config.close();
+          return;
+        }
+
+        this.state = 'loading';
+
+        (this.config.isFolder ? MediaFolderApi : MediaApi).move(this.model.id, this.selected.id).then(res =>
+        {
+          if (res.success)
+          {
+            this.state = 'success';
+            this.config.confirm(res.model);
+          }
+          else
+          {
+            this.state = 'error';
+            Notification.error(res.errors[0].message);
+          }
+        });
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  .pages-move .ui-box
+  {
+    margin: 0;
+    padding: 16px 0;
+
+    .ui-tree-item.is-disabled
+    {
+      opacity: .5;
+    }
+
+    .ui-tree-item.is-selected, .ui-tree-item:hover:not(.is-disabled)
+    {
+      background: var(--color-bg-bright-two);
+    }
+
+    .ui-tree-item.is-selected
+    {
+      &:after
+      {
+        font-family: "Feather";
+        content: "\e83e";
+        font-size: 16px;
+        color: var(--color-primary);
+      }
+      
+      .ui-tree-item-text
+      {
+        font-weight: bold;
+      }
+    }
+  }
+
+  .pages-move content
+  {
+    padding-top: 0;
+  }
+
+  .pages-move-text
+  {
+    margin: 0 0 20px;
+  }
+</style>
\ No newline at end of file
diff --git a/zero.Web.UI/App/pages/media/upload-status.vue b/zero.Web.UI/App/pages/media/overlays/upload-status.vue
similarity index 100%
rename from zero.Web.UI/App/pages/media/upload-status.vue
rename to zero.Web.UI/App/pages/media/overlays/upload-status.vue
diff --git a/zero.Web.UI/App/resources/media-folder.js b/zero.Web.UI/App/resources/media-folder.js
index 1548ee64..6ddc6203 100644
--- a/zero.Web.UI/App/resources/media-folder.js
+++ b/zero.Web.UI/App/resources/media-folder.js
@@ -39,6 +39,11 @@ export default {
     return Axios.post(base + 'save', model).then(res => Promise.resolve(res.data));
   },
 
+  move(id, destinationId)
+  {
+    return Axios.post(base + 'move', { id, destinationId }).then(res => Promise.resolve(res.data));
+  },
+
   // deletes a media folder
   delete(id)
   {
diff --git a/zero.Web.UI/App/resources/media.js b/zero.Web.UI/App/resources/media.js
index 5745c9f1..4b6ade45 100644
--- a/zero.Web.UI/App/resources/media.js
+++ b/zero.Web.UI/App/resources/media.js
@@ -74,6 +74,11 @@ export default {
     //return Axios.post(base + 'save', model).then(res => Promise.resolve(res.data));
   },
 
+  move(id, destinationId)
+  {
+    return Axios.post(base + 'move', { id, destinationId }).then(res => Promise.resolve(res.data));
+  },
+
   // deletes a media
   delete(id)
   {
diff --git a/zero.Web/Controllers/MediaController.cs b/zero.Web/Controllers/MediaController.cs
index ba9142dd..22e1a8ae 100644
--- a/zero.Web/Controllers/MediaController.cs
+++ b/zero.Web/Controllers/MediaController.cs
@@ -47,6 +47,10 @@ namespace zero.Web.Controllers
     public async Task<IActionResult> Delete([FromQuery] string id) => Json(await Api.Delete(id));
 
 
+    [HttpPost]
+    public async Task<IActionResult> Move([FromBody] ActionCopyModel model) => Json(await Api.Move(model.Id, model.DestinationId));
+
+
     public async Task<IActionResult> GetAll([FromQuery] MediaListQuery query)
     {
       ListResult<MediaListModel> items = await Mapper.Map<IMedia, MediaListModel>(await Api.GetByQuery(query));
diff --git a/zero.Web/Controllers/MediaFolderController.cs b/zero.Web/Controllers/MediaFolderController.cs
index bff475b1..f735f414 100644
--- a/zero.Web/Controllers/MediaFolderController.cs
+++ b/zero.Web/Controllers/MediaFolderController.cs
@@ -3,6 +3,7 @@ using System.Threading.Tasks;
 using zero.Core.Api;
 using zero.Core.Entities;
 using zero.Core.Identity;
+using zero.Web.Models;
 
 namespace zero.Web.Controllers
 {
@@ -29,6 +30,10 @@ namespace zero.Web.Controllers
     public async Task<IActionResult> GetAllAsTree([FromQuery] string parent = null, [FromQuery] string active = null) => Json(await Api.GetAllAsTree(parent, active));
 
 
+    [HttpPost]
+    public async Task<IActionResult> Move([FromBody] ActionCopyModel model) => Json(await Api.Move(model.Id, model.DestinationId));
+
+
     public async Task<IActionResult> Save([FromBody] IMediaFolder model) => Json(await Api.Save(model));
 
 
diff --git a/zero.Web/Controllers/PagesController.cs b/zero.Web/Controllers/PagesController.cs
index 69a38b7c..f43894f0 100644
--- a/zero.Web/Controllers/PagesController.cs
+++ b/zero.Web/Controllers/PagesController.cs
@@ -56,24 +56,14 @@ namespace zero.Web.Controllers
     public async Task<IActionResult> SaveSorting([FromBody] string[] ids) => Json(await Api.SaveSorting(ids));
 
     [HttpPost]
-    public async Task<IActionResult> Move([FromBody] CopyModel model) => Json(await Api.Move(model.Id, model.DestinationId));
+    public async Task<IActionResult> Move([FromBody] ActionCopyModel model) => Json(await Api.Move(model.Id, model.DestinationId));
 
     [HttpPost]
-    public async Task<IActionResult> Copy([FromBody] CopyModel model) => Json(await Api.Copy(model.Id, model.DestinationId, model.IncludeDescendants));
+    public async Task<IActionResult> Copy([FromBody] ActionCopyModel model) => Json(await Api.Copy(model.Id, model.DestinationId, model.IncludeDescendants));
 
     [HttpPost]
-    public async Task<IActionResult> Restore([FromBody] CopyModel model) => Json(await Api.Restore(model.Id, model.IncludeDescendants));
+    public async Task<IActionResult> Restore([FromBody] ActionCopyModel model) => Json(await Api.Restore(model.Id, model.IncludeDescendants));
 
     public async Task<IActionResult> Delete([FromQuery] string id) => Json(await Api.Delete(id, true));
-
-
-    public class CopyModel
-    {
-      public string Id { get; set; }
-
-      public string DestinationId { get; set; }
-
-      public bool IncludeDescendants { get; set; }
-    }
   }
 }
diff --git a/zero.Web/Models/ActionCopyModel.cs b/zero.Web/Models/ActionCopyModel.cs
new file mode 100644
index 00000000..3fc60ffb
--- /dev/null
+++ b/zero.Web/Models/ActionCopyModel.cs
@@ -0,0 +1,11 @@
+namespace zero.Web.Models
+{
+  public class ActionCopyModel
+  {
+    public string Id { get; set; }
+
+    public string DestinationId { get; set; }
+
+    public bool IncludeDescendants { get; set; }
+  }
+}
diff --git a/zero.Web/Resources/Localization/zero.en-us.json b/zero.Web/Resources/Localization/zero.en-us.json
index 02e96ae8..2db0df0a 100644
--- a/zero.Web/Resources/Localization/zero.en-us.json
+++ b/zero.Web/Resources/Localization/zero.en-us.json
@@ -70,6 +70,15 @@
       "action": "Copy",
       "text": "Copy <b>{name}</b> to the selected page in the tree structure below.",
       "includeDescendants": "Include descendants"
+    },
+    "open": {
+      "title": "Open"
+    },
+    "rename": {
+      "title": "Rename"
+    },
+    "edit": {
+      "title": "Edit"
     }
   },
 
@@ -476,6 +485,7 @@
     "list": "Media",
     "name": "Media",
     "addfolder": "Add a new folder",
+    "editfolder": "Edit folder",
     "fields": {
       "foldername_placeholder": "Enter a name ...",
       "caption": "Caption",
@@ -491,6 +501,10 @@
       "colorSpace": "Color space",
       "hasTransparency": "Has transparency",
       "frames": "Frames"
+    },
+    "deleteoverlay": {
+      "folder_text": "This will delete the folder and all its descendants including subfolders and files. Are you sure?",
+      "folder_success_text": "You have successfully deleted this folder"
     }
   },