Back to normal tables

AsgardCms · Sep 15, 2017 · f3e9c54 · f3e9c54
1 parent 2c7b3c5
commit f3e9c54
Showing 1 changed file with 16 additions and 56 deletions.
diff --git a/Modules/Page/Assets/js/components/PageTable.vue b/Modules/Page/Assets/js/components/PageTable.vue
@@ -3,18 +3,14 @@
         <div class="col-xs-12">
             <div class="box box-primary">
                 <div class="box-body">
-                    <el-table
-                            :data="data"
-                            stripe
-                            style="width: 100%"
-                            @sort-change="handleSortChange">
-                        <el-table-column prop="id" label="Id" width="100" sortable>
+                    <data-tables :data="data" :actions-def="actionsDef">
+                        <el-table-column prop="id" label="Id" width="100">
                         </el-table-column>
-                        <el-table-column prop="translations.title" :label="translate('page', 'title')" sortable>
+                        <el-table-column prop="title" :label="translate('page', 'title')">
                         </el-table-column>
-                        <el-table-column prop="translations.slug" label="Slug" sortable>
+                        <el-table-column prop="slug" label="Slug">
                         </el-table-column>
-                        <el-table-column prop="created_at" label="Created at" sortable>
+                        <el-table-column prop="created_at" label="Created at">
                         </el-table-column>
                         <el-table-column fixed="right" prop="actions" label="Actions">
                             <template scope="scope">
@@ -25,20 +21,7 @@
                                 </delete-button>
                             </template>
                         </el-table-column>
-                    </el-table>
-                    <div class="sc-table">
-                        <div class="pagination-wrap">
-                            <el-pagination
-                                    @size-change="handleSizeChange"
-                                    @current-change="handleCurrentChange"
-                                    :current-page.sync="meta.current_age"
-                                    :page-sizes="[10, 20, 50, 100]"
-                                    :page-size="parseInt(meta.per_page)"
-                                    layout="total, sizes, prev, pager, next, jumper"
-                                    :total="meta.total">
-                            </el-pagination>
-                        </div>
-                    </div>
+                    </data-tables>
                 </div>
             </div>
         </div>
@@ -57,7 +40,17 @@
             return {
                 data,
                 meta: {},
+                order_meta: {},
                 links: {},
+                actionsDef: {
+                    def: [{
+                        name: this.translate('page', 'create page'),
+                        icon: 'edit',
+                        handler: () => {
+                            this.$router.push({name: 'admin.page.page.create'})
+                        }
+                    }]
+                }
             }
         },
         methods: {
@@ -72,39 +65,6 @@
             goToEdit(scope) {
                 this.$router.push({name: 'admin.page.page.edit', params: {pageId: scope.row.id}})
             },
-            handleSizeChange(event) {
-                console.log('per page :' + event);
-                axios.get(route('api.page.page.index', {per_page: event, page: this.meta.current_page}))
-                    .then(response => {
-                        this.data = response.data.data;
-                        this.meta = response.data.meta;
-                        this.links = response.data.links;
-                    });
-            },
-            handleCurrentChange(event) {
-                console.log('current page :' + event);
-                axios.get(route('api.page.page.index', {page: event, per_page: this.meta.per_page}))
-                    .then(response => {
-                        this.data = response.data.data;
-                        this.meta = response.data.meta;
-                        this.links = response.data.links;
-                    });
-            },
-            handleSortChange(event) {
-                console.log('sorting', event);
-
-                axios.get(route('api.page.page.index', {
-                    page: this.meta.current_page,
-                    per_page: this.meta.per_page,
-                    order_by: event.prop,
-                    order: event.order,
-                }))
-                    .then(response => {
-                        this.data = response.data.data;
-                        this.meta = response.data.meta;
-                        this.links = response.data.links;
-                    });
-            },
         },
         mounted() {
             this.fetchData();