@afeefa/vue-app 0.0.58 → 0.0.61

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

@@ -1 +1 @@
-0.0.58
+0.0.61

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@afeefa/vue-app",
-  "version": "0.0.58",
+  "version": "0.0.61",
   "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-admin/bootstrap.js

@@ -1,6 +1,7 @@
 import './config/event-bus'
 import './config/components'
 
+import { translationPlugin } from '@a-admin/plugins/translation/TranslationPlugin'
 import { apiResourcesPlugin } from '@a-vue/plugins/api-resources/ApiResourcesPlugin'
 import { hasOptionsPlugin } from '@a-vue/plugins/has-options/HasOptionsPlugin'
 import { timeout } from '@a-vue/utils/timeout'
@@ -12,10 +13,11 @@ import vuetify from './config/vuetify'
 
 Vue.use(apiResourcesPlugin)
 Vue.use(hasOptionsPlugin)
+Vue.use(translationPlugin)
 
 Vue.config.productionTip = false
 
-export async function bootstrap ({ apis, models, routing, authService, app, components }) {
+export async function bootstrap ({ apis, models, routing, authService, getTranslations, app, components }) {
   apiResourcesPlugin.register(models, apis)
 
   appConfig.authService = authService
@@ -35,6 +37,11 @@ export async function bootstrap ({ apis, models, routing, authService, app, comp
   const router = await routeConfigPlugin.getRouter()
   await apiResourcesPlugin.schemasLoaded()
 
+  if (getTranslations) {
+    const translations = await getTranslations(apiResourcesPlugin.apiResources)
+    translationPlugin.setTranslations(translations.models)
+  }
+
   if (authService) {
     authService.initApp(router)
   }

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 () {
@@ -85,8 +85,7 @@ export default class CreatePage extends Mixins(EditPageMixin) {
       return this.title
     }
 
-    const type = this.$apiResources.getType(this.ModelClass.type)
-    return type.t('TITLE_NEW')
+    return this.$t('Admin.Types', this.ModelClass.type, null, 'TITLE_NEW', 'de')
   }
 
   get _listLink () {

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 () {
@@ -122,8 +118,7 @@ export default class EditPage extends Mixins(EditPageMixin) {
       return this.title
     }
 
-    const type = this.$apiResources.getType(this.ModelClass.type)
-    return type.t('TITLE_EMPTY')
+    return this.$t('Admin.Types', this.ModelClass.type, null, 'TITLE_EMPTY', 'de')
   }
 
   get _listLink () {

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) {

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

@@ -37,8 +37,7 @@ export default class ListPage extends Vue {
       return this.title
     }
 
-    const type = this.$apiResources.getType(this.Model.type)
-    return type.t('TITLE_PLURAL')
+    return this.$t('Admin.Types', this.Model.type, null, 'TITLE_PLURAL', 'de')
   }
 
   get _newTitle () {
@@ -46,8 +45,7 @@ export default class ListPage extends Vue {
       return this.newTitle
     }
 
-    const type = this.$apiResources.getType(this.Model.type)
-    return type.t('TITLE_SINGULAR')
+    return this.$t('Admin.Types', this.Model.type, null, 'TITLE_SINGULAR', 'de')
   }
 
   get _newLink () {

package/src-admin/models/Model.js

@@ -1,3 +1,4 @@
+import { translationService } from '@a-admin/services/TranslationService'
 import { Model as ApiResourcesModel, apiResources } from '@afeefa/api-resources-client'
 import { mdiAlphaMCircle } from '@mdi/js'
 
@@ -39,6 +40,10 @@ export class Model extends ApiResourcesModel {
     color: 'blue lighten-2'
   }
 
+  static translate (realm, objectType, objectId, key, lang) {
+    return translationService.translate(realm, objectType, objectId, key, lang)
+  }
+
   getLink (action = 'detail') {
     return {
       name: `${this.constructor.routeName}.${action}`,

package/src-admin/plugins/translation/TranslationPlugin.js

@@ -0,0 +1,20 @@
+import { translationService } from '../../services/TranslationService'
+
+class TranslationPlugin {
+  setTranslations (translations) {
+    translationService
+      .setTranslations(translations)
+  }
+
+  install (Vue) {
+    Vue.mixin({
+      created () {
+        this.$t = (realm, objectId, objectType, key, lang) => {
+          return translationService.translate(realm, objectId, objectType, key, lang)
+        }
+      }
+    })
+  }
+}
+
+export const translationPlugin = new TranslationPlugin()

package/src-admin/services/TranslationService.js

@@ -0,0 +1,35 @@
+class TranslationService {
+  translations = {}
+
+  setTranslations (translations) {
+    translations.forEach(t => {
+      const key = JSON.stringify([
+        t.realm,
+        t.object_type,
+        t.object_id,
+        t.key,
+        t.lang
+      ])
+      this.translations[key] = t.value
+    })
+  }
+
+  translate (realm, objectType, objectId, key, lang) {
+    const tKey = JSON.stringify([
+      realm,
+      objectType,
+      objectId,
+      key,
+      lang
+    ])
+
+    if (!this.translations[tKey]) {
+      console.warn(`No translation found for ${tKey}`)
+      return `${key}:${lang}`
+    }
+
+    return this.translations[tKey]
+  }
+}
+
+export const translationService = new TranslationService()