clear unused files, create a basic form

ckanext/bulk/assets/scripts/bulk-manager-form.js

@@ -0,0 +1,170 @@
+ckan.module("bulk-manager-form", function () {
+  "use strict";
+
+  return {
+    const: {
+      filterBlock: ".filters-list",
+      updateToBlock: ".update-to-fields",
+      actionSelect: ".bulk-select-action select",
+      entitySelect: ".bulk-select-entity select",
+      submitBtn: ".bulk-submit-form-btn",
+    },
+    options: {},
+
+    initialize() {
+      $.proxyAll(this, /_/);
+
+      this.managerForm = this.el.find("form");
+      this.updateToBlock = $(this.const.updateToBlock);
+      this.filterBlock = $(this.const.filterBlock);
+      this.actionSelect = $(this.const.actionSelect);
+      this.entitySelect = $(this.const.entitySelect);
+      this.submitBtn = $(this.const.submitBtn);
+
+      this.actionSelect.on("change", this._onActionSelectChange);
+      this.entitySelect.on("change", this._onEntitySelectChange);
+      this.submitBtn.on("click", this._onSubmitBtnClick);
+      this.managerForm.on("change", this._onFormChange);
+
+      // this.entityTS = new TomSelect(this.entitySelect, {
+      //   // onDropdownOpen: this._onEntityDropdownOpen,
+      //   onChange: this._onEntitySelectChange,
+      // });
+
+      // Add event listeners on dynamic elements
+      $('body').on('click', '.btn-item-remove', this._onFilterItemRemove);
+
+      // ON INIT
+
+      this._onActionSelectChange();
+    },
+
+    /**
+     * Toggle the update to block based on the selected action
+     *
+     * @param {Event} e
+     */
+    _onActionSelectChange() {
+      this.updateToBlock.toggle(this.actionSelect.val() === "update");
+    },
+
+    _onEntityDropdownOpen(dropdown) {
+      Swal.fire({
+        title: "Do you want to save the changes?",
+        showDenyButton: true,
+        confirmButtonText: "Yes",
+        denyButtonText: "No"
+      }).then((result) => {
+        if (result.isConfirmed) {
+          // Allow to change entity type
+        } else if (result.isDenied) {
+          this.entityTS.clear(true);
+        }
+      });
+    },
+
+    _onEntitySelectChange() {
+      this._clearFilters();
+    },
+
+    _clearFilters() {
+      this.filterBlock.find("select").prop("selectedIndex", 0);
+      this.filterBlock.find("input").val("");
+      this.filterBlock.find(".filter-item:not(:first)").remove();
+      this.filterBlock.find(".filter-item .btn").prop("disabled", "disabled");
+    },
+
+    _clearUpdateOn() {
+      this.updateToBlock.find("select").prop("selectedIndex", 0);
+      this.updateToBlock.find("input").val("");
+      this.updateToBlock.find(".update-field-item:not(:first)").remove();
+      this.updateToBlock.find(".update-field-item .btn").prop("disabled", "disabled");
+    },
+
+    _onFilterItemRemove(e) {
+      $(e.target).closest(".bulk-fieldset-item").remove();
+    },
+
+    _onSubmitBtnClick(e) {
+      const data = {
+        entity_type: this.entitySelect.val(),
+        action: this.actionSelect.val(),
+        filters: this._getFilters(),
+        update_on: this._getUpdateOn(),
+      }
+
+      console.log(data);
+
+      this.sandbox.client.call(
+        "POST",
+        "bulk_perform",
+        data,
+        (data) => {
+          //
+        },
+        (resp) => {
+          iziToast.error({ message: resp });
+        }
+      );
+    },
+
+    _getFilters() {
+      const filters = [];
+
+      this.filterBlock.find(".filter-item").each((_, el) => {
+        const field = $(el).find(".bulk-field-select select").val();
+        const operator = $(el).find(".bulk-operator-select select").val();
+        const value = $(el).find(".bulk-value-input input").val();
+
+        if (field && operator && value) {
+          filters.push({ field, operator, value });
+        }
+      });
+
+      return filters;
+    },
+
+    _getUpdateOn() {
+      const updateOn = [];
+
+      this.updateToBlock.find(".update-field-item").each((_, el) => {
+        const field = $(el).find("#update_field").val();
+        const value = $(el).find("#update_value").val();
+
+        if (field && value) {
+          updateOn.push({ field, value });
+        }
+      });
+
+      return updateOn;
+    },
+
+    _onFormChange() {
+      console.log("Form changed");
+
+      const data = {
+        entity_type: this.entitySelect.val(),
+        action: this.actionSelect.val(),
+        filters: this._getFilters(),
+      }
+
+      if (!data.filters.length) {
+        console.log("No filters");
+        return;
+      }
+
+      this.sandbox.client.call(
+        "POST",
+        "bulk_get_entities_by_filters",
+        data,
+        (data) => {
+          console.log(data);
+          $(".bulk-info").html("Found " + data.result.count + " entities");
+        },
+        (resp) => {
+          iziToast.error({ message: resp });
+        }
+      );
+    }
+  }
+})

ckanext/bulk/assets/scripts/bulk-tom-select.js

@@ -2,37 +2,68 @@
  * TomSelect adapter.
  * https://tom-select.js.org/
  */
-ckan.module("bulk-tom-select", function () {
+ckan.module("tom-select", function () {
 
-  return {
-    // any attribute with `data-module-` prefix transforms into camelized
-    // option. `data-module-hello-world="1"` becomes `helloWorld: 1`. Case
-    // transformation happens only after hyphen. This is used to pass nested
-    // options. For example, `data-module-hello-world_bye-world` becomes
-    // `helloWorld_byeWorld`. Then options are processed by
-    // `this.sandbox.bulk.nestedOptions` and we receive
-    // `{helloWorld: {byeWorld: ...}}`.
-    options: {
+    return {
+        // any attribute with `data-module-` prefix transforms into camelized
+        // option. `data-module-hello-world="1"` becomes `helloWorld: 1`. Case
+        // transformation happens only after hyphen. This is used to pass nested
+        // options. For example, `data-module-hello-world_bye-world` becomes
+        // `helloWorld_byeWorld`. Then options are processed by
+        // `this.sandbox.bulk.nestedOptions` and we receive
+        // `{helloWorld: {byeWorld: ...}}`.
+        options: {
+            valueField: 'label',
+            labelField: 'label',
+            plugins: ['dropdown_input'],
+            load: function (query, callback) {
+                var url = 'https://api.github.com/search/repositories?q=' + encodeURIComponent(query);
+                fetch(url)
+                    .then(response => response.json())
+                    .then(json => {
+                        callback(json.items);
+                    }).catch(() => {
+                        callback();
+                    });
+            },
+            render: {
+                option: function (item, escape) {
+                    console.log(item);
+                    return `
+                    <div class="py-2 d-flex">
+                        <div class="mb-1">
+                            <span class="h5">
+                                ${escape(item.text)}
+                            </span>
+                        </div>
+                        <div class="ms-auto">${escape(item.value)}</div>
+                    </div>
+                    `;
+                }
+            },
+        },
 
-    },
+        initialize() {
+            // stop execution if dependency is missing.
+            if (typeof TomSelect === "undefined") {
+                // reporting the source of the problem is always a good idea.
+                console.error("[bulk-tom-select] TomSelect library is not loaded");
+                return
+            }
 
-    initialize() {
-      // stop execution if dependency is missing.
-      if (typeof TomSelect === "undefined") {
-        // reporting the source of the problem is always a good idea.
-        console.error("[bulk-tom-select] TomSelect library is not loaded");
-        return
-      }
+            // tom-select has a number of nested options. We are using
+            // `nestedOptions` helper defined inside `bulk.js` to
+            // convert flat options of CKAN JS module into nested object.
+            const options = this.sandbox["bulk"].nestedOptions(this.options);
 
-      // tom-select has a number of nested options. We are using
-      // `nestedOptions` helper defined inside `bulk.js` to
-      // convert flat options of CKAN JS module into nested object.
-      const options = this.sandbox["bulk"].nestedOptions(this.options);
+            // in this case there is no value in keeping the reference to the
+            // widget. But if you are going to extend this module, sharing
+            // information between methods through `this` is a good choice.
+            if (this.el.get(0, {}).tomselect) {
+                return;
+            }
 
-      // in this case there is no value in keeping the reference to the
-      // widget. But if you are going to extend this module, sharing
-      // information between methods through `this` is a good choice.
-      this.widget = new TomSelect(this.el, options);
+            this.widget = new TomSelect(this.el, options);
+        }
     }
-  }
 })

ckanext/bulk/assets/scss/_fonts.scss

@@ -1,2 +1,2 @@
-@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,100..900;1,100..900&display=swap');
+// @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
+// @import url('https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,100..900;1,100..900&display=swap');