@ditojs/admin 2.6.8 → 2.6.10

package/src/types/DitoTypeList.vue

@@ -39,7 +39,7 @@
     DitoDraggable(
       tag="tbody"
       :modelValue="updateOrder(sourceSchema, listData, paginationRange)"
-      :options="getSortableOptions(false)"
+      :options="getSortableOptions()"
       :draggable="draggable"
       @update:modelValue="value => (listData = value)"
     )
@@ -78,7 +78,7 @@
               :dataPath="getDataPath(index)"
               :data="item"
               :meta="nestedMeta"
-              :store="getChildStore(getItemUid(schema, item), index)"
+              :store="getItemStore(schema, item, index)"
               :disabled="disabled || isLoading"
               :collapsed="collapsed"
               :collapsible="collapsible"
@@ -115,7 +115,7 @@
             :dataPath="getDataPath(index)"
             :data="item"
             :meta="nestedMeta"
-            :store="getChildStore(getItemUid(schema, item), index)"
+            :store="getItemStore(schema, item, index)"
             @delete="deleteItem(item, index)"
           )
     //- Render create buttons inside table when not in a single component view:
@@ -161,6 +161,7 @@ import {
 import { createFiltersPanel } from '../utils/filter.js'
 import { appendDataPath } from '../utils/data.js'
 import { pickBy, equals, hyphenate } from '@ditojs/utils'
+import { computed } from 'vue'
 
 // @vue/component
 export default DitoTypeComponent.register('list', {
@@ -171,28 +172,22 @@ export default DitoTypeComponent.register('list', {
     return type
   },
 
-  getPanelSchema(api, schema, dataPath, schemaComponent) {
+  getPanelSchema(api, schema, dataPath, component) {
     const { filters } = schema
     // See if this list component wants to display a filter panel, and if so,
     // create the panel schema for it through `getFiltersPanel()`.
     if (filters) {
-      // At the time of the creation of the panel schema, the schemaComponent is
-      // not filled yet, so we can't get the target component (dataPath) right
-      // away. Use a proxy and a getter instead, to get around this:
-      const getListComponent = () =>
-        schemaComponent.getComponentByDataPath(
-          dataPath,
-          component => component.type === 'list'
-        )
+      return createFiltersPanel(
+        api,
+        filters,
+        dataPath,
+        // Pass a computed value to get / set the query, see getFiltersPanel()
+        computed({
+          get() {
+            return component.query
+          },
 
-      return createFiltersPanel(api, filters, dataPath, {
-        // Create a simple proxy to get / set the query, see getFiltersPanel()
-        get query() {
-          return getListComponent()?.query
-        },
-        set query(query) {
-          const component = getListComponent()
-          if (component) {
+          set(query) {
             // Filter out undefined values for comparing with equals()
             const filter = obj => pickBy(obj, value => value !== undefined)
             if (!equals(filter(query), filter(component.query))) {
@@ -200,8 +195,8 @@ export default DitoTypeComponent.register('list', {
               component.loadData(false)
             }
           }
-        }
-      })
+        })
+      )
     }
   },
 

package/src/types/DitoTypeUpload.vue

@@ -35,7 +35,7 @@
     DitoDraggable(
       v-model="files"
       tag="tbody"
-      :options="getSortableOptions(false)"
+      :options="getSortableOptions()"
       :draggable="draggable"
     )
       template(
@@ -43,7 +43,7 @@
       )
         tr(
           v-for="(file, index) in files"
-          :key="file.key"
+          :key="file.name"
         )
           td(
             v-if="render"

package/src/utils/filter.js

@@ -63,7 +63,7 @@ export const filterComponents = {
   }
 }
 
-export function createFiltersPanel(api, filters, dataPath, proxy) {
+export function createFiltersPanel(api, filters, dataPath, query) {
   const { sticky, ...filterSchemas } = filters
   const panel = {
     type: 'panel',
@@ -80,7 +80,7 @@ export function createFiltersPanel(api, filters, dataPath, proxy) {
     data() {
       return parseFiltersData(
         panel,
-        proxy.query
+        query.value
       )
     },
 
@@ -106,8 +106,8 @@ export function createFiltersPanel(api, filters, dataPath, proxy) {
 
     methods: {
       applyFilters() {
-        proxy.query = {
-          ...proxy.query,
+        query.value = {
+          ...query.value,
           filter: this.filters,
           // Clear pagination when applying or clearing filters:
           page: undefined

package/src/utils/schema.js

@@ -283,25 +283,24 @@ export async function processSchemaComponent(
   ])
 }
 
-export async function processView(component, api, schema, name, menuLevel = 0) {
+export async function processView(component, api, schema, name, fullPath = '') {
   processSchemaDefaults(api, schema)
+  processRouteSchema(api, schema, name, fullPath)
   let children = []
   if (isView(schema)) {
-    processRouteSchema(api, schema, name)
     await processNestedSchemas(api, schema)
     await processSchemaComponents(api, schema, children)
   } else if (isMenu(schema)) {
-    processRouteSchema(api, schema, name)
     children = await Promise.all(
       Object.entries(schema.items).map(async ([name, item]) =>
-        processView(component, api, item, name, menuLevel + 1)
+        processView(component, api, item, name, schema.fullPath)
       )
     )
   } else {
     throw new Error(`Invalid view schema: '${getSchemaIdentifier(schema)}'`)
   }
   return {
-    path: menuLevel === 0 ? `/${schema.path}` : schema.path,
+    path: schema.fullPath,
     children,
     component,
     meta: {
@@ -343,10 +342,13 @@ export function processNestedSchemaDefaults(api, schema) {
   })
 }
 
-export function processRouteSchema(api, schema, name) {
+export function processRouteSchema(api, schema, name, fullPath = null) {
   // Used for view and source schemas, see SourceMixin.
   schema.name ??= name
   schema.path ??= api.normalizePath(name)
+  if (fullPath !== null) {
+    schema.fullPath = `${fullPath}/${schema.path}`
+  }
 }
 
 export async function processForms(api, schema, level) {
@@ -466,8 +468,8 @@ export function getViewEditPath(schema, id, context) {
   const view = getViewSchema(schema, context)
   if (view) {
     const path = isSingleComponentView(view)
-      ? `/${view.path}`
-      : `/${view.path}/${view.path}`
+      ? view.fullPath
+      : `${view.fullPath}/${view.path}`
     return `${path}/${id}`
   }
   return null
@@ -1028,14 +1030,14 @@ export function getAllPanelEntries(
   api,
   schema,
   dataPath = null,
-  schemaComponent = null,
+  component = null,
   tabComponent = null
 ) {
   const panelSchema = getTypeOptions(schema)?.getPanelSchema?.(
     api,
     schema,
     dataPath,
-    schemaComponent
+    component
   )
   const panelEntries = panelSchema
     ? [getPanelEntry(panelSchema, dataPath, tabComponent)]