@afeefa/vue-app 0.0.57 → 0.0.60

package/.afeefa/package/release/version.txt

@@ -1 +1 @@
-0.0.57
+0.0.60

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@afeefa/vue-app",
-  "version": "0.0.57",
+  "version": "0.0.60",
   "description": "",
   "author": "Afeefa Kollektiv <kollektiv@afeefa.de>",
   "license": "MIT",

package/src/components/ADatePicker.vue

@@ -8,11 +8,13 @@
   >
     <template #activator="{ on, attrs }">
       <v-combobox
+        ref="input"
         :value="formattedDate"
         :label="label"
         :style="cwm_widthStyle"
         readonly
         v-bind="attrs"
+        :rules="validationRules"
         v-on="on"
         @click.native="on.click"
       />
@@ -37,7 +39,7 @@ import { ComponentWidthMixin } from './mixins/ComponentWidthMixin'
   props: ['value', 'validator']
 })
 export default class ADatePicker extends Mixins(ComponentWidthMixin) {
-  value_ = new Date()
+  value_ = null
   menu = false
 
   created () {

package/src/components/ARichTextArea.vue

@@ -151,9 +151,11 @@ export default class ARichTextArea extends Vue {
       },
       onFocus: ({ editor, event }) => {
         this.focus = true
+        this.$emit('focus')
       },
       onBlur: ({ editor, event }) => {
         this.focus = false
+        this.$emit('blur')
       }
     })
 

package/src/components/form/EditForm.vue

@@ -26,8 +26,17 @@ export default class EditForm extends Vue {
   valid = false
   lastJson = null
 
-  created () {
+  /**
+   * This will be triggered after the this.model has been set
+   * but before sub components may have changed model values
+   * as a date field, which could turn a null to a default date.
+   * Using the created() method would result in already having set
+   * the default date, hence not detecting a valid "change" anymore.
+   */
+  @Watch('model', {immediate: true})
+  modelChanged () {
     this.lastJson = this.json
+    this.$emit('update:changed', this.changed)
   }
 
   get json () {
@@ -35,14 +44,11 @@ export default class EditForm extends Vue {
   }
 
   get changed () {
+    // console.log(this.json)
+    // console.log(this.lastJson)
     return this.json !== this.lastJson
   }
 
-  @Watch('model')
-  modelChanged () {
-    this.lastJson = this.json
-  }
-
   @Watch('valid')
   validChanged () {
     this.$emit('update:valid', this.valid)

package/src/components/form/NestedEditForm.vue

@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <slot name="fields" />
+
+    <slot :model="model" />
+  </div>
+</template>
+
+
+<script>
+import { Component, Vue } from '@a-vue'
+
+@Component({
+  props: ['model']
+})
+export default class NestedEditForm extends Vue {
+  EDIT_FORM = true
+
+  created () {
+    if (!this.model) {
+      console.warn('Nested edit form does not have a model.')
+    }
+  }
+}
+</script>

package/src/components/index.js

@@ -11,12 +11,14 @@ import FormFieldSelect from './form/fields/FormFieldSelect'
 import FormFieldSelect2 from './form/fields/FormFieldSelect2'
 import FormFieldText from './form/fields/FormFieldText'
 import FormFieldTextArea from './form/fields/FormFieldTextArea'
+import NestedEditForm from './form/NestedEditForm'
 import ListFilterPage from './list/filters/ListFilterPage'
 import ListFilterSearch from './list/filters/ListFilterSearch'
 import ListFilterSelect from './list/filters/ListFilterSelect'
 import ListFilterRow from './list/ListFilterRow'
 
 Vue.component('EditForm', EditForm)
+Vue.component('NestedEditForm', NestedEditForm)
 Vue.component('EditModal', EditModal)
 Vue.component('FormFieldText', FormFieldText)
 Vue.component('FormFieldTextArea', FormFieldTextArea)

package/src/components/list/filters/ListFilterSelect.vue

@@ -18,7 +18,7 @@ import { ListFilterMixin } from '../ListFilterMixin'
 import { ListAction } from '@a-vue/api-resources/ApiActions'
 
 @Component({
-  props: ['itemTitle']
+  props: ['itemTitle', 'itemValue']
 })
 export default class ListFilterSelect extends Mixins(ListFilterMixin) {
   items = null
@@ -62,10 +62,20 @@ export default class ListFilterSelect extends Mixins(ListFilterMixin) {
 
     return [
       ...this.createOptions(),
-      ...models.map(model => ({
-        itemTitle: (this.itemTitle && this.itemTitle(model)) || model.name || model.title,
-        itemValue: model.id
-      }))
+      ...models.map(model => {
+        let itemValue
+        if (this.itemValue) {
+          itemValue = this.itemValue(model)
+        } else if (model.value !== undefined) {
+          itemValue = model.value
+        } else {
+          itemValue = model.id
+        }
+        return {
+          itemTitle: (this.itemTitle && this.itemTitle(model)) || model.name || model.title,
+          itemValue
+        }
+      })
     ]
   }
 

package/src-admin/components/pages/CreatePage.vue

@@ -30,6 +30,7 @@
     <a-row class="mt-6">
       <v-btn
         :disabled="!changed || !valid"
+        color="green white--text"
         @click="save"
       >
         Anlegen
@@ -55,16 +56,15 @@ import { EditPageMixin } from './EditPageMixin'
 })
 export default class CreatePage extends Mixins(EditPageMixin) {
   created () {
-    if (!this.$parent.constructor.createRouteConfig) {
+    if (!this.$parent.constructor.getCreateRouteConfig) {
       console.warn('<create-page> owner must provide a static createRouteConfig method.')
     }
 
     this.reset()
-    this.$emit('model', this.modelToEdit)
   }
 
   get editConfig () {
-    return this.$parent.constructor.createRouteConfig
+    return this.$parent.constructor.getCreateRouteConfig(this.$route)
   }
 
   get modelUpateAction () {

package/src-admin/components/pages/EditPage.vue

@@ -23,14 +23,6 @@
       </v-btn>
     </app-bar-button>
 
-    <component
-      :is="Component"
-      v-if="false"
-      :model="modelToEdit"
-      :valid.sync="valid"
-      :changed.sync="changed"
-    />
-
     <edit-form
       :model="modelToEdit"
       :valid.sync="valid"
@@ -69,7 +61,13 @@ import { Component, Mixins, Watch } from '@a-vue'
 import { EditPageMixin } from './EditPageMixin'
 
 @Component({
-  props: ['model', 'icon', 'title', 'listLink', 'getAction']
+  props: [
+    'model',
+    'icon',
+    'title',
+    'listLink',
+    'getAction'
+  ]
 })
 export default class EditPage extends Mixins(EditPageMixin) {
   $hasOptions = ['detail', {list: false}]
@@ -83,14 +81,12 @@ export default class EditPage extends Mixins(EditPageMixin) {
 
     this.model_ = this.model
     this.reset()
-    this.$emit('model', this.modelToEdit)
   }
 
   @Watch('model')
   modelChanged () {
     this.model_ = this.model
     this.reset()
-    this.$emit('model', this.modelToEdit)
   }
 
   get editConfig () {

package/src-admin/components/pages/EditPageMixin.js

@@ -1,6 +1,6 @@
+import { Component, Vue } from '@a-vue'
 import { SaveAction } from '@a-vue/api-resources/ApiActions'
 import { DialogEvent } from '@a-vue/events'
-import { Component, Vue } from '@a-vue'
 
 @Component({
   props: ['saveAction']
@@ -78,7 +78,12 @@ export class EditPageMixin extends Vue {
   }
 
   reset () {
-    this.modelToEdit = this.createModelToEdit()
+    const modelToEdit = this.createModelToEdit()
+    if (this.editConfig.createModelToEdit) {
+      this.editConfig.createModelToEdit(modelToEdit)
+    }
+    this.modelToEdit = modelToEdit // this assignment makes modelToEdit recursively reactive
+    this.$emit('model', this.modelToEdit)
   }
 
   afterSave (_model) {