@live-change/frontend-auto-form 0.9.198 → 0.9.200

package/README.md

@@ -0,0 +1,139 @@
+---
+title: @live-change/frontend-auto-form
+---
+
+## @live-change/frontend-auto-form
+
+`@live-change/frontend-auto-form` to moduł do **automatycznego generowania formularzy i CRUD-ów** na podstawie:
+
+- definicji modeli i akcji po stronie serwera (Live Change)
+- metadanych wygenerowanych przez `@live-change/framework` i dostępnych przez `@live-change/vue3-ssr`
+
+Zapewnia:
+
+- komponenty **pól formularza** (`AutoField`, `AutoInput`, `AutoEditor`, `ModelEditor`, `ModelView`, `ModelSingle`, `ActionForm`, itp.)
+- provider-y konfiguracji (`provideAutoViewComponents`, `provideAutoInputConfiguration`, `provideMetadataBasedAutoInputConfiguration`)
+- lokalizacje (`locales`) używane w aplikacjach takich jak `family-tree` i `speed-dating`
+
+### Podstawowa integracja
+
+W `App.vue` typowej aplikacji włączasz auto-form globalnie:
+
+```javascript
+import {
+  provideAutoViewComponents,
+  provideAutoInputConfiguration,
+  provideMetadataBasedAutoInputConfiguration
+} from '@live-change/frontend-auto-form'
+
+provideAutoViewComponents()
+provideAutoInputConfiguration()
+provideMetadataBasedAutoInputConfiguration()
+```
+
+oraz dodajesz lokalizacje do i18n w `front/src/config.js`:
+
+```javascript
+import { locales as autoFormLocales } from '@live-change/frontend-auto-form'
+
+export default {
+  i18n: {
+    messages: {
+      en: deepmerge.all([
+        baseLocales.en,
+        autoFormLocales.en,
+        // ...
+      ]),
+      pl: deepmerge.all([
+        baseLocales.pl || {},
+        autoFormLocales.pl || {},
+        // ...
+      ])
+    }
+  }
+}
+```
+
+### Kluczowe komponenty
+
+#### `AutoField`
+
+Generuje pojedyncze pole formularza na podstawie definicji właściwości modelu lub akcji:
+
+```vue
+<AutoField
+  :definition="definition.properties.firstName"
+  v-model="editable.firstName"
+  :error="validationResult?.propertyErrors?.firstName"
+  :label="t('profile.firstName')"
+/>
+```
+
+Możesz wstrzykiwać własny layout przez sloty (`#default`, `#label`, `#error`), jak w `ProfileSettings.vue` (`speed-dating`).
+
+#### `AutoInput` i `AutoEditor`
+
+`AutoInput` – pojedyncze pole edycyjne na podstawie definicji,
+
+`AutoEditor` – edytor całego obiektu (modelu) na podstawie definicji:
+
+```vue
+<auto-editor
+  :definition="eventDefinition"
+  v-model="editable"
+  :rootValue="editable"
+  i18n="event."
+/>
+```
+
+W przykładzie z `speed-dating/front/src/pages/events/[event]/edit.vue`:
+
+- `eventDefinition` pochodzi z `api.services.speedDating.models.Event`
+- `editable` jest synchronizowane z widokiem i akcją poprzez `synchronized`
+
+#### `ModelEditor`, `ModelView`, `ModelSingle`
+
+Te komponenty łączą:
+
+- definicję modelu
+- widoki i akcje (DAO)
+- generowane formularze i widoki list/szczegółów
+
+Są używane m.in. w:
+
+- `speed-dating/front/src/pages/events/[event]/surveys.vue` (`ModelEditor` dla ankiet)
+- `family-tree` – ekrany ustawień i edytory szablonów
+
+### Flow od modelu do CRUD
+
+1. **Definicja modelu i akcji** w serwisie po stronie serwera (np. `Event`, `TreeSettings`).
+2. **Eksport metadanych** przez Live Change i odczyt przez `@live-change/vue3-ssr` (`api.services[service].models[Model]`).
+3. **Auto-form** generuje formularze i widoki:
+   - `AutoField` dla pojedynczych pól,
+   - `AutoEditor` / `ModelEditor` dla całych obiektów,
+   - `ActionForm` / `ActionEditor` dla akcji.
+
+### Przykłady z projektów
+
+#### `family-tree`
+
+- `front/src/components/TreeSettings.vue`:
+  - `AutoField` użyty do edycji zagnieżdżonych ustawień (rootPerson, format, marginesy, tło, tytuł)
+  - integracja z PrimeVue (Dropdown, Slider, InputNumber) przez sloty
+- `front/src/components/marketing/*Editor.vue`:
+  - `AutoField`, `editorData` do edycji szablonów i obrazów reklamowych
+- `front/src/pages/tree/[tree]/settings.vue`:
+  - użycie `editorData` z `@live-change/frontend-auto-form` do spięcia formularza z modelem ustawień
+
+#### `speed-dating`
+
+- `front/src/components/profile/ProfileSettings.vue`:
+  - `AutoField` dla pól identyfikacji użytkownika, z własnymi layoutami i walidacją
+  - integracja z `synchronized` i serwisem `draft`
+- `front/src/pages/events/[event]/edit.vue`:
+  - `AutoInput`, `AutoField`, `AutoEditor` do edycji eventu
+- `front/src/pages/events/[event]/surveys.vue`:
+  - `ModelEditor` do edycji ankiet powiązanych z eventem
+
+Te pliki są najlepszym odniesieniem, jeśli chcesz szybko zobaczyć, jak układa się flow od modelu do działającego CRUD-a.
+

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

@@ -98,7 +98,7 @@
       params: {
         serviceName: service.value,
         modelName: model.value,
-        id: objectData.value?.to ?? objectData.value?.id
+        id: objectData.value?.to ?? objectData.value?.id ?? object.value
       }
     }
   })

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

@@ -115,7 +115,7 @@
       params: {
         serviceName: service.value,
         modelName: model.value,
-        id: objectData.value?.to ?? objectData.value?.id
+        id: objectData.value?.to ?? objectData.value?.id ?? object.value
       }
     }
   })

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

@@ -107,8 +107,8 @@
       required: true,
     },
     views: {
-      type: Object,
-      default: () => ({})
+      type: Array,
+      default: () => ([{}])
     },
   })
   const { service, model, views } = toRefs(props)
@@ -124,7 +124,7 @@
     }, AutoObjectIdentification)
   )
 
-  import { useApi, usePath, live } from '@live-change/vue3-ssr'
+  import { useApi, usePath, live, view } from '@live-change/vue3-ssr'
   const api = useApi()
   const path = usePath()
 

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

@@ -6,7 +6,7 @@
     <pre>selectedPaths = {{ selectedPaths }}</pre>
     <pre>selectedPathWithElements = {{ selectedPathWithElements }}</pre> -->
     <div v-for="path in selectedPathsWithElements" :key="path">
-      <Breadcrumb :model="more ? [...path, 'dupa'] : path"
+      <Breadcrumb :model="more ? [...path, ...pathObjects, 'placeholder'] : [...path, ...pathObjects]"
        :pt="{      
         list: {
           class: 'text-sm flex flex-row flex-wrap gap-2 first:negative-margin-left pl-[1.5rem]'
@@ -46,9 +46,13 @@
     more: {
       type: Boolean,
       default: false
+    },
+    pathObjects: {
+      type: Array,
+      default: () => []
     }
   })
-  const { objectType, object, more } = toRefs(props)
+  const { objectType, object, more, pathObjects } = toRefs(props)
 
   import { usePath, live } from '@live-change/vue3-ssr'
   const path = usePath()
@@ -87,7 +91,7 @@
       } else {
         elements.push({ objectType, object, propertyFrom: propertyName })
       }
-    }   
+    }
     return elements
   }
 
@@ -114,13 +118,13 @@
     live(pathsPath)
   ])
 
-  const selectedPaths = computed(() => {
-    return objectPathConfig.scopeSelector(paths.value)
-  })
+  const selectedPaths = computed(() => objectPathConfig.scopeSelector(paths.value))
 
-  const selectedPathsWithElements = computed(
-    () => selectedPaths.value.map(scopePath => objectPathConfig.pathElements(scopePath))
-  )
+  const selectedPathsWithElements = computed(() => {
+    const result = selectedPaths.value.map(scopePath => objectPathConfig.pathElements(scopePath))
+    if(result.length == 0) return [[{objectType: objectType.value, object: object.value}]]
+    return result
+  })
 
 
 

package/front/src/logic/actionData.js

@@ -194,6 +194,7 @@ export default async function actionData(options) {
       mergedInitialValue,
       editableProperties,
       value: synchronizedData.value,
+      data: synchronizedData.value,
       changed,
       submit,
       submitting,
@@ -231,6 +232,7 @@ export default async function actionData(options) {
       initialValue,
       editableProperties,
       value: formData,
+      data: formData,
       changed,
       submit,
       submitting,

package/front/src/logic/editorData.js

@@ -25,6 +25,7 @@ export default function editorData(options) {
     recursive = true,
     debounce = 600,
     timeField = 'lastUpdate',
+    crudSource = 'crud',
 
     savedToast = "Saved",
     savedDraftToast = "Draft saved",
@@ -56,7 +57,7 @@ export default function editorData(options) {
   const service = api.services[serviceName]
   const model = service.models[modelName]
   const {
-    crudMethods = model.crud,
+    crudMethods = model[crudSource],
     identifiersNames = model.identifiers,
     editableProperties = model.editableProperties ?? Object.keys(model.properties),
   } = options
@@ -130,7 +131,8 @@ export default function editorData(options) {
       const savedIdentifiers = {}
       for(const identifier of identifiersNames) {
         if(typeof identifier === 'object') {
-          savedIdentifiers[identifier.name] = savedData.value?.[identifier.name] ?? draftData.value?.data?.[identifier.name]
+          savedIdentifiers[identifier.name] = savedData.value?.[identifier.field] ?? savedData.value?.[identifier.name] 
+            ?? draftData.value?.data?.[identifier.field] ?? draftData.value?.data?.[identifier.name]
         } else {
           savedIdentifiers[identifier] = savedData.value?.[identifier] ?? draftData.value?.data?.[identifier]
         }
@@ -209,7 +211,7 @@ export default function editorData(options) {
 
       const propertiesErrors = computed(() => propertiesValidationErrors(
         synchronizedData.value.value, identifiers, model, lastUploadedData.value,
-         propertiesServerErrors.value, appContext))
+        propertiesServerErrors.value, appContext, editableProperties))
 
       async function save() {
         const saveResult = await saveData(synchronizedData.value.value)
@@ -240,6 +242,7 @@ export default function editorData(options) {
       return {
         identifiers,
         value: synchronizedData.value,
+        data: synchronizedData.value,
         changed,
         save,
         saving,
@@ -255,6 +258,8 @@ export default function editorData(options) {
         saved: savedData,
         savedPath: savedDataPath,
         editableSavedData,
+        editableDraftData,
+        defaultData: defaultData(model),
         draft: draftData,
         sourceChanged /// needed for draft discard on concurrent save
       }
@@ -281,7 +286,7 @@ export default function editorData(options) {
 
       const propertiesErrors = computed(() => propertiesValidationErrors(
         synchronizedData.value.value, identifiers, model, lastUploadedData.value,
-         propertiesServerErrors.value, appContext))
+         propertiesServerErrors.value, appContext, editableProperties))
 
       async function reset() {
         synchronizedData.value.value = editableSavedData.value || deepmerge(defaultData(model), initialData)
@@ -292,11 +297,15 @@ export default function editorData(options) {
       return {
         identifiers,
         value: synchronizedData.value,
+        data: synchronizedData.value,
         changed: synchronizedData.changed,
         save: synchronizedData.save,
         saving: synchronizedData.saving,
         saved: savedData,
         savedPath: savedDataPath,
+        editableProperties,
+        editableSavedData,
+        defaultData: defaultData(model),
         isNew,
         propertiesErrors,
         reset,

package/front/src/logic/relations.js

@@ -196,7 +196,8 @@ export function prepareObjectRelations(objectType, object, api = useApi()) {
       const name = 'rangeBy_' + objectType
       const typeView = from.crud?.[name]
         ? name
-        : undefined        
+        : undefined
+
       if(typeView) {
         views.push({
           name: typeView,
@@ -205,18 +206,27 @@ export function prepareObjectRelations(objectType, object, api = useApi()) {
           }
         })
       } else {
-        for(let i = 0; i < what.length; i++) {
-          if(what[i] !== objectType) continue
-          const propertyName = relationConfig.propertyNames?.[i]
-            ?? model[0].toLowerCase() + model.slice(1)
-          const name = 'rangeBy' + propertyName[0].toUpperCase() + propertyName.slice(1)          
-          if(!from.crud?.[name]) continue
+        if(singular) {
           views.push({
-            name,            
+            name: 'read',
             identifiers: {
-              [propertyName]: object
+              [model[0].toLowerCase() + model.slice(1)]: object
             }
           })
+        } else {
+          for(let i = 0; i < what.length; i++) {
+            if(what[i] !== objectType) continue
+            const propertyName = relationConfig.propertyNames?.[i]
+              ?? model[0].toLowerCase() + model.slice(1)
+            const name = 'rangeBy' + propertyName[0].toUpperCase() + propertyName.slice(1)          
+            if(!from.crud?.[name]) continue
+            views.push({
+              name,            
+              identifiers: {
+                [propertyName]: object
+              }
+            })
+          }
         }
       }
       console.log(objectType, "VIEWS", views, "FROM", from, "SINGULAR", singular)

package/front/src/logic/validation.js

@@ -1,6 +1,6 @@
 import { validateData } from "@live-change/vue3-components"
 
-export function propertiesValidationErrors(rootValue, parameters, definition, lastData, propertiesServerErrors, appContext) {
+export function propertiesValidationErrors(rootValue, parameters, definition, lastData, propertiesServerErrors, appContext, validatedProperties) {  
   const currentValue = {
     ...parameters,
     ...rootValue,
@@ -10,10 +10,10 @@ export function propertiesValidationErrors(rootValue, parameters, definition, la
     lastData, propertiesServerErrors, appContext) */
 
   const validationResult = validateData(definition, currentValue, 'validation', appContext,
-    '', rootValue, true)
+    '', rootValue, true, validatedProperties)
 
   const softValidationResult = validateData(definition, currentValue, 'softValidation', appContext,
-    '', rootValue, true)
+    '', rootValue, true, validatedProperties)
 
   const serverValidationResult = {}
   if(propertiesServerErrors) {

package/front/src/logic/viewData.js

@@ -28,7 +28,9 @@ export default async function viewData(options) {
 
   const savedDataPath = path[serviceName][crudMethods.read]({ 
     [modelName[0].toLowerCase() + modelName.slice(1)]: id
-   })
+  })
+
+  console.log("SAVED DATA PATH", savedDataPath)
 
   let data
   let error

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@live-change/frontend-auto-form",
-  "version": "0.9.198",
+  "version": "0.9.200",
   "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.198",
-    "@live-change/dao": "^0.9.198",
-    "@live-change/dao-vue3": "^0.9.198",
-    "@live-change/dao-websocket": "^0.9.198",
-    "@live-change/framework": "^0.9.198",
-    "@live-change/image-frontend": "^0.9.198",
-    "@live-change/image-service": "^0.9.198",
-    "@live-change/session-service": "^0.9.198",
-    "@live-change/vue3-components": "^0.9.198",
-    "@live-change/vue3-ssr": "^0.9.198",
+    "@live-change/cli": "^0.9.200",
+    "@live-change/dao": "^0.9.200",
+    "@live-change/dao-vue3": "^0.9.200",
+    "@live-change/dao-websocket": "^0.9.200",
+    "@live-change/framework": "^0.9.200",
+    "@live-change/image-frontend": "^0.9.200",
+    "@live-change/image-service": "^0.9.200",
+    "@live-change/session-service": "^0.9.200",
+    "@live-change/vue3-components": "^0.9.200",
+    "@live-change/vue3-ssr": "^0.9.200",
     "@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.198",
+    "@live-change/codeceptjs-helper": "^0.9.200",
     "codeceptjs": "^3.7.6",
     "generate-password": "1.7.1",
     "playwright": "1.49.1",
@@ -63,5 +63,5 @@
   "author": "Michał Łaszczewski <michal@laszczewski.pl>",
   "license": "ISC",
   "description": "",
-  "gitHead": "7e485dcbaa2af7fb17052a40238210dc8bdf0c09"
+  "gitHead": "a509834e600a546297faa7d1534b6f52e66d2e66"
 }