wip

Author: ricardovanlaarhoven

generator/templates/Crud/src/components/forms/UserForm.vue

@@ -1,37 +1,33 @@
 <template>
-    <v-container>
-        <v-form ref="form" v-model="valid" class="mt-5">
-            <v-col cols="12" sm="10" offset-sm="1" md="8" offset-md="2" lg="6" offset-lg="3">
-                <v-subheader class="pa-0">Gebruiker</v-subheader>
-                <v-card>
-                    <v-card-text>
-                        <VTextField
-                            :counter="100"
-                            :rules="[(v) => !!v || 'Naam is verplicht', () => serverError('name'), (v) => !!v && v.length <= 100 || 'de naam mag maximaal 100 tekens bevatten']"
-                            label="Naam"
-                            v-model="values.name"/>
-                        <VTextField
-                            :counter="150"
-                            :rules="[(v) => !!v || 'E-mail is verplicht', () => serverError('email'), (v) => !!v && v.length <= 100 || 'het e-mailadres mag maximaal 150 tekens bevatten']"
-                            label="E-mail"
-                            hint="Het e-mailadres waarmee de gebruiker gaat inloggen en waarnaar een mail verzonden wordt met instructies om een wachtwoord aan te maken"
-                            v-model="values.email"/>
-                    </v-card-text>
-                </v-card>
-            </v-col>
-        </v-form>
-    </v-container>
+  <v-container>
+    <v-form ref="form" v-model="valid" class="mt-5">
+      <k-field-group language-prefix="user.fields">
+        <v-col cols="12" lg="6" md="8" offset-lg="3" offset-md="2" offset-sm="1" sm="10">
+          <v-subheader class="pa-0">Gebruiker</v-subheader>
+          <v-card>
+            <v-card-text>
+              <KTextField v-model="values.name" field="name" required/>
+              <KTextField v-model="values.email" field="email" required/>
+            </v-card-text>
+          </v-card>
+        </v-col>
+      </k-field-group>
+    </v-form>
+  </v-container>
 </template>
 
 <script lang="js">
+import KFieldGroup from '@/components/crud/fields/KFieldGroup.vue';
+import KTextField from '@/components/crud/fields/KTextField.vue';
 import Form from '@/components/VuetifyResourceBaseForm.vue';
 import User from '../../application/models/user.js';
 
 export default {
-    name: 'UserForm',
-    extends: Form,
-    data: () => ({
-        values: new User(),
-    }),
+  name: 'UserForm',
+  components: { KTextField, KFieldGroup },
+  extends: Form,
+  data: () => ({
+    values: new User(),
+  }),
 };
 </script>

generator/templates/Crud/src/locales/nl/user.json

@@ -0,0 +1,7 @@
+{
+    "title": "Gebruiker|Gebruikers",
+    "fields": {
+        "name": "Naam",
+        "email": "E-mail"
+    }
+}

generator/templates/Crud/src/views/UserResource.vue

@@ -5,7 +5,7 @@
         :delete-request="deleteHandler"
         :form-component="() => import('../components/forms/UserForm.vue')"
         :index-request="indexHandler"
-        :meta="{name: 'gebruiker', namePlural: 'gebruikers'}"
+        :meta="{name: $tc('user.title', 1), namePlural: $tc('user.title', 2)}"
         :model-type="modelType"
         :show-request="showHandler"
         :table-content="tableContent"
@@ -16,7 +16,7 @@
 
 <script lang="js">
 import Resource from '@/components/Resource.vue';
-import { create, remove, index, show, update } from '../api/endpoints/user.js';
+import { create, index, remove, show, update } from '../api/endpoints/user.js';
 import User from '../application/models/user.js';
 
 export default {
@@ -31,20 +31,22 @@ export default {
     deleteHandler: () => remove,
     createHandler: () => create,
     modelType: () => User,
-    tableContent: () => [
-      {
-        text: 'Naam',
-        align: 'left',
-        sortable: true,
-        value: 'name',
-      },
-      {
-        text: 'E-mail',
-        align: 'left',
-        sortable: true,
-        value: 'email',
-      },
-    ],
+    tableContent() {
+      return [
+        {
+          text: this.$t('user.fields.name'),
+          align: 'left',
+          sortable: true,
+          value: 'name',
+        },
+        {
+          text: this.$t('user.fields.email'),
+          align: 'left',
+          sortable: true,
+          value: 'email',
+        },
+      ];
+    },
   },
 };
 </script>

generator/templates/Default/src/components/crud/fields/KFieldGroup.vue

@@ -28,7 +28,6 @@ export default {
   computed: {
     computedFieldProps() {
       return {
-        filled: true,
         validateOnBlur: true,
         ...this.fieldProps,
       };

generator/templates/Default/src/components/menu/Menu.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-list>
+  <v-list nav>
     <div :key="item.title" v-for="item in items">
       <v-list-item-group
           :disabled="item.disabled"