Merge pull request #85 from segment-oj/add-search-ztl

Add search ztl

Author: szdytom

src/StringPrototype.js

@@ -20,4 +20,8 @@ if (String.prototype.replaceAll === undefined) {
 
     return res;
   };
-}
+}
+
+String.prototype.trim = function () {
+  return this.replace(/(^\s*)|(\s*$)/g, '');
+};

src/components/lib/AjaxTable.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="ajax-table">
-    <el-table v-loading="loading" :data="tableData">
+    <el-table
+      v-loading="loading"
+      :data="tableData"
+      :default-sort="default_sort"
+    >
       <el-table-column
         v-for="item in columns"
         :key="item"
@@ -9,6 +13,7 @@
         :width="item.width"
         :align="item.align"
         :header-align="item.headerAlign"
+        :sortable="item.sortable"
       />
     </el-table>
     <el-pagination
@@ -36,6 +41,9 @@ export default {
   watch: {
     limit() {
       this.onPageChange(this.pageId);
+    },
+    costumData() {
+      this.load_data();
     }
   },
   methods: {
@@ -51,7 +59,8 @@ export default {
         .get(this.ajax_url, {
           params: {
             offset: this.offset,
-            limit: this.limit
+            limit: this.limit,
+            ...this.costumData
           }
         })
         .then(res => {
@@ -83,13 +92,20 @@ export default {
       type: Number,
       default: 20
     },
+    costumData: {
+      type: Object
+    },
     total: {
       type: Number,
       required: true
     },
     process: {
       type: Function,
       default: x => x
+    },
+    default_sort: {
+      type: Object,
+      default: null
     }
   },
 };
@@ -101,4 +117,4 @@ export default {
     margin-top: 20px;
     text-align: center;
 }
-</style>
+</style>

src/components/lib/jumpToProblem.vue

@@ -26,6 +26,7 @@ export default {
   },
   methods: {
     jump() {
+      this.jumpToProblem = String(parseInt(this.jumpToProblem.trim()));
       this.$router.push('/problem/' + this.jumpToProblem);
     }
   }

src/components/problem/list.vue

@@ -3,6 +3,18 @@
     <el-row :gutter="20">
       <el-col :span="10">
         <el-card>
+          <i class="el-icon-search" />
+          Search
+          <el-input
+            placeholder="Search"
+            v-model="searchTitle"
+            class="input-with-select" 
+            style="margin-top: 9px;"
+            @clear="search"
+            clearable
+          >
+            <el-button slot="append" icon="el-icon-check" @click="search"></el-button>
+          </el-input>
         </el-card>
       </el-col>
       <el-col :span="6">
@@ -46,6 +58,8 @@
         :limit="limit"
         :total="data_count"
         :process="process"
+        :default_sort="{prop: 'pid', order: 'ascending'}"
+        :costumData="{title:this.title}"
       />
     </el-card>
   </div>
@@ -64,24 +78,30 @@ export default {
       alive: true,
       ajax_url: apiurl('/problem/list'),
       limit: 50,
+      searchTitle: '',
+      title: null,
       showTags: this.$store.state.tags.displayTags,
       columns: [{
         name: 'score',
         label: 'Status',
         width: '120',
-        align: 'center'
+        align: 'center',
+        sortable: true
       }, {
         name: 'pid',
         label: 'Problem ID',
         width: '120',
-        align: 'center'
+        align: 'center',
+        sortable: true
       }, {
         name: 'title',
-        label: 'Title'
+        label: 'Title',
+        sortable: false
       }, {
         name: 'tag',
         width: '400',
         align: 'right',
+        sortable: false
       }],
       data_count: 10
     };
@@ -118,6 +138,10 @@ export default {
       x.tag = (<listTag tags={ x.tags }></listTag>);
       
       return x;
+    },
+    search() {
+      this.searchTitle = this.searchTitle.trim();
+      this.title = this.searchTitle;
     }
   },
   components: {