CCU: purchasing: Support for multiple items

Allows a ticket to have up to 5 items in the same
purchasing request.

Handle the hiding/displaying of a mini form for each asset and
control display of properties that are used only in Snipe-IT.

resources/celerity/map.php

@@ -514,7 +514,7 @@ return array(
     'rsrc/js/core/darkconsole/DarkMessage.js' => '26cd4b73',
     'rsrc/js/core/darkconsole/behavior-dark-console.js' => '457f4d16',
     'rsrc/js/core/phtize.js' => '2f1db1ed',
-    'rsrc/js/extensions/snipe-fields-validation.js' => 'c7f28d14',
+    'rsrc/js/extensions/snipe-fields-validation.js' => 'efef003f',
     'rsrc/js/phui/behavior-phui-dropdown-menu.js' => '5cf0501a',
     'rsrc/js/phui/behavior-phui-file-upload.js' => 'e150bd50',
     'rsrc/js/phui/behavior-phui-selectable-list.js' => 'b26a41e4',
@@ -907,7 +907,7 @@ return array(
     'releeph-request-differential-create-dialog' => '0ac1ea31',
     'releeph-request-typeahead-css' => 'bce37359',
     'setup-issue-css' => '5eed85b2',
-    'snipe-fields-validation-js' => 'c7f28d14',
+    'snipe-fields-validation-js' => 'efef003f',
     'sprite-login-css' => '18b368a6',
     'sprite-tokens-css' => 'f1896dc5',
     'syntax-default-css' => '055fc231',

webroot/rsrc/js/extensions/snipe-fields-validation.js

@@ -188,65 +188,182 @@ function shipping_validations() {
   };
 }
 
-function purchasing_validations() {
-  let should_create = document.getElementsByName(
-    "std:maniphest:purchasing:create-item"
-  )[0];
-  let asset_name_parent = document.getElementsByName(
-    "std:maniphest:purchasing:asset-name"
+function fetch_and_hide_extra_assets_elements(index, unique_items) {
+  asset = {};
+
+  // This block of elements are used only by Snipe-IT
+  asset["asset_name_parent"] = document.getElementsByName(
+    "std:maniphest:purchasing:asset-name" + index
   )[0].parentNode.parentNode;
-  let item_owner_parent = document.getElementsByName(
-    "std:maniphest:purchasing:item-owner"
+  asset["asset_name_parent"].classList.add("snipe_property");
+
+  asset["item_owner_parent"] = document.getElementsByName(
+    "std:maniphest:purchasing:item-owner" + index
   )[0].parentNode.parentNode;
-  let dimensions_parent = document.getElementsByName(
-    "std:maniphest:shipping:item-dimensions"
+  asset["item_owner_parent"].classList.add("snipe_property");
+
+  asset["model_parent"] = document.getElementsByName(
+    "std:maniphest:purchasing:model" + index
   )[0].parentNode.parentNode;
-  let model_parent = document.getElementsByName(
-    "std:maniphest:purchasing:model"
+  asset["model_parent"].classList.add("snipe_property");
+
+  // Elements used by Phab and Snipe-IT
+  asset["separator"] = asset["asset_name_parent"].previousSibling;
+  asset["with"] = asset["item_owner_parent"].nextSibling;
+  asset["quantity"] = document.getElementsByName(
+    "std:maniphest:purchasing:quantity" + index
   )[0].parentNode.parentNode;
-  let country_of_origin_parent = document.getElementsByName(
-    "std:maniphest:purchasing:country-origin"
+  asset["weight_parent"] = document.getElementsByName(
+    "std:maniphest:purchasing:item-weight" + index
   )[0].parentNode.parentNode;
-  let weight_parent = document.getElementsByName(
-    "std:maniphest:shipping:item-weight"
+  asset["dimensions_parent"] = document.getElementsByName(
+    "std:maniphest:purchasing:item-dimensions" + index
+  )[0].parentNode.parentNode;
+  asset["country_of_origin_parent"] = document.getElementsByName(
+    "std:maniphest:purchasing:country-origin" + index
+  )[0].parentNode.parentNode;
+  asset["weight_parent"] = document.getElementsByName(
+    "std:maniphest:purchasing:item-weight" + index
+  )[0].parentNode.parentNode;
+  asset["asset_cost_parent"] = document.getElementsByName(
+    "std:maniphest:purchasing:expected-cost" + index
+  )[0].parentNode.parentNode;
+
+  asset["asset_link_parent"] = document.getElementsByName(
+    "std:maniphest:purchasing:item-link" + index
+  )[0].parentNode.parentNode;
+
+  asset["asset_currency_parent"] = document.getElementsByName(
+    "std:maniphest:purchasing:currency" + index
   )[0].parentNode.parentNode;
 
+  Object.keys(asset).forEach(i => asset[i].classList.add("asset_property"));
+
+  // Hide all extra items at first
+  if (index > 1 && index > unique_items) {
+    Object.keys(asset).forEach(i => (asset[i].style.display = "none"));
+  }
+
+  return asset;
+}
+
+function purchasing_validations() {
+  let styles = `
+      .add-item {
+        float:left !important;
+      }
+  `;
+
+  var styleSheet = document.createElement("style");
+  styleSheet.type = "text/css";
+  styleSheet.innerText = styles;
+  document.head.appendChild(styleSheet);
+
+  num_asset_forms = document.getElementsByName(
+    "std:maniphest:purchasing:unique-items"
+  )[0];
+  if (num_asset_forms.length) {
+    // If this field was not rendered, we can't make the validations and control
+    // the form based on assets amount.
+    return;
+  }
+  num_asset_forms.parentNode.parentNode.style.display = "none";
+
+  assets_list = [];
+  MAX_ALLOWED_ASSETS = 5;
+
+  for (let i = 1; i <= MAX_ALLOWED_ASSETS; i++) {
+    assets_list.push(
+      fetch_and_hide_extra_assets_elements(i, num_asset_forms.value)
+    );
+  }
+
+  let should_create = document.getElementsByName(
+    "std:maniphest:purchasing:create-item"
+  )[0];
+
+  assets_properties = document.getElementsByClassName("asset_property");
+  snipe_it_properties = document.getElementsByClassName("snipe_property");
+
   if (!should_create.checked) {
-    asset_name_parent.style.display = "none";
-    item_owner_parent.style.display = "none";
-    dimensions_parent.style.display = "none";
-    model_parent.style.display = "none";
-    country_of_origin_parent.style.display = "none";
-    weight_parent.style.display = "none";
+    for (let i = 0; i < snipe_it_properties.length; i++) {
+      snipe_it_properties[i].style.display = "none";
+    }
   }
 
   should_create.onchange = function() {
     if (should_create.checked) {
-      asset_name_parent.style.display = "block";
-      item_owner_parent.style.display = "block";
-      model_parent.style.display = "block";
+      for (let i = 0; i < num_asset_forms.value; i++) {
+        for (let key in assets_list[i]) {
+          if (assets_list[i][key].classList.contains("snipe_property")) {
+            assets_list[i][key].style.display = "block";
+          }
+        }
+      }
     } else {
-      asset_name_parent.style.display = "none";
-      item_owner_parent.style.display = "none";
-      model_parent.style.display = "none";
+      for (let i = 0; i < num_asset_forms.value; i++) {
+        for (let key in assets_list[i]) {
+          if (assets_list[i][key].classList.contains("snipe_property")) {
+            assets_list[i][key].style.display = "none";
+          }
+        }
+      }
+    }
+  };
+
+  submit_parent = document.getElementsByName("__submit__")[0].parentNode
+    .parentNode;
+  add_new_asset = document.createElement("div");
+  add_new_asset_btn = document.createElement("a");
+  add_new_asset_btn.classList.add("button", "add-item");
+  add_new_asset_btn.innerHTML = "Add another item to this ticket";
+  add_new_asset.appendChild(add_new_asset_btn);
+
+  add_new_asset_btn.onclick = function() {
+    if (num_asset_forms.value < MAX_ALLOWED_ASSETS) {
+      for (let key in assets_list[num_asset_forms.value - 1]) {
+        if (
+          assets_list[num_asset_forms.value][key].classList.contains(
+            "snipe_property"
+          )
+        ) {
+          if (should_create.checked) {
+            assets_list[num_asset_forms.value][key].style.display = "block";
+          }
+        } else {
+          assets_list[num_asset_forms.value][key].style.display = "block";
+        }
+      }
+      num_asset_forms.value++;
+    } else {
+      add_new_asset_btn.innerText = "Items per ticket exceeded";
+      add_new_asset_btn.classList.add("disabled");
     }
   };
+
+  submit_parent.appendChild(add_new_asset);
 }
 
-window.onload = function() {
+document.addEventListener("DOMContentLoaded", function(event) {
   /* Make sure this will load only in the Purchase and Shipping forms */
-  let current_path = window.location.pathname;
-  const allowed_paths = [
-    "/maniphest/task/edit/form/4/",
-    "/maniphest/task/edit/form/7/"
-  ];
-  if (allowed_paths.indexOf(current_path) == -1) {
-    return;
-  }
+  let purchasing_element = document.getElementsByName(
+    "std:maniphest:purchasing:asset-name1"
+  );
+  let shipping_element = document.getElementsByName(
+    "std:maniphest:shipping:shipper-name"
+  );
 
-  if (current_path == "/maniphest/task/edit/form/7/") {
-    shipping_validations();
-  } else {
-    purchasing_validations();
+  if (purchasing_element.length) {
+    try {
+      purchasing_validations();
+    } catch (error) {
+      console.error(error);
+    }
+  } else if (shipping_element.length) {
+    try {
+      shipping_validations();
+    } catch (error) {
+      console.error(error);
+    }
   }
-};
+});