sdc_client 0.158.8 → 0.159.0

package/src/simpleDomControl/sdc_dom_events.js

@@ -15,7 +15,6 @@ function checkIfEventFits(ev_type, e, target) {
         target !== elementUnderMouse && !target.contains(elementUnderMouse)
       );
     case "mouseenter":
-    case "mousein":
       elementUnderMouse = document.elementFromPoint(e.clientX, e.clientY);
       return (
         target !== elementUnderMouse && !target.contains(elementUnderMouse)
@@ -28,7 +27,7 @@ function checkIfEventFits(ev_type, e, target) {
 export function windowEventHandler(event) {
   let ev_type = event.type;
   if (
-    event.hasOwnProperty("namespace") &&
+    Object.hasOwn(event, "namespace") &&
     event.namespace &&
     event.namespace.length
   )
@@ -97,16 +96,12 @@ export function initEvents() {
  * @param {AbstractSDC} controller
  */
 export function setControllerEvents(controller) {
-  if (controller._isEventsSet) {
-    return;
-  }
-
   const events = controller.getEvents();
   for (let ev_type in events) {
-    if (events.hasOwnProperty(ev_type)) {
+    if (Object.hasOwn(events, ev_type)) {
       let eventList = events[ev_type];
       for (let domSelector in eventList) {
-        if (eventList.hasOwnProperty(domSelector)) {
+        if (Object.hasOwn(eventList, domSelector)) {
           controller.find(domSelector).each(function () {
             let $elements = $(this);
             let event_list = $elements.attr(`sdc_${ev_type}`) || null;
@@ -122,6 +117,6 @@ export function setControllerEvents(controller) {
       }
     }
   }
-  // TODO: Is it needed
-  //controller._isEventsSet = true;
+  // Not cached on purpose: a refresh can add new elements that match the selectors,
+  // so the attributes are set again on every refresh (existing entries are skipped).
 }

package/src/simpleDomControl/sdc_events.js

@@ -23,7 +23,7 @@ let eventList = {};
  */
 export function on(name, controller) {
   setEvent(name);
-  if (!eventList.hasOwnProperty(name)) {
+  if (!Object.hasOwn(eventList, name)) {
     return console.log("No event: " + name, controller);
   }
 
@@ -61,7 +61,7 @@ export function setEvent(name, functionName) {
  */
 export function allOff(controller) {
   for (let eventName in handlerList) {
-    if (handlerList.hasOwnProperty(eventName)) {
+    if (Object.hasOwn(handlerList, eventName)) {
       for (let i = handlerList[eventName].length - 1; i >= 0; i--) {
         if (controller === handlerList[eventName][i]) {
           handlerList[eventName].splice(i, 1);
@@ -82,7 +82,7 @@ export function allOff(controller) {
 export function trigger(name) {
   let args = Array.apply(null, arguments);
   name = args.shift();
-  if (!handlerList.hasOwnProperty(name) || !eventList.hasOwnProperty(name)) {
+  if (!Object.hasOwn(handlerList, name) || !Object.hasOwn(eventList, name)) {
     return promiseDummyFactory();
   }
   let handler = handlerList[name];

package/src/simpleDomControl/sdc_main.js

@@ -47,7 +47,10 @@ let sdcDomFragment = function (element, props) {
   if (props) {
     Object.entries(props).forEach(([k, v]) => {
       if (k.startsWith("on")) {
-        $new_elem[0].addEventListener(k.substring(2).toLowerCase(), v);
+        const type = k.substring(2).toLowerCase();
+        $new_elem[0].addEventListener(type, v);
+        // Remembered so reconcile() can move the listeners to a node it keeps.
+        ($new_elem[0]._sdcListeners ??= []).push([type, v]);
       } else {
         if (PROPERTIES_UPDATE[k.toLowerCase()]) {
           k = PROPERTIES_UPDATE[k.toLowerCase()];
@@ -75,6 +78,14 @@ window.sdcDom = function (tagName, props, ...children) {
   return $new_elem;
 };
 
+const redirector = (a) => {
+  if (a["url-link"]) {
+    trigger("onNavLink", a["url-link"]);
+  } else {
+    window.location.href = a["url"];
+  }
+};
+
 export let app = {
   CSRF_TOKEN: window.CSRF_TOKEN || "",
   LANGUAGE_CODE: window.LANGUAGE_CODE || "en",
@@ -87,6 +98,7 @@ export let app = {
   _isInit: false,
   _origin_trigger: null,
   _globalControllerClasses: [],
+  _createdGlobals: [],
 
   init_sdc: () => {
     if (!app._isInit) {
@@ -119,8 +131,12 @@ export let app = {
 
     app.tagNames = tagList();
 
+    // Global controllers are created only once, even if init_sdc() is called again.
+    const newGlobals = Global.filter((tagName) => !app._createdGlobals.includes(tagName));
+    app._createdGlobals.push(...newGlobals);
+
     const $globalDiv = $("<div></div>");
-    Global.forEach((tagName) => {
+    newGlobals.forEach((tagName) => {
       const ControllerClass = controllerList[tagName][0];
       $globalDiv.append(
         `<${ControllerClass.prototype._tagName}></${ControllerClass.prototype._tagName}>`,
@@ -169,9 +185,12 @@ export let app = {
    * @param {AbstractSDC} Controller
    */
   registerGlobal: (Controller) => {
-    app.register(Controller);
+    const registration = app.register(Controller);
     let tagName = Controller.prototype._tagName;
-    Global.push(tagName);
+    if (!Global.includes(tagName)) {
+      Global.push(tagName);
+    }
+    return registration;
   },
 
   cleanCache: () => {
@@ -260,14 +279,23 @@ export let app = {
         .then((a, b, c) => {
           resolve(a, b, c);
           if (a.status === "redirect") {
-            trigger("onNavLink", a["url-link"]);
+            redirector(a);
           } else {
             p.then(() => {
               app.refresh(controller.$container);
             });
           }
         })
-        .catch(reject);
+        .catch((a, b, c) => {
+          // send_redirect() answers with HTTP 301 and the redirect in the JSON body.
+          if (a.status === 301 && a.responseJSON) {
+            a = a.responseJSON;
+            redirector(a);
+            resolve(a, b, c);
+          } else {
+            reject(a, b, c);
+          }
+        });
     });
 
     return p;
@@ -275,13 +303,6 @@ export let app = {
 
   submitFormAndUpdateView: (controller, form, url, method) => {
     let formData = new FormData(form);
-    const redirector = (a) => {
-      if (a["url-link"]) {
-        trigger("onNavLink", a["url-link"]);
-      } else {
-        window.location.href = a["url"];
-      }
-    };
 
     const p = new Promise((resolve, reject) => {
       uploadFileFormData(formData, url || form.action, method || form.method)

package/src/simpleDomControl/sdc_model.js

@@ -1,4 +1,4 @@
-import { getValueFromField, setValueInField, uuidv4 } from "./sdc_utils.js";
+import { formatDate, getValueFromField, setValueInField, toDate, uuidv4 } from "./sdc_utils.js";
 import { getModel } from "./sdc_socket.js"
 import { app } from "./sdc_main.js";
 import { trigger } from "./sdc_events.js";
@@ -6,11 +6,15 @@ import { trigger } from "./sdc_events.js";
 const MAX_FILE_UPLOAD = 25000;
 const CONNECTING_REQUEST_ID = "_connecting_process";
 
-const cloneObject = (original) => {
-  return Object.assign(
-    Object.create(Object.getPrototypeOf(original)),
-    structuredClone(original)
-  );
+/**
+ * Copy a model instance for another queryset. A new instance of the same class is
+ * created from the serialized field values (structuredClone cannot copy the
+ * WeakRef/Proxy members of a model).
+ */
+const cloneModel = (original) => {
+  const copy = new original.constructor({});
+  copy.setValues(original.serialize());
+  return copy;
 }
 
 class SdcModelError extends Error {
@@ -82,6 +86,29 @@ function normalizePk(pk) {
   return Number.isNaN(normalizedPk) ? -1 : normalizedPk;
 }
 
+/**
+ * Decide whether an argument of `create()` is an options object
+ * (`{elem, data}`) or the data itself. It is treated as options if it is
+ * a non-empty plain object whose keys are only `elem` and/or `data`, and
+ * `elem` (if present) is an SdcModel.
+ *
+ * @param {*} arg
+ * @returns {boolean}
+ */
+function isCreateOptions(arg) {
+  if (!arg || typeof arg !== "object" || arg instanceof SdcModel) {
+    return false;
+  }
+  const keys = Object.keys(arg);
+  if (keys.length === 0 || !keys.every((k) => k === "elem" || k === "data")) {
+    return false;
+  }
+  if ("elem" in arg && arg.elem !== null && !(arg.elem instanceof SdcModel)) {
+    return false;
+  }
+  return !("data" in arg) || arg.data === null || typeof arg.data === "object";
+}
+
 export class SdcQuerySet {
   /**
    * Lightweight client-side collection wrapper around the SDC model websocket.
@@ -109,6 +136,9 @@ export class SdcQuerySet {
     };
     this.onCreate = () => {
     };
+    // Called with the removed models when rows of this queryset are deleted on the
+    // server. If not set, onUpdate is called instead.
+    this.onDelete = null;
 
     return new Proxy(this, {
       get(target, prop) {
@@ -150,6 +180,22 @@ export class SdcQuerySet {
     this.onUpdate = handler;
   }
 
+  set on_delete(handler) {
+    this.onDelete = handler;
+  }
+
+  /**
+   * Remove the models with the given ids from the local list.
+   *
+   * @param {Array<number>} ids
+   * @returns {Array<SdcModel>} the removed models
+   */
+  _removeIds(ids) {
+    const removed = this.valuesList.filter((item) => ids.includes(item.id));
+    this.valuesList = this.valuesList.filter((item) => !ids.includes(item.id));
+    return removed;
+  }
+
   /**
    *
    *
@@ -169,19 +215,25 @@ export class SdcQuerySet {
    *
    *
    * @param {Array<integr|string>|integer|SdcModel|SdcQuerySet|string} ids
-   */cloneObject
+   */
   _setIds(ids) {
 
     if (ids === null || ids === "" || Array.isArray(ids) && ids.length === 0) {
       this.valuesList = [];
       return this.valuesList;
-    } else if (ids instanceof SdcQuerySet) {
-      this.valuesList = ids.valuesList.map(cloneObject);
-      this.valuesList.forEach(value => value._setQuerySet(this, true));
-      return this.valuesList;
-    } else if (ids instanceof SdcModel) {
-      this.valuesList = [cloneObject(ids)];
-      this.valuesList.forEach(value => value._setQuerySet(this, true));
+    } else if (ids instanceof SdcQuerySet || ids instanceof SdcModel) {
+      // Models already in this queryset are kept (so references to them stay valid);
+      // other models are copied into it.
+      const sources = ids instanceof SdcModel ? [ids] : ids.valuesList;
+      this.valuesList = sources.map((source) => {
+        const existing = source.id !== null ? this.byId(source.id) : null;
+        if (existing) {
+          return existing;
+        }
+        const copy = cloneModel(source);
+        copy._setQuerySet(this, true);
+        return copy;
+      });
       return this.valuesList;
     }
 
@@ -327,7 +379,10 @@ export class SdcQuerySet {
           }),
         );
 
-        this.openRequest[event_id] = [resolve, reject];
+        this.openRequest[event_id] = [(res) => {
+          this._removeIds([normalizePk(pk)]);
+          resolve(res);
+        }, reject];
       });
     });
   }
@@ -638,12 +693,24 @@ export class SdcQuerySet {
   }
 
   /**
+   * Create a new instance in the DB.
    *
-   * @param elem {?SdcModel}
-   * @param data {?object}
+   * @param {{elem?: SdcModel, data?: object} | object} arg
+   *   Either an options object containing `elem` and/or `data`,
+   *   or `data` directly.
+   *
+   * @example
+   * create({ elem, data });
+   * create({ elem });
+   * create(data);
    * @returns {Promise<unknown>}
    */
-  create({ elem = null, data = null } = {}) {
+  create(arg = null) {
+    let { elem = null, data = null } = isCreateOptions(arg) ? arg : { data: arg };
+    if (data && typeof data === "object" && Object.keys(data).length === 0) {
+      data = null;
+    }
+
     const event_id = uuidv4();
     if (!elem) {
       elem = this.new(data);
@@ -758,43 +825,47 @@ export class SdcQuerySet {
       const value = elem[key];
       if (value instanceof File) {
         toSolve.push(
-          new Promise(async (resolve, reject) => {
+          new Promise((resolve, reject) => {
             const event_id = uuidv4();
             this.openRequest[event_id] = [resolve, reject];
 
-            const buffer = await value.arrayBuffer();
-            let result = new Uint8Array(buffer);
-            let numberOfChunks = Math.ceil(result.length / MAX_FILE_UPLOAD);
-            files[key] = {
-              id: event_id,
-              file_name: value.name,
-              field_name: key,
-              content_length: value.size,
-            };
-            for (let i = 0; i < numberOfChunks; ++i) {
-              const chunk = Array.from(result.slice(
-                MAX_FILE_UPLOAD * i,
-                MAX_FILE_UPLOAD * (i + 1),
-              ));
-              this.socket.send(
-                JSON.stringify({
-                  event: "model",
-                  event_type: "upload",
-                  event_id,
-                  args: {
-                    chunk,
-                    idx: i,
-                    number_of_chunks: numberOfChunks,
-                    file_name: value.name,
-                    field_name: key,
-                    content_length: value.size,
-                    content_type: value.type,
-                    model_name: this.modelName,
-                    model_query: this.modelQuery,
-                  },
-                }),
-              );
-            }
+            value.arrayBuffer().then((buffer) => {
+              let result = new Uint8Array(buffer);
+              let numberOfChunks = Math.ceil(result.length / MAX_FILE_UPLOAD);
+              files[key] = {
+                id: event_id,
+                file_name: value.name,
+                field_name: key,
+                content_length: value.size,
+              };
+              for (let i = 0; i < numberOfChunks; ++i) {
+                const chunk = Array.from(result.slice(
+                  MAX_FILE_UPLOAD * i,
+                  MAX_FILE_UPLOAD * (i + 1),
+                ));
+                this.socket.send(
+                  JSON.stringify({
+                    event: "model",
+                    event_type: "upload",
+                    event_id,
+                    args: {
+                      chunk,
+                      idx: i,
+                      number_of_chunks: numberOfChunks,
+                      file_name: value.name,
+                      field_name: key,
+                      content_length: value.size,
+                      content_type: value.type,
+                      model_name: this.modelName,
+                      model_query: this.modelQuery,
+                    },
+                  }),
+                );
+              }
+            }).catch((err) => {
+              this._closeOpenRequest(event_id);
+              reject(err);
+            });
           }),
         );
       }
@@ -814,7 +885,7 @@ export class SdcQuerySet {
   async _onMessage(e) {
     let data = JSON.parse(e.data);
     if (data.is_error) {
-      if (this.openRequest.hasOwnProperty(data.event_id)) {
+      if (Object.hasOwn(this.openRequest, data.event_id)) {
         this.openRequest[data.event_id][1](new SdcModelError(data));
         this._closeOpenRequest(data.event_id);
       }
@@ -838,7 +909,7 @@ export class SdcQuerySet {
         this._isConnectingProcess = false;
         this.openRequest[CONNECTING_REQUEST_ID][0](data);
         this._closeOpenRequest(CONNECTING_REQUEST_ID);
-      } else if (["load", "named_view", "detail_view"].includes(data.type)) {
+      } else if (["load", "list_view", "named_view", "detail_view"].includes(data.type)) {
         const jsonRes = JSON.parse(data.args.data);
         data.args.data = await this._parseServerRes(jsonRes);
       } else if (data.type === "on_update" || data.type === "on_create") {
@@ -855,6 +926,11 @@ export class SdcQuerySet {
 
         cb(obj);
         data.args.data = obj;
+      } else if (data.type === "on_delete") {
+        const ids = JSON.parse(data.args.data).map((x) => normalizePk(x.id ?? x.pk));
+        const removed = this._removeIds(ids);
+        (this.onDelete ?? this.onUpdate)(removed);
+        data.args.data = removed;
       }
 
       let instance = data.data?.instance;
@@ -862,7 +938,7 @@ export class SdcQuerySet {
         data.data.instance = JSON.parse(data.data.instance);
       }
 
-      if (this.openRequest.hasOwnProperty(data.event_id)) {
+      if (Object.hasOwn(this.openRequest, data.event_id)) {
         this.openRequest[data.event_id][0](data);
         this._closeOpenRequest(data.event_id);
       }
@@ -924,14 +1000,17 @@ export class SdcQuerySet {
           `SDC Model (${this.modelName}, ${this.modelId}) Socket closed unexpectedly`,
         );
         this._isConnected = false;
-        for (const [_key, value] of Object.entries(this.openRequest)) {
+        for (const value of Object.values(this.openRequest)) {
           value[1](e);
         }
         this.openRequest = {};
 
+        this._isConnectingProcess = false;
         setTimeout(() => {
-          if (this._autoReconnect) {
-            this._connectToServer().then(() => {
+          if (this._autoReconnect && !this._isConnected) {
+            // isConnected() opens the socket and sends the connect handshake, so
+            // live updates work again and later requests reuse this connection.
+            this.isConnected().catch(() => {
             });
           }
         }, 1000);
@@ -1028,11 +1107,12 @@ export default class SdcModel {
    * @returns {SdcQuerySet}
    */
   static querySet(modelQuerySet = null, parent = null) {
+    const { modelName } = new this({});
     if (!parent) {
-      return new SdcQuerySet(this.modeName, modelQuerySet);
+      return new SdcQuerySet(modelName, modelQuerySet);
     }
 
-    return parent.querySet(this.modeName, modelQuerySet);
+    return parent.querySet(modelName, modelQuerySet);
   }
 
   addForm($form) {
@@ -1054,15 +1134,25 @@ export default class SdcModel {
   _onChange(event) {
     const { name } = event.target;
     if (this.constructor.fields[name]) {
-      this[`set${name}`](getValueFromField(event.target));
+      try {
+        this[`set${name}`](getValueFromField(event.target));
+      } catch {
+        // Invalid input (e.g. an empty required field) is kept in the form and
+        // validated by the server on submit.
+        return;
+      }
+      // Show the new value in the other forms of this model, not in the input being edited.
+      this._updateForm(name, event.target);
     }
   }
 
-  _updateForm(fieldName) {
+  _updateForm(fieldName, skipElement = null) {
     const self = this;
     this._forms.forEach(($form) => {
       $form.find(`[name="${fieldName}"]`).each(function () {
-        setValueInField(this, self[fieldName])
+        if (this !== skipElement) {
+          setValueInField(this, self[fieldName]);
+        }
       });
     });
   }
@@ -1090,7 +1180,15 @@ export default class SdcModel {
     return this._querySet.deref().save({ pk: this.id, formName, data });
   }
 
-  create({ data = null } = {}) {
+  /**
+   * Create this instance in the DB.
+   *
+   * @param {{data?: object} | object | null} values
+   *   Either `{ data }` or `data` directly.
+   * @returns {Promise<unknown>}
+   */
+  create(values = null) {
+    const data = isCreateOptions(values) ? (values.data ?? null) : values;
     return this._querySet.deref().create({ elem: this, data });
   }
 
@@ -1159,6 +1257,9 @@ export default class SdcModel {
         }
       } else if (val.is_relation && value instanceof SdcModel) {
         acc[key] = value.id ?? null;
+      } else if (value instanceof Date) {
+        // Django's DateField does not accept a full ISO datetime.
+        acc[key] = val.type === "DateField" ? formatDate(value) : value.toISOString();
       } else {
         acc[key] = value;
       }
@@ -1219,15 +1320,16 @@ export default class SdcModel {
     $forms = this._resolveForms($forms);
 
     const self = this;
-    const fields = this.constructor.fields;
+    const { fields } = this.constructor;
     $forms.each(function () {
       const pk = normalizePk($(this).data("model_pk"));
-      if (self.id !== pk) {
+      // Create forms carry model_pk -1 while the new model's id is still null.
+      if (normalizePk(self.id) !== pk) {
         return;
       }
 
       for (let formItem of this.elements) {
-        let name = formItem.name;
+        let { name } = formItem;
         if (name && name !== "" && !!fields[name]) {
           setValueInField(formItem, self[name])
         }
@@ -1247,12 +1349,17 @@ export default class SdcModel {
     $forms = this._resolveForms($forms);
 
     const self = this;
-    const fields = this.constructor.fields;
+    const { fields } = this.constructor;
     const returnValue = {}
 
     function setValueInForm(name, value) {
-      if (!!fields[name]) {
-        self[name] = value;
+      if (fields[name]) {
+        try {
+          self[name] = value;
+        } catch {
+          // Invalid values are still sent to the server, which returns the form
+          // errors; the model keeps its last valid value.
+        }
       }
       returnValue[name] = value;
     }
@@ -1387,14 +1494,21 @@ export default class SdcModel {
 
     switch (type) {
       case "CharField":
-      case "TeextField":
+      case "TextField":
+      case "SlugField":
       case "UUIDField":
       case "EmailField":
         return `${value}`;
 
       case "IntegerField":
-      case "AutoField":
+      case "SmallIntegerField":
       case "BigIntegerField":
+      case "PositiveIntegerField":
+      case "PositiveSmallIntegerField":
+      case "PositiveBigIntegerField":
+      case "AutoField":
+      case "SmallAutoField":
+      case "BigAutoField":
         return parseInt(value, 10);
 
       case "FloatField":
@@ -1406,7 +1520,7 @@ export default class SdcModel {
 
       case "DateField":
       case "DateTimeField":
-        return Date.parse(value);
+        return toDate(value);
 
       case "URLField":
         return new URL(value);
@@ -1429,14 +1543,7 @@ export default class SdcModel {
         }
 
         if (typeof File !== "undefined" && value instanceof File) {
-          if (config.max_size && value.size > config.max_size) {
-            return `File too large (max ${config.max_size} bytes)`;
-          }
-
-          if (config.allowed_types && !config.allowed_types.includes(value.type)) {
-            return `Invalid file type (${value.type})`;
-          }
-
+          // Size and type are checked in validate().
           return value;
         }
         break;
@@ -1518,8 +1625,14 @@ function validateField(value, config) {
       break;
 
     case "IntegerField":
-    case "AutoField":
+    case "SmallIntegerField":
     case "BigIntegerField":
+    case "PositiveIntegerField":
+    case "PositiveSmallIntegerField":
+    case "PositiveBigIntegerField":
+    case "AutoField":
+    case "SmallAutoField":
+    case "BigAutoField":
       if (!isFinite(parseInt(value))) {
         return "Must be an integer";
       }
@@ -1566,14 +1679,26 @@ function validateField(value, config) {
       break;
 
     case "JSONField":
-      if (typeof value !== "object") {
-        return "Must be JSON object";
+      if (typeof value === "string") {
+        try {
+          JSON.parse(value);
+        } catch {
+          return "Must be valid JSON";
+        }
       }
       break;
     case "FileField":
       if (!FileLoaded.isValid(value) && !(value instanceof File) && !(value instanceof FileLoaded)) {
         return "Must be a valid file";
       }
+      if (typeof File !== "undefined" && value instanceof File) {
+        if (config.max_size && value.size > config.max_size) {
+          return `File too large (max ${config.max_size} bytes)`;
+        }
+        if (config.allowed_types && !config.allowed_types.includes(value.type)) {
+          return `Invalid file type (${value.type})`;
+        }
+      }
       break;
     default:
       break;