@saltcorn/data 0.6.1 → 0.6.2-beta.0

package/base-plugin/types.js

@@ -1,9 +1,9 @@
 /**
  * Embedded Types definition.
  *
- * More types can be added by plugin store mechanism https://store.saltcorn.com/ 
+ * More types can be added by plugin store mechanism https://store.saltcorn.com/
  * @category saltcorn-data
- * @module base-plugin/types 
+ * @module base-plugin/types
  * @subcategory base-plugin
  */
 
@@ -24,16 +24,102 @@ const {
   text_attr,
 } = require("@saltcorn/markup/tags");
 const { contract, is } = require("contractis");
-const { radio_group } = require("@saltcorn/markup/helpers");
+const { radio_group, checkbox_group } = require("@saltcorn/markup/helpers");
 const { getState } = require("../db/state");
 
 const isdef = (x) => (typeof x === "undefined" || x === null ? false : true);
 
 const eqStr = (x, y) => `${x}` === `${y}`;
 
+const number_slider = (type) => ({
+  configFields: (field) => [
+    ...(!isdef(field.attributes.max) && !isdef(field.attributes.min)
+      ? [
+          { name: "min", type, required: false },
+          { name: "max", type, required: false },
+        ]
+      : []),
+    //{ name: "also_entry", type: "Bool", label: "Also entry" },
+  ],
+  isEdit: true,
+  run: (nm, v, attrs = {}, cls, required, field) =>
+    input({
+      type: "range",
+      class: ["form-control", cls],
+      name: text_attr(nm),
+      "data-fieldname": text_attr(field.name),
+      disabled: attrs.disabled,
+      onChange: attrs.onChange,
+      step:
+        type === "Integer"
+          ? 1
+          : attrs.decimal_places
+          ? Math.pow(10, -attrs.decimal_places)
+          : "0.01",
+      id: `input${text_attr(nm)}`,
+      ...(attrs.max && { max: attrs.max }),
+      ...(attrs.min && { min: attrs.min }),
+      ...(isdef(v) && { value: text_attr(v) }),
+    }),
+});
+const progress_bar = (type) => ({
+  configFields: (field) => [
+    ...(!isdef(field.attributes.min)
+      ? [{ name: "min", type, required: true }]
+      : []),
+    ...(!isdef(field.attributes.max)
+      ? [{ name: "max", type, required: true }]
+      : []),
+    { name: "bar_color", type: "Color", label: "Bar color" },
+    { name: "bg_color", type: "Color", label: "Background color" },
+    { name: "px_height", type: "Integer", label: "Height in px" },
+  ],
+  isEdit: false,
+  run: (v, req, attrs = {}) =>
+    div(
+      {
+        style: {
+          width: "100%",
+          height: `${attrs.px_height || 8}px`,
+          backgroundColor: attrs.bg_color,
+        },
+      },
+      div({
+        style: {
+          width: `${(100 * (v - attrs.min)) / (attrs.max - attrs.min)}%`,
+          height: `${attrs.px_height || 8}px`,
+          backgroundColor: attrs.bar_color,
+        },
+      })
+    ),
+});
+
+const number_limit = (type, direction) => ({
+  isEdit: false,
+  isFilter: true,
+  run: (nm, v, attrs = {}, cls, required, field, state = {}) =>
+    input({
+      type: "number",
+      class: ["form-control", cls],
+      disabled: attrs.disabled,
+      onChange: `set_state_field('_${direction}_${nm}', this.value)`,
+      step:
+        type === "Integer"
+          ? "1"
+          : attrs.decimal_places
+          ? Math.pow(10, -attrs.decimal_places)
+          : "0.01",
+      ...(attrs.max && { max: attrs.max }),
+      ...(attrs.min && { min: attrs.min }),
+      ...(isdef(state[`_${direction}_${nm}`]) && {
+        value: text_attr(state[`_${direction}_${nm}`]),
+      }),
+    }),
+});
+
 /**
- * @param {string} v 
- * @param {string} optsStr 
+ * @param {string} v
+ * @param {string} optsStr
  * @returns {string[]}
  */
 const getStrOptions = (v, optsStr) =>
@@ -64,11 +150,11 @@ const getStrOptions = (v, optsStr) =>
       );
 
 /**
-  * string type
-  * @namespace
-  * @category saltcorn-data
-  * @subcategory types / string
-  */
+ * string type
+ * @namespace
+ * @category saltcorn-data
+ * @subcategory types / string
+ */
 const string = {
   /** @type {string} */
   name: "String",
@@ -242,6 +328,7 @@ const string = {
                 "data-fieldname": text_attr(field.name),
                 id: `input${text_attr(nm)}`,
                 disabled: attrs.disabled,
+                onChange: attrs.onChange,
               },
               required || attrs.force_required
                 ? getStrOptions(v, attrs.options)
@@ -260,6 +347,7 @@ const string = {
                 disabled: attrs.disabled,
                 "data-fieldname": text_attr(field.name),
                 id: `input${text_attr(nm)}`,
+                onChange: attrs.onChange,
                 "data-selected": v,
                 "data-calc-options": encodeURIComponent(
                   JSON.stringify(attrs.calcOptions)
@@ -272,6 +360,7 @@ const string = {
               disabled: attrs.disabled,
               class: ["form-control", cls],
               placeholder: attrs.placeholder,
+              onChange: attrs.onChange,
               "data-fieldname": text_attr(field.name),
               name: text_attr(nm),
               id: `input${text_attr(nm)}`,
@@ -292,6 +381,7 @@ const string = {
             name: text_attr(nm),
             "data-fieldname": text_attr(field.name),
             disabled: attrs.disabled,
+            onChange: attrs.onChange,
             id: `input${text_attr(nm)}`,
             rows: 5,
           },
@@ -315,6 +405,31 @@ const string = {
       run: (nm, v, attrs, cls, required, field) =>
         attrs.options
           ? radio_group({
+              class: cls,
+              name: text_attr(nm),
+              disabled: attrs.disabled,
+              inline: attrs.inline,
+              onChange: attrs.onChange,
+              options: Array.isArray(attrs.options)
+                ? attrs.options
+                : attrs.options.split(",").map((o) => o.trim()),
+              value: v,
+            })
+          : i("None available"),
+    },
+    checkbox_group: {
+      isEdit: false,
+      isFilter: true,
+      configFields: [
+        {
+          type: "Bool",
+          name: "inline",
+          label: "Inline",
+        },
+      ],
+      run: (nm, v, attrs, cls, required, field) =>
+        attrs && attrs.options
+          ? checkbox_group({
               class: cls,
               name: text_attr(nm),
               disabled: attrs.disabled,
@@ -339,7 +454,7 @@ const string = {
           disabled: attrs.disabled,
           class: ["form-control", cls],
           "data-fieldname": text_attr(field.name),
-
+          onChange: attrs.onChange,
           name: text_attr(nm),
           id: `input${text_attr(nm)}`,
           ...(isdef(v) && { value: text_attr(v) }),
@@ -347,7 +462,7 @@ const string = {
     },
   },
   /**
-   * @param {*} v 
+   * @param {*} v
    * @returns {string|undefined}
    */
   read: (v) => {
@@ -403,7 +518,7 @@ const string = {
 };
 
 /**
- * @param {string} s 
+ * @param {string} s
  * @returns {boolean}
  */
 const is_valid_regexp = (s) => {
@@ -434,23 +549,23 @@ const int = {
    */
   contract: ({ min, max }) => is.integer({ lte: max, gte: min }),
   primaryKey: { sql_type: "serial" },
-  /** 
+  /**
    * @namespace
    * @category saltcorn-data
    * @subcategory types / int
    */
   fieldviews: {
-    /** 
+    /**
      * @namespace
      * @category saltcorn-data
      * @subcategory types / int
      */
     show: { isEdit: false, run: (s) => text(s) },
-    /** 
-      * @namespace
-      * @category saltcorn-data
-      * @subcategory types / int
-      */
+    /**
+     * @namespace
+     * @category saltcorn-data
+     * @subcategory types / int
+     */
     edit: {
       isEdit: true,
       run: (nm, v, attrs, cls, required, field) =>
@@ -460,6 +575,7 @@ const int = {
           disabled: attrs.disabled,
           "data-fieldname": text_attr(field.name),
           name: text_attr(nm),
+          onChange: attrs.onChange,
           id: `input${text_attr(nm)}`,
           step: "1",
           ...(attrs.max && { max: attrs.max }),
@@ -467,11 +583,15 @@ const int = {
           ...(isdef(v) && { value: text_attr(v) }),
         }),
     },
+    number_slider: number_slider("Integer"),
+    progress_bar: progress_bar("Integer"),
+    above_input: number_limit("Integer", "gte"),
+    below_input: number_limit("Integer", "lte"),
   },
   /** @type {object[]}  */
   attributes: [
-    { name: "max", type: "Integer", required: false },
     { name: "min", type: "Integer", required: false },
+    { name: "max", type: "Integer", required: false },
   ],
   /**
    * @param {object} param
@@ -480,7 +600,7 @@ const int = {
   validate_attributes: ({ min, max }) =>
     !isdef(min) || !isdef(max) || max > min,
   /**
-   * @param {object} v 
+   * @param {object} v
    * @returns {object}
    */
   read: (v) => {
@@ -496,7 +616,7 @@ const int = {
     }
   },
   /**
-   * @param {object} param 
+   * @param {object} param
    * @returns {boolean}
    */
   validate: ({ min, max }) => (x) => {
@@ -521,17 +641,17 @@ const color = {
    * @returns {function}
    */
   contract: () => is.str,
-  /** 
+  /**
    * @namespace
    * @category saltcorn-data
    * @subcategory types / color
    */
   fieldviews: {
-    /** 
-      * @namespace
-      * @category saltcorn-data
-      * @subcategory types / color
-      */
+    /**
+     * @namespace
+     * @category saltcorn-data
+     * @subcategory types / color
+     */
     show: {
       isEdit: false,
       run: (s) =>
@@ -542,11 +662,11 @@ const color = {
             })
           : "",
     },
-    /** 
-      * @namespace
-      * @category saltcorn-data
-      * @subcategory types / color
-      */
+    /**
+     * @namespace
+     * @category saltcorn-data
+     * @subcategory types / color
+     */
     edit: {
       isEdit: true,
       run: (nm, v, attrs, cls, required, field) =>
@@ -554,6 +674,7 @@ const color = {
           type: "color",
           class: ["form-control", cls],
           disabled: attrs.disabled,
+          onChange: attrs.onChange,
           "data-fieldname": text_attr(field.name),
           name: text_attr(nm),
           id: `input${text_attr(nm)}`,
@@ -564,7 +685,7 @@ const color = {
   /** @type {object[]} */
   attributes: [],
   /**
-   * @param {object} v 
+   * @param {object} v
    * @returns {object}
    */
   read: (v) => {
@@ -585,7 +706,7 @@ const color = {
 
 /**
  * Float type
- * @namespace 
+ * @namespace
  * @category saltcorn-data
  * @subcategory types / float
  */
@@ -601,23 +722,23 @@ const float = {
    * @returns {function}
    */
   contract: ({ min, max }) => is.number({ lte: max, gte: min }),
-  /** 
-   * @namespace 
+  /**
+   * @namespace
    * @category saltcorn-data
    * @subcategory types / float
    */
   fieldviews: {
-    /** 
-      * @namespace
-      * @category saltcorn-data
-      * @subcategory types / float
-      */
+    /**
+     * @namespace
+     * @category saltcorn-data
+     * @subcategory types / float
+     */
     show: { isEdit: false, run: (s) => text(s) },
-    /** 
-      * @namespace
-      * @category saltcorn-data
-      * @subcategory types / float
-      */
+    /**
+     * @namespace
+     * @category saltcorn-data
+     * @subcategory types / float
+     */
     edit: {
       isEdit: true,
       run: (nm, v, attrs, cls, required, field) =>
@@ -627,6 +748,7 @@ const float = {
           name: text_attr(nm),
           "data-fieldname": text_attr(field.name),
           disabled: attrs.disabled,
+          onChange: attrs.onChange,
           step: attrs.decimal_places
             ? Math.pow(10, -attrs.decimal_places)
             : "0.01",
@@ -636,16 +758,20 @@ const float = {
           ...(isdef(v) && { value: text_attr(v) }),
         }),
     },
+    number_slider: number_slider("Float"),
+    progress_bar: progress_bar("Float"),
+    above_input: number_limit("Float", "gte"),
+    below_input: number_limit("Float", "lte"),
   },
   /** @type {object[]} */
   attributes: [
-    { name: "max", type: "Float", required: false },
     { name: "min", type: "Float", required: false },
+    { name: "max", type: "Float", required: false },
     { name: "units", type: "String", required: false },
     { name: "decimal_places", type: "Integer", required: false },
   ],
   /**
-   * @param {object} v 
+   * @param {object} v
    * @returns {number|string|undefined}
    */
   read: (v) => {
@@ -671,7 +797,7 @@ const float = {
 };
 
 /**
- * @param {object} req 
+ * @param {object} req
  * @returns {string|undefined}
  */
 const locale = (req) => {
@@ -680,7 +806,7 @@ const locale = (req) => {
 };
 
 /**
- * @param {*} x 
+ * @param {*} x
  * @returns {*}
  */
 const logit = (x) => {
@@ -690,7 +816,7 @@ const logit = (x) => {
 
 /**
  * Date type
- * @namespace 
+ * @namespace
  * @category saltcorn-data
  * @subcategory types / date
  */
@@ -705,17 +831,17 @@ const date = {
   contract: () => is.date,
   /** @type {object[]} */
   attributes: [],
-  /** 
-   * @namespace 
+  /**
+   * @namespace
    * @category saltcorn-data
-   * @subcategory types / date   
+   * @subcategory types / date
    */
   fieldviews: {
-    /** 
-      * @namespace
-      * @category saltcorn-data
-      * @subcategory types / date
-      */
+    /**
+     * @namespace
+     * @category saltcorn-data
+     * @subcategory types / date
+     */
     show: {
       isEdit: false,
       run: (d, req) =>
@@ -727,11 +853,11 @@ const date = {
             : ""
         ),
     },
-    /** 
-      * @namespace
-      * @category saltcorn-data
-      * @subcategory types / date
-      */
+    /**
+     * @namespace
+     * @category saltcorn-data
+     * @subcategory types / date
+     */
     showDay: {
       isEdit: false,
       run: (d, req) =>
@@ -743,7 +869,7 @@ const date = {
             : ""
         ),
     },
-    /** 
+    /**
      * @namespace
      * @category saltcorn-data
      * @subcategory types / date
@@ -764,7 +890,7 @@ const date = {
         return text(moment(d).format(options.format));
       },
     },
-    /** 
+    /**
      * @namespace
      * @category saltcorn-data
      * @subcategory types / date
@@ -778,7 +904,7 @@ const date = {
         else return text(moment(d).fromNow());
       },
     },
-    /** 
+    /**
      * @namespace
      * @category saltcorn-data
      * @subcategory types / date
@@ -790,7 +916,7 @@ const date = {
         return text(moment.duration(new Date() - d).years());
       },
     },
-    /** 
+    /**
      * @namespace
      * @category saltcorn-data
      * @subcategory types / date
@@ -803,6 +929,7 @@ const date = {
           class: ["form-control", cls],
           "data-fieldname": text_attr(field.name),
           name: text_attr(nm),
+          onChange: attrs.onChange,
           disabled: attrs.disabled,
           id: `input${text_attr(nm)}`,
           ...(isdef(v) && {
@@ -812,7 +939,7 @@ const date = {
           }),
         }),
     },
-    /** 
+    /**
      * @namespace
      * @category saltcorn-data
      * @subcategory types / date
@@ -825,6 +952,7 @@ const date = {
           class: ["form-control", cls],
           "data-fieldname": text_attr(field.name),
           name: text_attr(nm),
+          onChange: attrs.onChange,
           disabled: attrs.disabled,
           id: `input${text_attr(nm)}`,
           ...(isdef(v) && {
@@ -835,17 +963,17 @@ const date = {
         }),
     },
   },
-  /** 
-   * @namespace 
+  /**
+   * @namespace
    * @category saltcorn-data
-   * @subcategory types / date   
+   * @subcategory types / date
    */
   presets: {
     Now: () => new Date(),
   },
   /**
-   * @param {object} v 
-   * @param {object} attrs 
+   * @param {object} v
+   * @param {object} attrs
    * @returns {object}
    */
   read: (v, attrs) => {
@@ -869,7 +997,7 @@ const date = {
 
 /**
  * Boolean Type
- * @namespace 
+ * @namespace
  * @category saltcorn-data
  * @subcategory types / bool
  */
@@ -882,13 +1010,13 @@ const bool = {
    * @returns {function}
    */
   contract: () => is.bool,
-  /** 
-   * @namespace 
+  /**
+   * @namespace
    * @category saltcorn-data
    * @subcategory types / bool
    */
   fieldviews: {
-    /** 
+    /**
      * @namespace
      * @category saltcorn-data
      * @subcategory types / bool
@@ -906,8 +1034,8 @@ const bool = {
             })
           : "",
     },
-    /** 
-     * @namespace 
+    /**
+     * @namespace
      * @category saltcorn-data
      * @subcategory types / bool
      */
@@ -920,8 +1048,8 @@ const bool = {
           ? input({ type: "checkbox", disabled: true })
           : "",
     },
-    /** 
-     * @namespace 
+    /**
+     * @namespace
      * @category saltcorn-data
      * @subcategory types / bool
      */
@@ -929,8 +1057,8 @@ const bool = {
       isEdit: false,
       run: (v) => (v === true ? "True" : v === false ? "False" : ""),
     },
-    /** 
-     * @namespace 
+    /**
+     * @namespace
      * @category saltcorn-data
      * @subcategory types / bool
      */
@@ -941,14 +1069,15 @@ const bool = {
           class: ["mr-2 mt-1", cls],
           "data-fieldname": text_attr(field.name),
           type: "checkbox",
+          onChange: attrs.onChange,
           name: text_attr(nm),
           id: `input${text_attr(nm)}`,
           ...(v && { checked: true }),
           ...(attrs.disabled && { onclick: "return false;" }),
         }),
     },
-    /** 
-     * @namespace 
+    /**
+     * @namespace
      * @category saltcorn-data
      * @subcategory types / bool
      */
@@ -981,8 +1110,8 @@ const bool = {
   /** @type {object[]} */
   attributes: [],
   /**
-   * @param {*} rec 
-   * @param {string} name 
+   * @param {*} rec
+   * @param {string} name
    * @returns {boolean|null}
    */
   readFromFormRecord: (rec, name) => {
@@ -992,7 +1121,7 @@ const bool = {
     return rec[name] ? true : false;
   },
   /**
-   * @param {object} v 
+   * @param {object} v
    * @returns {boolean|null}
    */
   read: (v) => {
@@ -1007,12 +1136,12 @@ const bool = {
     }
   },
   /**
-   * @param {object} v 
+   * @param {object} v
    * @returns {object}
    */
   readFromDB: (v) => !!v,
-  /** 
-   * @param {object} v 
+  /**
+   * @param {object} v
    * @returns {object}
    */
   listAs: (v) => JSON.stringify(v),