23 remove not used widgets on menu

src/components/Actions/List/List.vue

@@ -51,7 +51,7 @@
           :key="key(label(field))"
           >
           <component
-            :name="`${UI_NAMES.RESOURCE_VIEW_ELEMENT_FIELD.with({ resourceName, view, field: label(field), index })}`"
+            :name="`${UI_NAMES.RESOURCE_VIEW_ELEMENT_FIELD.with({ resourceName, view, field: label(field), index: props.index })}`"
             :is="type(field.type)"
             v-bind:content="props.item[label(field)]"
             v-bind="args(field)">

src/components/Admin/src/admin.vue

@@ -1,24 +1,30 @@
 <template>
-    <div>
-        <Core v-bind:appLayout="appLayout">
-        <router-view></router-view>
-        </Core>
-        <slot></slot>
-
-    </div>
+  <div>
+    <Core
+      v-bind:appLayout="appLayout"
+      :title="title"
+    >
+      <router-view></router-view>
+    </Core>
+    <slot></slot>
+  </div>
 </template>
 
 <script>
 import Core from "../../Core";
 import Ui from "../../Ui";
 import resource from "./resource";
-
+import UI_CONTENT from '../../../constants/ui.content.default'
 
 export default {
   name: "Admin",
   props: {
     appLayout: {
       default: () => Ui
+    },
+    title: {
+      type: String,
+      default: UI_CONTENT.MAIN_TOOLBAR_TITLE
     }
   },
   components: {

src/components/Core/src/core.vue

@@ -1,16 +1,20 @@
 <template>
-    <div>
-        <component :is="appLayout">
-          <slot></slot>
-        </component>
-    </div>
+  <div>
+    <component
+      :is="appLayout"
+      :title="title"
+    >
+      <slot></slot>
+    </component>
+  </div>
 </template>
 
 <script>
 export default {
   name: "Core",
   props: {
-    appLayout: {}
+    appLayout: {},
+    title: String,
   },
   components: {}
 };

src/components/Ui/src/ui.vue

@@ -65,36 +65,9 @@
     <v-toolbar class="success" dark app fixed clipped-left dense>
       <v-toolbar-title :name="UI_NAMES.MAIN_TOOLBAR_TITLE">
         <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
-        {{UI_CONTENT.MAIN_TOOLBAR_TITLE}}
+        {{title}}
       </v-toolbar-title>
       <v-spacer></v-spacer>
-        <v-toolbar-items>
-          <v-btn flat>
-            <v-avatar :name="UI_NAMES.MAIN_TOOLBAR_USER_AVATAR" size="36px">
-              {{UI_CONTENT.MAIN_TOOLBAR_USER_AVATAR_NAME}}
-            </v-avatar>
-          </v-btn>
-          <v-btn flat @click="onLogout"><v-icon left dark>exit_to_app</v-icon></v-btn>
-        </v-toolbar-items>
-        <div>
-          <v-btn icon>
-            <v-icon>apps</v-icon>
-          </v-btn>
-          <v-btn icon>
-            <v-icon>notifications</v-icon>
-          </v-btn>
-        </div>
-        <v-menu :nudge-width="100">
-          <v-toolbar-title slot="activator">
-            <span>{{selectedLocale}}</span>
-            <v-icon dark>arrow_drop_down</v-icon>
-          </v-toolbar-title>
-          <v-list>
-            <v-list-tile v-for="locale in locales" :key="locale" @click="setLocale(locale)">
-              <v-list-tile-title v-text="locale"></v-list-tile-title>
-            </v-list-tile>
-          </v-list>
-        </v-menu>
     </v-toolbar>
     <main>
       <v-content>
@@ -113,15 +86,14 @@ import UI_NAMES from '../../../constants/ui.element.names'
 export default {
   name: "Ui",
   props: {
-    msg: String
+    title: String
   },
   data() {
     return {
       selectedLocale: "EN",
       locales: ["EN", "ID"],
       drawer: false,
       menuItems: [
-        { icon: "settings", title: "Example Form", link: "/example-form" },
         {
           icon: "keyboard_arrow_up",
           "icon-alt": "keyboard_arrow_down",
@@ -139,20 +111,18 @@ export default {
     let whitelist = ["resources/addRoute"];
     this.$store.subscribe(mutation => {
       if (whitelist.includes(mutation.type)) {
-        this.menuItems[1].children.push({
-          icon: "home",
-          title: mutation.payload.name,
-          link: mutation.payload.path
-        });
+        this.menuItems.forEach(item => {
+          item.children.push({
+            icon: "list",
+            title: mutation.payload.name,
+            link: mutation.payload.path
+          });
+        })
       }
     });
   },
   computed: {},
   methods: {
-    onLogout() {
-      // eslint-disable-next-line
-      console.log("logout");
-    }
   }
 };
 </script>

src/constants/ui.content.default.js

@@ -7,7 +7,7 @@ export default {
    * UI component
    */
   // The Admin name in the Toolbar
-  MAIN_TOOLBAR_TITLE: 'Admin XXX',
+  MAIN_TOOLBAR_TITLE: 'Vue Admin',
   // The user name in the Toolbar
   MAIN_TOOLBAR_USER_AVATAR_NAME: 'Juan',
 

tests/e2e/specs/ui.spec.js

@@ -15,7 +15,7 @@ describe('UI Test', () => {
     cy.title().should('eq', UI_CONTENT.MAIN_TITLE)
   })
 
-  it('Toolbar title should be Vue Admin XXX', () => {
+  it('Toolbar title should be Vue Admin', () => {
     const mainToolbarTitleName = UI_NAMES.MAIN_TOOLBAR_TITLE
     const mainToolbarTitleElement = queryElementByProp({
       type: 'div',
@@ -30,21 +30,6 @@ describe('UI Test', () => {
     })
   })
 
-  it('Toolbar Avatar should show default user name JUAN', () => {
-    const mainToolbarUserAvatarName = UI_NAMES.MAIN_TOOLBAR_USER_AVATAR
-    const mainToolbarUserAvatarElement = queryElementByProp({
-      type: 'div',
-      prop: 'name',
-      value: mainToolbarUserAvatarName
-    })
-
-    const expectedMainToolbarUserAvatarNameText = UI_CONTENT.MAIN_TOOLBAR_USER_AVATAR_NAME
-
-    cy.get(mainToolbarUserAvatarElement).should((div) => {
-      expect(div).to.contain(expectedMainToolbarUserAvatarNameText)
-    })
-  })
-
   it('Toolbar hamburger button should open drawer on click', () => {
     const mainToolbarTitleName = UI_NAMES.MAIN_TOOLBAR_TITLE