flat-tree-builder - npm Package Compare versions

Comparing version 1.4.0 to 1.4.1

classifier.js

@@ -0,1 +1,3 @@
+import Sortable from "./node_modules/sortablejs/modular/sortable.esm.js";
+
 export default class Classifier {
@@ -7,2 +9,3 @@ constructor(
       postClassifierUrl,
+      postOrderUrl,
       search = false,
@@ -32,2 +35,3 @@ test = false,
     this.getUrl = getUrl;
+    this.postOrderUrl = postOrderUrl;
     this.postClassifierUrl = postClassifierUrl;
@@ -66,2 +70,31 @@ this.dataRootId = dataRootId;
 
+  oldOrder = [];
+  sortableOptions = {
+    ghostClass: "classifier__sort-item",
+    // delay: 1000,
+    // filter: function ({ target }) {
+    //   if (target.closest("li").dataset.classifierId) return false;
+    //   return true;
+    // },
+    filter: ".non-draggable",
+    onStart: ({ from }) => {
+      this.oldOrder = [];
+      for (const node of from.childNodes) {
+        const id = node.dataset.classifierId;
+        if (id) this.oldOrder.push(id);
+      }
+    },
+    onEnd: async ({ to }) => {
+      let order = [];
+      for (const node of to.childNodes) {
+        const id = node.dataset.classifierId;
+        if (id) order.push(id);
+      }
+      if (this.oldOrder.toString() !== order.toString())
+        await this.postOrder(order);
+    },
+    onMove: function (e) {
+      return e.related.className.indexOf("non-draggable") === -1;
+    },
+  };
   data = [];
@@ -73,8 +106,11 @@ showIds = new Set();
   <div class="classifier__modal d-none">
-    <div class="classifier__modal-content card p-3 mx-2">
-      <div class="form">
-        <input class="form-control" type="text" placeholder="Название" />
-        <button class="btn btn-primary classifier__modal-btn mt-2 float-end">
-          Добавить
-        </button>
+    <div class="classifier__modal-content card">
+      <div class="card-body">
+        <h5 class="card-title"></h5>
+        <form class="form">
+          <input class="form-control" type="text" placeholder="Название" />
+          <button
+            class="btn btn-primary classifier__modal-btn mt-2 float-end"
+          ></button>
+        </form>
       </div>
@@ -131,5 +167,7 @@ </div>
       this.modalInput = this.modal.querySelector("input");
-      this.addBtn = this.modal.querySelector(".classifier__modal-btn");
+      this.modalButton = this.modal.querySelector("button");
+      this.modalTitle = this.modal.querySelector("h5");
     }
     this.mainUl = this.targetEl.querySelector(".classifier__main-list");
+    if (this.draggable) Sortable.create(this.mainUl, this.sortableOptions);
   }
@@ -163,3 +201,2 @@
       this.modalForm.addEventListener("submit", (e) => e.preventDefault());
-      this.addBtn.addEventListener("click", () => this.add());
       document.addEventListener("keydown", (e) => {
@@ -169,47 +206,2 @@ if (e.code === "Escape") this.hideModal();
     }
-    if (this.draggable) {
-      let dragged;
-      let draggedId;
-      let index;
-      let indexDrop;
-      let list;
-      let listItem;
-
-      document.addEventListener("dragstart", ({ target }) => {
-        dragged = target;
-        draggedId = target.dataset.classifierId;
-        listItem = target.parentNode;
-        list = listItem.children;
-        for (let i = 0; i < list.length; i += 1) {
-          if (list[i] === dragged) {
-            index = i;
-          }
-        }
-      });
-
-      document.addEventListener("dragover", (event) => {
-        event.preventDefault();
-      });
-
-      document.addEventListener("drop", ({ target }) => {
-        target = target.closest("li");
-        if (
-          target.className == "dropzone" &&
-          target.dataset.classifierId !== draggedId &&
-          listItem.contains(target)
-        ) {
-          dragged.remove(dragged);
-          for (let i = 0; i < list.length; i += 1) {
-            if (list[i] === target) {
-              indexDrop = i;
-            }
-          }
-          if (index > indexDrop) {
-            target.before(dragged);
-          } else {
-            target.after(dragged);
-          }
-        }
-      });
-    }
   }
@@ -233,5 +225,16 @@
 
-  openModal(item) {
+  openCreateModal(parentItem) {
+    this.dataItem = parentItem;
     this.modalInput.value = "";
+    this.modalButton.textContent = "Создать";
+    // this.modalTitle.textContent = "Создать классификатор";
+    this.modalButton.onclick = this.createClassifier.bind(this);
+    this.showModal();
+  }
+
+  openEditModal(item) {
     this.dataItem = item;
+    this.modalInput.value = this.getName(item.tree_path);
+    this.modalButton.textContent = "Сохранить";
+    this.modalButton.onclick = this.editClassifier.bind(this);
     this.showModal();
@@ -271,8 +274,8 @@ }
       const liContainer = document.createElement("div");
-      liContainer.classList.add("menu__li-container");
+      liContainer.classList.add("classifier__li-container");
       li.dataset.classifierId = item.id;
-      if (this.draggable) {
-        li.classList.add("dropzone");
-        li.draggable = true;
-      }
+      // if (this.draggable) {
+      //   li.classList.add("dropzone");
+      //   li.draggable = true;
+      // }
 
@@ -293,2 +296,3 @@ const showCheckbox = document.createElement("input");
       ul.classList.add("classifier__secondary-list");
+      if (this.draggable) Sortable.create(ul, this.sortableOptions);
       if (this.showIds.has(item.id)) this.showElem(ul);
@@ -304,5 +308,6 @@ else this.hideElem(ul);
       const selectCheckboxSpan = document.createElement("span");
-      selectCheckboxLabel.classList.add("menu__select-label");
+      selectCheckboxLabel.classList.add("classifier__select-label");
       selectCheckboxSpan.textContent = `${item.name}`;
       if (this.canSelect) {
+        selectCheckboxLabel.classList.add("classifier__select-label--hover");
         const selectCheckbox = document.createElement("input");
@@ -318,3 +323,3 @@ selectCheckbox.type = "checkbox";
         selectCheckboxLabel.append(selectCheckbox);
-        selectCheckboxLabel.classList.add("menu__select-label--tick");
+        selectCheckboxLabel.classList.add("classifier__select-label--tick");
         selectCheckboxLabel.append(selectCheckboxSpan);
@@ -363,2 +368,3 @@ }
         editBtn.innerHTML = "&#9965";
+        editBtn.addEventListener("click", () => this.openEditModal(item));
         liContainer.append(editBtn);
@@ -393,3 +399,3 @@ }
 
-  createAddLi(item, text) {
+  createAddLi(parentItem, text) {
     const addBtn = document.createElement("button");
@@ -401,5 +407,6 @@ addBtn.classList.add("btn");
     addBtn.textContent = text;
-    addBtn.addEventListener("click", () => this.openModal(item));
+    addBtn.addEventListener("click", () => this.openCreateModal(parentItem));
 
     const addLi = document.createElement("li");
+    addLi.classList.add("non-draggable");
     addLi.append(addBtn);
@@ -563,7 +570,7 @@
   async postClassifier() {
-    console.log("post", this.dataItem);
-    // const tree_path =
-    //   this.dataItem instanceof Array
-    //     ? `${this.modalInput.value}`
-    //     : `${this.dataItem.tree_path}.${this.modalInput.value}`;
+    const tree_path =
+      this.dataItem instanceof Array
+        ? `${this.modalInput.value}`
+        : `${this.dataItem.tree_path}.${this.modalInput.value}`;
+    console.log(JSON.stringify({ tree_path }));
     // if (this.test) {
@@ -606,3 +613,3 @@ //   if (this.dataItem instanceof Array) {
 
-  async add() {
+  async createClassifier() {
     await this.postClassifier();
@@ -613,2 +620,28 @@ this.hideModal();
 
+  async editClassifier() {
+    const treePathArray = this.dataItem.tree_path.split(".");
+    console.log({
+      tree_path:
+        treePathArray.length > 1
+          ? `${treePathArray.slice(0, -1).join(".")}.${this.modalInput.value}`
+          : this.modalInput.value,
+      id: this.dataItem.id,
+    });
+    this.hideModal();
+    await this.getData();
+  }
+
+  async postOrder(order) {
+    try {
+      console.log(JSON.stringify({ order }));
+      // const response = await fetch(this.postOrderUrl, {
+      //   method: "POST",
+      //   body: JSON.stringify({ order }),
+      // });
+      // await this.getData();
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
   async getData() {
@@ -615,0 +648,0 @@ if (this.test) {

package.json

 {
   "name": "flat-tree-builder",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "A package for building tree structures from postgres ltree data",
@@ -9,3 +9,4 @@ "module": "classifier.js",
   "dependencies": {
-    "bootstrap": "^5.3.2"
+    "bootstrap": "^5.3.2",
+    "sortablejs": "^1.15.0"
   },
@@ -12,0 +13,0 @@ "devDependencies": {

No alert changes

Improved metrics

Total package byte prevSize

45362

increased by4.21%

Lines of code

1046

increased by3.56%

Worsened metrics

Dependency count

2

increased by100%

Dependency changes

• + Addedsortablejs@^1.15.0

• + Addedsortablejs@1.15.6(transitive)