@live-change/frontend-auto-form 0.9.162 → 0.9.164

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

@@ -154,7 +154,7 @@
 
   const returnType = computed(() => {
     const returnType = actionFormData.action.definition.returns
-    return returnType.type
+    return returnType?.type
   })
 
   function handleSubmit(ev) {
@@ -178,7 +178,7 @@
     resultWithType.value = null
     if(type === 'task_Task') {
       task.value = result
-    } else if(type.split('_').length === 1) {
+    } else if(type && type.split('_').length === 1) {
       if(typeof result === 'object') {
         resultWithType.value = {
           type: type,

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

@@ -0,0 +1,111 @@
+<template>
+  <prism-editor v-if="isMounted"
+                class="code-editor p-component p-textarea" :highlight="highlight"
+                :style="{ height: (codeLines * 1.35 + 1.23) + 'em' }"
+                v-model="code"
+                :readonly="readOnly" :line-numbers="codeLines > 1" />
+  <Message v-if="editResult.error" severity="error" variant="simple" size="small">
+    {{ editResult.error }}
+  </Message>
+  <Textarea class="hidden" />
+</template>
+
+<script setup>
+
+  import Textarea from 'primevue/textarea'
+  import { stringify } from "javascript-stringify"
+
+  import 'vue-prism-editor/dist/prismeditor.min.css'
+  import 'prismjs/themes/prism-coy.css'
+  import * as Prism from 'prismjs/components/prism-core'
+  import 'prismjs/components/prism-clike'
+  import 'prismjs/components/prism-javascript'
+
+  import Message from "primevue/message"
+
+  import { PrismEditor } from 'vue-prism-editor'
+
+  import { ref, computed, watch, onMounted } from 'vue'
+
+  const isMounted = ref(false)
+  onMounted(() => isMounted.value = true)
+
+  const props = defineProps({
+    initialCode: {
+      type: String
+    },
+    initialData: {
+    },
+    readOnly: {
+      type: Boolean,
+      default: false
+    },
+    env: {
+      type: Object
+    },
+    dbSugar: {
+      type: Object
+    }
+  })
+
+  const { readOnly, env, dbSugar } = props
+
+  const emit = defineEmits(['result'])
+
+
+  const code = ref(props.initialCode !== undefined ? props.initialCode : stringify(props.initialData, null, "  "))
+
+  watch(() => props.initialCode, () => {
+    if(props.initialCode == code.value) return
+    code.value = props.initialCode !== undefined ? props.initialCode : stringify(props.initialData, null, "  ")
+  })
+
+  function highlight(code) {
+    return Prism.highlight(code, Prism.languages.js, "js")
+  }
+
+  const codeLines = computed(() => code.value.split('\n').length)
+
+  const modified = computed(() => code.value != props.initialCode)
+
+  const editResult = computed(() => {
+    if(!modified.value && props.initialData) return { data: props.initialData, code: code.value }
+    try {
+      const $ = env || {}
+      const db = dbSugar || {}
+      //console.log("COMPILE CODE", code.value)
+      const result = eval(`(${code.value})`)
+      if(result === false) return { data: false, code: code.value }
+      if(result) return { data: result, code: code.value }
+      return { error: 'empty' }
+    } catch(e) {
+      if(e instanceof SyntaxError) {
+        if(e.lineNumber) return {
+          error: `${e.message} at ${e.lineNumber}:${e.columnNumber - (e.lineNumber ? 0 : -1)}`
+        }
+      }
+      return { error: e.message }
+    }
+  })
+
+  function reset() {
+    code.value = props.initialCode !== undefined ? props.initialCode : stringify(props.initialData, null, "  ")
+  }
+
+  watch(() => editResult.value, () => emit('result', editResult.value))
+
+  defineExpose({ reset })
+
+</script>
+
+<style lang="scss">
+  .code-editor {
+    font-family: monospace;
+    outline: none;
+    .prism-editor__container {
+      textarea {
+        outline: none;
+      }
+    }
+  }
+</style>

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

@@ -0,0 +1,81 @@
+<template>
+  <div>
+    
+    <CodeEditor :readOnly="false" :initialData="initialData" @result="result => handleEditResult(result)"
+      :ref="el => editorElementFound(el)" />
+
+  </div>
+</template>
+
+<script setup>
+
+  import CodeEditor from './CodeEditor.vue'
+  import Textarea from 'primevue/textarea'
+
+  import { defineProps, defineEmits, toRefs, ref, defineModel, computed, watch } from 'vue'
+  import { useElementSize } from '@vueuse/core'
+
+  const props = defineProps({
+    definition: {
+      type: Object
+    },
+    properties: {
+      type: Object,
+      default: () => ({})
+    },
+    rootValue: {
+      type: Object,
+      default: () => ({})
+    },
+    propName: {
+      type: String,
+      default: ''
+    },
+    i18n: {
+      type: String,
+      default: ''
+    }
+  })
+
+  const { definition, properties, rootValue, propName, i18n: i18nPrefix } = toRefs(props)
+
+  const model = defineModel({
+    required: true
+  })
+  
+
+  const initialData = ref(JSON.parse(JSON.stringify(model.value ?? null)))
+  const edited = ref(false)
+  let editTimeout = null
+
+  function handleEditResult(result) {
+    edited.value = true
+    model.value = result.data
+    if(editTimeout) clearTimeout(editTimeout)
+    editTimeout = setTimeout(() => {
+      edited.value = false
+      editTimeout = null
+    }, 1000)
+  }
+
+  watch(() => model.value, currentData => {
+    const refresh = !edited.value
+    initialData.value = JSON.parse(JSON.stringify(currentData))
+    if(refresh) {
+      //editedData.value = JSON.parse(currentData)
+      setTimeout(() => {
+        codeEditor.value.reset()
+      })
+    }
+  })
+
+  const codeEditor = ref()
+  function editorElementFound(element) {
+    codeEditor.value = element
+  }
+
+</script>
+
+<style>
+ 
+</style>

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

@@ -0,0 +1,142 @@
+<template>
+  <div>
+    <div ref="selectElement" class="p-select p-component p-inputwrapper w-full" @click="toggleObjectPicker">
+      <span v-if="!(model?.name && model?.service)" class="p-select-label p-placeholder" tabindex="0" role="combobox">
+        <span>
+          Select trigger 
+        </span>        
+      </span>
+      <span v-else class="p-select-label">
+        <span>
+          {{ model.service }} - {{ model.name }} 
+        </span>
+      </span>
+      <div class="p-select-dropdown" data-pc-section="dropdown">
+        <ChevronDownIcon />
+      </div>
+    </div>
+
+    <!-- <pre>objt = {{ objectType }}</pre> -->
+
+    <Popover ref="triggerPickerPopover" :pt="{
+      root: {
+        class: 'trigger-picker-popover overflow-y-auto',
+        style: {
+          minWidth: `${width}px`,
+          maxHeight: `calc(50vh - 30px)`
+        }
+      }
+    }">
+      <TriggerPicker v-model="model" :definition="definition" :properties="properties"
+                    :rootValue="rootValue" :propName="propName" :i18n="i18n" @selected="handleSelected" />
+    </Popover>
+
+    <!-- needed to autoload styles: -->
+    <Select class="hidden" :options="[1,2,3]" />
+
+    <AutoField v-if="triggerDefinition" v-model="triggerProperties"
+               :definition="{ ...triggerDefinition, type: 'Object' }" 
+               :rootValue="rootValue" :propName="propName+'.properties'"
+               :i18n="i18n" label="trigger.properties" />
+
+    <div class="flex items-center gap-2 mt-2">
+      <ToggleSwitch v-model="returnTask" id="returnTask" />
+      <label for="returnTask">Trigger returns task to wait for</label>
+    </div>
+
+  </div>
+</template>
+
+<script setup>
+  import ChevronDownIcon from '@primevue/icons/chevrondown'
+  import Select from 'primevue/select'
+  import Popover from 'primevue/popover'
+  import ToggleSwitch from 'primevue/toggleswitch'
+  import TriggerPicker from './TriggerPicker.vue'
+    
+  import AutoField from './AutoField.vue'
+
+  import { defineProps, defineEmits, toRefs, ref, defineModel, computed } from 'vue'
+  import { useElementSize } from '@vueuse/core'
+
+  const props = defineProps({
+    definition: {
+      type: Object
+    },
+    properties: {
+      type: Object,
+      default: () => ({})
+    },
+    rootValue: {
+      type: Object,
+      default: () => ({})
+    },
+    propName: {
+      type: String,
+      default: ''
+    },
+    i18n: {
+      type: String,
+      default: ''
+    }
+  })
+
+  const { definition, properties, rootValue, propName, i18n: i18nPrefix } = toRefs(props)
+
+  const model = defineModel({
+    required: true
+  })
+
+  import { useApi } from '@live-change/vue3-ssr'
+  const api = useApi()
+
+  const triggerPickerPopover = ref()
+  const selectElement = ref()
+  const { width } = useElementSize(selectElement)
+
+  const toggleObjectPicker = (event) => {
+    triggerPickerPopover.value.toggle(event)
+  }
+
+  const handleSelected = (object) => {
+    triggerPickerPopover.value.hide()
+  }
+
+  const triggerDefinition = computed(() => {
+    if(!model.value?.service || !model.value?.name) return null
+    const service = api.metadata.api.value.services.find(s => s.name === model.value.service)
+    if(!service) return null
+    return service.triggers[model.value.name][0]
+  })
+
+  const triggerProperties = computed({
+    get() {
+      return model.value?.properties
+    },
+    set(value) {
+      model.value = { ...(model.value ?? {}), properties: value }
+    }
+  })
+
+  const returnTask = computed({
+    get() {
+      return model.value?.returnTask
+    },
+    set(value) {
+      model.value = { ...(model.value ?? {}), returnTask: value }
+    }
+  })
+
+</script>
+
+<style>
+  .trigger-picker-popover {
+    margin-top: 1px;
+  }
+  .trigger-picker-popover:before {
+    display: none;
+  }
+  .trigger-picker-popover:after {
+    display: none;
+  }
+</style>

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

@@ -0,0 +1,145 @@
+<template>
+  <div>
+    <div>
+      <div v-if="!(model?.service)" class="p-1 py-2 sticky top-0 z-10">
+        <div class="flex flex-col gap-2">
+    <!--       <label :for="`type-select-${uid}`">{{ t('objectPicker.selectObjectType') }}</label> -->
+          <!-- <Select v-model="selectedService" :options="serviceOptions" :id="`service-select-${uid}`"
+                  :placeholder="t('triggerPicker.selectService')" /> -->
+          <div class="text-sm text-surface-600 dark:text-surface-400 mb-2">{{ t('triggerPicker.selectService') }}</div>
+          <div class="flex flex-col gap-2">
+            <div v-for="service in serviceOptions" :key="service"
+                 class="p-2 hover:bg-surface-100 dark:hover:bg-surface-800 cursor-pointer"
+                 @click="selectedService = service">
+              {{ service }}
+            </div>
+          </div>        
+        </div>
+      </div>
+
+      <div v-if="model?.service">
+        <div class="text-sm text-surface-600 dark:text-surface-400 mb-2">
+          {{ t('triggerPicker.selectedService') }} {{ model.service }}
+          <Button class="ml-2" icon="pi pi-times" size="small" outlined rounded @click="selectedService = null" />
+        </div>
+        <div class="text-sm text-surface-600 dark:text-surface-400 mb-2">{{ t('triggerPicker.selectTrigger') }}</div>
+        <div class="flex flex-col gap-2">
+          <div v-for="trigger in triggerOptions" :key="trigger"
+               class="p-2 hover:bg-surface-100 dark:hover:bg-surface-800 cursor-pointer"
+               @click="selectedTrigger = trigger">
+            {{ trigger }}
+          </div>
+        </div>
+      </div>
+    </div>
+
+
+    <!-- <pre>isTypeNeeded = {{ isTypeNeeded }}</pre>
+    <pre>typePropertyName = {{ typePropertyName }}</pre>
+    <pre>typePropertyPath = {{ typePropertyPath }}</pre>
+    <pre>typeModel = {{ typeModel }}</pre> -->
+    <!-- <div>
+      <pre>objectsPathRangeConfig = {{ objectsPathRangeConfig }}</pre>
+      <pre>objectsPathRangeFunction = {{ objectsPathRangeFunction }}</pre>
+      <pre>selectedType = {{ selectedType }}</pre>
+      <pre>definition = {{ definition }}</pre>
+      <pre>properties = {{ properties }}</pre>
+      <pre>typeOptions = {{ typeOptions }}</pre>
+      <pre>model = {{ model }}</pre>
+    </div> -->
+  </div>
+</template>
+
+<script setup>
+  import Select from 'primevue/select'
+  import Button from 'primevue/button'
+  import AutoObjectIdentification from '../crud/DefaultObjectIdentification.vue'
+  import { RangeViewer, injectComponent } from "@live-change/vue3-components"
+
+  import { defineProps, defineEmits, toRefs, ref, defineModel, computed, useId, inject, unref } from 'vue'
+  import pluralize from 'pluralize'
+
+  const uid = useId()
+
+  const props = defineProps({
+    definition: {
+      type: Object
+    },
+    properties: {
+      type: Object,
+      default: () => ({})
+    },
+    rootValue: {
+      type: Object,
+      default: () => ({})
+    },
+    propName: {
+      type: String,
+      default: ''
+    },
+    i18n: {
+      type: String,
+      default: ''
+    },
+    showServiceName: {
+      type: Boolean,
+      default: false
+    },
+    view: {
+      type: String,
+      default: 'range'
+    } 
+  })
+
+  const { definition, properties, rootValue, propName, i18n, view } = toRefs(props)
+
+  const model = defineModel({
+    required: true
+  })
+
+  const emit = defineEmits(['selected'])
+
+  import { useI18n } from 'vue-i18n'
+  const { t: tI18n, te } = useI18n()
+  const t = (key, ...params) => tI18n(
+    te(i18n.value + propName.value + key) 
+    ? i18n.value + propName.value + key 
+    : key, ...params
+  )
+
+  import { useApi } from '@live-change/vue3-ssr'
+  const api = useApi()
+  const serviceOptions = computed(() => {
+    return api.metadata.api.value.services.map(s => s.name)
+  })
+
+  const selectedService = computed({
+    get() {
+      return model.value?.service
+    },
+    set(value) {
+      model.value = { ...(model.value ?? {}), service: value }
+    }
+  })
+
+  const triggerOptions = computed(() => {
+    if(!selectedService.value) return []
+    const service = api.metadata.api.value.services.find(s => s.name === selectedService.value)
+    if(!service) return []
+    return Object.keys(service.triggers)
+  })
+
+  const selectedTrigger = computed({
+    get() {
+      return model.value?.name
+    },
+    set(value) {
+      model.value = { ...(model.value ?? {}), name: value }
+      emit('selected', model.value)
+    }
+  })
+
+</script>
+
+<style scoped>
+</style>

package/front/src/components/form/provideAutoInputConfiguration.js

@@ -73,6 +73,10 @@ types.Boolean = inputs.switch = {
 
 types.any = inputs.object = inputConfig(() => import('./ObjectInput.vue'))
 
+inputs.json = inputConfig(() => import('./JsonInput.vue'))
+
+inputs.trigger = inputConfig(() => import('./TriggerInput.vue'))
+
 
 export function provideAutoInputConfiguration() {
   for(let type in types) {

package/front/src/logic/actionData.js

@@ -6,6 +6,7 @@ import { synchronized, defaultData } from '@live-change/vue3-components'
 import { propertiesValidationErrors } from './validation.js'
 
 import { cyrb128 } from './utils.js'
+import deepmerge from 'deepmerge'
 
 export default async function actionData(options) {
   if(!options) throw new Error('options must be provided')
@@ -81,7 +82,16 @@ export default async function actionData(options) {
 
   const propertiesServerErrors = ref({})
   const lastSentData = ref(null)
-  const formData = ref(JSON.parse(JSON.stringify(initialValue)))
+
+  console.log("INITIAL VALUE", initialValue)
+  console.log("DEFAULT DATA", defaultData(action.definition))
+
+  const mergedInitialValue = deepmerge(
+    defaultData(action.definition),
+    JSON.parse(JSON.stringify(initialValue))
+  )
+
+  const formData = ref(mergedInitialValue)
   const done = ref(false)
 
   let commandPromise = null
@@ -121,7 +131,7 @@ export default async function actionData(options) {
     function saveDraft(data){
       return createOrUpdateDraftAction({ ...data, from: formData.value })
     }
-    const source = computed(() => draftData.value?.data || initialValue)
+    const source = computed(() => draftData.value?.data || mergedInitialValue)
     const synchronizedData = synchronized({
       source,
       update: saveDraft,
@@ -143,7 +153,7 @@ export default async function actionData(options) {
       }
     })
     const changed = computed(() =>
-      JSON.stringify(initialValue ?? {})
+      JSON.stringify(mergedInitialValue ?? {})
         !== JSON.stringify({ ...synchronizedData.value.value, [timeField]: undefined })
     )    
 
@@ -172,7 +182,7 @@ export default async function actionData(options) {
       if(workingZone)
         workingZone.addPromise('discardDraft:'+serviceName+':'+actionName, discardPromise)
       await discardPromise
-      synchronizedData.value.value = editableSavedData.value || defaultData(model)
+      synchronizedData.value.value = editableSavedData.value || JSON.parse(JSON.stringify(mergedInitialValue))
       if(toast && discardedDraftToast) toast.add({ severity: 'info', summary: resetToast, life: 1500 })
       done.value = false
       onReset()
@@ -181,6 +191,7 @@ export default async function actionData(options) {
     return {
       parameters,
       initialValue,
+      mergedInitialValue,
       editableProperties,
       value: synchronizedData.value,
       changed,
@@ -207,12 +218,12 @@ export default async function actionData(options) {
     }
 
     const changed = computed(() =>
-      JSON.stringify(initialValue ?? {})
+      JSON.stringify(mergedInitialValue ?? {})
         !== JSON.stringify(formData.value)
     )    
     
     function reset() {
-      formData.value = JSON.parse(JSON.stringify(initialValue))
+      formData.value = JSON.parse(JSON.stringify(mergedInitialValue))
     }
 
     return {

package/front/src/logic/editorData.js

@@ -93,7 +93,7 @@ export default function editorData(options) {
   const removeDraftAction = draft && api.actions.draft.resetMyDraft
 
   return Promise.all([
-    live(savedDataPath), live(draftDataPath)
+    live(savedDataPath, appContext), live(draftDataPath, appContext)
   ]).then(([savedData, draftData]) => {
 
     const isNew = computed(() => !savedData.value)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@live-change/frontend-auto-form",
-  "version": "0.9.162",
+  "version": "0.9.164",
   "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.162",
-    "@live-change/dao": "^0.9.162",
-    "@live-change/dao-vue3": "^0.9.162",
-    "@live-change/dao-websocket": "^0.9.162",
-    "@live-change/framework": "^0.9.162",
-    "@live-change/image-frontend": "^0.9.162",
-    "@live-change/image-service": "^0.9.162",
-    "@live-change/session-service": "^0.9.162",
-    "@live-change/vue3-components": "^0.9.162",
-    "@live-change/vue3-ssr": "^0.9.162",
+    "@live-change/cli": "^0.9.164",
+    "@live-change/dao": "^0.9.164",
+    "@live-change/dao-vue3": "^0.9.164",
+    "@live-change/dao-websocket": "^0.9.164",
+    "@live-change/framework": "^0.9.164",
+    "@live-change/image-frontend": "^0.9.164",
+    "@live-change/image-service": "^0.9.164",
+    "@live-change/session-service": "^0.9.164",
+    "@live-change/vue3-components": "^0.9.164",
+    "@live-change/vue3-ssr": "^0.9.164",
     "@vueuse/core": "^12.3.0",
     "codeceptjs-assert": "^0.0.5",
     "compression": "^1.7.5",
@@ -52,7 +52,7 @@
     "vue3-scroll-border": "0.1.7"
   },
   "devDependencies": {
-    "@live-change/codeceptjs-helper": "^0.9.162",
+    "@live-change/codeceptjs-helper": "^0.9.164",
     "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": "59cd1485ca6d76bd87a6634a92d6e661e5803d5e"
+  "gitHead": "38f9fb8b01a9527d8f6036e174edd1fa41443301"
 }