flat-tree-builder - npm Package Compare versions

Comparing version 1.5.15 to 1.5.16

package.json

 {
   "name": "flat-tree-builder",
-  "version": "1.5.15",
+  "version": "1.5.16",
   "description": "A package for building tree structures from postgres ltree data",
@@ -19,6 +19,5 @@ "main": "classifier.mjs",
     "@testing-library/user-event": "^14.5.1",
-    "@types/whatwg-fetch": "^0.0.33",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "whatwg-fetch": "^3.6.19"
+    "jest-fetch-mock": "^3.0.3"
   },
@@ -32,5 +31,6 @@ "scripts": {
     "setupFiles": [
-      "./tests/setupJest.js"
+      "./tests/setup/mock.js",
+      "./tests/setup/setupJest.js"
     ]
   }
 }

README.md

@@ -63,1 +63,6 @@ # Classifier
 ```
+
+## API
+
+- toggleManual(id) - open or close the classifier with the passed id
+-

src.js

@@ -16,2 +16,3 @@ import Sortable from "sortablejs";
       dataParentConnector = "parent_tree_path",
+      paramsName = "classifier",
     }
@@ -38,2 +39,3 @@ ) {
     this.dataParentConnector = dataParentConnector;
+    this.paramsName = paramsName;
 
@@ -223,14 +225,2 @@ this.needBtn = false;
 
-    let myOrder; // 0 - первый, 1 - средний, 2 - последний, -1 - единственный элемент
-    if (nodes.length > 1) {
-      nodes.forEach((node, index, array) => {
-        if (index === 0) myOrder = 0;
-        else if (index === array.length - 1) myOrder = 2;
-        else myOrder = 1;
-        node.myOrder = myOrder;
-      });
-    } else if (nodes.length === 1) {
-      nodes[0].myOrder = -1;
-    }
-
     nodes.forEach((node) => {
@@ -256,11 +246,10 @@ node.children = this.buildNodes(data, node.tree_path);
       showCheckbox.type = "checkbox";
+      showCheckbox.dataset.show = "";
       showCheckbox.checked = this.showIds.has(item.id);
-      showCheckbox.addEventListener("change", () =>
-        this.toggle(item, showCheckbox)
-      );
-      const showCheckboxLabel = document.createElement("label");
-      const showCheckboxSpan = document.createElement("span");
-      showCheckboxLabel.classList.add("custom-checkbox");
-      showCheckboxLabel.append(showCheckbox);
-      showCheckboxLabel.append(showCheckboxSpan);
+      showCheckbox.addEventListener("change", () => this.toggle(item.id));
+      const showLabel = document.createElement("label");
+      const showSpan = document.createElement("span");
+      showLabel.classList.add("custom-checkbox");
+      showLabel.append(showCheckbox);
+      showLabel.append(showSpan);
 
@@ -278,6 +267,6 @@ const ul = document.createElement("ul");
 
-      const selectCheckboxLabel = document.createElement("label");
-      const selectCheckboxSpan = document.createElement("span");
-      selectCheckboxLabel.classList.add("classifier__name");
-      selectCheckboxSpan.textContent = `${item.name}`;
+      const selectLabel = document.createElement("label");
+      const selectSpan = document.createElement("span");
+      selectLabel.classList.add("classifier__name");
+      selectSpan.textContent = `${item.name}`;
       if (this.canSelect & (parentUl !== this.mainUl)) {
@@ -287,39 +276,17 @@ const selectCheckbox = document.createElement("input");
         selectCheckbox.value = item.tree_path;
+        selectCheckbox.dataset.select = "";
         selectCheckbox.checked = this.selectedIds.has(item.id);
-        selectCheckbox.addEventListener("change", () =>
-          this.select(item, selectCheckbox)
-        );
         selectCheckbox.classList.add("visually-hidden");
-        selectCheckboxLabel.append(selectCheckbox);
-        selectCheckboxLabel.classList.add("classifier__name--tick");
-        selectCheckboxLabel.classList.add("cursor-pointer");
-        selectCheckboxLabel.classList.add("classifier__name--hover");
-        selectCheckboxLabel.append(selectCheckboxSpan);
+        selectCheckbox.addEventListener("change", () => this.select(item.id));
+        selectLabel.classList.add("classifier__name--tick");
+        selectLabel.classList.add("cursor-pointer");
+        selectLabel.classList.add("classifier__name--hover");
+        selectLabel.append(selectCheckbox);
+        selectLabel.append(selectSpan);
       }
-      selectCheckboxLabel.append(selectCheckboxSpan);
+      selectLabel.append(selectSpan);
+      liContainer.append(selectLabel);
 
-      let orderBtnUp, orderBtnDown;
-      if (this.order) {
-        orderBtnUp = document.createElement("button");
-        orderBtnUp.classList.add("classifier__button");
-        orderBtnUp.classList.add("classifier__button--up");
-        orderBtnUp.addEventListener("click", () => {
-          this.up(item);
-        });
-        orderBtnUp.innerHTML = "&#8963";
+      if (item.children.length || this.needBtn) liContainer.append(showLabel);
 
-        orderBtnDown = document.createElement("button");
-        orderBtnDown.classList.add("classifier__button");
-        orderBtnDown.classList.add("classifier__button--down");
-        orderBtnDown.addEventListener("click", () => {
-          this.down(item);
-        });
-        orderBtnDown.innerHTML = "&#8964";
-      }
-
-      liContainer.append(selectCheckboxLabel);
-
-      if (item.children.length || this.needBtn)
-        liContainer.append(showCheckboxLabel);
-
       let editBtn;
@@ -334,17 +301,2 @@ if (this.editableItems) {
 
-      if (this.order) {
-        switch (item.myOrder) {
-          case 0:
-            orderBtnUp.disabled = true;
-            break;
-          case -1:
-            orderBtnUp.disabled = true;
-            orderBtnDown.disabled = true;
-            break;
-          case 2:
-            orderBtnDown.disabled = true;
-            break;
-        }
-      }
-
       li.append(liContainer);
@@ -375,25 +327,28 @@ li.append(ul);
 
-  toggle(item, checkbox) {
-    const ul = checkbox.closest("li").querySelector("ul");
+  getListItemById(id) {
+    return this.targetEl.querySelector(`[data-classifier-id="${id}"]`);
+  }
 
+  toggle(id) {
+    const li = this.getListItemById(id);
+    const checkbox = li.querySelector(`[data-show]`);
+    const ul = li.querySelector("ul");
+
     if (checkbox.checked) {
       this.showElem(ul);
+      this.showIds.add(id);
     } else {
       this.hideElem(ul);
+      this.showIds.delete(id);
     }
-
-    if (checkbox.checked) {
-      this.showIds.add(item.id);
-    } else {
-      this.showIds.delete(item.id);
-    }
   }
 
-  select(item, checkbox) {
-    item.selected = checkbox.checked;
+  select(id) {
+    const li = this.getListItemById(id);
+    const checkbox = li.querySelector(`[data-select]`);
 
-    if (item.selected) {
-      this.selectedIds.add(item.id);
+    if (checkbox.checked) {
+      this.selectedIds.add(id);
     } else {
-      this.selectedIds.delete(item.id);
+      this.selectedIds.delete(id);
     }
@@ -526,3 +481,3 @@ this.renderSelected();
         body: JSON.stringify({
-          backend_api_classifier: {
+          [this.paramsName]: {
             tree_path: tree_path,
@@ -565,3 +520,3 @@ },
           body: JSON.stringify({
-            backend_api_classifier: {
+            [this.paramsName]: {
               tree_path,
@@ -597,3 +552,3 @@ },
         body: JSON.stringify({
-          backend_api_classifier: {
+          [this.paramsName]: {
             row_order_position: index,
@@ -1088,2 +1043,21 @@ },
   }
+
+  toggleManual(id) {
+    const li = this.getListItemById(id);
+    const checkbox = li.querySelector(`[data-show]`);
+    checkbox.checked = !checkbox.checked;
+    this.toggle(id);
+  }
+
+  fillModalForm(text) {
+    this.modalInput.value = text;
+  }
+
+  getModalFormValue() {
+    return this.modalInput.value;
+  }
+
+  findByPath(path) {
+    return this.data.find((x) => x.tree_path === path);
+  }
 }

No alert changes

Improved metrics

Dev dependency count

7

decreased by-12.5%

Number of lines in readme file

68

increased by7.94%

Worsened metrics

Total package byte prevSize

176446

decreased by-1.14%

Lines of code

4666

decreased by-1.06%

No dependency changes