@live-change/frontend-auto-form 0.9.77 → 0.9.78

package/front/src/components/crud/ActionButtons.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="flex flex-col-reverse md:flex-row justify-between items-center">
+    <div class="flex flex-col mt-2 md:mt-0">
+      <div v-if="savingDraft" class="text-surface-500 dark:text-surface-300 mr-2 flex flex-row items-center">
+        <i class="pi pi-spin pi-spinner mr-2" style="font-size: 1.23rem"></i>
+        <span>Executing...</span>
+      </div>
+      <div v-else-if="draftChanged" class="text-sm text-surface-500 dark:text-surface-300 mr-2">
+        Draft changed
+      </div>
+      <Message v-else-if="validationResult" severity="error" variant="simple" size="small" class="mr-2">
+        Before running, please correct the errors above.
+      </Message>
+    </div>
+    <div class="flex flex-row">
+      <slot name="submit" v-if="!validationResult">
+        <div class="ml-2">
+          <Button 
+            type="submit"
+            :label="submitting === true ? 'Executing...' : 'Execute'" 
+            :icon="submitting === true ? 'pi pi-spin pi-spinner' : 'pi pi-play'"
+            :disabled="submitting"
+          />         
+        </div>
+      </slot>
+      <slot name="reset" v-if="resetButton">
+        <div>
+          <Button type="reset" label="Reset" class="ml-2" :disabled="!changed" icon="pi pi-eraser"/>
+        </div>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+  import Message from "primevue/message"
+
+  import { ref, computed, onMounted, defineProps, defineEmits, toRefs, getCurrentInstance, unref } from 'vue'
+
+  const props = defineProps({
+    actionFormData: {
+      type: Object,
+      required: true,
+    },
+    resetButton: {
+      type: Boolean,
+      required: true,
+    },
+    options: {
+      type: Object,
+      default: () => ({})
+    },
+    i18n: {
+      type: String,
+      default: ''
+    }
+  })
+  const { actionFormData, resetButton, options, i18n } = toRefs(props)
+
+  const changed = computed(() => unref(actionFormData).changed.value)
+  const draftChanged = computed(() => unref(actionFormData).draftChanged?.value)
+  const savingDraft = computed(() => unref(actionFormData).savingDraft?.value)
+  const submitting = computed(() => unref(actionFormData).submitting?.value)
+  const propertiesErrors = computed(() => unref(actionFormData).propertiesErrors?.value)
+
+
+  const validationResult = computed(() => {
+    const errors = propertiesErrors.value
+    if(errors && Object.keys(errors).length > 0) {
+      return errors
+    }
+    return null
+  })
+
+</script>
+
+<style scoped>
+
+</style>

package/front/src/components/crud/ActionForm.vue

@@ -0,0 +1,102 @@
+<template>
+  <div v-if="actionFormData">
+    <div class="text-xl mb-2">
+      Service <strong>{{ service }}</strong>
+    </div>
+    <div class="text-2xl mb-6">
+      Action <strong>{{ action }}</strong>
+    </div>
+
+    <form @submit="handleSubmit" @reset="handleReset">
+      <div class="flex flex-col gap-4">
+        <auto-editor
+          :definition="actionFormData.action.definition"
+          v-model="actionFormData.value"
+          :rootValue="actionFormData.value"
+          :errors="actionFormData.propertiesErrors"
+          :i18n="i18n"
+        />
+
+        <ActionButtons
+          :actionFormData="actionFormData"
+          :resetButton="true"
+          :i18n="i18n"
+        />
+
+       <!--  <div class="flex justify-end mt-4 gap-2">
+          <Button
+            type="reset"
+            :label="'Reset'"
+            :icon="'pi pi-times'"
+            :disabled="actionFormData.submitting"
+            severity="danger"
+          />          
+          <Button 
+            type="submit"
+            :label="actionFormData.submitting === true ? 'Executing...' : 'Execute'" 
+            :icon="actionFormData.submitting === true ? 'pi pi-spin pi-spinner' : 'pi pi-play'"
+            :disabled="actionFormData.submitting"
+            severity="success"
+          />
+        </div> -->
+      </div>
+    </form>
+
+<!--     <pre>propertiesErrors = {{ actionFormData.propertiesErrors }}</pre>
+    <pre>definition = {{ actionFormData.action.definition }}</pre> -->
+  </div>
+</template>
+
+<script setup>
+
+  import { ref, computed, onMounted, defineProps, defineEmits, toRefs } from 'vue'
+  import Button from 'primevue/button'
+  import AutoEditor from '../form/AutoEditor.vue'
+  import ActionButtons from './ActionButtons.vue'
+  import { useToast } from 'primevue/usetoast'
+  const toast = useToast()
+
+  const props = defineProps({
+    service: {
+      type: String,
+      required: true,
+    },
+    action: {
+      type: String,
+      required: true,
+    },
+    i18n: {
+      type: String,
+      default: ''
+    }
+  })
+
+  const { service, action, i18n } = toRefs(props)
+
+  const emit = defineEmits(['done', 'error'])
+
+  import { useApi } from '@live-change/vue3-ssr'
+  const api = useApi()
+
+  import { actionData } from '@live-change/frontend-auto-form'
+
+  const actionFormData = await actionData({
+    service: service.value,
+    action: action.value,
+    i18n: i18n.value
+  })
+
+  const handleSubmit = (ev) => {
+    ev.preventDefault()
+    actionFormData.submit()
+  }
+
+  const handleReset = (ev) => {
+    ev.preventDefault()
+    actionFormData.reset()
+  }
+
+</script>
+
+<style scoped>
+</style> 

package/front/src/components/crud/EditorButtons.vue

@@ -66,22 +66,17 @@
   const savingDraft = computed(() => editor.value.savingDraft?.value)
   const sourceChanged = computed(() => editor.value.sourceChanged?.value)
   const saving = computed(() => editor.value.saving?.value)
-
+  const propertiesErrors = computed(() => editor.value.propertiesErrors?.value)
+  
   const appContext = getCurrentInstance().appContext
 
   import { validateData } from "@live-change/vue3-components"
   const validationResult = computed(() => {
-    const currentValue = {
-      ...(editor.value.identifiers),
-      ...unref(editor.value.value),
+    const errors = propertiesErrors.value
+    if(errors && Object.keys(errors).length > 0) {
+      return errors
     }
-    const validationResult = validateData(model.value, currentValue, 'validation', appContext,
-      props.propName, props.rootValue, true)
-    const softValidationResult = validateData(model.value, currentValue, 'softValidation', appContext,
-      props.propName, props.rootValue, true)
-    console.log("currentValue", currentValue)
-    console.log("validationResult", validationResult, softValidationResult)
-    return validationResult || softValidationResult
+    return null
   })
 
 </script>

package/front/src/components/crud/ModelEditor.vue

@@ -60,6 +60,7 @@
         :definition="modelDefinition"
         v-model="editor.value.value"
         :rootValue="editor.value.value"
+        :errors="editor.propertiesErrors"
         :i18n="i18n" />
       <EditorButtons :editor="editor" reset-button />
     </form>

package/front/src/components/form/ArrayInput.vue

@@ -47,7 +47,8 @@
       </div>
       <auto-input :modelValue="value" :definition="definition.of || definition.items"
                    @update:modelValue="value => updateItem(index, value)"
-                  :rootValue="props.rootValue" :propName="props.propName + '.' + index"
+                  :rootValue="props.rootValue" :errors="props.errors"
+                  :propName="props.propName + '.' + index"
                   :i18n="i18n" />
     </div>
     <div>
@@ -82,6 +83,10 @@
       type: Object,
       default: () => ({})
     },
+    errors: {
+      type: Object,
+      default: () => ({})
+    },
     propName: {
       type: String,
       default: ''

package/front/src/components/form/AutoEditor.vue

@@ -5,8 +5,9 @@
                 @update:modelValue="value => updateModelProperty(property, value)"
                 :definition="definition.properties[property]"
                 :label="property"
-                :rootValue="props.rootValue" :propName="(propName ? propName + '.' : '') + property"
-                :i18n="i18n"
+                :rootValue="props.rootValue" :errors="props.errors"
+                :propName="(propName ? propName + '.' : '') + property"
+                :i18n="i18n"                
                 class="col-span-12" />
   </div>
 </template>
@@ -38,10 +39,14 @@
       items: {
         type: String
       }
+    },
+    errors: {
+      type: Object,
+      default: () => ({})
     }
   })
 
-  const { modelValue, definition, propName, editableProperties } = toRefs(props)
+  const { modelValue, definition, propName, editableProperties, errors } = toRefs(props)
 
   const emit = defineEmits(['update:modelValue'])
 
@@ -58,7 +63,6 @@
     emit('update:modelValue', data)
   }
 
-
 </script>
 
 <style scoped>

package/front/src/components/form/AutoField.vue

@@ -10,7 +10,7 @@
                   :class="props.inputClass" :style="props.inputStyle"
                   :attributes="props.inputAttributes"
                   :propName="props.propName"
-                  :rootValue="props.rootValue"
+                  :rootValue="props.rootValue" :errors="props.errors"
                   @update:modelValue="value => emit('update:modelValue', value)"
                   :id="uid"
                   :i18n="i18n" />
@@ -81,6 +81,10 @@
       type: Object,
       default: () => ({})
     },
+    errors: {
+      type: Object,
+      default: () => ({})
+    },
     propName: {
       type: String,
       default: ''
@@ -99,7 +103,7 @@
 
   const emit = defineEmits(['update:modelValue'])
 
-  const { error, definition, modelValue } = toRefs(props)
+  const { error, definition, modelValue, errors } = toRefs(props)
 
   const definitionIf = computed(() => {
     if(definition.value?.if) {
@@ -129,12 +133,8 @@
 
   import { validateData } from "@live-change/vue3-components"
   const appContext = getCurrentInstance().appContext
-  const validationResult = computed(() => {
-    const validationResult = validateData(definition.value, modelValue.value, 'validation', appContext,
-      props.propName, props.rootValue, true)
-    const softValidationResult = validateData(definition.value, modelValue.value, 'softValidation', appContext,
-      props.propName, props.rootValue, true)
-    return validationResult || softValidationResult || error.value
+  const validationResult = computed(() => { 
+    return errors.value?.[props.propName] || error.value
   })
 
   function findValidation(name) {
@@ -189,6 +189,7 @@
     inputClass: [props.inputClass, { 'p-invalid': !!validationResult.value }],
     inputStyle: props.inputStyle,
     rootValue: props.rootValue,
+    errors: props.errors,
     propName: props.propName,
   }))
 

package/front/src/components/form/AutoInput.vue

@@ -27,6 +27,10 @@
       type: Object,
       default: () => ({})
     },
+    errors: {
+      type: Object,
+      default: () => ({})
+    },
     propName: {
       type: String,
       default: ''
@@ -85,6 +89,7 @@
         propName: props.propName,
         fieldName,
         rootValue: props.rootValue,
+        errors: props.errors,
         t, d, n, rt, te
       })
     }
@@ -98,6 +103,7 @@
     modelValue: modelValue.value,
     definition: definition.value,
     rootValue: props.rootValue,
+    errors: props.errors,
     propName: props.propName,
     i18n: props.i18n
   }))

package/front/src/components/form/GroupField.vue

@@ -4,7 +4,8 @@
     <auto-input :modelValue="modelValue" :definition="definition" :name="props.name"
                  :class="props.inputClass" :style="props.inputStyle"
                  :properties="props.inputAttributes"
-                 :rootValue="props.rootValue" :propName="props.propName"
+                 :rootValue="props.rootValue" :errors="props.errors"
+                  :propName="props.propName"
                  @update:modelValue="value => emit('update:modelValue', value)"
                 :i18n="props.i18n + props.propName.split('.').pop() + '.'" />
     <Message v-if="typeof validationResult == 'string'" severity="error" variant="simple" size="small">
@@ -51,6 +52,10 @@
       type: Object,
       default: () => ({})
     },
+    errors: {
+      type: Object,
+      default: () => ({})
+    },
     propName: {
       type: String,
       default: ''

package/front/src/logic/actionData.js

@@ -0,0 +1,230 @@
+import { useToast } from 'primevue/usetoast'
+import { usePath, live, useApi } from '@live-change/vue3-ssr'
+import { ref, computed, inject, watch, getCurrentInstance } from 'vue'
+import { synchronized, defaultData } from '@live-change/vue3-components'
+
+import { propertiesValidationErrors } from './validation.js'
+
+import { cyrb128 } from './utils.js'
+
+export default async function actionData(options) {
+  if(!options) throw new Error('options must be provided')
+
+  const {
+    parameters,
+    initialValue = {},
+
+    service: serviceName,    
+    action: actionName,
+
+    draft = true,    
+    recursive = true,
+    debounce = 600,    
+    timeField = 'lastUpdate',
+
+    doneToast = "Action done",
+    errorToast = "Action error",
+    resetToast = "Reset done",
+    savedDraftToast = "Draft saved",
+    discardedDraftToast = "Draft discarded",
+
+    onDone = ({ result, data }) => {},
+    onError = ({ error, data }) => { throw error } ,
+    onReset = () => {},
+
+    onDraftSaved = () => {},
+    onDraftDiscarded = () => {},        
+
+    appContext = getCurrentInstance().appContext,
+
+    toast = useToast(options.appContext),
+    path = usePath(options.appContext),
+    api = useApi(options.appContext),
+    workingZone = inject('workingZone', options.appContext),
+
+  } = options
+
+  if(!serviceName || !actionName) throw new Error('service and action must be defined')
+
+  const service = api.services[serviceName]
+  if(!service) throw new Error('service must be defined in options')
+  const action = service.actions[actionName]  
+  if(!action) throw new Error('action must be defined in options')
+  
+  let draftIdParts = []
+  let idKey = null
+  for(const [parameterName, parameter] of Object.entries(parameters || {})) {
+    if(parameter.type === 'id') {
+      idKey = parameterName
+    } else {
+      draftIdParts.push(parameterName)
+    }
+  }
+    
+  let draftId = (idKey ? parameters[idKey]
+    : draftIdParts.map(key => JSON.stringify(parameters[key])).join('_')) ?? 'any'
+  if(draftId.length > 16) {
+    draftId = cyrb128(draftId).slice(0, 16)
+  }
+  
+  const draftIdentifiers = {
+    actionType: serviceName, action: 'action', targetType: actionName, target: draftId || 'any'
+  }
+
+  const draftDataPath = (draft && path.draft.myDraft(draftIdentifiers)) || null
+
+  const createOrUpdateDraftAction = draft && api.actions.draft.setOrUpdateMyDraft
+  const removeDraftAction = draft && api.actions.draft.resetMyDraft
+
+  const propertiesServerErrors = ref({})
+  const lastSentData = ref(null)
+  const formData = ref(JSON.parse(JSON.stringify(initialValue)))
+  const done = ref(false)
+
+  let commandPromise = null
+  const submitting = ref(false)
+  async function submitData(data){
+    const requestData = JSON.parse(JSON.stringify({ ...data, ...parameters }))
+    if(commandPromise) await commandPromise // wait for previous save
+    submitting.value = true
+    commandPromise = (async () => {
+      propertiesServerErrors.value = {}
+      lastSentData.value = JSON.parse(JSON.stringify(requestData))
+      console.log("ACTION COMMAND DATA", requestData)
+      try {
+        const result = await action(requestData)
+        done.value = true
+        await onDone(result)
+        return result
+      } catch(e) {
+        console.log("ACTION COMMAND ERROR", e)
+        if(e.properties) {
+          propertiesServerErrors.value = e.properties
+        } else {
+          await onError(e)
+        }
+        return Error
+      } finally {
+        submitting.value = false
+        commandPromise = null        
+      }    
+    })()
+    if(workingZone) workingZone.addPromise('command:'+serviceName+':'+actionName, commandPromise)
+    return await commandPromise
+  }
+
+  if(draft) {
+    const draftData = await live(draftDataPath)     
+    function saveDraft(data){
+      return createOrUpdateDraftAction({ ...data, from: formData.value })
+    }
+    const source = computed(() => draftData.value?.data || initialValue)
+    const synchronizedData = synchronized({
+      source,
+      update: saveDraft,
+      updateDataProperty: 'data',
+      identifiers: draftIdentifiers,
+      recursive,
+      autoSave: true,
+      debounce,
+      timeField,
+      resetOnError: false,
+      onSave: () => {
+        onDraftSaved()
+        if(toast && savedDraftToast) toast.add({ severity: 'info', summary: savedDraftToast, life: 1500 })
+      },
+      onSaveError: (e) => {
+        console.error("DRAFT SAVE ERROR", e)
+        if(toast && saveDraftErrorToast)
+          toast.add({ severity: 'error', summary: saveDraftErrorToast, detail: e.message ?? e, life: 5000 })
+      }
+    })
+    const changed = computed(() =>
+      JSON.stringify(initialValue ?? {})
+        !== JSON.stringify({ ...synchronizedData.value.value, [timeField]: undefined })
+    )    
+
+    const propertiesErrors = computed(() => propertiesValidationErrors(
+      synchronizedData.value.value, parameters, action.definition, lastSentData.value,
+        propertiesServerErrors.value, appContext))
+
+    async function submit() {
+      const result = await submitData(synchronizedData.value.value)
+      if(result === Error) return // silent return on error, because it's handled in onError
+      if(draftData.value) await removeDraftAction(draftIdentifiers)
+      onDone(result)
+      if(toast && doneToast) toast.add({ severity: 'success', summary: doneToast, life: 1500 })
+    }
+
+    async function discardDraft() {
+      const discardPromise = removeDraftAction(draftIdentifiers)
+      if(workingZone)
+        workingZone.addPromise('discardDraft:'+serviceName+':'+actionName, discardPromise)
+      await discardPromise
+      onDraftDiscarded()
+      if(toast && discardedDraftToast) toast.add({ severity: 'info', summary: discardedDraftToast, life: 1500 })
+    }
+
+    async function reset() {
+      const discardPromise = removeDraftAction(draftIdentifiers)
+      if(workingZone)
+        workingZone.addPromise('discardDraft:'+serviceName+':'+actionName, discardPromise)
+      await discardPromise
+      synchronizedData.value.value = editableSavedData.value || defaultData(model)
+      if(toast && discardedDraftToast) toast.add({ severity: 'info', summary: resetToast, life: 1500 })
+      done.value = false
+      onReset()
+    }
+
+    return {
+      parameters,
+      initialValue,
+      value: synchronizedData.value,
+      changed,
+      submit,
+      submitting,
+      reset,
+      action,
+      discardDraft,      
+      propertiesErrors,      
+      lastSentData,
+      draftChanged: synchronizedData.changed,
+      saveDraft: synchronizedData.save,
+      savingDraft: synchronizedData.saving,
+      done: done,
+      draft: draftData
+    }
+
+  } else {
+    
+    async function submit() {
+      const result = await submitData(formData.value)
+      if(result === Error) return // silent return on error, because it's handled in onError
+      onSaved(result)
+      if(toast && doneToast) toast.add({ severity: 'success', summary: doneToast, life: 1500 })
+    }
+
+    const changed = computed(() =>
+      JSON.stringify(initialValue ?? {})
+        !== JSON.stringify(formData.value)
+    )    
+    
+    function reset() {
+      formData.value = JSON.parse(JSON.stringify(initialValue))
+    }
+
+    return {
+      parameters,
+      initialValue,
+      value: formData,
+      changed,
+      submit,
+      submitting,
+      done,
+      propertiesErrors,
+      reset      
+    }
+
+  }
+
+}

package/front/src/logic/editorData.js

@@ -1,28 +1,11 @@
 import { useToast } from 'primevue/usetoast'
 import { usePath, live, useApi } from '@live-change/vue3-ssr'
-import { ref, computed, inject, watch } from 'vue'
+import { ref, computed, inject, watch, getCurrentInstance } from 'vue'
 import { synchronized, defaultData } from '@live-change/vue3-components'
 
-function cyrb128(str) {
-  let h1 = 1779033703, h2 = 3144134277,
-      h3 = 1013904242, h4 = 2773480762;
-  for (let i = 0, k; i < str.length; i++) {
-      k = str.charCodeAt(i);
-      h1 = h2 ^ Math.imul(h1 ^ k, 597399067);
-      h2 = h3 ^ Math.imul(h2 ^ k, 2869860233);
-      h3 = h4 ^ Math.imul(h3 ^ k, 951274213);
-      h4 = h1 ^ Math.imul(h4 ^ k, 2716044179);
-  }
-  h1 = Math.imul(h3 ^ (h1 >>> 18), 597399067);
-  h2 = Math.imul(h4 ^ (h2 >>> 22), 2869860233);
-  h3 = Math.imul(h1 ^ (h3 >>> 17), 951274213);
-  h4 = Math.imul(h2 ^ (h4 >>> 19), 2716044179);
-  h1 ^= (h2 ^ h3 ^ h4), h2 ^= h1, h3 ^= h1, h4 ^= h1;
-  const data = new Uint32Array([h4>>>0, h3>>>0, h2>>>0, h1>>>0])
-  // convert to base64
-  const data8 = new Uint8Array(data.buffer, data.byteOffset, data.byteLength)
-  return btoa(String.fromCharCode(...data8))
-}
+import { propertiesValidationErrors } from './validation.js'
+
+import { cyrb128 } from './utils.js'
 
 export default function editorData(options) {
   if(!options) throw new Error('options must be provided')
@@ -54,10 +37,13 @@ export default function editorData(options) {
     onSaveError = () => {},
     onCreated = (createResult) => {},
 
-    toast = useToast(),
-    path = usePath(),
-    api = useApi(),
-    workingZone = inject('workingZone')
+
+    appContext = getCurrentInstance().appContext,
+
+    toast = useToast(options.appContext),
+    path = usePath(options.appContext),
+    api = useApi(options.appContext),
+    workingZone = inject('workingZone', options.appContext),
 
   } = options
 
@@ -123,27 +109,39 @@ export default function editorData(options) {
     ))
     const source = computed(() => editableDraftData.value || editableSavedData.value || defaultData(model))
 
+    const propertiesServerErrors = ref({})
+    const lastUploadedData = ref(null)
+
     let savePromise = null
     const saving = ref(false)
     async function saveData(data){
       const requestData = {
         ...(updateDataProperty ? { [updateDataProperty]: data } : data),
         ...identifiers
-      }
+      }    
       if(savePromise) await savePromise // wait for previous save
       saving.value = true
       savePromise = (async () => {
+        propertiesServerErrors.value = {}
+        lastUploadedData.value = JSON.parse(JSON.stringify(data))
+        console.log("SAVE DATA", requestData)
         try {
           if(createOrUpdateAction) {
-            return createOrUpdateAction(requestData)
+            return await createOrUpdateAction(requestData)
           }
           if(savedData.value) {
-            return updateAction(requestData)
+            return await updateAction(requestData)
           } else {
             const createResult = await createAction(requestData)
             await onCreated(createResult)
             return createResult
           }
+        } catch(e) {
+          console.log("SAVE ERROR", e)
+          if(e.properties) {
+            propertiesServerErrors.value = e.properties
+          }
+          throw e
         } finally {
           saving.value = false
           savePromise = null
@@ -167,7 +165,6 @@ export default function editorData(options) {
         autoSave: true,
         debounce,
         timeField,
-        isNew,
         resetOnError: false,
         onSave: () => {
           onDraftSaved()
@@ -183,12 +180,15 @@ export default function editorData(options) {
         JSON.stringify(editableSavedData.value ?? {})
            !== JSON.stringify({ ...synchronizedData.value.value, [timeField]: undefined })
       )
-
       const sourceChanged = computed(() =>
         JSON.stringify(draftData.value.from) 
           !== JSON.stringify({ ...synchronizedData.value.value, [timeField]: undefined })
       )
 
+      const propertiesErrors = computed(() => propertiesValidationErrors(
+        synchronizedData.value.value, identifiers, model, lastUploadedData.value,
+         propertiesServerErrors.value, appContext))
+
       async function save() {
         const saveResult = await saveData(synchronizedData.value.value)
         if(draftData.value) await removeDraftAction(draftIdentifiers)
@@ -203,7 +203,7 @@ export default function editorData(options) {
         await discardPromise
         onDraftDiscarded()
         if(toast && discardedDraftToast) toast.add({ severity: 'info', summary: discardedDraftToast, life: 1500 })
-      }
+      }    
 
       async function reset() {
         const discardPromise = removeDraftAction(draftIdentifiers)
@@ -225,7 +225,7 @@ export default function editorData(options) {
         discardDraft,
         model,
         isNew,
-        resetOnError: false,
+        propertiesErrors,
         draftChanged: synchronizedData.changed,
         saveDraft: synchronizedData.save,
         savingDraft: synchronizedData.saving,
@@ -255,6 +255,10 @@ export default function editorData(options) {
         }
       })
 
+      const propertiesErrors = computed(() => propertiesValidationErrors(
+        synchronizedData.value.value, identifiers, model, lastUploadedData.value,
+         propertiesServerErrors.value, appContext))
+
       async function reset() {
         synchronizedData.value.value = editableSavedData.value || defaultData(model)
         if(toast && discardedDraftToast) toast.add({ severity: 'info', summary: resetToast, life: 1500 })
@@ -269,6 +273,7 @@ export default function editorData(options) {
         saving: synchronizedData.saving,
         saved: savedData,
         savedPath: savedDataPath,
+        propertiesErrors,
         reset,
         model,
       }

package/front/src/logic/utils.js

@@ -0,0 +1,20 @@
+export function cyrb128(str) {
+  let h1 = 1779033703, h2 = 3144134277,
+      h3 = 1013904242, h4 = 2773480762;
+  for (let i = 0, k; i < str.length; i++) {
+      k = str.charCodeAt(i);
+      h1 = h2 ^ Math.imul(h1 ^ k, 597399067);
+      h2 = h3 ^ Math.imul(h2 ^ k, 2869860233);
+      h3 = h4 ^ Math.imul(h3 ^ k, 951274213);
+      h4 = h1 ^ Math.imul(h4 ^ k, 2716044179);
+  }
+  h1 = Math.imul(h3 ^ (h1 >>> 18), 597399067);
+  h2 = Math.imul(h4 ^ (h2 >>> 22), 2869860233);
+  h3 = Math.imul(h1 ^ (h3 >>> 17), 951274213);
+  h4 = Math.imul(h2 ^ (h4 >>> 19), 2716044179);
+  h1 ^= (h2 ^ h3 ^ h4), h2 ^= h1, h3 ^= h1, h4 ^= h1;
+  const data = new Uint32Array([h4>>>0, h3>>>0, h2>>>0, h1>>>0])
+  // convert to base64
+  const data8 = new Uint8Array(data.buffer, data.byteOffset, data.byteLength)
+  return btoa(String.fromCharCode(...data8))
+}

package/front/src/logic/validation.js

@@ -0,0 +1,45 @@
+import { validateData } from "@live-change/vue3-components"
+
+export function propertiesValidationErrors(rootValue, parameters, definition, lastData, propertiesServerErrors, appContext) {
+  const currentValue = {
+    ...parameters,
+    ...rootValue,
+  }
+
+  console.log("propertiesValidationErrors", rootValue, parameters, definition, 
+    lastData, propertiesServerErrors, appContext)
+
+  const validationResult = validateData(definition, currentValue, 'validation', appContext,
+    '', rootValue, true)
+
+  const softValidationResult = validateData(definition, currentValue, 'softValidation', appContext,
+    '', rootValue, true)
+
+  const serverValidationResult = {}
+  if(propertiesServerErrors) {
+    console.log("propertiesServerErrors", propertiesServerErrors, lastData, rootValue)
+    for(const propPathString in propertiesServerErrors) {
+      const propPath = propPathString.split('.')
+      let last = lastData
+      let current = rootValue
+      for(const prop of propPath) {
+        last = last?.[prop] ?? null
+        current = current?.[prop] ?? null
+      }          
+      if(JSON.stringify(last) === JSON.stringify(current)) {
+        serverValidationResult[propPathString] = propertiesServerErrors[propPathString]
+      }
+    }
+  }
+
+  console.log("currentValue", currentValue)
+  console.log("validationResult", validationResult, softValidationResult)
+  console.log("serverValidationResult", serverValidationResult)
+
+  return {
+    ...softValidationResult?.propertyErrors,
+    ...validationResult?.propertyErrors,    
+    ...serverValidationResult,
+  }
+  
+}

package/front/src/pages/Action.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="w-full lg:w-8/12 md:w-11/12">
+    <div class="bg-surface-0 dark:bg-surface-900 p-4 shadow-sm rounded-border">
+      <div class="text-xl mb-2">
+        Service <strong>{{ serviceName }}</strong>
+      </div>
+      <div class="text-2xl mb-4">
+        Action <strong>{{ actionName }}</strong>
+      </div>
+
+      <ActionForm 
+        :service="serviceName" 
+        :action="actionName"
+        @done="handleDone"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import { ref, computed, onMounted, defineProps, toRefs } from 'vue'
+  import ActionForm from '../components/crud/ActionForm.vue'
+
+  const props = defineProps({
+    serviceName: {
+      type: String,
+      required: true
+    },
+    actionName: {
+      type: String,
+      required: true
+    }
+  })
+  const { serviceName, actionName } = toRefs(props)
+
+  import { useApi } from '@live-change/vue3-ssr'
+  const api = useApi()
+
+  function handleDone(result) {
+    console.log('Action executed:', result)
+  }
+</script>
+
+<style scoped>
+</style> 

package/front/src/pages/Actions.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="w-full lg:w-8/12 md:w-11/12">
+    <div v-for="serviceWithActions of editableActionsByService"
+         class="bg-surface-0 dark:bg-surface-900 p-4 shadow-sm rounded-border">
+      <div class="text-xl mb-2">
+        Service <strong>{{ serviceWithActions.name }}</strong>
+      </div>
+      <div v-for="action of serviceWithActions.actions" class="mb-2 ml-4">
+        <div class="mb-1 flex flex-row flex-wrap items-center justify-between">
+          <div class="text-xl flex flex-row items-center mr-6">
+            <strong>{{ action.name }}</strong>
+            <span class="mx-1">action</span>
+          </div>
+          <div class="mt-2 md:mt-0">
+            <router-link :to="actionRoute(serviceWithActions.name, action)" class="no-underline">
+              <Button icon="pi pi-play" severity="success" :label="'Execute '+action.name" />
+            </router-link>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import { ref, computed, onMounted, defineProps, toRefs } from 'vue'
+  import Button from 'primevue/button'
+
+  const props = defineProps({
+    serviceName: {
+      type: String,
+      default: undefined
+    },
+  })
+  const { serviceName } = toRefs(props)
+
+  import { useApi } from '@live-change/vue3-ssr'
+  const api = useApi()
+
+  const editableActionsByService = computed(() => {
+    const results = []
+    for(const [currentServiceName, service] of Object.entries(api.services)) {
+      if(serviceName.value && currentServiceName !== serviceName.value) continue
+      const actions = Object.entries(service.actions || {})
+        .filter(([_, action]) => action.autoForm !== false)
+        .map(([name, action]) => ({
+          name,
+          action
+        }))
+      if(actions.length === 0) continue
+      const result = {
+        name: currentServiceName,
+        actions
+      }
+      results.push(result)
+    }
+    return results
+  })
+
+  function actionRoute(serviceName, action) {
+    return {
+      name: 'auto-form:action',
+      params: {
+        serviceName,
+        actionName: action.name
+      }
+    }
+  }
+</script>
+
+<style scoped>
+</style> 

package/front/src/router.js

@@ -8,6 +8,12 @@ export function autoFormRoutes(config = {}) {
       props: true
     }),
 
+    route({
+      name: 'auto-form:actions', path: prefix + '/actions/:serviceName?', meta: { },
+      component: () => import("./pages/Actions.vue"),
+      props: true
+    }),
+
     route({
       name: 'auto-form:editor', path: prefix + '/editor/:serviceName/:modelName/:identifiers*', meta: { },
       component: () => import("./pages/Editor.vue"),
@@ -26,6 +32,12 @@ export function autoFormRoutes(config = {}) {
       props: true
     }),
 
+    route({
+      name: 'auto-form:action', path: prefix + '/action/:serviceName/:actionName', meta: { },
+      component: () => import("./pages/Action.vue"),
+      props: true
+    }),
+
   ]
 }
 

package/index.js

@@ -10,6 +10,8 @@ export * from './front/src/components/form/inputConfigInjection.js'
 import editorData from './front/src/logic/editorData.js'
 export { editorData }
 
+import actionData from './front/src/logic/actionData.js'
+export { actionData }
 
 import AutoView from './front/src/components/view/AutoView.vue'
 import AutoViewField from './front/src/components/view/AutoViewField.vue'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@live-change/frontend-auto-form",
-  "version": "0.9.77",
+  "version": "0.9.78",
   "scripts": {
     "memDev": "node server/start.js memDev --enableSessions --initScript ./init.js --dbAccess",
     "localDevInit": "rm tmp.db; lcli localDev --enableSessions --initScript ./init.js",
@@ -22,16 +22,16 @@
   "type": "module",
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.7.2",
-    "@live-change/cli": "^0.9.77",
-    "@live-change/dao": "^0.9.77",
-    "@live-change/dao-vue3": "^0.9.77",
-    "@live-change/dao-websocket": "^0.9.77",
-    "@live-change/framework": "^0.9.77",
-    "@live-change/image-frontend": "^0.9.77",
-    "@live-change/image-service": "^0.9.77",
-    "@live-change/session-service": "^0.9.77",
-    "@live-change/vue3-components": "^0.9.77",
-    "@live-change/vue3-ssr": "^0.9.77",
+    "@live-change/cli": "^0.9.78",
+    "@live-change/dao": "^0.9.78",
+    "@live-change/dao-vue3": "^0.9.78",
+    "@live-change/dao-websocket": "^0.9.78",
+    "@live-change/framework": "^0.9.78",
+    "@live-change/image-frontend": "^0.9.78",
+    "@live-change/image-service": "^0.9.78",
+    "@live-change/session-service": "^0.9.78",
+    "@live-change/vue3-components": "^0.9.78",
+    "@live-change/vue3-ssr": "^0.9.78",
     "@vueuse/core": "^12.3.0",
     "codeceptjs-assert": "^0.0.5",
     "compression": "^1.7.5",
@@ -52,7 +52,7 @@
     "vue3-scroll-border": "0.1.6"
   },
   "devDependencies": {
-    "@live-change/codeceptjs-helper": "^0.9.77",
+    "@live-change/codeceptjs-helper": "^0.9.78",
     "codeceptjs": "^3.6.10",
     "generate-password": "1.7.1",
     "playwright": "1.49.1",
@@ -63,5 +63,5 @@
   "author": "Michał Łaszczewski <michal@laszczewski.pl>",
   "license": "ISC",
   "description": "",
-  "gitHead": "5998bcbd97bda91829bcf57b23e938d95d431144"
+  "gitHead": "747a9cb02377d924583925508f082c8dd5031d43"
 }