katalyst-tables 3.5.4 → 3.6.0

data/app/javascript/tables/query_input_controller.js

@@ -24,6 +24,49 @@ export default class QueryInputController extends Controller {
       this.highlightTarget.appendChild(token.render());
     });
   }
+
+  replaceToken(e) {
+    let tokenToAdd = e.detail.token.toString();
+
+    // wrap in quotes if it contains a spaces or special characters
+    if (/\s/.exec(tokenToAdd)) {
+      tokenToAdd = `"${tokenToAdd}"`;
+    }
+
+    const indexPosition = e.detail.position;
+    let caretPosition = indexPosition + tokenToAdd.length;
+    let sliceStart = indexPosition;
+    let sliceEnd = indexPosition;
+
+    // detect if position has a token already, if so, replace it
+    const existingToken = new Parser()
+      .parse(this.queryValue)
+      .tokenAtPosition(indexPosition);
+    if (existingToken) {
+      // We don't want to include the trailing space as we are replacing an existing value
+      tokenToAdd = tokenToAdd.trim();
+
+      // Slice up to the beginning of the tokens value (not the initial caret position)
+      sliceStart = existingToken.startOfValue();
+
+      // Slice after the end of the tokens value
+      sliceEnd = existingToken.endOfValue();
+
+      // The end position of the newly added token
+      caretPosition = sliceStart + tokenToAdd.length;
+    }
+
+    // Replace any text within sliceStart and sliceEnd with tokenToAdd
+    this.inputTarget.value =
+      this.queryValue.slice(0, sliceStart) +
+      tokenToAdd +
+      this.queryValue.slice(sliceEnd);
+
+    // Re focus the input at the end of the newly added token
+    this.update();
+    this.inputTarget.focus();
+    this.inputTarget.setSelectionRange(caretPosition, caretPosition);
+  }
 }
 
 class Parser {
@@ -57,13 +100,13 @@ class Parser {
   skipWhitespace(query) {
     if (!query.scan(/\s+/)) return;
 
-    return new Token(query.matched());
+    return new Token(query.matched(), query.position);
   }
 
   takeUntagged(query) {
     if (!query.scan(/\S+/)) return;
 
-    return new Untagged(query.matched());
+    return new Untagged(query.matched(), query.position);
   }
 
   takeTagged(query) {
@@ -75,13 +118,13 @@ class Parser {
     const value =
       this.takeArrayValue(query) || this.takeSingleValue(query) || new Token();
 
-    return new Tagged(key, separator, value);
+    return new Tagged(key, separator, value, query.position);
   }
 
   takeArrayValue(query) {
     if (!query.scan(/\[\s*/)) return;
 
-    const start = new Token(query.matched());
+    const start = new Token(query.matched(), query.position);
     const values = (this.values = []);
 
     while (!query.isEos()) {
@@ -90,17 +133,17 @@ class Parser {
     }
 
     query.scan(/\s*]/);
-    const end = new Token(query.matched());
+    const end = new Token(query.matched(), query.position);
 
     this.values = null;
 
-    return new Array(start, values, end);
+    return new ArrayToken(start, values, end);
   }
 
   takeDelimiter(query) {
     if (!query.scan(/\s*,\s*/)) return;
 
-    return new Token(query.matched());
+    return new Token(query.matched(), query.position);
   }
 
   takeSingleValue(query) {
@@ -110,24 +153,49 @@ class Parser {
   takeQuotedValue(query) {
     if (!query.scan(/"([^"]*)"/)) return;
 
-    return new Value(query.matched());
+    return new Value(query.matched(), query.position);
   }
 
   takeUnquotedValue(query) {
     if (!query.scan(/[^ \],]*/)) return;
 
-    return new Value(query.matched());
+    return new Value(query.matched(), query.position);
+  }
+
+  tokenAtPosition(position) {
+    return this.tokens
+      .filter((t) => t instanceof Tagged || t instanceof Untagged)
+      .find((t) => t.range.includes(position));
   }
 }
 
 class Token {
-  constructor(value = "") {
+  constructor(value = "", position) {
     this.value = value;
+    this.length = this.value.length;
+    this.start = position - this.length;
+    this.end = this.start + this.length;
+    this.range = this.arrayRange(this.start, this.end);
   }
 
   render() {
     return document.createTextNode(this.value);
   }
+
+  arrayRange(start, stop) {
+    return Array.from(
+      { length: stop - start + 1 },
+      (value, index) => start + index,
+    );
+  }
+
+  startOfValue() {
+    return this.start;
+  }
+
+  endOfValue() {
+    return this.end;
+  }
 }
 
 class Value extends Token {
@@ -141,12 +209,16 @@ class Value extends Token {
 }
 
 class Tagged extends Token {
-  constructor(key, separator, value) {
+  constructor(key, separator, value, position) {
     super();
 
     this.key = key;
     this.separator = separator;
     this.value = value;
+    this.length = key.length + separator.length + value.value.length;
+    this.start = position - this.length;
+    this.end = this.start + this.length;
+    this.range = this.arrayRange(this.start, this.end);
   }
 
   render() {
@@ -163,6 +235,14 @@ class Tagged extends Token {
 
     return span;
   }
+
+  startOfValue() {
+    return this.value.startOfValue();
+  }
+
+  endOfValue() {
+    return this.value.endOfValue();
+  }
 }
 
 class Untagged extends Token {
@@ -174,13 +254,18 @@ class Untagged extends Token {
   }
 }
 
-class Array extends Token {
+class ArrayToken extends Token {
   constructor(start, values, end) {
     super();
 
     this.start = start;
     this.values = values;
     this.end = end;
+    this.range = this.arrayRange(start.start, end.range[end.length]);
+    this.length =
+      start.length +
+      values.reduce((length, value) => length + value.length, 0) +
+      end.length;
   }
 
   render() {
@@ -198,6 +283,14 @@ class Array extends Token {
 
     return array;
   }
+
+  startOfValue() {
+    return this.start.start;
+  }
+
+  endOfValue() {
+    return this.end.end;
+  }
 }
 
 class StringScanner {

data/config/locales/tables.en.yml

@@ -12,5 +12,5 @@ en:
   errors:
     attributes:
       query:
-        unknown_key: "The field '%{input}' isn’t searchable here. Please check your input."
-        no_untagged_search: "'%{input}' isn't searchable here. Please choose a field to search."
+        unknown_key: "The search option '%{input}' isn’t valid. Please check your input."
+        no_untagged_search: "'%{input}' isn't searchable. Please choose a valid search option."

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: katalyst-tables
 version: !ruby/object:Gem::Version
-  version: 3.5.4
+  version: 3.6.0
 platform: ruby
 authors:
 - Katalyst Interactive
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-07-29 00:00:00.000000000 Z
+date: 2024-08-01 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: katalyst-html-attributes