@emuanalytics/flow-rdf-ui 4.1.27 → 4.2.0

package/dist/components/query-builder/default-value-templates.mjs

@@ -1,7 +1,7 @@
 import { html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { ensureArray } from '../../internal/ensure-array.mjs';
-import { isFunction, isDefined } from '../../internal/type-checks.mjs';
+import { isFunction, isDefined, isStringFull } from '../../internal/type-checks.mjs';
 
 function getDefault(defaultVal, fallback) {
   if (isFunction(defaultVal)) {
@@ -49,83 +49,80 @@ const defaultNumberTemplate = (rule, field, qb, update) => {
     ></flow-ui-input>
   `;
 };
-const defaultDateTimeTemplate = (rule, field, qb, update) => {
-  const handleChange = (ev) => {
-    const target = ev.target;
-    rule.value = target.value === "" ? void 0 : target.value;
-    target.setCustomValidity(field.validator?.(rule) ?? "");
-    update();
-  };
-  const format = getDefault(field.dateFormat, "F");
-  const timezone = getDefault(field.timezone);
-  const locale = getDefault(field.locale);
-  return html`
-    <flow-ui-date-time-picker
-      filled
-      class="query-builder__rule-value-control"
-      value=${rule.value ?? ""}
-      size=${qb.size}
-      placeholder="Enter a date/time"
-      format=${ifDefined(format)}
-      timezone=${ifDefined(timezone)}
-      locale=${ifDefined(locale)}
-      ?disabled=${!rule.enabled}
-      @flow-ui-change=${handleChange}
-    ></flow-ui-date-time-picker>
-  `;
-};
-const defaultDateTemplate = (rule, field, qb, update) => {
-  const handleChange = (ev) => {
-    const target = ev.target;
-    rule.value = target.value === "" ? void 0 : target.value;
-    target.setCustomValidity(field.validator?.(rule) ?? "");
-    update();
-  };
-  const format = getDefault(field.dateFormat, "D");
-  const timezone = getDefault(field.timezone);
-  const locale = getDefault(field.locale);
-  return html`
-    <flow-ui-date-time-picker
-      filled
-      class="query-builder__rule-value-control"
-      value=${rule.value ?? ""}
-      display-mode="date"
-      size=${qb.size}
-      placeholder="Enter a date"
-      format=${ifDefined(format)}
-      timezone=${ifDefined(timezone)}
-      locale=${ifDefined(locale)}
-      ?disabled=${!rule.enabled}
-      @flow-ui-change=${handleChange}
-    ></flow-ui-date-time-picker>
-  `;
-};
-const defaultTimeTemplate = (rule, field, qb, update) => {
+function intervalFromRuleValue(value) {
+  return Array.isArray(value) && value.length === 2 && value.every(isStringFull) ? `${value[0]}/${value[1]}` : "";
+}
+function ruleValueFromInterval(interval) {
+  const [start, end] = interval.split("/");
+  return isStringFull(start) && isStringFull(end) ? [start, end] : void 0;
+}
+function dateTimePickerTemplate(rule, field, qb, update, options) {
+  const isBetween = rule.operator === "between";
   const handleChange = (ev) => {
     const target = ev.target;
-    rule.value = target.value === "" ? void 0 : target.value;
+    if (isBetween) {
+      rule.value = ruleValueFromInterval(target.value);
+    } else {
+      rule.value = target.value === "" ? void 0 : target.value;
+    }
     target.setCustomValidity(field.validator?.(rule) ?? "");
     update();
   };
-  const format = getDefault(field.dateFormat, "TTT");
+  const defaultFormat = isBetween ? options.rangeDefaultFormat ?? options.defaultFormat : options.defaultFormat;
+  const format = getDefault(field.dateFormat, defaultFormat);
   const timezone = getDefault(field.timezone);
   const locale = getDefault(field.locale);
-  return html`
-    <flow-ui-date-time-picker
-      filled
-      class="query-builder__rule-value-control"
-      value=${rule.value ?? ""}
-      display-mode="time"
-      size=${qb.size}
-      placeholder="Enter a time"
-      format=${ifDefined(format)}
-      timezone=${ifDefined(timezone)}
-      locale=${ifDefined(locale)}
-      ?disabled=${!rule.enabled}
-      @flow-ui-change=${handleChange}
-    ></flow-ui-date-time-picker>
-  `;
-};
+  return isBetween ? html`
+        <flow-ui-date-time-picker
+          filled
+          range
+          class="query-builder__rule-value-control"
+          value=${intervalFromRuleValue(rule.value)}
+          display-mode=${options.displayMode}
+          size=${qb.size}
+          placeholder=${options.rangePlaceholder ?? options.placeholder}
+          format=${ifDefined(format)}
+          timezone=${ifDefined(timezone)}
+          locale=${ifDefined(locale)}
+          ?disabled=${!rule.enabled}
+          @flow-ui-change=${handleChange}
+        ></flow-ui-date-time-picker>
+      ` : html`
+        <flow-ui-date-time-picker
+          filled
+          class="query-builder__rule-value-control"
+          value=${rule.value ?? ""}
+          display-mode=${options.displayMode}
+          size=${qb.size}
+          placeholder=${options.placeholder}
+          format=${ifDefined(format)}
+          timezone=${ifDefined(timezone)}
+          locale=${ifDefined(locale)}
+          ?disabled=${!rule.enabled}
+          @flow-ui-change=${handleChange}
+        ></flow-ui-date-time-picker>
+      `;
+}
+const defaultDateTimeTemplate = (rule, field, qb, update) => dateTimePickerTemplate(rule, field, qb, update, {
+  displayMode: "datetime",
+  defaultFormat: "F",
+  placeholder: "Enter a date/time",
+  rangePlaceholder: "Enter a date/time range"
+});
+const defaultDateTemplate = (rule, field, qb, update) => dateTimePickerTemplate(rule, field, qb, update, {
+  displayMode: "date",
+  defaultFormat: "D",
+  placeholder: "Enter a date",
+  rangePlaceholder: "Enter a date range"
+});
+const defaultTimeTemplate = (rule, field, qb, update) => dateTimePickerTemplate(rule, field, qb, update, {
+  displayMode: "time",
+  defaultFormat: "TTT",
+  placeholder: "Enter a time",
+  // An end time of 24:00 can only be shown with the H token
+  rangeDefaultFormat: "HH:mm",
+  rangePlaceholder: "Enter a time range"
+});
 const defaultSelectTemplate = (rule, field, qb, update) => {
   const isMulti = rule.operator === "in" || rule.operator === "!in";
   const handleChange = (ev) => {

package/dist/components/query-builder/helpers.mjs

@@ -1,5 +1,6 @@
 import cloneDeep from 'clone-deep';
-import { isObjectFull, isDefined } from '../../internal/type-checks.mjs';
+import { DateTime } from 'luxon';
+import { isObjectFull, isNil, isDefined, isFunction } from '../../internal/type-checks.mjs';
 
 function filterRuleSet(ruleset, options) {
   return transformRuleSet(ruleset, (rule) => {
@@ -52,5 +53,20 @@ function countRuleSet(ruleset) {
 const isRule = (r) => isObjectFull(r) && "field" in r;
 const isRuleSet = (r) => isObjectFull(r) && "rules" in r;
 const isRuleOrRuleset = (r) => isRule(r) || isRuleSet(r);
+function betweenRuleValues(rule, field) {
+  const value = rule.value;
+  if (!Array.isArray(value) || value.length !== 2 || value.some((v) => isNil(v) || v === "")) {
+    return void 0;
+  }
+  const convert = (v) => isFunction(field.convertValue) ? field.convertValue(v) : v;
+  if (field.type === "time") {
+    const start = DateTime.fromISO(String(value[0]), { setZone: true });
+    const end = DateTime.fromISO(String(value[1]), { setZone: true });
+    if (start.isValid && end.isValid && end >= start.startOf("day").plus({ days: 1 })) {
+      return [convert(value[0]), void 0];
+    }
+  }
+  return [convert(value[0]), convert(value[1])];
+}
 
-export { countRuleSet, filterRuleSet, isRule, isRuleOrRuleset, isRuleSet, renameRuleSetFields, transformRuleSet };
+export { betweenRuleValues, countRuleSet, filterRuleSet, isRule, isRuleOrRuleset, isRuleSet, renameRuleSetFields, transformRuleSet };

package/dist/components/query-builder/query-builder.component.mjs

@@ -150,7 +150,12 @@ const _FlowUiQueryBuilder = class _FlowUiQueryBuilder extends FlowRdfElement {
   handleOperatorChanged(ev, rule) {
     ev.stopPropagation();
     const target = ev.target;
-    rule.operator = target.value;
+    const operator = target.value;
+    if (rule.operator === "between" !== (operator === "between")) {
+      rule.value = void 0;
+    }
+    rule.operator = operator;
+    this.requestUpdate();
     this.emitValueChange();
   }
   handleConditionChange(ev) {
@@ -535,11 +540,11 @@ FlowUiQueryBuilder.registerFieldDefinition("datetime", {
 });
 FlowUiQueryBuilder.registerFieldDefinition("date", {
   template: defaultDateTemplate,
-  operators: ["=", "!=", "<", "<=", ">=", ">"]
+  operators: ["=", "!=", "<", "<=", ">=", ">", "between"]
 });
 FlowUiQueryBuilder.registerFieldDefinition("time", {
   template: defaultTimeTemplate,
-  operators: ["=", "!=", "<", "<=", ">=", ">"]
+  operators: ["=", "!=", "<", "<=", ">=", ">", "between"]
 });
 FlowUiQueryBuilder.registerFieldDefinition("select", {
   template: defaultSelectTemplate,