@afeefa/vue-app 0.0.56 → 0.0.59

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

@@ -1 +1 @@
-0.0.56
+0.0.59

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@afeefa/vue-app",
-  "version": "0.0.56",
+  "version": "0.0.59",
   "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/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 () {
@@ -38,11 +47,6 @@ export default class EditForm extends Vue {
     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

@@ -17,7 +17,9 @@ import { Component, Mixins } from '@a-vue'
 import { ListFilterMixin } from '../ListFilterMixin'
 import { ListAction } from '@a-vue/api-resources/ApiActions'
 
-@Component
+@Component({
+  props: ['itemTitle', 'itemValue']
+})
 export default class ListFilterSelect extends Mixins(ListFilterMixin) {
   items = null
 
@@ -60,10 +62,20 @@ export default class ListFilterSelect extends Mixins(ListFilterMixin) {
 
     return [
       ...this.createOptions(),
-      ...models.map(model => ({
-        itemTitle: model.name,
-        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/list/ListView.vue

@@ -28,6 +28,7 @@
           <a-table-row
             v-for="model in models_"
             :key="model.id"
+            :class="getModelClass(model)"
           >
             <v-icon
               v-if="$has.icon"
@@ -49,6 +50,7 @@
         <div
           v-for="model in models_"
           :key="model.id"
+          :class="getModelClass(model)"
         >
           <slot
             name="model"
@@ -73,7 +75,9 @@ import { Component, Watch, Mixins } from '@a-vue'
 import { ListViewMixin } from '@a-vue/components/list/ListViewMixin'
 import { LoadingEvent } from '@a-vue/events'
 
-@Component
+@Component({
+  props: ['modelClass']
+})
 export default class ListView extends Mixins(ListViewMixin) {
   $hasOptions = ['icon']
 
@@ -89,6 +93,10 @@ export default class ListView extends Mixins(ListViewMixin) {
     this.$emit('update:isLoading', this.isLoading)
   }
 
+  getModelClass (model) {
+    return this.modelClass && this.modelClass(model)
+  }
+
   setFilter (name, value) {
     this.filters[name].value = value
   }

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"
@@ -83,14 +75,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']
@@ -79,6 +79,7 @@ export class EditPageMixin extends Vue {
 
   reset () {
     this.modelToEdit = this.createModelToEdit()
+    this.$emit('model', this.modelToEdit)
   }
 
   afterSave (_model) {