@live-change/frontend-auto-form 0.9.85 → 0.9.87

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

@@ -7,10 +7,41 @@
       Action <strong>{{ action }}</strong>
     </div>
 
-    <form @submit="handleSubmit" @reset="handleReset">
+    <div v-if="task">
+      <Task :task="rootTask" :tasks="tasksData" />
+      <pre>rootTask = {{ rootTask }}</pre>
+    </div>
+    <div v-else-if="resultWithType">      
+      <div class="text-xl mb-2">
+        Result:
+      </div>
+      <div class="text-sm text-gray-500">
+        <pre>{{ resultWithType }}</pre>
+      </div>
+    </div>
+    <form v-else @submit="handleSubmit" @reset="handleReset">
       <div class="flex flex-col gap-4">
+
+        <div v-for="[name, parameter] in Object.entries(actionFormData.parameters)"
+             class="flex flex-col mb-3">                    
+          <template v-if="!name.endsWith('Type')">
+            <div class="min-w-[8rem] font-medium">{{ actionFormData.action.definition.properties[name].label ?? name }}</div>    
+            <div>
+              <InjectedObjectIndentification v-if="actionFormData.parameters[name+'Type']
+                        ?? actionFormData.action.definition.properties[name]?.type 
+                        ?? actionFormData.action.definition.properties[name]?.type.split('_').length > 1"
+                :type="actionFormData.parameters[name+'Type']
+                        ?? actionFormData.action.definition.properties[name]?.type"
+                :object="actionFormData.parameters[name]"
+              />
+              <pre v-else>parameter</pre>
+            </div>
+          </template>
+        </div>
+
         <auto-editor
           :definition="actionFormData.action.definition"
+          :editableProperties="actionFormData.editableProperties"
           v-model="actionFormData.value"
           :rootValue="actionFormData.value"
           :errors="actionFormData.propertiesErrors"
@@ -49,10 +80,14 @@
 
 <script setup>
 
-  import { ref, computed, onMounted, defineProps, defineEmits, toRefs } from 'vue'
+  import { ref, computed, onMounted, defineProps, defineEmits, toRefs, watch } from 'vue'
   import Button from 'primevue/button'
   import AutoEditor from '../form/AutoEditor.vue'
   import ActionButtons from './ActionButtons.vue'
+  import { Task } from '@live-change/task-frontend'
+
+  import InjectedObjectIndentification from './InjectedObjectIndentification.vue'
+
   import { useToast } from 'primevue/usetoast'
   const toast = useToast()
 
@@ -68,34 +103,128 @@
     i18n: {
       type: String,
       default: ''
+    },
+    initialValue: {
+      type: Object,
+      default: () => ({})
+    },
+    parameters: {
+      type: Object,
+      default: () => ({})
     }
   })
 
-  const { service, action, i18n } = toRefs(props)
+  const { service, action, i18n, initialValue, parameters } = toRefs(props)
 
   const emit = defineEmits(['done', 'error'])
 
-  import { useApi } from '@live-change/vue3-ssr'
+  import { useApi, usePath, live } from '@live-change/vue3-ssr'
   const api = useApi()
+  const path = usePath()
+
+  import { useRouter } from 'vue-router'
+  const router = useRouter()
 
   import { actionData } from '@live-change/frontend-auto-form'
 
-  const actionFormData = await actionData({
+  const resultWithType = ref(null)  
+  const task = ref(null)
+
+  const tasksPath = computed(() => task.value && path.task.tasksByRoot({
+    root: task.value,
+    rootType: 'task_Task'
+  }))
+
+  const actionFormDataPromise = actionData({
     service: service.value,
     action: action.value,
-    i18n: i18n.value
+    i18n: i18n.value,
+    initialValue: initialValue.value,
+    parameters: parameters.value,
+    onDone: handleDone
+  })
+
+  const [
+    actionFormData,
+    tasksData
+  ] = await Promise.all([
+    actionFormDataPromise,
+    live(tasksPath)
+  ])
+
+  const returnType = computed(() => {
+    const returnType = actionFormData.action.definition.returns
+    return returnType.type
   })
 
-  const handleSubmit = (ev) => {
+  function handleSubmit(ev) {
     ev.preventDefault()
     actionFormData.submit()
   }
 
-  const handleReset = (ev) => {
+  function handleReset(ev) {
     ev.preventDefault()
     actionFormData.reset()
   }
 
+  function handleDone(result) {
+    console.log('handleDone', result)
+    handleResult(result, returnType.value)
+  }
+
+  function handleResult(result, type) {
+    console.log('handleResult', result, type)
+    task.value = null
+    resultWithType.value = null
+    if(type === 'task_Task') {
+      task.value = result
+    } else if(type.split('_').length === 1) {
+      if(typeof result === 'object') {
+        resultWithType.value = {
+          type: type,
+          result: result
+        }
+      } else { /// redirect to object view
+        router.push({
+          name: 'auto-form:view',
+          params: {
+            serviceName: service.value,
+            modelName: type.split('_')[0],
+            identifiers: [result]
+          }
+        })
+      }
+    } else {
+      resultWithType.value = {
+        type: type,
+        result: result
+      }
+    }
+  }
+
+  const rootTask = computed(() => {
+    if(task.value && tasksData.value) {
+      return tasksData.value.find(t => t.id === task.value)
+    }
+  })
+
+  const rootTaskDone = computed(() => {
+    if(rootTask.value) {
+      return rootTask.value.state === 'done'
+    }
+    return false
+  })
+
+/*   watch(rootTaskDone, (done) => {
+    if(done) {
+      const taskType = rootTask.value.type
+      const taskService = rootTask.value.service      
+      const taskDefinition = api.serviceDefinition(taskService).tasks[taskType]
+      handleResult(rootTask.value.result, taskDefinition.returns.type)
+    }
+  }, { immediate: true }) */
+
+
 </script>
 
 <style scoped>

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

@@ -98,7 +98,7 @@
       params: {
         serviceName: service.value,
         modelName: model.value,
-        identifiers: Object.values(objectIdentifiers(objectData.value))
+        id: objectData.value?.to ?? objectData.value?.id
       }
     }
   })

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

@@ -1,8 +1,22 @@
 <template>
-  <template v-if="typeof identificationConfig === 'string'">
+  <template v-if="identificationParts.length > 0">
     <span>
-      <i :class="[icon, 'mr-2']" style="font-size: 0.9em;"></i>{{ objectData[identificationConfig] }}
-    </span>    
+      <i v-if="modelDefinition.icon" :class="[modelDefinition.icon, 'mr-2']" style="font-size: 0.9em;"></i>
+      <template v-for="(part, index) in identificationParts">
+        <i v-if="part.icon" :class="[part.icon, 'mr-2']" style="font-size: 0.9em;"></i>
+        <span :class="{ 'mr-2': index < identificationParts.length - 1 }">
+          <span v-if="part.isObject">
+            <InjectedObjectIndentification :type="part.type" :object="part.value" />
+          </span>
+          <span v-else-if="part.field">
+            {{ part.value }}
+          </span>
+          <span v-else>
+            {{ part.text ?? '' }}
+          </span>
+        </span>
+      </template>
+    </span>
   </template>
   <template v-else>
     <span>      
@@ -13,7 +27,7 @@
 
 <script setup>
 
-  import { ref, computed, onMounted, defineProps, defineEmits, toRefs } from 'vue'
+  import { ref, computed, onMounted, defineProps, defineEmits, toRefs, defineAsyncComponent } from 'vue'
 
   const props = defineProps({
     objectType: {
@@ -70,9 +84,63 @@
     })
   })
 
+  function getDefinitionProperty(path) {
+    const parts = path.split('.')
+    let current = modelDefinition.value
+    for(const part of parts) {
+      if(part === '*') {
+        return current?.items ?? current?.of
+      } else {
+        current = current?.properties?.[part]
+      }
+    }
+    return current
+  }
+
+  const InjectedObjectIndentification = defineAsyncComponent(() => import('./InjectedObjectIndentification.vue'))
+
   const loadedObjectData = await live(objectDataPath)
   const objectData = computed(() => data.value || loadedObjectData.value)
 
+  function getObjectData(path) {
+    const parts = path.split('.')
+    let current = objectData.value
+    for(const part of parts) {
+      current = current[part]
+    }
+    return current
+  }
+
+  const identificationParts = computed(() => {
+    const config = identificationConfig.value
+    if(!config) return []
+    const configArray = Array.isArray(config) ? config : [config]
+    return configArray.map(fieldConfig => {      
+      if(typeof fieldConfig === 'string') {
+        const field = getDefinitionProperty(fieldConfig)
+        if(field) {
+          const isObject = field.type.indexOf('_') > 0                    
+          return { field: fieldConfig, isObject, type: field.type }
+        } else {
+          return { text: fieldConfig }
+        }
+      } else if(typeof fieldConfig === 'object') {
+        return fieldConfig
+      } else {
+        throw new Error('Unknown identification config: ' + JSON.stringify(fieldConfig))
+      }
+    }).map(part => {
+      if(part.type === 'any') {
+        part.type = getObjectData(part.field + 'Type')
+        part.isObject = (part.type && part.type.indexOf('_') > 0) || false
+      }
+      if(part.field) {
+        part.value = getObjectData(part.field)
+      }      
+      return part
+    })
+  })
+
 
   const icon = computed(() => {
     if(modelDefinition.value?.iconProperty) return objectData[modelDefinition.value?.iconProperty]

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

@@ -45,7 +45,7 @@
   })
   const { type, object, data, link, inline } = toRefs(props)
 
-  import AutoObjectIdentification from './DefaultObjectIdentification.vue'
+  import DefaultObjectIdentification from './DefaultObjectIdentification.vue'
 
   import { useApi, usePath, live } from '@live-change/vue3-ssr'
   const api = useApi()
@@ -64,7 +64,7 @@
       type: type.value,
       service: service.value,
       model: model.value
-    }, AutoObjectIdentification)
+    }, DefaultObjectIdentification)
   )
 
   const modelDefinition = computed(() => {
@@ -115,7 +115,7 @@
       params: {
         serviceName: service.value,
         modelName: model.value,
-        identifiers: Object.values(objectIdentifiers(objectData.value))
+        id: objectData.value?.to ?? objectData.value?.id
       }
     }
   })

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

@@ -19,17 +19,24 @@
       </div>
     </div>
 
-    <pre>parentObjects = {{ parentObjects }}</pre>
+<!--     <pre>parentObjects = {{ parentObjects }}</pre>
     <pre>scopesPath = {{ scopesPath }}</pre>
-    <pre>scopes = {{ scopes }}</pre>
+    <pre>scopes = {{ scopes }}</pre> -->
 
     <div class="">
       Service <strong>{{ service }}</strong>
     </div>
-    <div class="text-2xl mb-6">
-      <span v-if="isNew">Create </span>
-      <span v-else>Edit </span>
-      <strong>{{ model }}</strong>
+    <div class="flex flex-row flex-wrap justify-between align-items-top">
+      <div class="text-2xl mb-6">
+        <span v-if="isNew">Create </span>
+        <span v-else>Edit </span>
+        <strong>{{ model }}</strong>
+      </div>
+      <div v-if="!isNew" class="flex flex-row flex-wrap justify-between align-items-top gap-2">
+        <router-link :to="viewRoute">
+          <Button label="View" icon="pi pi-eye" class="p-button mb-6" />
+        </router-link>
+      </div>
     </div>
 
     <form v-if="editor" @submit="handleSave" @reset="handleReset">
@@ -162,11 +169,21 @@
     console.log("SAVED", saveResult, isNew.value, editor.value.isNew)
     if(saveResult && isNew.value && editor.value.isNew) {
       emit('created', saveResult)
+    } else {
+      emit('saved', saveResult)
     }
-    emit('saved', saveResult)
   }
 
-  const scopesPath = computed(() => path.scope.objectScopes({
+  const viewRoute = computed(() => editor.value?.saved && ({
+    name: 'auto-form:view',
+    params: {
+      serviceName: service.value,
+      modelName: model.value,
+      id: editor.value.saved?.value?.to ?? editor.value.saved?.value?.id
+    }
+  }))
+
+  const scopesPath = computed(() => parentObjects.value[0] && path.scope.objectScopes({
     objectType: parentObjects.value[0].objectType, /// TODO: support multiple parent objects!
     object: parentObjects.value[0].object
   }))

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

@@ -27,7 +27,7 @@
                     :key="JSON.stringify(modelsPathRangeConfig)+index"
                     :pathFunction="modelsPathRangeFunction"
                     :canLoadTop="false" canDropBottom
-                    loadBottomSensorSize="4000px" dropBottomSensorSize="3000px">
+                    loadBottomSensorSize="4000px" dropBottomSensorSize="7000px">
         <template #empty>
           <div class="text-xl text-surface-800 dark:text-surface-50 my-1 mx-4">
             No <strong>{{ pluralize(model[0].toLowerCase() +  model.slice(1)) }}</strong> found.
@@ -43,7 +43,7 @@
                 class="text-xl"
               />
             </router-link>
-            <div class="flex flex-row">
+            <div class="flex flex-row ml-4">
               <router-link :to="viewRoute(object)" class="no-underline">
                 <Button icon="pi pi-eye" severity="primary" label="View" class="mr-2" />
               </router-link>
@@ -70,9 +70,11 @@
       </div>
     </div>
 
-    <div v-if="modelDefinition.crud?.create" class="mt-2 flex flex-row justify-end mr-2">
-      <router-link :to="createRoute" class="no-underline2">
-        <Button icon="pi pi-plus" :label="'Create new '+model" />
+    <div v-if="modelDefinition.crud?.create" class="mt-2 flex flex-row justify-end mr-2 gap-2">
+      <router-link v-for="createButton in createButtons" :key="JSON.stringify(createButton.identifiers)"
+                   :to="createButton.route" class="no-underline2">
+        <Button v-if="createButton.as" icon="pi pi-plus" :label="'Create new '+model + ' as '+createButton.as" />
+        <Button v-else icon="pi pi-plus" :label="'Create new '+model" />
       </router-link>
     </div>
 
@@ -198,11 +200,11 @@
 
   function editRoute(object) {
     return {
-      name: 'auto-form:editor',
+      name: 'auto-form:edit',
       params: {
         serviceName: service.value,
         modelName: model.value,
-        identifiers: Object.values(objectIdentifiers(object))
+        id: object.to ?? object.id
       }
     }
   }
@@ -213,23 +215,62 @@
       params: {
         serviceName: service.value,
         modelName: model.value,
-        identifiers: Object.values(objectIdentifiers(object))
+        id: object.to ?? object.id
       }
     }
   }
 
-  const createRoute = computed(() => {
-    const identifiersObject =  viewsArray?.value[0]?.identifiers
-    if(!identifiersObject) return null
-    const identifiers = Object.values(identifiersObject)
+  function createRoute(identifiersObject) {
+    const identifiersWithNames = Object.entries(identifiersObject).flat()
     return {
-      name: 'auto-form:editor',
+      name: 'auto-form:create',
       params: {
         serviceName: service.value,
         modelName: model.value,
-        identifiers     
+        identifiersWithNames
       }
     }
+  }
+
+  const createButtons = computed(() => {
+    const model = modelDefinition.value
+    const results = []
+    for(const view of viewsArray.value) {
+      const identifiersObject = view?.identifiers
+      if(!identifiersObject) continue
+      
+      const identifierNames = Object.keys(identifiersObject)
+      const fieldParameters = identifierNames.filter(name => model.properties[name])
+      const otherParameters = identifierNames.filter(name => !model.properties[name])      
+
+      if(otherParameters.length > 0) {
+        const viewName = model.crud[view.name]
+        const viewDefinition = serviceDefinition.value.views[viewName]
+        for(const otherParameter of otherParameters) {
+          const otherParameterType = viewDefinition.properties[otherParameter].type
+          const modelParameters = Object.entries(model.properties)
+            .filter(([name, property]) => otherParameterType === property.type)
+          for(const [name, property] of modelParameters) {
+            const newIdentifiersObject = {
+              [name]: identifiersObject[otherParameter]
+            }
+            results.push({
+              identifiers: newIdentifiersObject,              
+              as: name,
+              route: createRoute(newIdentifiersObject)
+            })
+          }
+        }
+      } else {
+        results.push({ 
+          identifiers: identifiersObject,
+          route: createRoute(identifiersObject)
+        })
+      }
+      
+      
+    }
+    return results
   })
 
   function deleteObject(event, object) {

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

@@ -189,11 +189,11 @@
 
   function editRoute(object) {
     return {
-      name: 'auto-form:editor',
+      name: 'auto-form:edit',
       params: {
         serviceName: service.value,
         modelName: model.value,
-        identifiers: Object.values(objectIdentifiers(object))
+        id: object.to ?? object.id
       }
     }
   }
@@ -204,17 +204,17 @@
       params: {
         serviceName: service.value,
         modelName: model.value,
-        identifiers: Object.values(objectIdentifiers(object))
+        id: object.to ?? object.id
       }
     }
   }
 
   const createRoute = computed(() => ({
-    name: 'auto-form:editor',
+    name: 'auto-form:create',
     params: {
       serviceName: service.value,
       modelName: model.value,
-      identifiers: Object.values(objectIdentifiers(views.value[0].identifiers))
+      identifiersWithNames: Object.entries(objectIdentifiers(views.value[0].identifiers)).flat()
     }
   }))