option to move folders to other folders (#758)

* option to move folders to other folders * changelog * improve ui
luyadev · Mar 21, 2024 · 07aa41f · 07aa41f
1 parent 1b83e6a
commit 07aa41f
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 11 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,7 @@ In order to read more about upgrading and BC breaks have a look at the [UPGRADE
 
 ## 5.0.2
 
++ [#758](https://github.com/luyadev/luya-module-admin/pull/758) Enhanced the functionality to reorganize folders within the folder hierarchy, allowing for movement to the root or placement into a different subfolder.
 + [#756](https://github.com/luyadev/luya-module-admin/pull/756) Fixed collapsing tooltips due empty content in this case the tooltip is no longer displayed
 + [#755](https://github.com/luyadev/luya-module-admin/pull/755) Provided popup delay `tooltip-popup-delay` for tooltip directive.
 + [#754](https://github.com/luyadev/luya-module-admin/pull/754) Improved `admin/setup` command outputs.

diff --git a/src/apis/StorageController.php b/src/apis/StorageController.php
@@ -587,7 +587,9 @@ public function actionFolderUpdate($folderId)
 
         $this->flushApiCache();
 
-        return $model->update();
+        $model->update();
+
+        return $model;
     }
 
     /**

diff --git a/src/resources/dist/main.css b/src/resources/dist/main.css
diff --git a/src/resources/dist/main.js b/src/resources/dist/main.js
diff --git a/src/resources/js/directives.js b/src/resources/js/directives.js
@@ -1450,10 +1450,23 @@ zaa.directive("storageFileManager", function () {
                     });
                 };
 
+                $scope.isFolderMoveModalHidden = true;
+
+                $scope.currentEditFolder = null;
+
                 $scope.cancelFolderEdit = function (folder, oldName) {
                     folder.name = oldName;
+                    $scope.isFolderMoveModalHidden = true
                 };
 
+                $scope.moveFolderTo = function(targetFolder, toFolderId) {
+                    $http.post('admin/api-admin-storage/folder-update?folderId=' + targetFolder.id, { parent_id: toFolderId }).then(function (transport) {
+                        AdminToastService.success(i18nParam('js_ngrest_toggler_success', {field: targetFolder.name}));
+                        $scope.isFolderMoveModalHidden = true
+                        $scope.foldersDataReload()
+                    });
+                }
+
                 $scope.deleteFolder = function (folder) {
                     $http.post('admin/api-admin-storage/is-folder-empty?folderId=' + folder.id, { name: folder.name }).then(function (transport) {
                         var isEmpty = transport.data.empty;

diff --git a/src/resources/scss/components/_folders.scss b/src/resources/scss/components/_folders.scss
@@ -24,13 +24,9 @@ $icon-line-height: $icon-font-size + 5px;
 
 .folders-folder {
     display: block;
-    padding: 2px 75px 2px 20px;
+    padding: 2px 100px 2px 20px;
     position: relative;
 
-    &--undeletable {
-        padding-right: 40px;
-    }
-
     &-main {
         padding: 0;
     }

diff --git a/src/views/layouts/_angulardirectives.php b/src/views/layouts/_angulardirectives.php
@@ -186,7 +186,7 @@
 </script>
 
 <script type="text/ng-template" id="reverseFolders">
-    <div class="folders-folder" ng-init="editFolderLabel = false; oldFolder = folder.name" ng-class="{'folders-folder--edit': editFolderLabel && !showFoldersToMove, 'folders-folder--move-to': showFoldersToMove, 'folders-folder--undeletable': folder.subfolder}" tooltip tooltip-expression="folderCountMessage(folder)" tooltip-position="right">
+    <div class="folders-folder" ng-init="editFolderLabel = false; oldFolder = folder.name" ng-class="{'folders-folder--edit': editFolderLabel && !showFoldersToMove, 'folders-folder--move-to': showFoldersToMove}" tooltip tooltip-expression="folderCountMessage(folder)" tooltip-position="right">
         <div class="folder-left">
             <button class="folder-toggler" ng-click="toggleFolderItem(folder)" ng-if="folder.subfolder == true">
                 <i class="material-icons" ng-if="folder.toggle_open">keyboard_arrow_down</i>
@@ -199,29 +199,43 @@
                     <i class="material-icons" ng-if="currentFolderId == folder.id">folder</i>
                     <i class="material-icons" ng-if="currentFolderId != folder.id">folder_open</i>
                 </div>
-                <div class="folder-label" ng-class="{'is-active' : hasFolderActiveChild(folder.id)}">{{folder.name }}</div>
+                <div class="folder-label" ng-class="{'is-active' : hasFolderActiveChild(folder.id)}">{{ folder.name }}</div>
             </span>
             <div class="folder-edit">
                 <input class="folder-edit-input" ng-model="folder.name" type="text" />
             </div>
         </div>
         <div class="folder-right folder-action-default">
-            <button class="folder-button folder-button--edit" ng-click="editFolderLabel=!editFolderLabel;"><i class="material-icons">edit</i></button>
+            <button class="folder-button folder-button--edit" ng-click="editFolderLabel=!editFolderLabel; currentEditFolder=folder"><i class="material-icons">edit</i></button>
             <button class="folder-button folder-button--delete" ng-hide="folder.subfolder || folder.filesCount > 0" ng-click="deleteFolder(folder)"><i class="material-icons">delete</i></button>
         </div>
         <div class="folder-right folder-action-edit">
             <button class="folder-button folder-button--save" ng-click="updateFolder(folder); editFolderLabel=!editFolderLabel"><i class="material-icons">check</i></button>
+            <button class="folder-button" ng-click="isFolderMoveModalHidden=!isFolderMoveModalHidden"><i class="material-icons">subdirectory_arrow_right</i></button>
             <button class="folder-button folder-button--abort" ng-click="cancelFolderEdit(folder, oldFolder); editFolderLabel=!editFolderLabel;"><i class="material-icons">cancel</i></button>
         </div>
         <div class="folder-right folder-action-move-to">
             <button class="folder-button folder-button--move-to" ng-click="moveFilesTo(folder.id)"><i class="material-icons">subdirectory_arrow_left</i></button>
         </div>
+        <modal is-modal-hidden="isFolderMoveModalHidden" modal-title="{{ folder.name }}">
+            <div ng-if="!isFolderMoveModalHidden">
+                <button type="button" class="btn my-1 btn-icon btn-outline-folder" ng-click="moveFolderTo(currentEditFolder, 0)"><?= Admin::t('layout_filemanager_root_dir'); ?></button>
+                <div ng-repeat="folderlist in getFolderData(0) track by folderlist.id" ng-include="'folderMoveTemplate'"></div>
+            </div>
+        </modal>
     </div>
     <ul class="folders" ng-if="folder.subfolder === true && folder.toggle_open==1">
         <li class="folders-folder-item" ng-class="{'is-movable' : showFoldersToMove}" ng-repeat="folder in getFolderData(folder.id) track by folder.id" ng-include="'reverseFolders'"></li>
     </ul>
 </script>
 
+<script type="text/ng-template" id="folderMoveTemplate">
+    <div>
+        <button type="button" class="btn my-1 btn-icon btn-outline-folder" ng-click="moveFolderTo(currentEditFolder, folderlist.id)" ng-disabled="folderlist.id == currentEditFolder.id || folderlist.id == currentEditFolder.parentId">{{ folderlist.name }}</button>
+        <div style="margin-left:20px;" ng-repeat="folderlist in getFolderData(folderlist.id) track by folderlist.id" ng-include="'folderMoveTemplate'"></div>
+    </div>
+</script>
+
 <!-- FILEMANAGER -->
 <script type="text/ng-template" id="storageFileManager">
 <div class="filemanager"  ng-paste="pasteUpload($event)">