Improved Folderpicker-directive layout

Signed-off-by: Felix Nüsse <Felix.nuesse@t-online.de>

controller/translationcontroller.php

@@ -423,8 +423,11 @@ class TranslationController extends ApiController {
 
 
 			//template/views/partials/folder-picker
-			'folderpath.select' => $this->trans->t('Move to:'),
+			'folderpath.credential' => $this->trans->t('Credential to move'),
-			'folderpath.moved' => $this->trans->t('Moved successfullly!'),
+			'folderpath.move' => $this->trans->t('Move'),
+			'folderpath.cancel' => $this->trans->t('Cancel'),
+			'folderpath.newfolder' => $this->trans->t('New Folder'),
+			'folderpath.createfolder' => $this->trans->t('Create'),
 		);
 		return new JSONResponse($translations);
 	}

js/app/controllers/main.js

@@ -55,6 +55,8 @@
 					$scope.http_warning_hidden = true;
 				}
 
+                $scope.http_warning_hidden = true;
+
 				if(SettingsService.isEnabled('disable_debugger')){
 					(function a() {
 						try {

js/app/directives/folderpicker.js

@@ -34,29 +34,110 @@
           templateUrl: 'views/partials/folder-picker.html',
           restrict: 'A',
           scope: {
-              credential: '=folderPicker'
+              credential: '=folderPicker',
+              folder: '=folder'
           },
           link: function(scope, element) {
 
+              scope.currentFolder = scope.credential.folderpath;
+              scope.tempFolderList = [];
+              scope.BreadcrumbList = ["test","1"];
+              scope.enableInput = false;
+
+              scope.toggleInput = function() {
+                  scope.enableInput = !scope.enableInput;
+              };
+
 			  scope.save = function() {
-				  CredentialService.updateCredential(scope.credential).then(function () {
+				  CredentialService.updateCredential(scope.credential).then(function (updated_credential) {
 					  NotificationService.showNotification($translate.instant('folderpath.moved'), 5000);
-					  $rootScope.$broadcast('updateFolderInMainList', scope.credential);
+					  $rootScope.$broadcast('updateFolderInMainList', updated_credential);
-					  $('#folderPicker').dialog('close');
+					  //$('#folderPicker').dialog('close');
 				  });
 			  };
 
-
+              scope.currentPathAddNew = function (nextFolder) {
-
+                  if(typeof nextFolder === 'undefined'){
-          $(element).click(function() {
+                      nextFolder=$translate.instant('folderpath.newfolder');
-              $('#folderPicker').dialog({
-                  width: 400,
-                  height: 140,
-                  close: function() {
-                      $(this).dialog('destroy');
                   }
+                  scope.currentPathAdd(nextFolder);
+                  scope.enableInput=false;
+              };
+
+              scope.currentPathAdd = function (nextFolder) {
+                  console.log(scope.tempFolderList)
+                  scope.currentFolder+='/'+nextFolder;
+                  scope.getCurrentFolderList();
+                  scope.setCurrentFolderFromBreadcrumb(scope.currentFolder);
+              };
+
+              scope.getCurrentFolderList = function () {
+                  var Temp=[];
+                  for (var i=0; i<scope.folder.length; i++) {
+                      if(scope.folder[i].startsWith(scope.currentFolder) && scope.checkIfFolderIsSubfolder(scope.folder[i])){
+                          var reducedFoldername=scope.cutScopeFolderFromFoldername(scope.folder[i]);
+                          if(Temp.indexOf(reducedFoldername) <= -1){
+                              Temp.push(reducedFoldername);
+                          }
+                      }
+                  }
+                  Temp.splice( Temp.indexOf(""), 1 );
+                  scope.tempFolderList=Temp;
+              };
+
+              scope.checkIfFolderIsSubfolder = function (folder) {
+                  return folder.startsWith(scope.currentFolder);
+              };
+
+              scope.cutScopeFolderFromFoldername = function (folder) {
+                  var withoutParent=folder.replace(scope.currentFolder, "")+"/";
+                  var withoutRest="";
+                  var temp="";
+                  if(withoutParent.startsWith("/")){
+                      temp=withoutParent.substring(1,withoutParent.length);
+                      withoutRest=temp.substring(0,temp.indexOf("/"));
+                  }else{
+                      withoutRest=withoutParent.substring(0,withoutParent.indexOf("/"));
+                  }
+
+                  return withoutRest;
+              };
+
+              scope.createBreadCrumbList = function () {
+                  var array= scope.currentFolder.split("/").filter(Boolean);
+                  var res=[];
+                  var fullPath="/";
+                  array.forEach(function (element) {
+                      fullPath+=element+"/";
+                      res.push({fullPath:fullPath, name:element});
+                  });
+                  scope.BreadcrumbList=res;
+
+              };
+
+              scope.setCurrentFolderFromBreadcrumb = function (folder) {
+                  scope.currentFolder=folder;
+                  scope.createBreadCrumbList();
+                  scope.getCurrentFolderList();
+              };
+
+              scope.createBreadCrumbList();
+              scope.getCurrentFolderList();
+
+              scope.close = function() {
+
+              };
+
+              $(element).click(function() {
+                  $('#folderPicker').dialog({
+                      width: 400,
+                      //height: 140,
+                      height: 340,
+                      close: function() {
+                          $(this).dialog('destroy');
+                      }
+                  });
               });
-          });
           }
       };
   }]);

sass/app.scss

@@ -26,6 +26,7 @@
 @import 'partials/popovermenu';
 @import 'partials/tabs';
 @import 'partials/pwgen';
+@import 'partials/folder-picker';
 @import 'vaults';
 @import 'credentials';
 @import 'menu';

sass/partials/folder-picker.scss

@@ -0,0 +1,58 @@
+/**
+ * Nextcloud - passman
+ *
+ * @copyright Copyright (c) 2018, Felix Nüsse (felix.nuesse@t-online.de)
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+$folderrowheight: 35px;
+
+#folder-list{
+  table{
+    width: 100%;
+    td{
+      height: $folderrowheight;
+      border-bottom: 1px solid var(--color-border);
+    }
+  }
+
+  .icon{
+    height: $folderrowheight;
+    width: 20px;
+    float: left;
+    padding: 5px 5px 10px;
+    cursor: pointer;
+  }
+
+  .name{
+    height: $folderrowheight;
+    width: calc(100% - 30px);
+    float: left;
+    margin-top: 15px;
+    cursor: pointer;
+  }
+
+  .input{
+    height: $folderrowheight;
+    width: calc(100% - 30px);
+    float: left;
+    margin-top: 5px;
+    padding-bottom: 10px;
+    cursor: pointer;
+  }
+
+}

templates/views/partials/folder-picker.html

@@ -1,8 +1,41 @@
-<div style="display: none" id="folderPicker" title="{{ 'folderpath.select' | translate }}">
+<div style="display: none" id="folderPicker" title="{{ 'folderpath.credential' | translate }}: {{credential.label}}">
-	<label>{{ 'folderpath' | translate}}</label>
 	<div>
-		<input id="folderpicker-input" type="text" ng-model="credential.folderpath">
+		<input id="folderpicker-input" type="text" ng-model="currentFolder" readonly style="display: none;">
-		<button ng-click="save()">{{ 'use.icon' | translate}}</button>
+	</div>
+
+	<div id="breadcrumb"></div>
+	<div class="breadcrumb">
+		<div class="breadcrumb">
+			<div class="crumb svg ui-droppable" data-dir="/">
+				<a ng-click="setCurrentFolderFromBreadcrumb('/')"><i class="fa fa-home"></i></a>
+			</div>
+			<div class="crumb svg" ng-repeat="path in BreadcrumbList"  ng-click="setCurrentFolderFromBreadcrumb(path.fullPath)" >
+				<a>{{::path.name}}</a>
+			</div>
+		</div>
+	</div>
+	<div id="folder-list">
+		<table class="folder-list">
+			<tr class="folder-row" ng-repeat="entry in tempFolderList" ng-click="currentPathAdd(entry);">
+				<td class="icon icon-folder"></td>
+				<td class="name">{{entry}}</td>
+				<td class="space"></td>
+			</tr>
+			<tr class="folder-row">
+				<td class="icon icon-folder"></td>
+				<td class="name" ng-if="!enableInput" ng-click="toggleInput()">New...</td>
+				<td class="input" ng-if="enableInput">
+					<form ng-submit="currentPathAddNew(newfolderinput);">
+						<input type="text" value="{{ 'folderpath.newfolder' | translate}}" ng-model="newfolderinput">
+						<button>{{ 'folderpath.createfolder' | translate}}</button>
+					</form>
+				</td>
+				<td class="space"></td>
+			</tr>
+		</table>
+	</div>
+	<div id="controls">
+		<button ng-click="close()">{{ 'folderpath.cancel' | translate}}</button>
+		<button class="primary" ng-click="save()">{{ 'folderpath.move' | translate}}</button>
 	</div>
 </div>
-

templates/views/show_vault.html

@@ -70,6 +70,7 @@
 							</span>
 
 						<div folder-picker="credential"
+							 folder="FolderList"
 							 class="icon-settings cog"
 							 ng-class="{'icon-settings-dark':hovering}"
 							 ng-mouseenter="hovering=true"