@live-change/frontend-auto-form 0.9.6 → 0.9.8

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

@@ -0,0 +1,79 @@
+<template>
+  <template v-if="typeof identificationConfig === 'string'">
+    <span><i class="pi pi-box mr-1"></i>{{ objectData[identificationConfig] }}</span>
+  </template>
+  <template v-else>
+    <span>
+      <i class="pi pi-box mr-1"></i>
+      <strong>{{ objectType }}</strong>: {{ object ?? objectData.to ?? objectData.id }}
+    </span>
+  </template>
+</template>
+
+<script setup>
+
+  import { ref, computed, onMounted, defineProps, defineEmits, toRefs } from 'vue'
+
+  const props = defineProps({
+    objectType: {
+      type: String,
+      required: true
+    },
+    object: {
+      type: String,
+      required: true
+    },
+    data: {
+      type: Object,
+      default: null
+    },
+    inline: {
+      type: Boolean,
+      default: false
+    }
+  })
+  const { objectType, object, data, inline } = toRefs(props)
+
+  import { useApi, usePath, live } from '@live-change/vue3-ssr'
+  const api = useApi()
+  const path = usePath()
+
+  const serviceAndModel = computed(() => {
+    const [service, model] = objectType.value.split('_')
+    return { service, model }
+  })
+  const service = computed(() => serviceAndModel.value.service)
+  const model = computed(() => serviceAndModel.value.model)
+
+  const modelDefinition = computed(() => {
+    return api.services?.[service.value]?.models?.[model.value]
+  })
+
+  const identificationViewName = computed(() => {
+    return modelDefinition.value?.crud?.identification || modelDefinition.value?.crud?.read
+  })
+
+  const identificationConfig = computed(() => {
+    return modelDefinition.value?.identification
+  })
+
+  const objectDataPath = computed(() => {
+    if(data.value) return null
+    if(!identificationConfig.value) return null
+    const viewName = identificationViewName.value
+    if(!viewName) return null
+    const modelName = model.value
+    return path[service.value][viewName]({
+      [modelName[0].toLowerCase() + modelName.slice(1)]: object.value
+    })
+  })
+
+  const loadedObjectData = await live(objectDataPath)
+  const objectData = computed(() => data.value || loadedObjectData.value)
+
+
+</script>
+
+<style scoped>
+
+</style>

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

@@ -1,17 +1,46 @@
 <template>
-
+  <div class="flex flex-column-reverse md:flex-row justify-content-between align-items-center mt-3">
+    <div class="flex flex-column mt-2 md:mt-0">
+      <div v-if="savingDraft" class="text-500 mr-2 flex flex-row align-items-center">
+        <i class="pi pi-spin pi-spinner mr-2" style="font-size: 1.23rem"></i>
+        <span>Saving draft...</span>
+      </div>
+      <div v-else-if="draftChanged" class="text-sm text-500 mr-2">
+        Draft changed
+      </div>
+      <div v-else-if="validationResult" class="font-semibold p-error mr-2">
+        Before saving, please correct the errors above.
+      </div>
+      <div v-else-if="!changed" class="">
+        No changes to save.
+      </div>
+    </div>
+    <div class="flex flex-row">
+      <slot name="submit" v-if="!validationResult">
+        <div class="ml-2">
+          <Button v-if="exists" type="submit" :label="'Save '+model.name" :disabled="!changed" icon="pi pi-save" />
+          <Button v-else type="submit" :label="'Create '+model.name" :disabled="!changed" icon="pi pi-sparkles" />
+        </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 { ref, computed, onMounted, defineProps, defineEmits, toRefs } from 'vue'
+  import { ref, computed, onMounted, defineProps, defineEmits, toRefs, getCurrentInstance } from 'vue'
 
   const props = defineProps({
     editor: {
       type: Object,
       required: true,
     },
-    discardDraft: {
+    resetButton: {
       type: Boolean,
       required: true,
     },
@@ -24,9 +53,29 @@
       default: ''
     }
   })
-  const { editor, discardDraft, options, i18n } = toRefs(props)
+  const { editor, resetButton, options, i18n } = toRefs(props)
+
+  const draftEnabled = computed(() => !!editor.value.discardDraft)
+  const model = computed(() => editor.value.model)
 
+  const changed = computed(() => editor.value.changed.value)
+  const exists = computed(() => !!editor.value.saved.value)
+  const draftChanged = computed(() => editor.value.draftChanged?.value)
+  const savingDraft = computed(() => editor.value.savingDraft?.value)
+  const sourceChanged = computed(() => editor.value.sourceChanged?.value)
+  const saving = computed(() => editor.value.saving?.value)
 
+  const appContext = getCurrentInstance().appContext
+
+  import { validateData } from "@live-change/vue3-components"
+  const validationResult = computed(() => {
+    const currentValue = editor.value.value.value
+    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)
+    return validationResult || softValidationResult
+  })
 
 </script>
 

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

@@ -1,13 +1,29 @@
 <template>
   <div>
-    <div v-if="editor">
+    <!--
+      <h4>identifiers as object</h4>
+      <pre>{{ identifiersObject }}</pre>
+
+      <h4>definition</h4>
+      <pre>{{ modelDefinition }}</pre>-->
+
+    <div class="">
+      Service <strong>{{ service }}</strong>
+    </div>
+    <div class="text-2xl mb-4">
+      <span v-if="isNew">Create </span>
+      <span v-else>Edit </span>
+      <strong>{{ model }}</strong>
+    </div>
+
+    <form v-if="editor" @submit="handleSave" @reset="handleReset">
       <auto-editor
           :definition="modelDefinition"
           v-model="editor.value.value"
           :rootValue="editor.value.value"
           :i18n="i18n" />
-      <EditorButtons :editor="editor" discard-draft />
-    </div>
+      <EditorButtons :editor="editor" reset-button />
+    </form>
   </div>
 </template>
 
@@ -68,7 +84,7 @@
         draft: draft.value,
         autoSave: true,
         ...options.value,
-        onSaved: (...args) => emit('saved', ...args),
+        onSaved: (...args) => handleSaved(...args),
         onDraftSaved: (...args) => emit('draftSaved', ...args),
         onDraftDiscarded: (...args) => emit('draftDiscarded', ...args),
         onSaveError: (...args) => emit('saveError', ...args),
@@ -82,10 +98,25 @@
     }
   })
 
-  const isNew = computed(() => editor.value.saved.value)
+  const isNew = computed(() => !editor?.value?.saved?.value)
+
+  function handleSave(ev) {
+    ev.preventDefault()
+    editor.value.save()
+  }
 
-  /// TODO: detect when we should change identifiers
-  // const savedIdentifiers
+  function handleReset(ev) {
+    ev.preventDefault()
+    editor.value.reset()
+  }
+
+  function handleSaved(saveResult) {
+    console.log("SAVED", saveResult, isNew.value, editor.value.isNew)
+    if(saveResult && isNew.value && editor.value.isNew) {
+      emit('created', saveResult)
+    }
+    emit('saved', saveResult)
+  }
 
 </script>
 

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

@@ -0,0 +1,147 @@
+<template>
+  <div class="w-full lg:w-8 md:w-11">
+<!--    <h4>definition</h4>
+    <pre>{{ modelDefinition }}</pre>-->
+
+    <div class="surface-card w-full p-3 shadow-1 border-round mb-2">
+      <div class="">
+        Service <strong>{{ service }}</strong>
+      </div>
+      <div class="text-2xl">
+        <strong>{{ pluralize(model) }}</strong>
+        <span class="ml-1">list</span>
+      </div>
+    </div>
+
+    <div class="surface-card p-3 shadow-1 border-round">
+      <range-viewer :key="JSON.stringify(modelsPathRangeConfig)"
+                    :pathFunction="modelsPathRangeFunction"
+                    :canLoadTop="false" canDropBottom
+                    loadBottomSensorSize="4000px" dropBottomSensorSize="3000px">
+        <template #empty>
+          <div class="text-xl text-800 my-3 mx-3">
+            No {{ pluralize(model) }} found
+          </div>
+        </template>
+        <template #default="{ item: object }">
+          <div class="flex flex-row align-items-center justify-content-between">
+            <ObjectIdentification
+              :objectType="service + '_' + model"
+              :object="object.to ?? object.id"
+              :data="object"
+            />
+            <div class="flex flex-row">
+              <router-link :to="editRoute(object)" class="no-underline">
+                <Button icon="pi pi-pencil" severity="primary" label="Edit" class="mr-2" />
+              </router-link>
+
+              <Button icon="pi pi-eraser" severity="primary" label="Delete" class="mr-2" />
+            </div>
+          </div>
+        </template>
+      </range-viewer>
+    </div>
+
+    <div class="mt-3 flex flex-row justify-content-end mr-2">
+      <router-link :to="createRoute" class="no-underline2">
+        <Button icon="pi pi-plus" :label="'Create new '+model" />
+      </router-link>
+    </div>
+
+
+  </div>
+</template>
+
+<script setup>
+
+  import { ref, computed, onMounted, defineProps, toRefs } from 'vue'
+  import { RangeViewer, injectComponent } from "@live-change/vue3-components"
+  import pluralize from 'pluralize'
+
+  const props = defineProps({
+    service: {
+      type: String,
+      required: true,
+    },
+    model: {
+      type: String,
+      required: true,
+    }
+  })
+  const { service, model } = toRefs(props)
+
+  import AutoObjectIdentification from './AutoObjectIdentification.vue'
+
+  const ObjectIdentification = computed(() =>
+    injectComponent({
+      name: 'ObjectIdentification',
+      type: service.value + '_' + model.value,
+      service: service.value,
+      model: model.value
+    }, AutoObjectIdentification)
+  )
+
+  import { useApi, usePath, live, reverseRange } from '@live-change/vue3-ssr'
+  const api = useApi()
+  const path = usePath()
+
+  const modelDefinition = computed(() => {
+    return api.services?.[service.value]?.models?.[model.value]
+  })
+
+  const modelsPathRangeConfig = computed(() => {
+    return {
+      service: service.value,
+      model: model.value,
+      definition: modelDefinition.value,
+      reverse: true
+    }
+  })
+  const modelsPathRangeFunction = computed(() => {
+    const config = modelsPathRangeConfig.value
+    const rangeView = config.definition?.crud?.range
+    return (range) => path[config.service][rangeView]({
+      ...(config.reverse ? reverseRange(range) : range),
+    })
+  })
+
+  function objectIdentifiers(object) {
+    const identifiers = {}
+    for(const identifierDefinition of modelDefinition.value.identifiers) {
+      if(typeof identifierDefinition === 'string') {
+        identifiers[identifierDefinition] = object[identifierDefinition]
+      } else {
+        if(identifierDefinition.field === 'id') {
+          identifiers[identifierDefinition.name] = object?.to ?? object.id
+        } else {
+          identifiers[identifierDefinition.name] = object[identifierDefinition.field]
+        }
+      }
+    }
+    return identifiers
+  }
+
+  function editRoute(object) {
+    return {
+      name: 'auto-form:editor',
+      params: {
+        serviceName: service.value,
+        modelName: model.value,
+        identifiers: Object.values(objectIdentifiers(object))
+      }
+    }
+  }
+
+  const createRoute = computed(() => ({
+    name: 'auto-form:editor',
+    params: {
+      serviceName: service.value,
+      modelName: model.name
+    }
+  }))
+
+</script>
+
+<style scoped>
+
+</style>

package/front/src/logic/editorData.js

@@ -24,10 +24,12 @@ export default function editorData(options) {
     discardedDraftToast = "Draft discarded",
     saveDraftErrorToast = "Error saving draft",
     saveErrorToast = "Error saving",
+    resetToast = "Reset done",
 
     onSaved = () => {},
     onDraftSaved = () => {},
     onDraftDiscarded = () => {},
+    onReset = () => {},
     onSaveError = () => {},
     onCreated = (createResult) => {},
 
@@ -57,12 +59,8 @@ export default function editorData(options) {
   let draftIdParts = []
   for(const identifier of identifiersNames) {
     if(typeof identifier === 'object') {
-      for(const [key, value] of Object.entries(identifier)) {
-        if(value === 'id') {
-          idKey = key
-        }
-        draftIdParts.push(value)
-      }
+      if(identifier.field === 'id') idKey = identifier.name
+      draftIdParts.push('id')
     } else {
       draftIdParts.push(identifier)
     }
@@ -108,6 +106,9 @@ export default function editorData(options) {
       saving.value = true
       savePromise = (async () => {
         try {
+          if(createOrUpdateAction) {
+            return createOrUpdateAction(requestData)
+          }
           if(savedData.value) {
             return updateAction(requestData)
           } else {
@@ -122,7 +123,7 @@ export default function editorData(options) {
       })()
       if(!autoSave && workingZone)
         workingZone.addPromise('save:'+serviceName+':'+modelName, savePromise.catch(() => {}))
-      await savePromise
+      return await savePromise
     }
 
     if(draft) {
@@ -138,6 +139,7 @@ export default function editorData(options) {
         autoSave: true,
         debounce,
         timeField,
+        isNew,
         resetOnError: false,
         onSave: () => {
           onDraftSaved()
@@ -151,14 +153,14 @@ export default function editorData(options) {
       })
 
       const changed = computed(() =>
-        JSON.stringify(editableSavedData.value) !== JSON.stringify(synchronizedData.value.value))
+        JSON.stringify(editableSavedData.value ?? {}) !== JSON.stringify(synchronizedData.value.value))
       const sourceChanged = computed(() =>
         JSON.stringify(draftData.value.from) !== JSON.stringify(editableSavedData.value))
 
       async function save() {
-        await saveData(synchronizedData.value.value)
+        const saveResult = await saveData(synchronizedData.value.value)
         if(draftData.value) await removeDraftAction(draftIdentifiers)
-        onSaved()
+        onSaved(saveResult)
         if(toast && savedToast) toast.add({ severity: 'success', summary: savedToast, life: 1500 })
       }
 
@@ -171,13 +173,25 @@ export default function editorData(options) {
         if(toast && discardedDraftToast) toast.add({ severity: 'info', summary: discardedDraftToast, life: 1500 })
       }
 
+      async function reset() {
+        const discardPromise = removeDraftAction(draftIdentifiers)
+        if(workingZone)
+          workingZone.addPromise('discardDraft:'+serviceName+':'+modelName, discardPromise)
+        await discardPromise
+        synchronizedData.value.value = editableSavedData.value || defaultData(model)
+        if(toast && discardedDraftToast) toast.add({ severity: 'info', summary: resetToast, life: 1500 })
+        onReset()
+      }
+
       return {
         value: synchronizedData.value,
         changed,
         save,
         saving,
+        reset,
         discardDraft,
         model,
+        isNew,
         resetOnError: false,
         draftChanged: synchronizedData.changed,
         saveDraft: synchronizedData.save,
@@ -189,14 +203,14 @@ export default function editorData(options) {
     } else {
       const synchronizedData = synchronized({
         source,
-        update: createOrUpdateAction ?? saveData,
+        update: saveData,
         updateDataProperty,
         identifiers,
         recursive,
         autoSave,
         debounce,
-        onSave: () => {
-          onSaved()
+        onSave: (result) => {
+          onSaved(result)
           if(toast && savedToast) toast.add({ severity: 'success', summary: savedToast, life: 1500 })
         },
         onSaveError(e) {
@@ -207,12 +221,19 @@ export default function editorData(options) {
         }
       })
 
+      async function reset() {
+        synchronizedData.value.value = editableSavedData.value || defaultData(model)
+        if(toast && discardedDraftToast) toast.add({ severity: 'info', summary: resetToast, life: 1500 })
+        onReset()
+      }
+
       return {
         value: synchronizedData.value,
         changed: synchronizedData.changed,
         save: synchronizedData.save,
         saving: synchronizedData.saving,
         saved: savedData,
+        reset,
         model,
       }
 

package/front/src/pages/Editor.vue

@@ -2,17 +2,8 @@
   <div class="w-full lg:w-8 md:w-11">
     <div class="surface-card p-3 shadow-1 border-round">
 
-      <div class="text-xl mb-2">
-        Service <strong>{{ serviceName }} model {{ modelName }}</strong>
-      </div>
-
-      <h4>identifiers as object</h4>
-      <pre>{{ identifiersObject }}</pre>
-
-      <h4>definition</h4>
-      <pre>{{ modelDefinition }}</pre>
-
-      <ModelEditor :service="serviceName" :model="modelName" :identifiers="identifiersObject" draft />
+      <ModelEditor :service="serviceName" :model="modelName" :identifiers="identifiersObject" draft
+                   @created="handleCreated"/>
 
     </div>
   </div>
@@ -22,6 +13,8 @@
 
   import ModelEditor from "../components/crud/ModelEditor.vue"
 
+
+
   import { ref, computed, onMounted, defineProps, toRefs } from 'vue'
 
   const props = defineProps({
@@ -59,15 +52,34 @@
       if(typeof identifierDefinition === 'string') {
         result[identifierDefinition] = identifier
       } else {
-        result[Object.keys(identifierDefinition)[0]] = identifier
+        result[identifierDefinition.name] = identifier
       }
     }
     return result
   })
 
-  function handleCreated() {
-    console.log("CREATED")
-    // TODO: change route - add identifiers
+  import { useRouter } from 'vue-router'
+  const router = useRouter()
+
+  function handleCreated(id) {
+    const newIdentifiers = modelDefinition.value.identifiers.map((identifier, i) => {
+      if(typeof identifier === 'object' && identifier.field === 'id') {
+        return id
+      }
+      return identifiers.value[i]
+    })
+
+    //console.log("newIdentifiers", newIdentifiers)
+    if(JSON.stringify(identifiers.value) !== JSON.stringify(newIdentifiers)) {
+      router.push({
+        name: 'auto-form:editor',
+        params: {
+          serviceName: serviceName.value,
+          modelName: modelName.value,
+          identifiers: newIdentifiers
+        }
+      })
+    }
   }
 
 </script>

package/front/src/pages/List.vue

@@ -1,12 +1,9 @@
 <template>
-  <div class="w-full lg:w-8 md:w-11">
-    <div class="surface-card p-3 shadow-1 border-round">
-      List
-    </div>
-  </div>
+  <ModelList :service="serviceName" :model="modelName" />
 </template>
 
 <script setup>
+  import ModelList from "../components/crud/ModelList.vue"
 
   import { ref, computed, onMounted, defineProps, toRefs } from 'vue'
 
@@ -18,21 +15,14 @@
     modelName: {
       type: String,
       required: true,
-    },
-    identifiers: {
-      type: Array,
-      default: []
     }
   })
-  const { serviceName } = toRefs(props)
+  const { serviceName, modelName } = toRefs(props)
 
   import { useApi, usePath, live } from '@live-change/vue3-ssr'
   const api = useApi()
   const path = usePath()
 
-
-
-
 </script>
 
 <style scoped>

package/front/src/pages/Models.vue

@@ -10,14 +10,16 @@
           <div class="text-xl flex flex-row align-items-center mr-4">
             <strong>{{ model.name }}</strong>
             <span class="mx-1">model</span>
-            <div v-for="relation of model.relations" class="">
+            <div v-for="relation of model.relations">
               <span class="mr-1">-</span>
               <span>{{ relation.name }}</span>
   <!--            <span v-if="relation.config.what"></span>-->
             </div>
           </div>
-          <div>
-            <Button icon="pi pi-list" severity="primary" label="List" class="mr-2" />
+          <div class="mt-2 md:mt-0">
+            <router-link :to="listRoute(serviceWithModels.name, model)" class="no-underline">
+              <Button icon="pi pi-list" severity="primary" label="List" class="mr-2" />
+            </router-link>
             <router-link :to="createRoute(serviceWithModels.name, model)" class="no-underline">
               <Button icon="pi pi-plus" severity="warning" :label="'Create new '+model.name" />
             </router-link>
@@ -79,6 +81,16 @@
     }
   }
 
+  function listRoute(serviceName, model) {
+    return {
+      name: 'auto-form:list',
+      params: {
+        serviceName,
+        modelName: model.name,
+      }
+    }
+  }
+
 </script>
 
 <style scoped>

package/front/src/router.js

@@ -14,6 +14,13 @@ export function autoFormRoutes(config = {}) {
       props: true
     }),
 
+    route({
+      name: 'auto-form:list', path: prefix + '/models/:serviceName/:modelName', meta: { },
+      component: () => import("./pages/List.vue"),
+      props: true
+    }),
+
+
   ]
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@live-change/frontend-auto-form",
-  "version": "0.9.6",
+  "version": "0.9.8",
   "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.5.2",
-    "@live-change/cli": "^0.9.6",
-    "@live-change/dao": "^0.9.6",
-    "@live-change/dao-vue3": "^0.9.6",
-    "@live-change/dao-websocket": "^0.9.6",
-    "@live-change/framework": "^0.9.6",
-    "@live-change/image-frontend": "^0.9.6",
-    "@live-change/image-service": "^0.9.6",
-    "@live-change/session-service": "^0.9.6",
-    "@live-change/vue3-components": "^0.9.6",
-    "@live-change/vue3-ssr": "^0.9.6",
+    "@live-change/cli": "^0.9.8",
+    "@live-change/dao": "^0.9.8",
+    "@live-change/dao-vue3": "^0.9.8",
+    "@live-change/dao-websocket": "^0.9.8",
+    "@live-change/framework": "^0.9.8",
+    "@live-change/image-frontend": "^0.9.8",
+    "@live-change/image-service": "^0.9.8",
+    "@live-change/session-service": "^0.9.8",
+    "@live-change/vue3-components": "^0.9.8",
+    "@live-change/vue3-ssr": "^0.9.8",
     "@vueuse/core": "^10.11.0",
     "codeceptjs-assert": "^0.0.5",
     "compression": "^1.7.4",
@@ -52,7 +52,7 @@
     "vue3-scroll-border": "0.1.6"
   },
   "devDependencies": {
-    "@live-change/codeceptjs-helper": "^0.9.6",
+    "@live-change/codeceptjs-helper": "^0.9.8",
     "codeceptjs": "^3.6.5",
     "generate-password": "1.7.1",
     "playwright": "1.48.1",
@@ -63,5 +63,5 @@
   "author": "Michał Łaszczewski <michal@laszczewski.pl>",
   "license": "ISC",
   "description": "",
-  "gitHead": "96dafb43cced09c59326ee3318d6f45b1b614d6f"
+  "gitHead": "bb09550504f28df5f4fdd73273de45dc91a857b5"
 }