Merge pull request #78 from what-crud/77_add-tree-view

77 add tree view

Author: szczepanmasny

Diff for: .eslintrc.js

@@ -2,21 +2,40 @@ module.exports = {
   root: true,
 
   env: {
-    node: true
+    node: true,
   },
 
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'comma-dangle': ['error', 'always-multiline'],
+    'array-element-newline': [
+      'error',  {
+        "multiline": true,
+        "minItems": 2,
+      },
+    ],
+    'array-bracket-newline': [
+      'error',  {
+        "multiline": true,
+        "minItems": 2,
+      },
+    ],
+    'array-bracket-spacing': ['error', 'never'],
+    'object-curly-newline': [
+      'error',  {
+        'consistent': true,
+      },
+    ],
+    'object-curly-spacing': ['error', 'always'],
   },
 
   parserOptions: {
-    parser: 'babel-eslint'
+    parser: 'babel-eslint',
   },
 
   extends: [
     'plugin:vue/essential',
-    '@vue/standard'
-  ]
+    '@vue/standard',
+  ],
 }

Diff for: README.md

@@ -4,7 +4,7 @@
 <h1 align="center">Vue CRUD</h1>
 <div align="center">
   <a><img alt="license" src="https://img.shields.io/badge/license-MIT-brightgreen.svg"></a>
-  <a><img alt="version" src="https://img.shields.io/badge/version-v0.14.2-yellow.svg"></a>
+  <a><img alt="version" src="https://img.shields.io/badge/version-v0.15.0-yellow.svg"></a>
   <a><img alt="build" src="https://travis-ci.org/what-crud/vue-crud.svg?branch=master"></a>
   <a><img alt="PRs" src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg"></a>
 </div>
@@ -34,9 +34,12 @@ Vue CRUD provides a set of utilities, from which you can compose your own applic
     - Show active/inactive records,
     - Search phrase in whole table,
     - Search phrase in selected column (exact, like and list mode)
-  - versions:
-    - client side (small tables)
+  - items view versions:
+    - client side (small tables),
     - server side (big tables)
+  - items view types:
+    - table,
+    - **NEW!** tree
   - other functions and features:
     - datatable mechanism allows selection of the number of records per page, page transition and sorting,
     - management of a child table from the parent table module,

Diff for: babel.config.js

@@ -1,5 +1,3 @@
 module.exports = {
-  presets: [
-    '@vue/app',
-  ],
+  presets: ['@vue/app'],
 }

Diff for: docs/.vuepress/config.js

@@ -129,6 +129,7 @@ module.exports = {
             '/guide/crud/basics',
             '/guide/crud/custom-configuration',
             '/guide/crud/field-options',
+            '/guide/crud/items-view',
             '/guide/crud/extended-details',
             '/guide/crud/item-elements',
           ]

Diff for: docs/guide/components/crud.md

@@ -25,7 +25,8 @@
 |watchForCreation|-|`Boolean`|`false`|false|
 |primaryKey|-|`String`|`false`|crud.primaryKey || 'id'|
 |activeColumnName|-|`String`|`false`|crud.activityColumnName || 'active'|
-|mode|-|`String`|`false`|'ClientSide'|
+|mode (obsolete)|'ClientSide' or 'ServerSide'|`String`|`false`|'ClientSide'|
+|itemsView|[See list of available properties](/guide/crud/items-view.html)|`Object`|`false`|{type: 'table', mode: 'client'}|
 |createMode|-|`Boolean`|`false`|crud.createMode === undefined ? true : crud.createMode|
 |editMode|-|`Boolean`|`false`|crud.editMode === undefined ? true : crud.editMode|
 |mainFilter|-|`Boolean`|`false`|crud.mainFilter === undefined ? true : crud.mainFilter|
@@ -35,6 +36,7 @@
 |selectManyMode|-|`Boolean`|`false`|crud.selectManyMode === undefined ? true : crud.selectManyMode|
 |updateManyMode|-|`Boolean`|`false`|crud.updateManyMode === undefined ? true : crud.updateManyMode|
 |removeManyMode|-|`Boolean`|`false`|crud.removeManyMode === undefined ? true : crud.removeManyMode|
+|itemDetailsWidth|-|`Any`|`false`|600|
 
 <!-- @vuese:[name]:props:end -->
 
@@ -290,11 +292,12 @@ export default {
 |---|---|---|---|---|
 |title|-|`String`|`false`|-|
 |fieldsInfo|-|`Array`|`false`|-|
+|createMode|-|`Boolean`|`false`|true|
+|editMode|-|`Boolean`|`false`|true|
 |deleteMode|-|`String`|`false`|'soft'|
 |customHeaderButtons|-|`Array`|`false`||
 |customButtons|-|`Array`|`false`||
 |itemElements|-|`Object`|`false`|-|
-|createButton|-|`Boolean`|`false`|true|
 |editButton|-|`Boolean`|`false`|true|
 |meta|-|`Array`|`false`||
 |primaryKey|-|`String`|`false`|'id'|
@@ -309,7 +312,7 @@ export default {
 <!-- @vuese:[name]:mixIns:start -->
 |MixIn|
 |---|
-|ClientSideFilteringMixin|
+|ClientModeFilteringMixin|
 |HelperMixin|
 
 <!-- @vuese:[name]:mixIns:end -->

Diff for: docs/guide/crud/field-options.md

@@ -21,6 +21,9 @@ Parameters:
 ## `grid`
 *String*, optional. Vuetify grid used in extended details. This parameter is used to determine the field width on different screens.
 
+## `edit`
+*Boolean*, default: **true**. Responsible for displaying the field in the update form.
+
 ## `multiedit`
 *Boolean*, default: **true**. Responsible for displaying the field in the multiple update form.
 

Diff for: docs/guide/crud/items-view.md

@@ -0,0 +1,14 @@
+# Items view
+
+## `type`
+*String*, default: **table**. Available values: **table**, **tree**. Information items view should be displayed as table or tree.
+
+## `mode`
+*String*, default: **client**. Available values: **client**, **server**. Information items view should be automatically by Vue CRUD or server side by API.
+
+## `config`
+*Object*, optional. Property must be defined if field `type` is **tree**.
+
+Parameters:
+- `parentColumnName`: Name of column with parent item id. Default value: **parent_id**
+- `unassignedItemParent`: Value of item's parent that means this item is unassigned (root object). Default value: **null**

Diff for: docs/guide/essentials/introduction.md

@@ -27,9 +27,12 @@ Vue CRUD provides a set of utilities, from which you can compose your own applic
     - Show active/inactive records,
     - Search phrase in whole table,
     - Search phrase in selected column (exact, like and list mode)
-  - versions:
-    - client side (small tables < 2000 records)
-    - server side (> 2000 records)
+  - items view versions:
+    - client side (small tables),
+    - server side (big tables)
+  - items view types:
+    - table,
+    - **NEW!** tree
   - other functions and features:
     - datatable mechanism allows selection of the number of records per page, page transition and sorting,
     - management of a child table from the parent table module,
@@ -63,21 +66,40 @@ The record creation / editing form supports the following types of fields:
 * Decimal
 * Textarea,
 * Rich Text Box,
-* Select (list from related table),
+* Select (hardcoded list or obtained from API),
 * Datepicker,
 * Timepicker,
 * Checkbox,
-* Files
+* Files,
+* **NEW!** Dynamic (user can select field type separately for each record)
 
-## Demo
+## Support for mobile devices
 
-- **<a href="http://vue-crud-simple.id-a.pl" target="_blank">Simple CRUD demo</a>**
-- **<a href="http://vue-crud-crm.id-a.pl" target="_blank">CRM demo</a>**\
-    Credentials with limited privileges (readonly):\
-    Login:  [email protected]\
-    Pass:   ajSGenC0\
-    To get full user account, contact me (Szczepan Masny) on my
-    <a href="http://id-a.pl" target="_blank">company site</a>.
+### App layout on desktop...
+ <img
+  width="auto"
+  height="400"
+  src="https://user-images.githubusercontent.com/18534115/68077595-9fed6d00-fdc6-11e9-9e52-37dad9bb4bc1.png"
+  alt="app layout on desktop"
+/>
+
+### ... and on mobile device
+ <img
+  width="auto"
+  height="400"
+  src="https://user-images.githubusercontent.com/18534115/68077552-3ff6c680-fdc6-11e9-9b8c-3e92dce596c5.png"
+  alt="app layout on mobile device"
+/>
+
+## Demo versions
+
+#### <a href="http://vue-crud-demo.id-a.pl" target="_blank">DEMO / SANDBOX</a>
+
+#### <a href="http://vue-crud-crm.id-a.pl" target="_blank">CRM DEMO</a>
+Credentials with limited privileges (readonly):\
+Login:  [email protected]\
+Pass:   ajSGenC0\
+To get full user account, contact me on my <a href="http://id-a.pl" target="_blank">company site</a>.
 
 ## License
 [MIT](https://opensource.org/licenses/MIT)

Diff for: examples/cms/config/main.js

@@ -1,13 +1,14 @@
 export default {
   title: 'YourCMS',
-  locales: [{
-    name: 'en',
-    text: 'English',
-  },
-  {
-    name: 'pl',
-    text: 'Polski',
-  },
+  locales: [
+    {
+      name: 'en',
+      text: 'English',
+    },
+    {
+      name: 'pl',
+      text: 'Polski',
+    },
   ],
   defaultLocale: 'en',
   iconfont: 'md',

Diff for: examples/cms/locales/en/datatable.js

@@ -42,5 +42,9 @@ export default {
     refreshTable: 'Refresh table',
     copyToExcel: 'Copy to Excel',
     clearFilters: 'Clear filters',
+    move: 'Move',
+    insert: 'Insert',
+    insertUnassigned: 'Insert unassigned',
+    cancelMove: 'Cancel move',
   },
 }

Diff for: examples/cms/locales/en/routes.js

@@ -6,6 +6,7 @@ export default {
     name: 'CMS',
     settings: 'Settings',
     messages: 'Messages',
+    menuItems: 'Menu items',
   },
   store: {
     name: 'Store',

Diff for: examples/cms/locales/pl/datatable.js

@@ -42,5 +42,9 @@ export default {
     refreshTable: 'Odswież tabelę',
     copyToExcel: 'Kopiuj do Excela',
     clearFilters: 'Wyczyść filtry',
+    move: 'Przenieś',
+    insert: 'Wstaw',
+    insertUnassigned: 'Wstaw bez przypisania',
+    cancelMove: 'Anuluj przenoszenie',
   },
 }

Diff for: examples/cms/locales/pl/routes.js

@@ -6,6 +6,7 @@ export default {
     name: 'CMS',
     settings: 'Ustawienia',
     messages: 'Wiadomości',
+    menuItems: 'Elementy menu',
   },
   store: {
     name: 'Sklep',

Diff for: examples/cms/router.js

@@ -8,31 +8,32 @@ import store from '@/store/'
 Vue.use(Router)
 
 const router = new Router({
-  routes: [{
-    path: '/',
-    name: 'app',
-    component: App,
-    children: appRoutes,
-    beforeEnter: (to, from, next) => {
-      var auth = localStorage.getItem('token')
-      if (!auth) {
-        store.commit('auth/logout')
-        next('/login')
-      } else {
-        Vue.http.get('auth/user')
-          .then(response => {
-            next()
-          }, response => {
-            next('/login')
-          })
-      }
+  routes: [
+    {
+      path: '/',
+      name: 'app',
+      component: App,
+      children: appRoutes,
+      beforeEnter: (to, from, next) => {
+        var auth = localStorage.getItem('token')
+        if (!auth) {
+          store.commit('auth/logout')
+          next('/login')
+        } else {
+          Vue.http.get('auth/user')
+            .then(response => {
+              next()
+            }, response => {
+              next('/login')
+            })
+        }
+      },
+    },
+    {
+      path: '/login',
+      name: 'login',
+      component: Login,
     },
-  },
-  {
-    path: '/login',
-    name: 'login',
-    component: Login,
-  },
   ],
 })
 

Diff for: examples/cms/routes/app/Index.vue

@@ -108,6 +108,10 @@ export default {
             text: 'cms.messages',
             route: '/messages',
           },
+          {
+            text: 'cms.menuItems',
+            route: '/menu-items',
+          },
         ],
       },
       {
@@ -192,7 +196,10 @@ export default {
     ],
   }),
   computed: {
-    ...mapGetters('auth', ['isLogged', 'userInfo']),
+    ...mapGetters('auth', [
+      'isLogged',
+      'userInfo',
+    ]),
     year () {
       let year = new Date()
       return year.getFullYear()

Diff for: examples/cms/routes/app/routes/administration/Index.vue

@@ -16,9 +16,7 @@ export default {
     this.setModule('admin.name')
   },
   methods: {
-    ...mapMutations('app', [
-      'setModule',
-    ]),
+    ...mapMutations('app', ['setModule']),
   },
 }