@ditojs/admin 3.2.6 → 3.3.0

package/src/mixins/ResourceMixin.js

@@ -1,13 +1,21 @@
+import { markRaw } from 'vue'
 import ItemMixin from './ItemMixin.js'
-import LoadingMixin from './LoadingMixin.js'
 import { initializeData } from '../utils/schema/data.js'
-import { assignDeeply, isObject, isString, labelize } from '@ditojs/utils'
+import {
+  assignDeeply,
+  deprecate,
+  isObject,
+  isString,
+  labelize
+} from '@ditojs/utils'
 import { getResource } from '../utils/resource.js'
+import { transferUids } from '../utils/uid.js'
+import { LoadingTracker, LoadingSwitch } from '../utils/LoadingTracker.js'
 import DitoContext from '../DitoContext.js'
 
 // @vue/component
 export default {
-  mixins: [ItemMixin, LoadingMixin],
+  mixins: [ItemMixin],
 
   provide() {
     return {
@@ -19,9 +27,16 @@ export default {
   },
 
   data() {
+    // Tracks the pending requests of the component, see `handleRequest()`,
+    // and forwards them to the tracker of the enclosing scope, e.g. a view.
+    const loadingTracker = new LoadingTracker(this.$loadingTracker())
     return {
       loadedData: null,
-      abortController: null
+      // The abort controller of the pending data load, see `requestData()`.
+      loadAbortController: null,
+      loadingTracker: markRaw(loadingTracker),
+      // The loading operation of the deprecated `setLoading()`.
+      setLoadingSwitch: markRaw(new LoadingSwitch(loadingTracker))
     }
   },
 
@@ -36,6 +51,10 @@ export default {
       return this
     },
 
+    isLoading() {
+      return this.loadingTracker.isLoading
+    },
+
     resource() {
       return this.getResource()
     },
@@ -71,15 +90,6 @@ export default {
       )
     },
 
-    transientNote() {
-      return (
-        this.isTransient && (
-          '<b>Note</b>: the parent still needs to be saved ' +
-          'in order to persist this change.'
-        )
-      )
-    },
-
     shouldLoad() {
       return (
         !this.isTransient &&
@@ -131,7 +141,34 @@ export default {
     }
   },
 
+  unmounted() {
+    // Settle the pending data load without calling its callback, so that
+    // nothing is applied to the unmounted component. Other requests, e.g.
+    // submits, change data on the server and are completed, so that their
+    // outcome is still notified.
+    this.loadAbortController?.abort()
+    // Don't leave the enclosing scopes loading after the component is gone,
+    // see the deprecated `setLoading()`.
+    this.setLoadingSwitch.set(false)
+  },
+
   methods: {
+    /**
+     * @deprecated `isLoading` is tracked by `loadingTracker` now. Use
+     * `loadingTracker.begin()` and call the function that it returns, or
+     * `loadingTracker.track(callback)` instead.
+     */
+    setLoading(isLoading) {
+      deprecate(
+        'setLoading() is deprecated, use `loadingTracker.begin()` or ' +
+        '`loadingTracker.track()` instead.'
+      )
+      // The former `options.updateRoot` and `options.updateView` are ignored,
+      // since the tracker forwards its operations to the trackers of the
+      // enclosing view and the root anyway.
+      this.setLoadingSwitch.set(isLoading)
+    },
+
     getResource({ method = 'get', child } = {}) {
       // Returns the resource object representing the resource for the
       // associated source schema.
@@ -212,36 +249,50 @@ export default {
 
     requestData() {
       const query = this.queryParams
-      this.handleRequest({ method: 'get', query }, (err, response) => {
-        if (err) {
-          if (response) {
-            const { data } = response
-            if (
-              data?.type === 'FilterValidation' &&
-              this.onFilterErrors?.(data.errors)
-            ) {
-              return true
-            } else if (
-              this.isUnauthorizedError(response) &&
-              this.isInsideForm
-            ) {
-              // The user is logged in, see `sendRequest()`, but may not access
-              // the resource of a component in a form, e.g. a list that loads
-              // its own data. Show it on the component, as several components
-              // of the form may be affected. Others notify like for errors.
-              this.addUnauthorizedError()
-              return true
+      return this.handleRequest(
+        { method: 'get', query, isDataLoad: true },
+        async (err, response) => {
+          if (err) {
+            if (response) {
+              const { data } = response
+              if (
+                data?.type === 'FilterValidation' &&
+                this.onFilterErrors?.(data.errors)
+              ) {
+                return true
+              } else if (
+                this.isUnauthorizedError(response) &&
+                this.isInsideForm
+              ) {
+                // The user is logged in, see `sendRequest()`, but may not
+                // access the resource of a component in a form, e.g. a list
+                // that loads its own data. Show it on the component, as
+                // several components of the form may be affected. Others
+                // notify like for errors.
+                this.addUnauthorizedError()
+                return true
+              }
             }
+          } else {
+            // Skip applying response data on a dirty form: `setData` would
+            // wholesale-replace `loadedData` and clobber any local edits the
+            // user made while the GET was in flight. The `'load'` event still
+            // fires — the GET *did* complete; we just chose not to apply it.
+            if (!(this.isForm && this.isDirty)) {
+              this.setData(response.data)
+            }
+            // Await the handlers, so that their errors are notified below.
+            await this.emitSchemaEvent('load')
           }
-        } else {
-          // Skip applying response data on a dirty form: `setData` would
-          // wholesale-replace `loadedData` and clobber any local edits the
-          // user made while the GET was in flight. The `'load'` event still
-          // fires — the GET *did* complete; we just chose not to apply it.
-          if (!(this.isForm && this.isDirty)) {
-            this.setData(response.data)
-          }
-          this.emitSchemaEvent('load')
+        }
+      ).catch(error => {
+        // Notify the errors thrown while applying the loaded data, e.g. by
+        // `setData()` or the `'load'` event handlers, which the emitter
+        // aggregates, like request errors. Aborted loads don't call the
+        // callback, see `handleRequest()`.
+        const errors = error instanceof AggregateError ? error.errors : [error]
+        for (const err of errors) {
+          this.notifyRequestError(err)
         }
       })
     },
@@ -261,52 +312,73 @@ export default {
       }
     },
 
+    // Sends the request and awaits `callback(error, response)` with its
+    // outcome. If the callback returns `true` for an error, the error was
+    // handled, otherwise it is notified. Errors that the callback throws are
+    // passed on to the caller. Aborted requests settle without calling the
+    // callback: Each data load aborts the previous one, see `requestData()`,
+    // and unmounting aborts the pending one. Other requests, e.g. submits,
+    // aren't aborted.
     async handleRequest(
       {
         method,
         resource = this.getResource({ method }),
         query,
-        data
+        data,
+        isDataLoad = false
       },
       callback
     ) {
-      const loadingOptions = {
-        updateRoot: true, // Display spinner in header when loading in resources
-        updateView: this.isInView // Notify view of loading for view components
-      }
-      this.abortController?.abort()
       const controller = new AbortController()
-      this.abortController = controller
-      const { signal } = controller
+      if (isDataLoad) {
+        this.loadAbortController?.abort()
+        this.loadAbortController = controller
+      }
+      const endLoading = this.loadingTracker.begin()
       method = resource.method || method
-      const request = { method, resource, query, data, signal }
-      this.setLoading(true, loadingOptions)
+      let response = null
+      let error = null
       try {
-        const response = await this.sendRequest(request)
-        // Pass both request and response to the callback, so they can be
-        // exposed to further callbacks through DitoContext.
-        callback(null, response)
-      } catch (error) {
-        if (error.name !== 'AbortError') {
-          // If callback returns true, errors were already handled.
-          const { response } = error
-          if (!callback(error, response)) {
-            const data = response?.data
-            const title = isString(data?.type)
-              ? labelize(data.type)
-              : 'Error'
-            const text = data?.message ?? error
-            this.notify({ type: 'error', error, title, text })
-          }
+        response = await this.sendRequest({
+          method,
+          resource,
+          query,
+          data,
+          signal: controller.signal
+        })
+      } catch (err) {
+        error = err
+      } finally {
+        if (this.loadAbortController === controller) {
+          this.loadAbortController = null
         }
+        endLoading()
       }
-      if (this.abortController === controller) {
-        // Only clear the loading state if this is still the current request.
-        this.abortController = null
-        this.setLoading(false, loadingOptions)
+      if (controller.signal.aborted || error?.name === 'AbortError') {
+        return
+      }
+      if (error) {
+        const { response } = error
+        // If the callback returns true, the error was already handled.
+        if (!(await callback(error, response))) {
+          this.notifyRequestError(error)
+        }
+      } else {
+        // Pass both request and response to the callback, so they can be
+        // exposed to further callbacks through DitoContext.
+        await callback(null, response)
       }
     },
 
+    // Notifies the error with the type and message of the response data of
+    // request errors, see `RequestError`, or else the error itself.
+    notifyRequestError(error) {
+      const data = error?.response?.data
+      const title = isString(data?.type) ? labelize(data.type) : 'Error'
+      const text = data?.message ?? error
+      this.notify({ type: 'error', error, title, text })
+    },
+
     getPayloadData(button, method) {
       // Convention: only post, put and patch requests pass the data as payload.
       return (
@@ -356,50 +428,49 @@ export default {
           ]
         })
     } = {}) {
-      return new Promise(resolve => {
-        this.handleRequest(
-          { method, resource, data },
-          async (err, response) => {
-            const data = response?.data
-            if (err) {
-              // See if we're dealing with a Dito.js validation error:
-              const errors = this.isValidationError(response) && data.errors
-              if (errors) {
-                await this.showValidationErrors(errors, true)
-              } else {
-                const error = isObject(data) ? data : err
-                onError?.(error)
-                await this.emitButtonEvent(button, 'error', {
-                  notify: notifyError,
-                  error
-                })
-              }
-              resolve(false)
+      // Resolves to `false` for errors.
+      let isSuccessful = false
+      await this.handleRequest(
+        { method, resource, data },
+        async (err, response) => {
+          const data = response?.data
+          if (err) {
+            // See if we're dealing with a Dito.js validation error:
+            const errors = this.isValidationError(response) && data.errors
+            if (errors) {
+              await this.showValidationErrors(errors, true)
             } else {
-              // Update the underlying data before calling `notify()` or
-              // `this.itemLabel`, so id is set after creating new items.
-              if (setData && data) {
-                // Preserve the foreign data entries when updating the data.
-                const { foreignData } = this.mainSchemaComponent.filterData(
-                  this.data
-                )
-                // Tell the parent route to reload its data, so that it can
-                // update its foreign data entries.
-                const parentMeta = this.parentRouteComponent?.routeRecord?.meta
-                if (parentMeta) {
-                  parentMeta.reload = true
-                }
-                this.setData(assignDeeply({}, foreignData, data))
-              }
-              onSuccess?.()
-              await this.emitButtonEvent(button, 'success', {
-                notify: notifySuccess
+              const error = isObject(data) ? data : err
+              onError?.(error)
+              await this.emitButtonEvent(button, 'error', {
+                notify: notifyError,
+                error
               })
-              resolve(true)
             }
+            return true // The error was handled.
+          } else {
+            // Update the underlying data before calling `notify()` or
+            // `this.itemLabel`, so id is set after creating new items.
+            if (setData && data) {
+              // Preserve the foreign data entries when updating the data.
+              const { foreignData } = this.mainSchemaComponent.filterData(
+                this.data
+              )
+              const savedData = assignDeeply({}, foreignData, data)
+              // Keep the uids of new items, which key their components and
+              // stores, see `transferUids()`.
+              transferUids(this.data, savedData)
+              this.setData(savedData)
+            }
+            onSuccess?.()
+            await this.emitButtonEvent(button, 'success', {
+              notify: notifySuccess
+            })
+            isSuccessful = true
           }
-        )
-      })
+        }
+      )
+      return isSuccessful
     },
 
     async emitButtonEvent(button, event, { notify, error }) {

package/src/mixins/RouteMixin.js

@@ -1,6 +1,7 @@
 import ValidatorMixin from '../mixins/ValidatorMixin.js'
 import { markRaw } from 'vue'
-import { getCommonPrefix } from '@ditojs/utils'
+import { isPathWithin } from '../utils/route.js'
+import { confirm } from '../utils/dialogs.js'
 
 // @vue/component
 export default {
@@ -14,15 +15,23 @@ export default {
 
   data() {
     return {
-      reload: false,
       // The record of the route that this component renders, see the
       // `matchedRouteRecord` watcher:
       routeRecord: null,
+      // Whether leaving the route was prevented because the data is invalid,
+      // so that the next attempt can leave, see `beforeRouteChange()`:
+      hasPreventedLeavingInvalidData: false,
+      // The pending confirmation to discard the unsaved changes, shared by the
+      // navigations that happen while its dialog is open, e.g. through the
+      // browser's back button, see `beforeRouteChange()`:
+      discardConfirmation: null,
       // Each route-component defines a store that gets passed on to its
       // child components, so they can store values in them that live beyond
       // their life-cycle. See: DitoPane, SourceMixin
       store: {},
-      loadCache: {} // See TypeMixin.load()
+      // The responses of `request({ cache: 'local' })` of the components that
+      // the route component renders, released with it, see `DitoMixin`.
+      loadCache: {}
     }
   },
 
@@ -116,6 +125,13 @@ export default {
     // @overridable, see DitoForm
     isMutating() {
       return false
+    },
+
+    // Whether the component has changes that get lost when it's left, see
+    // `beforeRouteChange()` and `DitoRoot`. Directly mutating forms aren't
+    // dirty, as their parent's data keeps the changes, see `DitoForm.isDirty`.
+    hasUnsavedChanges() {
+      return this.isDirty
     }
   },
 
@@ -144,62 +160,69 @@ export default {
     }
   },
 
+  // NOTE: vue-router binds the guards to the record's instance only when it
+  // calls them, after the previous guards, which may have unmounted it in the
+  // meantime. There's nothing left to guard then.
   beforeRouteUpdate(to, from) {
-    return this?.beforeRouteChange(to, from)
+    return this ? this.beforeRouteChange(to, from) : true
   },
 
   beforeRouteLeave(to, from) {
-    return this?.beforeRouteChange(to, from)
+    return this ? this.beforeRouteChange(to, from) : true
   },
 
   created() {
-    // Keep a shared stack of root components for DitoTrail to use to render
-    // labels. Can't rely on $route.matched[i].instances.default unfortunately,
-    // as instances aren't immediately ready, and instances is not reactive.
-    this.appState.routeComponents.push(this)
+    // Register in the shared route components by route level, for DitoTrail to
+    // render the labels. Can't rely on `$route.matched[i].instances.default`
+    // unfortunately, as instances aren't immediately ready, and `instances` is
+    // not reactive. Components of new routes replace the ones of the previous
+    // routes at their level, which are unmounted after, see `unmounted()`.
+    this.appState.routeComponents[this.routeLevel] = this
   },
 
   unmounted() {
     const { routeComponents } = this.appState
-    routeComponents.splice(routeComponents.indexOf(this), 1)
+    if (routeComponents[this.routeLevel] === this) {
+      // Also drop the deeper levels, which aren't replaced by those of a new
+      // route either, as their components are unmounted before their parents.
+      routeComponents.length = this.routeLevel
+    }
   },
 
   methods: {
-    beforeRouteChange(to, from) {
+    async beforeRouteChange(to, from) {
       let ok = true
       const isClosing = (
         // Only handle this route change if the form is actually mapped to the
-        // `from` route, but include parent forms of closing nested forms as as
-        // well, by matching the the start of from/to path against `this.path`:
-        from.path.startsWith(this.path) &&
-        !to.path.startsWith(this.path) &&
-        // Exclude hash changes only (= tab changes):
-        from.path !== to.path && (
-          this.isFullRouteChange(to, from) ||
-          // Decide if we're moving towards a new nested form, or closing /
-          // replacing an already open one by comparing path lengths.
-          // The case of `=` matches the replacing of an already open one.
-          to.path.length <= from.path.length
-        )
+        // `from` route, but include parent forms of closing nested forms as
+        // well, by matching the from/to paths against `this.path`. Hash changes
+        // only (= tab changes) and nested forms that open stay within it, while
+        // other items, e.g. `/items/12` for `/items/1`, are outside of it.
+        isPathWithin(from.path, this.path) &&
+        !isPathWithin(to.path, this.path)
       )
       if (isClosing) {
         if (this.isMutating) {
-          // For active directly mutating (nested) forms that were not validated
-          // yet, validate them once. If the user then still wants to leave
-          // them, they can click close / navigate away again.
-          ok = (
-            this.isValidated ||
-            this.validateAll()
-          )
+          // Directly mutating (nested) forms validate their data once, which
+          // includes the fields that aren't mounted, e.g. in collapsed
+          // schemas. If the user then still wants to leave them, they can
+          // click close / navigate away again.
+          ok = this.hasPreventedLeavingInvalidData || this.validateAll()
+          this.hasPreventedLeavingInvalidData = !ok
         } else {
-          // The form doesn't directly mutate data. If it is dirty, ask if user
-          // wants to persist data first.
-          if (this.isDirty) {
-            ok = window.confirm(
-              `You have unsaved changes. Do you really want to ${
-                this.verbs.cancel
-              }?`
-            )
+          // The form or view doesn't directly mutate data. If it has unsaved
+          // changes, ask if the user wants to persist the data first.
+          if (this.hasUnsavedChanges) {
+            this.discardConfirmation ??= confirm(this, {
+              message: (
+                'You have unsaved changes. ' +
+                `Do you really want to ${this.verbs.cancel}?`
+              ),
+              verb: 'discard'
+            }).finally(() => {
+              this.discardConfirmation = null
+            })
+            ok = await this.discardConfirmation
           }
         }
       }
@@ -221,12 +244,6 @@ export default {
 
     getChildPath(path) {
       return `${this.path}/${path}`
-    },
-
-    isFullRouteChange(to, from) {
-      // The route path is the path up to the first / (excluding the initial /):
-      const rootPath = this.path.match(/^(\/[^/]*)/)[1]
-      return !getCommonPrefix(to.path, from.path).startsWith(rootPath)
     }
   }
 }

package/src/mixins/SchemaParentMixin.js

@@ -26,7 +26,10 @@ export default {
       if (add) {
         schemaComponents.push(schemaComponent)
       } else {
-        schemaComponents.splice(schemaComponents.indexOf(schemaComponent), 1)
+        const index = schemaComponents.indexOf(schemaComponent)
+        if (index >= 0) {
+          schemaComponents.splice(index, 1)
+        }
       }
     }
   }