Add Breadcrumbs and remove baseform

Author: ricardovanlaarhoven

generator/templates/Crud/src/components/Resource.vue

@@ -1,40 +1,38 @@
 <template>
-  <v-container fluid>
-    <vuetify-resource
-        :beforeCreateCallback="beforeOpenCreateHandler"
-        :beforeUpdateCallback="beforeOpenUpdateHandler"
-        :createCallback="handleCreateRequest"
-        :deleteCallback="handleDeleteRequest"
-        :getDataCallback="handleIndexRequest"
-        :getItemCallback="handleShowRequest"
-        :meta="meta"
-        :tableContent="tableContent"
-        :texts="require('../VuetifyResourceTexts.js').default"
-        :updateCallback="handleUpdateRequest"
-        @row-click="onRowClick"
-        ref="resourceList"
-        v-bind="$attrs"
-        v-model="selected"
-    >
-      <div slot="createContent">
-        <component :errors="errors"
-                   :is="formComponent"
-                   :is-update-form="false"
-                   ref="createForm"
-                   v-model="createForm"/>
-      </div>
-      <div slot="updateContent">
-        <component :errors="errors"
-                   :is="formComponent"
-                   :is-update-form="true"
-                   ref="updateForm"
-                   v-model="updateForm"/>
-      </div>
-      <template v-slot:crudActionsAfter="slotProps">
-        <slot name="crudActionsAfter" v-bind="slotProps"></slot>
-      </template>
-    </vuetify-resource>
-  </v-container>
+  <vuetify-resource
+      ref="resourceList"
+      v-model="selected"
+      v-bind="$attrs"
+      :beforeCreateCallback="beforeOpenCreateHandler"
+      :beforeUpdateCallback="beforeOpenUpdateHandler"
+      :createCallback="handleCreateRequest"
+      :deleteCallback="handleDeleteRequest"
+      :getDataCallback="handleIndexRequest"
+      :getItemCallback="handleShowRequest"
+      :meta="meta"
+      :tableContent="tableContent"
+      :texts="require('../VuetifyResourceTexts.js').default"
+      :updateCallback="handleUpdateRequest"
+      @row-click="onRowClick"
+  >
+    <div slot="createContent">
+      <component :is="formComponent"
+                 ref="createForm"
+                 v-model="createForm"
+                 :errors="errors"
+                 :is-update-form="false"/>
+    </div>
+    <div slot="updateContent">
+      <component :is="formComponent"
+                 ref="updateForm"
+                 v-model="updateForm"
+                 :errors="errors"
+                 :is-update-form="true"/>
+    </div>
+    <template v-slot:crudActionsAfter="slotProps">
+      <slot v-bind="slotProps" name="crudActionsAfter"></slot>
+    </template>
+  </vuetify-resource>
 </template>
 
 <script>

generator/templates/Crud/src/components/VuetifyResourceBaseForm.vue

@@ -1,9 +1,7 @@
 <script>
-import BaseForm from '@/components/BaseForm.vue';
 
 export default {
   name: 'Form',
-  extends: BaseForm,
   props: {
     value: {
       default() {

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

@@ -16,6 +16,7 @@
 
 <script lang="js">
 import Resource from '@/components/Resource.vue';
+import eventBus from '@/eventBus.js';
 import { create, index, remove, show, update } from '../api/endpoints/user.js';
 import User from '../application/models/user.js';
 
@@ -48,5 +49,19 @@ export default {
       ];
     },
   },
+  created() {
+    eventBus.$emit('setBreadcrumbs', [
+      {
+        exact: true,
+        to: { name: 'home' },
+        text: this.$t('global.dashboard'),
+      },
+      {
+        exact: true,
+        to: { name: 'users' },
+        text: this.$tc('user.title', 2),
+      },
+    ]);
+  }
 };
 </script>

generator/templates/Default/src/components/BaseForm.vue

@@ -0,0 +1,27 @@
+<template>
+  <VBreadcrumbs :class="breadcrumbsClass" :items="breadcrumbs" class="py-1 pl-0"/>
+</template>
+
+<script>
+import eventBus from '../eventBus';
+
+export default {
+  name: 'Breadcrumbs',
+  data() {
+    return {
+      breadcrumbs: [],
+      placeholders: {},
+    };
+  },
+  computed: {
+    breadcrumbsClass() {
+      return this.$vuetify.theme.dark ? 'dark' : 'light';
+    },
+  },
+  created() {
+    eventBus.$on('setBreadcrumbs', (breadcrumbs) => {
+      this.breadcrumbs = breadcrumbs;
+    });
+  },
+};
+</script>

generator/templates/Default/src/components/Breadcrumbs.vue

@@ -0,0 +1,4 @@
+import Vue from 'vue';
+
+const EventBus = new Vue();
+export default EventBus;

generator/templates/Default/src/components/PaginatedAutocomplete.vue

@@ -0,0 +1,3 @@
+{
+    "dashboard": "Dashboard"
+}

generator/templates/Default/src/eventBus.js

@@ -1,9 +1,9 @@
 <template>
   <div v-if="isLoggedIn">
     <v-navigation-drawer
+        v-model="isMenuOpen"
         app
         fixed
-        v-model="isMenuOpen"
     >
       <router-link :to="{name: 'home'}">
         <img :src="require('../assets/logo.png')" class="logo">
@@ -18,6 +18,9 @@
       <AppBarMenu/>
     </v-app-bar>
     <v-main>
+      <v-row class="ma-3 mb-0">
+        <Breadcrumbs class="breadcrumbs"/>
+      </v-row>
       <router-view/>
     </v-main>
     <v-footer app color="primary" inset>
@@ -27,9 +30,9 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
 import AppBarMenu from '@/components/AppBarMenu.vue';
 import TheMainMenu from '@/components/menu/TheMainMenu.vue';
+import { mapGetters } from 'vuex';
 
 export default {
   name: 'Default',