From 8ea1f28c743df491acffbb008c33944de4520512 Mon Sep 17 00:00:00 2001
From: zhangtianli2006 <49156174+zhangtianli2006@users.noreply.github.com>
Date: Fri, 14 Aug 2020 15:19:58 +0800
Subject: [PATCH 1/7] improved problem list style

Signed-off-by: zhangtianli2006 <49156174+zhangtianli2006@users.noreply.github.com>
---
 src/assets/css/basic.css             | 13 +++++
 src/components/lib/AjaxTable.vue     | 26 +++++----
 src/components/lib/jumpToProblem.vue |  9 +--
 src/components/problem/list.vue      | 85 ++++++++++++----------------
 4 files changed, 68 insertions(+), 65 deletions(-)

diff --git a/src/assets/css/basic.css b/src/assets/css/basic.css
index f32b6d2f..bd0bc407 100644
--- a/src/assets/css/basic.css
+++ b/src/assets/css/basic.css
@@ -191,6 +191,19 @@ h3::before {
     margin-top: 0;
 }
 
+.problem-list-pagination {
+    border: 1px solid #ebeef5;
+    background: #ffffff;
+    margin-left: -20px;
+    padding: 10px;
+    height: 36px;
+    max-width: 100vw;
+    width: 827px;
+    text-align: center;
+    bottom: 0px;
+    position: fixed;
+}
+
 * {
     border-radius: 0 !important;
 }
diff --git a/src/components/lib/AjaxTable.vue b/src/components/lib/AjaxTable.vue
index 08cf3905..cc197a1b 100644
--- a/src/components/lib/AjaxTable.vue
+++ b/src/components/lib/AjaxTable.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="ajax-table">
+  <div>
     <el-table
       v-loading="loading"
       :data="tableData"
@@ -16,14 +16,15 @@
         :sortable="item.sortable"
       />
     </el-table>
-    <el-pagination
-      :page-size="this.limit"
-      background
-      layout="prev, pager, next, jumper"
-      @current-change="this.onPageChange"
-      class="pagination"
-      :total="this.own_total"
-    />
+    <div :class="pagination_class + ' top-zindex'">
+      <el-pagination
+        :page-size="this.limit"
+        background
+        layout="prev, pager, next, jumper"
+        @current-change="this.onPageChange"
+        :total="this.own_total"
+      />
+    </div>
   </div>
 </template>
 
@@ -111,6 +112,10 @@ export default {
     default_sort: {
       type: Object,
       default: null
+    },
+    pagination_class: {
+      type: String,
+      default: 'pagination'
     }
   },
 };
@@ -118,8 +123,5 @@ export default {
 
 <style scoped>
 .pagination {
-    height: 36px;
-    margin-top: 20px;
-    text-align: center;
 }
 </style>
diff --git a/src/components/lib/jumpToProblem.vue b/src/components/lib/jumpToProblem.vue
index b3e30afe..6dc60a4c 100644
--- a/src/components/lib/jumpToProblem.vue
+++ b/src/components/lib/jumpToProblem.vue
@@ -1,13 +1,14 @@
 <template>
   <div>
     <el-card>
-      <i class="el-icon-s-promotion" />
-      Jump to
+      <div slot="header" class="clearfic">
+        <i class="el-icon-s-promotion" />
+        Jump to
+      </div>
       <el-input
         placeholder="PID"
         v-model="jumpToProblem"
-        class="input-with-select" 
-        style="margin-top: 9px;"
+        class="input-with-select"
       >
         <template slot="prepend">#.</template>
         <el-button slot="append" icon="el-icon-top-right" @click="jump"></el-button>
diff --git a/src/components/problem/list.vue b/src/components/problem/list.vue
index c7ac5d1b..fd8dc5e5 100644
--- a/src/components/problem/list.vue
+++ b/src/components/problem/list.vue
@@ -1,65 +1,52 @@
 <template>
   <div>
-    <el-row :gutter="20">
-      <el-col :span="10">
+    <el-row :gutter="20" style="margin-bottom: 30px">
+      <el-col :span="18">
+        <el-card v-if="alive">
+          <AjaxTable
+            :ajax_url="ajax_url"
+            :columns="columns"
+            :limit="limit"
+            :total="data_count"
+            :process="process"
+            :default_sort="{prop: 'pid', order: 'ascending'}"
+            :costumData="{title:title}"
+            pagination_class="problem-list-pagination"
+          />
+        </el-card>
+      </el-col>
+
+      <el-col :span="6">
         <el-card>
-          <i class="el-icon-search" />
-          Search
+          <div slot="header" class="clearfix">
+            <i class="el-icon-search" />
+            Search
+          </div>
           <el-input
             placeholder="Search"
             v-model="searchTitle"
-            class="input-with-select" 
-            style="margin-top: 9px;"
+            class="input-with-select"
             clearable
           >
           </el-input>
         </el-card>
-      </el-col>
-      <el-col :span="6">
-        <JumpToProblem />
-      </el-col>
-      <el-col :span="8">
-        <el-card>
-          <el-row :gutter="20">
-            <el-col :span="16">
-              <span>
-                <i class="el-icon-s-grid" />
-                Columns
-              </span>
-              <el-slider
-                v-model="limit"
-                :step="10"
-                :min="10"
-                style="margin-top: 10px;"
-              />
-            </el-col>
-            <el-col :span="8">
-              <div>
-                <i class="el-icon-collection-tag" />
-                Show Tags
-              </div>
-              <el-switch
-                v-model="showTags"
-                active-color="#13ce66"
-                inactive-color="#ff4949"
-                style="margin-top: 18px;"
-              />
-            </el-col>
-          </el-row>
+        <JumpToProblem class="item" />
+        <el-card class="item">
+          <span>
+            <i class="el-icon-s-grid" />
+            Columns
+          </span>
+          <el-slider
+            v-model="limit"
+            :step="10"
+            :min="10"
+            style="margin-top: 10px;"
+          />
+          <el-divider />
+          <el-checkbox v-model="showTags"> Show Tags</el-checkbox>
         </el-card>
       </el-col>
     </el-row>
-    <el-card class="item" v-if="alive">
-      <AjaxTable
-        :ajax_url="ajax_url"
-        :columns="columns"
-        :limit="limit"
-        :total="data_count"
-        :process="process"
-        :default_sort="{prop: 'pid', order: 'ascending'}"
-        :costumData="{title:title}"
-      />
-    </el-card>
   </div>
 </template>
 

From 69d3dfc356a3a439db8c0864b5ac8f0b7cca367a Mon Sep 17 00:00:00 2001
From: zhangtianli2006 <49156174+zhangtianli2006@users.noreply.github.com>
Date: Fri, 14 Aug 2020 15:34:32 +0800
Subject: [PATCH 2/7] run lint

Signed-off-by: zhangtianli2006 <49156174+zhangtianli2006@users.noreply.github.com>
---
 src/assets/css/basic.css         | 2 +-
 src/components/lib/AjaxTable.vue | 5 -----
 src/components/problem/list.vue  | 2 +-
 3 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/src/assets/css/basic.css b/src/assets/css/basic.css
index bd0bc407..2e748da2 100644
--- a/src/assets/css/basic.css
+++ b/src/assets/css/basic.css
@@ -200,7 +200,7 @@ h3::before {
     max-width: 100vw;
     width: 827px;
     text-align: center;
-    bottom: 0px;
+    bottom: 0;
     position: fixed;
 }
 
diff --git a/src/components/lib/AjaxTable.vue b/src/components/lib/AjaxTable.vue
index cc197a1b..0c199610 100644
--- a/src/components/lib/AjaxTable.vue
+++ b/src/components/lib/AjaxTable.vue
@@ -120,8 +120,3 @@ export default {
   },
 };
 </script>
-
-<style scoped>
-.pagination {
-}
-</style>
diff --git a/src/components/problem/list.vue b/src/components/problem/list.vue
index fd8dc5e5..5ce30fdb 100644
--- a/src/components/problem/list.vue
+++ b/src/components/problem/list.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <el-row :gutter="20" style="margin-bottom: 30px">
+    <el-row :gutter="20" style="margin-bottom: 30px;">
       <el-col :span="18">
         <el-card v-if="alive">
           <AjaxTable

From afb4af83ac08fe96d2c2bac35c7d0c8a82f08f3f Mon Sep 17 00:00:00 2001
From: zhangtianli2006 <49156174+zhangtianli2006@users.noreply.github.com>
Date: Fri, 14 Aug 2020 17:14:14 +0800
Subject: [PATCH 3/7] add create problem

Signed-off-by: zhangtianli2006 <49156174+zhangtianli2006@users.noreply.github.com>
---
 src/assets/css/basic.css          | 17 ++++++
 src/components/problem/create.vue | 88 +++++++++++++++++++++++++++++++
 src/components/problem/list.vue   | 10 +++-
 src/components/user/login.vue     |  1 -
 src/store/createProblem.js        |  7 +++
 src/store/store.js                |  2 +
 6 files changed, 122 insertions(+), 3 deletions(-)
 create mode 100644 src/components/problem/create.vue
 create mode 100644 src/store/createProblem.js

diff --git a/src/assets/css/basic.css b/src/assets/css/basic.css
index 2e748da2..c3e08482 100644
--- a/src/assets/css/basic.css
+++ b/src/assets/css/basic.css
@@ -204,6 +204,23 @@ h3::before {
     position: fixed;
 }
 
+.el-dialog,
+.el-dialog__wrapper {
+    z-index: 200000 !important;
+}
+
+.v-modal {
+    z-index: 100000 !important;
+}
+
 * {
     border-radius: 0 !important;
 }
+
+.icon-error {
+    color: #f56c6c !important;
+}
+
+.icon-success {
+    color: #67c23a !important;
+}
diff --git a/src/components/problem/create.vue b/src/components/problem/create.vue
new file mode 100644
index 00000000..0108f33a
--- /dev/null
+++ b/src/components/problem/create.vue
@@ -0,0 +1,88 @@
+<template>
+  <el-dialog
+    title="Create New Problem"
+    :visible.sync="$store.state.createProblem.displayCreateProblem"
+    width="500px"
+    class="max-screen"
+  >
+    <el-form>
+      <div class="icon-lable">
+        <i class="el-icon-s-operation" />
+        PID
+      </div>
+      <el-form-item prop="username">
+        <el-input v-model="pid" placeholder="PID">
+          <template slot="prepend">#.</template>
+          <i v-if="errorPID" slot="suffix" class="icon-error el-input__icon el-icon-circle-close"></i>
+          <i v-else slot="suffix" class="icon-success el-input__icon el-icon-circle-check"></i>
+        </el-input>
+      </el-form-item>
+      <div class="icon-lable">
+        <i class="el-icon-edit-outline" />
+        Title
+      </div>
+      <el-form-item>
+        <el-input v-model="title" placeholder="Title"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          type="primary"
+          v-on:click="Submit();"
+        >
+          Edit Detail
+        </el-button>
+        <el-button v-on:click="$store.state.createProblem.displayCreateProblem = false">Cancel</el-button>
+      </el-form-item>
+    </el-form>
+  </el-dialog>
+</template>
+
+<script>
+import apiurl from './../../apiurl';
+
+export default {
+  name: 'CreateProblem',
+  data() {
+    return {
+      pid: null,
+      title: null,
+      errorPID: true
+    };
+  },
+  watch: {
+    pid(val) {
+      this.$axios
+        .get(apiurl('/problem/' + String(val)))
+        .then(() => {
+          this.errorPID = true;
+        })
+        .catch(() => {
+          this.errorPID = false;
+        });
+    }
+  },
+  methods: {
+    Submit() {
+      this.$axios
+        .post(apiurl('/problem'), {
+          pid: this.pid,
+          title: this.title,
+          description: 'Input description'
+        })
+        .then(() => {
+          this.$store.state.createProblem.displayCreateProblem = false;
+          this.$router.push('/problem/' + this.pid + '/edit');
+        })
+        .catch(err => {
+          if (err.request.status === 400) {
+            this.$SegmentMessage.error(this, 'PID or title is empty');
+          } else if(err.request.status === 403) {
+            this.$SegmentMessage.error(this, 'Permission denied');
+          } else {
+            this.$SegmentMessage.error(this, 'Unkown error');
+          }
+        });
+    }
+  }
+};
+</script>
diff --git a/src/components/problem/list.vue b/src/components/problem/list.vue
index 5ce30fdb..7bf491b3 100644
--- a/src/components/problem/list.vue
+++ b/src/components/problem/list.vue
@@ -44,9 +44,13 @@
           />
           <el-divider />
           <el-checkbox v-model="showTags"> Show Tags</el-checkbox>
+          <el-divider />
+          <el-button type="info" style="width: 100%" @click="$store.state.createProblem.displayCreateProblem = true" plain>Create New Problem</el-button>
         </el-card>
       </el-col>
     </el-row>
+
+    <CreateProblem />
   </div>
 </template>
 
@@ -55,6 +59,7 @@ import apiurl from './../../apiurl';
 import AjaxTable from './../lib/AjaxTable.vue';
 import JumpToProblem from './../lib/jumpToProblem.vue';
 import listTag from './listTag.vue';
+import CreateProblem from './create.vue';
 
 export default {
   name: 'ProblemList',
@@ -83,7 +88,7 @@ export default {
         sortable: false
       }, {
         name: 'tag',
-        width: '400',
+        width: '300',
         align: 'right',
         sortable: false
       }],
@@ -166,7 +171,8 @@ export default {
   },
   components: {
     AjaxTable,
-    JumpToProblem
+    JumpToProblem,
+    CreateProblem
   },
   mounted() {
     this.get_list_lenth();
diff --git a/src/components/user/login.vue b/src/components/user/login.vue
index 9e27b008..aa7995d9 100644
--- a/src/components/user/login.vue
+++ b/src/components/user/login.vue
@@ -4,7 +4,6 @@
       title="Login"
       :visible.sync="$store.state.user.showlogin"
       :destroy-on-close="true"
-      :close-on-click-modal="false"
       width="500px"
       class="max-screen"
       >
diff --git a/src/store/createProblem.js b/src/store/createProblem.js
new file mode 100644
index 00000000..b8d5de05
--- /dev/null
+++ b/src/store/createProblem.js
@@ -0,0 +1,7 @@
+const createProblem = {
+  state: {
+    displayCreateProblem: false
+  }
+};
+
+export default createProblem;
\ No newline at end of file
diff --git a/src/store/store.js b/src/store/store.js
index 1b5477d1..109491d8 100644
--- a/src/store/store.js
+++ b/src/store/store.js
@@ -6,11 +6,13 @@ Vue.use(Vuex);
 import userstore from './user';
 import captchastore from './captcha';
 import tagsstore from './tags';
+import createProblem from './createProblem';
 
 export default new Vuex.Store({
   modules: {
     user: userstore,
     captcha: captchastore,
     tags: tagsstore,
+    createProblem: createProblem,
   }
 });
\ No newline at end of file

From b0f1559deef4de81257229c34e52633d6aa38830 Mon Sep 17 00:00:00 2001
From: zhangtianli2006 <49156174+zhangtianli2006@users.noreply.github.com>
Date: Fri, 14 Aug 2020 17:18:06 +0800
Subject: [PATCH 4/7] run lint

Signed-off-by: zhangtianli2006 <49156174+zhangtianli2006@users.noreply.github.com>
---
 src/components/problem/list.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/problem/list.vue b/src/components/problem/list.vue
index 7bf491b3..a37404dc 100644
--- a/src/components/problem/list.vue
+++ b/src/components/problem/list.vue
@@ -45,7 +45,14 @@
           <el-divider />
           <el-checkbox v-model="showTags"> Show Tags</el-checkbox>
           <el-divider />
-          <el-button type="info" style="width: 100%" @click="$store.state.createProblem.displayCreateProblem = true" plain>Create New Problem</el-button>
+          <el-button
+            type="info"
+            style="width: 100%"
+            @click="$store.state.createProblem.displayCreateProblem = true;"
+            plain
+          >
+            Create New Problem
+          </el-button>
         </el-card>
       </el-col>
     </el-row>

From ec618ba63c999ada043404e11f6c2b6a6e04e6c8 Mon Sep 17 00:00:00 2001
From: zhangtianli2006 <49156174+zhangtianli2006@users.noreply.github.com>
Date: Fri, 14 Aug 2020 17:20:29 +0800
Subject: [PATCH 5/7] run lint

Signed-off-by: zhangtianli2006 <49156174+zhangtianli2006@users.noreply.github.com>
---
 src/components/problem/list.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/problem/list.vue b/src/components/problem/list.vue
index a37404dc..bd4c2bb9 100644
--- a/src/components/problem/list.vue
+++ b/src/components/problem/list.vue
@@ -47,7 +47,7 @@
           <el-divider />
           <el-button
             type="info"
-            style="width: 100%"
+            style="width: 100%;"
             @click="$store.state.createProblem.displayCreateProblem = true;"
             plain
           >

From 03fce6a040b50444fc52d0a22477a0062d2b8784 Mon Sep 17 00:00:00 2001
From: zhangtianli2006 <49156174+zhangtianli2006@users.noreply.github.com>
Date: Fri, 14 Aug 2020 18:16:19 +0800
Subject: [PATCH 6/7] improved create problem

Signed-off-by: zhangtianli2006 <49156174+zhangtianli2006@users.noreply.github.com>
---
 src/components/problem/create.vue | 35 ++++++++++++++++++++++---------
 src/components/problem/list.vue   |  4 ++--
 2 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/src/components/problem/create.vue b/src/components/problem/create.vue
index 0108f33a..7522d602 100644
--- a/src/components/problem/create.vue
+++ b/src/components/problem/create.vue
@@ -22,12 +22,16 @@
         Title
       </div>
       <el-form-item>
-        <el-input v-model="title" placeholder="Title"></el-input>
+        <el-input v-model="title" placeholder="Title">
+          <i v-if="errorTitle" slot="suffix" class="icon-error el-input__icon el-icon-circle-close"></i>
+          <i v-else slot="suffix" class="icon-success el-input__icon el-icon-circle-check"></i>
+        </el-input>
       </el-form-item>
       <el-form-item>
         <el-button
           type="primary"
           v-on:click="Submit();"
+          :disabled="errorPID || errorTitle"
         >
           Edit Detail
         </el-button>
@@ -46,19 +50,30 @@ export default {
     return {
       pid: null,
       title: null,
-      errorPID: true
+      errorPID: true,
+      errorTitle: true
     };
   },
   watch: {
     pid(val) {
-      this.$axios
-        .get(apiurl('/problem/' + String(val)))
-        .then(() => {
-          this.errorPID = true;
-        })
-        .catch(() => {
-          this.errorPID = false;
-        });
+      if (val === '') {
+        this.errorPID = true;
+      } else {
+        this.$axios
+          .get(apiurl('/problem/' + String(val)))
+          .then(() => {
+            this.errorPID = true;
+          })
+          .catch(() => {
+            this.errorPID = false;
+          });
+      }
+    },
+    title(val) {
+      console.log(val);
+      if (val !== null && val !== '') {
+        this.errorTitle = false;
+      }
     }
   },
   methods: {
diff --git a/src/components/problem/list.vue b/src/components/problem/list.vue
index bd4c2bb9..f73a0a14 100644
--- a/src/components/problem/list.vue
+++ b/src/components/problem/list.vue
@@ -46,11 +46,11 @@
           <el-checkbox v-model="showTags"> Show Tags</el-checkbox>
           <el-divider />
           <el-button
-            type="info"
             style="width: 100%;"
             @click="$store.state.createProblem.displayCreateProblem = true;"
-            plain
+            size="medium"
           >
+            <i class="el-icon-circle-plus" />
             Create New Problem
           </el-button>
         </el-card>

From 605f1a7c6652ef5dff9aa334b65620c913e2a0f0 Mon Sep 17 00:00:00 2001
From: zhangtianli2006 <49156174+zhangtianli2006@users.noreply.github.com>
Date: Fri, 14 Aug 2020 18:16:51 +0800
Subject: [PATCH 7/7] removed console log

Signed-off-by: zhangtianli2006 <49156174+zhangtianli2006@users.noreply.github.com>
---
 src/components/problem/create.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/problem/create.vue b/src/components/problem/create.vue
index 7522d602..3d4dde59 100644
--- a/src/components/problem/create.vue
+++ b/src/components/problem/create.vue
@@ -70,7 +70,6 @@ export default {
       }
     },
     title(val) {
-      console.log(val);
       if (val !== null && val !== '') {
         this.errorTitle = false;
       }