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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tripup-company/element-ui-extended",
-  "version": "0.0.6",
+  "version": "0.0.10",
   "main": "./dist/element-ui-extended.umd.js",
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -48,7 +48,13 @@
   },
   "files": [
     "dist/*",
-    "src/**/*.vue"
+    "src/**/*.vue",
+    "src/services/*",
+    "src/models/*",
+    "src/lang/*",
+    "src/types/*",
+    "src/filters.js",
+    "src/filters-top.js"
   ],
   "description": "## Project setup ``` npm install ```",
   "repository": {

package/src/App.vue

@@ -1,6 +1,12 @@
 <template>
   <div id="app">
-    <composite-table :fields="fields" :filters="filters" :filters-top="filtersTop" :repository="repository"></composite-table>
+    <composite-table
+      :storageKey="'Project_name'"
+      :fields="fields"
+      :filters="filters"
+      :top-filter="topFilter"
+      :repository="repository"
+    ></composite-table>
     <img alt="Vue logo" src="./assets/logo.png" />
   </div>
 </template>
@@ -9,35 +15,39 @@
 import { Component, Vue } from "vue-property-decorator";
 import CompositeTable from "@/components/CompositeTable/index.vue";
 import filters from "./filters";
-import filtersTop from "./filters-top";
+import topFilter from "./topFilter";
 import repository from "./repositories/contacts-repository";
 @Component({
   components: { CompositeTable },
   data: function () {
-    let repo = new repository('', '/test', null);
+    let repo = new repository("", "/test", null);
     return {
       filters: filters,
-      filtersTop: filtersTop,
+      topFilter: topFilter,
       repository: repo,
       fields: [
-      {
-        prop: 'full_name', label: 'Full Name',
-        formatter: row => {
-          return row.first_name + ' ' + row.last_name;
+        {
+          prop: "full_name",
+          label: "Full Name",
+          formatter: (row) => {
+            return row.first_name + " " + row.last_name;
+          },
         },
-      },
-      {
-        prop: 'email', label: 'Email',
-      },
-      {
-        prop: 'phone', label: 'Phone',
-      },
-      {
-        prop: 'created_at', label: 'Created at',
-      },
-    ],
-    }
-  }
+        {
+          prop: "email",
+          label: "Email",
+        },
+        {
+          prop: "phone",
+          label: "Phone",
+        },
+        {
+          prop: "created_at",
+          label: "Created at",
+        },
+      ],
+    };
+  },
 })
 export default class App extends Vue {}
 </script>

package/src/components/CompositeTable/index.vue

@@ -1,18 +1,17 @@
 <template>
   <div v-loading="loading" class="composite-table">
     <slot>
-      <slot name="top-filter" v-bind="{ filtersTop, search }">
-        <generic-top-filter
-          v-if="filtersTop.length"
-          :filters="filtersTop"
-          :search="search"
-          @apply:filter="handleApplyFilter"
-          @reset:filter="handleResetFilter"
-        />
-      </slot>
-
       <el-row :gutter="20">
         <el-col :span="18">
+          <slot name="quick-search-filter" v-bind="{ topFilter, search }">
+            <quick-search-filter
+              v-if="topFilter"
+              :filter="topFilter"
+              :search="topSearch"
+              @apply:filter="handleApplyTopFilter"
+              @reset:filter="handleResetTopFilter"
+            />
+          </slot>
           <slot name="table" v-bind="{ fields, data }">
             <generic-table
               :fields="fields"
@@ -58,10 +57,11 @@ import GenericTable from "@/components/GenericTable";
 import ListQueryService from "@/services/list-query-service";
 import { LocalStorageService } from "@/services/local-storage-service";
 import MetaModel from "@/models/meta-model";
-import GenericTopFilter from "@/components/GenericFilters/GenericTopFilter";
+import QuickSearchFilter from "@/components/GenericFilters/QuickSearchFilter";
+import FilterConverter from "../GenericFilters/filter-convertor";
 export default {
   components: {
-    GenericTopFilter,
+    QuickSearchFilter,
     GenericFilter,
     GenericTable,
     GenericPaginator,
@@ -82,40 +82,56 @@ export default {
       default: () => [],
       type: Array,
     },
-    filtersTop: {
-      default: () => [],
-      type: Array,
+    topFilter: {
+      default() {
+        return {};
+      },
+      type: Object,
     },
     filters: {
       default: () => [],
       type: Array,
     },
+    includes: {
+      default: "--",
+      type: String,
+    },
+    storageKey: {
+      default: "storage.key",
+      type: String,
+    },
   },
   data: function () {
-    const localStorage = new LocalStorageService();
+    const localStorage = new LocalStorageService(this.storageKey);
     const listQueryService = new ListQueryService(
       this.$route ? this.$route.name : "storage.key",
       localStorage
     );
+    const filterConvertor = new FilterConverter();
     let search = {};
+    let topSearch = {};
     for (const column of this.filters) {
       search[column.name] = {
         operator: "",
         value: "",
       };
     }
-    for (const column of this.filtersTop) {
-      search[column.name] = {
-        position: "top",
+    if (this.topFilter) {
+      topSearch[this.topFilter.name] = {
         value: "",
+        operator: this.topFilter.operator,
       };
     }
+
     search = Object.assign(search, listQueryService.getListQuery().search);
+    topSearch = Object.assign(topSearch, listQueryService.getListQuery().topSearch);
     return {
       loading: false,
       filter: {},
       data: [],
       search: search,
+      topSearch: topSearch,
+      filterConvertor: filterConvertor,
       meta: Object.assign(
         new MetaModel(),
         listQueryService.getListQuery().meta
@@ -124,6 +140,19 @@ export default {
     };
   },
   computed: {
+    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,
+      };
+      const filter = this.filterConvertor.applyFilter({ ...this.search, ...this.topSearch });
+      return { ...query, ...filter };
+    },
     currentPage() {
       if (this.data.meta?.pagination) {
         return this.data.meta.pagination.current_page;
@@ -154,7 +183,8 @@ export default {
       this.loading = true;
       try {
         const response = await this.repository.all(
-          this.listQueryService.getListQuery()
+          this.queryFilter,
+          this.includes
         );
         this.data = response.data;
         Vue.set(this.data, "meta", response.meta);
@@ -174,7 +204,7 @@ export default {
           page: this.listQueryService.getListQuery().meta.page,
         },
       });
-      this.meta.pagination.per_page = val;
+      Vue.set(this.data, "meta.per_page.current_page", val);
       this.fetch();
     },
     handleCurrentChange(val) {
@@ -184,34 +214,40 @@ export default {
           limit: this.listQueryService.getListQuery().meta.limit,
         },
       });
-      this.meta.pagination.current_page = val;
+      Vue.set(this.data, "meta.pagination.current_page", val);
       this.fetch();
     },
-    handleFilterChange(val) {
-      this.filter = val;
-      this.meta.pagination.current_page = 1;
+    handleFilterChange() {
+      Vue.set(this.data, "meta.pagination.current_page", 1);
       this.fetch();
     },
-    handleApplyFilter(filters) {
+    handleApplyFilter() {
       this.listQueryService.updateListQuery({ search: this.search });
-      this.handleFilterChange(filters);
+      this.handleFilterChange();
     },
     handleResetFilter() {
       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.search[column] = Object.assign(this.search[column], {
+          operator: "",
+          value: "",
+        });
       }
       this.listQueryService.updateListQuery({ search: {} });
       this.handleFilterChange({});
     },
+    handleApplyTopFilter() {
+      this.listQueryService.updateListQuery({ topSearch: this.topSearch });
+      this.handleFilterChange();
+    },
+    handleResetTopFilter() {
+      for (const column in this.topSearch) {
+        this.topSearch[column] = Object.assign(this.topSearch[column], {
+          value: "",
+        });
+      }
+      this.listQueryService.updateListQuery({ topSearch: {} });
+      this.handleFilterChange({});
+    },
   },
 };
 </script>

package/src/components/GenericFilters/QuickSearchFilter.vue

@@ -0,0 +1,41 @@
+<template>
+  <el-row class="m-b-20">
+    <el-col v-if="filter">
+      <el-input
+        v-if="filter.type === 'string'"
+        v-model="search[filter.name].value"
+        clearable
+        @clear="resetFilter"
+        @keyup.enter.native="applyFilter"
+      />
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+export default {
+  name: "QuickSearchFilter",
+  props: {
+    filter: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+    search: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  methods: {
+    applyFilter() {
+      this.$emit("apply:filter");
+    },
+    resetFilter() {
+      this.$emit("reset:filter");
+    },
+  },
+};
+</script>

package/src/components/GenericPaginator/index.vue

@@ -42,7 +42,6 @@ export default {
   },
   methods: {
     pageChange (val) {
-      debugger;
       this.$emit('page:change', val);
     },
     sizeChange(val) {

package/src/components/GenericTable/index.vue

@@ -3,14 +3,36 @@
     <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-table-column
+            :key="field.prop"
+            v-slot="context"
+            :prop="field.prop"
+            :label="field.label"
+            :width="field.width ? field.width : null"
+            :sortable="field.sortable ? field.sortable : 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" sortable="custom" />
+          <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="field.sortable ? field.sortable : null"
+          />
         </template>
       </template>
     </el-table>
@@ -18,7 +40,6 @@
 </template>
 
 <script>
-
 export default {
   name: "GenericTable",
   props: {
@@ -44,8 +65,8 @@ export default {
   },
   methods: {
     sortChange(data) {
-      this.$emit('sort:change', data);
-    }
-  }
+      this.$emit("sort:change", data);
+    },
+  },
 };
 </script>

package/src/filters.js

@@ -0,0 +1,64 @@
+export default [
+  {
+    name: 'title',
+    label: 'Title',
+    type: 'string',
+  },
+  {
+    name: 'first_name',
+    label: 'First Name',
+    type: 'string',
+  },
+  {
+    name: 'last_name',
+    label: 'Last Name',
+    type: 'string',
+  },
+  {
+    name: 'email',
+    label: 'Email',
+    type: 'string',
+  },
+  {
+    name: 'phone',
+    label: 'Phone',
+    type: 'string',
+  },
+  {
+    name: 'mobile',
+    label: 'Mobile',
+    type: 'string',
+  },
+  {
+    name: 'position',
+    label: 'Position',
+    type: 'string',
+  },
+  {
+    name: 'street',
+    label: 'Street',
+    type: 'string',
+  },
+  {
+    name: 'zip_code',
+    label: 'Zip Code',
+    type: 'string',
+  },
+  {
+    name: 'city',
+    label: 'City',
+    type: 'string',
+  },
+  {
+    name: 'state',
+    label: 'State',
+    type: 'string',
+  },
+
+  {
+    name: 'created_at',
+    label: 'Created at',
+    type: 'date',
+    operator: 'between_date',
+  },
+];

package/src/lang/en.js

@@ -0,0 +1,167 @@
+export default {
+  common: {
+    back: 'Back',
+    return: 'Return',
+  },
+  route: {
+    dashboard: 'Dashboard',
+    introduction: 'Introduction',
+    documentation: 'Documentation',
+    guide: 'Guide',
+    permission: 'Permission',
+    pagePermission: 'Page Permission',
+    directivePermission: 'Directive Permission',
+    icons: 'Icons',
+    components: 'Components',
+    componentIndex: 'Introduction',
+    tinymce: 'Tinymce',
+    markdown: 'Markdown',
+    jsonEditor: 'JSON Editor',
+    dndList: 'Dnd List',
+    splitPane: 'SplitPane',
+    avatarUpload: 'Avatar Upload',
+    dropzone: 'Dropzone',
+    sticky: 'Sticky',
+    countTo: 'CountTo',
+    componentMixin: 'Mixin',
+    backToTop: 'BackToTop',
+    dragDialog: 'Drag Dialog',
+    dragSelect: 'Drag Select',
+    dragKanban: 'Drag Kanban',
+    charts: 'Charts',
+    keyboardChart: 'Keyboard Chart',
+    lineChart: 'Line Chart',
+    mixChart: 'Mix Chart',
+    example: 'Example',
+    nested: 'Nested Routes',
+    menu1: 'Menu 1',
+    'menu1-1': 'Menu 1-1',
+    'menu1-2': 'Menu 1-2',
+    'menu1-2-1': 'Menu 1-2-1',
+    'menu1-2-2': 'Menu 1-2-2',
+    'menu1-3': 'Menu 1-3',
+    menu2: 'Menu 2',
+    Table: 'Table',
+    dynamicTable: 'Dynamic Table',
+    dragTable: 'Drag Table',
+    inlineEditTable: 'Inline Edit',
+    complexTable: 'Complex Table',
+    treeTable: 'Tree Table',
+    customTreeTable: 'Custom TreeTable',
+    tab: 'Tab',
+    form: 'Form',
+    createArticle: 'Create Article',
+    editArticle: 'Edit Article',
+    articleList: 'Article List',
+    errorPages: 'Error Pages',
+    page401: '401',
+    page404: '404',
+    errorLog: 'Error Log',
+    excel: 'Excel',
+    exportExcel: 'Export Excel',
+    selectExcel: 'Export Selected',
+    uploadExcel: 'Upload Excel',
+    zip: 'Zip',
+    exportZip: 'Export Zip',
+    theme: 'Theme',
+    clipboardDemo: 'Clipboard',
+    i18n: 'I18n',
+    externalLink: 'External Link',
+  },
+  navbar: {
+    logOut: 'Log Out',
+    dashboard: 'Dashboard',
+    github: 'Github',
+    screenfull: 'Screenfull',
+    theme: 'Theme',
+    size: 'Global Size',
+  },
+  login: {
+    title: 'Laravel Vue Admin',
+    logIn: 'Log in',
+    username: 'Username',
+    email: 'Email',
+    password: 'Password',
+    any: 'any',
+    thirdparty: 'Or connect with',
+    thirdpartyTips: 'Can not be simulated on local, so please combine you own business simulation! ! !',
+  },
+  documentation: {
+    documentation: 'Documentation',
+    github: 'Github Repository',
+    laravel: 'Laravel',
+  },
+  permission: {
+    roles: 'Your roles',
+    switchRoles: 'Switch roles',
+    tips: 'In some cases it is not suitable to use v-permission, such as element Tab component or el-table-column and other asynchronous rendering dom cases which can only be achieved by manually setting the v-if.',
+    pageDescription: 'This place is accessible for admin only. Switching to non-admin role will redirect to 404 page',
+  },
+  guide: {
+    description: 'The guide page is useful for some people who entered the project for the first time. You can briefly introduce the features of the project. Demo is based on ',
+    button: 'Show Guide',
+  },
+  components: {
+    documentation: 'Documentation',
+    tinymceTips: 'Rich text editor is a core part of management system, but at the same time is a place with lots of problems. In the process of selecting rich texts, I also walked a lot of detours. The common rich text editors in the market are basically used, and the finally chose Tinymce. See documentation for more detailed rich text editor comparisons and introductions.',
+    dropzoneTips: 'Because my business has special needs, and has to upload images to qiniu, so instead of a third party, I chose encapsulate it by myself. It is very simple, you can see the detail code in @/components/Dropzone.',
+    stickyTips: 'When the page is scrolled to the preset position will be sticky on the top.',
+    backToTopTips1: 'When the page is scrolled to the specified position, the Back to Top button appears in the lower right corner',
+    backToTopTips2: 'You can customize the style of the button, show / hide, height of appearance, height of the return. If you need a text prompt, you can use element-ui el-tooltip elements externally',
+    imageUploadTips: 'Since I was using only the vue@1 version, and it is not compatible with mockjs at the moment, I modified it myself, and if you are going to use it, it is better to use official version.',
+  },
+  table: {
+    dynamicTips1: 'Fixed header, sorted by header order',
+    dynamicTips2: 'Not fixed header, sorted by click order',
+    dragTips1: 'The default order',
+    dragTips2: 'The after dragging order',
+    title: 'Title',
+    importance: 'Imp',
+    type: 'Type',
+    remark: 'Remark',
+    search: 'Search',
+    add: 'Add',
+    export: 'Export',
+    reviewer: 'reviewer',
+    id: 'ID',
+    date: 'Date',
+    author: 'Author',
+    readings: 'Readings',
+    status: 'Status',
+    actions: 'Actions',
+    edit: 'Edit',
+    publish: 'Publish',
+    draft: 'Draft',
+    delete: 'Delete',
+    cancel: 'Cancel',
+    confirm: 'Confirm',
+  },
+  errorLog: {
+    tips: 'Please click the bug icon in the upper right corner',
+    description: 'Now the management system are basically the form of the spa, it enhances the user experience, but it also increases the possibility of page problems, a small negligence may lead to the entire page deadlock. Fortunately Vue provides a way to catch handling exceptions, where you can handle errors or report exceptions.',
+    documentation: 'Document introduction',
+  },
+  excel: {
+    export: 'Export',
+    selectedExport: 'Export Selected Items',
+    placeholder: 'Please enter the file name(default excel-list)',
+  },
+  zip: {
+    export: 'Export',
+    placeholder: 'Please enter the file name(default file)',
+  },
+  pdf: {
+    tips: 'Here we use window.print() to implement the feature of downloading pdf.',
+  },
+  theme: {
+    change: 'Change Theme',
+    documentation: 'Theme documentation',
+    tips: 'Tips: It is different from the theme-pick on the navbar is two different skinning methods, each with different application scenarios. Refer to the documentation for details.',
+  },
+  tagsView: {
+    refresh: 'Refresh',
+    close: 'Close',
+    closeOthers: 'Close Others',
+    closeAll: 'Close All',
+  },
+};

package/src/lang/index.js

@@ -0,0 +1,23 @@
+import Vue from 'vue';
+import VueI18n from 'vue-i18n';
+import elementEnLocale from 'element-ui/lib/locale/lang/en'; // element-ui lang
+import enLocale from './en';
+
+Vue.use(VueI18n);
+
+const messages = {
+  en: {
+    ...enLocale,
+    ...elementEnLocale,
+  },
+};
+
+const i18n = new VueI18n({
+  // set locale
+  // options: en | zh | vi
+  locale: 'en',
+  // set locale messages
+  messages,
+});
+
+export default i18n;

package/src/models/base-model.ts

@@ -0,0 +1,10 @@
+export class BaseModel {
+  constructor(data: any) {
+    if (data === null) {
+      return;
+    }
+    for (const key in data) {
+      this[key] = data[key];
+    }
+  }
+}