@ditojs/admin 2.26.1 → 2.27.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.26.1",
+  "version": "2.27.0",
   "type": "module",
   "description": "Dito.js Admin is a schema based admin interface for Dito.js Server, featuring auto-generated views and forms and built with Vue.js",
   "repository": "https://github.com/ditojs/dito/tree/master/packages/admin",
@@ -33,8 +33,8 @@
     "not ie_mob > 0"
   ],
   "dependencies": {
-    "@ditojs/ui": "^2.26.1",
-    "@ditojs/utils": "^2.26.1",
+    "@ditojs/ui": "^2.27.0",
+    "@ditojs/utils": "^2.27.0",
     "@kyvg/vue3-notification": "^3.2.1",
     "@lk77/vue3-color": "^3.0.6",
     "@tiptap/core": "^2.3.0",
@@ -74,7 +74,7 @@
     "vue-upload-component": "^3.1.15"
   },
   "devDependencies": {
-    "@ditojs/build": "^2.26.1",
+    "@ditojs/build": "^2.27.0",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vue/compiler-sfc": "3.4.21",
     "pug": "^3.0.2",
@@ -83,7 +83,7 @@
     "vite": "^5.2.8"
   },
   "types": "types",
-  "gitHead": "8f2e07e3774d0e03b24ee78cffe60c5edacb93ae",
+  "gitHead": "e80d56a1887faa60f61f4c642502687d50ead333",
   "scripts": {
     "build": "vite build",
     "watch": "yarn build --mode 'development' --watch",

package/src/DitoAdmin.js

@@ -124,9 +124,7 @@ export default class DitoAdmin {
       },
 
       member(resource) {
-        // NOTE: We assume that all members have root-level collection routes,
-        // to avoid excessive nesting of (sub-)collection routes.
-        return `${resource.path}/${resource.id}`
+        return `${this.default(resource)}/${resource.id}`
       },
 
       upload(resource) {

package/src/components/DitoForm.vue

@@ -1,82 +1,65 @@
 <template lang="pug">
-DefineTemplate
-  //- Prevent implicit submission of the form, for example when typing enter
-  //- in an input field.
-  //- https://stackoverflow.com/a/51507806
-  button(
-    v-show="false"
-    type="submit"
-    disabled
-  )
-  DitoSchema(
-    :schema="schema"
-    :dataPath="dataPath"
-    :data="data"
-    :meta="meta"
-    :store="store"
-    :padding="isInlinedSource ? 'nested' : 'root'"
-    :disabled="isLoading"
-    :scrollable="!isInlinedSource"
-    generateLabels
-  )
-    template(#buttons)
-      DitoButtons.dito-buttons-round.dito-buttons-large.dito-buttons-main(
-        :class="{ 'dito-buttons-sticky': !isInlinedSource }"
-        :buttons="buttonSchemas"
-        :dataPath="dataPath"
-        :data="data"
-        :meta="meta"
-        :store="store"
-        :disabled="isLoading"
-      )
-
 .dito-form.dito-scroll-parent(
-  :class="{ 'dito-form-inlined': isInlinedSource }"
+  :class="{ 'dito-form-nested': isNestedRoute }"
   :data-resource="sourceSchema.path"
 )
-  template(
-    v-if="isInlinedSource"
+  //- Only render a router-view here if this isn't the last data route and not a
+  //- nested form route, which will appear elsewhere in its own view.
+  RouterView(
+    v-if="!isLastUnnestedRoute && !isNestedRoute"
+    v-show="!isActiveRoute"
   )
-    //- Use a <div> for inlined forms, as we shouldn't nest actual <form> tags.
-    //- NOTE: inlined form components are kept alive by using `v-show` instead
-    //- of `v-if` here, so event handling and other things still work with
-    //- inlined editing.
-    div(
-      v-show="isActive"
-    )
-      ReuseTemplate
-  template(
-    v-else
+  //- NOTE: Nested form components are kept alive by using `v-show` instead of
+  //- `v-if` here, so event handling and other things still work with nested
+  //- editing.
+  DitoFormInner(
+    v-show="isActiveRoute"
+    :nested="isNestedRoute"
   )
-    //- Only render a router-view here if this isn't the last data route and not
-    //- an inlined form route, which will appear elsewhere in its own view.
-    RouterView(
-      v-if="!isLastUnnestedRoute"
-      v-show="!isActive"
+    //- Prevent implicit submission of the form, for example when typing enter
+    //- in an input field.
+    //- https://stackoverflow.com/a/51507806
+    button(
+      v-show="false"
+      type="submit"
+      disabled
     )
-    form.dito-scroll-parent(
-      v-show="isActive"
-      @submit.prevent
+    DitoSchema(
+      :schema="schema"
+      :dataPath="dataPath"
+      :data="data"
+      :meta="meta"
+      :store="store"
+      :padding="isNestedRoute ? 'nested' : 'root'"
+      :active="isActiveRoute"
+      :disabled="isLoading"
+      :scrollable="!isNestedRoute"
+      generateLabels
     )
-      ReuseTemplate
+      template(#buttons)
+        DitoButtons.dito-buttons-round.dito-buttons-large.dito-buttons-main(
+          :class="{ 'dito-buttons-sticky': !isNestedRoute }"
+          :buttons="buttonSchemas"
+          :dataPath="dataPath"
+          :data="data"
+          :meta="meta"
+          :store="store"
+          :disabled="isLoading"
+        )
 </template>
 
 <script>
-import { createReusableTemplate } from '@vueuse/core'
 import { clone, capitalize, parseDataPath, assignDeeply } from '@ditojs/utils'
 import DitoComponent from '../DitoComponent.js'
 import RouteMixin from '../mixins/RouteMixin.js'
 import ResourceMixin from '../mixins/ResourceMixin.js'
 import { getResource, getMemberResource } from '../utils/resource.js'
-import { getButtonSchemas, isInlined, isObjectSource } from '../utils/schema.js'
+import { getButtonSchemas, isObjectSource } from '../utils/schema.js'
 import { resolvePath } from '../utils/path.js'
 
-const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
-
 // @vue/component
 export default DitoComponent.component('DitoForm', {
   mixins: [RouteMixin, ResourceMixin],
-  components: { DefineTemplate, ReuseTemplate },
 
   data() {
     return {
@@ -143,11 +126,7 @@ export default DitoComponent.component('DitoForm', {
       )
     },
 
-    isInlinedSource() {
-      return isInlined(this.sourceSchema)
-    },
-
-    isActive() {
+    isActiveRoute() {
       return this.isLastRoute || this.isLastUnnestedRoute
     },
 
@@ -190,11 +169,6 @@ export default DitoComponent.component('DitoForm', {
       return this.isCreating ? 'post' : 'patch'
     },
 
-    resource() {
-      const resource = this.getResource()
-      return getMemberResource(this.itemId, resource) || resource
-    },
-
     breadcrumbPrefix() {
       return capitalize(this.isCreating ? this.verbs.create : this.verbs.edit)
     },
@@ -347,6 +321,12 @@ export default DitoComponent.component('DitoForm', {
       )
     },
 
+    // @override ResourceMixin.getResource()
+    getResource(defaults) {
+      const resource = ResourceMixin.methods.getResource.call(this, defaults)
+      return getMemberResource(this.itemId, resource) || resource
+    },
+
     // @override ResourceMixin.setupData()
     setupData() {
       if (this.isCreating) {
@@ -359,7 +339,8 @@ export default DitoComponent.component('DitoForm', {
     setSourceData(data) {
       if (this.sourceData && this.sourceKey !== null) {
         const { mainSchemaComponent } = this
-        this.sourceData[this.sourceKey] = mainSchemaComponent.filterData(data)
+        this.sourceData[this.sourceKey] =
+          mainSchemaComponent.filterData(data).localData
         mainSchemaComponent.onChange()
         return true
       }
@@ -422,11 +403,13 @@ export default DitoComponent.component('DitoForm', {
       const getVerb = present => this.verbs[this.getSubmitVerb(present)]
 
       // Allow buttons to override both method and resource path to submit to:
+      let { method } = this
+      let resource = this.getResource({ method })
       const buttonResource = getResource(button.schema.resource, {
-        parent: this.resource
+        parent: resource
       })
-      const resource = buttonResource || this.resource
-      const method = resource?.method || this.method
+      resource = buttonResource || resource
+      method = resource?.method || method
       const data = this.getPayloadData(button, method)
       let success
       if (!buttonResource && this.isTransient) {

package/src/components/DitoFormInner.vue

@@ -0,0 +1,26 @@
+<template lang="pug">
+//- Use a <div> for nested forms, as we shouldn't nest actual <form> tags.
+div(
+  v-if="nested"
+)
+  slot
+form.dito-scroll-parent(
+  v-else
+  @submit.prevent
+)
+  slot
+</template>
+
+<script>
+import DitoComponent from '../DitoComponent.js'
+
+// @vue/component
+export default DitoComponent.component('DitoFormInner', {
+  props: {
+    nested: {
+      type: Boolean,
+      default: false
+    }
+  }
+})
+</script>

package/src/components/{DitoFormInlined.vue → DitoFormNested.vue}

@@ -3,14 +3,14 @@ import DitoComponent from '../DitoComponent.js'
 import DitoForm from './DitoForm.vue'
 
 // @vue/component
-export default DitoComponent.component('DitoFormInlined', {
+export default DitoComponent.component('DitoFormNested', {
   extends: DitoForm
 })
 </script>
 
 <style lang="scss">
-.dito-form-inlined {
-  // No scrolling in inlined forms, and prevent open .multiselect from
+.dito-form-nested {
+  // No scrolling inside nested forms, and prevent open .multiselect from
   // being cropped.
   overflow: visible;
 }

package/src/components/DitoSchema.vue

@@ -9,6 +9,7 @@ slot(name="before")
     to=".dito-sidebar__teleport"
   )
     DitoPanels(
+      v-if="active"
       :panels="panelEntries"
       :data="data"
       :meta="meta"
@@ -20,7 +21,9 @@ slot(name="before")
     :to="headerTeleport"
     :disabled="!headerTeleport"
   )
-    .dito-schema-header
+    .dito-schema-header(
+      v-if="active"
+    )
       DitoLabel(
         v-if="hasLabel"
         :label="label"
@@ -119,7 +122,8 @@ import {
   getPanelEntries,
   setDefaultValues,
   processData,
-  isEmptySchema
+  isEmptySchema,
+  isNested
 } from '../utils/schema.js'
 import { getSchemaAccessor, getStoreAccessor } from '../utils/accessor.js'
 
@@ -147,6 +151,7 @@ export default DitoComponent.component('DitoSchema', {
     store: { type: Object, default: () => ({}) },
     label: { type: [String, Object], default: null },
     padding: { type: String, default: null },
+    active: { type: Boolean, default: true },
     inlined: { type: Boolean, default: false },
     disabled: { type: Boolean, default: false },
     collapsed: { type: Boolean, default: false },
@@ -223,7 +228,7 @@ export default DitoComponent.component('DitoSchema', {
     },
 
     headerTeleport() {
-      return this.isRootSchema
+      return this.isTopLevelSchema
         ? '.dito-header__teleport'
         : this.labelNode
     },
@@ -283,9 +288,8 @@ export default DitoComponent.component('DitoSchema', {
       )
     },
 
-    isRootSchema() {
-      // Section schemas can share the root dataPath but they are inlined.
-      return this.dataPath === '' && !this.inlined
+    isNested() {
+      return isNested(this.schema)
     },
 
     isDirty() {
@@ -320,8 +324,12 @@ export default DitoComponent.component('DitoSchema', {
       return !!this.tabs
     },
 
-    hasRootTabs() {
-      return this.hasTabs && this.isRootSchema
+    isTopLevelSchema() {
+      return !this.isNested && !this.inlined
+    },
+
+    hasTopLevelTabs() {
+      return this.hasTabs && this.isTopLevelSchema
     },
 
     hasMainPane() {
@@ -385,7 +393,7 @@ export default DitoComponent.component('DitoSchema', {
         // Remember the current path to know if tab changes should still be
         // handled, but remove the trailing `/create` or `/:id` from it so that
         // tabs informs that stay open after creation still work.
-        if (this.hasRootTabs) {
+        if (this.hasTopLevelTabs) {
           this.selectedTab = routeTab
         }
       }
@@ -399,7 +407,7 @@ export default DitoComponent.component('DitoSchema', {
           content.scrollTop = this.scrollPositions[newTab] ?? 0
         })
       }
-      if (this.hasRootTabs) {
+      if (this.hasTopLevelTabs) {
         const tab = this.shouldRenderSchema(this.tabs[newTab])
           ? newTab
           : this.defaultTab
@@ -687,20 +695,22 @@ export default DitoComponent.component('DitoSchema', {
     },
 
     filterData(data) {
-      // Filters out arrays and objects that are back by data resources
-      // themselves, as those are already taking care of through their own API
+      // Filters out arrays and objects that are backed by data resources
+      // themselves, as those are already taken care of through their own API
       // resource end-points and shouldn't be set.
-      const copy = {}
+      const localData = {}
+      const foreignData = {}
       for (const [name, value] of Object.entries(data)) {
         if (isArray(value) || isObject(value)) {
           const components = this.getComponentsByName(name)
           if (components.some(component => component.providesData)) {
+            foreignData[name] = value
             continue
           }
         }
-        copy[name] = value
+        localData[name] = value
       }
-      return copy
+      return { localData, foreignData }
     },
 
     processData({ target = 'clipboard', schemaOnly = true } = {}) {

package/src/components/DitoView.vue

@@ -75,7 +75,7 @@ export default DitoComponent.component('DitoView', {
     },
 
     mainComponent() {
-      return this.mainSchemaComponent.getComponentByDataPath(this.name)
+      return this.mainSchemaComponent?.getComponentByDataPath(this.name)
     },
 
     viewSchema() {

package/src/components/index.js

@@ -27,7 +27,8 @@ export { default as DitoCreateButton } from './DitoCreateButton.vue'
 export { default as DitoClipboard } from './DitoClipboard.vue'
 export { default as DitoView } from './DitoView.vue'
 export { default as DitoForm } from './DitoForm.vue'
-export { default as DitoFormInlined } from './DitoFormInlined.vue'
+export { default as DitoFormInner } from './DitoFormInner.vue'
+export { default as DitoFormNested } from './DitoFormNested.vue'
 export { default as DitoErrors } from './DitoErrors.vue'
 export { default as DitoScopes } from './DitoScopes.vue'
 export { default as DitoPagination } from './DitoPagination.vue'

package/src/mixins/DataMixin.js

@@ -109,15 +109,22 @@ export default {
     async resolveData(load, loadingOptions = {}) {
       // Use a timeout to allow already resolved promises to return data without
       // showing a loading indicator.
-      const timer = setTimeout(() => this.setLoading(true, loadingOptions), 0)
+      let clearLoading = false
+      const timer = setTimeout(() => {
+        this.setLoading(true, loadingOptions)
+        clearLoading = true
+      }, 0)
       let data = null
       try {
         data = await (isFunction(load) ? load() : load)
       } catch (error) {
         this.addError(error.message || error)
       }
-      clearTimeout(timer)
-      this.setLoading(false, loadingOptions)
+      if (clearLoading) {
+        this.setLoading(false, loadingOptions)
+      } else {
+        clearTimeout(timer)
+      }
       return data
     }
   }

package/src/mixins/DitoMixin.js

@@ -155,15 +155,19 @@ export default {
     },
 
     parentSchemaComponent() {
-      return this.schemaComponent?.parentComponent.schemaComponent
+      return getParentComponent(this, 'schemaComponent')
     },
 
     parentRouteComponent() {
-      return this.routeComponent?.parentComponent.routeComponent
+      return getParentComponent(this, 'routeComponent')
     },
 
     parentFormComponent() {
-      return this.formComponent?.parentComponent.formComponent
+      return getParentComponent(this, 'formComponent')
+    },
+
+    parentResourceComponent() {
+      return getParentComponent(this, 'resourceComponent')
     },
 
     // Returns the data of the first route component in the chain of parents
@@ -307,13 +311,12 @@ export default {
     },
 
     getResourcePath(resource) {
-      resource = getResource(resource)
-      // Resources without a parent inherit the one from `dataComponent`
-      // automatically.
-      if (resource.parent === undefined) {
-        resource.parent = this.dataComponent?.resource
-      }
-      return this.api.resources.any(getResource(resource))
+      resource = getResource(resource, {
+        // Resources without a parent inherit the one from `dataComponent`
+        // automatically.
+        parent: this.dataComponent?.resource ?? null
+      })
+      return this.api.resources.any(resource)
     },
 
     getResourceUrl(resource) {
@@ -574,3 +577,12 @@ export default {
 }
 
 let nextUid = 0
+
+function getParentComponent(component, key) {
+  const current = component[key]
+  let parent = component.parentComponent
+  while (parent && parent[key] === current) {
+    parent = parent.parentComponent
+  }
+  return parent?.[key] ?? null
+}

package/src/mixins/OptionsMixin.js

@@ -260,7 +260,7 @@ export default {
     }
   },
 
-  processValue(schema, value, dataPath, graph) {
+  processValue({ schema, value, dataPath }, graph) {
     if (schema.relate) {
       // For internally relating data (`schema.options.dataPath`), we need to
       // process both the options (for '#ref') and the value ('#id').

package/src/mixins/ResourceMixin.js

@@ -1,7 +1,7 @@
 import ItemMixin from './ItemMixin.js'
 import LoadingMixin from './LoadingMixin.js'
 import { setDefaultValues } from '../utils/schema.js'
-import { isObject, isString, labelize } from '@ditojs/utils'
+import { assignDeeply, isObject, isString, labelize } from '@ditojs/utils'
 import { getResource } from '../utils/resource.js'
 import DitoContext from '../DitoContext.js'
 
@@ -31,8 +31,6 @@ export default {
     },
 
     resource() {
-      // Returns the resource object representing the resource for the
-      // associated source schema.
       return this.getResource()
     },
 
@@ -126,12 +124,13 @@ export default {
   },
 
   methods: {
-    getResource() {
-      // This is defined as a method so the computed `resource` getter can
-      // be overridden and `super` functionality can still be accessed.
+    getResource(defaults = { method: 'get' }) {
+      // Returns the resource object representing the resource for the
+      // associated source schema.
       return getResource(this.sourceSchema?.resource, {
         type: 'collection',
-        parent: this.parentFormComponent?.resource ?? null
+        parent: this.parentResourceComponent?.resource ?? null,
+        ...defaults
       })
     },
 
@@ -230,7 +229,7 @@ export default {
     async handleRequest(
       {
         method,
-        resource = this.resource,
+        resource = this.getResource({ method }),
         query,
         data
       },
@@ -244,6 +243,7 @@ export default {
       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 {
@@ -340,7 +340,17 @@ export default {
               // Update the underlying data before calling `notify()` or
               // `this.itemLabel`, so id is set after creating new items.
               if (setData && data) {
-                this.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', {

package/src/mixins/RouteMixin.js

@@ -60,6 +60,10 @@ export default {
       return false
     },
 
+    isNestedRoute() {
+      return this.meta.nested
+    },
+
     isView() {
       return false
     },