@ditojs/admin 2.2.1 → 2.2.3

package/src/utils/filter.js

@@ -1,4 +1,5 @@
 import { isArray, asArray, labelize } from '@ditojs/utils'
+import { getNamedSchemas, processNestedSchemaDefaults } from './schema'
 
 export const filterComponents = {
   'text'(filter) {
@@ -24,17 +25,19 @@ export const filterComponents = {
       operator: filter.operators
         ? {
             type: 'select',
+            width: '2/5',
             options: isArray(filter.operators)
               ? options.filter(
                   option => filter.operators.includes(option.value)
                 )
               : options,
-            width: '40%'
+            clearable: true
           }
         : null,
       text: {
         type: 'text',
-        width: filter.operators ? '60%' : 'fill'
+        width: filter.operators ? '3/5' : 'fill',
+        clearable: true
       }
     }
   },
@@ -49,19 +52,22 @@ export const filterComponents = {
     return {
       from: {
         type: 'datetime',
-        width: '50%',
-        dateFormat
+        width: '1/2',
+        dateFormat,
+        clearable: true
       },
       to: {
         type: 'datetime',
-        width: '50%',
-        dateFormat
+        width: '1/2',
+        dateFormat,
+        clearable: true
       }
     }
   }
 }
 
-export function getFiltersPanel(filters, dataPath, proxy) {
+export function createFiltersPanel(api, filters, dataPath, proxy) {
+  const { sticky, ...filterSchemas } = filters
   const panel = {
     type: 'panel',
     label: 'Filters',
@@ -69,6 +75,8 @@ export function getFiltersPanel(filters, dataPath, proxy) {
     target: dataPath,
     // Override the default value
     disabled: false,
+    sticky,
+
     // NOTE: On panels, the data() callback does something else than on normal
     // schema: It produces the `data` property to be passed to the panel's
     // schema, not the data to be used for the panel component directly.
@@ -78,50 +86,83 @@ export function getFiltersPanel(filters, dataPath, proxy) {
         proxy.query
       )
     },
-    components: getFiltersComponents(filters),
-    buttons: {
-      clear: {
-        text: 'Clear',
-        events: {
-          click({ schemaComponent }) {
-            schemaComponent.resetData()
-            schemaComponent.applyFilters()
-          }
-        }
+
+    components: createFiltersComponents(filterSchemas),
+    buttons: createFiltersButtons(false),
+    panelButtons: createFiltersButtons(true),
+
+    events: {
+      change() {
+        this.applyFilters()
+      }
+    },
+
+    computed: {
+      filters() {
+        return formatFiltersData(this.schema, this.data)
       },
 
-      filter: {
-        type: 'submit',
-        text: 'Filter',
-        events: {
-          click({ schemaComponent }) {
-            schemaComponent.applyFilters()
-          }
-        }
+      hasFilters() {
+        return this.filters.length > 0
       }
     },
+
     methods: {
       applyFilters() {
         proxy.query = {
           ...proxy.query,
-          filter: formatFiltersData(this.schema, this.data),
+          filter: this.filters,
           // Clear pagination when applying or clearing filters:
           page: undefined
         }
+      },
+
+      clearFilters() {
+        this.resetData()
+        this.applyFilters()
       }
     }
   }
+  processNestedSchemaDefaults(api, panel)
   return panel
 }
 
-function getFiltersComponents(filters) {
+function createFiltersButtons(small) {
+  return {
+    clear: {
+      type: 'button',
+      text: small ? null : 'Clear',
+      disabled: ({ schemaComponent }) => !schemaComponent.hasFilters,
+      events: {
+        click({ schemaComponent }) {
+          // Since panel buttons are outside of the schema, we need to use the
+          // schema component received from the initialize event below:
+          schemaComponent.clearFilters()
+        }
+      }
+    },
+
+    submit: {
+      type: 'submit',
+      text: small ? null : 'Filter',
+      visible: !small,
+      events: {
+        click({ schemaComponent }) {
+          schemaComponent.applyFilters()
+        }
+      }
+    }
+  }
+}
+
+function createFiltersComponents(filters) {
   const comps = {}
-  for (const filter of Object.values(filters || {})) {
+  for (const filter of Object.values(getNamedSchemas(filters) || {})) {
     // Support both custom forms and default filter components, through the
     // `filterComponents` registry. Even for default filters, still use the
     // properties in `filter` as the base for `form`, so things like `label`
     // can be changed on the resulting form.
-    const { filter: type, ...form } = filter
+    const { filter: type, width, ...form } = filter
     const components = type
       ? filterComponents[type]?.(filter)
       : filter.components
@@ -142,6 +183,7 @@ function getFiltersComponents(filters) {
       comps[filter.name] = {
         label: form.label,
         type: 'object',
+        width,
         default: () => ({}),
         form,
         inlined: true
@@ -175,7 +217,7 @@ function formatFiltersData(schema, data) {
       }
     }
   }
-  return filters.length ? filters : undefined
+  return filters
 }
 
 function parseFiltersData(schema, query) {

package/src/utils/route.js

@@ -0,0 +1,46 @@
+import { isArray, asArray } from '@ditojs/utils'
+
+export function formatQuery(query) {
+  const entries = query
+    ? isArray(query)
+      ? query
+      : Object.entries(query)
+    : []
+  return (
+    new URLSearchParams(
+      // Expand array values into multiple entries under the same key, so
+      // `formatQuery({ foo: [1, 2], bar: 3 })` => 'foo=1&foo=2&bar=3'.
+      entries.reduce(
+        (entries, [key, value]) => {
+          for (const val of asArray(value)) {
+            entries.push([key, val])
+          }
+          return entries
+        },
+        []
+      )
+    )
+      .toString()
+      // decode all these encoded characters to have the same behavior as
+      // vue-router's own query encoding.
+      .replaceAll(/%(?:21|24|28|29|2C|2F|3A|3B|3D|3F|40)/g, decodeURIComponent)
+  )
+}
+
+export function replaceRoute({ path, query, hash }) {
+  // Preserve `history.state`, see:
+  // https://router.vuejs.org/guide/migration/#usage-of-history-state
+  history.replaceState(
+    history.state,
+    null,
+    `${
+      location.origin
+    }${
+      path ?? location.pathname
+    }?${
+      query ? formatQuery(query) : location.search.slice(1)
+    }${
+      hash ?? location.hash
+    }`
+  )
+}

package/src/utils/schema.js

@@ -55,7 +55,7 @@ export function iterateSchemaComponents(schemas, callback) {
 
 export function iterateNestedSchemaComponents(schema, callback) {
   return schema
-    ? iterateSchemaComponents([schema, ...getAllTabSchemas(schema)], callback)
+    ? iterateSchemaComponents([schema, ...getTabSchemas(schema)], callback)
     : undefined
 }
 
@@ -191,7 +191,12 @@ export async function resolveSchemaComponents(schemas) {
   await mapConcurrently(Object.values(schemas || {}), resolveSchemaComponent)
 }
 
-export async function processSchemaComponents(api, schema, routes, level) {
+export async function processSchemaComponents(
+  api,
+  schema,
+  routes = null,
+  level = 0
+) {
   const promises = []
   const process = (component, name, relativeLevel) => {
     promises.push(
@@ -206,21 +211,28 @@ export async function processSchemaComponents(api, schema, routes, level) {
   }
 
   iterateNestedSchemaComponents(schema, process)
-  iterateSchemaComponents(getAllPanelSchemas(schema), process)
+  iterateSchemaComponents(getPanelSchemas(schema), process)
 
   await Promise.all(promises)
 }
 
-export async function processSchemaComponent(api, schema, name, routes, level) {
-  processDefaults(api, schema)
+export async function processSchemaComponent(
+  api,
+  schema,
+  name,
+  routes = null,
+  level = 0
+) {
+  processSchemaDefaults(api, schema)
 
   await Promise.all([
     // Also process nested panel schemas.
-    mapConcurrently(getAllPanelSchemas(schema), panel =>
-      processSchemaComponents(api, panel, routes, level)
+    mapConcurrently(
+      getPanelSchemas(schema),
+      panel => processSchemaComponents(api, panel, routes, level)
     ),
     // Delegate schema processing to the actual type components.
-    await getTypeOptions(schema)?.processSchema?.(
+    getTypeOptions(schema)?.processSchema?.(
       api,
       schema,
       name,
@@ -235,8 +247,8 @@ export async function processView(component, api, schema, name) {
     throw new Error(`Invalid view schema: '${getSchemaIdentifier(schema)}'`)
   }
   processRouteSchema(api, schema, name)
-  processDefaults(api, schema)
-  await resolveNestedSchemas(api, schema)
+  processSchemaDefaults(api, schema)
+  await processNestedSchemas(api, schema)
   const children = []
   await processSchemaComponents(api, schema, children, 0)
   return {
@@ -250,7 +262,7 @@ export async function processView(component, api, schema, name) {
   }
 }
 
-export function processDefaults(api, schema) {
+export function processSchemaDefaults(api, schema) {
   let defaults = api.defaults[schema.type]
   if (defaults) {
     if (isFunction(defaults)) {
@@ -268,6 +280,20 @@ export function processDefaults(api, schema) {
   }
 }
 
+export function processNestedSchemaDefaults(api, schema) {
+  // Process defaults for nested schemas. Note that this is also done when
+  // calling `processSchemaComponents()`, but that function is async, and we
+  // need a sync version that only handles the defaults for filters, see
+  // `getFiltersPanel()`.
+  iterateNestedSchemaComponents(schema, component => {
+    processSchemaDefaults(api, component)
+    const forms = getFormSchemas(component)
+    for (const form of Object.values(forms)) {
+      processNestedSchemaDefaults(api, form)
+    }
+  })
+}
+
 export function processRouteSchema(api, schema, name) {
   // Used for view and source schemas, see SourceMixin.
   schema.name = name
@@ -304,8 +330,8 @@ export async function processForm(api, schema) {
   if (!isForm(schema)) {
     throw new Error(`Invalid form schema: '${getSchemaIdentifier(schema)}'`)
   }
-  processDefaults(api, schema)
-  await resolveNestedSchemas(api, schema)
+  processSchemaDefaults(api, schema)
+  await processNestedSchemas(api, schema)
   return schema
 }
 
@@ -314,7 +340,7 @@ export async function processTab(api, schema) {
   if (!isTab(schema)) {
     throw new Error(`Invalid tab schema: '${getSchemaIdentifier(schema)}'`)
   }
-  processDefaults(api, schema)
+  processSchemaDefaults(api, schema)
   return schema
 }
 
@@ -323,11 +349,11 @@ export async function processPanel(api, schema) {
   if (!isPanel(schema)) {
     throw new Error(`Invalid panel schema: '${getSchemaIdentifier(schema)}'`)
   }
-  processDefaults(api, schema)
+  processSchemaDefaults(api, schema)
   return schema
 }
 
-export async function resolveNestedSchemas(api, schema) {
+export async function processNestedSchemas(api, schema) {
   const { tabs, panels } = schema
   if (tabs) {
     schema.tabs = await resolveSchemas(
@@ -392,7 +418,7 @@ export function getViewEditPath(schema, context) {
 }
 
 export function getFormSchemas(schema, context, modifyForm) {
-  const viewSchema = getViewFormSchema(schema, context)
+  const viewSchema = context && getViewFormSchema(schema, context)
   if (viewSchema) {
     schema = viewSchema
   } else if (schema.view) {
@@ -413,7 +439,7 @@ export function getFormSchemas(schema, context, modifyForm) {
   return Object.fromEntries(
     Object.entries(forms).map(([type, form]) => {
       // Support `schema.components` callbacks to create components on the fly.
-      if (isFunction(form.components)) {
+      if (context && isFunction(form.components)) {
         form = {
           ...form,
           components: form.components(context)
@@ -760,10 +786,10 @@ export function processSchemaData(
   }
 
   processComponents(schema.components)
-  for (const tab of getAllTabSchemas(schema)) {
+  for (const tab of getTabSchemas(schema)) {
     processComponents(tab.components)
   }
-  for (const panel of getAllPanelSchemas(schema)) {
+  for (const panel of getPanelSchemas(schema)) {
     processComponents(panel.components)
   }
 
@@ -871,21 +897,23 @@ export function getPanelEntries(
   return panelEntries
 }
 
-export function getAllTabSchemas(schema) {
+export function getTabSchemas(schema) {
   return schema?.tabs ? Object.values(schema.tabs) : []
 }
 
-export function getAllPanelSchemas(schema) {
-  return getAllPanelEntries(schema).map(entry => entry.schema)
+export function getPanelSchemas(schema) {
+  return schema?.panels ? Object.values(schema.panels) : []
 }
 
 export function getAllPanelEntries(
+  api,
   schema,
   dataPath = null,
   schemaComponent = null,
   tabComponent = null
 ) {
   const panelSchema = getTypeOptions(schema)?.getPanelSchema?.(
+    api,
     schema,
     dataPath,
     schemaComponent

package/src/verbs.js

@@ -4,9 +4,11 @@ export default [
   'submit', 'submitted',
   'delete', 'deleted',
   'edit', 'edited',
+  'clear', 'cleared',
   'close', 'closed',
   'cancel', 'cancelled',
-  'drag', 'dragged'
+  'drag', 'dragged',
+  'login', 'logged in'
 ].reduce((verbs, verb) => {
   verbs[verb] = verb
   return verbs