Skip to content

Commit 375e177

Browse files
author
TimoPerplex
committed
Added folder structure for the forms dashboard and added a new datatype to add forms with support for folders
1 parent 9f1d37f commit 375e177

26 files changed

+1751
-45
lines changed

‎Perplex.Umbraco.Forms/App_Plugins/PerplexUmbracoForms/backoffice/perplexForms/folder.html

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<div ng-controller="Perplex.Form.FolderController" class="perplex-folder">
2+
<form novalidate ng-submit="update()">
3+
4+
<div class="umb-panel-header">
5+
<div class="row-fluid">
6+
<div>
7+
<div class="span7">
8+
<div class="umb-headline-editor-wrapper">
9+
<input type="text" localize="placeholder" class="umb-headline" placeholder="Enter a name..." ng-model="folder.name" style="border: 1px solid rgba(175, 175, 175, 0.196078); background-color: rgba(255, 255, 255, 0.196078);">
10+
</div>
11+
</div>
12+
</div>
13+
</div>
14+
</div>
15+
16+
<div class="umb-panel-body umb-scrollable row-fluid">
17+
<div class="umb-pane perplex-sort perplex-folder">
18+
<p ng-if="folder && (folder.folder.length > 0 || folder.forms.length > 0)">
19+
<h4>Reorder folders and forms using drag &amp; drop</h4>
20+
<hr />
21+
</p>
22+
23+
<div ng-if="folder && folder.folders.length > 0">
24+
<h4 class="bold">Folders</h4>
25+
<ul class="folders" ui-sortable ng-model="folder.folders">
26+
<li ng-repeat="folder in folder.folders">
27+
<i class="icon umb-tree-icon sprTree icon-folder-close"></i><a href="#/forms/perplexForms/folder/{{ folder.id }}">{{ folder.name }}</a>
28+
</li>
29+
</ul>
30+
</div>
31+
<br />
32+
33+
<div ng-if="folder && folder.forms.length > 0">
34+
<h4 class="bold">Forms</h4>
35+
<ul class="folders" ui-sortable ng-model="folder.forms">
36+
<li ng-repeat="form in folder.forms">
37+
<i class="icon umb-tree-icon sprTree icon-autofill"></i><a href="#/forms/form/edit/{{ getFormId(form) }}">{{ getFormName(form) }}</a>
38+
</li>
39+
</ul>
40+
</div>
41+
</div>
42+
43+
<div class="umb-tab-buttons" style="padding-left: 15px;">
44+
<div class="btn-group">
45+
<button data-hotkey="ctrl+s" class="btn btn-success">
46+
<localize key="buttons_save" class="ng-isolate-scope ng-scope">Save</localize>
47+
</button>
48+
</div>
49+
</div>
50+
</div>
51+
</form>
52+
</div>

‎Perplex.Umbraco.Forms/App_Plugins/PerplexUmbracoForms/controllers/perplex.copy.controller.js

+17-20
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,26 @@
11
angular.module("umbraco").controller("Perplex.Form.CopyController",
2-
function ($scope, perplexFormResource, navigationService, treeService) {
2+
function ($scope, perplexFormResource, navigationService) {
33
$scope.copy = function (id) {
4-
5-
perplexFormResource.copyByGuid(id).then(function () {
6-
// Reload the tree by passing the parent path
7-
navigationService.syncTree({ tree: "form", path: [String($scope.currentNode.parent().path)], forceReload: true });
8-
// Hide the tree
4+
5+
perplexFormResource.copyByGuid(id).then(function(response) {
6+
// The response contains the parent folder of the form
7+
var folder = response.data;
8+
9+
// We want to expand to the last form of the folder,
10+
// which is the form we just added
11+
var formId = folder.forms[folder.forms.length - 1];
12+
13+
var path = folder.path.concat([formId]);
14+
15+
// Refresh the folder
16+
navigationService.syncTree({ tree: "form", path: path, forceReload: true });
17+
18+
// Hide menu
919
navigationService.hideNavigation();
1020
});
1121

1222
};
1323
$scope.cancelCopy = function () {
1424
navigationService.hideNavigation();
1525
};
16-
});
17-
18-
function perplexFormResource($http) {
19-
//the factory object returned
20-
var apiRoot = "backoffice/api/PerplexUmbracoForm/";
21-
22-
return {
23-
copyByGuid: function (id) {
24-
return $http.post(apiRoot + "CopyByGuid?guid=" + id);
25-
},
26-
};
27-
}
28-
29-
angular.module('umbraco.resources').factory('perplexFormResource', perplexFormResource);
26+
});

‎Perplex.Umbraco.Forms/App_Plugins/PerplexUmbracoForms/controllers/perplex.createfolder.controller.js

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
angular.module("umbraco").controller("Perplex.Form.CreateFolderController",
2+
function ($scope, perplexFormResource, navigationService, notificationsService) {
3+
$scope.createFolder = function (parentId, name) {
4+
// Empty names are fine, but undefined or null will be sent as string so transform
5+
// to empty string instead
6+
perplexFormResource.createFolder(parentId, name || '').then(function (response) {
7+
// response.data contains the created folder object
8+
var folder = response.data;
9+
10+
// Navigate to the created folder's path in the tree
11+
navigationService.syncTree({ tree: "form", path: folder.path, forceReload: true, activate: true });
12+
13+
// Hide the tree
14+
navigationService.hideNavigation();
15+
16+
notificationsService.showNotification({ type: 0, header: "Folder created" });
17+
});
18+
};
19+
20+
$scope.cancelCreateFolder = function () {
21+
navigationService.hideNavigation();
22+
};
23+
});

‎Perplex.Umbraco.Forms/App_Plugins/PerplexUmbracoForms/controllers/perplex.deletefolder.controller.js

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
angular.module("umbraco").controller("Perplex.Form.DeleteFolderController",
2+
function ($scope, perplexFormResource, navigationService, treeService) {
3+
$scope.deleteFolder = function (folderId) {
4+
// Make sure deleteForms is a boolean, and not (for example) undefined;
5+
var deleteForms = !!$scope.deleteForms;
6+
7+
perplexFormResource.deleteFolder(folderId, deleteForms).then(function (response) {
8+
// Remove the deleted folder from the tree
9+
treeService.removeNode($scope.currentNode);
10+
11+
// Hide menu
12+
navigationService.hideNavigation();
13+
});
14+
}
15+
16+
$scope.cancelDeleteFolder = function () {
17+
navigationService.hideNavigation();
18+
};
19+
});

‎Perplex.Umbraco.Forms/App_Plugins/PerplexUmbracoForms/controllers/perplex.folder.controller.js

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
angular.module("umbraco").controller("Perplex.Form.FolderController",
2+
function ($scope, $routeParams, $http, formResource, perplexFormResource, navigationService, treeService, notificationsService) {
3+
$scope.folder = null;
4+
$scope.forms = [];
5+
6+
var nodeId = $routeParams.id;
7+
8+
// Load all forms (required to display their names, we do not store form names)
9+
formResource.getOverView()
10+
.then(function (response) {
11+
$scope.forms = response.data;
12+
13+
// Load this folder
14+
perplexFormResource.getFolder(nodeId).then(function (response) {
15+
$scope.folder = response.data;
16+
17+
// Goto folder in tree
18+
navigationService.syncTree({ tree: "form", path: $scope.folder.path, forceReload: false, activate: true });
19+
}, function (error) { });
20+
});
21+
22+
$scope.update = function () {
23+
perplexFormResource.update($scope.folder).then(function (response) {
24+
// Reload folder
25+
navigationService.syncTree({ tree: "form", path: $scope.folder.path, forceReload: true }).then(function (syncArgs) {
26+
navigationService.reloadNode(syncArgs.node);
27+
28+
// Hide the tree
29+
navigationService.hideNavigation();
30+
31+
notificationsService.showNotification({ type: 0, header: "Folder saved" });
32+
});
33+
});
34+
};
35+
36+
$scope.getFormName = function (formId) {
37+
var form = getForm(formId);
38+
if (form == null) return "";
39+
40+
return form.name;
41+
};
42+
43+
$scope.getFormId = function (formId) {
44+
var form = getForm(formId);
45+
if (form == null) return "";
46+
47+
return form.id;
48+
}
49+
50+
function getForm(formId) {
51+
return _.find($scope.forms, { id: formId });
52+
}
53+
});

‎Perplex.Umbraco.Forms/App_Plugins/PerplexUmbracoForms/controllers/perplex.movefolder.controller.js

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
angular.module("umbraco").controller("Perplex.Form.MoveFolderController",
2+
function ($scope, $http, perplexFormResource, navigationService, treeService) {
3+
$scope.folders = [];
4+
5+
// Load all folders, all nested inside the root
6+
perplexFormResource.getRootFolder().then(function (response) {
7+
if (response.data != null) {
8+
var rootFolder = response.data;
9+
10+
// Add all folders to the flat list,
11+
// except the folder we are going to move
12+
addFolder(rootFolder);
13+
}
14+
}, function (error) {});
15+
16+
function addFolder(folder) {
17+
// Do not add the folder itself, we cannot be moving a folder to itself.
18+
// Moving to the current parent is silly as well, but removing that would mess up the tree's looks
19+
if (folder.id == $scope.currentNode.id) {
20+
return;
21+
}
22+
23+
folder.depth = folder.path.length - 1;
24+
$scope.folders.push(folder);
25+
// Add child nodes
26+
for (var i = 0; i < folder.folders.length; i++) {
27+
addFolder(folder.folders[i]);
28+
}
29+
}
30+
31+
$scope.moveFolder = function (id, folderId) {
32+
perplexFormResource.moveFolder(id, folderId).then(function (response) {
33+
// response.data contains the moved folder (after it was moved)
34+
var movedFolder = response.data;
35+
36+
// Remove the folder from the tree
37+
treeService.removeNode($scope.currentNode);
38+
39+
// Activate the form in its new location
40+
navigationService.syncTree({ tree: "form", path: movedFolder.path, forceReload: false, activate: true });
41+
42+
// Hide menu
43+
navigationService.hideNavigation();
44+
});
45+
46+
};
47+
48+
$scope.selectFolder = function (folder) {
49+
$scope.folderId = folder.id;
50+
};
51+
52+
$scope.cancelMoveFolder = function () {
53+
navigationService.hideNavigation();
54+
};
55+
});

‎Perplex.Umbraco.Forms/App_Plugins/PerplexUmbracoForms/controllers/perplex.moveform.controller.js

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
angular.module("umbraco").controller("Perplex.Form.MoveFormController",
2+
function ($scope, $http, perplexFormResource, navigationService, treeService) {
3+
$scope.folders = [];
4+
5+
// Load all folders, all nested inside the root
6+
perplexFormResource.getRootFolder().then(function (response) {
7+
if (response.data != null) {
8+
var rootFolder = response.data;
9+
10+
// Add all folders to the flat list
11+
addFolder(rootFolder);
12+
}
13+
}, function (error) { });
14+
15+
function addFolder(folder) {
16+
folder.depth = folder.path.length - 1;
17+
$scope.folders.push(folder);
18+
// Add child nodes
19+
for (var i = 0; i < folder.folders.length; i++) {
20+
addFolder(folder.folders[i]);
21+
}
22+
}
23+
24+
$scope.moveForm = function (formId, folderId) {
25+
perplexFormResource.moveForm(formId, folderId).then(function (response) {
26+
// response.data contains the new folder so we can sync the tree
27+
var newFolder = response.data;
28+
29+
var formPath = newFolder.path.concat([formId]);
30+
31+
// Remove the form from the tree
32+
treeService.removeNode($scope.currentNode);
33+
34+
// Activate the form in its new location
35+
navigationService.syncTree({ tree: "form", path: formPath, forceReload: false, activate: true });
36+
37+
// Hide menu
38+
navigationService.hideNavigation();
39+
});
40+
};
41+
42+
$scope.selectFolder = function (folder) {
43+
$scope.folderId = folder.id;
44+
};
45+
46+
$scope.cancelMoveForm = function () {
47+
navigationService.hideNavigation();
48+
};
49+
});

‎Perplex.Umbraco.Forms/App_Plugins/PerplexUmbracoForms/controllers/perplex.sort.controller.js

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
angular.module("umbraco").controller("Perplex.Form.SortController",
2+
function ($scope, $routeParams, $http, formResource, perplexFormResource, navigationService, notificationsService) {
3+
$scope.folder = null;
4+
$scope.forms = [];
5+
6+
// If currentNode is undefined, use routeParams
7+
// This is the case in the folder-view (folder.html, when a folder is clicked, it uses the same controller)
8+
var nodeId;
9+
if ($scope.currentNode) {
10+
nodeId = $scope.currentNode.id;
11+
} else {
12+
nodeId = $routeParams.id;
13+
}
14+
15+
// Load all forms (required to display their names, we do not store form names)
16+
formResource.getOverView()
17+
.then(function (response) {
18+
$scope.forms = response.data;
19+
20+
// Load this folder
21+
perplexFormResource.getFolder(nodeId).then(function (response) {
22+
$scope.folder = response.data;
23+
24+
// Goto folder in tree
25+
navigationService.syncTree({ tree: "form", path: $scope.folder.path, forceReload: false, activate: true });
26+
}, function (error) { });
27+
});
28+
29+
$scope.sort = function () {
30+
// We call it sort, but we actually update every aspect of this folder :)
31+
perplexFormResource.update($scope.folder).then(function (response) {
32+
// Reload folder
33+
navigationService.syncTree({ tree: "form", path: $scope.folder.path, forceReload: true }).then(function (syncArgs) {
34+
navigationService.reloadNode(syncArgs.node);
35+
36+
// Hide the tree
37+
navigationService.hideNavigation();
38+
39+
// Notify user
40+
notificationsService.showNotification({ type: 0, header: "Sorting successful" });
41+
});
42+
});
43+
};
44+
45+
$scope.getFormName = function (formId) {
46+
var form = getForm(formId);
47+
if (form == null) return "";
48+
49+
return form.name;
50+
};
51+
52+
$scope.getFormId = function (formId) {
53+
var form = getForm(formId);
54+
if (form == null) return "";
55+
56+
return form.id;
57+
}
58+
59+
function getForm(formId) {
60+
return _.find($scope.forms, { id: formId });
61+
}
62+
63+
$scope.cancelSort = function () {
64+
navigationService.hideNavigation();
65+
};
66+
});

0 commit comments

Comments
 (0)