improved problem list style

src/assets/css/basic.css

@@ -191,6 +191,36 @@ 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: 0;
+    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;
+}

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,15 +112,11 @@ export default {
     default_sort: {
       type: Object,
       default: null
+    },
+    pagination_class: {
+      type: String,
+      default: 'pagination'
     }
   },
 };
 </script>
-
-<style scoped>
-.pagination {
-    height: 36px;
-    margin-top: 20px;
-    text-align: center;
-}
-</style>

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>

src/components/problem/create.vue

@@ -0,0 +1,102 @@
+<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">
+          <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>
+        <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,
+      errorTitle: true
+    };
+  },
+  watch: {
+    pid(val) {
+      if (val === '') {
+        this.errorPID = true;
+      } else {
+        this.$axios
+          .get(apiurl('/problem/' + String(val)))
+          .then(() => {
+            this.errorPID = true;
+          })
+          .catch(() => {
+            this.errorPID = false;
+          });
+      }
+    },
+    title(val) {
+      if (val !== null && val !== '') {
+        this.errorTitle = 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>

src/components/problem/list.vue

@@ -1,65 +1,63 @@
 <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-divider />
+          <el-button
+            style="width: 100%;"
+            @click="$store.state.createProblem.displayCreateProblem = true;"
+            size="medium"
+          >
+            <i class="el-icon-circle-plus" />
+            Create New Problem
+          </el-button>
         </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>
+
+    <CreateProblem />
   </div>
 </template>
 
@@ -68,6 +66,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',
@@ -96,7 +95,7 @@ export default {
         sortable: false
       }, {
         name: 'tag',
-        width: '400',
+        width: '300',
         align: 'right',
         sortable: false
       }],
@@ -179,7 +178,8 @@ export default {
   },
   components: {
     AjaxTable,
-    JumpToProblem
+    JumpToProblem,
+    CreateProblem
   },
   mounted() {
     this.get_list_lenth();

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"
       >

src/store/createProblem.js

@@ -0,0 +1,7 @@
+const createProblem = {
+  state: {
+    displayCreateProblem: false
+  }
+};
+
+export default createProblem;

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,
   }
 });