@tripup-company/element-ui-extended 0.0.4 → 0.0.6

package/src/components/GenericTable/index.vue

@@ -1,67 +1,32 @@
 <template>
-  <div v-loading="loading" class="generic-table">
-    <slot>
-      <el-row v-if="showTopFilter" :gutter="20">
-        <generic-top-filter ref="genericTopFilter" />
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="18">
-          <generic-rows />
-          <el-row>
-            <el-col>
-              <generic-paginator />
-            </el-col>
-          </el-row>
-        </el-col>
-        <el-col :span="6">
-          <generic-filter ref="genericFilter" />
-        </el-col>
-      </el-row>
-    </slot>
+  <div>
+    <el-table :data="data" border @sort-change="sortChange">
+      <template v-for="field in fields">
+        <template v-if="field.callback">
+          <el-table-column :key="field.prop" v-slot="context" :prop="field.prop" :label="field.label" :width="field.width ? field.width : null" sortable="custom">
+            <el-link @click="field.callback(field.prop, context.$index, context.row)">
+              {{ typeof field.formatter === 'function' ? field.formatter(context.row) : context.row[field.prop] }}
+            </el-link>
+          </el-table-column>
+        </template>
+        <template v-else>
+          <el-table-column :formatter="typeof field.formatter === 'function' ? field.formatter : null" :key="field.prop" :prop="field.prop" :label="field.label" :width="field.width ? field.width : null" sortable="custom" />
+        </template>
+      </template>
+    </el-table>
   </div>
 </template>
+
 <script>
-import GenericPaginator from "./GenericPaginator";
-import GenericFilter from "./GenericFilter";
-import GenericTopFilter from "./GenericTopFilter";
-import GenericRows from "./GenericRows";
-import MetaModel from "../../models/meta-model.ts";
-import ListQueryService from "../../services/list-query-service.ts";
-import FilterConverter from "./filter-convertor.ts";
+
 export default {
   name: "GenericTable",
-  components: {
-    GenericRows,
-    GenericFilter,
-    GenericPaginator,
-    GenericTopFilter,
-  },
-  provide() {
-    const data = {};
-    ["items", "fields", "filters", "loading", "meta"].forEach((key) => {
-      Object.defineProperty(data, key, {
-        enumerable: true,
-        get: () => this[key],
-      });
-    });
-    return {
-      data,
-      search: this.search,
-      actions: {
-        handleSizeChange: this.handleSizeChange,
-        handleCurrentChange: this.handleCurrentChange,
-        handleFilterChange: this.handleFilterChange,
-        handleApplyFilter: this.handleApplyFilter,
-        handleResetFilter: this.handleResetFilter,
-      },
-    };
-  },
   props: {
-    repository: {
+    data: {
       default() {
         return {};
       },
-      type: Object,
+      type: Array,
     },
     title: {
       default: "",
@@ -71,111 +36,16 @@ export default {
       default: () => [],
       type: Array,
     },
-    filters: {
-      default: () => [],
-      type: Array,
-    },
   },
   data: function () {
-    let search = {};
-    const filterConvertor = new FilterConverter();
-    const listQueryService = new ListQueryService(
-      this.$route.name,
-      this.$services.localStorage()
-    );
-    for (const column of this.filters) {
-      search[column.name] = {
-        operator: "",
-        value: "",
-        position: column.position ? column.position : null,
-      };
-    }
-    search = Object.assign(search, listQueryService.getListQuery().search);
     return {
       loading: false,
-      filter: {},
-      items: [],
-      search: search,
-      meta: new MetaModel(),
-      filterConvertor: filterConvertor,
-      listQueryService: listQueryService,
     };
   },
-  computed: {
-    showTopFilter() {
-      if (this.filters.filter((e) => e.position === "top").length > 0) {
-        return true;
-      }
-      return false;
-    },
-    queryFilter() {
-      const meta = this.listQueryService.getListQuery().meta;
-      const query = {
-        page: this.meta?.pagination?.current_page
-          ? this.meta.pagination.current_page
-          : meta.page,
-        limit: this.meta?.pagination?.per_page
-          ? this.meta.pagination.per_page
-          : meta.limit,
-      };
-      return { ...query, ...this.filter };
-    },
-  },
-  mounted() {
-    this.filter = this.$refs.genericFilter.getFilter();
-    this.fetch();
-  },
   methods: {
-    async fetch() {
-      this.loading = true;
-      try {
-        const response = await this.repository.all(this.queryFilter);
-        this.items = response.data;
-        this.meta = response.meta;
-      } catch (e) {
-        this.$message.error(e.message);
-      }
-      this.loading = false;
-    },
-
-    handleSizeChange(val) {
-      this.listQueryService.updateListQuery({ meta: { limit: val } });
-      this.meta.pagination.per_page = val;
-      this.fetch();
-    },
-    handleCurrentChange(val) {
-      this.listQueryService.updateListQuery({ meta: { page: val } });
-      this.meta.pagination.current_page = val;
-      this.fetch();
-    },
-    handleFilterChange(val) {
-      this.filter = val;
-      this.meta.pagination.current_page = 1;
-      this.fetch();
-    },
-    handleApplyFilter() {
-      this.listQueryService.updateListQuery({ search: this.search });
-      this.handleFilterChange(this.filterConvertor.applyFilter(this.search));
-    },
-    handleResetFilter() {
-      console.log(this.search);
-      for (const column in this.search) {
-        if (this.search[column].position === "top") {
-          this.search[column] = Object.assign(this.search[column], {
-            value: "",
-          });
-        } else {
-          this.search[column] = Object.assign(this.search[column], {
-            operator: "",
-            value: "",
-          });
-        }
-      }
-      this.listQueryService.updateListQuery({ search: this.search });
-      this.handleFilterChange({});
-    },
-  },
+    sortChange(data) {
+      this.$emit('sort:change', data);
+    }
+  }
 };
 </script>
-
-<style scoped></style>

package/src/test/unit/components/TestComponent.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    Hello world!
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TestComponent',
+};
+</script>
+
+<style scoped>
+
+</style>

package/src/components/GenericTable/GenericPaginator.vue

@@ -1,37 +0,0 @@
-<template>
-  <div class="m-t-15">
-    <el-pagination
-      :current-page="currentPage"
-      :total="total"
-      :layout="'total, sizes, prev, pager, next, jumper'"
-      @size-change="actions.handleSizeChange"
-      @current-change="actions.handleCurrentChange"
-    />
-  </div>
-</template>
-
-<script>
-
-export default {
-  name: 'GenericPaginator',
-  inject: ['data', 'actions'],
-  computed: {
-    currentPage(){
-      if (this.data.meta?.pagination){
-        return this.data.meta.pagination.current_page;
-      }
-      return 0;
-    },
-    total(){
-      if (this.data.meta?.pagination){
-        return this.data.meta.pagination.total;
-      }
-      return 0;
-    },
-  },
-};
-</script>
-
-<style scoped>
-
-</style>

package/src/components/GenericTable/GenericRows.vue

@@ -1,27 +0,0 @@
-<template>
-  <div>
-    <slot :items="data.items" :fields="data.fields">
-      <el-table :data="data.items" border>
-        <template v-for="field in data.fields">
-          <template v-if="field.callback">
-            <el-table-column :key="field.prop" v-slot="context" :prop="field.prop" :label="field.label" :width="field.width ? field.width : null">
-              <el-link @click="field.callback(field.prop, context.$index, context.row)">
-                {{ typeof field.formatter === 'function' ? field.formatter(context.row) : context.row[field.prop] }}
-              </el-link>
-            </el-table-column>
-          </template>
-          <template v-else>
-            <el-table-column :formatter="typeof field.formatter === 'function' ? field.formatter : null" :key="field.prop" :prop="field.prop" :label="field.label" :width="field.width ? field.width : null" />
-          </template>
-        </template>
-      </el-table>
-    </slot>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'GenericRows',
-  inject: ['data'],
-};
-</script>