Merge pull request #214 from Cambalab/213-Improve-unit-tests-Sidebar-…

…component

213 improve unit tests sidebar component

Docs/Admin/Admin.md

@@ -69,23 +69,23 @@ const adminOptions = {
 
 ### sidebar
 
-+   **Type:** `Object (optional)`
++   **Type:** `Object` *(optional)*
 
 +   **Details:** A sidebar component that used by the `appLayout` prop. If you want to use your own sidebar, you might want to take a look at the [**Sidebar docs**](../Ui-Components/Sidebar.md).
 
-+   **Default:** `DefaultSidebar`
++   **Default:** `SimpleSidebar`
 
 ### title
 
-+   **Type:** `String (optional)`
++   **Type:** `String` *(optional)*
 
 +   **Details:** a string used by the `appLayout` as the toolbar title
 
 +   **Default:** `Vue Admin`
 
 ### unauthorized
 
-+   **Type:** `Object (optional)`
++   **Type:** `Object` *(optional)*
 
 +   **Details:** A component that is used by the router whenever a user is not authorized to visit certain views.
 
@@ -95,7 +95,7 @@ const adminOptions = {
 
 ### appLayout
 
-+   **Type:** `Object (default)`
++   **Type:** `Object`
 
 +   **Details:** when a user is authenticated, `appLayout` is passed as prop to the `Authenticated` component.  
 

Docs/Layouts/AppLayout.md

@@ -1,4 +1,4 @@
-# AppLayout
+# `AppLayout`
 
 `AppLayout` is used as default to `appLayout` prop in the `Admin` component. It defines how most of the vue admin visual components are rendered.
 
@@ -10,7 +10,7 @@
 
 +   **Details:** a `Sidebar` component from the `@va-ui` module.
 
-+   **Default:** `DefaultSidebar`
++   **Default:** [`SimpleSidebar`](/Docs/Ui-Components/Sidebar/SimpleSidebar)
     > Note that it's currently assigned by `Admin`. Soon to be moved to `AppLayout` defaults.
 
 ### title
@@ -27,12 +27,12 @@
 
 +   **Type:** `Object`
 
-+   **Details:** It's just an object that contains user related functions tha are exposed to layouts:
++   **Details:** An object that contains user related functions that are exposed to layouts:
     +   `logout`: a function that implements the `auth/AUTH_LOGOUT_REQUEST` interface to call the `authModule`.
     +   `getUser`: a function that implements the `auth/AUTH_GET_USER` interface to call the `authModule`
 
     > Interfaces implementation can be found in `@va-auth/types`, while the `authModule` is a `@va-auth/store` module, and it's assigned by the `Admin` component.
 
 +   **Default:** An object with the logout and getUser function that, in turn, use the `@va-auth/types`: `AUTH_LOGOUT_REQUEST`, `AUTH_GET_USER`
-> The va object is designed in the `Authenticated` component.
-> The `Authenticated` component defines the va object. 
+
++   **Provided by:** [`Authenticated`](/Docs/Admin/Authenticated)

Docs/Ui-Components/Sidebar.md → Docs/Ui-Components/Sidebar/Sidebar.md

@@ -3,8 +3,9 @@
 A `Sidebar` component that wraps the Sidebar related custom components.
 
 <p align="center">
-  <img width="200" src="Sidebar/sidebar.png" alt="Vue Admin Sidebar" />
+  <img width="200" src="sidebar.png" alt="Vue Admin Sidebar" />
 </p>
+<br />
 
 Here you can find an example on how to use this component and the available components that you can provide to it as children:
 
@@ -27,7 +28,9 @@ As you've guessed a function `logout` must be defined in order to invoke it in t
 
 A more detailed description of each related component can be found in their respective file:
 
--   [SidebarHeading](Sidebar/SidebarHeading.md).
--   [SidebarAction](Sidebar/SidebarAction.md).
--   [SidebarLink](Sidebar/SidebarLink.md).
--   [SidebarNode](Sidebar/SidebarNode.md).
+## Related components
+
+-   [SidebarHeading](Sidebar/SidebarHeading.md)
+-   [SidebarAction](Sidebar/SidebarAction.md)
+-   [SidebarLink](Sidebar/SidebarLink.md)
+-   [SidebarNode](Sidebar/SidebarNode.md)

Docs/Ui-Components/Sidebar/SidebarAction.md

@@ -27,8 +27,22 @@ Here you can find an example on how to use this component:
 </script>
 ```
 
-### `SidebarAction` props
+## props
 
--   `title`: A String that will be displayed as a title inside the sidebar item for this action.
--   `action`: A Function that will be executed when the Action item is clicked.
--   `icon`: A String representing the name of the [Material Icon](https://cdn.materialdesignicons.com/3.8.95/) to prepend in the Action item.
+### title
+
++   **Type:** `String` *(optional)*
+
++   **Description:** A String that will be displayed as a title inside the sidebar item for this action.
+
+### action
+
++   **Type:** `Function` *(optional)*
+
++   **Description:** A Function that will be executed when the `SidebarAction` item is clicked.
+
+### icon
+
++   **Type:** `String` *(optional*)
+
++   **Description:** A String representing the name of a [Material Icon](https://cdn.materialdesignicons.com/3.8.95/) to prepend in the `SidebarAction` item.

Docs/Ui-Components/Sidebar/SidebarHeading.md

@@ -2,7 +2,7 @@
 
 A `SidebarHeading` component renders a heading item in the sidebar.
 
-*It's important to notice that using this component outside the `<Sidebar>` component is senseless.*
+*It's important to notice that not using this component as a `Sidebar` component child is senseless.*
 
 Here's a usage example:
 
@@ -23,9 +23,74 @@ Here's a usage example:
 </template>
 ```
 
-### `SidebarHeading` props
+## props
 
--   `title`: A String that will be displayed as title inside the sidebar item.
--   `subTitle`: A String that will be displayed as subTitle inside the sidebar item.
--   `avatar`: An Object representing a Vue Object that can be rendered at the left side of the sidebar heading.
--   `avatarProps`: An Object containing props to customize the default avatar provided.
+### avatar
+
++   **Type:** `Object`
+
++   **Description:** represents a Vue component that is be rendered at the left side of the sidebar heading.
+
++   **Default:** A functional component that given `color` and `content` as `avatarProps`, renders a `VListItemAvatar` component. More about [Vuetify avatar components](https://vuetifyjs.com/en/components/avatars). Example:
+
+    > ```javascript
+    > ...
+    > avatar: {
+    >   type: Object,
+    >   default: () => ({
+    >     name: 'SidebarHeadingAvatar',
+    >     functional: true,
+    >     render: function(h, context) {
+    >       const { props } = context
+    >       return (
+    >         <VListItemAvatar>
+    >           <VAvatar color={props.color}>{h(props.content)}</VAvatar>
+    >         </VListItemAvatar>
+    >       )
+    >     },
+    >   }),
+    > },
+    > ...
+    > ```
+
+### avatarProps
+
++   **Type:** `Object`
+
++   **Description:** An Object containing props to customize the `avatar` component.
+
++   **Default:** an object with props to be passed to the `avatar` prop component: `color: String` and `content: Object | VNode`. Example:
+
+    > ```javascript
+    > ...
+    > avatarProps: {
+    >   type: Object,
+    >   default: () => ({
+    >     color: 'teal',
+    >     content: AccountIcon,
+    >   }),
+    > },
+    > ...
+    > const AccountIcon = {
+    >   name: 'AccountIcon',
+    >   render: function(h) {
+    >     return <VIcon dark>account_circle</VIcon>
+    >   },
+    > }
+    > ```
+
+### title
+
++   **Type:** `String`
+
++   **Description:** A String that will be displayed as title inside the sidebar item.
+
++   **Default:** `'Menu'`
+
+### subTitle
+
++   **Type:** `String`
+
++   **Description:** A String that will be displayed as title inside the sidebar item.
+
++   **Default:** `''`

Docs/Ui-Components/Sidebar/SidebarLink.md

@@ -18,8 +18,22 @@ Here you can find an example on how to use this component:
 </template>
 ```
 
-### `SidebarLink` props
+## props
 
--   `title`: A String that will be displayed as title inside the sidebar item.
--   `path`: A String representing a relative path.
--   `icon`: A String representing the name of the [Material Icon](https://cdn.materialdesignicons.com/3.8.95/) to prepend in the Action item when the group is being displayed.
+### title
+
++   **Type:** `String` *(optional)*
+
++   **Description:** A String that will be displayed as a title inside the sidebar item.
+
+### path
+
++   **Type:** `String` *(optional)*
+
++   **Description:** A String representing a relative path.
+
+### icon
+
++   **Type:** `String` *(optional)*
+
++   **Description:** A String representing the name of the [Material Icon](https://cdn.materialdesignicons.com/3.8.95/) to prepend in the Action item when the group is being displayed.

Docs/Ui-Components/Sidebar/SidebarNode.md

@@ -20,8 +20,22 @@ Here you can find an example on how to use this component:
 </template>
 ```
 
-### `<SidebarNode>` props
+## props
 
--   `title`: A String that will be displayed as title inside the sidebar item.
--   `icon`: A String representing the name of the [Material Icon](https://cdn.materialdesignicons.com/3.8.95/) to prepend in the Action item when the group is being displayed.
--   `icon-alt`: A String representing the name of the [Material Icon](https://cdn.materialdesignicons.com/3.8.95/) to prepend in the Action item when the group is being displayed.
+### title
+
++   **Type:** `String` *(optional)*
+
++   **Description:** A `String` that will be displayed as title inside the sidebar item.
+
+### icon
+
++   **Type:** `String` *(optional)*
+
++   **Description:** A `String` representing the name of the [Material Icon](https://cdn.materialdesignicons.com/3.8.95/) to prepend in the Action item when the group is being displayed.
+
+### iconAlt
+
++   **Type:** `String` *(optional)*
+
++   **Description:** A `String` representing the name of the [Material Icon](https://cdn.materialdesignicons.com/3.8.95/) to prepend in the Action item when the group is being displayed.

Docs/Ui-Components/Sidebar/SimpleSidebar.md

@@ -0,0 +1,52 @@
+# `SimpleSidebar`
+
+This is a custom sidebar created using `Sidebar`, `SidebarHeading`,`SidebarAction`,`SidebarLink`,`SidebarNode` that can be exported from `vue-admin-js`. It's a little less customizable than building your own sidebar but it accepts a few useful props.
+
+## internal props
+
+### subscriptions
+
++   **Type:** `Array: Function`
+
++   **Details:** A list of functions. These are currently used to subscribe events to the store and eventually add items to the menu sidebar. These functions must take an `action: Function` that, in turn, take a `mutation: Object` and a `state: Object` (similar to vuex subsciptions). For example:
+    > ```javascript
+    > [
+    >   action => (mutation, state) => {
+    >     if (mutation.type === 'something') {
+    >       state.someProp = action()
+    >     }
+    >   },
+    > ]
+    > ```
+
++   **Default:** A list of one function that adds a route to the store state every time a mutation is triggered:
+
+    > ```javascript
+    > [
+    >   action => (mutation, state) => {
+    >     const { namespace, RESOURCES_ADD_ROUTE } = ResourcesTypes
+    >     if (mutation.type === `${namespace}/${RESOURCES_ADD_ROUTE}`) {
+    >       const currentRoutes = state.resources.routes.map(route => {
+    >         return { icon: 'list', title: route.name, link: route.path }
+    >       })
+    >       action(currentRoutes)
+    >     }
+    >   }
+    > ]
+    > ```
+
+### va
+
++   **Type:** `Object`
+
++   **Details:** An object that contains user related functions that are exposed to layouts:
+    +   `logout`: a function that implements the `auth/AUTH_LOGOUT_REQUEST` interface to call the `authModule`.
+    +   `getUser`: a function that implements the `auth/AUTH_GET_USER` interface to call the `authModule`
+
+    > Interfaces implementation can be found in `@va-auth/types`, while the `authModule` is a `@va-auth/store` module, and it's assigned by the `Admin` component.
+
++   **Default:** An object with the logout and getUser function that, in turn, use the `@va-auth/types`: `AUTH_LOGOUT_REQUEST`, `AUTH_GET_USER`
+> The va object is designed in the `Authenticated` component.
+> The `Authenticated` component defines the va object.
+
++   **Provided by:** [`AppLayout`](/Docs/Layouts/AppLayout)

demo/App.vue

@@ -4,7 +4,6 @@
   <Admin
 
     :authProvider="authProvider"
-    :sidebar="CustomSidebar"
     :unauthorized="UnauthorizedCustomView">
     <!-- Articles Resource -->
     <Resource

src/components/Admin/src/defaults.js

@@ -5,7 +5,7 @@ import {
   HomeLayout,
   UnauthorizedLayout,
 } from '@components/Layouts'
-import { DefaultSidebar } from '@components/UiComponents'
+import { SimpleSidebar } from '@components/UiComponents'
 import alertsModule from '@store/modules/alerts'
 import entitiesModule from '@store/modules/entities'
 import requestsModule from '@store/modules/requests'
@@ -20,7 +20,7 @@ export default () => {
   const appLayout = AppLayout
   const authLayout = AuthLayout
   const homeLayout = HomeLayout
-  const sidebar = DefaultSidebar
+  const sidebar = SimpleSidebar
   const title = UI_CONTENT.MAIN_TOOLBAR_TITLE
   const unauthorized = UnauthorizedLayout
 

src/components/Core/src/Core.vue

@@ -3,7 +3,7 @@ export default {
   functional: true,
   name: 'Core',
   props: {
-    layout: {},
+    layout: Object,
     title: String,
     sidebar: Object,
     va: Object,

src/components/UiComponents/Sidebar/SidebarHeading.vue

@@ -11,27 +11,28 @@
     </v-list-item-content>
   </v-list-item>
 </template>
+
 <script>
-import defaults from './defaults'
+import { sidebarHeadingDefaults } from './defaults'
 
 export default {
   name: 'SidebarHeading',
   props: {
     avatar: {
       type: Object,
-      default: () => defaults().props.avatar,
+      default: () => sidebarHeadingDefaults().props.avatar,
     },
     avatarProps: {
       type: Object,
-      default: () => defaults().props.avatarProps,
+      default: () => sidebarHeadingDefaults().props.avatarProps,
     },
     title: {
       type: String,
       default: 'Menu',
     },
     subTitle: {
       type: String,
-      default: defaults().props.subTitle,
+      default: sidebarHeadingDefaults().props.subTitle,
     },
   },
 }