closes #30 - Sort by column value

illjah42 · illjah42 · commit 6591a3cf2acb · 2019-05-27T14:08:26.000+03:00
diff --git a/dist/js/main.js b/dist/js/main.js
diff --git a/dist/js/main.legacy.js b/dist/js/main.legacy.js
diff --git a/examples/index.html b/examples/index.html
@@ -22,78 +22,77 @@
     <script src="https://cdn.pkgkit.com/5cd207e2c94eb723c3307764a5693def/awes-io/context-menu/v1.x.x/js/main.js"></script>
 
     <!-- core -->
-    <script src="https://cdn.pkgkit.com/5cd207e2c94eb723c3307764a5693def/awes-io/base-js/v1.3.15/js/main.js"></script>
+    <script src="https://cdn.pkgkit.com/5cd207e2c94eb723c3307764a5693def/awes-io/base-js/v1.x.x/js/main.js"></script>
 </head>
 <body>
-    <div id="awes-app">
-        <table-builder store-data="table" row-url="http://company.local-awescrm.de:5051/managers/{id}">
+    <content-wrapper store-data="table" url="/test-data.json">
+        <template slot-scope="table">
+            <table-builder :default="table.data" row-url="http://company.local-awescrm.de:5051/managers/{id}">
 
-            <template slot="empty">
-                <p>You do not have projects Want to create the first one?</p>
-            </template>
-
-            <template slot="header">
-                <h2 style="padding: 1rem; background-color: lightgray">
-                    Test header block
-                </h2>
-            </template>
-
-            <tb-column name="name">
-                <template slot-scope="col">
-                    <div class="ava-text">
-                        <span v-if="col.data.avatar" v-html="col.data.avatar"></span>
-                        <i v-else class="icon icon-user"></i>
-
-                        <span v-if="col.data.active">{{ $get(col.data, 'profile_manager.full_name') }}</span>
-                        <strike v-else>{{ $get(col.data, 'profile_manager.full_name') }}</strike>
-                    </div>
-                </template>
-            </tb-column>
-            <tb-column name="position">
-                <template slot-scope="col">
-                    {{ col.data.profile_manager.position }}
-                </template>
-            </tb-column>
-            <tb-column name="phone" class="int-table__nowrap" media="tablet, desktop">
-                <template slot-scope="col">
-                    <a :href="'tel:' + $get(col.data.phones[0], 'phone_link')">
-                        {{ $get(col.data.phones[0], 'phone_formatted') }}
-                    </a>
+                <template slot="empty">
+                    <p>You do not have projects Want to create the first one?</p>
                 </template>
-            </tb-column>
-            <tb-column name="email" class="int-table__nowrap" media="desktop">
-                <template slot-scope="col">
-                    <a :href="'mailto:' + col.data.email">{{ col.data.email }}</a>
+
+                <template slot="header">
+                    <h2 style="padding: 1rem; background-color: lightgray">
+                        Test header block
+                    </h2>
                 </template>
-            </tb-column>
 
-            <template slot="hidden" slot-scope="h">
-                <ul>
-                    <li v-if="h.matchedMedia.includes('mobile')">
-                        <strong>{{ h.rowData.profile_manager.position }}</strong>
-                    </li>
-                    <li v-if="h.rowData.phones.length">
-                        <a :href="'tel:' + h.rowData.phones[0].phone_link">
-                            {{ h.rowData.phones[0].phone_formatted }}
+                <tb-column name="name">
+                    <template slot-scope="col">
+                        <div class="ava-text">
+                            <span v-if="col.data.avatar" v-html="col.data.avatar"></span>
+                            <i v-else class="icon icon-user"></i>
+                            <component :is="col.data.active ? 'span' : 'strike'">
+                                {{ $get(col.data, 'profile_manager.full_name') }}
+                            </component>
+                        </div>
+                    </template>
+                </tb-column>
+                <tb-column name="position" sort>
+                    <template slot-scope="col">
+                        {{ col.data.profile_manager.position }}
+                    </template>
+                </tb-column>
+                <tb-column name="phone" class="int-table__nowrap" media="tablet, desktop">
+                    <template slot-scope="col">
+                        <a :href="'tel:' + $get(col.data.phones[0], 'phone_link')">
+                            {{ $get(col.data.phones[0], 'phone_formatted') }}
                         </a>
-                    </li>
-                    <li><a :href="'mailto:' + h.data.email">{{ h.data.email }}</a></li>
-                </ul>
-            </template>
+                    </template>
+                </tb-column>
+                <tb-column name="email" sort="mail|mail_down" class="int-table__nowrap" media="desktop">
+                    <template slot-scope="col">
+                        <a :href="'mailto:' + col.data.email">{{ col.data.email }}</a>
+                    </template>
+                </tb-column>
+
+                <template slot="hidden" slot-scope="h">
+                    <ul>
+                        <li v-if="h.matchedMedia.includes('mobile')">
+                            <strong>{{ h.rowData.profile_manager.position }}</strong>
+                        </li>
+                        <li v-if="h.rowData.phones.length">
+                            <a :href="'tel:' + h.rowData.phones[0].phone_link">
+                                {{ h.rowData.phones[0].phone_formatted }}
+                            </a>
+                        </li>
+                        <li><a :href="'mailto:' + h.data.email">{{ h.data.email }}</a></li>
+                    </ul>
+                </template>
 
-            <template slot="footer">
-                <div style="padding: 1rem; background-color: lightgray">
-                    Test footer block with <button>no-effect button :)</button>
-                </div>
-            </template>
-        </table-builder>
+                <template slot="footer">
+                    <div style="padding: 1rem; background-color: lightgray">
+                        Test footer block with <button>no-effect button :)</button>
+                    </div>
+                </template>
+            </table-builder>
 
-        <paginate-builder
-            ref="pb"
-            url="/test-data.json"
-            store-data="table"
-            :default="false"
-        ></paginate-builder>
-    </div>
+            <paginate-builder
+                :meta="table.meta"
+            ></paginate-builder>
+        </template>
+    </content-wrapper>
 </body>
 </html>
diff --git a/examples/table-form-modal.html b/examples/table-form-modal.html
diff --git a/examples/test-data.json b/examples/test-data.json
@@ -26,7 +26,7 @@
             "avatar": null,
             "phones": [],
             "email": "camylle57@example.com",
-            "active": 1,
+            "active": 0,
             "theme_dark": 0,
             "profile_manager": {
                 "full_name": "Clementine Farrell",
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "table-builder",
-    "version": "1.1.1",
+    "version": "1.2.0",
     "description": "Dynamic tables with pagination and sorting for data visualization",
     "main": "dist/js/main.js",
     "module": "src/js/plugin.js",
diff --git a/resources/js/mixins/config.js b/resources/js/mixins/config.js
@@ -0,0 +1,8 @@
+import config from '../modules/config.js'
+
+export default {
+
+    beforeCreate() {
+        this._config = Object.assign(config, _.pick(AWES._config.tableBuilder, Object.keys(config)))
+    }
+}
diff --git a/resources/js/modules/config.js b/resources/js/modules/config.js
@@ -5,5 +5,10 @@ export default {
         mobile: '(max-width: 600px)',
         tablet: '(min-width: 601px) and (max-width: 900px)',
         desktop: '(min-width: 901px)'
+    },
+    sort: {
+        param: 'orderBy',
+        ascTemplate: '%s',
+        descTemplate: '%s_desc'
     }
 }
diff --git a/resources/js/modules/fp.js b/resources/js/modules/fp.js
@@ -13,3 +13,5 @@ export const isSet = (val) => {
 export const ucFirst = (string) => {
     return string.charAt(0).toUpperCase() + string.slice(1);
 }
+
+export const trimStr = string => string.trim()
diff --git a/resources/vue/paginate-builder.vue b/resources/vue/paginate-builder.vue
@@ -51,12 +51,14 @@
 
 <script>
 import { compare } from '../js/modules/fp.js'
-import config from '../js/modules/config.js'
+import configMixin from '../js/mixins/config.js'
 
 export default {
 
     name: 'paginate-builder',
 
+    mixins: [ configMixin ],
+
     props: {
 
         meta: Object,
@@ -146,12 +148,6 @@ export default {
     },
 
 
-    beforeCreate() {
-        // config
-        this._config = Object.assign(config, _.pick(AWES._config.tableBuilder, Object.keys(config)))
-    },
-
-
     created() {
         //Если данные не переданы в компонент, забираем с севера
         if ( this.default === false) {
diff --git a/resources/vue/table-builder.vue b/resources/vue/table-builder.vue
@@ -42,7 +42,15 @@
         >
             <thead>
                 <tr>
-                    <th v-for="(name, i) in columnNames" :key="i">{{ name }}</th>
+                    <th v-for="({ label, sort }, i) in columnsHead" :key="i">
+                        <tb-sort-button
+                            v-if="sort"
+                            v-bind="sort"
+                        >
+                            {{ label }}
+                        </tb-sort-button>
+                        <template v-else>{{ label }}</template>
+                    </th>
                     <th v-if="hiddenOptions && hiddenOptions.length"></th>
                 </tr>
             </thead>
@@ -91,17 +99,19 @@
 </template>
 
 <script>
-import { ucFirst } from '../js/modules/fp.js'
-import mediaQueries from '../js/mixins/media-queries.js'
+import { ucFirst, trimStr } from '../js/modules/fp.js'
+import mediaQueriesMixin from '../js/mixins/media-queries.js'
+import configMixin from '../js/mixins/config.js'
 import tbRow from './tb-row.vue'
+import tbSortButton from './tb-sort-button.vue'
 
 export default {
 
     name: 'table-builder',
 
-    mixins: [ mediaQueries ],
+    mixins: [ mediaQueriesMixin, configMixin ],
 
-    components: { tbRow },
+    components: { tbRow, tbSortButton },
 
 
     props: {
@@ -189,13 +199,13 @@ export default {
             })
         },
 
-        columnNames() {
-            return this.shownOptions.map( item => {
-                return ucFirst( typeof item.label !== 'undefined' ?
-                                       item.label :
-                                       item.name )
+        columnsHead() {
+            return this.shownOptions.map( option => {
+                let label = ucFirst( typeof option.label !== 'undefined' ? option.label : option.name )
+                let sort = typeof option.sort === 'string' ? this._getSortParams( option.name, option.sort ) : false
+                return { label, sort }
             })
-        },
+        }
     },
 
 
@@ -216,6 +226,17 @@ export default {
                 this.activeItem = null
             }
         },
+
+        _getSortParams(label, sort) {
+            let asc = this.$get(this._config, 'sort.ascTemplate').replace('%s', label)
+            let desc = this.$get(this._config, 'sort.descTemplate').replace('%s', label)
+            if ( sort !== '' ) {
+                let [_asc, _desc] = sort.split('|').map(trimStr)
+                asc = _asc ? _asc : asc
+                desc = _desc ? _desc : desc
+            }
+            return { asc, desc }
+        }
     }
 }
 </script>
diff --git a/resources/vue/tb-column.vue b/resources/vue/tb-column.vue
@@ -9,7 +9,9 @@ export default {
 
         label: String,
 
-        media: String
+        media: String,
+
+        sort: String
     }
 }
 </script>
diff --git a/resources/vue/tb-sort-button.vue b/resources/vue/tb-sort-button.vue

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "table-builder",`
`3`		`- "version": "1.1.1",`
	`3`	`+ "version": "1.2.0",`
`4`	`4`	`"description": "Dynamic tables with pagination and sorting for data visualization",`
`5`	`5`	`"main": "dist/js/main.js",`
`6`	`6`	`"module": "src/js/plugin.js",`
Original file line number	Diff line number	Diff line change
`@@ -5,5 +5,10 @@ export default {`
`5`	`5`	`mobile: '(max-width: 600px)',`
`6`	`6`	`tablet: '(min-width: 601px) and (max-width: 900px)',`
`7`	`7`	`desktop: '(min-width: 901px)'`
	`8`	`+ },`
	`9`	`+ sort: {`
	`10`	`+ param: 'orderBy',`
	`11`	`+ ascTemplate: '%s',`
	`12`	`+ descTemplate: '%s_desc'`
`8`	`13`	`}`
`9`	`14`	`}`
Original file line number	Diff line number	Diff line change
`@@ -13,3 +13,5 @@ export const isSet = (val) => {`
`13`	`13`	`export const ucFirst = (string) => {`
`14`	`14`	`return string.charAt(0).toUpperCase() + string.slice(1);`
`15`	`15`	`}`
	`16`	`+`
	`17`	`+export const trimStr = string => string.trim()`