ransack_search_element 0.0.2.pre.alpha → 0.1.0.pre.alpha

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a6231963831824c4d45beb2710387ff159f2d8ceff31dfe15905678e95c8a62e
-  data.tar.gz: 158c5cb3a5c577d2969030635ad93ff61c25d3820ba76629a147eaa9ad233f9d
+  metadata.gz: dd93e037848a8f700171aec719988067edbf515bbe1e512e4d27e66296d6f8b6
+  data.tar.gz: b6ef1f37b77de1ce0e78a07d2b16171c135a484596118c1c34aa611e75698d80
 SHA512:
-  metadata.gz: e8e734658728bfc5cacafec2e3483191f761d1429f68ba2c44b7377b72b7817a1df39ba47fa1e70d9f778903589e32a9daabc73b490fae96c7369425bdbec11b
-  data.tar.gz: 8ccae8b4e6d1c4b164d73f9ed88882bdcfc1c9ebaf95ab940f5bdb4a6dd5fabd8273babcaf71911dc6dcaf3c9ffe072b1af5cfc0d3b0e13334035f6f472b6aef
+  metadata.gz: 9caa070a79c203d9f6b69a6ebdf4c9a9f8cef79d33549cf25325ba9895d8ac3b954efb875f227cb96a05483ca89fedde1396e38feb618d0221a9cad927633731
+  data.tar.gz: 1dc72e8b176fae901a389a77eb2b5fd1d4712e1f7c8a16cfd1a4d1d05bb8d1381b59a290fa05958ac1f4a51634cbc769ad0a099ed905bdb8d8a0a9d7b88f1088

data/app/javascript/ransack-search-element/components/FilterDropdown.tsx

@@ -1,12 +1,51 @@
-import React, { useMemo, useState } from "react";
-import QueryBuilder, {
-  AttributeInfo,
-  Filter,
-  options,
-} from "../utilities/QueryBuilder";
+import React, { useState } from "react";
 
 import FilterRow from "./FilterRow";
 
+const options = [
+  ["Contains", "cont"],
+  ["Equals", "eq"],
+  ["Less than", "lt"],
+  ["Greater than", "gt"],
+  ["Less than/equal", "lteq"],
+  ["Greater than/equal", "gteq"],
+];
+
+const options_values = options.map((v) => v[1]);
+
+/**
+ * Recursively iterate through relations with matching prefixes.
+ * Attempts to get the accompanying AttributeInfo given a full query.
+ * @param full_query
+ * @param ass
+ */
+const get_association = (
+  full_query,
+  ass
+): {
+  [association: string]: AttributeInfo;
+} => {
+  if (ass instanceof Array) {
+    return ass.find((dict) => {
+      return full_query.includes(Object.keys(dict)[0]);
+    });
+  }
+
+  const key = Object.keys(ass).find((k) => full_query.includes(k));
+
+  if (typeof key === "undefined") return null;
+
+  const remainder = full_query.slice(full_query.indexOf(key) + key.length + 1);
+
+  return get_association(remainder, ass[key]);
+};
+
+export type AttributeInfo = {
+  type: string;
+  label: string;
+  ass?: string;
+};
+
 export type FilterDropdownProps = {
   columns: {
     root: {
@@ -39,13 +78,85 @@ export default (props: FilterDropdownProps): JSX.Element => {
     associations.map((v) => Object.keys(v)[0]).flat()
   );
 
-  const queryBuilder = useMemo(() => {
-    return new QueryBuilder(colNames, associations);
-  }, [columns, queries]);
-
   const [filters, setFilters] = useState<{
-    [key: string]: Filter[];
-  }>(queryBuilder.parseQueries(queries));
+    [key: string]: {
+      label: string;
+      query: string;
+      type: string;
+      value: string | number;
+      ass?: string;
+    }[];
+  }>(
+    /**
+     * Here we initialize parameters from the query string,
+     * and do basic validation for options and attributes.
+     */
+    (() => {
+      let s = queries || {};
+
+      let f = {};
+
+      if (Object.entries(s)?.length > 0) {
+        for (const [k, v] of Object.entries(s)) {
+          // sorting parameter
+          if (k === "s") continue;
+
+          const query = options_values
+            .filter((v) => k.includes(v))
+            .reduce((x, y) => (x.length > y.length ? x : y), "");
+
+          const attribute = possible_values
+            .filter((v) => k.includes(v))
+            .reduce((x, y) => (x.length > y.length ? x : y), "");
+
+          const asses = get_association(
+            k,
+            associations.reduce((acc, cur) => ({ ...acc, ...cur }), {})
+          );
+
+          if (asses) {
+            const full_ass_key = Object.keys(asses)[0];
+            const full_ass_values = Object.values(asses)[0];
+
+            const t = {};
+            t["query"] = query;
+            t["value"] = v;
+            t["type"] = full_ass_values?.type;
+            t["label"] = full_ass_values?.label;
+            t["ass"] = attribute;
+
+            if (query.length > 0 && attribute.length > 0) {
+              if (f[`${attribute}_${full_ass_key}`] instanceof Array) {
+                f[`${attribute}_${full_ass_key}`].push(t);
+              } else {
+                f[`${attribute}_${full_ass_key}`] = [];
+                f[`${attribute}_${full_ass_key}`].push(t);
+              }
+            }
+          } else {
+            const t = {};
+            t["query"] = query;
+            t["value"] = v;
+            t["type"] = colNames[attribute]?.type;
+            t["label"] = colNames[attribute]?.label;
+
+            if (query.length > 0 && attribute.length > 0) {
+              if (f[`${attribute}`] instanceof Array) {
+                f[`${attribute}`].push(t);
+              } else {
+                f[`${attribute}`] = [];
+                f[`${attribute}`].push(t);
+              }
+            }
+          }
+        }
+      } else {
+        return {};
+      }
+
+      return f;
+    })()
+  );
 
   /**
    * The constructed query string to replace the current location when
@@ -61,7 +172,7 @@ export default (props: FilterDropdownProps): JSX.Element => {
       .map(([k, v]) => {
         return v
           .map((x) => {
-            if (x["ass"] && k.indexOf(x["ass"]) !== 0) {
+            if (x["ass"]) {
               return (
                 `q[${x["ass"] + "_" + k + "_" + x["query"]}]` +
                 "=" +
@@ -121,7 +232,12 @@ export default (props: FilterDropdownProps): JSX.Element => {
                     onClick={(e) => {
                       e.preventDefault();
                       let copy = { ...filters };
-                      const t = {};
+                      const t = {
+                        query: "",
+                        type: "",
+                        label: "",
+                        value: "",
+                      };
                       t["query"] = "eq";
                       t["type"] = colNames[v]?.type || associations[v]?.type;
                       t["label"] = colNames[v]?.label || associations[v]?.label;
@@ -178,7 +294,12 @@ export default (props: FilterDropdownProps): JSX.Element => {
                                 e.preventDefault();
                                 let copy = { ...filters };
 
-                                const t = {};
+                                const t = {
+                                  query: "",
+                                  type: "",
+                                  label: "",
+                                  value: "",
+                                };
                                 t["query"] = "eq";
                                 t["type"] = values.type;
                                 t["label"] = values.label;

data/app/javascript/ransack-search-element/index.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { ReactComponentElement } from "react";
 import FilterDropdown, {
   FilterDropdownProps,
 } from "./components/FilterDropdown";

data/app/javascript/ransack-search-element/utilities/registerNestedDropdown.ts

@@ -1,65 +1,67 @@
-import { Dropdown } from "bootstrap";
+import * as bootstrap from "bootstrap";
 
 export default function (root: Document | HTMLElement) {
-  const CLASS_NAME = "has-child-dropdown-show";
-  Dropdown.prototype.toggle = (function (_orginal) {
-    return function () {
-      root.querySelectorAll("." + CLASS_NAME).forEach(function (e) {
-        e.classList.remove(CLASS_NAME);
-      });
-      let dd = this._element
-        .closest(".dropdown")
-        .parentNode.closest(".dropdown");
-      for (; dd && dd !== root; dd = dd.parentNode.closest(".dropdown")) {
-        dd.classList.add(CLASS_NAME);
-      }
-      return _orginal.call(this);
-    };
-  })(Dropdown.prototype.toggle);
-
-  root.querySelectorAll(".dropdown").forEach(function (dd) {
-    dd.addEventListener("hide.bs.dropdown", function (e) {
-      if (this.classList.contains(CLASS_NAME)) {
-        this.classList.remove(CLASS_NAME);
-        e.preventDefault();
-      }
-      if (
-        e.clickEvent &&
-        e.clickEvent
-          .composedPath()
-          .some(
-            (el) => el.classList && el.classList.contains("dropdown-toggle")
-          )
-      ) {
-        e.preventDefault();
-      }
-      e.stopPropagation(); // do not need pop in multi level mode
-    });
-  });
-
-  // for hover
-  function getDropdown(element) {
-    return Dropdown.getInstance(element) || new Dropdown(element);
-  }
+  (function ($bs) {
+    const CLASS_NAME = "has-child-dropdown-show";
+    $bs.Dropdown.prototype.toggle = (function (_orginal) {
+      return function () {
+        root.querySelectorAll("." + CLASS_NAME).forEach(function (e) {
+          e.classList.remove(CLASS_NAME);
+        });
+        let dd = this._element
+          .closest(".dropdown")
+          .parentNode.closest(".dropdown");
+        for (; dd && dd !== root; dd = dd.parentNode.closest(".dropdown")) {
+          dd.classList.add(CLASS_NAME);
+        }
+        return _orginal.call(this);
+      };
+    })($bs.Dropdown.prototype.toggle);
 
-  root
-    .querySelectorAll(".dropdown-hover, .dropdown-hover-all .dropdown")
-    .forEach(function (dd) {
-      dd.addEventListener("mouseenter", function (e) {
-        let toggle = e.target.querySelector(
-          ':scope>[data-bs-toggle="dropdown"]'
-        );
-        if (!toggle.classList.contains("show")) {
-          getDropdown(toggle).toggle();
+    root.querySelectorAll(".dropdown").forEach(function (dd) {
+      dd.addEventListener("hide.bs.dropdown", function (e) {
+        if (this.classList.contains(CLASS_NAME)) {
+          this.classList.remove(CLASS_NAME);
+          e.preventDefault();
         }
-      });
-      dd.addEventListener("mouseleave", function (e) {
-        let toggle = e.target.querySelector(
-          ':scope>[data-bs-toggle="dropdown"]'
-        );
-        if (toggle.classList.contains("show")) {
-          getDropdown(toggle).toggle();
+        if (
+          e.clickEvent &&
+          e.clickEvent
+            .composedPath()
+            .some(
+              (el) => el.classList && el.classList.contains("dropdown-toggle")
+            )
+        ) {
+          e.preventDefault();
         }
+        e.stopPropagation(); // do not need pop in multi level mode
       });
     });
+
+    // for hover
+    function getDropdown(element) {
+      return $bs.Dropdown.getInstance(element) || new $bs.Dropdown(element);
+    }
+
+    root
+      .querySelectorAll(".dropdown-hover, .dropdown-hover-all .dropdown")
+      .forEach(function (dd) {
+        dd.addEventListener("mouseenter", function (e) {
+          let toggle = e.target.querySelector(
+            ':scope>[data-bs-toggle="dropdown"]'
+          );
+          if (!toggle.classList.contains("show")) {
+            getDropdown(toggle).toggle();
+          }
+        });
+        dd.addEventListener("mouseleave", function (e) {
+          let toggle = e.target.querySelector(
+            ':scope>[data-bs-toggle="dropdown"]'
+          );
+          if (toggle.classList.contains("show")) {
+            getDropdown(toggle).toggle();
+          }
+        });
+      });
+  })(bootstrap);
 }

data/lib/ransack_search_element/version.rb

@@ -1,3 +1,3 @@
 module RansackSearchElement
-  VERSION = '0.0.2-alpha'
+  VERSION = '0.1.0-alpha'
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: ransack_search_element
 version: !ruby/object:Gem::Version
-  version: 0.0.2.pre.alpha
+  version: 0.1.0.pre.alpha
 platform: ruby
 authors:
 - Arthur Dzieniszewski
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-09-05 00:00:00.000000000 Z
+date: 2021-08-22 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -42,7 +42,6 @@ files:
 - app/javascript/ransack-search-element/components/FilterRow.tsx
 - app/javascript/ransack-search-element/components/FormInput.tsx
 - app/javascript/ransack-search-element/index.ts
-- app/javascript/ransack-search-element/utilities/QueryBuilder.ts
 - app/javascript/ransack-search-element/utilities/dateConverter.ts
 - app/javascript/ransack-search-element/utilities/registerNestedDropdown.ts
 - app/jobs/ransack_search_element/application_job.rb
@@ -77,7 +76,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: 1.3.1
 requirements: []
-rubygems_version: 3.2.15
+rubygems_version: 3.2.22
 signing_key:
 specification_version: 4
 summary: Generic, advanced search element for Ransack.

data/app/javascript/ransack-search-element/utilities/QueryBuilder.ts

@@ -1,134 +0,0 @@
-export type Filter = {
-  [key: string]: {
-    label: string;
-    query: string;
-    type: string;
-    value: string | number;
-    ass?: string;
-  };
-};
-
-export type AttributeInfo = {
-  type: string;
-  label: string;
-  ass?: string;
-};
-
-export const options = [
-  ["Contains", "cont"],
-  ["Equals", "eq"],
-  ["Less than", "lt"],
-  ["Greater than", "gt"],
-  ["Less than/equal", "lteq"],
-  ["Greater than/equal", "gteq"],
-];
-
-const options_values = options.map((v) => v[1]);
-
-/**
- * Recursively iterate through relations with matching prefixes.
- * Attempts to get the accompanying AttributeInfo given a full query.
- * @param full_query
- * @param ass
- */
-const get_association = (
-  full_query,
-  ass
-): {
-  [association: string]: AttributeInfo;
-} => {
-  if (ass instanceof Array) {
-    return ass.find((dict) => {
-      return full_query.includes(Object.keys(dict)[0]);
-    });
-  }
-
-  const key = Object.keys(ass).find((k) => full_query.includes(k));
-
-  if (typeof key === "undefined") return null;
-
-  const remainder = full_query.slice(full_query.indexOf(key) + key.length + 1);
-
-  return get_association(remainder, ass[key]);
-};
-
-export default class QueryBuilder {
-  attributes = {};
-  associations;
-  possible_values = [];
-
-  constructor(attributes, associations) {
-    this.attributes = attributes;
-    this.associations = associations;
-
-    this.possible_values = Object.keys(attributes).concat(
-      associations.map((v) => Object.keys(v)[0]).flat()
-    );
-  }
-
-  parseQueries(queries) {
-    let s = queries || {};
-
-    let f = {};
-
-    if (Object.entries(s)?.length > 0) {
-      for (const [k, v] of Object.entries(s)) {
-        // sorting parameter
-        if (k === "s") continue;
-
-        const query = options_values
-          .filter((v) => k.includes(v))
-          .reduce((x, y) => (x.length > y.length ? x : y), "");
-
-        const attribute = this.possible_values
-          .filter((v) => k.includes(v))
-          .reduce((x, y) => (x.length > y.length ? x : y), "");
-
-        const asses = get_association(
-          k,
-          this.associations.reduce((acc, cur) => ({ ...acc, ...cur }), {})
-        );
-
-        if (asses) {
-          const full_ass_key = Object.keys(asses)[0];
-          const full_ass_values = Object.values(asses)[0];
-
-          const t = {};
-          t["query"] = query;
-          t["value"] = v;
-          t["type"] = full_ass_values?.type;
-          t["label"] = full_ass_values?.label;
-          t["ass"] = attribute;
-
-          if (query.length > 0 && attribute.length > 0) {
-            if (f[`${attribute}_${full_ass_key}`] instanceof Array) {
-              f[`${attribute}_${full_ass_key}`].push(t);
-            } else {
-              f[`${attribute}_${full_ass_key}`] = [];
-              f[`${attribute}_${full_ass_key}`].push(t);
-            }
-          }
-        } else {
-          const t = {};
-          t["query"] = query;
-          t["value"] = v;
-          t["type"] = this.attributes[attribute]?.type;
-          t["label"] = this.attributes[attribute]?.label;
-
-          if (query.length > 0 && attribute.length > 0) {
-            if (f[`${attribute}`] instanceof Array) {
-              f[`${attribute}`].push(t);
-            } else {
-              f[`${attribute}`] = [];
-              f[`${attribute}`].push(t);
-            }
-          }
-        }
-      }
-    } else {
-      return {};
-    }
-
-    return f;
-  }
-}