Merge pull request #51 from TAMULib/sprint5-61-multiple-remote-products

Allowing muliple remote products per product
TAMULib · May 4, 2020 · 60b0706 · 60b0706
2 parents d333335 + af25675
commit 60b0706
Show file tree

Hide file tree

Showing 8 changed files with 142 additions and 32 deletions.
diff --git a/app/controllers/productController.js b/app/controllers/productController.js
@@ -10,18 +10,36 @@ app.controller('ProductController', function ($controller, $scope, ApiResponseAc
 
     $scope.productToDelete = {};
 
+    $scope.addingRemoteProductInfo = false;
+    $scope.remoteProductInfoChanged = false;
+
+    $scope.remoteProductInfoToAdd = {
+        remoteProductManager: null,
+        scopeId: null
+    };
+
     $scope.productForms = {
         validations: ProductRepo.getValidations(),
         getResults: ProductRepo.getValidationResults
     };
 
+    $scope.closeAddRemoteProductInfo = function() {
+        $scope.addingRemoteProductInfo = false;
+        $scope.remoteProductInfoToAdd = {
+            remoteProductManager: null,
+            scopeId: null
+        };
+    };
+
     $scope.resetProductForms = function () {
         ProductRepo.clearValidationResults();
         for (var key in $scope.productForms) {
             if ($scope.productForms[key] !== undefined && !$scope.productForms[key].$pristine && $scope.productForms[key].$setPristine) {
                 $scope.productForms[key].$setPristine();
             }
         }
+        $scope.closeAddRemoteProductInfo();
+        $scope.remoteProductInfoChanged = false;
         $scope.closeModal();
     };
 
@@ -76,6 +94,21 @@ app.controller('ProductController', function ($controller, $scope, ApiResponseAc
         });
     };
 
+    $scope.openAddRemoteProductInfo = function() {
+        $scope.addingRemoteProductInfo = true;
+    };
+
+    $scope.addRemoteProductInfo = function(remoteProducts, remoteProduct) {
+        remoteProducts.push(remoteProduct);
+        $scope.remoteProductInfoChanged = true;
+        $scope.closeAddRemoteProductInfo();
+    };
+
+    $scope.removeRemoteProductInfo = function(remoteProducts, remoteProduct) {
+        remoteProducts.splice(remoteProducts.indexOf(remoteProduct), 1);
+        $scope.remoteProductInfoChanged = true;
+    };
+
     if ($scope.isManager() || $scope.isAdmin()) {
         $scope.remoteProductManagers = RemoteProductManagerRepo.getAll();
 
@@ -85,6 +118,12 @@ app.controller('ProductController', function ($controller, $scope, ApiResponseAc
             return $scope.remoteProducts[remoteProductManagerId];
         };
 
+        $scope.getRemoteProductByRemoteProductInfo = function(remoteProductInfo) {
+            return $scope.remoteProducts[remoteProductInfo.remoteProductManager.id].filter(function(rp) {
+                return rp.id === remoteProductInfo.scopeId;
+            })[0];
+        };
+
         RemoteProductManagerRepo.listen([ApiResponseActions.CREATE, ApiResponseActions.DELETE, ApiResponseActions.UPDATE], function () {
             $scope.remoteProductManagers.length = 0;
             var remoteProductManagers = RemoteProductManagerRepo.getAll();

diff --git a/app/filters/availableRemoteProductFIlter.js b/app/filters/availableRemoteProductFIlter.js
@@ -0,0 +1,13 @@
+app.filter('availableRemoteProduct', function() {
+  return function(input, usedRPs) {
+    return input.filter(function(val) {
+      if (usedRPs) {
+        return !usedRPs.some(function(rp) {
+          return rp.scopeId === val.id;
+        });
+      } else {
+        return true;
+      }
+    });
+  };
+});
diff --git a/app/index.html b/app/index.html
@@ -203,6 +203,7 @@
   <!-- Factories -->
 
   <!-- Filters -->
+  <script src="filters/availableRemoteProductFilter.js"></script>
 
   <!-- Repos -->
   <script src="repo/abstractAppRepo.js"></script>

diff --git a/app/repo/productRepo.js b/app/repo/productRepo.js
@@ -1,7 +1,8 @@
 app.repo("ProductRepo", function ProductRepo() {
 
     this.scaffold = {
-        name: ''
+        name: '',
+        remoteProducts: []
     };
 
     return this;

diff --git a/app/resources/styles/sass/management/_all.scss b/app/resources/styles/sass/management/_all.scss
@@ -1,8 +1,10 @@
+@import "products";
+
 .management-table {
   table {
     .glyphicon {
       margin: 0 5px;
       cursor: pointer;
     }
   }
-}
+}
diff --git a/app/resources/styles/sass/management/_products.scss b/app/resources/styles/sass/management/_products.scss
@@ -0,0 +1,23 @@
+.clickable:hover {
+  cursor: pointer;
+}
+
+.remote-product-panel {
+  margin-top: 20px;
+
+  .panel-heading {
+    min-height: 54px;
+
+    label {
+      margin-top: 5px;
+    }
+
+    .form-group {
+      margin-top: 20px;
+    }
+  }
+
+  ul {
+    margin-bottom: 0;
+  }
+}
diff --git a/app/views/modals/addProductModal.html b/app/views/modals/addProductModal.html
@@ -13,21 +13,37 @@ <h4 class="modal-title">Create Product</h4>
     <validatedinput model="productToCreate" property="name" label="Name" placeholder="Name of the Product" form="productForms.create" validations="productForms.validations" results="productRepo.getResults()">
     </validatedinput>
 
-    <div class="form-group">
-      <label for="remoteProductManager">Associate Remote Product Manager</label>
-      <select class="form-control" ng-options="remoteProductManager.name for remoteProductManager in remoteProductManagers" ng-model="productToCreate.remoteProductManager" name="remoteProductManager">
-        <option value="" selected>None</option>
-      </select>
+    <div class="panel panel-default remote-product-panel">
+      <div class="panel-heading">
+        <div>
+          <label>Remote Products</label>
+          <div ng-if="addingRemoteProductInfo" class="btn-group pull-right" role="group">
+            <button ng-click="addRemoteProductInfo(productToCreate.remoteProducts, remoteProductInfoToAdd)" ng-disabled="remoteProductInfoToAdd.scopeId === null" class="btn btn-success" type="button">Add</button>
+            <button ng-click="closeAddRemoteProductInfo()" class="btn btn-default" type="button">Cancel</button>
+          </div>
+          <div ng-if="!addingRemoteProductInfo" class="btn btn-default pull-right" ng-click="openAddRemoteProductInfo()">Add</div>
+        </div>
+        <div class="form-group" ng-if="addingRemoteProductInfo">
+          <label for="remoteProductManager">Associate Remote Product Manager</label>
+          <select name="remoteProductManager" class="form-control" ng-model="remoteProductInfoToAdd.remoteProductManager" ng-options="remoteProductManager.name for remoteProductManager in remoteProductManagers">
+            <option value="" selected>None</option>
+          </select>
+        </div>
+        <div class="form-group" ng-if="remoteProductInfoToAdd.remoteProductManager">
+          <label for="scopeId">Associate Remote Product</label>
+          <select name="scopeId" class="form-control" ng-model="remoteProductInfoToAdd.scopeId" ng-options="remoteProductManager.id as remoteProductManager.name for remoteProductManager in getRemoteProductManagerRemoteProducts(remoteProductInfoToAdd.remoteProductManager.id) | orderBy:'name' | availableRemoteProduct : productToCreate.remoteProducts">
+            <option value="" selected>None</option>
+          </select>
+        </div>
+      </div>
+      <div class="panel-body">
+        <ul class="list-group">
+          <li class="list-group-item" ng-repeat="remoteProduct in productToCreate.remoteProducts track by remoteProduct.scopeId" ng-model="productToCreate.remoteProducts">{{getRemoteProductByRemoteProductInfo(remoteProduct).name}}
+            <span class="glyphicon glyphicon-trash clickable pull-right" title="Remote Remote Product" ng-click="removeRemoteProductInfo(productToCreate.remoteProducts, remoteProduct)"></span>
+          </li>
+        </ul>
+      </div>
     </div>
-
-    <div class="form-group" ng-if="productToCreate.remoteProductManager">
-      <label for="remoteProductManager">Associate Version Product</label>
-      <select class="form-control" ng-options="remoteProductManager.id as remoteProductManager.name for remoteProductManager in getRemoteProductManagerRemoteProducts(productToCreate.remoteProductManager.id) | orderBy:'name'"
-        ng-model="productToCreate.scopeId" name="remoteProductManager">
-        <option value="" selected>None</option>
-      </select>
-    </div>
-
   </div>
   <div class="modal-footer">
     <button type="button" class="btn btn-default" ng-click="resetCreateProduct()">Cancel</button>

diff --git a/app/views/modals/editProductModal.html b/app/views/modals/editProductModal.html
@@ -14,25 +14,40 @@ <h4 class="modal-title">Edit Product</h4>
       autocomplete="off">
     </validatedinput>
 
-    <div class="form-group">
-      <label for="remoteProductManager">Associate Remote Product Manager</label>
-      <select class="form-control" ng-model="productToEdit.remoteProductManager" name="remoteProductManager">
-        <option value="" ng-selected="productToEdit.remoteProductManager === undefined">None</option>
-        <option value="" ng-repeat="remoteProductManager in remoteProductManagers" ng-value="remoteProductManager" ng-selected="productToEdit.remoteProductManager.id === remoteProductManager.id">{{remoteProductManager.name}}</option>
-      </select>
+    <div class="panel panel-default remote-product-panel">
+      <div class="panel-heading">
+        <div>
+          <label>Remote Products</label>
+          <div ng-if="addingRemoteProductInfo" class="btn-group pull-right" role="group">
+            <button ng-click="addRemoteProductInfo(productToEdit.remoteProducts, remoteProductInfoToAdd)" ng-disabled="remoteProductInfoToAdd.scopeId === null" class="btn btn-success" type="button">Add</button>
+            <button ng-click="closeAddRemoteProductInfo()" class="btn btn-default" type="button">Cancel</button>
+          </div>
+          <div ng-if="!addingRemoteProductInfo" class="btn btn-default pull-right" ng-click="openAddRemoteProductInfo()">Add</div>
+        </div>
+        <div class="form-group" ng-if="addingRemoteProductInfo">
+          <label for="remoteProductManager">Associate Remote Product Manager</label>
+          <select name="remoteProductManager" class="form-control" ng-model="remoteProductInfoToAdd.remoteProductManager" ng-options="remoteProductManager.name for remoteProductManager in remoteProductManagers">
+            <option value="" selected>None</option>
+          </select>
+        </div>
+        <div class="form-group" ng-if="remoteProductInfoToAdd.remoteProductManager">
+          <label for="scopeId">Associate Remote Product</label>
+          <select name="scopeId" class="form-control" ng-model="remoteProductInfoToAdd.scopeId" ng-options="remoteProductManager.id as remoteProductManager.name for remoteProductManager in getRemoteProductManagerRemoteProducts(remoteProductInfoToAdd.remoteProductManager.id) | orderBy:'name' | availableRemoteProduct : productToEdit.remoteProducts">
+            <option value="" selected>None</option>
+          </select>
+        </div>
+      </div>
+      <div class="panel-body">
+        <ul class="list-group">
+          <li class="list-group-item" ng-repeat="remoteProduct in productToEdit.remoteProducts track by remoteProduct.scopeId" ng-model="productToEdit.remoteProducts">{{getRemoteProductByRemoteProductInfo(remoteProduct).name}}
+            <span class="glyphicon glyphicon-trash clickable pull-right" title="Remote Remote Product" ng-click="removeRemoteProductInfo(productToEdit.remoteProducts, remoteProduct)"></span>
+          </li>
+        </ul>
+      </div>
     </div>
-
-    <div class="form-group" ng-if="productToEdit.remoteProductManager">
-      <label for="remoteProductManager">Associate Version Product</label>
-      <select class="form-control" ng-options="remoteProductManager.id as remoteProductManager.name for remoteProductManager in getRemoteProductManagerRemoteProducts(productToEdit.remoteProductManager.id) | orderBy:'name'"
-        ng-model="productToEdit.scopeId" name="remoteProductManager">
-        <option value="" selected>None</option>
-      </select>
-    </div>
-
   </div>
   <div class="modal-footer">
     <button type="button" class="btn btn-default" ng-click="cancelEditProduct()">Cancel</button>
-    <button type="submit" class="btn btn-success" ng-disabled="!productForms.edit.$dirty||productForms.edit.$invalid">Update</button>
+    <button type="submit" class="btn btn-success" ng-disabled="(!remoteProductInfoChanged&&!productForms.edit.$dirty)||productForms.edit.$invalid">Update</button>
   </div>
 </form>