@radio-garden/ditojs-admin 2.85.2-0.5067ad799

package/src/mixins/ResourceMixin.js

@@ -0,0 +1,398 @@
+import ItemMixin from './ItemMixin.js'
+import LoadingMixin from './LoadingMixin.js'
+import { setDefaultValues } from '../utils/schema.js'
+import { assignDeeply, isObject, isString, labelize } from '@ditojs/utils'
+import { getResource } from '../utils/resource.js'
+import DitoContext from '../DitoContext.js'
+
+// @vue/component
+export default {
+  mixins: [ItemMixin, LoadingMixin],
+
+  provide() {
+    return {
+      $resourceComponent: () => this,
+      // Pass local verbs overrides on to children, see verbs() computed prop.
+      $verbs: () => this.verbs,
+      $isPopulated: () => this.hasData
+    }
+  },
+
+  data() {
+    return {
+      loadedData: null,
+      abortController: null
+    }
+  },
+
+  computed: {
+    resourceComponent() {
+      return this
+    },
+
+    resource() {
+      return this.getResource()
+    },
+
+    providesData() {
+      // This component is a data-source if it has an associated API resource:
+      return !!this.resource
+    },
+
+    linksToView() {
+      // Returns `false`here, but is overridden to return `true` in
+      // `SourceMixin` for component that do not provide their own data, but
+      // edit their items through a linked view.  In this case, real ids need to
+      // be used.
+      return false
+    },
+
+    isTransient() {
+      // Check the form that this component belongs to as well, since it may be
+      // in creation mode, which makes it transient.
+      // NOTE: This does not loop endlessly because DitoForm redefines
+      // `isTransient()` to only return `!this.providesData`.
+      const form = this.formComponent
+      return (
+        !this.providesData &&
+        !this.linksToView ||
+        form && (
+          form.isTransient ||
+          form.isCreating
+        )
+      )
+    },
+
+    transientNote() {
+      return (
+        this.isTransient && (
+          '<b>Note</b>: the parent still needs to be saved ' +
+          'in order to persist this change.'
+        )
+      )
+    },
+
+    shouldLoad() {
+      return (
+        !this.isTransient &&
+        !this.isLoading
+      )
+    },
+
+    // @overridable
+    hasData() {
+      // Base definition, will be overridden by DitoForm and SourceMixin
+      return !!this.loadedData
+    },
+
+    verbs() {
+      // The actual code is the `getVerbs()` method, for easier overriding of
+      // this computed property in components that use the ResourceMixin.
+      return this.getVerbs()
+    },
+
+    paginationRange() {
+      // Only apply pagination to lists.
+      const { paginate: amount } = this.sourceSchema
+      if (this.isListSource && amount) {
+        const { page = 0 } = this.query || {}
+        const start = page * amount
+        return [start, start + amount - 1]
+      }
+      return null
+    },
+
+    queryParams() {
+      const range = this.paginationRange
+      const { page, ...query } = this.query || {}
+      return {
+        ...query, // Query may override scope.
+        ...(range && {
+          // Pass pagination as range, so that we automatically get Objection's
+          // results counting:
+          range: range.join(',')
+        })
+      }
+    }
+  },
+
+  created() {
+    // When creating nested data, we still need to call setupData()
+    if (this.providesData || this.isCreating) {
+      this.setupData()
+    }
+  },
+
+  methods: {
+    getResource({ method = 'get', child } = {}) {
+      // Returns the resource object representing the resource for the
+      // associated source schema.
+      const resource = this.sourceSchema?.resource
+      return getResource(resource, {
+        type: 'collection',
+        method,
+        parent: this.parentResourceComponent?.getResource({
+          method,
+          child: resource
+        }) ?? null,
+        child
+      })
+    },
+
+    getVerbs() {
+      const verbs = this.$verbs()
+      return this.isTransient
+        ? {
+            ...verbs,
+            // Override default verbs with their transient versions:
+            create: 'add',
+            created: 'added',
+            save: 'apply',
+            saved: 'applied',
+            delete: 'remove',
+            deleted: 'removed'
+          }
+        : verbs
+    },
+
+    // @overridable
+    clearData() {
+      this.loadedData = null
+    },
+
+    // @overridable
+    setData(data) {
+      this.loadedData = data
+    },
+
+    setupData() {
+      // Actual code is in separate function so it's easer to override
+      // `setupData()` and and call `ensureData()` from the overrides,
+      // see DitoForm and SourceMixin.
+      this.ensureData()
+    },
+
+    ensureData() {
+      if (this.shouldLoad) {
+        if (this.hasData) {
+          this.reloadData()
+        } else {
+          this.loadData(true)
+        }
+      }
+    },
+
+    reloadData() {
+      this.loadData(false)
+    },
+
+    loadData(clear) {
+      if (!this.isTransient) {
+        if (clear) {
+          this.clearData()
+        }
+        this.requestData()
+      }
+    },
+
+    createData(schema, type) {
+      return setDefaultValues(schema, type ? { type } : {}, this)
+    },
+
+    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)) {
+              // TODO: Can we really swallow these errors?
+              // Is calling `ensureUser()` in `onBeforeRequest()` enough?
+              return true
+            }
+          }
+        } else {
+          this.setData(response.data)
+          this.emitSchemaEvent('load')
+        }
+      })
+    },
+
+    isValidationError(response) {
+      return response?.status === 400
+    },
+
+    isUnauthorizedError(response) {
+      return response?.status === 401
+    },
+
+    async handleRequest(
+      {
+        method,
+        resource = this.getResource({ method }),
+        query,
+        data
+      },
+      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
+      method = resource.method || method
+      const request = { method, resource, query, data, signal }
+      this.setLoading(true, loadingOptions)
+      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 })
+          }
+        }
+      }
+      if (this.abortController === controller) {
+        // Only clear the loading state if this is still the current request.
+        this.abortController = null
+        this.setLoading(false, loadingOptions)
+      }
+    },
+
+    getPayloadData(button, method) {
+      // Convention: only post, put and patch requests pass the data as payload.
+      return (
+        ['post', 'put', 'patch'].includes(method) && (
+          // TODO: Use `handleDataSchema()` asynchronously here instead, to
+          // offer the same amount of possibilities for data loading.
+          button.getSchemaValue(['resource', 'data']) ||
+          button.processedItem
+        )
+      )
+    },
+
+    async submit(button) {
+      let { resource } = button.schema
+      resource = getResource(resource, {
+        parent: this.getResource({
+          method: resource?.method,
+          child: resource
+        })
+      })
+      if (resource) {
+        const { method } = resource
+        const data = this.getPayloadData(button, method)
+        return this.submitResource(button, resource, method, data)
+      }
+      return false
+    },
+
+    async submitResource(button, resource, method, data, {
+      setData = false,
+      onSuccess,
+      onError,
+      notifySuccess = () =>
+        this.notify({
+          type: 'success',
+          title: 'Request Successful',
+          text: 'Request was successfully sent.'
+        }),
+      notifyError = error =>
+        this.notify({
+          type: 'error',
+          error,
+          title: 'Request Error',
+          text: [
+            `Unable to send request${error ? ':' : ''}`,
+            error?.message || error
+          ]
+        })
+    } = {}) {
+      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)
+            } 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
+              })
+              resolve(true)
+            }
+          }
+        )
+      })
+    },
+
+    async emitButtonEvent(button, event, { notify, error }) {
+      // Create the context outside of `emitEvent()`, so that
+      // `context.wasNotified` can be checked after.
+      const context = new DitoContext(button, {
+        nested: false,
+        data: this.data,
+        itemLabel: this.itemLabel,
+        error
+      })
+      const res = await button.emitEvent(event, { context })
+      if (
+        notify &&
+        // Prevent default if anything was returned from the event handler.
+        res === undefined &&
+        // Do not display default notification if the event handler already
+        // displayed a notification.
+        !context.wasNotified
+      ) {
+        notify(error)
+      }
+      return res
+    }
+  }
+}

package/src/mixins/RouteMixin.js

@@ -0,0 +1,190 @@
+import ValidatorMixin from '../mixins/ValidatorMixin.js'
+import { getCommonPrefix } from '@ditojs/utils'
+
+// @vue/component
+export default {
+  mixins: [ValidatorMixin],
+
+  provide() {
+    return {
+      $routeComponent: () => this
+    }
+  },
+
+  data() {
+    return {
+      reload: false,
+      // 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()
+    }
+  },
+
+  computed: {
+    routeComponent() {
+      // Override DitoMixin's routeComponent() which uses the injected value.
+      return this
+    },
+
+    routeLevel() {
+      let level = 0
+      let routeComponent = this
+      while ((routeComponent = routeComponent.parentRouteComponent)) {
+        level++
+      }
+      return level
+    },
+
+    routeRecord() {
+      return this.$route.matched[this.routeLevel]
+    },
+
+    isLastRoute() {
+      // Returns true when this router component is the last one in the route.
+      const { matched } = this.$route
+      return this.routeRecord === matched[matched.length - 1]
+    },
+
+    isLastUnnestedRoute() {
+      // Returns true if this route component is the last one in the route that
+      // needs its own router-view (= is not nested).
+      const { matched } = this.$route
+      for (let i = matched.length - 1; i >= 0; i--) {
+        const record = matched[i]
+        if (!record.meta.nested) {
+          return this.routeRecord === record
+        }
+      }
+      return false
+    },
+
+    isNestedRoute() {
+      return this.meta.nested
+    },
+
+    isView() {
+      return false
+    },
+
+    meta() {
+      return this.routeRecord?.meta
+    },
+
+    path() {
+      return this.getRoutePath(this.routeRecord?.path)
+    },
+
+    label() {
+      return this.getLabel(this.schema)
+    },
+
+    breadcrumb() {
+      const { breadcrumb } = this.schema || {}
+      return breadcrumb || `${this.breadcrumbPrefix} ${this.label}`
+    },
+
+    breadcrumbPrefix() {
+      return ''
+    },
+
+    param() {
+      // Workaround for vue-router not being able to map multiple url parameters
+      // with the same name to multiple components, see:
+      // https://github.com/vuejs/vue-router/issues/1345
+      return this.$route.params[this.meta?.param] || null
+    },
+
+    // @overridable, see DitoForm
+    isMutating() {
+      return false
+    }
+  },
+
+  beforeRouteUpdate(to, from) {
+    return this?.beforeRouteChange(to, from)
+  },
+
+  beforeRouteLeave(to, from) {
+    return this?.beforeRouteChange(to, from)
+  },
+
+  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)
+  },
+
+  unmounted() {
+    const { routeComponents } = this.appState
+    routeComponents.splice(routeComponents.indexOf(this), 1)
+  },
+
+  methods: {
+    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
+        )
+      )
+      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()
+          )
+        } 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
+              }?`
+            )
+          }
+        }
+      }
+      return ok
+    },
+
+    getRoutePath(recordPath) {
+      // Maps the route's actual path to the matched routes by counting its
+      // parts separated by '/', splitting the path into the mapped parts
+      // containing actual parameters.
+      const { path } = this.$route
+      return recordPath
+        ? path
+            .split('/')
+            .slice(0, recordPath.split('/').length)
+            .join('/')
+        : path
+    },
+
+    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

@@ -0,0 +1,33 @@
+// @vue/component
+export default {
+  provide() {
+    return {
+      $schemaParentComponent: () => this
+    }
+  },
+
+  data() {
+    return {
+      schemaComponents: []
+    }
+  },
+
+  computed: {
+    mainSchemaComponent() {
+      return this.schemaComponents[0]
+    }
+  },
+
+  methods: {
+    // This method is called by `DitoSchema.created()/unmounted()` on its
+    // `$schemaParentComponent`, if the parent uses the `SchemaParentMixin`:
+    _registerSchemaComponent(schemaComponent, add) {
+      const { schemaComponents } = this
+      if (add) {
+        schemaComponents.push(schemaComponent)
+      } else {
+        schemaComponents.splice(schemaComponents.indexOf(schemaComponent), 1)
+      }
+    }
+  }
+}

package/src/mixins/SortableMixin.js

@@ -0,0 +1,49 @@
+// @vue/component
+export default {
+  data() {
+    return {
+      isDragging: false
+    }
+  },
+
+  methods: {
+    getDraggableOptions(forceFallback = false) {
+      const prefix = 'dito-draggable'
+      return {
+        animation: 150,
+        handle: '.dito-button--drag',
+        dragClass: `${prefix}__drag`,
+        chosenClass: `${prefix}__chosen`,
+        ghostClass: `${prefix}__ghost`,
+        fallbackClass: `${prefix}__fallback`,
+        forceFallback,
+        onStart: this.onStartDrag,
+        onEnd: this.onEndDrag
+      }
+    },
+
+    onStartDrag() {
+      this.isDragging = true
+    },
+
+    onEndDrag({ oldIndex, newIndex }) {
+      this.isDragging = false
+      if (oldIndex !== newIndex) {
+        this.onChange()
+      }
+    },
+
+    updateOrder(sourceSchema, list, paginationRange) {
+      const { orderKey } = sourceSchema
+      if (orderKey) {
+        // Reorder the changed entries by their order key, taking pagination
+        // offsets into account:
+        const offset = paginationRange?.[0] || 0
+        for (let i = 0; i < list.length; i++) {
+          list[i][orderKey] = i + offset
+        }
+      }
+      return list
+    }
+  }
+}