Validation stamp ordering: GUI

nemerosa · Jul 13, 2014 · aa55a12 · aa55a12
1 parent a2a0fdd
commit aa55a12
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 11 deletions.
diff --git a/ontrack-web/src/app/view/view.branch.js b/ontrack-web/src/app/view/view.branch.js
@@ -108,6 +108,18 @@ angular.module('ot.view.branch', [
         function loadValidationStamps() {
             ot.call($http.get($scope.branch._validationStamps)).then(function (collection) {
                 $scope.validationStampCollection = collection;
+                $scope.validationStampSortOptions = {
+                    disabled: !$scope.branch._reorderValidationStamps,
+                    stop: function (event, ui) {
+                        var ids = $scope.validationStampCollection.resources.map(function (pl) {
+                            return pl.id;
+                        });
+                        ot.call($http.put(
+                            $scope.branch._reorderValidationStamps,
+                            { ids: ids}
+                        ));
+                    }
+                };
             });
         }
 

diff --git a/ontrack-web/src/app/view/view.branch.tpl.html b/ontrack-web/src/app/view/view.branch.tpl.html
@@ -41,18 +41,20 @@
             <ot-noentry list="validationStampCollection.resources">
                 No validation stamp has been created yet.
             </ot-noentry>
-            <table class="ot-validationStamp-table">
-                <tr ng-repeat="validationStamp in validationStampCollection.resources">
-                    <td class="ot-entity-image">
+            <div ng-if="validationStampCollection.resources" class="ot-entity-sortable-list"
+                 ui-sortable="validationStampSortOptions" ng-model="validationStampCollection.resources">
+                <div ng-repeat="validationStamp in validationStampCollection.resources" class="ot-entity-sortable-list-item">
+                    <span class="ot-entity-sortable-list-handle"
+                          ng-if="branch._reorderValidationStamps"
+                          title="Move this to reorder the validation stamps">&nbsp;</span>
+                    <span class="ot-entity-sortable-list-image">
                         <ot-entity-image entity="validationStamp" link="#/validationStamp/{{validationStamp.id}}"></ot-entity-image>
-                    </td>
-                    <td>
-                        <a href="#/validationStamp/{{validationStamp.id}}">
-                            {{validationStamp.name}}
-                        </a>
-                    </td>
-                </tr>
-            </table>
+                    </span>
+                    <a href="#/validationStamp/{{validationStamp.id}}" class="ot-entity-sortable-list-link">
+                        {{validationStamp.name}}
+                    </a>
+                </div>
+            </div>
             <button ng-if="branch._createValidationStamp" type="button" class="btn btn-default"
                     ng-click="createValidationStamp()">New validation stamp
             </button>