expressa 1.2.3 → 1.3.0

package/modules/admin/package.json

@@ -17,6 +17,7 @@
     "@json-editor/json-editor": "^2.5.4",
     "axios": "^0.21.1",
     "bootstrap": "^4.2.1",
+    "dot-object": "^2.1.4",
     "element-ui": "2.4.6",
     "file-saver": "^2.0.2",
     "jquery": "^3.3.1",

package/modules/admin/src/router/index.js

@@ -1,185 +1,200 @@
-import Vue from 'vue'
-import Router from 'vue-router'
-
-// in development-env not use lazy-loading, because lazy-loading too many pages will cause webpack hot update too slow. so only in production use lazy-loading;
-// detail: https://panjiachen.github.io/vue-element-admin-site/#/lazy-loading
-
-Vue.use(Router)
-
-/* Layout */
-import Layout from '../views/layout/Layout'
-
-const capitalize = (s) => {
-  if (typeof s !== 'string') return ''
-  return s.charAt(0).toUpperCase() + s.slice(1)
-}
-
-/**
-* hidden: true                   if `hidden:true` will not show in the sidebar(default is false)
-* alwaysShow: true               if set true, will always show the root menu, whatever its child routes length
-*                                if not set alwaysShow, only more than one route under the children
-*                                it will becomes nested mode, otherwise not show the root menu
-* redirect: noredirect           if `redirect:noredirect` will no redirect in the breadcrumb
-* name:'router-name'             the name is used by <keep-alive> (must set!!!)
-* meta : {
-    title: 'title'               the name show in submenu and breadcrumb (recommend set)
-    icon: 'svg-name'             the icon show in the sidebar,
-  }
-**/
-
-export const constantRouterMap = [
-  { path: '/login', component: () => import('@/views/login/index'), hidden: true },
-  { path: '/install', component: () => import('@/views/Install'), hidden: true },
-  { path: '/404', component: () => import('@/views/404'), hidden: true },
-
-  {
-    path: '/',
-    component: Layout,
-    redirect: '/home',
-    name: 'Home',
-    meta: { title: 'Home', icon: 'home' },
-    children: [{
-      path: 'home',
-      meta: { title: 'Home', icon: 'home' },
-      component: () => import('@/views/Home')
-    }, {
-      path: '/edit/:collectionName/:id',
-      component: () => import('@/views/EditDocument'),
-      hidden: true
-    }]
-  },
-
-  {
-    path: '/users',
-    redirect: '/users/list',
-    component: Layout,
-    name: 'Users',
-    meta: { title: 'People', icon: 'users-alt' },
-    children: [{
-      path: 'list',
-      meta: { title: 'Users', icon: 'users-alt' },
-      name: 'users2',
-      component: () => import('@/views/ListDocuments2'),
-      props: { collectionName: 'users' },
-    }, {
-      path: 'add',
-      meta: { title: 'Add User', icon: 'plus' },
-      name: 'newuser',
-      component: () => import('@/views/EditDocument'),
-      props: { collectionName: 'users', id: 'create' },
-    }, {
-      path: 'role',
-      meta: { title: 'Roles', icon: 'shield-check' },
-      name: 'role',
-      component: () => import('@/views/ListDocuments2'),
-      props: { collectionName: 'role' },
-    }, {
-      path: 'addrole',
-      meta: { title: 'Add Role', icon: 'plus' },
-      name: 'newrole',
-      component: () => import('@/views/EditDocument'),
-      props: { collectionName: 'role', id: 'create' },
-    }],
-  },
-
-  {
-    path: '/list/:collectionName',
-    component: Layout,
-    hidden: true,
-    name: 'Data',
-    meta: { title: 'Data', icon: 'database' },
-    children: [{
-      path: '',
-      name: ':collectionName',
-      component: () => import('@/views/ListDocuments2'),
-      props: route => ({ collectionName: route.params.collectionName }),
-      meta: { title: capitalize(name) }
-    }]
-  },
-
-  {
-    path: '/manage/permissions',
-    component: Layout,
-    name: 'permissions',
-    meta: { title: 'Manage', icon: 'shield-check' },
-    children: [
-      {
-        path: '',
-        name: 'permissions',
-        component: () => import('@/views/ManagePermissions'),
-        meta: { title: 'Permissions' }
-      }
-    ]
-  },
-
-  {
-    path: '/dev',
-    component: Layout,
-    meta: { title: 'Dev', icon: 'flask' },
-    name: 'Dev',
-    children: [
-      {
-        path: '',
-        name: '',
-        component: () => import('@/views/Dev'),
-        meta: { title: '' },
-        hidden: true,
-      },
-      {
-        path: 'listeners',
-        name: 'listeners',
-        component: () => import('@/views/ManageListeners'),
-        meta: { title: 'Listeners' }
-      },
-      {
-        path: 'middleware',
-        name: 'middleware',
-        component: () => import('@/views/ManageMiddleware'),
-        meta: { title: 'Middleware' }
-      }, {
-        path: 'requestlogs',
-        meta: { title: 'Request Logs', icon: 'diary' },
-        name: 'requestlogs',
-        component: () => import('@/views/ListDocuments2'),
-        props: { collectionName: 'requestlog', columns: ['method', 'url', 'req.ip', 'user', 'res.message', 'res.statusCode', 'res.headers.content-length'] },
-      }, {
-        path: 'viewrequest/:requestId',
-        hidden: true,
-        meta: { title: 'View Request', icon: 'diary' },
-        name: 'viewrequest',
-        component: () => import('@/views/ViewRequest'),
-      }, {
-        path: '/edit/collection',
-        component: Layout,
-        name: 'Schema',
-        hidden: true,
-        meta: { title: 'Schemas', icon: 'cog' },
-        children: [{
-          hidden: true,
-          path: '/:collectionName',
-          name: name,
-          meta: { title: capitalize(name) }
-        }]
-      },
-    ]
-  },
-
-  {
-    path: 'external-link',
-    component: Layout,
-    children: [
-      {
-        path: 'https://github.com/thomas4019/expressa',
-        meta: { title: 'Expressa Docs', icon: 'link' }
-      }
-    ]
-  },
-
-  { path: '*', redirect: '/404', hidden: true }
-]
-
-export default new Router({
-  // mode: 'history',
-  scrollBehavior: () => ({ y: 0 }),
-  routes: constantRouterMap
-})
+import Vue from 'vue'
+import Router from 'vue-router'
+
+// in development-env not use lazy-loading, because lazy-loading too many pages will cause webpack hot update too slow. so only in production use lazy-loading;
+// detail: https://panjiachen.github.io/vue-element-admin-site/#/lazy-loading
+
+Vue.use(Router)
+
+/* Layout */
+import Layout from '../views/layout/Layout'
+
+const capitalize = (s) => {
+  if (typeof s !== 'string') return ''
+  return s.charAt(0).toUpperCase() + s.slice(1)
+}
+
+/**
+* hidden: true                   if `hidden:true` will not show in the sidebar(default is false)
+* alwaysShow: true               if set true, will always show the root menu, whatever its child routes length
+*                                if not set alwaysShow, only more than one route under the children
+*                                it will becomes nested mode, otherwise not show the root menu
+* redirect: noredirect           if `redirect:noredirect` will no redirect in the breadcrumb
+* name:'router-name'             the name is used by <keep-alive> (must set!!!)
+* meta : {
+    title: 'title'               the name show in submenu and breadcrumb (recommend set)
+    icon: 'svg-name'             the icon show in the sidebar,
+  }
+**/
+
+export const constantRouterMap = [
+  { path: '/login', component: () => import('@/views/login/index'), hidden: true },
+  { path: '/install', component: () => import('@/views/Install'), hidden: true },
+  { path: '/404', component: () => import('@/views/404'), hidden: true },
+
+  {
+    path: '/',
+    component: Layout,
+    redirect: '/home',
+    name: 'Home',
+    meta: { title: 'Home', icon: 'home' },
+    children: [{
+      path: 'home',
+      meta: { title: 'Home', icon: 'home' },
+      component: () => import('@/views/Home')
+    }, {
+      path: '/edit/:collectionName/:id',
+      component: () => import('@/views/EditDocument'),
+      hidden: true
+    }]
+  },
+
+  {
+    path: '/users',
+    redirect: '/users/list',
+    component: Layout,
+    name: 'Users',
+    meta: { title: 'People', icon: 'users-alt' },
+    children: [{
+      path: 'list',
+      meta: { title: 'Users', icon: 'users-alt' },
+      name: 'users2',
+      component: () => import('@/views/ListDocuments2'),
+      props: { collectionName: 'users' },
+    }, {
+      path: 'add',
+      meta: { title: 'Add User', icon: 'plus' },
+      name: 'newuser',
+      component: () => import('@/views/EditDocument'),
+      props: { collectionName: 'users', id: 'create' },
+    }, {
+      path: 'role',
+      meta: { title: 'Roles', icon: 'shield-check' },
+      name: 'role',
+      component: () => import('@/views/ListDocuments2'),
+      props: { collectionName: 'role' },
+    }, {
+      path: 'addrole',
+      meta: { title: 'Add Role', icon: 'plus' },
+      name: 'newrole',
+      component: () => import('@/views/EditDocument'),
+      props: { collectionName: 'role', id: 'create' },
+    }],
+  },
+
+  {
+    path: '/list/:collectionName',
+    component: Layout,
+    hidden: true,
+    name: 'Data',
+    meta: { title: 'Data', icon: 'database' },
+    children: [{
+      path: '',
+      name: ':collectionName',
+      component: () => import('@/views/ListDocuments2'),
+      props: route => ({ collectionName: route.params.collectionName }),
+      meta: { title: capitalize(name) }
+    }]
+  },
+
+  {
+    path: '/manage/permissions',
+    component: Layout,
+    name: 'permissions',
+    meta: { title: 'Manage', icon: 'shield-check' },
+    children: [
+      {
+        path: '',
+        name: 'permissions',
+        component: () => import('@/views/ManagePermissions'),
+        meta: { title: 'Permissions' }
+      }
+    ]
+  },
+
+  {
+    path: '/endpoints',
+    component: Layout,
+    name: 'endpoints',
+    meta: { title: 'Search', icon: 'link' },
+    children: [
+      {
+        path: '',
+        name: 'endpoints',
+        component: () => import('@/views/Endpoints'),
+        meta: { title: 'Endpoints' }
+      }
+    ]
+  },
+
+  {
+    path: '/dev',
+    component: Layout,
+    meta: { title: 'Dev', icon: 'flask' },
+    name: 'Dev',
+    children: [
+      {
+        path: '',
+        name: '',
+        component: () => import('@/views/Dev'),
+        meta: { title: '' },
+        hidden: true,
+      },
+      {
+        path: 'listeners',
+        name: 'listeners',
+        component: () => import('@/views/ManageListeners'),
+        meta: { title: 'Listeners' }
+      },
+      {
+        path: 'middleware',
+        name: 'middleware',
+        component: () => import('@/views/ManageMiddleware'),
+        meta: { title: 'Middleware' }
+      }, {
+        path: 'requestlogs',
+        meta: { title: 'Request Logs', icon: 'diary' },
+        name: 'requestlogs',
+        component: () => import('@/views/ListDocuments2'),
+        props: { collectionName: 'requestlog', columns: ['method', 'url', 'req.ip', 'user', 'res.message', 'res.statusCode', 'res.headers.content-length'] },
+      }, {
+        path: 'viewrequest/:requestId',
+        hidden: true,
+        meta: { title: 'View Request', icon: 'diary' },
+        name: 'viewrequest',
+        component: () => import('@/views/ViewRequest'),
+      }, {
+        path: '/edit/collection',
+        component: Layout,
+        name: 'Schema',
+        hidden: true,
+        meta: { title: 'Schemas', icon: 'cog' },
+        children: [{
+          hidden: true,
+          path: '/:collectionName',
+          name: name,
+          meta: { title: capitalize(name) }
+        }]
+      },
+    ]
+  },
+
+  {
+    path: 'external-link',
+    component: Layout,
+    children: [
+      {
+        path: 'https://github.com/thomas4019/expressa',
+        meta: { title: 'Expressa Docs', icon: 'link' }
+      }
+    ]
+  },
+
+  { path: '*', redirect: '/404', hidden: true }
+]
+
+export default new Router({
+  // mode: 'history',
+  scrollBehavior: () => ({ y: 0 }),
+  routes: constantRouterMap
+})

package/modules/admin/src/views/Endpoints.vue

@@ -0,0 +1,250 @@
+<template>
+  <div class="px-3">
+    <div class="d-flex align-items-start py-2">
+      <div>
+        Endpoint
+
+        <div class="d-flex align-items-center mb-2">
+          <el-input v-model="apiBaseUrl" placeholder="key" />
+          <el-input v-model="apiSuffix" placeholder="races" />
+        </div>
+
+        Params
+        <div v-for="(parameter, index) in params" :key="index" class="d-flex align-items-center mb-1">
+          <el-checkbox v-model="parameter.isEnabled" class="mr-2" />
+
+          <el-input v-model="parameter.key" placeholder="key" @input="handleParamKeyChange(index)" />
+
+          <el-input v-model="parameter.value" placeholder="value" class="ml-1" />
+
+          <el-button
+            v-if="params.length > 1"
+            icon="el-icon-close"
+            circle
+            type="text"
+            @click="removeParam(index)"
+          />
+        </div>
+      </div>
+
+      <span class="mx-auto" />
+
+      <div class="d-flex align-items-center">
+        <el-dropdown
+          multiple
+          class="mr-4"
+          :hide-on-click="false"
+        >
+          <span class="el-dropdown-link">
+            Select columns
+            <i class="el-icon-arrow-down el-icon--right" />
+          </span>
+
+          <el-dropdown-menu slot="dropdown" style="max-height: 300px; overflow: auto">
+            <el-checkbox-group v-model="selectedColumns" @input="update">
+              <el-dropdown-item
+                v-for="column in allPossibleColumns"
+                :key="column"
+                :label="column"
+                :value="column"
+              >
+                <el-checkbox
+                  class="mb-0 mr-4"
+                  :label="column"
+                  :disabled="selectedColumns.length === 1 && selectedColumns[0] === column"
+                />
+              </el-dropdown-item>
+            </el-checkbox-group>
+          </el-dropdown-menu>
+        </el-dropdown>
+
+        <el-checkbox
+          v-model="isFiltersVisible"
+          class="mb-0 mr-4"
+        >
+          Show Filters
+        </el-checkbox>
+
+        <el-pagination
+          :page-size="pageSize"
+          :total="count"
+          :page-sizes="pageSizes"
+          :current-page.sync="page"
+          layout="sizes, prev, pager, next"
+          @current-change="update()"
+          @size-change="pageSize = $event, update()"
+        />
+      </div>
+    </div>
+
+    <el-button class="btn btn-primary mb-3" @click="update">
+      Search
+    </el-button>
+
+    <el-table
+      :data="tableRows"
+      element-loading-text="Loading"
+      border
+      fit
+      highlight-current-row
+      @sort-change="handleSortChange"
+    >
+      <el-table-column
+        v-for="(name, i) in selectedColumns"
+        :key="name"
+        :label="name"
+        :prop="name"
+        align="center"
+        :sortable="true"
+      >
+        <template slot-scope="scope">
+          <div class="text-left">
+            <div v-if="scope.$index === 0 && isFiltersVisible">
+              <el-input
+                v-model="searchFilters[name]"
+                :placeholder="`Search by ${name}`"
+                :type="getFieldType(name) === 'number' ? 'number' : 'text'"
+                @change="update()"
+              />
+
+              <el-checkbox
+                v-model="exactSearches[name]"
+                :disabled="getFieldType(name) === 'number'"
+                class="mt-3"
+                @change="update()"
+              >
+                Exact match
+              </el-checkbox>
+            </div>
+
+            <template>
+              <router-link v-if="i === 0 && collectionName !== 'requestlog'" :to="'/edit/'+collectionName+'/'+scope.row._id">
+                {{ getPath(scope.row, name) }}
+              </router-link>
+              <router-link v-if="i === 0 && collectionName === 'requestlog'" :to="'/dev/viewrequest/'+scope.row._id">
+                {{ getPath(scope.row, name) }}
+              </router-link>
+              <span v-if="i !== 0">{{ getPath(scope.row, name) }}</span>
+            </template>
+          </div>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <div v-if="data.length" class="d-flex align-items-center my-3">
+      <button class="btn btn-secondary download-button mr-2" @click="downloadCSV()">
+        Download
+      </button>
+
+      <button class="btn btn-secondary download-button" @click="downloadAllCSV()">
+        Download All
+      </button>
+
+      <span class="mx-auto" />
+
+      <el-pagination
+        :page-size="pageSize"
+        :total="count"
+        :page-sizes="pageSizes"
+        :current-page.sync="page"
+        layout="sizes, prev, pager, next"
+        @current-change="update()"
+        @size-change="pageSize = $event, update()"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import ListDocuments2 from '@/views/ListDocuments2.vue'
+import request from '@/utils/request'
+var dot = require('dot-object')
+dot.keepArray = true
+
+export default {
+  name: 'Endpoints',
+  mixins: [ListDocuments2],
+  data() {
+    return {
+      apiBaseUrl: request.defaults.baseURL,
+      apiSuffix: '',
+    }
+  },
+  methods: {
+    async update() {
+      if (!this.apiSuffix) {
+        return
+      }
+
+      // Fetch and Set table data
+      const params = {
+        page: this.page,
+        limit: this.pageSize,
+        ...this.allFilters,
+        query: undefined
+      }
+      const info = (await request({ url: `/${this.apiSuffix}?${this.customParams}`, params })).data
+      this.count = info.itemsTotal
+      this.data = this.applyCustomColumnFilter(info.data)
+
+      // Set columns data if not set.
+      if (!this.selectedColumns.length) {
+        const columns = Array.from(this.data.reduce((acc, row) => {
+          const rowWithDottedKeys = dot.dot(row)
+
+          return new Set([
+            ...Object.keys(rowWithDottedKeys),
+            ...acc
+          ])
+        }, []))
+
+        this.selectedColumns = ['_id']
+        this.allPossibleColumns = columns
+      }
+    },
+    applyCustomColumnFilter(tableData) {
+      const customColumnSearches = Object.keys(this.searchFilters)
+
+      return tableData.filter((row) => {
+        return customColumnSearches.every(fieldName => {
+          const searchKeyword = this.searchFilters[fieldName]
+
+          if (!searchKeyword) {
+            return true
+          }
+
+          const rowWithDottedKeys = dot.dot(row)
+          const stringified = rowWithDottedKeys[fieldName].toString()
+
+          if (this.exactSearches[fieldName]) {
+            return stringified.trim() === searchKeyword.trim()
+          } else {
+            return stringified.toLowerCase().includes(searchKeyword.toLowerCase())
+          }
+        })
+      })
+    },
+    async downloadAllCSV() {
+      let rows = []
+      let page = 1
+
+      while (this.count > rows.length) {
+        const params = {
+          ...this.allFilters,
+          page: page,
+          limit: 500,
+          query: undefined
+        }
+
+        const url = `/${this.apiSuffix}?${this.customParams}`
+        const response = (await request({ url, params })).data
+        rows = [...response.data, ...rows]
+        page += 1
+      }
+
+      this.downloadCSV(this.applyCustomColumnFilter(rows))
+    },
+  }
+}
+</script>
+